@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/components/FlowDropEdge.stories.svelte

@@ -1,161 +1,197 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import EdgeDecorator from '../../lib/stories/EdgeDecorator.svelte';
-	import { createSampleNodeData } from '../../lib/stories/utils.js';
-	import { EDGE_MARKER_SIZES } from '../../lib/config/constants.js';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import EdgeDecorator from "../../lib/stories/EdgeDecorator.svelte";
+  import { createSampleNodeData } from "../../lib/stories/utils.js";
+  import { EDGE_MARKER_SIZES } from "../../lib/config/constants.js";
 
-	const { Story } = defineMeta({
-		title: 'Edges/FlowDropEdge',
-		tags: ['autodocs'],
-		parameters: {
-			layout: 'centered'
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Edges/FlowDropEdge",
+    tags: ["autodocs"],
+    parameters: {
+      layout: "centered",
+    },
+  });
 
-	const sourceNode = createSampleNodeData({
-		label: 'Text Input',
-		metadata: {
-			id: 'text_input',
-			name: 'Text Input',
-			description: 'Simple text input',
-			category: 'inputs',
-			version: '1.0.0',
-			type: 'simple',
-			icon: 'mdi:text',
-			color: '#22c55e',
-			inputs: [],
-			outputs: [
-				{ id: 'output', name: 'Output', type: 'output', dataType: 'string', required: false }
-			]
-		}
-	});
+  const sourceNode = createSampleNodeData({
+    label: "Text Input",
+    metadata: {
+      id: "text_input",
+      name: "Text Input",
+      description: "Simple text input",
+      category: "inputs",
+      version: "1.0.0",
+      type: "simple",
+      icon: "mdi:text",
+      color: "#22c55e",
+      inputs: [],
+      outputs: [
+        {
+          id: "output",
+          name: "Output",
+          type: "output",
+          dataType: "string",
+          required: false,
+        },
+      ],
+    },
+  });
 
-	const targetNode = createSampleNodeData({
-		label: 'Text Output',
-		metadata: {
-			id: 'text_output',
-			name: 'Text Output',
-			description: 'Display text output',
-			category: 'outputs',
-			version: '1.0.0',
-			type: 'simple',
-			icon: 'mdi:text-box',
-			color: '#ef4444',
-			inputs: [
-				{ id: 'input', name: 'Input', type: 'input', dataType: 'string', required: false }
-			],
-			outputs: []
-		}
-	});
+  const targetNode = createSampleNodeData({
+    label: "Text Output",
+    metadata: {
+      id: "text_output",
+      name: "Text Output",
+      description: "Display text output",
+      category: "outputs",
+      version: "1.0.0",
+      type: "simple",
+      icon: "mdi:text-box",
+      color: "#ef4444",
+      inputs: [
+        {
+          id: "input",
+          name: "Input",
+          type: "input",
+          dataType: "string",
+          required: false,
+        },
+      ],
+      outputs: [],
+    },
+  });
 
-	const triggerSource = createSampleNodeData({
-		label: 'Trigger Source',
-		metadata: {
-			id: 'trigger_source',
-			name: 'Trigger Source',
-			description: 'Emits a trigger signal',
-			category: 'processing',
-			version: '1.0.0',
-			type: 'simple',
-			icon: 'mdi:play',
-			color: '#3b82f6',
-			inputs: [],
-			outputs: [
-				{ id: 'trigger', name: 'Trigger', type: 'output', dataType: 'trigger', required: false }
-			]
-		}
-	});
+  const triggerSource = createSampleNodeData({
+    label: "Trigger Source",
+    metadata: {
+      id: "trigger_source",
+      name: "Trigger Source",
+      description: "Emits a trigger signal",
+      category: "processing",
+      version: "1.0.0",
+      type: "simple",
+      icon: "mdi:play",
+      color: "#3b82f6",
+      inputs: [],
+      outputs: [
+        {
+          id: "trigger",
+          name: "Trigger",
+          type: "output",
+          dataType: "trigger",
+          required: false,
+        },
+      ],
+    },
+  });
 
-	const triggerTarget = createSampleNodeData({
-		label: 'Trigger Target',
-		metadata: {
-			id: 'trigger_target',
-			name: 'Trigger Target',
-			description: 'Receives a trigger signal',
-			category: 'processing',
-			version: '1.0.0',
-			type: 'simple',
-			icon: 'mdi:lightning-bolt',
-			color: '#8b5cf6',
-			inputs: [
-				{ id: 'trigger', name: 'Trigger', type: 'input', dataType: 'trigger', required: false }
-			],
-			outputs: []
-		}
-	});
+  const triggerTarget = createSampleNodeData({
+    label: "Trigger Target",
+    metadata: {
+      id: "trigger_target",
+      name: "Trigger Target",
+      description: "Receives a trigger signal",
+      category: "processing",
+      version: "1.0.0",
+      type: "simple",
+      icon: "mdi:lightning-bolt",
+      color: "#8b5cf6",
+      inputs: [
+        {
+          id: "trigger",
+          name: "Trigger",
+          type: "input",
+          dataType: "trigger",
+          required: false,
+        },
+      ],
+      outputs: [],
+    },
+  });
 
-	const toolSource = createSampleNodeData({
-		label: 'Tool Provider',
-		metadata: {
-			id: 'tool_provider',
-			name: 'Tool Provider',
-			description: 'Provides a tool',
-			category: 'processing',
-			version: '1.0.0',
-			type: 'simple',
-			icon: 'mdi:wrench',
-			color: '#f59e0b',
-			inputs: [],
-			outputs: [
-				{ id: 'tool', name: 'Tool', type: 'output', dataType: 'tool', required: false }
-			]
-		}
-	});
+  const toolSource = createSampleNodeData({
+    label: "Tool Provider",
+    metadata: {
+      id: "tool_provider",
+      name: "Tool Provider",
+      description: "Provides a tool",
+      category: "processing",
+      version: "1.0.0",
+      type: "simple",
+      icon: "mdi:wrench",
+      color: "#f59e0b",
+      inputs: [],
+      outputs: [
+        {
+          id: "tool",
+          name: "Tool",
+          type: "output",
+          dataType: "tool",
+          required: false,
+        },
+      ],
+    },
+  });
 
-	const toolTarget = createSampleNodeData({
-		label: 'Tool Consumer',
-		metadata: {
-			id: 'tool_consumer',
-			name: 'Tool Consumer',
-			description: 'Consumes a tool',
-			category: 'processing',
-			version: '1.0.0',
-			type: 'simple',
-			icon: 'mdi:cog',
-			color: '#f59e0b',
-			inputs: [
-				{ id: 'tool', name: 'Tool', type: 'input', dataType: 'tool', required: false }
-			],
-			outputs: []
-		}
-	});
+  const toolTarget = createSampleNodeData({
+    label: "Tool Consumer",
+    metadata: {
+      id: "tool_consumer",
+      name: "Tool Consumer",
+      description: "Consumes a tool",
+      category: "processing",
+      version: "1.0.0",
+      type: "simple",
+      icon: "mdi:cog",
+      color: "#f59e0b",
+      inputs: [
+        {
+          id: "tool",
+          name: "Tool",
+          type: "input",
+          dataType: "tool",
+          required: false,
+        },
+      ],
+      outputs: [],
+    },
+  });
 </script>
 
 <Story name="Data Edge">
-	<EdgeDecorator
-		sourceData={sourceNode}
-		targetData={targetNode}
-		edgeStyle="stroke: var(--fd-edge-data, #64748b);"
-		edgeClass="flowdrop--edge--data"
-		edgeMarkerColor="#64748b"
-		edgeMarkerSize={EDGE_MARKER_SIZES.data}
-		sourceHandleId="output"
-		targetHandleId="input"
-	/>
+  <EdgeDecorator
+    sourceData={sourceNode}
+    targetData={targetNode}
+    edgeStyle="stroke: var(--fd-edge-data, #64748b);"
+    edgeClass="flowdrop--edge--data"
+    edgeMarkerColor="#64748b"
+    edgeMarkerSize={EDGE_MARKER_SIZES.data}
+    sourceHandleId="output"
+    targetHandleId="input"
+  />
 </Story>
 
 <Story name="Trigger Edge">
-	<EdgeDecorator
-		sourceData={triggerSource}
-		targetData={triggerTarget}
-		edgeStyle="stroke: var(--fd-edge-trigger, #1e293b); stroke-width: 2px;"
-		edgeClass="flowdrop--edge--trigger"
-		edgeMarkerColor="#1e293b"
-		edgeMarkerSize={EDGE_MARKER_SIZES.trigger}
-		sourceHandleId="trigger"
-		targetHandleId="trigger"
-	/>
+  <EdgeDecorator
+    sourceData={triggerSource}
+    targetData={triggerTarget}
+    edgeStyle="stroke: var(--fd-edge-trigger, #1e293b); stroke-width: 2px;"
+    edgeClass="flowdrop--edge--trigger"
+    edgeMarkerColor="#1e293b"
+    edgeMarkerSize={EDGE_MARKER_SIZES.trigger}
+    sourceHandleId="trigger"
+    targetHandleId="trigger"
+  />
 </Story>
 
 <Story name="Tool Edge">
-	<EdgeDecorator
-		sourceData={toolSource}
-		targetData={toolTarget}
-		edgeStyle="stroke: var(--fd-edge-tool, #f59e0b); stroke-dasharray: 5 3;"
-		edgeClass="flowdrop--edge--tool"
-		edgeMarkerColor="#f59e0b"
-		edgeMarkerSize={EDGE_MARKER_SIZES.tool}
-		sourceHandleId="tool"
-		targetHandleId="tool"
-	/>
+  <EdgeDecorator
+    sourceData={toolSource}
+    targetData={toolTarget}
+    edgeStyle="stroke: var(--fd-edge-tool, #f59e0b); stroke-dasharray: 5 3;"
+    edgeClass="flowdrop--edge--tool"
+    edgeMarkerColor="#f59e0b"
+    edgeMarkerSize={EDGE_MARKER_SIZES.tool}
+    sourceHandleId="tool"
+    targetHandleId="tool"
+  />
 </Story>

package/dist/components/FlowDropEdge.svelte

@@ -11,158 +11,158 @@
 -->
 
 <script lang="ts">
-	import { getBezierPath } from '@xyflow/svelte';
-	import { BaseEdge } from '@xyflow/svelte';
-	import type { BezierEdgeProps } from '@xyflow/svelte';
-	import { ARROW_LENGTH_PX, ARROW_HALF_WIDTH_PX } from '../config/constants.js';
-
-	let {
-		id,
-		interactionWidth,
-		label,
-		labelStyle,
-		markerEnd: _markerEnd,
-		markerStart,
-		pathOptions,
-		sourcePosition,
-		sourceX,
-		sourceY,
-		style,
-		targetPosition,
-		targetX,
-		targetY
-	}: BezierEdgeProps = $props();
-
-	/**
-	 * Extract stroke color from the edge's inline style for the arrowhead fill.
-	 */
-	let strokeColor = $derived.by(() => {
-		if (!style) return 'var(--fd-edge-data, #64748b)';
-		const match = style.match(/stroke:\s*([^;]+)/);
-		return match ? match[1].trim() : 'var(--fd-edge-data, #64748b)';
-	});
-
-	/**
-	 * Evaluate a cubic bezier at parameter t.
-	 * P(t) = (1-t)^3 * P0 + 3(1-t)^2 * t * P1 + 3(1-t) * t^2 * P2 + t^3 * P3
-	 */
-	function bezierAt(
-		p0x: number,
-		p0y: number,
-		p1x: number,
-		p1y: number,
-		p2x: number,
-		p2y: number,
-		p3x: number,
-		p3y: number,
-		t: number
-	): { x: number; y: number } {
-		const u = 1 - t;
-		const uu = u * u;
-		const uuu = uu * u;
-		const tt = t * t;
-		const ttt = tt * t;
-		return {
-			x: uuu * p0x + 3 * uu * t * p1x + 3 * u * tt * p2x + ttt * p3x,
-			y: uuu * p0y + 3 * uu * t * p1y + 3 * u * tt * p2y + ttt * p3y
-		};
-	}
-
-	/**
-	 * Parse the SVG cubic bezier path "M x0,y0 C x1,y1 x2,y2 x3,y3"
-	 * into the four control points.
-	 */
-	function parseCubicBezier(d: string) {
-		const nums = d.match(/-?[\d.]+/g)?.map(Number);
-		if (!nums || nums.length < 8) return null;
-		return {
-			p0x: nums[0],
-			p0y: nums[1],
-			p1x: nums[2],
-			p1y: nums[3],
-			p2x: nums[4],
-			p2y: nums[5],
-			p3x: nums[6],
-			p3y: nums[7]
-		};
-	}
-
-	// Parameter near the end of the curve for tangent sampling
-	const T_SAMPLE = 0.9;
-
-	let computed = $derived.by(() => {
-		// 1. Get the full bezier path from xyflow
-		const [fullPath, lx, ly] = getBezierPath({
-			sourceX,
-			sourceY,
-			targetX,
-			targetY,
-			sourcePosition,
-			targetPosition,
-			curvature: pathOptions?.curvature
-		});
-
-		// 2. Parse control points from SVG path
-		const cp = parseCubicBezier(fullPath);
-		if (!cp) {
-			return { path: fullPath, labelX: lx, labelY: ly, angleDeg: 0 };
-		}
-
-		// 3. Evaluate the curve at T_SAMPLE to get a reference point
-		const ref = bezierAt(
-			cp.p0x,
-			cp.p0y,
-			cp.p1x,
-			cp.p1y,
-			cp.p2x,
-			cp.p2y,
-			cp.p3x,
-			cp.p3y,
-			T_SAMPLE
-		);
-
-		// 4. Tangent direction: from reference point to the target
-		const dx = targetX - ref.x;
-		const dy = targetY - ref.y;
-		const angleDeg = (Math.atan2(dy, dx) * 180) / Math.PI;
-		const angleRad = Math.atan2(dy, dx);
-
-		// 5. Shorten: move the endpoint back along the tangent
-		const adjX = targetX - Math.cos(angleRad) * ARROW_LENGTH_PX;
-		const adjY = targetY - Math.sin(angleRad) * ARROW_LENGTH_PX;
-
-		// 6. Recompute the bezier path with the shortened target
-		const [shortenedPath] = getBezierPath({
-			sourceX,
-			sourceY,
-			targetX: adjX,
-			targetY: adjY,
-			sourcePosition,
-			targetPosition,
-			curvature: pathOptions?.curvature
-		});
-
-		return { path: shortenedPath, labelX: lx, labelY: ly, angleDeg };
-	});
+  import { getBezierPath } from "@xyflow/svelte";
+  import { BaseEdge } from "@xyflow/svelte";
+  import type { BezierEdgeProps } from "@xyflow/svelte";
+  import { ARROW_LENGTH_PX, ARROW_HALF_WIDTH_PX } from "../config/constants.js";
+
+  let {
+    id,
+    interactionWidth,
+    label,
+    labelStyle,
+    markerEnd: _markerEnd,
+    markerStart,
+    pathOptions,
+    sourcePosition,
+    sourceX,
+    sourceY,
+    style,
+    targetPosition,
+    targetX,
+    targetY,
+  }: BezierEdgeProps = $props();
+
+  /**
+   * Extract stroke color from the edge's inline style for the arrowhead fill.
+   */
+  let strokeColor = $derived.by(() => {
+    if (!style) return "var(--fd-edge-data, #64748b)";
+    const match = style.match(/stroke:\s*([^;]+)/);
+    return match ? match[1].trim() : "var(--fd-edge-data, #64748b)";
+  });
+
+  /**
+   * Evaluate a cubic bezier at parameter t.
+   * P(t) = (1-t)^3 * P0 + 3(1-t)^2 * t * P1 + 3(1-t) * t^2 * P2 + t^3 * P3
+   */
+  function bezierAt(
+    p0x: number,
+    p0y: number,
+    p1x: number,
+    p1y: number,
+    p2x: number,
+    p2y: number,
+    p3x: number,
+    p3y: number,
+    t: number,
+  ): { x: number; y: number } {
+    const u = 1 - t;
+    const uu = u * u;
+    const uuu = uu * u;
+    const tt = t * t;
+    const ttt = tt * t;
+    return {
+      x: uuu * p0x + 3 * uu * t * p1x + 3 * u * tt * p2x + ttt * p3x,
+      y: uuu * p0y + 3 * uu * t * p1y + 3 * u * tt * p2y + ttt * p3y,
+    };
+  }
+
+  /**
+   * Parse the SVG cubic bezier path "M x0,y0 C x1,y1 x2,y2 x3,y3"
+   * into the four control points.
+   */
+  function parseCubicBezier(d: string) {
+    const nums = d.match(/-?[\d.]+/g)?.map(Number);
+    if (!nums || nums.length < 8) return null;
+    return {
+      p0x: nums[0],
+      p0y: nums[1],
+      p1x: nums[2],
+      p1y: nums[3],
+      p2x: nums[4],
+      p2y: nums[5],
+      p3x: nums[6],
+      p3y: nums[7],
+    };
+  }
+
+  // Parameter near the end of the curve for tangent sampling
+  const T_SAMPLE = 0.9;
+
+  let computed = $derived.by(() => {
+    // 1. Get the full bezier path from xyflow
+    const [fullPath, lx, ly] = getBezierPath({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      curvature: pathOptions?.curvature,
+    });
+
+    // 2. Parse control points from SVG path
+    const cp = parseCubicBezier(fullPath);
+    if (!cp) {
+      return { path: fullPath, labelX: lx, labelY: ly, angleDeg: 0 };
+    }
+
+    // 3. Evaluate the curve at T_SAMPLE to get a reference point
+    const ref = bezierAt(
+      cp.p0x,
+      cp.p0y,
+      cp.p1x,
+      cp.p1y,
+      cp.p2x,
+      cp.p2y,
+      cp.p3x,
+      cp.p3y,
+      T_SAMPLE,
+    );
+
+    // 4. Tangent direction: from reference point to the target
+    const dx = targetX - ref.x;
+    const dy = targetY - ref.y;
+    const angleDeg = (Math.atan2(dy, dx) * 180) / Math.PI;
+    const angleRad = Math.atan2(dy, dx);
+
+    // 5. Shorten: move the endpoint back along the tangent
+    const adjX = targetX - Math.cos(angleRad) * ARROW_LENGTH_PX;
+    const adjY = targetY - Math.sin(angleRad) * ARROW_LENGTH_PX;
+
+    // 6. Recompute the bezier path with the shortened target
+    const [shortenedPath] = getBezierPath({
+      sourceX,
+      sourceY,
+      targetX: adjX,
+      targetY: adjY,
+      sourcePosition,
+      targetPosition,
+      curvature: pathOptions?.curvature,
+    });
+
+    return { path: shortenedPath, labelX: lx, labelY: ly, angleDeg };
+  });
 </script>
 
 <BaseEdge
-	{id}
-	path={computed.path}
-	labelX={computed.labelX}
-	labelY={computed.labelY}
-	{label}
-	{labelStyle}
-	{markerStart}
-	{interactionWidth}
-	{style}
+  {id}
+  path={computed.path}
+  labelX={computed.labelX}
+  labelY={computed.labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {interactionWidth}
+  {style}
 />
 
 <!-- Manual arrowhead: tip at origin pointing right, rotated to the bezier tangent -->
 <polygon
-	points="0,0 {-ARROW_LENGTH_PX},{-ARROW_HALF_WIDTH_PX} {-ARROW_LENGTH_PX},{ARROW_HALF_WIDTH_PX}"
-	fill={strokeColor}
-	stroke="none"
-	transform="translate({targetX},{targetY}) rotate({computed.angleDeg})"
-	class="flowdrop-edge-arrow"
+  points="0,0 {-ARROW_LENGTH_PX},{-ARROW_HALF_WIDTH_PX} {-ARROW_LENGTH_PX},{ARROW_HALF_WIDTH_PX}"
+  fill={strokeColor}
+  stroke="none"
+  transform="translate({targetX},{targetY}) rotate({computed.angleDeg})"
+  class="flowdrop-edge-arrow"
 />

package/dist/components/FlowDropEdge.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { BezierEdgeProps } from '@xyflow/svelte';
+import type { BezierEdgeProps } from "@xyflow/svelte";
 declare const FlowDropEdge: import("svelte").Component<BezierEdgeProps, {}, "">;
 type FlowDropEdge = ReturnType<typeof FlowDropEdge>;
 export default FlowDropEdge;