@grafloria/element 0.3.20 → 0.3.22

package/src/libs/renderer/src/svg/JumpPointDetector.d.ts

@@ -1,79 +0,0 @@
-import type { Point } from '@grafloria/engine';
-/**
- * Line segment defined by start and end points
- */
-export interface LineSegment {
-    start: Point;
-    end: Point;
-}
-/**
- * Intersection information
- */
-export interface Intersection {
-    point: Point;
-    angle: number;
-    t1: number;
-    t2: number;
-    linkId?: string;
-    segmentIndex?: number;
-}
-/**
- * Link with points for intersection detection
- */
-export interface LinkWithPoints {
-    id?: string;
-    points: Point[];
-}
-/**
- * Detection mode type
- */
-export type DetectionMode = 'all' | 'perpendicular' | 'threshold';
-/**
- * JumpPointDetector detects line-line intersections for jump point rendering.
- *
- * Features:
- * - Line segment intersection detection
- * - Angle calculation between intersecting lines
- * - Multiple detection modes (all, perpendicular, threshold)
- * - Performance optimized for many links
- *
- * Algorithm:
- * Uses parametric line intersection algorithm with bounds checking.
- */
-export declare class JumpPointDetector {
-    /**
-     * Find intersection between two line segments
-     *
-     * @param line1 First line segment
-     * @param line2 Second line segment
-     * @returns Intersection info or null if no intersection
-     */
-    findIntersection(line1: LineSegment, line2: LineSegment): Intersection | null;
-    /**
-     * Calculate angle between two line segments (0-90 degrees)
-     *
-     * @param line1 First line segment
-     * @param line2 Second line segment
-     * @returns Angle in degrees (0-90)
-     */
-    private calculateAngle;
-    /**
-     * Detect all intersections for a link with other links
-     *
-     * @param targetLink Link to check for intersections
-     * @param otherLinks Other links to check against
-     * @param mode Detection mode (default: 'all')
-     * @param threshold Angle threshold for filtering (default: 45)
-     * @returns Array of intersections
-     */
-    detectIntersections(targetLink: LinkWithPoints, otherLinks: LinkWithPoints[], mode?: DetectionMode, threshold?: number): Intersection[];
-    /**
-     * Check if intersection should be included based on detection mode
-     *
-     * @param intersection Intersection to check
-     * @param mode Detection mode
-     * @param threshold Angle threshold
-     * @returns True if intersection should be included
-     */
-    private shouldIncludeIntersection;
-}

package/src/libs/renderer/src/svg/JumpPointDetector.js

