@flowdrop/flowdrop 1.0.0 → 1.1.0

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

@@ -0,0 +1,26 @@
+export default FlowDropEdge;
+type FlowDropEdge = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FlowDropEdge: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/FlowDropEdge.svelte

@@ -0,0 +1,168 @@
+<!--
+  FlowDropEdge Component
+  Custom bezier edge that draws its own arrowhead so the line stroke ends
+  at the arrow base instead of poking through to the tip.
+
+  Approach:
+  1. Compute the full bezier path (xyflow's getBezierPath)
+  2. Parse the SVG path to extract the cubic bezier control points
+  3. Evaluate the curve near the end to get the true visual tangent
+  4. Shorten the path along that tangent and draw the arrowhead at the target
+-->
+
+<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 };
+  });
+</script>
+
+<BaseEdge
+  {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"
+/>

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

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

package/dist/components/FlowDropZone.svelte

@@ -5,79 +5,82 @@
 -->
 
 <script lang="ts">
-	import { useSvelteFlow } from '@xyflow/svelte';
-	import type { Snippet } from 'svelte';
+  import { useSvelteFlow } from "@xyflow/svelte";
+  import type { Snippet } from "svelte";
 
-	interface Props {
-		ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
-		/** Optional callback invoked when a JSON file is dropped onto the canvas. */
-		onfiledrop?: (file: File) => void;
-		children: Snippet;
-	}
+  interface Props {
+    ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
+    /** Optional callback invoked when a JSON file is dropped onto the canvas. */
+    onfiledrop?: (file: File) => void;
+    children: Snippet;
+  }
 
-	let props: Props = $props();
+  let props: Props = $props();
 
-	// Access SvelteFlow instance for coordinate transformation
-	const { screenToFlowPosition } = useSvelteFlow();
+  // Access SvelteFlow instance for coordinate transformation
+  const { screenToFlowPosition } = useSvelteFlow();
 
-	/**
-	 * Handle drag over event
-	 */
-	function handleDragOver(e: DragEvent): void {
-		e.preventDefault();
-		if (e.dataTransfer) {
-			e.dataTransfer.dropEffect = 'copy';
-		}
-	}
+  /**
+   * Handle drag over event
+   */
+  function handleDragOver(e: DragEvent): void {
+    e.preventDefault();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = "copy";
+    }
+  }
 
-	/**
-	 * Handle drop event with proper coordinate transformation.
-	 *
-	 * If the drag event carries a JSON file (e.g. a workflow file dragged from the OS),
-	 * the `onfiledrop` callback is invoked with the file.
-	 * Otherwise the node-type drop path is used as before.
-	 */
-	function handleDrop(e: DragEvent): void {
-		e.preventDefault();
+  /**
+   * Handle drop event with proper coordinate transformation.
+   *
+   * If the drag event carries a JSON file (e.g. a workflow file dragged from the OS),
+   * the `onfiledrop` callback is invoked with the file.
+   * Otherwise the node-type drop path is used as before.
+   */
+  function handleDrop(e: DragEvent): void {
+    e.preventDefault();
 
-		// Check if the drop contains files (e.g. a workflow JSON file from the OS)
-		const files = e.dataTransfer?.files;
-		if (files && files.length > 0) {
-			const file = files[0];
-			if (props.onfiledrop && (file.type === 'application/json' || file.name.endsWith('.json'))) {
-				props.onfiledrop(file);
-			}
-			return;
-		}
+    // Check if the drop contains files (e.g. a workflow JSON file from the OS)
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (
+        props.onfiledrop &&
+        (file.type === "application/json" || file.name.endsWith(".json"))
+      ) {
+        props.onfiledrop(file);
+      }
+      return;
+    }
 
-		// Get the data from the drag event (node type dropped from sidebar)
-		const nodeTypeData = e.dataTransfer?.getData('application/json');
-		if (nodeTypeData) {
-			// Convert screen coordinates to flow coordinates (accounts for zoom and pan)
-			const position = screenToFlowPosition({
-				x: e.clientX,
-				y: e.clientY
-			});
+    // Get the data from the drag event (node type dropped from sidebar)
+    const nodeTypeData = e.dataTransfer?.getData("application/json");
+    if (nodeTypeData) {
+      // Convert screen coordinates to flow coordinates (accounts for zoom and pan)
+      const position = screenToFlowPosition({
+        x: e.clientX,
+        y: e.clientY,
+      });
 
-			// Call the parent handler with the converted position
-			props.ondrop(nodeTypeData, position);
-		}
-	}
+      // Call the parent handler with the converted position
+      props.ondrop(nodeTypeData, position);
+    }
+  }
 </script>
 
 <div
