@peter.prib/renderengine 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.2.1",
+  "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/BaseRenderer.js

@@ -13,6 +13,17 @@ export class BaseRenderer {
         this.width = width;
         this.height = height;
     }
+    /**
+     * Take a new drawing size — the container's, once it has one. A renderer
+     * is sized from its container when it is created, and a container that is
+     * hidden then (a pane in a tab not yet shown) measures 0×0; without this
+     * the drawing stays 0×0 when the pane is shown. Subclasses resize their
+     * surface and call this.
+     */
+    resize(width, height) {
+        this.width = width;
+        this.height = height;
+    }
     clear() { throw new Error("Method 'clear()' must be implemented."); }
     rect(x, y, width, height, fill, stroke) { throw new Error("Method 'rect()' must be implemented."); }
     circle(cx, cy, r, fill, stroke) { throw new Error("Method 'circle()' must be implemented."); }

package/src/CanvasRenderer.js

@@ -22,6 +22,13 @@ export class CanvasRenderer extends BaseRenderer {
         this.ctx = this.canvas.getContext('2d');
     }
 
+    /** Resize the canvas. Setting a canvas's size clears it, so redraw after. */
+    resize(width, height) {
+        super.resize(width, height);
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+
     clear() {
         this.ctx.clearRect(0, 0, this.width, this.height);
         this._shapes = [];

package/src/SVGRenderer.js

@@ -167,6 +167,22 @@ export class SVGRenderer extends BaseRenderer {
         this.container.appendChild(this.svg);
     }
 
+    /**
+     * Resize the <svg>. Its viewBox follows only while it is still the size it
+     * was created with: a diagram sets its own viewBox to its content, and that
+     * must survive, so the diagram then scales to the new box instead of
+     * being cropped to it.
+     */
+    resize(width, height) {
+        const defaultViewBox = `0 0 ${this.width} ${this.height}`;
+        super.resize(width, height);
+        this.svg.setAttribute('width', width);
+        this.svg.setAttribute('height', height);
+        if (this.svg.getAttribute('viewBox') === defaultViewBox) {
+            this.svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        }
+    }
+
     clear() {
         this._elMap.clear();
         // Keep <defs> and <style> elements; remove everything else.

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(),
                 },