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

fix(tldraw): fit-to-width / presenter change view area sync

Browse Source 
- Correctly sync the viewed area when in fit-to-width mode and when the presenter reloades the page or the presenter changes to another user.
This commit is contained in:
germanocaumo 2022-08-18 18:18:02 +00:00
parent 98d431ad92
commit 99549d880f
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
View File

@ -163,16 +163,10 @@ export default function Whiteboard(props) {
const zoom = calculateZoom(slidePosition.width, slidePosition.height)
tldrawAPI?.setCamera([0, 0], zoom);
const viewedRegionH = SlideCalcUtil.calcViewedRegionHeight(tldrawAPI?.viewport.width, slidePosition.height);
console.log(" ", tldrawAPI?.viewport, viewedRegionH, 0 ,0);
zoomSlide(parseInt(curPageId), podId, HUNDRED_PERCENT, viewedRegionH, 0, 0);
} else {
const zoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight);
if (fitToWidth) {
tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], zoom, 'zoomed');
} else {
tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], zoom);
}
tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], zoom);
}
}
}, [presentationWidth, presentationHeight, curPageId, document?.documentElement?.dir]);
@ -205,6 +199,14 @@ export default function Whiteboard(props) {
}
}, [zoomValue]);
// update zoom when presenter changes
React.useEffect(() => {
if (tldrawAPI && isPresenter && curPageId && slidePosition) {
const zoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight)
tldrawAPI.setCamera([slidePosition.x, slidePosition.y], zoom, 'zoomed');
}
}, [isPresenter]);
const hasWBAccess = props?.hasMultiUserAccess(props.whiteboardId, props.currentUser.userId);
React.useEffect(() => {
@ -251,8 +253,12 @@ export default function Whiteboard(props) {
if (curPageId) {
app.changePage(curPageId);
const zoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight)
app.setCamera([slidePosition.x, slidePosition.y], zoom);
setIsMounting(false);
// wee need this to ensure tldraw updates the viewport size
// after re-mounting
setTimeout(() => {
app.setCamera([slidePosition.x, slidePosition.y], zoom, 'zoomed');
setIsMounting(false);
}, 50);
}
};