@grafloria/element 0.3.20 → 0.3.22

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

@@ -1,263 +0,0 @@
-"use strict";
-// WaypointEditor.ts - Phase 2.3a: Waypoint editing implementation
-// TDD GREEN Phase: Implement to make tests pass
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WaypointEditor = void 0;
-/**
- * Phase 2.3a: WaypointEditor
- *
- * Handles interactive waypoint editing on link paths:
- * - Add waypoints by clicking on path
- * - Move waypoints by dragging
- * - Remove waypoints by double-click
- * - Grid snapping
- * - Distance constraints
- *
- * Architecture: Modular tool that can be enabled/disabled via InteractionConfig
- */
-class WaypointEditor {
-    constructor(config) {
-        this.config = config;
-    }
-    /**
-     * Get waypoint at specific index
-     */
-    getWaypointAt(index, points) {
-        if (index < 0 || index >= points.length) {
-            return null;
-        }
-        // Don't return endpoints as waypoints
-        if (index === 0 || index === points.length - 1) {
-            return null;
-        }
-        return {
-            index,
-            point: Object.assign({}, points[index]),
-        };
-    }
-    /**
-     * Check if point at index is a waypoint (not an endpoint)
-     */
-    isWaypoint(index, points) {
-        if (points.length < 3)
-            return false;
-        return index > 0 && index < points.length - 1;
-    }
-    /**
-     * Get all waypoints (excluding endpoints)
-     */
-    getWaypoints(points) {
-        if (points.length < 3)
-            return [];
-        const waypoints = [];
-        for (let i = 1; i < points.length - 1; i++) {
-            waypoints.push({
-                index: i,
-                point: Object.assign({}, points[i]),
-            });
-        }
-        return waypoints;
-    }
-    /**
-     * Hit test for clicking on a waypoint handle
-     * Optimized to avoid allocations on hot path (mousemove)
-     */
-    hitTestWaypoint(mouseX, mouseY, points, 
-    /** Wave 9 — Card 2: extra world-space radius for a touch pointer. 0 for mouse. */
-    hitSlop = 0) {
-        // Fast path: no waypoints if less than 3 points
-        if (points.length < 3)
-            return null;
-        const mousePoint = { x: mouseX, y: mouseY };
-        const hitRadius = this.config.handleRadius + 5 + hitSlop;
-        // Direct iteration - no intermediate allocations
-        for (let i = 1; i < points.length - 1; i++) {
-            const distance = this.distance(mousePoint, points[i]);
-            if (distance <= hitRadius) {
-                // Only allocate when we find a hit
-                return {
-                    waypointIndex: i,
-                    waypoint: {
-                        index: i,
-                        point: Object.assign({}, points[i]),
-                    },
-                    distance,
-                };
-            }
-        }
-        return null;
-    }
-    /**
-     * Hit test for clicking on a path segment (to add waypoint)
-     */
-    hitTestPath(mouseX, mouseY, points, 
-    /** Wave 9 — Card 2: extra world-space radius for a touch pointer. */
-    hitSlop = 0) {
-        if (points.length < 2)
-            return null;
-        const mousePoint = { x: mouseX, y: mouseY };
-        let closestHit = null;
-        let closestDistance = this.config.clickDetectionRadius + hitSlop;
-        // Check each segment
-        for (let i = 0; i < points.length - 1; i++) {
-            const p1 = points[i];
-            const p2 = points[i + 1];
-            // Calculate closest point on segment
-            const closestPoint = this.closestPointOnSegment(mousePoint, p1, p2);
-            const distance = this.distance(mousePoint, closestPoint);
-            if (distance <= closestDistance) {
-                closestDistance = distance;
-                closestHit = {
-                    segmentIndex: i,
-                    insertPosition: closestPoint,
-                    insertIndex: i + 1,
-                    distance,
-                };
-            }
-        }
-        return closestHit;
-    }
-    /**
-     * Add waypoint at click position on path
-     */
-    addWaypointAtPosition(clickX, clickY, points) {
-        // Hit test the path to find insertion point
-        const hit = this.hitTestPath(clickX, clickY, points);
-        if (!hit)
-            return null;
-        // Check minimum distance from endpoints
-        const startPoint = points[0];
-        const endPoint = points[points.length - 1];
-        const distFromStart = this.distance(hit.insertPosition, startPoint);
-        const distFromEnd = this.distance(hit.insertPosition, endPoint);
-        if (distFromStart < this.config.minDistanceFromEndpoints ||
-            distFromEnd < this.config.minDistanceFromEndpoints) {
-            return null;
-        }
-        // Insert the new waypoint
-        const newPoints = [...points];
-        newPoints.splice(hit.insertIndex, 0, Object.assign({}, hit.insertPosition));
-        return {
-            newPoints,
-            waypointIndex: hit.insertIndex,
-            segmentIndex: hit.segmentIndex,
-        };
-    }
-    /**
-     * Move waypoint to new position
-     * For orthogonal paths, just move the waypoint - the rendering will use orthogonal routing
-     */
-    moveWaypoint(waypointIndex, newPosition, points, pathType) {
-        // Don't move endpoints
-        if (!this.isWaypoint(waypointIndex, points)) {
-            return null;
-        }
-        // Apply grid snapping if enabled
-        let finalPosition = this.config.snapToGrid
-            ? this.snapToGrid(newPosition)
-            : Object.assign({}, newPosition);
-        // Simple approach: just move the waypoint
-        // For orthogonal paths, the orthogonal router will create proper routing between points
-        const newPoints = [...points];
-        newPoints[waypointIndex] = finalPosition;
-        return newPoints;
-    }
-    /**
-     * Remove waypoint at index
-     */
-    removeWaypoint(waypointIndex, points) {
-        // Don't remove endpoints
-        if (!this.isWaypoint(waypointIndex, points)) {
-            return null;
-        }
-        const newPoints = [...points];
-        newPoints.splice(waypointIndex, 1);
-        return newPoints;
-    }
-    /**
-     * Snap point to grid
-     */
-    snapToGrid(point) {
-        const { gridSize } = this.config;
-        return {
-            x: Math.round(point.x / gridSize) * gridSize,
-            y: Math.round(point.y / gridSize) * gridSize,
-        };
-    }
-    /**
-     * Calculate distance from point to line segment
-     */
-    distanceToSegment(point, segmentStart, segmentEnd) {
-        const closestPoint = this.closestPointOnSegment(point, segmentStart, segmentEnd);
-        return this.distance(point, closestPoint);
-    }
-    /**
-     * Find closest point on line segment to given point
-     */
-    closestPointOnSegment(point, segmentStart, segmentEnd) {
-        const dx = segmentEnd.x - segmentStart.x;
-        const dy = segmentEnd.y - segmentStart.y;
-        // Handle zero-length segment
-        if (dx === 0 && dy === 0) {
-            return Object.assign({}, segmentStart);
-        }
-        // Calculate parameter t (0-1) along the segment
-        const t = Math.max(0, Math.min(1, ((point.x - segmentStart.x) * dx + (point.y - segmentStart.y) * dy) / (dx * dx + dy * dy)));
-        // Calculate closest point
-        return {
-            x: segmentStart.x + t * dx,
-            y: segmentStart.y + t * dy,
-        };
-    }
-    /**
-     * Calculate Euclidean distance between two points
-     */
-    distance(p1, p2) {
-        const dx = p2.x - p1.x;
-        const dy = p2.y - p1.y;
-        return Math.sqrt(dx * dx + dy * dy);
-    }
-    /**
-     * Get current configuration
-     */
-    getConfig() {
-        return Object.assign({}, this.config);
-    }
-    /**
-     * Update configuration
-     */
-    updateConfig(updates) {
-        this.config = Object.assign(Object.assign({}, this.config), updates);
-    }
-    /**
-     * Render waypoint handle as VNode
-     */
-    renderWaypointHandle(waypoint, linkId) {
-        return {
-            type: 'circle',
-            key: `waypoint-${linkId}-${waypoint.index}`,
-            props: {
-                cx: waypoint.point.x,
-                cy: waypoint.point.y,
-                r: this.config.handleRadius,
-                fill: this.config.handleColor,
-                stroke: this.config.handleStrokeColor,
-                strokeWidth: 2,
-                className: 'waypoint-handle',
-                style: {
-                    cursor: 'move',
-                    // No transition - causes flickering during drag
-                },
-            },
-        };
-    }
-    /**
-     * Render all waypoint handles for a link
-     */
-    renderWaypointHandles(points, linkId) {
-        const waypoints = this.getWaypoints(points);
-        return waypoints.map(waypoint => this.renderWaypointHandle(waypoint, linkId));
-    }
-}
-exports.WaypointEditor = WaypointEditor;
-//# sourceMappingURL=WaypointEditor.js.map

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

