@luxonis/depthai-pipeline-lib 1.5.0 → 1.6.0

package/dist/src/components/Node.js

@@ -13,8 +13,8 @@ const NodeHandles = props => {
                         border: 'none!',
                     }) }), _jsx(SubLabel, { className: css({
                         ...(type === 'input' //
-                            ? { 'marginLeft': 'xs' }
-                            : { 'marginRight': 'xs' }),
+                            ? { marginLeft: 'xs' }
+                            : { marginRight: 'xs' }),
                     }), text: type === 'input' ? `[${queueSize}] ${name}` : name, break: "none" })] }, id))) }));
 };
 export const PipelineNode = props => {
@@ -38,9 +38,21 @@ export const PipelineNode = props => {
                 }), children: [_jsx("span", { className: css({
                             width: 'icon.sm',
                             height: 'icon.sm',
-                        }) }), _jsx(Label, { text: node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: clsx('node-help-icon', css({
+                        }) }), _jsx(Label, { text: node.id ? `${node.name} (${node.id})` : node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: clsx('node-help-icon', css({
                             width: 'auto',
                             height: 'auto',
                             right: 'xs',
-                        })) })] }), _jsxs(Flex, { gap: "sm", paddingY: "xs", children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] })] }));
+                        })) })] }), _jsx(Handle, { type: "target", position: Position.Top, id: "top", isConnectable: false, className: css({
+                    width: 'custom.handle.dot!',
+                    height: 'custom.handle.dot!',
+                }), style: {
+                    border: 'none',
+                    background: 'transparent',
+                } }), _jsxs(Flex, { gap: "sm", paddingY: "xs", children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] }), _jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom", isConnectable: false, className: css({
+                    width: 'custom.handle.dot!',
+                    height: 'custom.handle.dot!',
+                }), style: {
+                    border: 'none',
+                    background: 'transparent',
+                } })] }));
 };

package/dist/src/components/PipelineCanvas.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
+import { ReactFlow, ReactFlowProvider, useEdgesState, useNodesInitialized, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
 import { Flex, Header } from '@luxonis/common-fe-components';
 import Dagre from '@dagrejs/dagre';
 import { PipelineNode } from './Node.js';
@@ -29,6 +29,63 @@ const getLayoutedElements = (nodes, edges) => {
         edges,
     };
 };
+const adjustNodes = (nodes) => {
+    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;
+        return {
+            ...node,
+            position: { x, y },
+        };
+    });
+    const groupNodes = nodes.filter(node => node.type === 'group');
+    const positionedGroups = groupNodes.map(parent => {
+        const children = positionedNodes.filter(n => n.parentId === parent.id);
+        if (children.length === 0) {
+            return { ...parent, position: { x: 0, y: 0 } };
+        }
+        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;
+        });
+        return {
+            ...parent,
+            position: { x: parentX, y: parentY },
+            measured: {
+                width: maxX - minX + PADDING * 2,
+                height: maxY - minY + PADDING * 2,
+            },
+            width: maxX - minX + PADDING * 2,
+            height: maxY - minY + PADDING * 2,
+            style: {
+                ...parent.style,
+                width: maxX - minX + PADDING * 2,
+                height: maxY - minY + PADDING * 2,
+            },
+        };
+    });
+    return [...positionedGroups, ...positionedNodes];
+};
 const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
@@ -36,6 +93,8 @@ const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
     const heightSelector = (state) => state.height;
     const reactFlowWidth = useStore(widthSelector);
     const reactFlowHeight = useStore(heightSelector);
+    const nodesInitialized = useNodesInitialized();
+    const [isAutoLayoutingFinished, setIsAutoLayoutingFinished] = React.useState(false);
     React.useEffect(() => {
         void fitView();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -50,6 +109,14 @@ const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
         setNodes([...layouted.nodes]);
         setEdges([...layouted.edges]);
     }, [pipeline?.edges, pipeline?.nodes, setEdges, setNodes]);
