From 450a36d244968b72038eef52474727902a7e7bb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Victor?= <joaovictornunes973@gmail.com>
Date: Thu, 1 Aug 2024 12:21:38 -0300
Subject: [PATCH] fix(presentation): presentation snapshot overflowing the
 slide

---
 .../presentation-menu/component.jsx           | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx
index 83d8ec2459..958b44a6c5 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx
@@ -86,6 +86,7 @@ const propTypes = {
   tldrawAPI: PropTypes.shape({
     copySvg: PropTypes.func.isRequired,
     getShapes: PropTypes.func.isRequired,
+    getShape: PropTypes.func.isRequired,
     currentPageId: PropTypes.string.isRequired,
   }),
 };
@@ -232,21 +233,25 @@ const PresentationMenu = (props) => {
             AppService.setDarkTheme(false);
 
             try {
-              const { copySvg, getShape, getShapes, currentPageId } = tldrawAPI;
+              const {
+                copySvg, getShape, getShapes, currentPageId,
+              } = tldrawAPI;
 
               // filter shapes that are inside the slide
               const backgroundShape = getShape('slide-background-shape');
-              const shapes = getShapes(currentPageId)
-                .filter((shape) =>
-                  shape.point[0] <= backgroundShape.size[0] &&
-                  shape.point[1] <= backgroundShape.size[1] &&
-                  shape.point[0] >= 0 &&
-                  shape.point[1] >= 0
-                );
+              const shapes = getShapes(currentPageId);
               const svgString = await copySvg(shapes.map((shape) => shape.id));
               const container = document.createElement('div');
               container.innerHTML = svgString;
               const svgElem = container.firstChild;
+              const imageElem = svgElem.getElementsByTagName('image')[0];
+              const transforms = Object.values(imageElem.transform.baseVal);
+              const translation = transforms.find(
+                (t) => t.type === SVGTransform.SVG_TRANSFORM_TRANSLATE,
+              );
+              svgElem.setAttribute('width', backgroundShape.size[0]);
+              svgElem.setAttribute('height', backgroundShape.size[1]);
+              svgElem.setAttribute('viewBox', `${translation.matrix.e} ${translation.matrix.f} ${backgroundShape.size[0]} ${backgroundShape.size[1]}`);
               const width = svgElem?.width?.baseVal?.value ?? window.screen.width;
               const height = svgElem?.height?.baseVal?.value ?? window.screen.height;