@dryui/ui 0.2.1 → 0.3.0

package/dist/diagram/diagram.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { DiagramConfig } from './types.js';
+interface Props extends SVGAttributes<SVGSVGElement> {
+    config: DiagramConfig;
+    width?: number;
+    height?: number;
+}
+declare const Diagram: import("svelte").Component<Props, {}, "">;
+type Diagram = ReturnType<typeof Diagram>;
+export default Diagram;

package/dist/diagram/edge-routing.d.ts

@@ -0,0 +1,9 @@
+import type { DiagramEdge, DiagramDirection, PositionedEdge } from './types.js';
+export declare function computeEdgePaths(edges: DiagramEdge[], positions: Map<string, {
+    x: number;
+    y: number;
+}>, nodeDims: Map<string, {
+    w: number;
+    h: number;
+}>, direction: DiagramDirection): PositionedEdge[];
+export declare function emptyEdge(edge: DiagramEdge): PositionedEdge;

package/dist/diagram/edge-routing.js

@@ -0,0 +1,281 @@
+const EDGE_GAP = 14;
+const BUS_OFFSET_MIN = 28;
+const BUS_OFFSET_MAX = 48;
+export function computeEdgePaths(edges, positions, nodeDims, direction) {
+    const horizontal = direction === 'LR' || direction === 'RL';
+    const bySource = new Map();
+    const byTarget = new Map();
+    for (const edge of edges) {
+        const sourceList = bySource.get(edge.from) || [];
+        sourceList.push(edge);
+        bySource.set(edge.from, sourceList);
+        const targetList = byTarget.get(edge.to) || [];
+        targetList.push(edge);
+        byTarget.set(edge.to, targetList);
+    }
+    const sourceBusCache = new Map();
+    const targetBusCache = new Map();
+    return edges.map((edge) => {
+        const endpoints = getEndpoints(edge, positions, nodeDims, horizontal);
+        if (!endpoints) {
+            return emptyEdge(edge);
+        }
+        const sourceSiblings = bySource.get(edge.from) || [];
+        const targetSiblings = byTarget.get(edge.to) || [];
+        let points;
+        if (horizontal) {
+            if (sourceSiblings.length > 1) {
+                let busX = sourceBusCache.get(edge.from);
+                if (busX === undefined) {
+                    busX = computeSourceBusAxis(sourceSiblings, positions, nodeDims, horizontal, endpoints.fx);
+                    sourceBusCache.set(edge.from, busX);
+                }
+                points = buildHorizontalBusPoints(endpoints, busX);
+            }
+            else if (targetSiblings.length > 1) {
+                let busX = targetBusCache.get(edge.to);
+                if (busX === undefined) {
+                    busX = computeTargetBusAxis(targetSiblings, positions, nodeDims, horizontal, endpoints.tx);
+                    targetBusCache.set(edge.to, busX);
+                }
+                points = buildHorizontalBusPoints(endpoints, busX);
+            }
+            else {
+                points = buildHorizontalPoints(endpoints);
+            }
+        }
+        else if (sourceSiblings.length > 1) {
+            let busY = sourceBusCache.get(edge.from);
+            if (busY === undefined) {
+                busY = computeSourceBusAxis(sourceSiblings, positions, nodeDims, horizontal, endpoints.fy);
+                sourceBusCache.set(edge.from, busY);
+            }
+            points = buildVerticalBusPoints(endpoints, busY);
+        }
+        else if (targetSiblings.length > 1) {
+            let busY = targetBusCache.get(edge.to);
+            if (busY === undefined) {
+                busY = computeTargetBusAxis(targetSiblings, positions, nodeDims, horizontal, endpoints.ty);
+                targetBusCache.set(edge.to, busY);
+            }
+            points = buildVerticalBusPoints(endpoints, busY);
+        }
+        else {
+            points = buildVerticalPoints(endpoints);
+        }
+        const collapsed = collapsePoints(points);
+        const path = buildPathFromCollapsed(collapsed);
+        const midpoint = getMidpointFromCollapsed(collapsed);
+        return {
+            from: edge.from,
+            to: edge.to,
+            path,
+            label: edge.label,
+            labelX: midpoint.x,
+            labelY: midpoint.y - (horizontal ? 12 : 0),
+            arrow: edge.arrow || 'end',
+            dashed: edge.dashed || false,
+            color: edge.color || 'neutral'
+        };
+    });
+}
+function getEndpoints(edge, positions, nodeDims, horizontal) {
+    const fromPos = positions.get(edge.from);
+    const toPos = positions.get(edge.to);
+    const fromDims = nodeDims.get(edge.from);
+    const toDims = nodeDims.get(edge.to);
+    if (!fromPos || !toPos || !fromDims || !toDims) {
+        return undefined;
+    }
+    const fromCenter = {
+        x: fromPos.x + fromDims.w / 2,
+        y: fromPos.y + fromDims.h / 2
+    };
+    const toCenter = {
+        x: toPos.x + toDims.w / 2,
+        y: toPos.y + toDims.h / 2
+    };
+    if (horizontal) {
+        const leftToRight = fromCenter.x <= toCenter.x;
+        return {
+            fx: leftToRight ? fromPos.x + fromDims.w + EDGE_GAP : fromPos.x - EDGE_GAP,
+            fy: fromCenter.y,
+            tx: leftToRight ? toPos.x - EDGE_GAP : toPos.x + toDims.w + EDGE_GAP,
+            ty: toCenter.y
+        };
+    }
+    const topToBottom = fromCenter.y <= toCenter.y;
+    return {
+        fx: fromCenter.x,
+        fy: topToBottom ? fromPos.y + fromDims.h + EDGE_GAP : fromPos.y - EDGE_GAP,
+        tx: toCenter.x,
+        ty: topToBottom ? toPos.y - EDGE_GAP : toPos.y + toDims.h + EDGE_GAP
+    };
+}
+function computeSourceBusAxis(siblings, positions, nodeDims, horizontal, sourceAxis) {
+    const targetAxes = siblings
+        .map((edge) => getEndpoints(edge, positions, nodeDims, horizontal))
+        .filter((endpoints) => Boolean(endpoints))
+        .map((endpoints) => (horizontal ? endpoints.tx : endpoints.ty));
+    if (targetAxes.length === 0) {
+        return sourceAxis;
+    }
+    const direction = Math.sign(targetAxes.reduce((sum, axis) => sum + axis, 0) / targetAxes.length - sourceAxis) ||
+        1;
+    const nearestAxis = direction > 0 ? Math.min(...targetAxes) : Math.max(...targetAxes);
+    const available = Math.abs(nearestAxis - sourceAxis);
+    const offset = clampBusOffset(available);
+    return sourceAxis + direction * offset;
+}
+function computeTargetBusAxis(siblings, positions, nodeDims, horizontal, targetAxis) {
+    const sourceAxes = siblings
+        .map((edge) => getEndpoints(edge, positions, nodeDims, horizontal))
+        .filter((endpoints) => Boolean(endpoints))
+        .map((endpoints) => (horizontal ? endpoints.fx : endpoints.fy));
+    if (sourceAxes.length === 0) {
+        return targetAxis;
+    }
+    const direction = Math.sign(targetAxis - sourceAxes.reduce((sum, axis) => sum + axis, 0) / sourceAxes.length) ||
+        1;
+    const nearestAxis = direction > 0 ? Math.max(...sourceAxes) : Math.min(...sourceAxes);
+    const available = Math.abs(targetAxis - nearestAxis);
+    const offset = clampBusOffset(available);
+    return targetAxis - direction * offset;
+}
+function clampBusOffset(available) {
+    if (available <= 0)
+        return 0;
+    return Math.min(BUS_OFFSET_MAX, Math.max(BUS_OFFSET_MIN, available * 0.28), available / 2);
+}
+function buildHorizontalPoints(endpoints) {
+    if (Math.abs(endpoints.ty - endpoints.fy) < 1) {
+        return [
+            { x: endpoints.fx, y: endpoints.fy },
+            { x: endpoints.tx, y: endpoints.ty }
+        ];
+    }
+    const midX = endpoints.fx + (endpoints.tx - endpoints.fx) / 2;
+    return [
+        { x: endpoints.fx, y: endpoints.fy },
+        { x: midX, y: endpoints.fy },
+        { x: midX, y: endpoints.ty },
+        { x: endpoints.tx, y: endpoints.ty }
+    ];
+}
+function buildVerticalPoints(endpoints) {
+    if (Math.abs(endpoints.tx - endpoints.fx) < 1) {
+        return [
+            { x: endpoints.fx, y: endpoints.fy },
+            { x: endpoints.tx, y: endpoints.ty }
+        ];
+    }
+    const midY = endpoints.fy + (endpoints.ty - endpoints.fy) / 2;
+    return [
+        { x: endpoints.fx, y: endpoints.fy },
+        { x: endpoints.fx, y: midY },
+        { x: endpoints.tx, y: midY },
+        { x: endpoints.tx, y: endpoints.ty }
+    ];
+}
+function buildHorizontalBusPoints(endpoints, busX) {
+    const points = [{ x: endpoints.fx, y: endpoints.fy }];
+    if (Math.abs(busX - endpoints.fx) >= 1) {
+        points.push({ x: busX, y: endpoints.fy });
+    }
+    if (Math.abs(endpoints.ty - endpoints.fy) >= 1) {
+        points.push({ x: busX, y: endpoints.ty });
+    }
+    points.push({ x: endpoints.tx, y: endpoints.ty });
+    return points;
+}
+function buildVerticalBusPoints(endpoints, busY) {
+    const points = [{ x: endpoints.fx, y: endpoints.fy }];
+    if (Math.abs(busY - endpoints.fy) >= 1) {
+        points.push({ x: endpoints.fx, y: busY });
+    }
+    if (Math.abs(endpoints.tx - endpoints.fx) >= 1) {
+        points.push({ x: endpoints.tx, y: busY });
+    }
+    points.push({ x: endpoints.tx, y: endpoints.ty });
+    return points;
+}
+function buildPathFromCollapsed(collapsed) {
+    if (collapsed.length === 0)
+        return '';
+    if (collapsed.length === 1)
+        return `M ${collapsed[0].x} ${collapsed[0].y}`;
+    return collapsed
+        .map((point, index) => (index === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`))
+        .join(' ');
+}
+function collapsePoints(points) {
+    const collapsed = [];
+    for (const point of points) {
+        const snapped = snapPoint(point);
+        const previous = collapsed[collapsed.length - 1];
+        if (previous &&
+            Math.abs(previous.x - snapped.x) < 0.01 &&
+            Math.abs(previous.y - snapped.y) < 0.01) {
+            continue;
+        }
+        collapsed.push(snapped);
+    }
+    return collapsed;
+}
+function snapPoint(point) {
+    return {
+        x: snapCoordinate(point.x),
+        y: snapCoordinate(point.y)
+    };
+}
+function snapCoordinate(value) {
+    return Math.round(value) + 0.5;
+}
+function getMidpointFromCollapsed(collapsed) {
+    let totalLength = 0;
+    const segments = [];
+    for (let index = 1; index < collapsed.length; index += 1) {
+        const from = collapsed[index - 1];
+        const to = collapsed[index];
+        const length = Math.abs(to.x - from.x) + Math.abs(to.y - from.y);
+        if (length === 0)
+            continue;
+        segments.push({ from, to, length });
+        totalLength += length;
+    }
+    if (totalLength === 0) {
+        return collapsed[0] ?? { x: 0, y: 0 };
+    }
+    let remaining = totalLength / 2;
+    for (const segment of segments) {
+        if (remaining <= segment.length) {
+            if (segment.from.x !== segment.to.x) {
+                const direction = Math.sign(segment.to.x - segment.from.x);
+                return {
+                    x: segment.from.x + direction * remaining,
+                    y: segment.from.y
+                };
+            }
+            const direction = Math.sign(segment.to.y - segment.from.y);
+            return {
+                x: segment.from.x,
+                y: segment.from.y + direction * remaining
+            };
+        }
+        remaining -= segment.length;
+    }
+    return collapsed[collapsed.length - 1] ?? { x: 0, y: 0 };
+}
+export function emptyEdge(edge) {
+    return {
+        from: edge.from,
+        to: edge.to,
+        path: '',
+        label: edge.label,
+        labelX: 0,
+        labelY: 0,
+        arrow: edge.arrow || 'end',
+        dashed: edge.dashed || false,
+        color: edge.color || 'neutral'
+    };
+}

package/dist/diagram/index.d.ts

@@ -0,0 +1,9 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { DiagramConfig } from './types.js';
+export interface DiagramProps extends SVGAttributes<SVGSVGElement> {
+    config: DiagramConfig;
+    width?: number;
+    height?: number;
+}
+export { default as Diagram } from './diagram.svelte';
+export type { DiagramConfig, DiagramNode, DiagramEdge, DiagramCluster, DiagramAnnotation, DiagramSwimlane, DiagramRegion, DiagramMessage, DiagramFragment, DiagramColor, DiagramDirection } from './types.js';

package/dist/diagram/index.js

@@ -0,0 +1 @@
+export { default as Diagram } from './diagram.svelte';

package/dist/diagram/layout.d.ts

@@ -0,0 +1,2 @@
+import type { DiagramConfig, LayoutResult } from './types.js';
+export declare function computeLayout(config: DiagramConfig): LayoutResult;