+    React.useEffect(() => {
+        if (nodesInitialized && !isAutoLayoutingFinished) {
+            const adjustedNodes = adjustNodes(nodes);
+            setNodes([...adjustedNodes]);
+            setIsAutoLayoutingFinished(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nodesInitialized, isAutoLayoutingFinished]);
     const setViewportAndFit = async (x, y, zoom, nds) => {
         await setViewport({ x, y, zoom });
         await fitView({ nodes: nds });

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

@@ -1,4 +1,4 @@
-import type { Edge, Node } from '@xyflow/react';
+import { type Edge, type Node } from '@xyflow/react';
 export type RawPipelineNodeIO = [
     [
         string,
@@ -16,7 +16,9 @@ export type RawPipelineNode = {
     id: number;
     ioInfo: RawPipelineNodeIO[];
     name: string;
+    parentId?: number;
 };
+export type RawPipelineBridge = [number, number];
 export type RawPipelineEdge = {
     node1Id: number;
     node1Output: string;
@@ -29,6 +31,7 @@ export type RawPipelinePayload = {
 export type RawPipeline = {
     connections: RawPipelineEdge[];
     nodes: [number, RawPipelineNode][];
+    bridges?: [number, number][];
 };
 export type Pipeline = {
     nodes: ParsedNode[];
@@ -42,6 +45,8 @@ export type ParsedHandle = {
     queueSize: number;
 };
 export type ParsedNode = Node<{
+    id: string;
+    parentId?: string;
     name: string;
     handles: {
         input: ParsedHandle[];

package/dist/src/services/pipeline.js

@@ -1,3 +1,4 @@
+import { MarkerType } from '@xyflow/react';
 function parseHandles(handles) {
     const parsedHandles = {
         input: [],
@@ -24,19 +25,61 @@ export function parsePipeline(rawPayload) {
         type: 'generic',
         id: id.toString(),
         position: { x: 0, y: 0 },
+        parentId: node.parentId?.toString() === '-1' ? undefined : node.parentId?.toString(),
+        extent: node.parentId?.toString() === '-1' ? undefined : 'parent',
         data: {
+            id: id.toString(),
             name: node.name,
             handles: parseHandles(node.ioInfo),
         },
     })) ?? [];
+    const mappedParentNodes = nodes.map(node => node.parentId).filter(id => id !== undefined);
+    const filteredParentNodes = mappedParentNodes.filter(id => id !== '-1');
+    const parentNodes = [...new Set(filteredParentNodes)];
+    const parentNodesArr = parentNodes
+        .map(id => pipeline.nodes.find(([_, node]) => node.id.toString() === id))
+        .filter(node => node !== undefined);
+    const formattedParentNodes = parentNodesArr.map(([id, node]) => ({
+        type: 'group',
+        id: id.toString(),
+        position: { x: 0, y: 0 },
+        parentId: node.parentId?.toString() === '-1' ? undefined : node.parentId?.toString(),
+        data: {
+            id: id.toString(),
+            name: node.name,
+            handles: parseHandles(node.ioInfo),
+        },
+        style: {
+            padding: 0,
+            borderStyle: 'dashed',
+            background: 'rgba(0,0,0,0.125)',
+        },
+    })) ?? [];
     const edges = pipeline.connections.map(connection => ({
-        id: `${connection.node1Id}-${connection.node2Id}`,
+        id: `${connection.node1Id}-${connection.node2Id}-${connection.node1Output}-${connection.node2Input}-edge`,
         source: connection.node1Id.toString(),
         target: connection.node2Id.toString(),
         sourceHandle: connection.node1Output,
         targetHandle: connection.node2Input,
     })) ?? [];
-    return { nodes, edges };
+    const bridges = pipeline.bridges?.map(bridge => ({
+        id: `${bridge[0]}-${bridge[1]}-bridge`,
+        source: bridge[0].toString(),
+        target: bridge[1].toString(),
+        sourceHandle: 'bottom',
+        targetHandle: 'top',
+        animated: true,
+        markerStart: {
+            type: MarkerType.ArrowClosed,
+        },
+        markerEnd: {
+            type: MarkerType.ArrowClosed,
+        },
+        type: 'step',
+    })) ?? [];
+    const groupedNodes = [...formattedParentNodes, ...nodes];
+    // NOTE: Parent nodes should be rendered before child nodes
+    return { nodes: [...groupedNodes], 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,6 +1,6 @@
 {
   "name": "@luxonis/depthai-pipeline-lib",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/src/index.js",

package/dist/src/styled-system/chunks/src__components__Node.css

@@ -1,196 +0,0 @@
-@layer utilities {
-
-  .bg_dark\.warning\! {
-    background-color: var(--colors-dark-warning) !important
-    }
-
-  .bg_dark\.success\! {
-    background-color: var(--colors-dark-success) !important
-    }
-
-  .w_custom\.handle\.dot\! {
-    width: var(--sizes-custom-handle-dot) !important
-    }
-
-  .h_custom\.handle\.dot\! {
-    height: var(--sizes-custom-handle-dot) !important
-    }
-
-  .border_none\! {
-    border: var(--borders-none) !important
-    }
-
-  .ml_xs {
-    margin-left: var(--spacing-xs)
-    }
-
-  .mr_xs {
-    margin-right: var(--spacing-xs)
-    }
-
-  .min-w_container\.smaller\.xxs {
-    min-width: var(--sizes-container-smaller-xxs)
-    }
-
-  .border_base {
-    border: var(--borders-base)
-    }
-
-  .rounded_common {
-    border-radius: var(--radii-common)
-    }
-
-  .bg_white {
-    background-color: var(--colors-white)
-    }
-
-  .w_full {
-    width: var(--sizes-full)
-    }
-
-  .bg_light\.gray {
-    background-color: var(--colors-light-gray)
-    }
-
-  .rounded-t_common {
-    border-top-left-radius: var(--radii-common);
-    border-top-right-radius: var(--radii-common)
-    }
-
-  .w_icon\.sm {
-    width: var(--sizes-icon-sm)
-    }
-
-  .h_icon\.sm {
-    height: var(--sizes-icon-sm)
-    }
-
-  .w_auto {
-    width: auto
-    }
-
-  .h_auto {
-    height: auto
-    }
-
-  .right_xs {
-    right: var(--spacing-xs)
-    }
-
-  .text_unset {
-    color: unset
-    }
-
-  .text_transparent {
-    color: var(--colors-transparent)
-    }
-
-  .items_start {
-    align-items: start
-    }
-
-  .flex_row {
-    flex-direction: row
-    }
-
-  .flex_row-reverse {
-    flex-direction: row-reverse
-    }
-
-  .items_end {
-    align-items: end
-    }
-
-  .pos_relative {
-    position: relative
-    }
-
-  .flex_column {
-    flex-direction: column
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .justify_space-between {
-    justify-content: space-between
-    }
-
-  .gap_xs {
-    gap: var(--spacing-xs)
-    }
-
-  .d_flex {
-    display: flex
-    }
-
-  .gap_sm {
-    gap: var(--spacing-sm)
-    }
-
-  .py_xs {
-    padding-block: var(--spacing-xs)
-    }
-    .\[\&\:hover_\.node-help-icon\]\:text_text\.normal:hover .node-help-icon {
-      color: var(--colors-text-normal)
-        }
-}
-
-@layer recipes {
-    .button--variant_ghost:is(:hover, [data-hover]) {
-      background: var(--colors-accent);
-      color: var(--colors-accent-foreground)
-        }
-
-  .button--size_default {
-    height: var(--sizes-10);
-    padding-inline: var(--spacing-4);
-    padding-block: var(--spacing-2)
-    }
-
-  @layer _base {
-    .label {
-      font-size: 0.875rem;
-      line-height: var(--line-heights-none);
-      font-weight: var(--font-weights-medium);
-        }
-      .peer:is(:disabled, [disabled], [data-disabled]) ~ .label {
-        cursor: not-allowed;
-        opacity: 0.7
-            }
-    }
-
-  @layer _base {
-    .button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--radii-md);
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      font-weight: var(--font-weights-medium);
-      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);
-      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
-      transition-duration: var(--transition-duration, 150ms);
-      cursor: pointer;
-      --shadow-panda-ring-offset-color: var(--colors-background);
-      gap: var(--spacing-2);
-        }
-      .button:is(:disabled, [disabled], [data-disabled]) {
-        pointer-events: none;
-        opacity: 50%
-            }
-      .button:is(:focus-visible, [data-focus-visible]) {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-        --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);
-        --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);
-        box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);
-        --shadow-panda-ring-color: var(--colors-ring)
-    ;
-        --shadow-panda-ring-offset-width: 2px
-    
-            }
-    }
-}

package/dist/src/styled-system/chunks/src__components__PipelineCanvas.css

@@ -1,26 +0,0 @@
-@layer utilities {
-
-  .d_flex {
-    display: flex
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .justify_center {
-    justify-content: center
-    }
-
-  .h_container\.xs {
-    height: var(--sizes-container-xs)
-    }
-
-  .rounded_common {
-    border-radius: var(--radii-common)
-    }
-
-  .border_base {
-    border: var(--borders-base)
-    }
-}

package/dist/src/styled-system/global.css

@@ -1,70 +0,0 @@
-@layer base {
-  :root {
-    --made-with-panda: '🐼'
-    }
-
-  *, *::before, *::after, ::backdrop {
-    --blur:   ;
-    --brightness:   ;
-    --contrast:   ;
-    --grayscale:   ;
-    --hue-rotate:   ;
-    --invert:   ;
-    --saturate:   ;
-    --sepia:   ;
-    --drop-shadow:   ;
-    --backdrop-blur:   ;
-    --backdrop-brightness:   ;
-    --backdrop-contrast:   ;
-    --backdrop-grayscale:   ;
-    --backdrop-hue-rotate:   ;
-    --backdrop-invert:   ;
-    --backdrop-opacity:   ;
-    --backdrop-saturate:   ;
-    --backdrop-sepia:   ;
-    --scroll-snap-strictness: proximity;
-    --border-spacing-x: 0;
-    --border-spacing-y: 0;
-    --translate-x: 0;
-    --translate-y: 0;
-    --rotate: 0;
-    --skew-x: 0;
-    --skew-y: 0;
-    --scale-x: 1;
-    --scale-y: 1
-    }
-
-  html {
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-size-adjust: 100%
-    }
-
-  body {
-    background: var(--colors-background);
-    color: var(--colors-foreground);
-    font-family: var(--fonts-sans)
-    }
-
-  button {
-    color: inherit;
-    outline: 2px solid transparent
-    }
-
-  * {
-    box-sizing: border-box;
-    font-family: var(--fonts-body)
-    }
-
-  html, body {
-    margin: var(--spacing-0);
-    padding: var(--spacing-0)
-    }
-
-  #root {
-    display: flex;
-    flex-direction: column;
-    height: 100vh
-    }
-}

package/dist/src/styled-system/patterns/link-box.d.mts

@@ -1,21 +0,0 @@
-/* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
-import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
-import type { DistributiveOmit } from '../types/system-types.d.mts';
-import type { Tokens } from '../tokens/index.d.mts';
-
-export interface LinkBoxProperties {
-   
-}
-
-
-interface LinkBoxStyles extends LinkBoxProperties, DistributiveOmit<SystemStyleObject, keyof LinkBoxProperties > {}
-
-interface LinkBoxPatternFn {
-  (styles?: LinkBoxStyles): string
-  raw: (styles?: LinkBoxStyles) => SystemStyleObject
-}
-
-
-export declare const linkBox: LinkBoxPatternFn;

package/dist/src/styled-system/patterns/link-box.mjs

@@ -1,19 +0,0 @@
-import { mapObject } from '../helpers.mjs';
-import { css } from '../css/index.mjs';
-
-const linkBoxConfig = {
-transform(props) {
-  return {
-    position: "relative",
-    "& :where(a, abbr)": {
-      position: "relative",
-      zIndex: "1"
-    },
-    ...props
-  };
-}}
-
-export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
-
-export const linkBox = (styles) => css(getLinkBoxStyle(styles))
-linkBox.raw = getLinkBoxStyle

package/dist/src/styled-system/recipes/create-recipe.d.mts

@@ -1 +0,0 @@
-/* eslint-disable */