@peter.prib/renderengine 0.2.6 → 0.2.10

package/src/charting/diagrams/GraphDiagram.js

@@ -24,6 +24,16 @@ import {
 const EDGE_HANDLE_ATTR = 'data-edge-handle';
 
 export class GraphDiagram extends Diagram {
+    /**
+     * Pure. Whether a node without a picture shows centred text: its icon text,
+     * or (standing in for a name drawn below the shape) its initials. A node
+     * whose name is written inside it needs no initials.
+     */
+    static showsInitials(node, defaultLabelPosition = 'below') {
+        if (node.icon) return true;
+        return (node.labelPosition || (node.shape === 'note' ? 'inside' : defaultLabelPosition)) !== 'inside';
+    }
+
     static diagramType = 'graph';
 
     constructor(renderer, nodes, edges, options = {}, engine = null, folders = []) {
@@ -522,7 +532,7 @@ export class GraphDiagram extends Diagram {
                     if (node.iconUrl) {
                         const iconSize = nodeR * 1.3;
                         g.appendChild(this.renderer.image(node.iconUrl, -iconSize / 2, -iconSize / 2, iconSize, iconSize, { 'pointer-events': 'none' }));
-                    } else {
+                    } else if (GraphDiagram.showsInitials(node, defaultLabelPosition)) {
                         const centerText = node.icon || resolvedLabel.slice(0, 2).toUpperCase() || (node.id ?? '').slice(0, 2).toUpperCase();
                         const fontSize = node.icon ? Math.max(12, Math.round(nodeR * 1.1)) : 10;
                         g.appendChild(this.renderer.text(centerText, 0, 0, { fill: '#fff', textAnchor: 'middle', verticalAlign: 'middle', fontSize: `${fontSize}px`, fontWeight: node.icon ? 'normal' : 'bold', 'pointer-events': 'none' }));

package/src/charting/diagrams/NodeGeometry.js

@@ -1,158 +1,173 @@
-import { Glyph, glyphFor, drawGlyph } from '../glyphs/index.js';
-import { GraphMetrics } from './GraphMetrics.js';
-import { LabelHelper } from './LabelHelper.js';
-
-/**
- * NodeGeometry — pure, stateless helpers for graph node sizing, corners,
- * resize-handle math, and table-node geometry.
- *
- * These used to live on RenderEngine; they are collected here so diagram
- * classes can compute node geometry without going through the engine façade.
- */
-export class NodeGeometry {
-    static TABLE_NODE = { width: 170, headerH: 26, rowH: 18, pad: 6 };
-
-    /** Bounding box a node occupies, centred on its (x,y) — {w:2R,h:2R} for
-     *  the plain default (sized by GraphMetrics.effectiveNodeRadius when a
-     *  `sizeDomain` is supplied), the real card size for a `shape:'table'`
-     *  node (see NodeGeometry.tableNodeSize), or, for any OTHER shape, an
-     *  explicit `node.width`/`node.height` override for a wider-than-tall box. */
-    static nodeSize(node, R, sizeDomain, sizeOptions) {
-        if (node?.shape === 'table') return NodeGeometry.tableNodeSize(node);
-        const radius = GraphMetrics ? GraphMetrics.effectiveNodeRadius(node, R, sizeDomain, sizeOptions) : R;
-        if (Number.isFinite(node?.width) || Number.isFinite(node?.height)) {
-            return {
-                w: Number.isFinite(node.width) ? node.width : radius * 2,
-                h: Number.isFinite(node.height) ? node.height : radius * 2,
-            };
-        }
-        return { w: radius * 2, h: radius * 2 };
-    }
-
-    /** Size of a `shape:'table'` node — column-count-driven, never affected
-     *  by node.size/sizeDomain. */
-    static tableNodeSize(node) {
-        const { width, headerH, rowH, pad } = NodeGeometry.TABLE_NODE;
-        const cols = node.columns?.length ?? 0;
-        return { w: node.width || width, h: headerH + cols * rowH + pad };
-    }
-
-    /** World-space Y of a named column's row within a table node, for edge anchoring. */
-    static tableColumnY(node, posEntry, size, colName) {
-        const { headerH, rowH } = NodeGeometry.TABLE_NODE;
-        const idx = Math.max(0, (node.columns ?? []).findIndex(c => c.name === colName));
-        return posEntry.y - size.h / 2 + headerH + idx * rowH + rowH / 2;
-    }
-
-    /** Draws a table-card node's header + one row per column into wrapper `g`. */
-    static buildTableNodeContent(renderer, g, node) {
-        const { headerH, rowH } = NodeGeometry.TABLE_NODE;
-        const { w, h } = NodeGeometry.tableNodeSize(node);
-        const cols = node.columns ?? [];
-        const x0 = -w / 2, y0 = -h / 2;
-        const borderColor = node.selected ? '#4f8ef7' : '#cfd8dc';
-        const borderWidth = node.selected ? 2 : 1;
-
-        const TYPE_COLORS = { NUMBER: '#74b9ff', TEXT: '#a29bfe', TIMESTAMP: '#55efc4', BOOLEAN: '#ffeaa7', JSON: '#fd79a8', UNKNOWN: '#dfe6e9' };
-        g.appendChild(renderer.rect(x0, y0, w, h, '#ffffff', { color: borderColor, width: borderWidth }));
-        g.appendChild(renderer.rect(x0, y0, w, headerH, '#1976d2', null));
-        g.appendChild(renderer.text(LabelHelper.resolveNodeLabel(node), x0 + 8, y0 + headerH / 2, {
-            fill: '#fff', textAnchor: 'start', verticalAlign: 'middle', fontSize: '11px', fontWeight: 'bold', 'pointer-events': 'none',
-        }));
-        if (node.rowCount != null) {
-            g.appendChild(renderer.text(String(node.rowCount), x0 + w - 8, y0 + headerH / 2, {
-                fill: '#cfe3fb', textAnchor: 'end', verticalAlign: 'middle', fontSize: '9px', 'pointer-events': 'none',
-            }));
-        }
-
-        cols.forEach((col, i) => {
-            const rowY = y0 + headerH + i * rowH;
-            g.appendChild(renderer.circle(x0 + 12, rowY + rowH / 2, 3.5, TYPE_COLORS[col.typeGroup] ?? TYPE_COLORS.UNKNOWN, null));
-            g.appendChild(renderer.text(col.name, x0 + 20, rowY + rowH / 2, {
-                fill: '#333', textAnchor: 'start', verticalAlign: 'middle', fontSize: '10px', 'pointer-events': 'none',
-            }));
-            let badgeX = x0 + w - 8;
-            if (col.isFK) {
-                g.appendChild(renderer.text('FK', badgeX, rowY + rowH / 2, {
-                    fill: '#e67e22', textAnchor: 'end', verticalAlign: 'middle', fontSize: '8px', fontWeight: 'bold', 'pointer-events': 'none',
-                }));
-                badgeX -= 18;
-            }
-            if (col.isPK) {
-                g.appendChild(renderer.text('PK', badgeX, rowY + rowH / 2, {
-                    fill: '#00b894', textAnchor: 'end', verticalAlign: 'middle', fontSize: '8px', fontWeight: 'bold', 'pointer-events': 'none',
-                }));
-            }
-        });
-    }
-
-    /** Pure. The point at a given corner of a `size` (`{w,h}`) box centred on
-     *  `pos` — shared by the resize handle's screen positioning and a node's
-     *  icon-badge placement. */
-    static cornerPoint(pos, size, corner) {
-        return {
-            x: pos.x + (corner.includes('right') ? size.w / 2 : -size.w / 2),
-            y: pos.y + (corner.includes('bottom') ? size.h / 2 : -size.h / 2),
-        };
-    }
-
-    /** Pure. Generic 3-tier corner resolution — 'top-left'|'top-right'|
-     *  'bottom-left'|'bottom-right': a per-node `node[nodeKey]` override,
-     *  then a per-shape entry in `byShape` (keyed by `node.shape`, default
-     *  shape 'circle'), then `defaultCorner`. */
-    static resolveNodeCorner(node, nodeKey, byShape, defaultCorner) {
-        if (node?.[nodeKey]) return node[nodeKey];
-        const shapeCorner = byShape?.[node?.shape || 'circle'];
-        return shapeCorner || defaultCorner;
-    }
-
-    /** Pure. Which corner a node's resize handle sits at/drags from. */
-    static nodeResizeCorner(node, resizeCornerByShape, defaultCorner = 'top-right') {
-        return NodeGeometry.resolveNodeCorner(node, 'resizeCorner', resizeCornerByShape, defaultCorner);
-    }
-
-    /** Pure. Which corner a node's icon badge sits at when `iconPosition`
-     *  is `'corner'`. */
-    static nodeIconCorner(node, iconCornerByShape, defaultCorner = 'top-right') {
-        return NodeGeometry.resolveNodeCorner(node, 'iconCorner', iconCornerByShape, defaultCorner);
-    }
-
-    /** Pure. What dragging a node's resize handle to `mousePos` should set on
-     *  the node. */
-    static resizedNodeValue(node, corner, center, mousePos) {
-        const signX = corner.includes('right') ? 1 : -1;
-        const signY = corner.includes('bottom') ? 1 : -1;
-        if (node?.shape === 'table') {
-            const MIN_TABLE_WIDTH = 80;
-            return { width: Math.max(MIN_TABLE_WIDTH, Math.round(Math.abs(mousePos.x - center.x) * 2)) };
-        }
-        if (node?.shape === 'rect') {
-            const MIN_RECT_SIZE = 24;
-            const width = Math.max(MIN_RECT_SIZE, Math.round((mousePos.x - center.x) * signX * 2));
-            const height = Math.max(MIN_RECT_SIZE, Math.round((mousePos.y - center.y) * signY * 2));
-            return { width, height };
-        }
-        const MIN_RADIUS = 4;
-        const projected = ((mousePos.x - center.x) * signX + (mousePos.y - center.y) * signY) / 2;
-        return { radius: Math.max(MIN_RADIUS, Math.round(projected)) };
-    }
-
-    /** Pure. SVG path `d` for a `w`x`h` rectangle centred on the origin with
-     *  all four corners cut at 45° (an octagon) — see nodeShapeEl's
-     *  'chamfered' cornerStyle. `chamfer` (the cut's size) defaults to a
-     *  fraction of the box's smaller dimension so it scales sensibly with
-     *  the box rather than needing its own per-node configuration. */
-    static chamferedRectPath(w, h, chamfer) {
-        return Glyph.chamferedRectPath(w, h, chamfer);
-    }
-
-    /** Build the SVG element for a node's shape. Returns `{el, suppressInner}`
-     *  where `suppressInner` tells the caller not to draw a centred icon or
-     *  initials on top of busy distinct shapes. The shapes themselves are
-     *  Glyphs (src/charting/glyphs), shared with the editor's templates. */
-    static nodeShapeEl(renderer, shape, R, color, size, cornerStyle, strokeColor = '#fff', strokeWidth = 2, iconUrl = null, icon = null) {
-        const glyph = glyphFor(shape);
-        const ctx = Glyph.context({ R, size, color, cornerStyle, strokeColor, strokeWidth, iconUrl, icon });
-        return { el: drawGlyph(renderer, glyph.parts(ctx)), suppressInner: glyph.constructor.ownsInterior };
-    }
-}
+import { Glyph, glyphFor, drawGlyph } from '../glyphs/index.js';
+import { GraphMetrics } from './GraphMetrics.js';
+import { LabelHelper } from './LabelHelper.js';
+
+/**
+ * NodeGeometry — pure, stateless helpers for graph node sizing, corners,
+ * resize-handle math, and table-node geometry.
+ *
+ * These used to live on RenderEngine; they are collected here so diagram
+ * classes can compute node geometry without going through the engine façade.
+ */
+export class NodeGeometry {
+    static TABLE_NODE = { width: 170, headerH: 26, rowH: 18, pad: 6 };
+
+    /** Bounding box a node occupies, centred on its (x,y) — {w:2R,h:2R} for
+     *  the plain default (sized by GraphMetrics.effectiveNodeRadius when a
+     *  `sizeDomain` is supplied), the real card size for a `shape:'table'`
+     *  node (see NodeGeometry.tableNodeSize), or, for any OTHER shape, an
+     *  explicit `node.width`/`node.height` override for a wider-than-tall box. */
+    static nodeSize(node, R, sizeDomain, sizeOptions) {
+        if (node?.shape === 'table') return NodeGeometry.tableNodeSize(node);
+        const radius = GraphMetrics ? GraphMetrics.effectiveNodeRadius(node, R, sizeDomain, sizeOptions) : R;
+        if (Number.isFinite(node?.width) || Number.isFinite(node?.height)) {
+            return {
+                w: Number.isFinite(node.width) ? node.width : radius * 2,
+                h: Number.isFinite(node.height) ? node.height : radius * 2,
+            };
+        }
+        return { w: radius * 2, h: radius * 2 };
+    }
+
+    /**
+     * A shape's visible outline for a node of `size`, as a closed polygon centred
+     * on (0, 0) (its glyph's `outline`: a curve sampled, a box its box), or null
+     * for a shape no glyph draws.
+     */
+    static outline(shape, size) {
+        const glyph = glyphFor(shape);
+        if (!glyph || glyph.constructor.key !== shape) return null;   // glyphFor falls back to a circle for one it lacks
+        return glyph.outline(Glyph.context({ R: Math.max(size.w, size.h) / 2, size }));
+    }
+
+    /** Size of a `shape:'table'` node — column-count-driven, never affected
+     *  by node.size/sizeDomain. */
+    static tableNodeSize(node) {
+        const { width, headerH, rowH, pad } = NodeGeometry.TABLE_NODE;
+        const cols = node.columns?.length ?? 0;
+        return { w: node.width || width, h: headerH + cols * rowH + pad };
+    }
+
+    /** World-space Y of a named column's row within a table node, for edge anchoring. */
+    static tableColumnY(node, posEntry, size, colName) {
+        const { headerH, rowH } = NodeGeometry.TABLE_NODE;
+        const idx = Math.max(0, (node.columns ?? []).findIndex(c => c.name === colName));
+        return posEntry.y - size.h / 2 + headerH + idx * rowH + rowH / 2;
+    }
+
+    /**
+     * Draws a table-card node's header + one row per column into wrapper `g`;
+     * the node's own `color` tints the card's body (a lens, a marked control
+     * record), the header staying as it is so its name reads.
+     */
+    static buildTableNodeContent(renderer, g, node) {
+        const { headerH, rowH } = NodeGeometry.TABLE_NODE;
+        const { w, h } = NodeGeometry.tableNodeSize(node);
+        const cols = node.columns ?? [];
+        const x0 = -w / 2, y0 = -h / 2;
+        const borderColor = node.selected ? '#4f8ef7' : '#cfd8dc';
+        const borderWidth = node.selected ? 2 : 1;
+
+        const TYPE_COLORS = { NUMBER: '#74b9ff', TEXT: '#a29bfe', TIMESTAMP: '#55efc4', BOOLEAN: '#ffeaa7', JSON: '#fd79a8', UNKNOWN: '#dfe6e9' };
+        g.appendChild(renderer.rect(x0, y0, w, h, node.color || '#ffffff', { color: borderColor, width: borderWidth }));
+        g.appendChild(renderer.rect(x0, y0, w, headerH, '#1976d2', null));
+        g.appendChild(renderer.text(LabelHelper.resolveNodeLabel(node), x0 + 8, y0 + headerH / 2, {
+            fill: '#fff', textAnchor: 'start', verticalAlign: 'middle', fontSize: '11px', fontWeight: 'bold', 'pointer-events': 'none',
+        }));
+        if (node.rowCount != null) {
+            g.appendChild(renderer.text(String(node.rowCount), x0 + w - 8, y0 + headerH / 2, {
+                fill: '#cfe3fb', textAnchor: 'end', verticalAlign: 'middle', fontSize: '9px', 'pointer-events': 'none',
+            }));
+        }
+
+        cols.forEach((col, i) => {
+            const rowY = y0 + headerH + i * rowH;
+            g.appendChild(renderer.circle(x0 + 12, rowY + rowH / 2, 3.5, TYPE_COLORS[col.typeGroup] ?? TYPE_COLORS.UNKNOWN, null));
+            g.appendChild(renderer.text(col.name, x0 + 20, rowY + rowH / 2, {
+                fill: '#333', textAnchor: 'start', verticalAlign: 'middle', fontSize: '10px', 'pointer-events': 'none',
+            }));
+            let badgeX = x0 + w - 8;
+            if (col.isFK) {
+                g.appendChild(renderer.text('FK', badgeX, rowY + rowH / 2, {
+                    fill: '#e67e22', textAnchor: 'end', verticalAlign: 'middle', fontSize: '8px', fontWeight: 'bold', 'pointer-events': 'none',
+                }));
+                badgeX -= 18;
+            }
+            if (col.isPK) {
+                g.appendChild(renderer.text('PK', badgeX, rowY + rowH / 2, {
+                    fill: '#00b894', textAnchor: 'end', verticalAlign: 'middle', fontSize: '8px', fontWeight: 'bold', 'pointer-events': 'none',
+                }));
+            }
+        });
+    }
+
+    /** Pure. The point at a given corner of a `size` (`{w,h}`) box centred on
+     *  `pos` — shared by the resize handle's screen positioning and a node's
+     *  icon-badge placement. */
+    static cornerPoint(pos, size, corner) {
+        return {
+            x: pos.x + (corner.includes('right') ? size.w / 2 : -size.w / 2),
+            y: pos.y + (corner.includes('bottom') ? size.h / 2 : -size.h / 2),
+        };
+    }
+
+    /** Pure. Generic 3-tier corner resolution — 'top-left'|'top-right'|
+     *  'bottom-left'|'bottom-right': a per-node `node[nodeKey]` override,
+     *  then a per-shape entry in `byShape` (keyed by `node.shape`, default
+     *  shape 'circle'), then `defaultCorner`. */
+    static resolveNodeCorner(node, nodeKey, byShape, defaultCorner) {
+        if (node?.[nodeKey]) return node[nodeKey];
+        const shapeCorner = byShape?.[node?.shape || 'circle'];
+        return shapeCorner || defaultCorner;
+    }
+
+    /** Pure. Which corner a node's resize handle sits at/drags from. */
+    static nodeResizeCorner(node, resizeCornerByShape, defaultCorner = 'top-right') {
+        return NodeGeometry.resolveNodeCorner(node, 'resizeCorner', resizeCornerByShape, defaultCorner);
+    }
+
+    /** Pure. Which corner a node's icon badge sits at when `iconPosition`
+     *  is `'corner'`. */
+    static nodeIconCorner(node, iconCornerByShape, defaultCorner = 'top-right') {
+        return NodeGeometry.resolveNodeCorner(node, 'iconCorner', iconCornerByShape, defaultCorner);
+    }
+
+    /** Pure. What dragging a node's resize handle to `mousePos` should set on
+     *  the node. */
+    static resizedNodeValue(node, corner, center, mousePos) {
+        const signX = corner.includes('right') ? 1 : -1;
+        const signY = corner.includes('bottom') ? 1 : -1;
+        if (node?.shape === 'table') {
+            const MIN_TABLE_WIDTH = 80;
+            return { width: Math.max(MIN_TABLE_WIDTH, Math.round(Math.abs(mousePos.x - center.x) * 2)) };
+        }
+        if (node?.shape === 'rect') {
+            const MIN_RECT_SIZE = 24;
+            const width = Math.max(MIN_RECT_SIZE, Math.round((mousePos.x - center.x) * signX * 2));
+            const height = Math.max(MIN_RECT_SIZE, Math.round((mousePos.y - center.y) * signY * 2));
+            return { width, height };
+        }
+        const MIN_RADIUS = 4;
+        const projected = ((mousePos.x - center.x) * signX + (mousePos.y - center.y) * signY) / 2;
+        return { radius: Math.max(MIN_RADIUS, Math.round(projected)) };
+    }
+
+    /** Pure. SVG path `d` for a `w`x`h` rectangle centred on the origin with
+     *  all four corners cut at 45° (an octagon) — see nodeShapeEl's
+     *  'chamfered' cornerStyle. `chamfer` (the cut's size) defaults to a
+     *  fraction of the box's smaller dimension so it scales sensibly with
+     *  the box rather than needing its own per-node configuration. */
+    static chamferedRectPath(w, h, chamfer) {
+        return Glyph.chamferedRectPath(w, h, chamfer);
+    }
+
+    /** Build the SVG element for a node's shape. Returns `{el, suppressInner}`
+     *  where `suppressInner` tells the caller not to draw a centred icon or
+     *  initials on top of busy distinct shapes. The shapes themselves are
+     *  Glyphs (src/charting/glyphs), shared with the editor's templates. */
+    static nodeShapeEl(renderer, shape, R, color, size, cornerStyle, strokeColor = '#fff', strokeWidth = 2, iconUrl = null, icon = null) {
+        const glyph = glyphFor(shape);
+        const ctx = Glyph.context({ R, size, color, cornerStyle, strokeColor, strokeWidth, iconUrl, icon });
+        return { el: drawGlyph(renderer, glyph.parts(ctx)), suppressInner: glyph.constructor.ownsInterior };
+    }
+}

package/src/charting/glyphs/PersonGlyph.js

@@ -1,23 +1,24 @@
-import { Glyph } from './Glyph.js';
-
-/** A disc with a white head-and-shoulders silhouette. */
-export class PersonGlyph extends Glyph {
-    static key = 'person';
-    static ownsInterior = true;
-
-    parts(ctx) {
-        const G = Glyph, st = (k) => this.stroke(ctx, k);
-        const r = ctx.circleR;
-        const headR = r * 0.30;
-        const headY = -(r * 0.28);
-        const neckY = headY + headR + r * 0.05;
-        const bodyW = r * 0.55;
-        const bodyH = r * 0.88;
-        const bodyPath = `M ${-bodyW},${bodyH} Q ${-bodyW},${neckY} 0,${neckY} Q ${bodyW},${neckY} ${bodyW},${bodyH} Z`;
-        return G.group([
-            G.circle(0, 0, r, ctx.color, st()),
-            G.circle(0, headY, headR, '#fff', null, { opacity: 0.92 }),
-            G.path(bodyPath, '#fff', null, { opacity: 0.92 }),
-        ]);
-    }
-}
+import { Glyph } from './Glyph.js';
+import { CircleGlyph } from './CircleGlyph.js';
+
+/** A disc with a white head-and-shoulders silhouette: a circle, its outline the circle's. */
+export class PersonGlyph extends CircleGlyph {
+    static key = 'person';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const r = ctx.circleR;
+        const headR = r * 0.30;
+        const headY = -(r * 0.28);
+        const neckY = headY + headR + r * 0.05;
+        const bodyW = r * 0.55;
+        const bodyH = r * 0.88;
+        const bodyPath = `M ${-bodyW},${bodyH} Q ${-bodyW},${neckY} 0,${neckY} Q ${bodyW},${neckY} ${bodyW},${bodyH} Z`;
+        return G.group([
+            G.circle(0, 0, r, ctx.color, st()),
+            G.circle(0, headY, headR, '#fff', null, { opacity: 0.92 }),
+            G.path(bodyPath, '#fff', null, { opacity: 0.92 }),
+        ]);
+    }
+}

package/src/charting/toolbar/ToolbarSelect.js

@@ -35,4 +35,10 @@ export class ToolbarSelect extends ToolbarItem {
             ],
         };
     }
+
+    /** Show the value as it is now (it may have been chosen other than through this select). */
+    refresh(node) {
+        const select = [...(node?.children ?? [])].find(c => c.tagName === 'SELECT');
+        if (select) select.value = this.value();
+    }
 }