@grafloria/element 0.3.19 → 0.3.20

package/esm/src/lib/stencil-kit/palette.js

@@ -0,0 +1,427 @@
+import { __awaiter } from "tslib";
+/**
+ * The stencil palette — the signature Visio surface: a categorized, searchable
+ * list of shape masters you DRAG ONTO THE CANVAS.
+ *
+ * Two halves, deliberately in one module because they share the drag contract:
+ *   T6  the palette UI    — sections from `listStencils()`, live search, and a
+ *                           thumbnail drawn from the master's OWN outline
+ *                           geometry (`getShape(type).outline(w,h)`), so what
+ *                           you see in the palette is the shape you get.
+ *   T7  drag-to-place     — HTML5 drag-and-drop (not pointer events: the canvas
+ *                           binder consumes pointerdown, and DnD is the gesture
+ *                           browsers already route across two elements). The
+ *                           drop lands the master at the cursor as ONE undoable
+ *                           BatchCommand.
+ */
+import { listStencils, NodeFactory, AddNodeCommand, BatchCommand, } from '@grafloria/engine';
+import { getShape } from '@grafloria/renderer';
+import { ensureStencilKitStyles } from './styles';
+import { getStencilBuilder } from './builders';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/** The MIME the palette drags with — namespaced so a page's other DnD is untouched. */
+const DND_TYPE = 'application/x-grafloria-master';
+/**
+ * Repaint a placed master from the host's per-notation palette.
+ *
+ * Colour used to live only in the 80 generated templates, so restyling meant
+ * editing template data — impossible for an embedder. This applies the caller's
+ * scheme on top, and `'theme'` resolves against the live theme so a colour-mode
+ * swap carries the stencils with it.
+ */
+function applyNotationTheme(node, stencilId, scheme, api) {
+    var _a, _b, _c, _d, _e;
+    if (!stencilId || !scheme)
+        return;
+    const want = scheme[stencilId];
+    if (!want)
+        return;
+    const shape = Object.assign({}, ((_b = (_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'shape')) !== null && _b !== void 0 ? _b : {}));
+    const theme = (_e = (_d = (_c = api).getTheme) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : null;
+    const resolve = (v, token) => {
+        var _a, _b, _c, _d;
+        return v === 'theme'
+            ? (_d = (token === 'surface' ? (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b.paper : (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary)) !== null && _d !== void 0 ? _d : undefined
+            : v;
+    };
+    const fill = resolve(want.fill, 'surface');
+    const stroke = resolve(want.stroke, 'ink');
+    if (fill !== undefined)
+        shape.fill = fill;
+    if (stroke !== undefined)
+        shape.stroke = stroke;
+    node.setMetadata('shape', shape);
+}
+/** UML classifiers get a name compartment + a member compartment.
+ *  Keys are MASTER IDS — `uml-enum` / `uml-primitive-type` are the generated
+ *  ids (the old `uml-enumeration` / `uml-primitivetype` keys matched nothing,
+ *  so those two masters dropped as bare rectangles with no card). */
+const UML_CLASSIFIERS = {
+    'uml-class': null, 'uml-abstract-class': '«abstract»', 'uml-interface': '«interface»',
+    'uml-enum': '«enumeration»', 'uml-datatype': '«dataType»',
+    'uml-primitive-type': '«primitive»', 'uml-signal': '«signal»', 'uml-object': null,
+};
+/** BPMN event types carry their trigger glyph inside the circle. */
+const BPMN_EVENT_GLYPH = {
+    'bpmn-message-event': '✉', 'bpmn-timer-event': '⏱', 'bpmn-error-event': '⚡',
+};
+/**
+ * Give a placed master its notation furniture: UML compartments, or a BPMN
+ * event trigger glyph. Both ride `metadata.panel`, so they paint in SVG and
+ * survive export — see the note at the call site.
+ */
+function applyNotationPanel(node, masterId, master) {
+    var _a, _b, _c;
+    const glyph = BPMN_EVENT_GLYPH[masterId];
+    if (glyph) {
+        // CENTRED, as BPMN draws its trigger glyphs — the caption now paints BELOW
+        // the circle (labelPlacement), so the middle belongs to the badge.
+        node.setMetadata('panel', { icon: { glyph, size: 16, corner: 'c' } });
+        return;
+    }
+    if (!(masterId in UML_CLASSIFIERS))
+        return;
+    const stereotype = UML_CLASSIFIERS[masterId];
+    const name = (_b = (_a = master.meta) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Class';
+    // Placeholder members, so a dropped classifier looks like a UML card the user
+    // can then edit rather than an empty box.
+    const rows = masterId === 'uml-enum'
+        ? [{ text: 'VALUE_A' }, { text: 'VALUE_B' }]
+        : [{ text: '+ field: Type' }, { text: '+ method(): void' }];
+    node.setMetadata('panel', {
+        // A stereotyped classifier stacks «stereotype» OVER the name, the way UML
+        // draws its cards — inline ("«enumeration» Enumeration") the header line
+        // was wider than the card and painted cut off at both edges.
+        header: stereotype ? { lines: [stereotype, name] } : { text: name },
+        rows,
+        rowHeight: 18,
+    });
+    // The header IS the classifier's name, so the node's own centred label would
+    // simply repeat it in the gap between the compartments.
+    (_c = node.setLabel) === null || _c === void 0 ? void 0 : _c.call(node, '');
+}
+/** A thumbnail SVG for a master, drawn from its real outline + declared paint. */
+function thumbnail(master, box = 34) {
+    var _a, _b, _c, _d, _e, _f;
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', String(box));
+    svg.setAttribute('height', String(box));
+    svg.setAttribute('viewBox', `0 0 ${box} ${box}`);
+    svg.setAttribute('aria-hidden', 'true');
+    const struct = (_a = master.structure) !== null && _a !== void 0 ? _a : {};
+    const paint = (_b = struct.shape) !== null && _b !== void 0 ? _b : {};
+    // Preserve the master's aspect ratio inside the square, with a hairline inset
+    // so a 2px stroke isn't clipped at the edges.
+    const w0 = Number((_c = struct.size) === null || _c === void 0 ? void 0 : _c.width) || 100;
+    const h0 = Number((_d = struct.size) === null || _d === void 0 ? void 0 : _d.height) || 60;
+    const pad = 3;
+    const s = Math.min((box - pad * 2) / w0, (box - pad * 2) / h0);
+    const w = Math.max(6, w0 * s);
+    const h = Math.max(6, h0 * s);
+    let el;
+    try {
+        const spec = getShape(paint.type).outline(w, h);
+        el = document.createElementNS(SVG_NS, spec.el);
+        for (const [k, v] of Object.entries(spec.geom))
+            el.setAttribute(k, String(v));
+    }
+    catch (_g) {
+        el = document.createElementNS(SVG_NS, 'rect');
+        el.setAttribute('width', String(w));
+        el.setAttribute('height', String(h));
+        el.setAttribute('rx', '3');
+    }
+    el.setAttribute('fill', (_e = paint.fill) !== null && _e !== void 0 ? _e : '#eef1fb');
+    el.setAttribute('stroke', (_f = paint.stroke) !== null && _f !== void 0 ? _f : '#3B52D9');
+    el.setAttribute('stroke-width', String(Math.min(Number(paint.strokeWidth) || 1.5, 2)));
+    const g = document.createElementNS(SVG_NS, 'g');
+    g.setAttribute('transform', `translate(${(box - w) / 2} ${(box - h) / 2})`);
+    g.appendChild(el);
+    svg.appendChild(g);
+    return svg;
+}
+/** Root + descendants, so a multi-node master commits (and undoes) as a unit. */
+function subtree(diagram, root) {
+    var _a;
+    const out = [root];
+    const stack = [root];
+    while (stack.length) {
+        const n = stack.pop();
+        const ids = Array.from((_a = n === null || n === void 0 ? void 0 : n.children) !== null && _a !== void 0 ? _a : []);
+        for (const id of ids) {
+            const c = diagram.getNode(id);
+            if (c) {
+                out.push(c);
+                stack.push(c);
+            }
+        }
+    }
+    return out;
+}
+/**
+ * Build a stencil palette in `palette` that drops masters onto `canvas`.
+ *
+ * @param api     the diagram instance (engine + model + viewport)
+ * @param hosts   `palette`: where the list renders · `canvas`: the drop target
+ *                (the element the diagram is mounted in)
+ */
+export function bindStencilPalette(api, hosts, options = {}) {
+    var _a, _b, _c;
+    ensureStencilKitStyles((_a = hosts.palette.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    const stencils = (_b = options.stencils) !== null && _b !== void 0 ? _b : listStencils();
+    /** master id → stencil id, so a drop knows which notation it belongs to. */
+    const stencilOf = new Map();
+    for (const st of stencils)
+        for (const m of st.masters)
+            stencilOf.set(m.id, st.id);
+    const collapsed = new Set((_c = options.collapsed) !== null && _c !== void 0 ? _c : stencils.slice(1).map((s) => s.id));
+    const { palette, canvas } = hosts;
+    let query = '';
+    palette.classList.add('gf-stencil');
+    palette.innerHTML = '';
+    // ── search ───────────────────────────────────────────────────────────────
+    let input = null;
+    if (options.search !== false) {
+        const wrap = document.createElement('div');
+        wrap.className = 'gf-stencil-search';
+        input = document.createElement('input');
+        input.type = 'search';
+        input.placeholder = 'Search shapes…';
+        input.setAttribute('aria-label', 'Search shapes');
+        input.addEventListener('input', () => { query = input.value.trim().toLowerCase(); renderList(); });
+        wrap.appendChild(input);
+        palette.appendChild(wrap);
+    }
+    const body = document.createElement('div');
+    body.className = 'gf-stencil-body';
+    palette.appendChild(body);
+    /** A master matches on its display name, its id, or any of its tags. */
+    const matches = (m) => {
+        var _a, _b;
+        if (!query)
+            return true;
+        const meta = (_a = m.meta) !== null && _a !== void 0 ? _a : {};
+        const hay = [meta.name, m.id, ...((_b = meta.tags) !== null && _b !== void 0 ? _b : [])].join(' ').toLowerCase();
+        return hay.includes(query);
+    };
+    function renderList() {
+        body.innerHTML = '';
+        let shown = 0;
+        for (const stencil of stencils) {
+            const hits = stencil.masters.filter(matches);
+            if (hits.length === 0)
+                continue;
+            shown += hits.length;
+            const group = document.createElement('details');
+            group.className = 'gf-stencil-group';
+            // A search always opens the sections that matched; otherwise honour the
+            // caller's collapsed set.
+            group.open = query ? true : !collapsed.has(stencil.id);
+            group.addEventListener('toggle', () => {
+                if (query)
+                    return;
+                if (group.open)
+                    collapsed.delete(stencil.id);
+                else
+                    collapsed.add(stencil.id);
+            });
+            const summary = document.createElement('summary');
+            summary.append(stencil.name);
+            const count = document.createElement('span');
+            count.className = 'gf-stencil-count';
+            count.textContent = String(hits.length);
+            summary.appendChild(count);
+            summary.title = stencil.description;
+            group.appendChild(summary);
+            const items = document.createElement('div');
+            items.className = 'gf-stencil-items';
+            for (const master of hits)
+                items.appendChild(itemEl(master));
+            group.appendChild(items);
+            body.appendChild(group);
+        }
+        if (shown === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'gf-stencil-empty';
+            empty.textContent = query ? `No shapes match “${query}”.` : 'No stencils.';
+            body.appendChild(empty);
+        }
+    }
+    // ── drag ghost ───────────────────────────────────────────────────────────
+    // A lightweight preview that follows the cursor during a palette drag, so
+    // the user can see WHAT they are holding and WHERE it will land. A DOM
+    // element rather than `setDragImage`: the native drag image is browser
+    // chrome — it never appears in a screenshot, and headless/some platforms do
+    // not paint it at all, which is exactly how "dragging from the rail shows no
+    // preview" shipped unnoticed.
+    let ghost = null;
+    const moveGhost = (e) => {
+        if (!ghost)
+            return;
+        ghost.style.left = `${e.clientX}px`;
+        ghost.style.top = `${e.clientY}px`;
+    };
+    const killGhost = () => {
+        ghost === null || ghost === void 0 ? void 0 : ghost.remove();
+        ghost = null;
+        document.removeEventListener('dragover', moveGhost);
+    };
+    const spawnGhost = (master, e) => {
+        var _a, _b;
+        killGhost();
+        const meta = (_a = master.meta) !== null && _a !== void 0 ? _a : {};
+        ghost = document.createElement('div');
+        ghost.className = 'gf-stencil-ghost';
+        ghost.appendChild(thumbnail(master, 28));
+        ghost.append((_b = meta.name) !== null && _b !== void 0 ? _b : master.id);
+        ghost.style.left = `${e.clientX}px`;
+        ghost.style.top = `${e.clientY}px`;
+        document.body.appendChild(ghost);
+        // dragover fires document-wide throughout an HTML5 drag — the one stream
+        // that reliably carries live coordinates on every platform.
+        document.addEventListener('dragover', moveGhost);
+    };
+    function itemEl(master) {
+        var _a, _b, _c;
+        const meta = (_a = master.meta) !== null && _a !== void 0 ? _a : {};
+        const el = document.createElement('div');
+        el.className = 'gf-stencil-item';
+        el.draggable = true;
+        el.dataset['masterId'] = master.id;
+        el.title = meta.description ? `${meta.name} — ${meta.description}` : (_b = meta.name) !== null && _b !== void 0 ? _b : master.id;
+        el.appendChild(thumbnail(master));
+        const label = document.createElement('span');
+        label.className = 'gf-stencil-label';
+        label.textContent = (_c = meta.name) !== null && _c !== void 0 ? _c : master.id;
+        el.appendChild(label);
+        el.addEventListener('dragstart', (e) => {
+            var _a;
+            const dt = e.dataTransfer;
+            if (!dt)
+                return;
+            dt.setData(DND_TYPE, master.id);
+            dt.setData('text/plain', (_a = meta.name) !== null && _a !== void 0 ? _a : master.id); // so a stray drop is harmless text
+            dt.effectAllowed = 'copy';
+            // Suppress the native drag snapshot where it IS painted — otherwise the
+            // ghost and the platform preview would ride the cursor together.
+            if (typeof Image !== 'undefined' && dt.setDragImage) {
+                const blank = new Image();
+                blank.src =
+                    'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+                dt.setDragImage(blank, 0, 0);
+            }
+            spawnGhost(master, e);
+        });
+        el.addEventListener('dragend', killGhost);
+        return el;
+    }
+    // ── drop-to-place on the canvas ──────────────────────────────────────────
+    const heldMaster = (e) => {
+        const dt = e.dataTransfer;
+        if (!dt)
+            return null;
+        // `getData` is empty during dragover in most browsers — the TYPE is the
+        // reliable signal there, and the id itself is read on drop.
+        return dt.types.includes(DND_TYPE) ? (dt.getData(DND_TYPE) || '') : null;
+    };
+    const onDragOver = (e) => {
+        if (heldMaster(e) === null)
+            return;
+        e.preventDefault(); // required, or the drop never fires
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'copy';
+        canvas.classList.add('gf-stencil-target');
+    };
+    const onDragLeave = (e) => {
+        if (e.relatedTarget && canvas.contains(e.relatedTarget))
+            return;
+        canvas.classList.remove('gf-stencil-target');
+    };
+    const onDrop = (e) => {
+        const id = heldMaster(e);
+        canvas.classList.remove('gf-stencil-target');
+        killGhost();
+        if (!id)
+            return;
+        e.preventDefault();
+        const rect = canvas.getBoundingClientRect();
+        void place(id, api.viewport.clientToWorld(e.clientX, e.clientY, rect));
+    };
+    canvas.addEventListener('dragover', onDragOver);
+    canvas.addEventListener('dragleave', onDragLeave);
+    canvas.addEventListener('drop', onDrop);
+    /**
+     * Stamp `masterId` centred on a world point, as ONE undo entry.
+     *
+     * `NodeFactory.createFromTemplate` adds straight to the model (no command), so
+     * the created subtree is captured, taken back out, and re-applied through the
+     * CommandManager — one Ctrl+Z removes the whole shape, and collab sees a
+     * normal add.
+     */
+    function place(masterId, world) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const engine = api.getEngine();
+            const diagram = api.getModel();
+            const registry = engine === null || engine === void 0 ? void 0 : engine.templateRegistry;
+            const master = registry === null || registry === void 0 ? void 0 : registry.get(masterId);
+            if (!master || !diagram)
+                return null;
+            const struct = (_a = master.structure) !== null && _a !== void 0 ? _a : {};
+            const w = Number((_b = struct.size) === null || _b === void 0 ? void 0 : _b.width) || 100;
+            const h = Number((_c = struct.size) === null || _c === void 0 ? void 0 : _c.height) || 60;
+            const at = { x: world.x - w / 2, y: world.y - h / 2 }; // drop centres on the cursor
+            // A master may resolve to a registered BUILDER (an ER entity / UML class is
+            // a kit card, not a silhouette). Anything without one takes the template
+            // path — see stencil-kit/builders.ts for why this is a registry and not an
+            // id check inside the palette.
+            const builder = getStencilBuilder(masterId);
+            const built = builder ? builder({ api, master, at }) : null;
+            const factory = built ? null : new NodeFactory(registry, diagram);
+            const root = built !== null && built !== void 0 ? built : factory.createFromTemplate(masterId, (_e = (_d = options.data) === null || _d === void 0 ? void 0 : _d.call(options, master)) !== null && _e !== void 0 ? _e : {}, at);
+            const created = built ? [built] : subtree(diagram, root);
+            // NOTE: masters used to need `useHTMLLayer` stripped here or they rendered
+            // as empty groups. That is fixed at the source now (NodeFactory no longer
+            // sets the flag — see NodeFactory.html-contract.spec.ts), so the workaround
+            // is gone. `htmlLayer: true` is still honoured for hosts that set the flag
+            // themselves and DO run a layer that paints it.
+            if (options.htmlLayer === true) {
+                for (const n of created)
+                    n.setMetadata('useHTMLLayer', true);
+            }
+            // COMPARTMENTS & EVENT MARKERS. `metadata.panel` drives the renderer's
+            // composite-panel overlay (header band + stacked rows + a corner glyph) —
+            // a complete, themed, SVG-NATIVE subsystem that shipped with zero callers.
+            // Using it here rather than the UML kit's `metadata.html` route is
+            // deliberate: an HTML-layer card is not vector-exportable and depends on a
+            // layer the plain SVG embed does not run — the exact dependency that made
+            // every dropped master render blank.
+            applyNotationPanel(root, masterId, master);
+            applyNotationTheme(root, stencilOf.get(masterId), options.notationTheme, api);
+            // Serialize into commands BEFORE detaching (AddNodeCommand snapshots in its
+            // constructor), then detach and replay through the command manager.
+            const cmds = created.map((n) => new AddNodeCommand(n));
+            for (const n of [...created].reverse())
+                diagram.removeNode(n.id);
+            yield engine.commandManager.execute(new BatchCommand(`Place ${(_g = (_f = master.meta) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : masterId}`, cmds));
+            (_h = options.onPlace) === null || _h === void 0 ? void 0 : _h.call(options, { master, nodeId: root.id, x: at.x, y: at.y });
+            return root.id;
+        });
+    }
+    renderList();
+    return {
+        setSearch(q) { query = (q !== null && q !== void 0 ? q : '').trim().toLowerCase(); if (input)
+            input.value = q !== null && q !== void 0 ? q : ''; renderList(); },
+        place,
+        destroy() {
+            killGhost();
+            canvas.removeEventListener('dragover', onDragOver);
+            canvas.removeEventListener('dragleave', onDragLeave);
+            canvas.removeEventListener('drop', onDrop);
+            canvas.classList.remove('gf-stencil-target');
+            palette.classList.remove('gf-stencil');
+            palette.innerHTML = '';
+        },
+    };
+}
+//# sourceMappingURL=palette.js.map