-	class="flow-drop-zone"
-	role="application"
-	aria-label="Workflow canvas"
-	ondragover={handleDragOver}
-	ondrop={handleDrop}
+  class="flow-drop-zone"
+  role="application"
+  aria-label="Workflow canvas"
+  ondragover={handleDragOver}
+  ondrop={handleDrop}
 >
-	{@render props.children()}
+  {@render props.children()}
 </div>
 
 <style>
-	.flow-drop-zone {
-		width: 100%;
-		height: 100%;
-	}
+  .flow-drop-zone {
+    width: 100%;
+    height: 100%;
+  }
 </style>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
 interface Props {
     ondrop: (nodeTypeData: string, position: {
         x: number;

package/dist/components/LoadingSpinner.stories.svelte

@@ -1,30 +1,30 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import LoadingSpinner from './LoadingSpinner.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import LoadingSpinner from "./LoadingSpinner.svelte";
 
-	const { Story } = defineMeta({
-		title: 'Display/LoadingSpinner',
-		component: LoadingSpinner,
-		tags: ['autodocs'],
-		argTypes: {
-			size: {
-				control: { type: 'select' },
-				options: ['xs', 'sm', 'md', 'lg']
-			},
-			text: { control: 'text' },
-			showText: { control: 'boolean' }
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Display/LoadingSpinner",
+    component: LoadingSpinner,
+    tags: ["autodocs"],
+    argTypes: {
+      size: {
+        control: { type: "select" },
+        options: ["xs", "sm", "md", "lg"],
+      },
+      text: { control: "text" },
+      showText: { control: "boolean" },
+    },
+  });
 </script>
 
 <Story name="Default" />
 
-<Story name="Extra Small" args={{ size: 'xs' }} />
+<Story name="Extra Small" args={{ size: "xs" }} />
 
-<Story name="Small" args={{ size: 'sm' }} />
+<Story name="Small" args={{ size: "sm" }} />
 
-<Story name="Large" args={{ size: 'lg' }} />
+<Story name="Large" args={{ size: "lg" }} />
 
-<Story name="Custom Text" args={{ text: 'Processing...' }} />
+<Story name="Custom Text" args={{ text: "Processing..." }} />
 
 <Story name="No Text" args={{ showText: false }} />

package/dist/components/LoadingSpinner.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const LoadingSpinner: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import LoadingSpinner from './LoadingSpinner.svelte';
+import LoadingSpinner from "./LoadingSpinner.svelte";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/LoadingSpinner.svelte

@@ -4,33 +4,33 @@
 -->
 
 <script lang="ts">
-	interface Props {
-		size?: 'xs' | 'sm' | 'md' | 'lg';
-		text?: string;
-		showText?: boolean;
-	}
+  interface Props {
+    size?: "xs" | "sm" | "md" | "lg";
+    text?: string;
+    showText?: boolean;
+  }
 
-	let props: Props = $props();
+  let props: Props = $props();
 
-	// Default values
-	let size = $derived(props.size || 'md');
-	let text = $derived(props.text || 'Loading...');
-	let showText = $derived(props.showText !== false);
+  // Default values
+  let size = $derived(props.size || "md");
+  let text = $derived(props.text || "Loading...");
+  let showText = $derived(props.showText !== false);
 </script>
 
 <div class="flowdrop-loading">
-	<div class="flowdrop-spinner flowdrop-spinner--{size}"></div>
-	{#if showText}
-		<p class="flowdrop-text--xs flowdrop-text--gray">{text}</p>
-	{/if}
+  <div class="flowdrop-spinner flowdrop-spinner--{size}"></div>
+  {#if showText}
+    <p class="flowdrop-text--xs flowdrop-text--gray">{text}</p>
+  {/if}
 </div>
 
 <style>
-	.flowdrop-loading {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 0.5rem;
-	}
+  .flowdrop-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
 </style>

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

@@ -1,5 +1,5 @@
 interface Props {
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size?: "xs" | "sm" | "md" | "lg";
     text?: string;
     showText?: boolean;
 }

package/dist/components/Logo.stories.svelte

@@ -1,22 +1,22 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Logo from './Logo.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Logo from "./Logo.svelte";
 
-	const { Story } = defineMeta({
-		title: 'Display/Logo',
-		component: Logo,
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    title: "Display/Logo",
+    component: Logo,
+    tags: ["autodocs"],
+  });
 </script>
 
 <Story name="Default">
-	<div style="width: 64px; height: 64px;">
-		<Logo />
-	</div>
+  <div style="width: 64px; height: 64px;">
+    <Logo />
+  </div>
 </Story>
 
 <Story name="Large">
-	<div style="width: 128px; height: 128px;">
-		<Logo />
-	</div>
+  <div style="width: 128px; height: 128px;">
+    <Logo />
+  </div>
 </Story>

package/dist/components/Logo.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const Logo: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Logo from './Logo.svelte';
+import Logo from "./Logo.svelte";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;