From 8172d8215ecdd23d6e59484bbfbfe947c121a944 Mon Sep 17 00:00:00 2001 From: Diego Benetti Date: Wed, 3 Apr 2019 14:45:53 -0300 Subject: [PATCH 1/3] Fix to show presenter's name correctly alongside the cursor when multiuser whiteboard is active --- .../imports/ui/components/cursor/service.js | 12 +-- .../presentation/cursor/component.jsx | 82 +++++++++---------- .../presentation-overlay/component.jsx | 31 +++---- 3 files changed, 60 insertions(+), 65 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/cursor/service.js b/bigbluebutton-html5/imports/ui/components/cursor/service.js index f6bb338930..db01b2a104 100755 --- a/bigbluebutton-html5/imports/ui/components/cursor/service.js +++ b/bigbluebutton-html5/imports/ui/components/cursor/service.js @@ -20,23 +20,23 @@ function updateCursor(meetingId, userId, payload) { }, }; - return Cursor.upsert(selector, modifier); + return Cursor.upsert(selector, modifier); } CursorStreamer.on('message', ({ meetingId, cursors }) => { - Object.keys(cursors).forEach(userId => { + Object.keys(cursors).forEach((userId) => { if (Auth.meetingID === meetingId && Auth.userID === userId) return; updateCursor(meetingId, userId, cursors[userId]); }); }); -const throttledEmit = throttle(CursorStreamer.emit.bind(CursorStreamer), 30, { 'trailing': false }); +const throttledEmit = throttle(CursorStreamer.emit.bind(CursorStreamer), 30, { trailing: true }); export function publishCursorUpdate(payload) { throttledEmit('publish', { - credentials: Auth.credentials, - payload, - }); + credentials: Auth.credentials, + payload, + }); return updateCursor(Auth.meetingID, Auth.userID, payload); } diff --git a/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx index b64f67cd72..8810560122 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; export default class Cursor extends Component { - static scale(attribute, widthRatio, physicalWidthRatio) { return ((attribute * widthRatio) / 100) / physicalWidthRatio; } @@ -67,7 +66,9 @@ export default class Cursor extends Component { } componentWillMount() { - const { cursorX, cursorY, slideWidth, slideHeight, presenter, isMultiUser } = this.props; + const { + cursorX, cursorY, slideWidth, slideHeight, presenter, isMultiUser, + } = this.props; // setting the initial cursor info this.scaledSizes = Cursor.getScaledSizes(this.props); @@ -109,11 +110,10 @@ export default class Cursor extends Component { this.fill = fill; } - if ((widthRatio !== nextProps.widthRatio || - physicalWidthRatio !== nextProps.physicalWidthRatio) - || - (labelBoxWidth !== nextProps.labelBoxWidth || - labelBoxHeight !== nextProps.labelBoxHeight)) { + if ((widthRatio !== nextProps.widthRatio + || physicalWidthRatio !== nextProps.physicalWidthRatio) + || (labelBoxWidth !== nextProps.labelBoxWidth + || labelBoxHeight !== nextProps.labelBoxHeight)) { this.scaledSizes = Cursor.getScaledSizes(nextProps); } @@ -132,11 +132,9 @@ export default class Cursor extends Component { calculateCursorLabelBoxDimensions() { let labelBoxWidth = 0; let labelBoxHeight = 0; - if (this.cursorLabelRef) { const { width, height } = this.cursorLabelRef.getBBox(); const { widthRatio, physicalWidthRatio } = this.props; - labelBoxWidth = Cursor.invertScale(width, widthRatio, physicalWidthRatio); labelBoxHeight = Cursor.invertScale(height, widthRatio, physicalWidthRatio); @@ -175,44 +173,46 @@ export default class Cursor extends Component { fill={fill} fillOpacity="0.6" /> - {this.displayLabel ? - - - { this.cursorLabelRef = ref; }} - x={x} - y={y} - dy={cursorLabelText.textDY} - dx={cursorLabelText.textDX} - fontFamily="Arial" - fontWeight="600" - fill={fill} - fillOpacity="0.8" - fontSize={cursorLabelText.fontSize} - clipPath={`url(#${this.props.cursorId})`} - > - {this.props.userName} - - + {this.displayLabel + ? ( + - - - : null } + { this.cursorLabelRef = ref; }} + x={x} + y={y} + dy={cursorLabelText.textDY} + dx={cursorLabelText.textDX} + fontFamily="Arial" + fontWeight="600" + fill={fill} + fillOpacity="0.8" + fontSize={cursorLabelText.fontSize} + clipPath={`url(#${this.props.cursorId})`} + > + {this.props.userName} + + + + + + ) + : null } ); } diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx index d95b52b5c3..e806b8562e 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx @@ -149,13 +149,6 @@ export default class PresentationOverlay extends Component { } } - checkResize(prevPresentationSize) { - const { presentationSize } = this.props; - const heightChanged = prevPresentationSize.presentationHeight !== presentationSize.presentationHeight; - const widthChanged = prevPresentationSize.presentationWidth !== presentationSize.presentationWidth; - return heightChanged || widthChanged; - } - onZoom(zoomValue, mouseX, mouseY) { let absXcoordInPage = (Math.abs(this.calcPageX) * MYSTERY_NUM) + mouseX; let absYcoordInPage = (Math.abs(this.calcPageY) * MYSTERY_NUM) + mouseY; @@ -171,14 +164,12 @@ export default class PresentationOverlay extends Component { this.calcPageH = (this.viewportH * zoomValue) / HUNDRED_PERCENT; this.calcPageW = (this.pageOrigW / this.pageOrigH) * this.calcPageH; } + } else if (this.props.fitToWidth) { + this.calcPageW = (this.viewportW * zoomValue) / HUNDRED_PERCENT; + this.calcPageH = (this.calcPageW / this.pageOrigW) * this.pageOrigH; } else { - if (this.props.fitToWidth) { - this.calcPageW = (this.viewportW * zoomValue) / HUNDRED_PERCENT; - this.calcPageH = (this.calcPageW / this.pageOrigW) * this.pageOrigH; - } else { - this.calcPageW = (this.viewportW * zoomValue) / HUNDRED_PERCENT; - this.calcPageH = (this.viewportH * zoomValue) / HUNDRED_PERCENT; - } + this.calcPageW = (this.viewportW * zoomValue) / HUNDRED_PERCENT; + this.calcPageH = (this.viewportH * zoomValue) / HUNDRED_PERCENT; } absXcoordInPage = relXcoordInPage * this.calcPageW; @@ -206,6 +197,13 @@ export default class PresentationOverlay extends Component { return screenPoint.matrixTransform(CTM.inverse()); } + checkResize(prevPresentationSize) { + const { presentationSize } = this.props; + const heightChanged = prevPresentationSize.presentationHeight !== presentationSize.presentationHeight; + const widthChanged = prevPresentationSize.presentationWidth !== presentationSize.presentationWidth; + return heightChanged || widthChanged; + } + panZoom() { const { delta, @@ -487,16 +485,13 @@ export default class PresentationOverlay extends Component { if (this.touchStarted) { return; } - - const intervalId = setInterval(this.checkCursor, CURSOR_INTERVAL); - this.intervalId = intervalId; + this.checkCursor(); } mouseOutHandler() { // mouse left the whiteboard, removing the interval clearInterval(this.intervalId); this.intervalId = 0; - // setting the coords to negative values and send the last message (the cursor will disappear) this.currentClientX = -1; this.currentClientY = -1; From 4909c6a46a715d4cbf8331bddfd53c829ea886ac Mon Sep 17 00:00:00 2001 From: Diego Benetti Date: Wed, 3 Apr 2019 16:47:31 -0300 Subject: [PATCH 2/3] Removed if statement which had no use now --- .../presentation/presentation-overlay/component.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx index e806b8562e..a7c72244e3 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx @@ -473,9 +473,7 @@ export default class PresentationOverlay extends Component { // for the case where you change settings in one of the lists (which are displayed on the slide) // the mouse starts pointing to the slide right away and mouseEnter doesn't fire // so we call it manually here - if (!this.intervalId) { - this.mouseEnterHandler(); - } + this.mouseEnterHandler(); this.currentClientX = event.clientX; this.currentClientY = event.clientY; From 51bff92d74e95a86689c9c9a07bb62defa81e184 Mon Sep 17 00:00:00 2001 From: Diego Benetti Date: Thu, 4 Apr 2019 18:15:52 -0300 Subject: [PATCH 3/3] Fixes cursor coordinates issues --- .../presentation/presentation-overlay/component.jsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx index a7c72244e3..ba29204767 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx @@ -470,19 +470,17 @@ export default class PresentationOverlay extends Component { if (this.touchStarted) { return; } - // for the case where you change settings in one of the lists (which are displayed on the slide) - // the mouse starts pointing to the slide right away and mouseEnter doesn't fire - // so we call it manually here - this.mouseEnterHandler(); - this.currentClientX = event.clientX; this.currentClientY = event.clientY; + this.checkCursor(); } - mouseEnterHandler() { + mouseEnterHandler(event) { if (this.touchStarted) { return; } + this.currentClientX = event.clientX; + this.currentClientY = event.clientY; this.checkCursor(); }