@grafloria/element 0.3.17 → 0.3.19

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

@@ -0,0 +1,133 @@
+import type { WaypointEditorConfig } from '@grafloria/engine';
+import type { VNode } from '../types';
+/**
+ * Point in 2D space
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * Represents a waypoint on a link path
+ */
+export interface Waypoint {
+    index: number;
+    point: Point;
+}
+/**
+ * Waypoint handle for rendering
+ */
+export interface WaypointHandle extends Waypoint {
+    linkId: string;
+}
+/**
+ * Result of hit testing a waypoint
+ */
+export interface WaypointHitResult {
+    waypointIndex: number;
+    waypoint: Waypoint;
+    distance: number;
+}
+/**
+ * Result of hit testing a path segment
+ */
+export interface PathHitResult {
+    segmentIndex: number;
+    insertPosition: Point;
+    insertIndex: number;
+    distance: number;
+}
+/**
+ * Result of adding a waypoint
+ */
+export interface AddWaypointResult {
+    newPoints: Point[];
+    waypointIndex: number;
+    segmentIndex: number;
+}
+/**
+ * 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
+ */
+export declare class WaypointEditor {
+    private config;
+    constructor(config: WaypointEditorConfig);
+    /**
+     * Get waypoint at specific index
+     */
+    getWaypointAt(index: number, points: Point[]): Waypoint | null;
+    /**
+     * Check if point at index is a waypoint (not an endpoint)
+     */
+    isWaypoint(index: number, points: Point[]): boolean;
+    /**
+     * Get all waypoints (excluding endpoints)
+     */
+    getWaypoints(points: Point[]): Waypoint[];
+    /**
+     * Hit test for clicking on a waypoint handle
+     * Optimized to avoid allocations on hot path (mousemove)
+     */
+    hitTestWaypoint(mouseX: number, mouseY: number, points: Point[], 
+    /** Wave 9 — Card 2: extra world-space radius for a touch pointer. 0 for mouse. */
+    hitSlop?: number): WaypointHitResult | null;
+    /**
+     * Hit test for clicking on a path segment (to add waypoint)
+     */
+    hitTestPath(mouseX: number, mouseY: number, points: Point[], 
+    /** Wave 9 — Card 2: extra world-space radius for a touch pointer. */
+    hitSlop?: number): PathHitResult | null;
+    /**
+     * Add waypoint at click position on path
+     */
+    addWaypointAtPosition(clickX: number, clickY: number, points: Point[]): AddWaypointResult | null;
+    /**
+     * Move waypoint to new position
+     * For orthogonal paths, just move the waypoint - the rendering will use orthogonal routing
+     */
+    moveWaypoint(waypointIndex: number, newPosition: Point, points: Point[], pathType?: 'direct' | 'orthogonal' | 'smooth' | 'bezier' | 'straight'): Point[] | null;
+    /**
+     * Remove waypoint at index
+     */
+    removeWaypoint(waypointIndex: number, points: Point[]): Point[] | null;
+    /**
+     * Snap point to grid
+     */
+    snapToGrid(point: Point): Point;
+    /**
+     * Calculate distance from point to line segment
+     */
+    distanceToSegment(point: Point, segmentStart: Point, segmentEnd: Point): number;
+    /**
+     * Find closest point on line segment to given point
+     */
+    private closestPointOnSegment;
+    /**
+     * Calculate Euclidean distance between two points
+     */
+    distance(p1: Point, p2: Point): number;
+    /**
+     * Get current configuration
+     */
+    getConfig(): WaypointEditorConfig;
+    /**
+     * Update configuration
+     */
+    updateConfig(updates: Partial<WaypointEditorConfig>): void;
+    /**
+     * Render waypoint handle as VNode
+     */
+    renderWaypointHandle(waypoint: Waypoint, linkId: string): VNode;
+    /**
+     * Render all waypoint handles for a link
+     */
+    renderWaypointHandles(points: Point[], linkId: string): VNode[];
+}

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

@@ -0,0 +1,263 @@
+"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/WaypointEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaypointEditor.js","sourceRoot":"","sources":["../../../../../../renderer/src/interaction/WaypointEditor.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,88 @@
+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;
+}