@@ -1,176 +0,0 @@
-"use strict";
-// JumpPointDetector.ts
-// Detects line-line intersections for jump point rendering (Phase 1.3)
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JumpPointDetector = void 0;
-/**
- * JumpPointDetector detects line-line intersections for jump point rendering.
- *
- * Features:
- * - Line segment intersection detection
- * - Angle calculation between intersecting lines
- * - Multiple detection modes (all, perpendicular, threshold)
- * - Performance optimized for many links
- *
- * Algorithm:
- * Uses parametric line intersection algorithm with bounds checking.
- */
-class JumpPointDetector {
-    /**
-     * Find intersection between two line segments
-     *
-     * @param line1 First line segment
-     * @param line2 Second line segment
-     * @returns Intersection info or null if no intersection
-     */
-    findIntersection(line1, line2) {
-        const { start: p1, end: p2 } = line1;
-        const { start: p3, end: p4 } = line2;
-        // Line segment vectors
-        const d1x = p2.x - p1.x;
-        const d1y = p2.y - p1.y;
-        const d2x = p4.x - p3.x;
-        const d2y = p4.y - p3.y;
-        // Calculate denominator (cross product)
-        const denominator = d1x * d2y - d1y * d2x;
-        // Check if lines are parallel (denominator = 0)
-        if (Math.abs(denominator) < 1e-10) {
-            return null;
-        }
-        // Calculate parameters t and u
-        const t = ((p3.x - p1.x) * d2y - (p3.y - p1.y) * d2x) / denominator;
-        const u = ((p3.x - p1.x) * d1y - (p3.y - p1.y) * d1x) / denominator;
-        // Check if intersection is within both segments
-        if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
-            // Calculate intersection point
-            const point = {
-                x: p1.x + t * d1x,
-                y: p1.y + t * d1y
-            };
-            // Calculate angle between lines
-            const angle = this.calculateAngle(line1, line2);
-            return {
-                point,
-                angle,
-                t1: t,
-                t2: u
-            };
-        }
-        return null;
-    }
-    /**
-     * Calculate angle between two line segments (0-90 degrees)
-     *
-     * @param line1 First line segment
-     * @param line2 Second line segment
-     * @returns Angle in degrees (0-90)
-     */
-    calculateAngle(line1, line2) {
-        // Calculate direction vectors
-        const dx1 = line1.end.x - line1.start.x;
-        const dy1 = line1.end.y - line1.start.y;
-        const dx2 = line2.end.x - line2.start.x;
-        const dy2 = line2.end.y - line2.start.y;
-        // Calculate angles
-        const angle1 = Math.atan2(dy1, dx1);
-        const angle2 = Math.atan2(dy2, dx2);
-        // Calculate absolute difference
-        let diff = Math.abs(angle1 - angle2);
-        // Normalize to 0-180 range
-        if (diff > Math.PI) {
-            diff = 2 * Math.PI - diff;
-        }
-        // Convert to degrees
-        let degrees = (diff * 180) / Math.PI;
-        // Normalize to 0-90 range (acute angle)
-        if (degrees > 90) {
-            degrees = 180 - degrees;
-        }
-        return degrees;
-    }
-    /**
-     * Detect all intersections for a link with other links
-     *
-     * @param targetLink Link to check for intersections
-     * @param otherLinks Other links to check against
-     * @param mode Detection mode (default: 'all')
-     * @param threshold Angle threshold for filtering (default: 45)
-     * @returns Array of intersections
-     */
-    detectIntersections(targetLink, otherLinks, mode = 'all', threshold = 45) {
-        const intersections = [];
-        // Skip if target has no points
-        if (!targetLink.points || targetLink.points.length < 2) {
-            return intersections;
-        }
-        // Iterate through each segment of target link
-        for (let i = 0; i < targetLink.points.length - 1; i++) {
-            const segment1 = {
-                start: targetLink.points[i],
-                end: targetLink.points[i + 1]
-            };
-            // Check against all other links
-            for (const otherLink of otherLinks) {
-                // Skip self-intersections
-                if (otherLink.id && targetLink.id && otherLink.id === targetLink.id) {
-                    continue;
-                }
-                // Skip if other link has no points
-                if (!otherLink.points || otherLink.points.length < 2) {
-                    continue;
-                }
-                // Check each segment of other link
-                for (let j = 0; j < otherLink.points.length - 1; j++) {
-                    const segment2 = {
-                        start: otherLink.points[j],
-                        end: otherLink.points[j + 1]
-                    };
-                    const intersection = this.findIntersection(segment1, segment2);
-                    if (intersection) {
-                        // Links that merely touch at a path endpoint (e.g. two links
-                        // meeting at the same port) are not crossings — don't draw a jump
-                        // at a connection point.
-                        const EPS = 1e-6;
-                        const touchesOwnEndpoint = (i === 0 && intersection.t1 < EPS) ||
-                            (i === targetLink.points.length - 2 && intersection.t1 > 1 - EPS);
-                        const touchesOtherEndpoint = (j === 0 && intersection.t2 < EPS) ||
-                            (j === otherLink.points.length - 2 && intersection.t2 > 1 - EPS);
-                        if (touchesOwnEndpoint || touchesOtherEndpoint) {
-                            continue;
-                        }
-                        // Apply filtering based on detection mode
-                        if (this.shouldIncludeIntersection(intersection, mode, threshold)) {
-                            intersections.push(Object.assign(Object.assign({}, intersection), { linkId: otherLink.id, segmentIndex: i }));
-                        }
-                    }
-                }
-            }
-        }
-        return intersections;
-    }
-    /**
-     * Check if intersection should be included based on detection mode
-     *
-     * @param intersection Intersection to check
-     * @param mode Detection mode
-     * @param threshold Angle threshold
-     * @returns True if intersection should be included
-     */
-    shouldIncludeIntersection(intersection, mode, threshold) {
-        switch (mode) {
-            case 'all':
-                return true;
-            case 'perpendicular':
-                // Only near-perpendicular crossings (fixed 75° cutoff); the threshold
-                // parameter belongs to 'threshold' mode.
-                return intersection.angle >= 75;
-            case 'threshold':
-                // Include if angle is greater than or equal to threshold
-                return intersection.angle >= threshold;
-            default:
-                return true;
-        }
-    }
-}
-exports.JumpPointDetector = JumpPointDetector;
-//# sourceMappingURL=JumpPointDetector.js.map

package/src/libs/renderer/src/svg/JumpPointRenderer.d.ts

