@grafloria/element 0.3.20 → 0.3.21

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

@@ -1,360 +0,0 @@
-"use strict";
-// ControlPointEditor.ts - Bezier control point editing tool
-// Phase 2.3b: Interactive bezier curve editing via control point manipulation
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlPointEditor = void 0;
-/**
- * ControlPointEditor provides functionality for editing bezier curve control points
- *
- * Features:
- * - Detect and track control points from path segments
- * - Hit testing for control point handles
- * - Move control points via drag
- * - Auto-generate smooth bezier curves from points
- * - Grid snapping support
- * - Symmetric control point mirroring
- * - Visual rendering of control handles and lines
- *
- * @example
- * ```typescript
- * const editor = new ControlPointEditor(config);
- *
- * // Detect control points from segments
- * const controlPoints = editor.getControlPoints(link.segments);
- *
- * // Hit test for click
- * const hit = editor.hitTestControlPoint(mouseX, mouseY, link.segments);
- *
- * // Move control point
- * const newSegments = editor.moveControlPoint(hit.segmentIndex, hit.controlType, newPos, link.segments);
- *
- * // Render visual handles
- * const handles = editor.renderControlPointHandles(link.segments, link.id);
- * ```
- */
-class ControlPointEditor {
-    constructor(config) {
-        this.config = Object.assign({}, config);
-    }
-    /**
-     * Get all control points from path segments
-     *
-     * @param segments - Path segments to extract control points from
-     * @returns Array of control point information
-     */
-    getControlPoints(segments) {
-        const controlPoints = [];
-        for (let i = 0; i < segments.length; i++) {
-            const segment = segments[i];
-            // Only curve segments have control points
-            if (segment.type === 'curve') {
-                // control1 is relative to the 'from' anchor
-                if (segment.control1 && isFinite(segment.control1.x) && isFinite(segment.control1.y)) {
-                    controlPoints.push({
-                        point: Object.assign({}, segment.control1),
-                        segmentIndex: i,
-                        type: 'control1',
-                        anchor: Object.assign({}, segment.from),
-                    });
-                }
-                // control2 is relative to the 'to' anchor
-                if (segment.control2 && isFinite(segment.control2.x) && isFinite(segment.control2.y)) {
-                    controlPoints.push({
-                        point: Object.assign({}, segment.control2),
-                        segmentIndex: i,
-                        type: 'control2',
-                        anchor: Object.assign({}, segment.to),
-                    });
-                }
-            }
-        }
-        return controlPoints;
-    }
-    /**
-     * Hit test for control point handles
-     * Optimized to avoid allocations on hot path (mousemove)
-     *
-     * @param mouseX - Mouse X coordinate
-     * @param mouseY - Mouse Y coordinate
-     * @param segments - Path segments
-     * @returns Hit result if a control point was clicked, null otherwise
-     */
-    hitTestControlPoint(mouseX, mouseY, segments, 
-    /** Wave 9 — Card 2: extra world-space radius for a touch pointer. 0 for mouse. */
-    hitSlop = 0) {
-        let closestPoint = null;
-        let closestDistance = this.config.clickDetectionRadius + hitSlop;
-        const mousePoint = { x: mouseX, y: mouseY };
-        // Direct iteration - no intermediate allocations
-        for (let i = 0; i < segments.length; i++) {
-            const segment = segments[i];
-            // Only curve segments have control points
-            if (segment.type === 'curve') {
-                // Check control1
-                if (segment.control1 && isFinite(segment.control1.x) && isFinite(segment.control1.y)) {
-                    const distance = this.calculateDistance(mousePoint, segment.control1);
-                    if (distance <= closestDistance) {
-                        closestDistance = distance;
-                        // Only allocate when we find a hit
-                        closestPoint = {
-                            segmentIndex: i,
-                            controlType: 'control1',
-                            point: Object.assign({}, segment.control1),
-                            anchor: Object.assign({}, segment.from),
-                        };
-                    }
-                }
-                // Check control2
-                if (segment.control2 && isFinite(segment.control2.x) && isFinite(segment.control2.y)) {
-                    const distance = this.calculateDistance(mousePoint, segment.control2);
-                    if (distance <= closestDistance) {
-                        closestDistance = distance;
-                        // Only allocate when we find a hit
-                        closestPoint = {
-                            segmentIndex: i,
-                            controlType: 'control2',
-                            point: Object.assign({}, segment.control2),
-                            anchor: Object.assign({}, segment.to),
-                        };
-                    }
-                }
-            }
-        }
-        return closestPoint;
-    }
-    /**
-     * Move a control point to a new position
-     *
-     * @param segmentIndex - Index of the segment
-     * @param controlType - Type of control point (control1 or control2)
-     * @param newPosition - New position for the control point
-     * @param segments - Current path segments
-     * @returns Updated segments array, or null if invalid
-     */
-    moveControlPoint(segmentIndex, controlType, newPosition, segments) {
-        // Validate segment index
-        if (segmentIndex < 0 || segmentIndex >= segments.length) {
-            return null;
-        }
-        const segment = segments[segmentIndex];
-        // Only curve segments have control points
-        if (segment.type !== 'curve') {
-            return null;
-        }
-        // Apply grid snapping if enabled
-        const position = this.config.snapToGrid
-            ? this.snapToGrid(newPosition)
-            : Object.assign({}, newPosition);
-        // Clone segments array
-        const newSegments = segments.map((s, i) => {
-            if (i !== segmentIndex) {
-                return Object.assign({}, s);
-            }
-            // Update the specified control point
-            const updated = Object.assign({}, s);
-            if (controlType === 'control1') {
-                updated.control1 = position;
-            }
-            else {
-                updated.control2 = position;
-            }
-            return updated;
-        });
-        // Handle symmetric controls (mirror to adjacent segment)
-        if (this.config.symmetricControls) {
-            this.applySymmetricControl(newSegments, segmentIndex, controlType, position);
-        }
-        return newSegments;
-    }
-    /**
-     * Apply symmetric control point mirroring to adjacent segment
-     *
-     * @param segments - Segments array (mutated)
-     * @param segmentIndex - Index of the segment being edited
-     * @param controlType - Type of control point being moved
-     * @param newPosition - New position of the control point
-     */
-    applySymmetricControl(segments, segmentIndex, controlType, newPosition) {
-        const segment = segments[segmentIndex];
-        // Mirror control2 of current segment to control1 of next segment
-        if (controlType === 'control2' && segmentIndex < segments.length - 1) {
-            const nextSegment = segments[segmentIndex + 1];
-            if (nextSegment.type === 'curve' && segment.to) {
-                // Calculate mirror position
-                const anchor = segment.to;
-                const dx = anchor.x - newPosition.x;
-                const dy = anchor.y - newPosition.y;
-                const mirrorPos = {
-                    x: anchor.x + dx,
-                    y: anchor.y + dy,
-                };
-                nextSegment.control1 = mirrorPos;
-            }
-        }
-        // Mirror control1 of current segment to control2 of previous segment
-        if (controlType === 'control1' && segmentIndex > 0) {
-            const prevSegment = segments[segmentIndex - 1];
-            if (prevSegment.type === 'curve' && segment.from) {
-                // Calculate mirror position
-                const anchor = segment.from;
-                const dx = anchor.x - newPosition.x;
-                const dy = anchor.y - newPosition.y;
-                const mirrorPos = {
-                    x: anchor.x + dx,
-                    y: anchor.y + dy,
-                };
-                prevSegment.control2 = mirrorPos;
-            }
-        }
-    }
-    /**
-     * Auto-generate bezier curve segments from an array of points
-     *
-     * Uses Catmull-Rom algorithm to generate smooth curves
-     *
-     * @param points - Array of points to convert to bezier curves
-     * @returns Array of curve segments with auto-generated control points
-     */
-    generateBezierSegments(points) {
-        if (points.length < 2) {
-            return [];
-        }
-        const segments = [];
-        for (let i = 0; i < points.length - 1; i++) {
-            const p0 = points[Math.max(0, i - 1)];
-            const p1 = points[i];
-            const p2 = points[i + 1];
-            const p3 = points[Math.min(points.length - 1, i + 2)];
-            // Calculate control points using Catmull-Rom to Bezier conversion
-            // See: https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline
-            const control1 = {
-                x: p1.x + (p2.x - p0.x) / 6,
-                y: p1.y + (p2.y - p0.y) / 6,
-            };
-            const control2 = {
-                x: p2.x - (p3.x - p1.x) / 6,
-                y: p2.y - (p3.y - p1.y) / 6,
-            };
-            segments.push({
-                type: 'curve',
-                from: Object.assign({}, p1),
-                to: Object.assign({}, p2),
-                control1,
-                control2,
-            });
-        }
-        return segments;
-    }
-    /**
-     * Snap a point to the grid
-     *
-     * @param point - Point to snap
-     * @returns Snapped point
-     */
-    snapToGrid(point) {
-        const { gridSize } = this.config;
-        return {
-            x: Math.round(point.x / gridSize) * gridSize,
-            y: Math.round(point.y / gridSize) * gridSize,
-        };
-    }
-    /**
-     * Calculate Euclidean distance between two points
-     *
-     * @param p1 - First point
-     * @param p2 - Second point
-     * @returns Distance in pixels
-     */
-    calculateDistance(p1, p2) {
-        const dx = p2.x - p1.x;
-        const dy = p2.y - p1.y;
-        return Math.sqrt(dx * dx + dy * dy);
-    }
-    /**
-     * Render a control point handle as a VNode
-     *
-     * @param controlPoint - Control point to render
-     * @param linkId - ID of the link (for DOM identification)
-     * @returns VNode representing the control point handle
-     */
-    renderControlPointHandle(controlPoint, linkId) {
-        return {
-            type: 'circle',
-            key: `control-point-${linkId}-${controlPoint.segmentIndex}-${controlPoint.type}`,
-            props: {
-                cx: controlPoint.point.x,
-                cy: controlPoint.point.y,
-                r: this.config.handleRadius,
-                fill: this.config.handleColor,
-                stroke: this.config.handleStrokeColor,
-                strokeWidth: 2,
-                className: `control-point-handle control-point-${controlPoint.type}`,
-                'data-link-id': linkId,
-                'data-segment-index': controlPoint.segmentIndex.toString(),
-                'data-control-type': controlPoint.type,
-            },
-        };
-    }
-    /**
-     * Render a control line (from anchor to control point) as a VNode
-     *
-     * @param controlPoint - Control point to render line for
-     * @param linkId - ID of the link
-     * @returns VNode representing the control line
-     */
-    renderControlLine(controlPoint, linkId) {
-        return {
-            type: 'line',
-            key: `control-line-${linkId}-${controlPoint.segmentIndex}-${controlPoint.type}`,
-            props: {
-                x1: controlPoint.anchor.x,
-                y1: controlPoint.anchor.y,
-                x2: controlPoint.point.x,
-                y2: controlPoint.point.y,
-                stroke: this.config.controlLineColor,
-                strokeWidth: this.config.controlLineWidth,
-                strokeDasharray: this.config.controlLineDash.join(','),
-                className: 'control-line',
-                'data-link-id': linkId,
-            },
-        };
-    }
-    /**
-     * Render all control point handles for a link
-     *
-     * @param segments - Path segments
-     * @param linkId - ID of the link
-     * @returns Array of VNodes for rendering
-     */
-    renderControlPointHandles(segments, linkId) {
-        const controlPoints = this.getControlPoints(segments);
-        const vnodes = [];
-        for (const cp of controlPoints) {
-            // Render control line first (so it appears behind the handle)
-            if (this.config.showControlLines) {
-                vnodes.push(this.renderControlLine(cp, linkId));
-            }
-            // Render control point handle
-            vnodes.push(this.renderControlPointHandle(cp, linkId));
-        }
-        return vnodes;
-    }
-    /**
-     * Update configuration (partial update)
-     *
-     * @param partialConfig - Partial configuration to merge
-     */
-    updateConfig(partialConfig) {
-        this.config = Object.assign(Object.assign({}, this.config), partialConfig);
-    }
-    /**
-     * Get current configuration
-     *
-     * @returns Current configuration (readonly copy)
-     */
-    getConfig() {
-        return Object.assign({}, this.config);
-    }
-}
-exports.ControlPointEditor = ControlPointEditor;
-//# sourceMappingURL=ControlPointEditor.js.map

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

@@ -1,133 +0,0 @@
-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[];
-}