@flowdrop/flowdrop 1.2.2 → 1.4.0

package/dist/components/nodes/SquareNode.svelte

@@ -2,9 +2,11 @@
   Square Node Component
   A simple square 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,7 +16,9 @@
     NodeMetadata,
     NodeExtensions,
     NodePort,
+    DynamicPort,
   } from "../../types/index.js";
+  import { dynamicPortToNodePort } from "../../types/index.js";
   import Icon from "@iconify/svelte";
   import {
     getDataTypeColor,
@@ -22,6 +26,11 @@
   } from "../../utils/colors.js";
   import { getNodeIcon } from "../../utils/icons.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";
 
@@ -44,15 +53,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 ??
+      {},
+  );
 
   /**
    * Get icon using the same resolution as WorkflowNode
@@ -100,111 +119,83 @@
       openConfigSidebar();
     }
   }
-  /**
-   * 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 square 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 size so handles never render outside the node body.
+   * Overrides the fixed CSS height/width when more than 2 ports are visible on either side.
+   */
+  const nodeSize = $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}
@@ -215,6 +206,7 @@
   class:flowdrop-square-node--selected={props.selected}
   class:flowdrop-square-node--processing={props.isProcessing}
   class:flowdrop-square-node--error={props.isError}
+  style="height: {nodeSize}px; width: {nodeSize}px"
   onclick={handleClick}
   ondblclick={handleDoubleClick}
   onkeydown={handleKeydown}
@@ -261,19 +253,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/TerminalNode.svelte

@@ -155,18 +155,17 @@
    * 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
    */
   function isPortVisible(port: NodePort, type: "input" | "output"): boolean {
-    if (!hideUnconnectedHandles()) {
+    if (!hideUnconnectedHandles) {
       return true;
     }
     if (port.required) {

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

@@ -77,3 +77,66 @@
     selected={true}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Custom Function",
+      config: {
+        dynamicInputs: [
+          {
+            name: "input_1",
+            label: "First Input",
+            description: "The first input parameter",
+            dataType: "string",
+            required: true,
+          },
+          {
+            name: "input_2",
+            label: "Second Input",
+            description: "The second input parameter",
+            dataType: "number",
+            required: false,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "output_1",
+            label: "Primary Output",
+            description: "The main output value",
+            dataType: "string",
+            required: false,
+          },
+        ],
+      },
+      metadata: {
+        id: "custom-function",
+        name: "Custom Function",
+        description:
+          "Execute a custom function with dynamic inputs and outputs",
+        category: "processing",
+        version: "1.0.0",
+        type: "workflow",
+        icon: "mdi:function-variant",
+        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/WorkflowNode.svelte

@@ -6,6 +6,8 @@
   
   UI Extensions Support:
   - hideUnconnectedHandles: Hides ports that are not connected to reduce visual clutter
+  - portOrder: Visual-only reordering of input/output ports (no effect on execution)
+  - hiddenPorts: Manually hidden ports per direction (required ports cannot be hidden)
 -->
 
 <script lang="ts">
@@ -25,6 +27,7 @@
     getPortBackgroundColor,
   } from "../../utils/colors.js";
   import { getConnectedHandles } from "../../stores/workflowStore.svelte.js";
+  import { applyPortOrder } from "../../utils/portUtils.js";
 
   interface Props {
     data: WorkflowNode["data"] & {
@@ -64,12 +67,31 @@
    * 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,
+  );
+
+  /**
+   * Get the portOrder setting from extensions (visual-only, no effect on execution)
+   * Merges node type defaults with instance overrides
+   */
+  const portOrder = $derived(
+    props.data.extensions?.ui?.portOrder ??
+      props.data.metadata?.extensions?.ui?.portOrder ??
+      {},
+  );
+
+  /**
+   * Get the hiddenPorts setting from extensions (visual-only, no effect on execution)
+   * Merges node type defaults with instance overrides
+   */
+  const hiddenPorts = $derived(
+    props.data.extensions?.ui?.hiddenPorts ??
+      props.data.metadata?.extensions?.ui?.hiddenPorts ??
+      {},
+  );
 
   /**
    * Dynamic inputs from config - user-defined input ports
@@ -92,20 +114,26 @@
   );
 
   /**
-   * Combined input ports: static metadata inputs + dynamic config inputs
+   * Combined input ports: static metadata inputs + dynamic config inputs,
+   * sorted by portOrder if set (visual-only)
    */
-  const allInputPorts = $derived([
-    ...props.data.metadata.inputs,
-    ...dynamicInputs,
-  ]);
+  const allInputPorts = $derived(
+    applyPortOrder(
+      [...props.data.metadata.inputs, ...dynamicInputs],
+      portOrder.inputs,
+    ),
+  );
 
   /**
-   * Combined output ports: static metadata outputs + dynamic config outputs
+   * Combined output ports: static metadata outputs + dynamic config outputs,
+   * sorted by portOrder if set (visual-only)
    */
-  const allOutputPorts = $derived([
-    ...props.data.metadata.outputs,
-    ...dynamicOutputs,
-  ]);
+  const allOutputPorts = $derived(
+    applyPortOrder(
+      [...props.data.metadata.outputs, ...dynamicOutputs],
+      portOrder.outputs,
+    ),
+  );
 
   /**
    * Check if a port should be visible based on connection state and settings
@@ -114,8 +142,15 @@
    * @returns true if the port should be visible
    */
   function isPortVisible(port: NodePort, type: "input" | "output"): boolean {
+    // Manual hide takes precedence (required ports are prevented from being hidden in ConfigForm)
+    const manuallyHidden =
+      type === "input"
+        ? hiddenPorts.inputs?.includes(port.id)
+        : hiddenPorts.outputs?.includes(port.id);
+    if (manuallyHidden) return false;
+
     // Always show if hideUnconnectedHandles is disabled
-    if (!hideUnconnectedHandles()) {
+    if (!hideUnconnectedHandles) {
       return true;
     }
 
@@ -245,7 +280,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
@@ -308,7 +343,7 @@
   {#if visibleOutputPorts.length > 0}
     <div class="flowdrop-workflow-node__ports">
       <div class="flowdrop-workflow-node__ports-list">
-        {#each visibleOutputPorts as port, outputIndex (port.id)}
+        {#each visibleOutputPorts as port (port.id)}
           <div class="flowdrop-workflow-node__port">
             <!-- Port Info: padding lives here so handle position is simple -->
             <div