@flowdrop/flowdrop 1.2.2 → 1.4.0

package/dist/components/nodes/GatewayNode.svelte

@@ -57,12 +57,11 @@
    * Get the hideUnconnectedHandles setting from extensions
    * Merges node type defaults with instance overrides
    */
-  const hideUnconnectedHandles = $derived(() => {
-    const typeDefault =
-      props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ?? false;
-    const instanceOverride = props.data.extensions?.ui?.hideUnconnectedHandles;
-    return instanceOverride ?? typeDefault;
-  });
+  const hideUnconnectedHandles = $derived(
+    props.data.extensions?.ui?.hideUnconnectedHandles ??
+      props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ??
+      false,
+  );
 
   /**
    * Check if a port should be visible based on connection state and settings
@@ -72,7 +71,7 @@
    */
   function isPortVisible(port: NodePort, type: "input" | "output"): boolean {
     // Always show if hideUnconnectedHandles is disabled
-    if (!hideUnconnectedHandles()) {
+    if (!hideUnconnectedHandles) {
       return true;
     }
 
@@ -100,7 +99,7 @@
    */
   function isBranchVisible(branchName: string): boolean {
     // Always show if hideUnconnectedHandles is disabled
-    if (!hideUnconnectedHandles()) {
+    if (!hideUnconnectedHandles) {
       return true;
     }
 
@@ -211,7 +210,7 @@
   {#if visibleInputPorts.length > 0}
     <div class="flowdrop-workflow-node__ports">
       <div class="flowdrop-workflow-node__ports-list">
-        {#each visibleInputPorts as port, inputIndex (port.id)}
+        {#each visibleInputPorts as port (port.id)}
           <div class="flowdrop-workflow-node__port">
             <!-- Input Handle: centered in row, at node edge (ports have no padding) -->
             <Handle

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

@@ -158,3 +158,67 @@
     })}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Custom Function",
+      config: {
+        dynamicInputs: [
+          {
+            name: "param_a",
+            label: "Parameter A",
+            description: "First parameter",
+            dataType: "string",
+            required: true,
+          },
+          {
+            name: "param_b",
+            label: "Parameter B",
+            description: "Second parameter",
+            dataType: "number",
+            required: false,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "result",
+            label: "Result",
+            description: "Function result",
+            dataType: "json",
+            required: false,
+          },
+        ],
+      },
+      metadata: {
+        id: "custom_function",
+        name: "Custom Function",
+        description: "A node with dynamic input and output ports",
+        category: "processing",
+        version: "1.0.0",
+        type: "simple",
+        supportedTypes: ["simple", "square", "default"],
+        icon: "mdi:function-variant",
+        color: "#8b5cf6",
+        inputs: [
+          {
+            id: "trigger",
+            name: "Trigger",
+            type: "input",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+        outputs: [
+          {
+            id: "done",
+            name: "Done",
+            type: "output",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+      },
+    })}
+  />
+</Story>

package/dist/components/nodes/SimpleNode.svelte

@@ -2,9 +2,11 @@
   Simple Node Component
   A simple node with optional input and output ports
   Styled with BEM syntax
-  
+
   UI Extensions Support:
-  - hideUnconnectedHandles: Hides trigger ports that are not connected to reduce visual clutter
+  - hideUnconnectedHandles: Hides ports that are not connected to reduce visual clutter
+  - hiddenPorts: Manually hide individual ports (visual-only, no effect on execution)
+  - portOrder: Reorder ports by ID array (unspecified ports appear at end in original order)
 -->
 
 <script lang="ts">
@@ -14,13 +16,20 @@
     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";
 
@@ -43,15 +52,25 @@
   }>();
 
   /**
-   * Get the hideUnconnectedHandles setting from extensions
-   * Merges node type defaults with instance overrides
+   * Get UI extension settings from extensions, merging node type defaults with instance overrides.
    */
-  const hideUnconnectedHandles = $derived(() => {
-    const typeDefault =
-      props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ?? false;
-    const instanceOverride = props.data.extensions?.ui?.hideUnconnectedHandles;
-    return instanceOverride ?? typeDefault;
-  });
+  const hideUnconnectedHandles = $derived(
+    props.data.extensions?.ui?.hideUnconnectedHandles ??
+      props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ??
+      false,
+  );
+
+  const hiddenPorts = $derived(
+    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 ??
+      {},
+  );
 
   // Prioritize metadata icon over config icon for simple nodes (metadata is the node definition)
   let nodeIcon = $derived(
@@ -116,111 +135,82 @@
     }
   }
 
-  /**
-   * Check if a port is connected
-   * @param portId - The port ID to check
-   * @param type - Whether this is an 'input' or 'output' port
-   * @returns true if the port is connected
-   */
-  function isPortConnected(portId: string, type: "input" | "output"): boolean {
-    const handleId = `${props.data.nodeId}-${type}-${portId}`;
-    return getConnectedHandles().has(handleId);
-  }
-
-  /**
-   * Check if a trigger port should be visible
-   * Always shows if hideUnconnectedHandles is disabled or if port is connected
-   */
-  function shouldShowTriggerPort(
-    portId: string,
-    type: "input" | "output",
-  ): boolean {
-    if (!hideUnconnectedHandles()) {
-      return true;
-    }
-    return isPortConnected(portId, type);
-  }
-
-  // Get first input/output ports for simple node representation
-  // Special handling for trigger ports - they should always be shown if present
-  let triggerInputPort = $derived(
-    props.data.metadata?.inputs?.find(
-      (port: NodePort) => port.dataType === "trigger",
-    ),
-  );
-  let triggerOutputPort = $derived(
-    props.data.metadata?.outputs?.find(
-      (port: NodePort) => port.dataType === "trigger",
+  const dynamicInputs = $derived(
+    ((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "input"),
     ),
   );
 
-  // Get first non-trigger ports for data connections
-  let firstConnectedDataInputPort = $derived(
-    props.data.metadata?.inputs?.find(
-      (port: NodePort) =>
-        port.dataType !== "trigger" && isPortConnected(port.id, "input"),
+  const dynamicOutputs = $derived(
+    ((props.data.config?.dynamicOutputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "output"),
     ),
   );
 
-  let firstDataInputPort = $derived(
-    props.data.metadata?.inputs?.find(
-      (port: NodePort) => port.dataType !== "trigger",
+  /**
+   * All visible input ports in user-defined order.
+   */
+  const visibleInputPorts = $derived(
+    applyPortOrder(
+      [...(props.data.metadata?.inputs ?? []), ...dynamicInputs],
+      portOrder.inputs,
+    ).filter((p: NodePort) =>
+      isPortVisible(
+        p,
+        "input",
+        hiddenPorts,
+        hideUnconnectedHandles,
+        getConnectedHandles(),
+        props.data.nodeId,
+      ),
     ),
   );
 
-  let firstConnectedDataOutputPort = $derived(
-    props.data.metadata?.outputs?.find(
-      (port: NodePort) =>
-        port.dataType !== "trigger" && isPortConnected(port.id, "output"),
-    ),
-  );
-  let firstDataOutputPort = $derived(
-    props.data.metadata?.outputs?.find(
-      (port: NodePort) => port.dataType !== "trigger",
+  /**
+   * All visible output ports in user-defined order.
+   */
+  const visibleOutputPorts = $derived(
+    applyPortOrder(
+      [...(props.data.metadata?.outputs ?? []), ...dynamicOutputs],
+      portOrder.outputs,
+    ).filter((p: NodePort) =>
+      isPortVisible(
+        p,
+        "output",
+        hiddenPorts,
+        hideUnconnectedHandles,
+        getConnectedHandles(),
+        props.data.nodeId,
+      ),
     ),
   );
 
-  let inputPorts = $derived.by(() => {
-    return [
-      ...(firstConnectedDataInputPort
-        ? [firstConnectedDataInputPort]
-        : firstDataInputPort
-          ? [firstDataInputPort]
-          : []),
-      ...(triggerInputPort &&
-      shouldShowTriggerPort(triggerInputPort.id, "input")
-        ? [triggerInputPort]
-        : []),
-    ];
-  });
-  let outputPorts = $derived.by(() => {
-    return [
-      ...(firstConnectedDataOutputPort
-        ? [firstConnectedDataOutputPort]
-        : firstDataOutputPort
-          ? [firstDataOutputPort]
-          : []),
-      ...(triggerOutputPort &&
-      shouldShowTriggerPort(triggerOutputPort.id, "output")
-        ? [triggerOutputPort]
-        : []),
-    ];
-  });
+  /**
+   * Dynamic node min-height so handles never render outside the node body.
+   */
+  const nodeMinHeight = $derived(
+    (() => {
+      const maxPorts = Math.max(
+        visibleInputPorts.length,
+        visibleOutputPorts.length,
+        1,
+      );
+      return maxPorts <= 1 ? 80 : 20 + maxPorts * 40;
+    })(),
+  );
 </script>
 
-<!-- Input Handles: center at 20/40/60px (multiple of 10), 20px connection area -->
-{#each inputPorts as port, index}
+<!-- Input Handles: 1 port centered at 40px; N ports at 20px start, 40px gap -->
+{#each visibleInputPorts as port, index}
   <Handle
     type="target"
     position={Position.Left}
     style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
       port.dataType,
-    )}); --fd-handle-border-color: var(--fd-handle-border); top: {inputPorts.length >
-    1
-      ? index === 0
-        ? 20
-        : 60
-      : 40}px; transform: translateY(-50%); z-index: 30;"
+    )}); --fd-handle-border-color: var(--fd-handle-border); top: {getPortTop(
+      index,
+      visibleInputPorts.length,
+    )}px; transform: translateY(-50%); z-index: 30;"
     id={`${props.data.nodeId}-input-${port.id}`}
   />
 {/each}
@@ -231,6 +221,7 @@
   class:flowdrop-simple-node--selected={props.selected}
   class:flowdrop-simple-node--processing={props.isProcessing}
   class:flowdrop-simple-node--error={props.isError}
+  style="min-height: {nodeMinHeight}px"
   onclick={handleClick}
   ondblclick={handleDoubleClick}
   onkeydown={handleKeydown}
@@ -290,19 +281,17 @@
   </button>
 </div>
 
-<!-- Output Handles: center at 20/40/60px (multiple of 10), 20px connection area -->
-{#each outputPorts as port, index}
+<!-- Output Handles: 1 port centered at 40px; N ports at 20px start, 40px gap -->
+{#each visibleOutputPorts as port, index}
   <Handle
     type="source"
     position={Position.Right}
     style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
       port.dataType,
-    )}); --fd-handle-border-color: var(--fd-handle-border); top: {outputPorts.length >
-    1
-      ? index === 0
-        ? 20
-        : 60
-      : 40}px; transform: translateY(-50%); z-index: 30;"
+    )}); --fd-handle-border-color: var(--fd-handle-border); top: {getPortTop(
+      index,
+      visibleOutputPorts.length,
+    )}px; transform: translateY(-50%); z-index: 30;"
     id={`${props.data.nodeId}-output-${port.id}`}
   />
 {/each}

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

@@ -80,3 +80,48 @@
     selected={true}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Data Mapper",
+      config: {
+        dynamicInputs: [
+          {
+            name: "source",
+            label: "Source Data",
+            dataType: "json",
+            required: true,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "mapped",
+            label: "Mapped Output",
+            dataType: "json",
+            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",
+        inputs: [],
+        outputs: [],
+      },
+    })}
+  />
+</Story>