@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/nodes/SimpleNode.svelte

@@ -10,28 +10,21 @@
 -->
 
 <script lang="ts">
-  import { Position, Handle } from "@xyflow/svelte";
+  import { Position, Handle } from '@xyflow/svelte';
   import type {
     ConfigValues,
     NodeMetadata,
     NodeExtensions,
     NodePort,
-    DynamicPort,
-  } from "../../types/index.js";
-  import { dynamicPortToNodePort } from "../../types/index.js";
-  import Icon from "@iconify/svelte";
-  import {
-    getDataTypeColor,
-    getCategoryColorToken,
-  } from "../../utils/colors.js";
-  import { getConnectedHandles } from "../../stores/workflowStore.svelte.js";
-  import {
-    applyPortOrder,
-    getPortTop,
-    isPortVisible,
-  } from "../../utils/portUtils.js";
-  import CogIcon from "../icons/CogIcon.svelte";
-  import AlertCircleIcon from "../icons/AlertCircleIcon.svelte";
+    DynamicPort
+  } from '../../types/index.js';
+  import { dynamicPortToNodePort } from '../../types/index.js';
+  import Icon from '@iconify/svelte';
+  import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
+  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { applyPortOrder, getPortTop, isPortVisible } from '../../utils/portUtils.js';
+  import CogIcon from '../icons/CogIcon.svelte';
+  import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
 
   const props = $props<{
     data: {
@@ -57,31 +50,23 @@
   const hideUnconnectedHandles = $derived(
     props.data.extensions?.ui?.hideUnconnectedHandles ??
       props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ??
-      false,
+      false
   );
 
   const hiddenPorts = $derived(
-    props.data.extensions?.ui?.hiddenPorts ??
-      props.data.metadata?.extensions?.ui?.hiddenPorts ??
-      {},
+    props.data.extensions?.ui?.hiddenPorts ?? props.data.metadata?.extensions?.ui?.hiddenPorts ?? {}
   );
 
   const portOrder = $derived(
-    props.data.extensions?.ui?.portOrder ??
-      props.data.metadata?.extensions?.ui?.portOrder ??
-      {},
+    props.data.extensions?.ui?.portOrder ?? props.data.metadata?.extensions?.ui?.portOrder ?? {}
   );
 
   // Prioritize metadata icon over config icon for simple nodes (metadata is the node definition)
   let nodeIcon = $derived(
-    (props.data.metadata?.icon as string) ||
-      (props.data.config?.icon as string) ||
-      "mdi:square",
+    (props.data.metadata?.icon as string) || (props.data.config?.icon as string) || 'mdi:square'
   );
   let nodeColor = $derived(
-    (props.data.metadata?.color as string) ||
-      (props.data.config?.color as string) ||
-      "#6366f1",
+    (props.data.metadata?.color as string) || (props.data.config?.color as string) || '#6366f1'
   );
 
   /**
@@ -89,9 +74,7 @@
    * Falls back to the original label if not set.
    * This allows users to customize the node title per-instance via config.
    */
-  const displayTitle = $derived(
-    (props.data.config?.instanceTitle as string) || props.data.label,
-  );
+  const displayTitle = $derived((props.data.config?.instanceTitle as string) || props.data.label);
 
   /**
    * Instance-specific description override from config.
@@ -99,9 +82,7 @@
    * This allows users to customize the node description per-instance via config.
    */
   const displayDescription = $derived(
-    (props.data.config?.instanceDescription as string) ||
-      props.data.metadata?.description ||
-      "A configurable simple node",
+    (props.data.config?.instanceDescription as string) || props.data.metadata?.description || null
   );
 
   // Handle configuration sidebar - now using global ConfigSidebar
@@ -109,9 +90,9 @@
     if (props.data.onConfigOpen) {
       // Create a WorkflowNodeType-like object for the global ConfigSidebar
       const nodeForConfig = {
-        id: props.data.nodeId || "unknown",
-        type: "simple",
-        data: props.data,
+        id: props.data.nodeId || 'unknown',
+        type: 'simple',
+        data: props.data
       };
       props.data.onConfigOpen(nodeForConfig);
     }
@@ -129,7 +110,7 @@
 
   // Handle keyboard events
   function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === "Enter" || event.key === " ") {
+    if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       handleDoubleClick();
     }
@@ -137,14 +118,14 @@
 
   const dynamicInputs = $derived(
     ((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
-      dynamicPortToNodePort(port, "input"),
-    ),
+      dynamicPortToNodePort(port, 'input')
+    )
   );
 
   const dynamicOutputs = $derived(
     ((props.data.config?.dynamicOutputs as DynamicPort[]) || []).map((port) =>
-      dynamicPortToNodePort(port, "output"),
-    ),
+      dynamicPortToNodePort(port, 'output')
+    )
   );
 
   /**
@@ -153,17 +134,17 @@
   const visibleInputPorts = $derived(
     applyPortOrder(
       [...(props.data.metadata?.inputs ?? []), ...dynamicInputs],
-      portOrder.inputs,
+      portOrder.inputs
     ).filter((p: NodePort) =>
       isPortVisible(
         p,
-        "input",
+        'input',
         hiddenPorts,
         hideUnconnectedHandles,
         getConnectedHandles(),
-        props.data.nodeId,
-      ),
-    ),
+        props.data.nodeId
+      )
+    )
   );
 
   /**
@@ -172,17 +153,17 @@
   const visibleOutputPorts = $derived(
     applyPortOrder(
       [...(props.data.metadata?.outputs ?? []), ...dynamicOutputs],
-      portOrder.outputs,
+      portOrder.outputs
     ).filter((p: NodePort) =>
       isPortVisible(
         p,
-        "output",
+        'output',
         hiddenPorts,
         hideUnconnectedHandles,
         getConnectedHandles(),
-        props.data.nodeId,
-      ),
-    ),
+        props.data.nodeId
+      )
+    )
   );
 
   /**
@@ -190,13 +171,9 @@
    */
   const nodeMinHeight = $derived(
     (() => {
-      const maxPorts = Math.max(
-        visibleInputPorts.length,
-        visibleOutputPorts.length,
-        1,
-      );
+      const maxPorts = Math.max(visibleInputPorts.length, visibleOutputPorts.length, 1);
       return maxPorts <= 1 ? 80 : 20 + maxPorts * 40;
-    })(),
+    })()
   );
 </script>
 
