@flowdrop/flowdrop 1.4.0 → 1.6.0

package/dist/components/FlowDropEdge.stories.svelte

@@ -1,159 +1,159 @@
 <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"],
+    title: 'Edges/FlowDropEdge',
+    tags: ['autodocs'],
     parameters: {
-      layout: "centered",
-    },
+      layout: 'centered'
+    }
   });
 
   const sourceNode = createSampleNodeData({
-    label: "Text Input",
+    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",
+      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,
-        },
-      ],
-    },
+          id: 'output',
+          name: 'Output',
+          type: 'output',
+          dataType: 'string',
+          required: false
+        }
+      ]
+    }
   });
 
   const targetNode = createSampleNodeData({
-    label: "Text Output",
+    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",
+      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,
-        },
+          id: 'input',
+          name: 'Input',
+          type: 'input',
+          dataType: 'string',
+          required: false
+        }
       ],
-      outputs: [],
-    },
+      outputs: []
+    }
   });
 
   const triggerSource = createSampleNodeData({
-    label: "Trigger Source",
+    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",
+      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,
-        },
-      ],
-    },
+          id: 'trigger',
+          name: 'Trigger',
+          type: 'output',
+          dataType: 'trigger',
+          required: false
+        }
+      ]
+    }
   });
 
   const triggerTarget = createSampleNodeData({
-    label: "Trigger Target",
+    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",
+      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,
-        },
+          id: 'trigger',
+          name: 'Trigger',
+          type: 'input',
+          dataType: 'trigger',
+          required: false
+        }
       ],
-      outputs: [],
-    },
+      outputs: []
+    }
   });
 
   const toolSource = createSampleNodeData({
-    label: "Tool Provider",
+    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",
+      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,
-        },
-      ],
-    },
+          id: 'tool',
+          name: 'Tool',
+          type: 'output',
+          dataType: 'tool',
+          required: false
+        }
+      ]
+    }
   });
 
   const toolTarget = createSampleNodeData({
-    label: "Tool Consumer",
+    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",
+      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,
-        },
+          id: 'tool',
+          name: 'Tool',
+          type: 'input',
+          dataType: 'tool',
+          required: false
+        }
       ],
-      outputs: [],
-    },
+      outputs: []
+    }
   });
 </script>
 

package/dist/components/FlowDropEdge.svelte

@@ -11,10 +11,10 @@
 -->
 
 <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";
+  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,
@@ -30,16 +30,16 @@
     style,
     targetPosition,
     targetX,
-    targetY,
+    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)";
+    if (!style) return 'var(--fd-edge-data, #64748b)';
     const match = style.match(/stroke:\s*([^;]+)/);
-    return match ? match[1].trim() : "var(--fd-edge-data, #64748b)";
+    return match ? match[1].trim() : 'var(--fd-edge-data, #64748b)';
   });
 
   /**
@@ -57,7 +57,7 @@
       p2x: nums[4],
       p2y: nums[5],
       p3x: nums[6],
-      p3y: nums[7],
+      p3y: nums[7]
     };
   }
 
@@ -70,7 +70,7 @@
       targetY,
       sourcePosition,
       targetPosition,
-      curvature: pathOptions?.curvature,
+      curvature: pathOptions?.curvature
     });
 
     // 2. Parse control points from SVG path
@@ -90,16 +90,8 @@
     const adjX = targetX - Math.cos(angleRad) * ARROW_LENGTH_PX;
     const adjY = targetY - Math.sin(angleRad) * ARROW_LENGTH_PX;
 
-    // 5. Recompute the bezier path with the shortened target
-    const [shortenedPath] = getBezierPath({
-      sourceX,
-      sourceY,
-      targetX: adjX,
-      targetY: adjY,
-      sourcePosition,
-      targetPosition,
-      curvature: pathOptions?.curvature,
-    });
+    // 5. Build shortened path from existing control points — no second getBezierPath() call
+    const shortenedPath = `M ${cp.p0x},${cp.p0y} C ${cp.p1x},${cp.p1y} ${cp.p2x},${cp.p2y} ${adjX},${adjY}`;
 
     return { path: shortenedPath, labelX: lx, labelY: ly, angleDeg };
   });

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;

package/dist/components/FlowDropZone.svelte

@@ -5,8 +5,8 @@
 -->
 
 <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;
@@ -26,7 +26,7 @@
   function handleDragOver(e: DragEvent): void {
     e.preventDefault();
     if (e.dataTransfer) {
-      e.dataTransfer.dropEffect = "copy";
+      e.dataTransfer.dropEffect = 'copy';
     }
   }
 
@@ -44,22 +44,19 @@
     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"))
-      ) {
+      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");
+    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,
+        y: e.clientY
       });
 
       // Call the parent handler with the converted position

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",
+    title: 'Display/LoadingSpinner',
     component: LoadingSpinner,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
       size: {
-        control: { type: "select" },
-        options: ["xs", "sm", "md", "lg"],
+        control: { type: 'select' },
+        options: ['xs', 'sm', 'md', 'lg']
       },
-      text: { control: "text" },
-      showText: { control: "boolean" },
-    },
+      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

@@ -5,7 +5,7 @@
 
 <script lang="ts">
   interface Props {
-    size?: "xs" | "sm" | "md" | "lg";
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     text?: string;
     showText?: boolean;
   }
@@ -13,8 +13,8 @@
   let props: Props = $props();
 
   // Default values
-  let size = $derived(props.size || "md");
-  let text = $derived(props.text || "Loading...");
+  let size = $derived(props.size || 'md');
+  let text = $derived(props.text || 'Loading...');
   let showText = $derived(props.showText !== false);
 </script>
 

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,11 +1,11 @@
 <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",
+    title: 'Display/Logo',
     component: Logo,
-    tags: ["autodocs"],
+    tags: ['autodocs']
   });
 </script>
 

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;

package/dist/components/Logo.svelte

@@ -19,10 +19,7 @@
         ry="20"
         id="rect15-5-0-8-9-7"
       />
-      <g
-        id="g6893-4-9-5-2"
-        transform="matrix(1.2053353,0,0,1.2053353,-1246.7763,-599.46548)"
-      >
+      <g id="g6893-4-9-5-2" transform="matrix(1.2053353,0,0,1.2053353,-1246.7763,-599.46548)">
         <path
           style="fill:var(--logo-line-fill);stroke:var(--logo-stroke);stroke-width:10;stroke-dasharray:none;stroke-opacity:1"
           d="M 849.61489,153.69711 850,298.31429 Z"
@@ -73,10 +70,7 @@
         />
       </g>
     </g>
-    <g
-      id="g6663-4"
-      transform="matrix(0.87890795,0,0,0.87890795,3770.6486,2734.4692)"
-    />
+    <g id="g6663-4" transform="matrix(0.87890795,0,0,0.87890795,3770.6486,2734.4692)" />
   </svg>
 </div>
 
@@ -91,7 +85,7 @@
     --logo-right: var(--fd-logo-right, #ffc423);
   }
 
-  :global([data-theme="dark"]) .flowdrop-logo {
+  :global([data-theme='dark']) .flowdrop-logo {
     --logo-bg: var(--fd-logo-bg, none);
     --logo-stroke: var(--fd-logo-stroke, #ffffff);
     --logo-line-fill: var(--fd-logo-line-fill, none);