@@ -1,88 +0,0 @@
-import type { DiagramEngine, NodeModel, Point } from '@grafloria/engine';
-import type { Rectangle } from '../types/geometry.types';
-/**
- * HighlighterController — hover / selection / validation / drop-target
- * decorations (Card 5, wave4/interaction).
- *
- * JointJS calls these "highlighters": decorations layered OVER an element rather
- * than baked into it. Keeping them out of the shape lets several stack (a node
- * can be selected AND invalid) and lets a host restyle them without touching the
- * node renderer.
- *
- * Like the rest of the interaction layer this class only produces geometry — it
- * never renders and never mutates the model.
- */
-export type HighlighterKind = 'hover' | 'selection' | 'validation' | 'connect-target';
-export interface Highlighter {
-    /** Stable key for the host's keyed list. */
-    id: string;
-    kind: HighlighterKind;
-    entity: 'node' | 'link';
-    entityId: string;
-    /** Node highlighters: the padded world box to outline. */
-    bounds?: Rectangle;
-    /** Node highlighters: rotation (deg) about the box centre. */
-    rotation?: number;
-    /** Link highlighters: the routed polyline to trace. */
-    points?: Point[];
-    severity?: 'error' | 'warning';
-    /** Validation message (also the accessible description). */
-    message?: string;
-    /** Suggested CSS class, so a host can theme without re-deriving the kind. */
-    className: string;
-}
-export interface HighlighterConfig {
-    /** World padding around a node's box, per kind. */
-    hoverPadding: number;
-    selectionPadding: number;
-    validationPadding: number;
-    showHover: boolean;
-    showSelection: boolean;
-    showValidation: boolean;
-    showConnectTargets: boolean;
-}
-export declare const DEFAULT_HIGHLIGHTER_CONFIG: HighlighterConfig;
-/** One validation issue, resolved to the entity it is about. */
-export interface ValidationIssue {
-    entity: 'node' | 'link';
-    entityId: string;
-    severity: 'error' | 'warning';
-    message: string;
-    code: string;
-}
-/**
- * Parse a ValidationEngine `path` back to the entity it names.
- * Paths look like `node.<id>`, `node.<id>.port.<id>`, `node.<id>.hierarchy`,
- * `link.<id>`. Anything else (diagram-level) is not entity-scoped.
- */
-export declare function parseValidationPath(path: string): {
-    entity: 'node' | 'link';
-    entityId: string;
-} | null;
-export declare class HighlighterController {
-    protected config: HighlighterConfig;
-    /** entityId → issues; refreshed by {@link refreshValidation}. */
-    protected issues: Map<string, ValidationIssue[]>;
-    constructor(config?: Partial<HighlighterConfig>);
-    getConfig(): HighlighterConfig;
-    updateConfig(patch: Partial<HighlighterConfig>): void;
-    /**
-     * Run the engine's validation once and cache the per-entity issues.
-     *
-     * Called on structure changes (node/link added/removed/reconnected) — NOT per
-     * frame: `validateDiagram()` walks every node, link, hierarchy and group.
-     */
-    refreshValidation(engine: DiagramEngine): ValidationIssue[];
-    /** Issues cached for one entity (empty when clean / never refreshed). */
-    getIssues(entityId: string): ValidationIssue[];
-    /** Drop the cached validation (e.g. when the diagram is swapped). */
-    clearValidation(): void;
-    /**
-     * Every highlighter that applies right now, in paint order: validation first
-     * (bottom), then selection, then hover, then connect targets (top).
-     */
-    compute(engine: DiagramEngine): Highlighter[];
-    /** Errors outrank warnings; the first of the worst severity wins. */
-    protected worstIssue(entityId: string): ValidationIssue | null;
-    protected boxOf(node: NodeModel, padding: number): Rectangle;
-}

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