@@ -206,10 +183,10 @@
     type="target"
     position={Position.Left}
     style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
-      port.dataType,
+      port.dataType
     )}); --fd-handle-border-color: var(--fd-handle-border); top: {getPortTop(
       index,
-      visibleInputPorts.length,
+      visibleInputPorts.length
     )}px; transform: translateY(-50%); z-index: 30;"
     id={`${props.data.nodeId}-input-${port.id}`}
   />
@@ -231,18 +208,13 @@
   <div class="flowdrop-simple-node__header">
     <div class="flowdrop-simple-node__header-content">
       <!-- Node Icon (squircle) — visibility controlled by --fd-node-icon-display -->
-      <div
-        class="flowdrop-simple-node__icon-wrapper"
-        style="--_icon-color: {nodeColor}"
-      >
+      <div class="flowdrop-simple-node__icon-wrapper" style="--_icon-color: {nodeColor}">
         <Icon icon={nodeIcon} class="flowdrop-simple-node__icon" />
       </div>
       <!-- Node Icon (circle dot) — visibility controlled by --fd-node-circle-display -->
       <span
         class="flowdrop-simple-node__color-dot"
-        style="background: {getCategoryColorToken(
-          props.data.metadata?.category,
-        )}"
+        style="background: {getCategoryColorToken(props.data.metadata?.category)}"
       ></span>
 
       <!-- Node Title -->
@@ -252,9 +224,11 @@
     </div>
 
     <!-- Node Description -->
-    <p class="flowdrop-simple-node__description">
-      {displayDescription}
-    </p>
+    {#if displayDescription}
+      <p class="flowdrop-simple-node__description">
+        {displayDescription}
+      </p>
+    {/if}
   </div>
 
   <!-- Processing indicator -->
@@ -287,10 +261,10 @@
     type="source"
     position={Position.Right}
     style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
-      port.dataType,
+      port.dataType
     )}); --fd-handle-border-color: var(--fd-handle-border); top: {getPortTop(
       index,
-      visibleOutputPorts.length,
+      visibleOutputPorts.length
     )}px; transform: translateY(-50%); z-index: 30;"
     id={`${props.data.nodeId}-output-${port.id}`}
   />
@@ -307,7 +281,7 @@
     cursor: pointer;
     transition: all var(--fd-transition-fast);
     box-shadow: var(--fd-shadow-md);
-    overflow: visible; /* Changed from hidden to visible to allow handles to be properly accessible */
+    overflow: hidden;
     z-index: 10;
     color: var(--fd-foreground);
   }
@@ -354,7 +328,7 @@
   .flowdrop-simple-node__header {
     padding: var(--fd-space-xl);
     background: var(--fd-header);
-    border-radius: var(--fd-radius-xl);
+    flex: 1;
   }
 
   .flowdrop-simple-node__header-content {
@@ -371,11 +345,7 @@
     width: 2.25rem;
     height: 2.25rem;
     border-radius: 0.5rem;
-    background: color-mix(
-      in srgb,
-      var(--_icon-color) var(--fd-node-icon-bg-opacity),
-      transparent
-    );
+    background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
     flex-shrink: 0;
     transition: all var(--fd-transition-normal);
   }

