diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx index b01dc3d0ae6d82ce6e102d6ac29217cc197bafdd..d8bd8a62947e5842b14b3425f8bd12111e7c9d7d 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx +++ b/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> diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/cursor/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/cursor/component.jsx index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..bd65605e15dde50ca1c5e5a7061c27af47ae6db8 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/cursor/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/cursor/component.jsx @@ -0,0 +1,67 @@ +import React, { Component, PropTypes } from 'react'; +import WhiteboardService from '/imports/ui/components/whiteboard/service.js'; + +const propTypes = { + + //Defines the cursor x position + cx: PropTypes.number, + + //Defines the cursor y position + cy: PropTypes.number, + + /** + * 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; diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/service.js index e0a2fc09e9ae612a6471e1b4c7b1a08dc7d7afe9..636ac9926b2e2d73989c2526e7b6b4a6389b0eaa 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js +++ b/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, }; };