@@ -1,212 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HighlighterController = exports.DEFAULT_HIGHLIGHTER_CONFIG = void 0;
-exports.parseValidationPath = parseValidationPath;
-exports.DEFAULT_HIGHLIGHTER_CONFIG = {
-    hoverPadding: 2,
-    selectionPadding: 4,
-    validationPadding: 6,
-    showHover: true,
-    showSelection: true,
-    showValidation: true,
-    showConnectTargets: true,
-};
-/**
- * Parse a ValidationEngine `path` back to the entity it names.
- * Paths look like `node.<id>`, `node.<id>.port.<id>`, `node.<id>.hierarchy`,
- * `link.<id>`. Anything else (diagram-level) is not entity-scoped.
- */
-function parseValidationPath(path) {
-    const parts = (path !== null && path !== void 0 ? path : '').split('.');
-    if (parts.length < 2)
-        return null;
-    if (parts[0] === 'node')
-        return { entity: 'node', entityId: parts[1] };
-    if (parts[0] === 'link')
-        return { entity: 'link', entityId: parts[1] };
-    return null;
-}
-class HighlighterController {
-    constructor(config = {}) {
-        /** entityId → issues; refreshed by {@link refreshValidation}. */
-        this.issues = new Map();
-        this.config = Object.assign(Object.assign({}, exports.DEFAULT_HIGHLIGHTER_CONFIG), config);
-    }
-    getConfig() {
-        return Object.assign({}, this.config);
-    }
-    updateConfig(patch) {
-        this.config = Object.assign(Object.assign({}, this.config), patch);
-    }
-    /**
-     * Run the engine's validation once and cache the per-entity issues.
-     *
-     * Called on structure changes (node/link added/removed/reconnected) — NOT per
-     * frame: `validateDiagram()` walks every node, link, hierarchy and group.
-     */
-    refreshValidation(engine) {
-        var _a;
-        this.issues.clear();
-        const result = (_a = engine === null || engine === void 0 ? void 0 : engine.validateDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
-        if (!result)
-            return [];
-        const all = [];
-        const push = (severity) => (raw) => {
-            var _a;
-            const target = parseValidationPath(raw.path);
-            if (!target)
-                return;
-            const issue = {
-                entity: target.entity,
-                entityId: target.entityId,
-                severity,
-                message: raw.message,
-                code: raw.code,
-            };
-            all.push(issue);
-            const list = (_a = this.issues.get(target.entityId)) !== null && _a !== void 0 ? _a : [];
-            list.push(issue);
-            this.issues.set(target.entityId, list);
-        };
-        result.errors.forEach(push('error'));
-        result.warnings.forEach(push('warning'));
-        return all;
-    }
-    /** Issues cached for one entity (empty when clean / never refreshed). */
-    getIssues(entityId) {
-        var _a;
-        return (_a = this.issues.get(entityId)) !== null && _a !== void 0 ? _a : [];
-    }
-    /** Drop the cached validation (e.g. when the diagram is swapped). */
-    clearValidation() {
-        this.issues.clear();
-    }
-    /**
-     * Every highlighter that applies right now, in paint order: validation first
-     * (bottom), then selection, then hover, then connect targets (top).
-     */
-    compute(engine) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const diagram = (_a = engine === null || engine === void 0 ? void 0 : engine.getDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
-        if (!diagram)
-            return [];
-        const out = [];
-        const connectionState = (_d = (_c = (_b = engine.getConnectionStateManager) === null || _b === void 0 ? void 0 : _b.call(engine)) === null || _c === void 0 ? void 0 : _c.getState) === null || _d === void 0 ? void 0 : _d.call(_c);
-        const validTargets = (connectionState === null || connectionState === void 0 ? void 0 : connectionState.isConnecting)
-            ? (_e = connectionState.validTargetNodes) !== null && _e !== void 0 ? _e : new Set()
-            : new Set();
-        for (const node of diagram.getNodes()) {
-            if (((_f = node.state) === null || _f === void 0 ? void 0 : _f.visible) === false)
-                continue;
-            if (this.config.showValidation) {
-                const worst = this.worstIssue(node.id);
-                if (worst) {
-                    out.push({
-                        id: `validation-node-${node.id}`,
-                        kind: 'validation',
-                        entity: 'node',
-                        entityId: node.id,
-                        bounds: this.boxOf(node, this.config.validationPadding),
-                        rotation: node.rotation || 0,
-                        severity: worst.severity,
-                        message: worst.message,
-                        className: `grafloria-highlighter grafloria-highlighter-validation grafloria-highlighter-${worst.severity}`,
-                    });
-                }
-            }
-            if (this.config.showSelection && node.isSelected()) {
-                out.push({
-                    id: `selection-node-${node.id}`,
-                    kind: 'selection',
-                    entity: 'node',
-                    entityId: node.id,
-                    bounds: this.boxOf(node, this.config.selectionPadding),
-                    rotation: node.rotation || 0,
-                    className: 'grafloria-highlighter grafloria-highlighter-selection',
-                });
-            }
-            if (this.config.showHover && ((_g = node.state) === null || _g === void 0 ? void 0 : _g.hovered) && !node.isSelected()) {
-                out.push({
-                    id: `hover-node-${node.id}`,
-                    kind: 'hover',
-                    entity: 'node',
-                    entityId: node.id,
-                    bounds: this.boxOf(node, this.config.hoverPadding),
-                    rotation: node.rotation || 0,
-                    className: 'grafloria-highlighter grafloria-highlighter-hover',
-                });
-            }
-            if (this.config.showConnectTargets && validTargets.has(node.id)) {
-                out.push({
-                    id: `connect-node-${node.id}`,
-                    kind: 'connect-target',
-                    entity: 'node',
-                    entityId: node.id,
-                    bounds: this.boxOf(node, this.config.selectionPadding),
-                    rotation: node.rotation || 0,
-                    className: 'grafloria-highlighter grafloria-highlighter-connect-target',
-                });
-            }
-        }
-        for (const link of diagram.getLinks()) {
-            const points = link.points;
-            if (!points || points.length < 2)
-                continue;
-            if (this.config.showValidation) {
-                const worst = this.worstIssue(link.id);
-                if (worst) {
-                    out.push({
-                        id: `validation-link-${link.id}`,
-                        kind: 'validation',
-                        entity: 'link',
-                        entityId: link.id,
-                        points: points.map((p) => (Object.assign({}, p))),
-                        severity: worst.severity,
-                        message: worst.message,
-                        className: `grafloria-highlighter grafloria-highlighter-validation grafloria-highlighter-${worst.severity}`,
-                    });
-                }
-            }
-            if (this.config.showSelection && link.state === 'selected') {
-                out.push({
-                    id: `selection-link-${link.id}`,
-                    kind: 'selection',
-                    entity: 'link',
-                    entityId: link.id,
-                    points: points.map((p) => (Object.assign({}, p))),
-                    className: 'grafloria-highlighter grafloria-highlighter-selection',
-                });
-            }
-            if (this.config.showHover && link.state === 'hovered') {
-                out.push({
-                    id: `hover-link-${link.id}`,
-                    kind: 'hover',
-                    entity: 'link',
-                    entityId: link.id,
-                    points: points.map((p) => (Object.assign({}, p))),
-                    className: 'grafloria-highlighter grafloria-highlighter-hover',
-                });
-            }
-        }
-        return out;
-    }
-    /** Errors outrank warnings; the first of the worst severity wins. */
-    worstIssue(entityId) {
-        var _a;
-        const issues = this.issues.get(entityId);
-        if (!issues || issues.length === 0)
-            return null;
-        return (_a = issues.find((i) => i.severity === 'error')) !== null && _a !== void 0 ? _a : issues[0];
-    }
-    boxOf(node, padding) {
-        const box = node.getBoundingBox();
-        return {
-            x: box.left - padding,
-            y: box.top - padding,
-            width: box.right - box.left + padding * 2,
-            height: box.bottom - box.top + padding * 2,
-        };
-    }
-}
-exports.HighlighterController = HighlighterController;
-//# sourceMappingURL=highlighters.js.map

package/src/libs/renderer/src/interaction/in-place-editor.d.ts

@@ -1,63 +0,0 @@
-import type { DiagramEngine, Command, Point } from '@grafloria/engine';
-import type { Rectangle } from '../types/geometry.types';
-/**
- * InPlaceTextEditor — the model behind double-click-to-edit (Card 5,
- * wave4/interaction).
- *
- * A host cannot avoid owning the actual text widget (an `<input>`, a
- * `contenteditable`, a native text field), but everything AROUND it is
- * framework-agnostic and belongs here:
- *
- *  - WHAT is being edited (node label / link label) and its current text;
- *  - WHERE the editor goes, in world coordinates (the host maps to screen with
- *    its viewport, so the editor lands exactly over the text at any zoom);
- *  - the ONE undoable {@link Command} that commits the new value.
- *
- * The commit path is the point: before this, in-place edits wrote straight to the
- * model and could not be undone.
- */
-export type TextEditTargetType = 'node' | 'link-label';
-export interface TextEditTarget {
-    type: TextEditTargetType;
-    /** Node being edited (`type: 'node'`). */
-    nodeId?: string;
-    /** Link owning the label (`type: 'link-label'`). */
-    linkId?: string;
-    /**
-     * Which label on that link. Links carry TWO label dialects: the positioned
-     * `labels[]` collection, and the DISPLAY label every spec input writes
-     * (`edges: [{label}]` → `metadata.label`, painted at the path midpoint).
-     * When `labels[index]` does not exist, `begin()` falls back to the display
-     * label — the sentinel `-1` marks that dialect internally so `commit()`
-     * writes it back through {@link SetLinkDisplayLabelCommand}.
-     */
-    labelIndex?: number;
-}
-export interface TextEditSession {
-    target: TextEditTarget;
-    /** The text the editor opens with. */
-    value: string;
-    /** World rectangle the editor should cover. */
-    bounds: Rectangle;
-    /** World point the editor centres on (labels have no box of their own). */
-    center: Point;
-    /** Node labels wrap; link labels are single-line. */
-    multiline: boolean;
-}
-export declare class InPlaceTextEditor {
-    protected session: TextEditSession | null;
-    getSession(): TextEditSession | null;
-    isEditing(): boolean;
-    /**
-     * 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: DiagramEngine, target: TextEditTarget): TextEditSession | null;
-    /**
-     * 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: DiagramEngine, value: string): Command | null;
-    /** Abandon the session without touching the model. */
-    cancel(): void;
-}