@luxonis/depthai-pipeline-lib 1.9.0 → 1.11.0

package/dist/panda.css

@@ -1252,18 +1252,6 @@
 
 @layer utilities{
 
-  .w_custom\.handle\.dot\! {
-    width: var(--sizes-custom-handle-dot) !important;
-}
-
-  .h_custom\.handle\.dot\! {
-    height: var(--sizes-custom-handle-dot) !important;
-}
-
-  .bd_none\! {
-    border: var(--borders-none) !important;
-}
-
   .min-w_container\.smaller\.xxs {
     min-width: var(--sizes-container-smaller-xxs);
 }
@@ -1276,6 +1264,30 @@
     border-radius: var(--radii-common);
 }
 
+  .p_0 {
+    padding: var(--spacing-0);
+}
+
+  .bdr_0\%\! {
+    border-radius: 0% !important;
+}
+
+  .bdr_100\%\! {
+    border-radius: 100% !important;
+}
+
+  .w_custom\.handle\.dot\! {
+    width: var(--sizes-custom-handle-dot) !important;
+}
+
+  .h_custom\.handle\.dot\! {
+    height: var(--sizes-custom-handle-dot) !important;
+}
+
+  .bd_none\! {
+    border: var(--borders-none) !important;
+}
+
   .w_full {
     width: var(--sizes-full);
 }
@@ -1301,8 +1313,16 @@
     height: auto;
 }
 
-  .bg-c_dark\.warning\! {
-    background-color: var(--colors-dark-warning) !important;
+  .border-style_dashed {
+    border-style: dashed;
+}
+
+  .bg-c_rgba\(0\,0\,0\,0\.125\) {
+    background-color: rgba(0,0,0,0.125);
+}
+
+  .bg-c_dark\.error\! {
+    background-color: var(--colors-dark-error) !important;
 }
 
   .bg-c_dark\.success\! {

package/dist/src/components/GroupNode.d.ts

@@ -0,0 +1,5 @@
+import type { NodeProps } from '@xyflow/react';
+import type { ParsedNode } from '../services/pipeline';
+type GroupNodeProps = NodeProps<ParsedNode>;
+export declare const GroupNode: React.FC<GroupNodeProps>;
+export {};

package/dist/src/components/GroupNode.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@luxonis/common-fe-components';
+import { css } from '../styled-system/css/index.mjs';
+// eslint-disable-next-line no-warning-comments
+// TODO: Add group node
+export const GroupNode = (props) => {
+    const { data: _node } = props;
+    return (_jsx(Flex, { direction: "column", className: css({
+            'minWidth': 'container.smaller.xxs',
+            'border': 'base',
+            'rounded': 'common',
+            '&:hover .node-help-icon': {
+                color: 'text.normal',
+            },
+            'padding': 0,
+            'borderStyle': 'dashed',
+            'backgroundColor': 'rgba(0,0,0,0.125)',
+        }) }));
+};

package/dist/src/components/Node.js

@@ -6,12 +6,18 @@ import { css } from '../styled-system/css/css.mjs';
 import { DOCS_BASE_URL, NodesWithLinks, } from '../services/pipeline.js';
 const NodeHandles = props => {
     const { handles, type } = props;
-    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps }) => (_jsxs(Flex, { position: "relative", align: "end", direction: handleType === 'input' ? 'row' : 'row-reverse', children: [_jsx(Handle, { type: handleType === 'input' ? 'target' : 'source', position: handleType === 'input' ? Position.Left : Position.Right, id: name, isConnectable: false, className: css({
-                        width: 'custom.handle.dot!',
-                        height: 'custom.handle.dot!',
-                        backgroundColor: blocking ? 'dark.warning!' : 'dark.success!',
-                        border: 'none!',
-                    }) }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id))) }));
+    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps, connected }) => {
+            if (!connected) {
+                return;
+            }
+            return (_jsxs(Flex, { position: "relative", align: "end", direction: handleType === 'input' ? 'row' : 'row-reverse', children: [_jsx(Handle, { type: handleType === 'input' ? 'target' : 'source', position: handleType === 'input' ? Position.Left : Position.Right, id: name, isConnectable: false, className: css({
+                            width: 'custom.handle.dot!',
+                            height: 'custom.handle.dot!',
+                            backgroundColor: blocking ? 'dark.error!' : 'dark.success!',
+                            border: 'none!',
+                            borderRadius: blocking ? '0% !important' : '100% !important',
+                        }) }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id));
+        }) }));
 };
 const NodeHandlesSubLabel = props => {
     const { type, name, queueSize, maxQueueSize, fps } = props;
@@ -19,7 +25,9 @@ const NodeHandlesSubLabel = props => {
             ...(type === 'input' //
                 ? { marginLeft: 'xs' }
                 : { marginRight: 'xs' }),
-        }), text: `[${fps ? `${fps.toFixed(1)} | ` : ''}${maxQueueSize ? `${maxQueueSize}/${queueSize}` : queueSize}] ${name}`, break: "none" }));
+        }), text: type === 'input'
+            ? `[${fps ? `${fps.toFixed(1)} | ` : ''}${`${maxQueueSize ?? 0}/${queueSize}`}] ${name}`
+            : `${fps ? `[${fps.toFixed(1)}]` : ''} ${name}`, break: "none" }));
 };
 export const PipelineNode = props => {
     const { data: node } = props;

package/dist/src/components/PipelineCanvas.js

@@ -6,85 +6,130 @@ import Dagre from '@dagrejs/dagre';
 import { PipelineNode } from './Node.js';
 const getLayoutedElements = (nodes, edges) => {
     const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    graph.setGraph({ rankdir: 'LR' });
+    graph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 40 });
+    const childNodes = nodes.filter(node => node.type !== 'group');
     for (const edge of edges) {
         graph.setEdge(edge.source, edge.target);
     }
