BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed a bug with the cursor scaling depending on the size of the slide and added an animation for its scaling back

Browse Source
This commit is contained in:
Oleksandr Zhurbenko 2017-04-27 15:21:04 -07:00
parent 0039eba840
commit a7966f23be
1 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx
View File

@ -14,15 +14,18 @@ const propTypes = {
//y Position of the view box //y Position of the view box
viewBoxY: PropTypes.number.isRequired, viewBoxY: PropTypes.number.isRequired,
//Slide to view box width ratio
widthRatio: PropTypes.number.isRequired,
//Defines the cursor x position //Defines the cursor x position
cursorX: PropTypes.number.isRequired, cursorX: PropTypes.number.isRequired,
//Defines the cursor y position //Defines the cursor y position
cursorY: PropTypes.number.isRequired, cursorY: PropTypes.number.isRequired,
//Slide to view box width ratio
widthRatio: PropTypes.number.isRequired,
//Slide physical size to original size ratio
physicalWidthRatio: PropTypes.number.isRequired,
/** /**
* Defines the cursor fill colour * Defines the cursor fill colour
* @defaultValue 'red' * @defaultValue 'red'
@ -45,11 +48,10 @@ export default class Cursor extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
cx: 0, prevData: undefined,
cy: 0, currentData: undefined,
finalRadius: 5, defaultRadius: 5,
fill: 'red', };
}
} }
componentWillMount() { componentWillMount() {
@ -57,6 +59,7 @@ export default class Cursor extends Component {
this.setState({ this.setState({
currentData: calculatedData, currentData: calculatedData,
prevData: calculatedData, prevData: calculatedData,
defaultRadius: calculatedData.finalRadius,
}); });
} }
@ -69,9 +72,11 @@ export default class Cursor extends Component {
} }
componentDidUpdate() { componentDidUpdate() {
const { cursor } = this.refs; const { cursorCoordinates, cursorRadius } = this.refs;
var node = findDOMNode(cursor); var node1 = findDOMNode(cursorCoordinates);
node.beginElement(); var node2 = findDOMNode(cursorRadius);
node1.beginElement();
node2.beginElement();
} }
calculatePositionAndRadius(propsObj) { calculatePositionAndRadius(propsObj) {
@ -80,7 +85,8 @@ export default class Cursor extends Component {
cx: (propsObj.cursorX * propsObj.viewBoxWidth) + propsObj.viewBoxX, cx: (propsObj.cursorX * propsObj.viewBoxWidth) + propsObj.viewBoxX,
cy: (propsObj.cursorY * propsObj.viewBoxHeight) + propsObj.viewBoxY, cy: (propsObj.cursorY * propsObj.viewBoxHeight) + propsObj.viewBoxY,
//Adjust the radius of the cursor according to zoom //Adjust the radius of the cursor according to zoom
finalRadius: propsObj.radius * propsObj.widthRatio / 100, //and divide it by the physicalWidth ratio, so that svg scaling wasn't applied to the cursor
finalRadius: (propsObj.radius * propsObj.widthRatio / 100) / this.props.physicalWidthRatio,
fill: propsObj.fill, fill: propsObj.fill,
} }
} }
@ -93,11 +99,11 @@ export default class Cursor extends Component {
return ( return (
<circle <circle
r={currentData.finalRadius} r={this.state.defaultRadius}
fill={currentData.fill} fill={currentData.fill}
> >
<animateTransform <animateTransform
ref="cursor" ref="cursorCoordinates"
attributeName="transform" attributeName="transform"
type="translate" type="translate"
from={prevData.cx + " " + prevData.cy} from={prevData.cx + " " + prevData.cy}
@ -107,6 +113,17 @@ export default class Cursor extends Component {
repeatCount="0" repeatCount="0"
fill="freeze" fill="freeze"
/> />
<animate
ref="cursorRadius"
attributeName="r"
attributeType="XML"
from={prevData.finalRadius}
to={currentData.finalRadius}
begin={'indefinite'}
dur="0.2s"
repeatCount="0"
fill="freeze"
/>
</circle> </circle>
); );
} }