Merge pull request #3219 from Lajellu/cursorTrack

Displays cursor to HTML5

bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import WhiteboardShapeModel from './shape-factory/component.jsx';
+import Cursor from './cursor/component.jsx';
 import { createContainer } from 'meteor/react-meteor-data';
 import Slide from './slide/component.jsx';
 import styles from './styles.scss';
@@ -62,6 +63,15 @@ export default class Whiteboard extends React.Component {
                 />
                 )
               : null }
+              <Cursor
+                viewBoxWidth={viewBoxWidth}
+                viewBoxHeight={viewBoxHeight}
+                viewBoxX={x}
+                viewBoxY={y}
+                widthRatio={slideObj.width_ratio}
+                cursorX={this.props.cursor[0].x}
+                cursorY={this.props.cursor[0].y}
+              />
             </g>
           </svg>
         </ReactCSSTransitionGroup>

bigbluebutton-html5/imports/ui/components/whiteboard/cursor/component.jsx

@@ -0,0 +1,81 @@
+import React, { Component, PropTypes } from 'react';
+import WhiteboardService from '/imports/ui/components/whiteboard/service.js';
+
+const propTypes = {
+  //Width of the view box
+  viewBoxWidth: PropTypes.number.isRequired,
+
+  //Height of the view box
+  viewBoxHeight: PropTypes.number.isRequired,
+
+  //x Position of the view box
+  viewBoxX: PropTypes.number.isRequired,
+
+  //y Position of the view box
+  viewBoxY: PropTypes.number.isRequired,
+
+  //Slide to view box width ratio
+  widthRatio: PropTypes.number.isRequired,
+
+  //Defines the cursor x position
+  cursorX: PropTypes.number.isRequired,
+
+  //Defines the cursor y position
+  cursorY: PropTypes.number.isRequired,
+
+  /**
+   * Defines the cursor fill colour
+   * @defaultValue 'red'
+   */
+  fill: PropTypes.string,
+
+  /**
+   * Defines the cursor radius
+   * @defaultValue 5
+   */
+  radius: PropTypes.number,
+};
+
+const defaultProps = {
+  fill: 'red',
+  radius: 5,
+};
+
+export default class Cursor extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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;
+
+    return (
+      <circle
+        cx={cx}
+        cy={cy}
+        r={finalRadius}
+        fill={fill}
+      />
+    );
+  }
+}
+
+Cursor.propTypes = propTypes;
+Cursor.defaultProps = defaultProps;

bigbluebutton-html5/imports/ui/components/whiteboard/service.js

@@ -1,10 +1,12 @@
 import Presentations from '/imports/api/presentations';
 import Shapes from '/imports/api/shapes';
 import Slides from '/imports/api/slides';
+import Cursor from '/imports/api/cursor';
 
 let getWhiteboardData = () => {
   let currentSlide;
   let shapes;
+  let cursor;
   let currentPresentation = Presentations.findOne({
       'presentation.current': true,
     });
@@ -20,11 +22,16 @@ let getWhiteboardData = () => {
     shapes = Shapes.find({
         whiteboardId: currentSlide.slide.id,
       }).fetch();
+
+    cursor = Cursor.find({
+      meetingId: currentSlide.meetingId,
+    }).fetch();
   }
 
   return {
     currentSlide: currentSlide,
     shapes: shapes,
+    cursor: cursor,
   };
 };