From 583ec9c404474203c431ae3700ac2499eaa0f91c Mon Sep 17 00:00:00 2001
From: Oleksandr Zhurbenko <xaerok.od.ua@gmail.com>
Date: Wed, 22 Mar 2017 16:24:36 -0700
Subject: [PATCH] Added animateTransform for the cursor for smoother animation
---
.../presentation/cursor/component.jsx | 80 ++++++++++++++-----
1 file changed, 58 insertions(+), 22 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx
index 6f84391477..273c93dcd0 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx
@@ -1,4 +1,5 @@
import React, { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
const propTypes = {
//Width of the view box
@@ -43,35 +44,70 @@ const defaultProps = {
export default class Cursor extends Component {
constructor(props) {
super(props);
+ this.state = {
+ cx: 0,
+ cy: 0,
+ finalRadius: 5,
+ fill: 'red',
+ }
+ }
+
+ componentWillMount() {
+ let calculatedData = this.calculatePositionAndRadius(this.props);
+ this.setState({
+ currentData: calculatedData,
+ prevData: calculatedData,
+ });
+ }
+
+ componentWillReceiveProps(nextProps) {
+ let calculatedData = this.calculatePositionAndRadius(nextProps);
+ this.setState({
+ prevData: this.state.currentData,
+ currentData: calculatedData,
+ });
+ }
+
+ componentDidUpdate() {
+ const { cursor } = this.refs;
+ var node = findDOMNode(cursor);
+ node.beginElement();
+ }
+
+ calculatePositionAndRadius(propsObj) {
+ return {
+ //Adjust the x,y cursor position according to zoom
+ cx: (propsObj.cursorX * propsObj.viewBoxWidth) + propsObj.viewBoxX,
+ cy: (propsObj.cursorY * propsObj.viewBoxHeight) + propsObj.viewBoxY,
+ //Adjust the radius of the cursor according to zoom
+ finalRadius: propsObj.radius * propsObj.widthRatio / 100,
+ fill: propsObj.fill,
+ }
}
render() {
const {
- viewBoxWidth,
- viewBoxHeight,
- viewBoxX,
- viewBoxY,
- widthRatio,
- cursorX,
- cursorY,
- fill,
- radius,
- } = this.props;
-
- //Adjust the x,y cursor position according to zoom
- let cx = (cursorX * viewBoxWidth) + viewBoxX;
- let cy = (cursorY * viewBoxHeight) + viewBoxY;
-
- //Adjust the radius of the cursor according to zoom
- let finalRadius = radius * widthRatio / 100;
+ currentData,
+ prevData
+ } = this.state;
return (
<circle
- cx={cx}
- cy={cy}
- r={finalRadius}
- fill={fill}
- />
+ r={currentData.finalRadius}
+ fill={currentData.fill}
+ >
+ <animateTransform
+ ref="cursor"
+ attributeName="transform"
+ type="translate"
+ from={prevData.cx + " " + prevData.cy}
+ to={currentData.cx + " " + currentData.cy}
+ begin={'indefinite'}
+ dur="0.1s"
+ repeatCount="0"
+ fill="freeze"
+ />
+ </circle>
);
}
}
--
GitLab