@luxonis/depthai-pipeline-lib 1.16.0 → 1.16.2

package/dist/src/components/PipelineCanvas.js

@@ -11,6 +11,7 @@ const edgeTypes = { generic: BezierEdge, bridge: BridgeEdge };
 const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, header, isDebugging = false, ...flexProps }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
+    const moveStartZoomRef = React.useRef(null);
     const widthSelector = (state) => state.width;
     const heightSelector = (state) => state.height;
     const reactFlowWidth = useStore(widthSelector);
@@ -18,6 +19,20 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, head
     const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
     const [openLegend, setOpenLegend] = React.useState(false);
     const pipelineState = React.useMemo(() => pipelineStateParsed, [pipelineStateParsed]);
+    const layoutSignature = React.useMemo(() => {
+        if (!pipeline) {
+            return '';
+        }
+        const nodeSignature = pipeline.nodes
+            .map((node) => `${node.id}:${node.parentId ?? ''}`)
+            .sort()
+            .join('|');
+        const edgeSignature = pipeline.edges
+            .map((edge) => `${edge.id}:${edge.source}:${edge.target}:${edge.sourceHandle ?? ''}:${edge.targetHandle ?? ''}:${edge.type ?? ''}`)
+            .sort()
+            .join('|');
+        return `${nodeSignature}__${edgeSignature}`;
+    }, [pipeline]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         void fitView();
@@ -25,34 +40,22 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, head
     }, [reactFlowWidth, reactFlowHeight]);
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges] = useEdgesState([]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Layout should only rerun when graph structure changes
     React.useEffect(() => {
         if (!autoArrangeRef.current) {
             return;
         }
         const layouted = getLayoutedElements(pipeline?.nodes ?? [], pipeline?.edges ?? []);
-        if (pipelineState) {
-            const updatedNodes = updateNodesOnPipelineStateChange([...layouted.nodes], pipelineState);
-            const adjustedNodes = adjustNodes([...updatedNodes], layouted.edges);
-            setNodes([...adjustedNodes]);
-        }
-        else {
-            const adjustedNodes = adjustNodes([...layouted.nodes], layouted.edges);
-            setNodes([...adjustedNodes]);
-        }
+        const adjustedNodes = adjustNodes([...layouted.nodes], layouted.edges);
+        setNodes([...adjustedNodes]);
         setEdges([...layouted.edges]);
         setShouldFitAndResize(true);
-    }, [pipeline?.edges, pipeline?.nodes, setEdges, setNodes, pipelineState]);
+    }, [layoutSignature, setEdges, setNodes]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         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]);
@@ -69,6 +72,16 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, head
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [shouldFitAndResize]);
-    return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.4, children: [header && _jsx(Panel, { position: "top-center", children: header }), _jsx(Panel, { position: "top-right", children: _jsxs(Flex, { gap: "xs", flexDirection: "column", children: [_jsx(Button, { onClick: () => setOpenLegend(!openLegend), label: openLegend ? 'Collapse' : 'Legend' }), openLegend && _jsx(PipelineLegend, { isDebugging: isDebugging })] }) })] }))] }));
+    const handleMoveStart = React.useCallback((_, viewport) => {
+        moveStartZoomRef.current = viewport.zoom;
+    }, []);
+    const handleMoveEnd = React.useCallback((_, viewport) => {
+        if (moveStartZoomRef.current !== null &&
+            Math.abs(viewport.zoom - moveStartZoomRef.current) > 0.001) {
+            autoArrangeRef.current = false;
+        }
+        moveStartZoomRef.current = null;
+    }, []);
+    return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onMoveStart: handleMoveStart, onMoveEnd: handleMoveEnd, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.4, children: [header && _jsx(Panel, { position: "top-center", children: header }), _jsx(Panel, { position: "top-right", children: _jsxs(Flex, { gap: "xs", flexDirection: "column", children: [_jsx(Button, { onClick: () => setOpenLegend(!openLegend), label: openLegend ? 'Collapse' : 'Legend' }), openLegend && _jsx(PipelineLegend, { isDebugging: isDebugging })] }) })] }))] }));
 };
 export const PipelineCanvas = (props) => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

package/dist/src/components/PipelineLegend.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Badge, Flex, Label, SubLabel } from '@luxonis/common-fe-components';
 import React from 'react';
+import { PACKAGE_VERSION } from '../version.js';
 const debugSections = [
     {
         title: 'Nodes',
@@ -211,5 +212,5 @@ export const PipelineLegend = ({ isDebugging, }) => {
             bridgeSection,
         ]
         : sharedSections;
-    return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", padding: "sm", rounded: "common", border: "base", backgroundColor: "white", maxWidth: "390px", children: [_jsx(Label, { text: "Legend", color: "black", weight: "medium", align: "center" }), _jsx(Flex, { direction: "column", gap: "xs", width: "full", children: sections.map((section) => (_jsx(LegendSection, { title: section.title, items: section.items }, section.title))) })] }));
+    return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", padding: "sm", rounded: "common", border: "base", backgroundColor: "white", maxWidth: "390px", children: [_jsx(Label, { text: "Legend", color: "black", weight: "medium", align: "center" }), _jsx(Flex, { direction: "column", gap: "xs", width: "full", children: sections.map((section) => (_jsx(LegendSection, { title: section.title, items: section.items }, section.title))) }), _jsx(SubLabel, { text: `v${PACKAGE_VERSION}`, color: "lightGray", align: "right" })] }));
 };

package/dist/src/index.d.ts

@@ -4,3 +4,4 @@ export type { Pipeline, RawPipelinePayload } from './services/pipeline.js';
 export { parsePipeline } from './services/pipeline.js';
 export type { PipelineState, RawPipelineStatePayload, } from './services/pipeline-state.js';
 export { parsePipelineState } from './services/pipeline-state.js';
+export { PACKAGE_VERSION } from './version.js';

package/dist/src/index.js

@@ -1,3 +1,4 @@
 export { PipelineCanvas } from './components/PipelineCanvas.js';
 export { parsePipeline } from './services/pipeline.js';
 export { parsePipelineState } from './services/pipeline-state.js';
+export { PACKAGE_VERSION } from './version.js';

package/dist/src/version.d.ts

@@ -0,0 +1 @@
+export declare const PACKAGE_VERSION = "1.16.2";

package/dist/src/version.js

@@ -0,0 +1,3 @@
+// This file is autogenerated by build-utils.sh.
+// Do not edit it manually.
+export const PACKAGE_VERSION = '1.16.2';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luxonis/depthai-pipeline-lib",
-	"version": "1.16.0",
+	"version": "1.16.2",
 	"type": "module",
 	"license": "UNLICENSED",
 	"main": "./dist/src/index.js",