package/dist/components/nodes/SimpleNode.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ConfigValues, NodeMetadata, NodeExtensions } from "../../types/index.js";
+import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
 type $$ComponentProps = {
     data: {
         label: string;

package/dist/components/nodes/SquareNode.stories.svelte

@@ -1,43 +1,43 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import NodeDecorator from "../../stories/NodeDecorator.svelte";
-  import { createSampleNodeData } from "../../stories/utils.js";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import NodeDecorator from '../../stories/NodeDecorator.svelte';
+  import { createSampleNodeData } from '../../stories/utils.js';
 
   const { Story } = defineMeta({
-    title: "Nodes/SquareNode",
-    tags: ["autodocs"],
+    title: 'Nodes/SquareNode',
+    tags: ['autodocs'],
     parameters: {
-      layout: "centered",
-    },
+      layout: 'centered'
+    }
   });
 </script>
 
 <Story name="Default">
   <NodeDecorator
     data={createSampleNodeData({
-      label: "Text Input",
+      label: 'Text Input',
       metadata: {
-        id: "text_input",
-        name: "Text Input",
-        description: "Simple text input for user data",
-        category: "inputs",
-        version: "1.0.0",
-        type: "square",
-        supportedTypes: ["square"],
-        icon: "mdi:text",
-        color: "#22c55e",
+        id: 'text_input',
+        name: 'Text Input',
+        description: 'Simple text input for user data',
+        category: 'inputs',
+        version: '1.0.0',
+        type: 'square',
+        supportedTypes: ['square'],
+        icon: 'mdi:text',
+        color: '#22c55e',
         inputs: [],
         outputs: [
           {
-            id: "text",
-            name: "text",
-            type: "output",
-            dataType: "string",
+            id: 'text',
+            name: 'text',
+            type: 'output',
+            dataType: 'string',
             required: false,
-            description: "The input text value",
-          },
-        ],
-      },
+            description: 'The input text value'
+          }
+        ]
+      }
     })}
   />
 </Story>
@@ -45,37 +45,37 @@
 <Story name="Selected">
   <NodeDecorator
     data={createSampleNodeData({
-      label: "Text Output",
+      label: 'Text Output',
       metadata: {
-        id: "text_output",
-        name: "Text Output",
-        description: "Simple text output for displaying data",
-        category: "outputs",
-        version: "1.0.0",
-        type: "square",
-        supportedTypes: ["square"],
-        icon: "mdi:text-box",
-        color: "#ef4444",
+        id: 'text_output',
+        name: 'Text Output',
+        description: 'Simple text output for displaying data',
+        category: 'outputs',
+        version: '1.0.0',
+        type: 'square',
+        supportedTypes: ['square'],
+        icon: 'mdi:text-box',
+        color: '#ef4444',
         inputs: [
           {
-            id: "text",
-            name: "Text Input",
-            type: "input",
-            dataType: "string",
+            id: 'text',
+            name: 'Text Input',
+            type: 'input',
+            dataType: 'string',
             required: false,
-            description: "The text to output",
+            description: 'The text to output'
           },
           {
-            id: "trigger",
-            name: "Trigger",
-            type: "input",
-            dataType: "trigger",
+            id: 'trigger',
+            name: 'Trigger',
+            type: 'input',
+            dataType: 'trigger',
             required: false,
-            description: "",
-          },
+            description: ''
+          }
         ],
-        outputs: [],
-      },
+        outputs: []
+      }
     })}
     selected={true}
   />
@@ -84,44 +84,44 @@
 <Story name="Dynamic Ports">
   <NodeDecorator
     data={createSampleNodeData({
-      label: "Data Mapper",
+      label: 'Data Mapper',
       config: {
         dynamicInputs: [
           {
-            name: "source",
-            label: "Source Data",
-            dataType: "json",
-            required: true,
-          },
+            name: 'source',
+            label: 'Source Data',
+            dataType: 'json',
+            required: true
+          }
         ],
         dynamicOutputs: [
           {
-            name: "mapped",
-            label: "Mapped Output",
-            dataType: "json",
-            required: false,
+            name: 'mapped',
+            label: 'Mapped Output',
+            dataType: 'json',
+            required: false
           },
           {
-            name: "errors",
-            label: "Errors",
-            dataType: "string",
-            required: false,
-          },
-        ],
+            name: 'errors',
+            label: 'Errors',
+            dataType: 'string',
+            required: false
+          }
+        ]
       },
       metadata: {
-        id: "data_mapper",
-        name: "Data Mapper",
-        description: "Map data between formats",
-        category: "processing",
-        version: "1.0.0",
-        type: "square",
-        supportedTypes: ["square"],
-        icon: "mdi:swap-horizontal",
-        color: "#0ea5e9",
+        id: 'data_mapper',
+        name: 'Data Mapper',
+        description: 'Map data between formats',
+        category: 'processing',
+        version: '1.0.0',
+        type: 'square',
+        supportedTypes: ['square'],
+        icon: 'mdi:swap-horizontal',
+        color: '#0ea5e9',
         inputs: [],
-        outputs: [],
-      },
+        outputs: []
+      }
     })}
   />
 </Story>