@grafloria/element 0.3.20 → 0.3.22

package/src/libs/renderer/src/interaction/in-place-editor.js

@@ -1,141 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InPlaceTextEditor = void 0;
-const engine_1 = require("@grafloria/engine");
-class InPlaceTextEditor {
-    constructor() {
-        this.session = null;
-    }
-    getSession() {
-        return this.session ? Object.assign({}, this.session) : null;
-    }
-    isEditing() {
-        return this.session !== null;
-    }
-    /**
-     * Open a session on a target. Returns null when the target does not exist or
-     * is not editable (`behavior.editable === false`, or a locked node).
-     */
-    begin(engine, target) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-        const diagram = (_a = engine === null || engine === void 0 ? void 0 : engine.getDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
-        if (!diagram)
-            return null;
-        if (target.type === 'node') {
-            const node = target.nodeId ? diagram.getNode(target.nodeId) : undefined;
-            if (!node)
-                return null;
-            if (((_b = node.behavior) === null || _b === void 0 ? void 0 : _b.editable) === false || ((_c = node.state) === null || _c === void 0 ? void 0 : _c.locked))
-                return null;
-            const box = node.getBoundingBox();
-            const bounds = {
-                x: box.left,
-                y: box.top,
-                width: box.right - box.left,
-                height: box.bottom - box.top,
-            };
-            this.session = {
-                target: Object.assign({}, target),
-                value: String((_d = node.getLabel()) !== null && _d !== void 0 ? _d : ''),
-                bounds,
-                center: { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 },
-                multiline: true,
-            };
-            return this.getSession();
-        }
-        const link = target.linkId ? diagram.getLink(target.linkId) : undefined;
-        if (!link)
-            return null;
-        const index = (_e = target.labelIndex) !== null && _e !== void 0 ? _e : 0;
-        const label = (_f = link.labels) === null || _f === void 0 ? void 0 : _f[index];
-        if (!label) {
-            // DISPLAY-label dialect: the edge has no positioned labels[], but the
-            // canonical `metadata.label` (what `edges: [{label}]` writes and the SVG
-            // renderer paints at the path's middle routed point) may exist — that is
-            // the label the user is LOOKING at, so it is the one an editor must
-            // open on. Anchor exactly where the renderer anchors: points[mid].
-            // A link with positioned labels keeps the old contract: asking for a
-            // slot that does not exist opens nothing.
-            const displayValue = String((_g = link.getLabel()) !== null && _g !== void 0 ? _g : '');
-            if (((_j = (_h = link.labels) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0) > 0 || !displayValue)
-                return null;
-            const points = (_k = link.points) !== null && _k !== void 0 ? _k : [];
-            if (points.length < 2)
-                return null;
-            const anchor = points[Math.floor(points.length / 2)];
-            const width = Math.max(40, displayValue.length * 8);
-            const height = 20;
-            this.session = {
-                target: Object.assign(Object.assign({}, target), { labelIndex: -1 }),
-                value: displayValue,
-                bounds: {
-                    x: anchor.x - width / 2,
-                    y: anchor.y - height / 2,
-                    width,
-                    height,
-                },
-                center: { x: anchor.x, y: anchor.y },
-                multiline: false,
-            };
-            return this.getSession();
-        }
-        // The label sits at `position` along the route, plus its own offset — the
-        // exact anchor LabelRenderer draws it at, so the editor lands ON the text
-        // instead of near it.
-        const anchor = link.getPointAtPosition((_l = label.position) !== null && _l !== void 0 ? _l : 0.5);
-        if (!anchor)
-            return null;
-        const center = {
-            x: anchor.x + ((_o = (_m = label.offset) === null || _m === void 0 ? void 0 : _m.x) !== null && _o !== void 0 ? _o : 0),
-            y: anchor.y + ((_q = (_p = label.offset) === null || _p === void 0 ? void 0 : _p.y) !== null && _q !== void 0 ? _q : 0),
-        };
-        const width = Math.max(40, ((_s = (_r = label.text) === null || _r === void 0 ? void 0 : _r.length) !== null && _s !== void 0 ? _s : 0) * 8);
-        const height = 20;
-        this.session = {
-            target: Object.assign(Object.assign({}, target), { labelIndex: index }),
-            value: (_t = label.text) !== null && _t !== void 0 ? _t : '',
-            bounds: { x: center.x - width / 2, y: center.y - height / 2, width, height },
-            center,
-            multiline: false,
-        };
-        return this.getSession();
-    }
-    /**
-     * Commit the session's new value. Returns the undoable command (null for a
-     * no-op edit, or when the session is gone). Always ends the session.
-     */
-    commit(engine, value) {
-        var _a;
-        const session = this.session;
-        this.session = null;
-        if (!session)
-            return null;
-        if (value === session.value)
-            return null;
-        const diagram = (_a = engine === null || engine === void 0 ? void 0 : engine.getDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
-        if (!diagram)
-            return null;
-        if (session.target.type === 'node' && session.target.nodeId) {
-            if (!diagram.getNode(session.target.nodeId))
-                return null;
-            return new engine_1.SetNodeLabelCommand(session.target.nodeId, value, session.value);
-        }
-        if (session.target.linkId !== undefined && session.target.labelIndex !== undefined) {
-            if (!diagram.getLink(session.target.linkId))
-                return null;
-            // -1 marks the display-label dialect (see begin()): the write goes to
-            // `metadata.label`, not into a labels[] slot that does not exist.
-            if (session.target.labelIndex === -1) {
-                return new engine_1.SetLinkDisplayLabelCommand(session.target.linkId, value, session.value);
-            }
-            return new engine_1.SetLinkLabelCommand(session.target.linkId, session.target.labelIndex, value, session.value);
-        }
-        return null;
-    }
-    /** Abandon the session without touching the model. */
-    cancel() {
-        this.session = null;
-    }
-}
-exports.InPlaceTextEditor = InPlaceTextEditor;
-//# sourceMappingURL=in-place-editor.js.map

package/src/libs/renderer/src/interaction/index.d.ts

@@ -1,11 +0,0 @@
-export * from './WaypointEditor';
-export * from './ControlPointEditor';
-export * from './interaction-controller';
-export * from './selection-tools';
-export * from './highlighters';
-export * from './in-place-editor';
-export * from './snapping';
-export * from './keyboard-navigation';
-export * from './whiteboard-tools';
-export * from './ink-overlay';
-export * from './touch-gestures';

package/src/libs/renderer/src/interaction/index.js

@@ -1,29 +0,0 @@
-"use strict";
-// Interaction tools exports
-// Phase 2.3: Interactive link editing
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./WaypointEditor"), exports);
-tslib_1.__exportStar(require("./ControlPointEditor"), exports);
-// Framework-agnostic interaction brain (Angular's InteractionHandlerService is
-// a thin @Injectable subclass of this).
-tslib_1.__exportStar(require("./interaction-controller"), exports);
-// Wave 4 — Card 5: the floating tool layer (resize/rotate handles, Halo,
-// link endpoint + vertex tools), the highlighter layer, and in-place text editing.
-tslib_1.__exportStar(require("./selection-tools"), exports);
-tslib_1.__exportStar(require("./highlighters"), exports);
-tslib_1.__exportStar(require("./in-place-editor"), exports);
-// Wave 4 — Card 6: snaplines, equal-spacing guides, grid snap, keep-in-bounds,
-// magnetic snap-to-port and proximity connect.
-tslib_1.__exportStar(require("./snapping"), exports);
-// Wave 4 — Card 7: keyboard-first + accessible canvas interaction.
-tslib_1.__exportStar(require("./keyboard-navigation"), exports);
-// wave10/whiteboard: the freehand-draw / rectangle / eraser tools, and the separate
-// overlay layer the in-progress stroke draws on (the presence pattern, for the frame gate).
-tslib_1.__exportStar(require("./whiteboard-tools"), exports);
-tslib_1.__exportStar(require("./ink-overlay"), exports);
-// Wave 9: the SHARED touch gesture brain — pan / pinch / tap / long-press /
-// drag-to-connect / touch-resize. One implementation for the framework-free
-// DomEventBinder AND the Angular wrapper (which used to deep-import it).
-tslib_1.__exportStar(require("./touch-gestures"), exports);
-//# sourceMappingURL=index.js.map

package/src/libs/renderer/src/interaction/ink-overlay.d.ts

@@ -1,53 +0,0 @@
-import type { ViewportController } from '../viewport/viewport-controller';
-export declare const INK_OVERLAY_CLASS = "grafloria-ink-overlay";
-export interface InkOverlayOptions {
-    /** The mounted diagram's root (`.grafloria-diagram-root`). */
-    root: HTMLElement;
-    viewport: ViewportController;
-}
-/** How a preview should look while it is being drawn. */
-export interface InkPreviewStyle {
-    color: string;
-    width: number;
-    opacity?: number;
-    /** Dashed outline, for the rectangle tool's rubber-band. */
-    dashed?: boolean;
-}
-/**
- * A camera-registered SVG scratch layer for transient drawing feedback.
- *
- * Draws in WORLD coordinates: the layer's `<g>` carries the same translate+scale the SVG
- * layer's viewBox implies, so a pan or a zoom re-registers every preview with ONE transform
- * write instead of re-projecting points in JS.
- */
-export declare class InkOverlay {
-    private readonly options;
-    private readonly layer;
-    private readonly world;
-    private readonly doc;
-    private readonly unsubViewport;
-    private disposed;
-    /** Reused elements — updated by attribute, never recreated per pointermove. */
-    private path;
-    private rect;
-    constructor(options: InkOverlayOptions);
-    /** For tests and the a11y audit — the DOM this owns. */
-    get element(): SVGSVGElement;
-    /** SVG transform (unitless) equivalent to the SVG layer's viewBox: world → container px. */
-    private cameraTransform;
-    private ensurePath;
-    private ensureRect;
-    /**
-     * Paint (or repaint) the in-progress freehand line through `points` (world coordinates).
-     * ONE `d` attribute write — no VNode, no frame.
-     */
-    drawPolyline(points: ReadonlyArray<{
-        x: number;
-        y: number;
-    }>, style: InkPreviewStyle): void;
-    /** Paint the rubber-band rectangle for the rectangle tool (world coordinates). */
-    drawRect(x: number, y: number, width: number, height: number, style: InkPreviewStyle): void;
-    /** Remove all preview geometry. Called on pointerup/cancel, once per gesture. */
-    clear(): void;
-    dispose(): void;
-}

package/src/libs/renderer/src/interaction/ink-overlay.js

@@ -1,154 +0,0 @@
-"use strict";
-// wave10/whiteboard — THE IN-PROGRESS STROKE LAYER.
-//
-// This is the presence-overlay pattern (see presence/presence-overlay.ts) applied to the
-// line a user is ACTIVELY DRAWING, and it exists for the identical reason.
-//
-// =============================================================================
-// WHY THE LIVE STROKE IS NOT A VNODE
-// =============================================================================
-// The renderer has a FRAME GATE (Wave 8): render() skips a frame outright when the model and
-// the viewport are unchanged. A line being drawn changes the PICTURE on every pointermove
-// while — until pointerup — changing NEITHER the model NOR the viewport. So a live stroke
-// routed through the VNode tree would hit one of two failures, both already seen in this repo:
-//
-//   • if it did not invalidate the frame, the gate would skip it and the line would FREEZE
-//     mid-drag until the next unrelated repaint;
-//   • if it DID call invalidateFrame() on every pointermove, it would rebuild and reconcile
-//     the ENTIRE scene (10k nodes and all) 120 times a second to extend a pencil by 3px —
-//     which is exactly the trap the presence overlay's header spends a page warning against.
-//
-// So the live stroke is drawn on a SEPARATE SVG LAYER, a sibling of the diagram's own layers,
-// updated by ONE attribute write per pointermove. It touches no VNode, trips no epoch, and
-// schedules no frame. On pointerup the tool commits ONE StrokeModel to the document — THAT
-// moves the mutation epoch, the gate opens once, and the committed ink renders through the
-// normal VNode path (stroke-layer.ts). The overlay is then cleared.
-//
-// The layer is `aria-hidden` and `pointer-events:none`: a half-drawn line is transient visual
-// feedback, not content and not a hit target. The committed stroke carries the a11y story.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InkOverlay = exports.INK_OVERLAY_CLASS = void 0;
-const SVG_NS = 'http://www.w3.org/2000/svg';
-exports.INK_OVERLAY_CLASS = 'grafloria-ink-overlay';
-/**
- * A camera-registered SVG scratch layer for transient drawing feedback.
- *
- * Draws in WORLD coordinates: the layer's `<g>` carries the same translate+scale the SVG
- * layer's viewBox implies, so a pan or a zoom re-registers every preview with ONE transform
- * write instead of re-projecting points in JS.
- */
-class InkOverlay {
-    constructor(options) {
-        this.options = options;
-        this.disposed = false;
-        /** Reused elements — updated by attribute, never recreated per pointermove. */
-        this.path = null;
-        this.rect = null;
-        this.doc = options.root.ownerDocument;
-        this.layer = this.doc.createElementNS(SVG_NS, 'svg');
-        this.layer.setAttribute('class', exports.INK_OVERLAY_CLASS);
-        this.layer.setAttribute('aria-hidden', 'true');
-        this.layer.setAttribute('style', 'position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none');
-        this.world = this.doc.createElementNS(SVG_NS, 'g');
-        this.world.setAttribute('transform', this.cameraTransform());
-        this.layer.appendChild(this.world);
-        options.root.appendChild(this.layer);
-        // A pan/zoom mid-gesture (two-finger + pen, a trackpad scroll) must keep the preview
-        // registered. Like the presence overlay, we only rewrite OUR transform — the diagram is
-        // already repainting for the viewport change, whose gate it DOES see.
-        this.unsubViewport = options.viewport.onChange(() => {
-            if (!this.disposed)
-                this.world.setAttribute('transform', this.cameraTransform());
-        });
-    }
-    /** For tests and the a11y audit — the DOM this owns. */
-    get element() {
-        return this.layer;
-    }
-    /** SVG transform (unitless) equivalent to the SVG layer's viewBox: world → container px. */
-    cameraTransform() {
-        const v = this.options.viewport.getViewport();
-        const z = this.options.viewport.getZoom();
-        return `translate(${-v.x * z} ${-v.y * z}) scale(${z})`;
-    }
-    ensurePath() {
-        if (!this.path) {
-            this.path = this.doc.createElementNS(SVG_NS, 'path');
-            this.path.setAttribute('fill', 'none');
-            this.path.setAttribute('stroke-linecap', 'round');
-            this.path.setAttribute('stroke-linejoin', 'round');
-            this.world.appendChild(this.path);
-        }
-        return this.path;
-    }
-    ensureRect() {
-        if (!this.rect) {
-            this.rect = this.doc.createElementNS(SVG_NS, 'rect');
-            this.world.appendChild(this.rect);
-        }
-        return this.rect;
-    }
-    /**
-     * Paint (or repaint) the in-progress freehand line through `points` (world coordinates).
-     * ONE `d` attribute write — no VNode, no frame.
-     */
-    drawPolyline(points, style) {
-        var _a;
-        if (this.disposed)
-            return;
-        const path = this.ensurePath();
-        path.setAttribute('d', polyline(points));
-        path.setAttribute('stroke', style.color);
-        path.setAttribute('stroke-width', String(style.width));
-        path.setAttribute('opacity', String((_a = style.opacity) !== null && _a !== void 0 ? _a : 1));
-        path.setAttribute('stroke-dasharray', style.dashed ? '6 4' : 'none');
-    }
-    /** Paint the rubber-band rectangle for the rectangle tool (world coordinates). */
-    drawRect(x, y, width, height, style) {
-        var _a;
-        if (this.disposed)
-            return;
-        const rect = this.ensureRect();
-        rect.setAttribute('x', String(x));
-        rect.setAttribute('y', String(y));
-        rect.setAttribute('width', String(Math.max(0, width)));
-        rect.setAttribute('height', String(Math.max(0, height)));
-        rect.setAttribute('fill', style.opacity !== undefined ? style.color : 'none');
-        rect.setAttribute('fill-opacity', String((_a = style.opacity) !== null && _a !== void 0 ? _a : 0));
-        rect.setAttribute('stroke', style.color);
-        rect.setAttribute('stroke-width', String(style.width));
-        rect.setAttribute('stroke-dasharray', style.dashed ? '6 4' : 'none');
-    }
-    /** Remove all preview geometry. Called on pointerup/cancel, once per gesture. */
-    clear() {
-        if (this.path) {
-            this.path.remove();
-            this.path = null;
-        }
-        if (this.rect) {
-            this.rect.remove();
-            this.rect = null;
-        }
-    }
-    dispose() {
-        if (this.disposed)
-            return;
-        this.disposed = true;
-        this.clear();
-        this.unsubViewport();
-        this.layer.remove();
-    }
-}
-exports.InkOverlay = InkOverlay;
-function polyline(points) {
-    if (points.length === 0)
-        return '';
-    const r = (v) => Math.round(v * 100) / 100;
-    if (points.length === 1)
-        return `M ${r(points[0].x)} ${r(points[0].y)} L ${r(points[0].x)} ${r(points[0].y)}`;
-    let d = `M ${r(points[0].x)} ${r(points[0].y)}`;
-    for (let i = 1; i < points.length; i++)
-        d += ` L ${r(points[i].x)} ${r(points[i].y)}`;
-    return d;
-}
-//# sourceMappingURL=ink-overlay.js.map