@@ -1,59 +0,0 @@
-import type { JumpPointConfig } from '@grafloria/engine';
-import type { Intersection } from './JumpPointDetector';
-import type { VNode } from '../types/vnode.types';
-/**
- * JumpPointRenderer modifies link paths to show jump points at intersections.
- *
- * Supports three visual styles:
- * - arc: Small arc over intersection
- * - gap: Break in line
- * - bridge: Bridge shape over intersection
- *
- * Algorithm:
- * 1. Parse path to extract points
- * 2. Sort intersections by position
- * 3. Split path at intersections
- * 4. Insert jump point geometry
- * 5. Reconstruct path
- */
-export declare class JumpPointRenderer {
-    private readonly defaultSize;
-    /**
-     * Render path with jump points at intersections
-     *
-     * @param pathData Original SVG path data
-     * @param intersections Array of intersections
-     * @param config Jump point configuration
-     * @param originalProps Original path properties to preserve
-     * @returns VNode with modified path
-     */
-    renderWithJumpPoints(pathData: string, intersections: Intersection[], config: JumpPointConfig, originalProps?: Record<string, any>): VNode;
-    /**
-     * Generate jump point geometry based on style
-     */
-    private generateJumpPoint;
-    /**
-     * Generate arc path over intersection
-     */
-    private generateArcPath;
-    /**
-     * Generate gap at intersection
-     */
-    private generateGapPath;
-    /**
-     * Generate bridge path over intersection
-     */
-    private generateBridgePath;
-    /**
-     * Parse SVG path data to extract points
-     */
-    private parsePathToPoints;
-    /**
-     * Interpolate point between two points
-     */
-    private interpolatePoint;
-    /**
-     * Get segment length
-     */
-    private getSegmentLength;
-}

package/src/libs/renderer/src/svg/JumpPointRenderer.js

