@naviedu/room-platform-react 0.0.23 → 0.0.25

package/index.esm.js

@@ -8836,15 +8836,16 @@ var WHITEBOARD_POPOVER_SIZES = {
     }
 };
 function useWhiteboardToolbarLayout() {
+    var portalContainer = usePortalContainer();
     var _useState = _sliced_to_array$v(useState(function() {
-        return getViewport();
+        return getViewport(portalContainer);
     }), 2), viewport = _useState[0], setViewport = _useState[1];
     var viewportRef = useRef(viewport);
     var _useState1 = _sliced_to_array$v(useState(false), 2), toolbarOpen = _useState1[0], setToolbarOpen = _useState1[1];
     var _useState2 = _sliced_to_array$v(useState(null), 2), activePopover = _useState2[0], setActivePopover = _useState2[1];
     var _useState3 = _sliced_to_array$v(useState(false), 2), hasOpened = _useState3[0], setHasOpened = _useState3[1];
     var _useState4 = _sliced_to_array$v(useState(function() {
-        return getToolbarLayout(getDefaultToolbarPosition(getViewport()), getViewport());
+        return getToolbarLayout(getDefaultToolbarPosition(getViewport(portalContainer)), getViewport(portalContainer));
     }), 2), layout = _useState4[0], setLayout = _useState4[1];
     var dragOriginRef = useRef(undefined);
     useEffect(function() {
@@ -8853,20 +8854,24 @@ function useWhiteboardToolbarLayout() {
         viewport
     ]);
     useEffect(function() {
-        var handleResize = function() {
-            var nextViewport = getViewport();
+        var handleViewportChange = function() {
+            var nextViewport = getViewport(portalContainer);
             viewportRef.current = nextViewport;
             setViewport(nextViewport);
             setLayout(function(currentLayout) {
                 return getToolbarLayout(hasOpened ? currentLayout.position : getDefaultToolbarPosition(nextViewport), nextViewport);
             });
         };
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', handleViewportChange);
+        var resizeObserver = portalContainer && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(handleViewportChange) : undefined;
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(portalContainer);
         return function() {
-            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('resize', handleViewportChange);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
         };
     }, [
-        hasOpened
+        hasOpened,
+        portalContainer
     ]);
     useEffect(function() {
         var move = function(event) {
@@ -8978,24 +8983,24 @@ function useWhiteboardToolbarLayout() {
     };
 }
 function getToolbarLayout(position, viewport) {
-    var topDockPosition = WHITEBOARD_VIEWPORT_PADDING;
-    var bottomDockPosition = viewport.height - WHITEBOARD_VIEWPORT_PADDING - WHITEBOARD_TOOLBAR_SIZE.horizontal.height;
+    var topDockPosition = viewport.top + WHITEBOARD_VIEWPORT_PADDING;
+    var bottomDockPosition = viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING - WHITEBOARD_TOOLBAR_SIZE.horizontal.height;
     var nearTop = position.top <= topDockPosition + WHITEBOARD_DOCK_SNAP_DISTANCE;
     var nearBottom = position.top >= bottomDockPosition - WHITEBOARD_DOCK_SNAP_DISTANCE;
     if (nearTop || nearBottom) {
-        var dock = nearTop && (!nearBottom || position.top <= viewport.height / 2) ? 'top' : 'bottom';
+        var dock = nearTop && (!nearBottom || position.top <= viewport.top + viewport.height / 2) ? 'top' : 'bottom';
         return {
             dock: dock,
             orientation: 'horizontal',
             position: snapAndClampPosition(position, dock, WHITEBOARD_TOOLBAR_SIZE.horizontal, viewport)
         };
     }
-    var leftDockPosition = WHITEBOARD_VIEWPORT_PADDING;
-    var rightDockPosition = viewport.width - WHITEBOARD_VIEWPORT_PADDING - WHITEBOARD_TOOLBAR_SIZE.vertical.width;
+    var leftDockPosition = viewport.left + WHITEBOARD_VIEWPORT_PADDING;
+    var rightDockPosition = viewport.left + viewport.width - WHITEBOARD_VIEWPORT_PADDING - WHITEBOARD_TOOLBAR_SIZE.vertical.width;
     var nearLeft = position.left <= leftDockPosition + WHITEBOARD_DOCK_SNAP_DISTANCE;
     var nearRight = position.left >= rightDockPosition - WHITEBOARD_DOCK_SNAP_DISTANCE;
     if (nearLeft || nearRight) {
-        var dock1 = nearLeft && (!nearRight || position.left <= viewport.width / 2) ? 'left' : 'right';
+        var dock1 = nearLeft && (!nearRight || position.left <= viewport.left + viewport.width / 2) ? 'left' : 'right';
         return {
             dock: dock1,
             orientation: 'vertical',
@@ -9033,10 +9038,10 @@ function getDroppedToolbarLayout(position, viewport, preferredDropDock, dragPosi
 }
 function isOutsideDock(position, orientation, viewport, dock) {
     var size = WHITEBOARD_TOOLBAR_SIZE[orientation];
-    if (dock === 'left') return position.left < WHITEBOARD_VIEWPORT_PADDING;
-    if (dock === 'right') return position.left + size.width > viewport.width - WHITEBOARD_VIEWPORT_PADDING;
-    if (dock === 'top') return position.top < WHITEBOARD_VIEWPORT_PADDING;
-    return position.top + size.height > viewport.height - WHITEBOARD_VIEWPORT_PADDING;
+    if (dock === 'left') return position.left < viewport.left + WHITEBOARD_VIEWPORT_PADDING;
+    if (dock === 'right') return position.left + size.width > viewport.left + viewport.width - WHITEBOARD_VIEWPORT_PADDING;
+    if (dock === 'top') return position.top < viewport.top + WHITEBOARD_VIEWPORT_PADDING;
+    return position.top + size.height > viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING;
 }
 function getDragPosition(event, dragOrigin, size) {
     return {
@@ -9045,7 +9050,7 @@ function getDragPosition(event, dragOrigin, size) {
     };
 }
 function canFitVertically(position, viewport) {
-    return position.top >= WHITEBOARD_VIEWPORT_PADDING && position.top + WHITEBOARD_TOOLBAR_SIZE.vertical.height <= viewport.height - WHITEBOARD_VIEWPORT_PADDING;
+    return position.top >= viewport.top + WHITEBOARD_VIEWPORT_PADDING && position.top + WHITEBOARD_TOOLBAR_SIZE.vertical.height <= viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING;
 }
 function getOutsideDock(position, orientation, viewport) {
     var _candidates_filter_sort_;
@@ -9053,19 +9058,19 @@ function getOutsideDock(position, orientation, viewport) {
     var candidates = [
         [
             'left',
-            WHITEBOARD_VIEWPORT_PADDING - position.left
+            viewport.left + WHITEBOARD_VIEWPORT_PADDING - position.left
         ],
         [
             'right',
-            position.left + size.width - (viewport.width - WHITEBOARD_VIEWPORT_PADDING)
+            position.left + size.width - (viewport.left + viewport.width - WHITEBOARD_VIEWPORT_PADDING)
         ],
         [
             'top',
-            WHITEBOARD_VIEWPORT_PADDING - position.top
+            viewport.top + WHITEBOARD_VIEWPORT_PADDING - position.top
         ],
         [
             'bottom',
-            position.top + size.height - (viewport.height - WHITEBOARD_VIEWPORT_PADDING)
+            position.top + size.height - (viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING)
         ]
     ];
     return (_candidates_filter_sort_ = candidates.filter(function(param) {
@@ -9079,34 +9084,36 @@ function getOutsideDock(position, orientation, viewport) {
 function snapAndClampPosition(position, dock, size, viewport) {
     var clampedPosition = clampPosition(position, size, viewport);
     if (dock === 'left') return _object_spread_props$g(_object_spread$i({}, clampedPosition), {
-        left: WHITEBOARD_VIEWPORT_PADDING
-    });
-    if (dock === 'right') return _object_spread_props$g(_object_spread$i({}, clampedPosition), {
-        left: viewport.width - WHITEBOARD_VIEWPORT_PADDING - size.width
+        left: viewport.left + WHITEBOARD_VIEWPORT_PADDING
     });
+    if (dock === 'right') {
+        return _object_spread_props$g(_object_spread$i({}, clampedPosition), {
+            left: viewport.left + viewport.width - WHITEBOARD_VIEWPORT_PADDING - size.width
+        });
+    }
     if (dock === 'top') return _object_spread_props$g(_object_spread$i({}, clampedPosition), {
-        top: WHITEBOARD_VIEWPORT_PADDING
+        top: viewport.top + WHITEBOARD_VIEWPORT_PADDING
     });
     return _object_spread_props$g(_object_spread$i({}, clampedPosition), {
-        top: viewport.height - WHITEBOARD_VIEWPORT_PADDING - size.height
+        top: viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING - size.height
     });
 }
 function clampPosition(position, size, viewport) {
     return {
-        left: clamp(position.left, WHITEBOARD_VIEWPORT_PADDING, viewport.width - WHITEBOARD_VIEWPORT_PADDING - size.width),
-        top: clamp(position.top, WHITEBOARD_VIEWPORT_PADDING, viewport.height - WHITEBOARD_VIEWPORT_PADDING - size.height)
+        left: clamp(position.left, viewport.left + WHITEBOARD_VIEWPORT_PADDING, viewport.left + viewport.width - WHITEBOARD_VIEWPORT_PADDING - size.width),
+        top: clamp(position.top, viewport.top + WHITEBOARD_VIEWPORT_PADDING, viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING - size.height)
     };
 }
 function getDefaultToolbarPosition(viewport) {
     return {
-        left: WHITEBOARD_VIEWPORT_PADDING,
-        top: Math.round((viewport.height - WHITEBOARD_TOOLBAR_SIZE.vertical.height) / 2)
+        left: viewport.left + WHITEBOARD_VIEWPORT_PADDING,
+        top: viewport.top + Math.round((viewport.height - WHITEBOARD_TOOLBAR_SIZE.vertical.height) / 2)
     };
 }
 function getDefaultTriggerPosition(viewport) {
     return {
-        left: WHITEBOARD_VIEWPORT_PADDING,
-        top: viewport.height - WHITEBOARD_VIEWPORT_PADDING - WHITEBOARD_TRIGGER_SIZE.height - WHITEBOARD_TRIGGER_BOTTOM_OFFSET
+        left: viewport.left + WHITEBOARD_VIEWPORT_PADDING,
+        top: viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING - WHITEBOARD_TRIGGER_SIZE.height - WHITEBOARD_TRIGGER_BOTTOM_OFFSET
     };
 }
 function getPopoverSide(dock, position, toolbarSize, popoverSize, viewport) {
@@ -9124,19 +9131,19 @@ function getPreferredPopoverSide(dock, position, toolbarSize, viewport) {
     var spaces = [
         [
             'right',
-            viewport.width - (position.left + toolbarSize.width) - WHITEBOARD_VIEWPORT_PADDING
+            viewport.left + viewport.width - (position.left + toolbarSize.width) - WHITEBOARD_VIEWPORT_PADDING
         ],
         [
             'left',
-            position.left - WHITEBOARD_VIEWPORT_PADDING
+            position.left - (viewport.left + WHITEBOARD_VIEWPORT_PADDING)
         ],
         [
             'bottom',
-            viewport.height - (position.top + toolbarSize.height) - WHITEBOARD_VIEWPORT_PADDING
+            viewport.top + viewport.height - (position.top + toolbarSize.height) - WHITEBOARD_VIEWPORT_PADDING
         ],
         [
             'top',
-            position.top - WHITEBOARD_VIEWPORT_PADDING
+            position.top - (viewport.top + WHITEBOARD_VIEWPORT_PADDING)
         ]
     ];
     return _to_consumable_array$b(spaces).sort(function(left, right) {
@@ -9144,34 +9151,38 @@ function getPreferredPopoverSide(dock, position, toolbarSize, viewport) {
     })[0][0];
 }
 function fitsPopover(side, position, toolbarSize, popoverSize, viewport) {
-    if (side === 'left') return position.left - WHITEBOARD_POPOVER_GAP - popoverSize.width >= WHITEBOARD_VIEWPORT_PADDING;
+    if (side === 'left') {
+        return position.left - WHITEBOARD_POPOVER_GAP - popoverSize.width >= viewport.left + WHITEBOARD_VIEWPORT_PADDING;
+    }
     if (side === 'right') {
-        return position.left + toolbarSize.width + WHITEBOARD_POPOVER_GAP + popoverSize.width <= viewport.width - WHITEBOARD_VIEWPORT_PADDING;
+        return position.left + toolbarSize.width + WHITEBOARD_POPOVER_GAP + popoverSize.width <= viewport.left + viewport.width - WHITEBOARD_VIEWPORT_PADDING;
     }
-    if (side === 'top') return position.top - WHITEBOARD_POPOVER_GAP - popoverSize.height >= WHITEBOARD_VIEWPORT_PADDING;
-    return position.top + toolbarSize.height + WHITEBOARD_POPOVER_GAP + popoverSize.height <= viewport.height - WHITEBOARD_VIEWPORT_PADDING;
+    if (side === 'top') {
+        return position.top - WHITEBOARD_POPOVER_GAP - popoverSize.height >= viewport.top + WHITEBOARD_VIEWPORT_PADDING;
+    }
+    return position.top + toolbarSize.height + WHITEBOARD_POPOVER_GAP + popoverSize.height <= viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING;
 }
 function getPopoverStyle(position, toolbarSize, popoverSize, side, viewport) {
     if (side === 'left') {
         return {
             left: position.left - popoverSize.width - WHITEBOARD_POPOVER_GAP,
-            top: clamp(position.top, WHITEBOARD_VIEWPORT_PADDING, viewport.height - WHITEBOARD_VIEWPORT_PADDING - popoverSize.height)
+            top: clamp(position.top, viewport.top + WHITEBOARD_VIEWPORT_PADDING, viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING - popoverSize.height)
         };
     }
     if (side === 'right') {
         return {
             left: position.left + toolbarSize.width + WHITEBOARD_POPOVER_GAP,
-            top: clamp(position.top, WHITEBOARD_VIEWPORT_PADDING, viewport.height - WHITEBOARD_VIEWPORT_PADDING - popoverSize.height)
+            top: clamp(position.top, viewport.top + WHITEBOARD_VIEWPORT_PADDING, viewport.top + viewport.height - WHITEBOARD_VIEWPORT_PADDING - popoverSize.height)
         };
     }
     if (side === 'top') {
         return {
-            left: clamp(position.left, WHITEBOARD_VIEWPORT_PADDING, viewport.width - WHITEBOARD_VIEWPORT_PADDING - popoverSize.width),
+            left: clamp(position.left, viewport.left + WHITEBOARD_VIEWPORT_PADDING, viewport.left + viewport.width - WHITEBOARD_VIEWPORT_PADDING - popoverSize.width),
             top: position.top - popoverSize.height - WHITEBOARD_POPOVER_GAP
         };
     }
     return {
-        left: clamp(position.left, WHITEBOARD_VIEWPORT_PADDING, viewport.width - WHITEBOARD_VIEWPORT_PADDING - popoverSize.width),
+        left: clamp(position.left, viewport.left + WHITEBOARD_VIEWPORT_PADDING, viewport.left + viewport.width - WHITEBOARD_VIEWPORT_PADDING - popoverSize.width),
         top: position.top + toolbarSize.height + WHITEBOARD_POPOVER_GAP
     };
 }
@@ -9181,10 +9192,23 @@ function getOppositeSide(side) {
     if (side === 'top') return 'bottom';
     return 'top';
 }
-function getViewport() {
+function getViewport(container) {
+    var width = typeof window === 'undefined' ? 1280 : window.innerWidth;
+    var height = typeof window === 'undefined' ? 720 : window.innerHeight;
+    if (!container || typeof window === 'undefined') {
+        return {
+            left: 0,
+            top: 0,
+            width: width,
+            height: height
+        };
+    }
+    var bounds = container.getBoundingClientRect();
     return {
-        width: typeof window === 'undefined' ? 1280 : window.innerWidth,
-        height: typeof window === 'undefined' ? 720 : window.innerHeight
+        left: bounds.left,
+        top: bounds.top,
+        width: bounds.width > 0 ? bounds.width : Math.max(0, width - bounds.left),
+        height: bounds.height > 0 ? bounds.height : Math.max(0, height - bounds.top)
     };
 }
 function clamp(value, min, max) {
@@ -9299,6 +9323,7 @@ function WhiteboardToolbar(param) {
     var canWrite = permissions.includes('whiteboard:write');
     var canClear = permissions.includes('whiteboard:clear');
     var canOpenToolbar = canWrite || canClear;
+    var portalContainer = usePortalContainer();
     var _useWhiteboardToolbarLayout = useWhiteboardToolbarLayout(), activePopover = _useWhiteboardToolbarLayout.activePopover, closeActivePopover = _useWhiteboardToolbarLayout.closeActivePopover, closeToolbar = _useWhiteboardToolbarLayout.closeToolbar, dock = _useWhiteboardToolbarLayout.dock, getPopoverLayout = _useWhiteboardToolbarLayout.getPopoverLayout, openToolbar = _useWhiteboardToolbarLayout.openToolbar, orientation = _useWhiteboardToolbarLayout.orientation, startDrag = _useWhiteboardToolbarLayout.startDrag, togglePopover = _useWhiteboardToolbarLayout.togglePopover, toolbarOpen = _useWhiteboardToolbarLayout.toolbarOpen, toolbarStyle = _useWhiteboardToolbarLayout.toolbarStyle, triggerDock = _useWhiteboardToolbarLayout.triggerDock, triggerStyle = _useWhiteboardToolbarLayout.triggerStyle;
     var toolbarRef = useRef(null);
     var drawButtonRef = useRef(null);
@@ -9576,7 +9601,7 @@ function WhiteboardToolbar(param) {
                 ]
             }) : null
         ]
-    }), document.body);
+    }), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
 }
 function getPopoverTriggerPosition(button) {
     var rect = button === null || button === void 0 ? void 0 : button.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naviedu/room-platform-react",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "main": "./index.esm.js",
   "module": "./index.esm.js",