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

Merge pull request #7159 from diegobenetti/issue6613-cursor-not-showing-multi-user-whiteboard

Browse Source 
Cursor not showing multi user whiteboard
This commit is contained in:
Anton Georgiev 2019-05-07 11:34:51 -04:00 committed by GitHub
commit 0803f814c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bigbluebutton-html5/imports/ui/components/cursor/service.js
View File

@ -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);
}

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

@ -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 ?
<g>
<rect
fill="white"
fillOpacity="0.8"
x={boxX}
y={boxY}
width={cursorLabelBox.width}
height={cursorLabelBox.height}
strokeWidth={cursorLabelBox.strokeWidth}
stroke={fill}
strokeOpacity="0.8"
/>
<text
ref={(ref) => { 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}
</text>
<clipPath id={this.props.cursorId}>
{this.displayLabel
? (
<g>
<rect
fill="white"
fillOpacity="0.8"
x={boxX}
y={boxY}
width={cursorLabelBox.width}
height={cursorLabelBox.height}
strokeWidth={cursorLabelBox.strokeWidth}
stroke={fill}
strokeOpacity="0.8"
/>
</clipPath>
</g>
: null }
<text
ref={(ref) => { 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}
</text>
<clipPath id={this.props.cursorId}>
<rect
x={boxX}
y={boxY}
width={cursorLabelBox.width}
height={cursorLabelBox.height}
/>
</clipPath>
</g>
)
: null }
</g>
);
}

43
bigbluebutton-html5/imports/ui/components/presentation/presentation-overlay/component.jsx
View File

@ -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,
@ -472,31 +470,24 @@ 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
if (!this.intervalId) {
this.mouseEnterHandler();
}
this.currentClientX = event.clientX;
this.currentClientY = event.clientY;
this.checkCursor();
}
mouseEnterHandler() {
mouseEnterHandler(event) {
if (this.touchStarted) {
return;
}
const intervalId = setInterval(this.checkCursor, CURSOR_INTERVAL);
this.intervalId = intervalId;
this.currentClientX = event.clientX;
this.currentClientY = event.clientY;
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;