@@ -1,309 +0,0 @@
-"use strict";
-// JumpPointRenderer.ts
-// Renders jump points (arcs/gaps/bridges) at link intersections (Phase 1.3 Part 2)
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JumpPointRenderer = void 0;
-/**
- * JumpPointRenderer modifies link paths to show jump points at intersections.
- *
- * Supports three visual styles:
- * - arc: Small arc over intersection
- * - gap: Break in line
- * - bridge: Bridge shape over intersection
- *
- * Algorithm:
- * 1. Parse path to extract points
- * 2. Sort intersections by position
- * 3. Split path at intersections
- * 4. Insert jump point geometry
- * 5. Reconstruct path
- */
-class JumpPointRenderer {
-    constructor() {
-        this.defaultSize = 10;
-    }
-    /**
-     * Render path with jump points at intersections
-     *
-     * @param pathData Original SVG path data
-     * @param intersections Array of intersections
-     * @param config Jump point configuration
-     * @param originalProps Original path properties to preserve
-     * @returns VNode with modified path
-     */
-    renderWithJumpPoints(pathData, intersections, config, originalProps) {
-        var _a, _b;
-        // Return unchanged if disabled or no intersections
-        if (!config.enabled || !intersections || intersections.length === 0) {
-            return {
-                type: 'path',
-                props: Object.assign({ d: pathData }, originalProps)
-            };
-        }
-        // Handle empty or invalid path
-        if (!pathData || pathData.trim() === '') {
-            return {
-                type: 'path',
-                props: Object.assign({ d: pathData }, originalProps)
-            };
-        }
-        // Get configuration
-        const size = (_a = config.size) !== null && _a !== void 0 ? _a : this.defaultSize;
-        const style = (_b = config.style) !== null && _b !== void 0 ? _b : 'arc';
-        // Skip if size is zero
-        if (size === 0) {
-            return {
-                type: 'path',
-                props: Object.assign({ d: pathData }, originalProps)
-            };
-        }
-        // Parse path to points
-        const points = this.parsePathToPoints(pathData);
-        if (points.length < 2) {
-            return {
-                type: 'path',
-                props: Object.assign({ d: pathData }, originalProps)
-            };
-        }
-        // Sort intersections by position
-        const sortedIntersections = [...intersections].sort((a, b) => {
-            var _a, _b;
-            const segA = (_a = a.segmentIndex) !== null && _a !== void 0 ? _a : 0;
-            const segB = (_b = b.segmentIndex) !== null && _b !== void 0 ? _b : 0;
-            if (segA !== segB)
-                return segA - segB;
-            return a.t1 - b.t1;
-        });
-        // Build modified path
-        let modifiedPath = '';
-        let currentSegmentIndex = 0;
-        let lastPoint = points[0];
-        let segmentStart = points[0];
-        let pendingMove = true;
-        for (let i = 0; i < points.length - 1; i++) {
-            const segmentEnd = points[i + 1];
-            // Get intersections for this segment
-            const segmentIntersections = sortedIntersections.filter(inter => { var _a; return ((_a = inter.segmentIndex) !== null && _a !== void 0 ? _a : 0) === i && inter.t1 >= 0 && inter.t1 <= 1; });
-            if (segmentIntersections.length === 0) {
-                // No intersections, add normal line
-                if (pendingMove) {
-                    modifiedPath += `M ${segmentStart.x} ${segmentStart.y} `;
-                    pendingMove = false;
-                }
-                modifiedPath += `L ${segmentEnd.x} ${segmentEnd.y} `;
-                lastPoint = segmentEnd;
-            }
-            else {
-                // Has intersections, split segment
-                let segmentT = 0;
-                for (const intersection of segmentIntersections) {
-                    const t = intersection.t1;
-                    // Calculate points before and after intersection
-                    const beforePoint = this.interpolatePoint(segmentStart, segmentEnd, Math.max(0, t - size / this.getSegmentLength(segmentStart, segmentEnd)));
-                    const afterPoint = this.interpolatePoint(segmentStart, segmentEnd, Math.min(1, t + size / this.getSegmentLength(segmentStart, segmentEnd)));
-                    // Add segment up to jump point
-                    if (pendingMove) {
-                        modifiedPath += `M ${segmentStart.x} ${segmentStart.y} `;
-                        pendingMove = false;
-                    }
-                    modifiedPath += `L ${beforePoint.x} ${beforePoint.y} `;
-                    // Add jump point
-                    const jumpPath = this.generateJumpPoint(beforePoint, afterPoint, intersection.point, size, style, intersection.angle);
-                    modifiedPath += jumpPath;
-                    lastPoint = afterPoint;
-                    segmentT = t;
-                }
-                // Add remaining segment
-                if (segmentT < 1) {
-                    modifiedPath += `L ${segmentEnd.x} ${segmentEnd.y} `;
-                    lastPoint = segmentEnd;
-                }
-            }
-            segmentStart = segmentEnd;
-        }
-        return {
-            type: 'path',
-            props: Object.assign({ d: modifiedPath.trim() }, originalProps)
-        };
-    }
-    /**
-     * Generate jump point geometry based on style
-     */
-    generateJumpPoint(start, end, center, size, style, angle) {
-        switch (style) {
-            case 'arc':
-                return this.generateArcPath(start, end, center, size, angle);
-            case 'gap':
-                return this.generateGapPath(start, end, center, size);
-            case 'bridge':
-                return this.generateBridgePath(start, end, center, size, angle);
-            default:
-                return `L ${end.x} ${end.y} `;
-        }
-    }
-    /**
-     * Generate arc path over intersection
-     */
-    generateArcPath(start, end, center, size, angle) {
-        // Calculate perpendicular direction
-        const dx = end.x - start.x;
-        const dy = end.y - start.y;
-        const length = Math.sqrt(dx * dx + dy * dy);
-        if (length < 1e-6) {
-            return `L ${end.x} ${end.y} `;
-        }
-        // Normalize
-        const nx = dx / length;
-        const ny = dy / length;
-        // Perpendicular vector (rotate 90 degrees)
-        const px = -ny;
-        const py = nx;
-        // Arc control point (perpendicular offset)
-        const arcHeight = size * 0.5;
-        const controlX = center.x + px * arcHeight;
-        const controlY = center.y + py * arcHeight;
-        // Use arc command: A rx ry x-axis-rotation large-arc-flag sweep-flag x y
-        // We'll use a circular arc with radius = size/2
-        const radius = size / 2;
-        // Determine sweep direction based on angle
-        const sweep = angle >= 45 ? 1 : 0;
-        return `A ${radius} ${radius} 0 0 ${sweep} ${end.x} ${end.y} `;
-    }
-    /**
-     * Generate gap at intersection
-     */
-    generateGapPath(start, end, center, size) {
-        // Gap means we stop drawing and move to after the gap
-        return `M ${end.x} ${end.y} `;
-    }
-    /**
-     * Generate bridge path over intersection
-     */
-    generateBridgePath(start, end, center, size, angle) {
-        // Calculate perpendicular direction
-        const dx = end.x - start.x;
-        const dy = end.y - start.y;
-        const length = Math.sqrt(dx * dx + dy * dy);
-        if (length < 1e-6) {
-            return `L ${end.x} ${end.y} `;
-        }
-        // Normalize
-        const nx = dx / length;
-        const ny = dy / length;
-        // Perpendicular vector
-        const px = -ny;
-        const py = nx;
-        // Bridge shape: go up, across, down
-        const bridgeHeight = size * 0.4;
-        const bridgeWidth = size * 0.3;
-        // Calculate bridge points
-        const p1x = start.x + nx * bridgeWidth;
-        const p1y = start.y + ny * bridgeWidth;
-        const p2x = p1x + px * bridgeHeight;
-        const p2y = p1y + py * bridgeHeight;
-        const p3x = end.x - nx * bridgeWidth;
-        const p3y = end.y - ny * bridgeWidth;
-        const p4x = p3x + px * bridgeHeight;
-        const p4y = p3y + py * bridgeHeight;
-        return `L ${p1x} ${p1y} L ${p2x} ${p2y} L ${p4x} ${p4y} L ${p3x} ${p3y} L ${end.x} ${end.y} `;
-    }
-    /**
-     * Parse SVG path data to extract points
-     */
-    parsePathToPoints(pathData) {
-        const points = [];
-        try {
-            // Simple parser for M and L commands
-            // Remove extra whitespace and commas
-            const normalized = pathData
-                .replace(/,/g, ' ')
-                .replace(/\s+/g, ' ')
-                .trim();
-            // Split by commands
-            const commands = normalized.match(/[MLHVCSQTAZ][^MLHVCSQTAZ]*/gi);
-            if (!commands) {
-                return points;
-            }
-            let currentX = 0;
-            let currentY = 0;
-            for (const cmd of commands) {
-                const letter = cmd[0];
-                const type = letter.toUpperCase();
-                // Lowercase commands are RELATIVE to the current point per the SVG
-                // spec — treating them as absolute garbles the path
-                const rel = letter !== type;
-                const coords = cmd
-                    .slice(1)
-                    .trim()
-                    .split(/[\s,]+/)
-                    .map(parseFloat)
-                    .filter(n => !isNaN(n));
-                const setPoint = (x, y) => {
-                    currentX = rel ? currentX + x : x;
-                    currentY = rel ? currentY + y : y;
-                    points.push({ x: currentX, y: currentY });
-                };
-                switch (type) {
-                    case 'M': // Move to (subsequent pairs are implicit line-tos)
-                    case 'L': // Line to (may carry multiple implicit pairs)
-                        for (let k = 0; k + 1 < coords.length; k += 2) {
-                            setPoint(coords[k], coords[k + 1]);
-                        }
-                        break;
-                    case 'H': // Horizontal line(s)
-                        for (const c of coords) {
-                            currentX = rel ? currentX + c : c;
-                            points.push({ x: currentX, y: currentY });
-                        }
-                        break;
-                    case 'V': // Vertical line(s)
-                        for (const c of coords) {
-                            currentY = rel ? currentY + c : c;
-                            points.push({ x: currentX, y: currentY });
-                        }
-                        break;
-                    case 'Q': // Quadratic curve(s) — use endpoints
-                        for (let k = 0; k + 3 < coords.length; k += 4) {
-                            setPoint(coords[k + 2], coords[k + 3]);
-                        }
-                        break;
-                    case 'C': // Cubic curve(s) — use endpoints
-                        for (let k = 0; k + 5 < coords.length; k += 6) {
-                            setPoint(coords[k + 4], coords[k + 5]);
-                        }
-                        break;
-                    case 'A': // Arc(s) — use endpoints
-                        for (let k = 0; k + 6 < coords.length; k += 7) {
-                            setPoint(coords[k + 5], coords[k + 6]);
-                        }
-                        break;
-                }
-            }
-        }
-        catch (error) {
-            // Return empty on parse error
-            console.warn('Failed to parse path:', error);
-        }
-        return points;
-    }
-    /**
-     * Interpolate point between two points
-     */
-    interpolatePoint(start, end, t) {
-        t = Math.max(0, Math.min(1, t));
-        return {
-            x: start.x + (end.x - start.x) * t,
-            y: start.y + (end.y - start.y) * t
-        };
-    }
-    /**
-     * Get segment length
-     */
-    getSegmentLength(start, end) {
-        const dx = end.x - start.x;
-        const dy = end.y - start.y;
-        return Math.sqrt(dx * dx + dy * dy);
-    }
-}
-exports.JumpPointRenderer = JumpPointRenderer;
-//# sourceMappingURL=JumpPointRenderer.js.map