@peter.prib/renderengine 0.2.2 → 0.2.3

package/dist/renderengine-workspace.umd.js

@@ -7041,6 +7041,21 @@
             };
         }
 
+        /**
+         * Where a submenu opens beside its item (the item's box `{left, right, top}`),
+         * to be all inside the window: to the right, or to the left when the right
+         * would pass the edge (and there is more room on the left); level with the
+         * item, or lifted by as much as it would pass the bottom. `top` is relative
+         * to the item, as the submenu is positioned.
+         */
+        static submenuPlacement(item, width, height, windowWidth, windowHeight, margin = 4) {
+            const fitsRight = item.right + width + margin <= windowWidth;
+            const side = fitsRight || item.left < windowWidth - item.right ? 'right' : 'left';
+            const top = -4;
+            const overflow = item.top + top + height + margin - windowHeight;
+            return { side, top: overflow > 0 ? Math.max(top - overflow, margin - item.top) : top };
+        }
+
         static close() {
             const open = PopupMenu._open;
             if (!open) return;
@@ -7078,7 +7093,16 @@
                     ...base,
                     attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
                     on: {
-                        mouseenter: (e) => { e.currentTarget.style.background = hover; sub.style.display = 'block'; },
+                        mouseenter: (e) => {
+                            e.currentTarget.style.background = hover;
+                            sub.style.display = 'block';
+                            // Opened near the window's right or bottom edge, it opens left, or lifts.
+                            const win = e.currentTarget.ownerDocument.defaultView;
+                            const box = sub.getBoundingClientRect?.();
+                            if (!win || !box?.width) return;
+                            const at = PopupMenu.submenuPlacement(e.currentTarget.getBoundingClientRect(), box.width, box.height, win.innerWidth, win.innerHeight);
+                            Object.assign(sub.style, at.side === 'left' ? { left: 'auto', right: '100%' } : { left: '100%', right: 'auto' }, { top: `${at.top}px` });
+                        },
                         mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
                         click: (e) => e.stopPropagation(),
                     },

package/dist/renderengine.umd.js

@@ -4277,6 +4277,21 @@
             };
         }
 
+        /**
+         * Where a submenu opens beside its item (the item's box `{left, right, top}`),
+         * to be all inside the window: to the right, or to the left when the right
+         * would pass the edge (and there is more room on the left); level with the
+         * item, or lifted by as much as it would pass the bottom. `top` is relative
+         * to the item, as the submenu is positioned.
+         */
+        static submenuPlacement(item, width, height, windowWidth, windowHeight, margin = 4) {
+            const fitsRight = item.right + width + margin <= windowWidth;
+            const side = fitsRight || item.left < windowWidth - item.right ? 'right' : 'left';
+            const top = -4;
+            const overflow = item.top + top + height + margin - windowHeight;
+            return { side, top: overflow > 0 ? Math.max(top - overflow, margin - item.top) : top };
+        }
+
         static close() {
             const open = PopupMenu._open;
             if (!open) return;
@@ -4314,7 +4329,16 @@
                     ...base,
                     attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
                     on: {
-                        mouseenter: (e) => { e.currentTarget.style.background = hover; sub.style.display = 'block'; },
+                        mouseenter: (e) => {
+                            e.currentTarget.style.background = hover;
+                            sub.style.display = 'block';
+                            // Opened near the window's right or bottom edge, it opens left, or lifts.
+                            const win = e.currentTarget.ownerDocument.defaultView;
+                            const box = sub.getBoundingClientRect?.();
+                            if (!win || !box?.width) return;
+                            const at = PopupMenu.submenuPlacement(e.currentTarget.getBoundingClientRect(), box.width, box.height, win.innerWidth, win.innerHeight);
+                            Object.assign(sub.style, at.side === 'left' ? { left: 'auto', right: '100%' } : { left: '100%', right: 'auto' }, { top: `${at.top}px` });
+                        },
                         mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
                         click: (e) => e.stopPropagation(),
                     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
   "type": "module",
   "main": "src/index.js",

package/src/charting/PopupMenu.js

@@ -48,6 +48,21 @@ export class PopupMenu {
         };
     }
 
+    /**
+     * Where a submenu opens beside its item (the item's box `{left, right, top}`),
+     * to be all inside the window: to the right, or to the left when the right
+     * would pass the edge (and there is more room on the left); level with the
+     * item, or lifted by as much as it would pass the bottom. `top` is relative
+     * to the item, as the submenu is positioned.
+     */
+    static submenuPlacement(item, width, height, windowWidth, windowHeight, margin = 4) {
+        const fitsRight = item.right + width + margin <= windowWidth;
+        const side = fitsRight || item.left < windowWidth - item.right ? 'right' : 'left';
+        const top = -4;
+        const overflow = item.top + top + height + margin - windowHeight;
+        return { side, top: overflow > 0 ? Math.max(top - overflow, margin - item.top) : top };
+    }
+
     static close() {
         const open = PopupMenu._open;
         if (!open) return;
@@ -85,7 +100,16 @@ export class PopupMenu {
                 ...base,
                 attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
                 on: {
-                    mouseenter: (e) => { e.currentTarget.style.background = hover; sub.style.display = 'block'; },
+                    mouseenter: (e) => {
+                        e.currentTarget.style.background = hover;
+                        sub.style.display = 'block';
+                        // Opened near the window's right or bottom edge, it opens left, or lifts.
+                        const win = e.currentTarget.ownerDocument.defaultView;
+                        const box = sub.getBoundingClientRect?.();
+                        if (!win || !box?.width) return;
+                        const at = PopupMenu.submenuPlacement(e.currentTarget.getBoundingClientRect(), box.width, box.height, win.innerWidth, win.innerHeight);
+                        Object.assign(sub.style, at.side === 'left' ? { left: 'auto', right: '100%' } : { left: '100%', right: 'auto' }, { top: `${at.top}px` });
+                    },
                     mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
                     click: (e) => e.stopPropagation(),
                 },