diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx index c92665b6e4..f41e823743 100644 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx @@ -468,15 +468,14 @@ export default function Whiteboard(props) { // change tldraw camera when slidePosition changes React.useEffect(() => { + const camera = tldrawAPI?.getPageState()?.camera; if (tldrawAPI && !isPresenter && curPageId && slidePosition) { const newZoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight); tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], newZoom, 'zoomed'); } - const camera = tldrawAPI?.getPageState()?.camera; if (isPresenter && slidePosition && camera) { const zoomFitSlide = calculateZoom(slidePosition.width, slidePosition.height); - const zoomCamera = (zoomFitSlide * zoomValue) / HUNDRED_PERCENT; let zoomToolbar = Math.round( ((HUNDRED_PERCENT * camera.zoom) / zoomFitSlide) * 100, ) / 100; @@ -487,6 +486,28 @@ export default function Whiteboard(props) { } }, [curPageId, slidePosition]); + React.useEffect(() => { + if (isPresenter && slidePosition && !isMounting) { + const zoomFitSlide = calculateZoom(slidePosition?.width, slidePosition?.height); + const zoomCamera = (zoomFitSlide * zoomValue) / HUNDRED_PERCENT; + let viewedRegionW = SlideCalcUtil.calcViewedRegionWidth( + tldrawAPI?.viewport?.width, slidePosition?.width, + ); + let viewedRegionH = SlideCalcUtil.calcViewedRegionHeight( + tldrawAPI?.viewport?.height, slidePosition?.height, + ); + + zoomSlide( + parseInt(curPageId, 10), + podId, + viewedRegionW, + viewedRegionH, + slidePosition?.x, + slidePosition?.y, + ); + } + }, [curPageId]); + // update zoom according to toolbar React.useEffect(() => { if (tldrawAPI && isPresenter && curPageId && slidePosition && zoom !== zoomValue) {