@luxonis/depthai-pipeline-lib 1.4.11 → 1.4.13

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

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

package/dist/src/components/Node.js

@@ -3,7 +3,7 @@ import { Handle, Position } from '@xyflow/react';
 import { clsx } from '@luxonis/common-fe-components/helpers';
 import { Button, Flex, HelpIcon, Label, SubLabel } from '@luxonis/common-fe-components';
 import { css } from '../styled-system/css/css.mjs';
-const DOCS_BASE_URL = `https://docs.luxonis.com/software/depthai-components/nodes/`;
+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 }) => (_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({
@@ -19,6 +19,10 @@ const NodeHandles = props => {
 };
 export const PipelineNode = props => {
     const { data: node } = props;
+    // eslint-disable-next-line no-prototype-builtins
+    const link = NodesWithLinks.hasOwnProperty(node.name)
+        ? `${DOCS_BASE_URL}/${NodesWithLinks[node.name]}`
+        : DOCS_BASE_URL;
     return (_jsxs(Flex, { direction: "column", className: css({
             'minWidth': 'container.smaller.xxs',
             'border': 'base',
@@ -34,7 +38,7 @@ 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(DOCS_BASE_URL, '_blank'), className: clsx('node-help-icon', css({
+                        }) }), _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({
                             width: 'auto',
                             height: 'auto',
                             right: 'xs',

package/dist/src/components/PipelineCanvas.js

@@ -49,16 +49,21 @@ const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
         const layouted = getLayoutedElements(pipeline?.nodes ?? [], pipeline?.edges ?? []);
         setNodes([...layouted.nodes]);
         setEdges([...layouted.edges]);
-        window.requestAnimationFrame(async () => {
-            await fitView({ minZoom: 0.4 });
+    }, [pipeline?.edges, pipeline?.nodes, setEdges, setNodes]);
+    const setViewportAndFit = async (x, y, zoom, nds) => {
+        await setViewport({ x, y, zoom });
+        await fitView({ nodes: nds });
+    };
+    React.useEffect(() => {
+        if (!autoArrangeRef.current) {
+            return;
+        }
+        if (nodes.length > 0 && edges.length > 0) {
             const viewport = getViewport();
-            await setViewport({
-                x: viewport.x,
-                y: viewport.y,
-                zoom: 0.4,
-            });
-        });
-    }, [fitView, getViewport, pipeline?.edges, pipeline?.nodes, setEdges, setNodes, setViewport]);
+            void setViewportAndFit(viewport.x, viewport.y, viewport.zoom, nodes);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nodes, edges]);
     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 && (_jsx(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: { generic: PipelineNode }, minZoom: 0.4 }))] }));
 };
 export const PipelineCanvas = props => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

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

@@ -49,3 +49,29 @@ export type ParsedNode = Node<{
     };
 }>;
 export declare function parsePipeline(rawPayload: RawPipelinePayload): Pipeline;
+export declare const DOCS_BASE_URL = "https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes";
+export declare const NodesWithLinks: {
+    AprilTag: string;
+    BenchmarkIn: string;
+    BenchmarkOut: string;
+    Camera: string;
+    DetectionNetwork: string;
+    EdgeDetector: string;
+    SpatialDetectionNetwork: string;
+    FeatureTracker: string;
+    ImageAlign: string;
+    ImageManip: string;
+    IMU: string;
+    NeuralNetwork: string;
+    ObjectTracker: string;
+    RGBD: string;
+    Script: string;
+    SpatialLocationCalculator: string;
+    StereoDepth: string;
+    Sync: string;
+    SystemLogger: string;
+    Thermal: string;
+    ToF: string;
+    VideoEncoder: string;
+    Warp: string;
+};

package/dist/src/services/pipeline.js

@@ -38,3 +38,29 @@ export function parsePipeline(rawPayload) {
     })) ?? [];
     return { nodes, edges };
 }
+export const DOCS_BASE_URL = `https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes`;
+export const NodesWithLinks = {
+    AprilTag: 'april_tag',
+    BenchmarkIn: 'benchmark_in',
+    BenchmarkOut: 'benchmark_out',
+    Camera: 'camera',
+    DetectionNetwork: 'detection_network',
+    EdgeDetector: 'edge_detector',
+    SpatialDetectionNetwork: 'spatial_detection_network',
+    FeatureTracker: 'feature_tracker',
+    ImageAlign: 'image_align',
+    ImageManip: 'image_manip',
+    IMU: 'imu',
+    NeuralNetwork: 'neural_network',
+    ObjectTracker: 'object_tracker',
+    RGBD: 'rgbd',
+    Script: 'script',
+    SpatialLocationCalculator: 'spatial_location_calculator',
+    StereoDepth: 'stereo_depth',
+    Sync: 'sync',
+    SystemLogger: 'system_logger',
+    Thermal: 'thermal',
+    ToF: 'tof',
+    VideoEncoder: 'video_encoder',
+    Warp: 'warp',
+};

package/package.json

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