-    for (const node of nodes) {
+    for (const node of childNodes) {
         graph.setNode(node.id, {
-            ...node,
-            width: node.measured?.width ?? 200,
-            height: node.measured?.height ?? 100,
+            width: node.measured?.width ?? 300,
+            height: node.measured?.height ?? 150,
         });
     }
     Dagre.layout(graph);
     return {
-        nodes: nodes.map((node) => {
-            const position = graph.node(node.id);
-            // Shift Dagre anchor (center) to React Flow anchor (top left)
-            const x = position.x - (node.measured?.width ?? 200) / 2;
-            const y = position.y - (node.measured?.height ?? 100) / 2;
-            return { ...node, position: { x, y } };
+        nodes: nodes.map(node => {
+            const pos = graph.node(node.id);
+            if (!pos)
+                return node;
+            return {
+                ...node,
+                position: {
+                    x: pos.x - (node.measured?.width ?? 300) / 2,
+                    y: pos.y - (node.measured?.height ?? 150) / 2,
+                },
+            };
         }),
         edges,
     };
 };
-const adjustNodes = (nodes) => {
+const adjustNodes = (nodes, edges) => {
     const PADDING = 16;
-    const positionedNodes = nodes
-        .filter(node => node.type !== 'group')
-        .map((node) => {
-        const position = node.position;
-        const x = position.x - (node.measured?.width ?? 200) / 2;
-        const y = position.y - (node.measured?.height ?? 100) / 2;
+    const groupNodes = nodes.filter(node => node.type === 'group');
+    const childNodes = nodes.filter(node => node.type !== 'group');
+    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    graph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 40 });
+    for (const edge of edges) {
+        graph.setEdge(edge.source, edge.target);
+    }
+    for (const node of childNodes) {
+        graph.setNode(node.id, {
+            width: node.measured?.width ?? 300,
+            height: node.measured?.height ?? 150,
+        });
+    }
+    Dagre.layout(graph);
+    const positionedChildren = childNodes.map(node => {
+        const pos = graph.node(node.id);
         return {
             ...node,
-            position: { x, y },
+            position: {
+                x: pos.x - (node.measured?.width ?? 300) / 2,
+                y: pos.y - (node.measured?.height ?? 150) / 2,
+            },
         };
     });
-    const groupNodes = nodes.filter(node => node.type === 'group');
-    const positionedGroups = groupNodes.map(parent => {
-        const children = positionedNodes.filter(n => n.parentId === parent.id);
+    const positionedGroups = groupNodes.map(group => {
+        const children = positionedChildren.filter(n => n.parentId === group.id);
         if (children.length === 0) {
-            return { ...parent, position: { x: 0, y: 0 } };
+            return { ...group, position: { x: 0, y: 0 } };
+        }
+        const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+        g.setGraph({ rankdir: 'LR', ranksep: 60, nodesep: 20 });
+        for (const child of children) {
+            g.setNode(child.id, {
+                width: child.measured?.width ?? 300,
+                height: child.measured?.height ?? 150,
+            });
         }
+        const groupEdges = edges.filter(e => children.some(c => c.id === e.source) && children.some(c => c.id === e.target));
+        for (const edge of groupEdges) {
+            g.setEdge(edge.source, edge.target);
+        }
+        Dagre.layout(g);
         let minX = 9999;
         let minY = 9999;
         let maxX = -9999;
         let maxY = -9999;
-        // eslint-disable-next-line github/array-foreach
-        children.forEach(child => {
-            const width = child.measured?.width ?? 200;
-            const height = child.measured?.height ?? 100;
-            minX = Math.min(minX, child.position.x);
-            minY = Math.min(minY, child.position.y);
-            maxX = Math.max(maxX, child.position.x + width);
-            maxY = Math.max(maxY, child.position.y + height);
-        });
-        const parentX = minX - PADDING;
-        const parentY = minY - PADDING;
-        // eslint-disable-next-line github/array-foreach
-        children.forEach(child => {
-            child.position.x -= parentX;
-            child.position.y -= parentY;
+        const locallyPositioned = children.map(child => {
+            const pos = g.node(child.id);
+            const x = pos.x - (child.measured?.width ?? 300) / 2;
+            const y = pos.y - (child.measured?.height ?? 150) / 2;
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x + (child.measured?.width ?? 300));
+            maxY = Math.max(maxY, y + (child.measured?.height ?? 150));
+            return { ...child, position: { x, y } };
         });
-        return {
-            ...parent,
-            position: { x: parentX, y: parentY },
-            measured: {
-                width: maxX - minX + PADDING * 2,
-                height: maxY - minY + PADDING * 2,
+        const relativeChildren = locallyPositioned.map(child => ({
+            ...child,
+            position: {
+                x: child.position.x - minX + PADDING,
+                y: child.position.y - minY + PADDING,
             },
-            width: maxX - minX + PADDING * 2,
-            height: maxY - minY + PADDING * 2,
-            style: {
-                ...parent.style,
-                width: maxX - minX + PADDING * 2,
-                height: maxY - minY + PADDING * 2,
+        }));
+        const groupW = maxX - minX + PADDING * 2;
+        const groupH = maxY - minY + PADDING * 2;
+        let absMinX = 9999;
+        let absMinY = 9999;
+        for (const child of children) {
+            const pos = graph.node(child.id);
+            absMinX = Math.min(absMinX, pos.x - (child.measured?.width ?? 300) / 2);
+            absMinY = Math.min(absMinY, pos.y - (child.measured?.height ?? 150) / 2);
+        }
+        return {
+            nodes: relativeChildren,
+            group: {
+                ...group,
+                position: {
+                    x: absMinX - PADDING,
+                    y: absMinY - PADDING,
+                },
+                width: groupW + PADDING,
+                height: groupH,
+                style: { ...group.style, width: groupW + PADDING, height: groupH },
             },
         };
     });
-    return [...positionedGroups, ...positionedNodes];
+    const rootChildren = positionedChildren.filter(n => !n.parentId);
+    const groupedChildren = positionedGroups.flatMap(g => g.nodes);
+    const groups = positionedGroups.map(g => g.group);
+    return [
+        ...groups.filter(g => g !== undefined),
+        ...groupedChildren.filter(c => c !== undefined),
+        ...rootChildren,
+    ];
 };
 export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
     const parsedNodes = [];
@@ -144,7 +189,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
             return;
         }
         const layouted = getLayoutedElements(pipeline?.nodes ?? [], pipeline?.edges ?? []);
-        const adjustedNodes = adjustNodes([...layouted.nodes]);
+        const adjustedNodes = adjustNodes([...layouted.nodes], [...layouted.edges]);
         if (pipelineState) {
             const updatedNodes = updateNodesOnPipelineStateChange(adjustedNodes, pipelineState);
             setNodes([...updatedNodes]);
@@ -159,6 +204,12 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
         if (pipelineState && nodes.length > 0) {
             const updatedNodes = updateNodesOnPipelineStateChange(nodes, pipelineState);
             setNodes([...updatedNodes]);
+            if (!autoArrangeRef.current) {
+                return;
+            }
+            else {
+                setShouldFitAndResize(true);
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [pipelineState]);

package/dist/src/services/pipeline.d.ts

@@ -43,6 +43,7 @@ export type ParsedHandle = {
     type: 'input' | 'output';
     blocking: boolean;
     queueSize: number;
+    connected: boolean;
     maxQueueSize?: number;
     fps?: number;
 };

package/dist/src/services/pipeline.js

@@ -12,11 +12,34 @@ function parseHandles(handles) {
             type,
             blocking: handle.blocking,
             queueSize: handle.queueSize,
+            connected: true,
         };
         parsedHandles[type].push(parsed);
     }
     return parsedHandles;
 }
+function filterNodesHandles(nodes, edges) {
+    const connectedHandleIds = new Set(edges.flatMap(edge => [
+        `${edge.source}-${edge.sourceHandle}`,
+        `${edge.target}-${edge.targetHandle}`,
+    ]));
+    return nodes.map(node => ({
+        ...node,
+        data: {
+            ...node.data,
+            handles: {
+                input: node.data.handles.input.map(handle => ({
+                    ...handle,
+                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
+                })),
+                output: node.data.handles.output.map(handle => ({
+                    ...handle,
+                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
+                })),
+            },
+        },
+    }));
+}
 export function parsePipeline(rawPayload) {
     const { pipeline } = rawPayload;
     // Set all nodes as generic nodes
@@ -114,7 +137,8 @@ export function parsePipeline(rawPayload) {
     })) ?? [];
     // NOTE: Parent nodes should be rendered before child nodes
     const groupedNodes = [...newFormattedParentNodes, ...childrenNodes, ...filteredNodes];
-    return { nodes: [...groupedNodes], edges: [...edges, ...bridges] };
+    const nodesWithFilteredHandles = filterNodesHandles(groupedNodes, edges);
+    return { nodes: [...nodesWithFilteredHandles], edges: [...edges, ...bridges] };
 }
 export const DOCS_BASE_URL = `https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes`;
 export const NodesWithLinks = {

package/package.json

@@ -1,64 +1,64 @@
 {
-	"name": "@luxonis/depthai-pipeline-lib",
-	"version": "1.9.0",
-	"type": "module",
-	"license": "UNLICENSED",
-	"main": "./dist/src/index.js",
-	"scripts": {
-		"build": "./build.sh",
-		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-		"gen:styles": "panda codegen",
-		"prepublishOnly": "npm run build"
-	},
-	"dependencies": {
-		"@dagrejs/dagre": "^1.1.3",
-		"@luxonis/common-fe-components": "1.25.9",
-		"@xyflow/react": "^12.0.4",
-		"postcss-import": "^16.1.0",
-		"postcss-nested": "^6.2.0",
-		"postcss-preset-env": "^10.0.0",
-		"rehype-sanitize": "^6.0.0"
-	},
-	"peerDependencies": {
-		"react": "^18.3.1 || ^19.0.0",
-		"react-dom": "^18.3.1 || ^19.0.0"
-	},
-	"devDependencies": {
-		"@pandacss/dev": "^0.53.0",
-		"@stylistic/eslint-plugin": "^2.6.1",
-		"@types/react": "^18.3.1 || ^19.0.0",
-		"@types/react-dom": "^18.3.1 || ^19.0.0",
-		"@typescript-eslint/eslint-plugin": "^6.21.0",
-		"@typescript-eslint/parser": "^6.21.0",
-		"eslint": "^8.56.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-import-resolver-typescript": "^3.6.1",
-		"eslint-interactive": "^10.8.0",
-		"eslint-plugin-cypress": "^3.3.0",
-		"eslint-plugin-functional": "^6.0.0",
-		"eslint-plugin-github": "^4.10.1",
-		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-prettier": "^5.1.3",
-		"eslint-plugin-react": "^7.33.2",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-react-refresh": "^0.4.5",
-		"postcss": "^8.4.31",
-		"prettier": "^3.2.5",
-		"prettier-eslint": "^16.3.0",
-		"typescript": "^5.2.2"
-	},
-	"overrides": {
-		"@radix-ui/react-alert-dialog": "1.0.5"
-	},
-	"files": [
-		"dist/src/*",
-		"dist/*.css"
-	],
-	"exports": {
-		".": "./dist/src/index.js",
-		"./styles": "./dist/index.css"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
+  "name": "@luxonis/depthai-pipeline-lib",
+  "version": "1.11.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "main": "./dist/src/index.js",
+  "scripts": {
+    "build": "./build.sh",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "gen:styles": "panda codegen",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@dagrejs/dagre": "^1.1.3",
+    "@luxonis/common-fe-components": "1.25.9",
+    "@xyflow/react": "^12.0.4",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^6.2.0",
+    "postcss-preset-env": "^10.0.0",
+    "rehype-sanitize": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "^0.53.0",
+    "@stylistic/eslint-plugin": "^2.6.1",
+    "@types/react": "^18.3.1 || ^19.0.0",
+    "@types/react-dom": "^18.3.1 || ^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-interactive": "^10.8.0",
+    "eslint-plugin-cypress": "^3.3.0",
+    "eslint-plugin-functional": "^6.0.0",
+    "eslint-plugin-github": "^4.10.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.31",
+    "prettier": "^3.2.5",
+    "prettier-eslint": "^16.3.0",
+    "typescript": "^5.2.2"
+  },
+  "overrides": {
+    "@radix-ui/react-alert-dialog": "1.0.5"
+  },
+  "files": [
+    "dist/src/*",
+    "dist/*.css"
+  ],
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./styles": "./dist/index.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }