@babylonjs/shared-ui-components 5.32.0 → 5.32.2

package/components/layout/FlexibleTabsContainer.modules.scss

@@ -24,6 +24,7 @@ $tabContentBackgroundColor: rgb(214, 214, 214);
     flex-direction: row;
     overflow: hidden;
     width: 100%;
+    height: 100%;
 }
 
 .contentContainer {

package/components/reactGraphSystem/GraphConnectorHandle.d.ts

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+/**
+ * Props for the connector
+ */
+export interface IGraphConnectorHandlerProps {
+    /**
+     * id of the parent node
+     */
+    parentId: string;
+    /**
+     * x position of the parent node
+     */
+    parentX: number;
+    /**
+     * y position of the parent node
+     */
+    parentY: number;
+    /**
+     * x position of the connector relative to the parent node
+     */
+    offsetX?: number;
+    /**
+     * y position of the connector relative to the parent node
+     */
+    offsetY?: number;
+    /**
+     * width of the parent node
+     */
+    parentWidth: number;
+    /**
+     * height of the parent node
+     */
+    parentHeight: number;
+    /**
+     * id of the container where its parent node is
+     */
+    parentContainerId: string;
+}
+/**
+ * This component is used to initiate a connection between two nodes. Simply
+ * drag the handle in a node and drop it in another node to create a connection.
+ */
+export declare const GraphConnectorHandler: FC<IGraphConnectorHandlerProps>;

package/components/reactGraphSystem/GraphConnectorHandle.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { ClassNames } from "../classNames.js";
+import style from "./GraphConnectorHandle.modules.scss";
+import { useGraphContext } from "./useGraphContext.js";
+/**
+ * This component is used to initiate a connection between two nodes. Simply
+ * drag the handle in a node and drop it in another node to create a connection.
+ */
+export const GraphConnectorHandler = ({ parentId, parentX, parentY, offsetX = 0, offsetY = 0, parentWidth, parentHeight, parentContainerId }) => {
+    const { onNodesConnected } = useGraphContext();
+    const centerX = offsetX + parentWidth / 2;
+    const centerY = offsetY + parentHeight / 2;
+    const [, dragRef] = useDrag(() => ({
+        type: "connector",
+        item: { parentId, x: parentX + centerX, y: parentY + centerY, parentContainerId },
+        canDrag: () => parentX !== undefined && parentY !== undefined,
+    }), [parentId, parentX, parentY]);
+    const [{ isOver }, dropRef] = useDrop(() => ({
+        accept: "connector",
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+        canDrop: (item) => {
+            return item.parentContainerId === parentContainerId;
+        },
+        drop: (item) => {
+            onNodesConnected && onNodesConnected(item.parentId, parentId);
+        },
+    }));
+    const attachRef = useCallback((ref) => {
+        dragRef(ref);
+        dropRef(ref);
+    }, [dragRef, dropRef]);
+    return _jsx("div", { ref: attachRef, className: ClassNames({ handle: true, hovered: isOver }, style), style: { top: centerY + "px", left: centerX + "px" } });
+};
+//# sourceMappingURL=GraphConnectorHandle.js.map

package/components/reactGraphSystem/GraphConnectorHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphConnectorHandle.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphConnectorHandle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,MAAM,qCAAqC,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAwCpD;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAE,EAAE;IAC7K,MAAM,EAAE,gBAAgB,EAAE,GAAG,eAAe,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,iBAAiB,EAAE;QACjF,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;KAChE,CAAC,EACF,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAC/B,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACzC,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SAC3B,CAAC;QACF,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,iBAAiB,CAAC;QACxD,CAAC;QACD,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;YAChB,gBAAgB,IAAI,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAClE,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,MAAM,SAAS,GAAG,WAAW,CACzB,CAAC,GAAG,EAAE,EAAE;QACJ,OAAO,CAAC,GAAG,CAAC,CAAC;QACb,OAAO,CAAC,GAAG,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACrB,CAAC;IACF,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,GAAI,CAAC;AAC1J,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useCallback } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport style from \"./GraphConnectorHandle.modules.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\n/**\r\n * Props for the connector\r\n */\r\nexport interface IGraphConnectorHandlerProps {\r\n    /**\r\n     * id of the parent node\r\n     */\r\n    parentId: string;\r\n    /**\r\n     * x position of the parent node\r\n     */\r\n    parentX: number;\r\n    /**\r\n     * y position of the parent node\r\n     */\r\n    parentY: number;\r\n    /**\r\n     * x position of the connector relative to the parent node\r\n     */\r\n    offsetX?: number;\r\n    /**\r\n     * y position of the connector relative to the parent node\r\n     */\r\n    offsetY?: number;\r\n    /**\r\n     * width of the parent node\r\n     */\r\n    parentWidth: number;\r\n    /**\r\n     * height of the parent node\r\n     */\r\n    parentHeight: number;\r\n    /**\r\n     * id of the container where its parent node is\r\n     */\r\n    parentContainerId: string;\r\n}\r\n\r\n/**\r\n * This component is used to initiate a connection between two nodes. Simply\r\n * drag the handle in a node and drop it in another node to create a connection.\r\n */\r\nexport const GraphConnectorHandler: FC<IGraphConnectorHandlerProps> = ({ parentId, parentX, parentY, offsetX = 0, offsetY = 0, parentWidth, parentHeight, parentContainerId }) => {\r\n    const { onNodesConnected } = useGraphContext();\r\n    const centerX = offsetX + parentWidth / 2;\r\n    const centerY = offsetY + parentHeight / 2;\r\n    const [, dragRef] = useDrag(\r\n        () => ({\r\n            type: \"connector\",\r\n            item: { parentId, x: parentX + centerX, y: parentY + centerY, parentContainerId },\r\n            canDrag: () => parentX !== undefined && parentY !== undefined,\r\n        }),\r\n        [parentId, parentX, parentY]\r\n    );\r\n    const [{ isOver }, dropRef] = useDrop(() => ({\r\n        accept: \"connector\",\r\n        collect: (monitor: DropTargetMonitor) => ({\r\n            isOver: monitor.isOver(),\r\n        }),\r\n        canDrop: (item: any) => {\r\n            return item.parentContainerId === parentContainerId;\r\n        },\r\n        drop: (item: any) => {\r\n            onNodesConnected && onNodesConnected(item.parentId, parentId);\r\n        },\r\n    }));\r\n    const attachRef = useCallback(\r\n        (ref) => {\r\n            dragRef(ref);\r\n            dropRef(ref);\r\n        },\r\n        [dragRef, dropRef]\r\n    );\r\n    return <div ref={attachRef} className={ClassNames({ handle: true, hovered: isOver }, style)} style={{ top: centerY + \"px\", left: centerX + \"px\" }} />;\r\n};\r\n"]}

package/components/reactGraphSystem/GraphConnectorHandle.modules.scss

@@ -0,0 +1,12 @@
+.handle {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    overflow: visible;
+    position: absolute;
+    background-color: darkgray;
+}
+
+.hovered {
+    background-color: yellow;
+}

package/components/reactGraphSystem/GraphContainer.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+export interface IGraphContainerProps {
+}
+/**
+ * This component is just a simple container to keep the nodes and lines containers
+ * together
+ * @param props
+ * @returns
+ */
+export declare const GraphContainer: FC<IGraphContainerProps>;

package/components/reactGraphSystem/GraphContainer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import style from "./GraphContainer.modules.scss";
+/**
+ * This component is just a simple container to keep the nodes and lines containers
+ * together
+ * @param props
+ * @returns
+ */
+export const GraphContainer = (props) => {
+    return _jsx("div", { className: style.container, children: props.children });
+};
+//# sourceMappingURL=GraphContainer.js.map

package/components/reactGraphSystem/GraphContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphContainer.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphContainer.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,+BAA+B,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC9D,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACnE,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport style from \"./GraphContainer.modules.scss\";\r\n\r\nexport interface IGraphContainerProps {}\r\n\r\n/**\r\n * This component is just a simple container to keep the nodes and lines containers\r\n * together\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphContainer: FC<IGraphContainerProps> = (props) => {\r\n    return <div className={style.container}>{props.children}</div>;\r\n};\r\n"]}

package/components/reactGraphSystem/GraphContainer.modules.scss

@@ -0,0 +1,8 @@
+.container {
+    width: 100%;
+    height: 100%;
+    font: 14px "acumin-pro";
+    user-select: none;
+    overflow: hidden;
+    background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px);
+}

package/components/reactGraphSystem/GraphContextManager.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * this context is used to pass callbacks to the graph nodes and connections
+ */
+export interface IGraphContext {
+    onNodesConnected?: (sourceId: string, targetId: string) => void;
+    onLineSelected?: (lineId: string) => void;
+    onNodeSelected?: (nodeId: string) => void;
+}
+export declare const GraphContextManager: import("react").Context<IGraphContext>;

package/components/reactGraphSystem/GraphContextManager.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+export const GraphContextManager = createContext({});
+//# sourceMappingURL=GraphContextManager.js.map

package/components/reactGraphSystem/GraphContextManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphContextManager.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphContextManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAgB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\r\n\r\n/**\r\n * this context is used to pass callbacks to the graph nodes and connections\r\n */\r\nexport interface IGraphContext {\r\n    onNodesConnected?: (sourceId: string, targetId: string) => void;\r\n    onLineSelected?: (lineId: string) => void;\r\n    onNodeSelected?: (nodeId: string) => void;\r\n}\r\n\r\nexport const GraphContextManager = createContext<IGraphContext>({});\r\n"]}

package/components/reactGraphSystem/GraphLine.d.ts

@@ -0,0 +1,40 @@
+import type { FC } from "react";
+/**
+ * props for the GraphLine component
+ */
+export interface IGraphLineProps {
+    /**
+     * id of the line. temporary lines can have no id
+     */
+    id?: string;
+    /**
+     * starting x pos of the line
+     */
+    x1: number;
+    /**
+     * ending x pos of the line
+     */
+    x2: number;
+    /**
+     * starting y pos of the line
+     */
+    y1: number;
+    /**
+     * ending y pos of the line
+     */
+    y2: number;
+    /**
+     * is the line selected
+     */
+    selected?: boolean;
+    /**
+     * does the line have a direction
+     */
+    directional?: boolean;
+}
+export declare const MarkerArrowId = "arrow";
+/**
+ * This component draws a SVG line between two points, with an optional marker
+ * indicating direction
+ */
+export declare const GraphLine: FC<IGraphLineProps>;

package/components/reactGraphSystem/GraphLine.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGraphContext } from "./useGraphContext.js";
+export const MarkerArrowId = "arrow";
+/**
+ * This component draws a SVG line between two points, with an optional marker
+ * indicating direction
+ */
+export const GraphLine = (props) => {
+    const { id, x1, x2, y1, y2, selected, directional = true } = props;
+    const { onLineSelected } = useGraphContext();
+    // Line is only selectable when it has an id
+    const onClick = () => {
+        id && onLineSelected && onLineSelected(id);
+    };
+    const xm = (x1 + x2) / 2;
+    const ym = (y1 + y2) / 2;
+    return (_jsx("path", { d: `M ${x1} ${y1} L ${xm} ${ym} L ${x2} ${y2}`, strokeWidth: 3, stroke: selected ? "yellow" : "black", onClick: onClick, markerMid: directional ? `url(#${MarkerArrowId})` : "" }));
+};
+//# sourceMappingURL=GraphLine.js.map

package/components/reactGraphSystem/GraphLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAmCpD,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;AAErC;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAwB,CAAC,KAAsB,EAAE,EAAE;IACrE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,4CAA4C;IAC5C,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,EAAE,IAAI,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IACzB,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IAEzB,OAAO,CACH,eACI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAC9C,WAAW,EAAE,CAAC,EACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACrC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,aAAa,GAAG,CAAC,CAAC,CAAC,EAAE,GACxD,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n/**\r\n * props for the GraphLine component\r\n */\r\nexport interface IGraphLineProps {\r\n    /**\r\n     * id of the line. temporary lines can have no id\r\n     */\r\n    id?: string;\r\n    /**\r\n     * starting x pos of the line\r\n     */\r\n    x1: number;\r\n    /**\r\n     * ending x pos of the line\r\n     */\r\n    x2: number;\r\n    /**\r\n     * starting y pos of the line\r\n     */\r\n    y1: number;\r\n    /**\r\n     * ending y pos of the line\r\n     */\r\n    y2: number;\r\n    /**\r\n     * is the line selected\r\n     */\r\n    selected?: boolean;\r\n    /**\r\n     * does the line have a direction\r\n     */\r\n    directional?: boolean;\r\n}\r\n\r\nexport const MarkerArrowId = \"arrow\";\r\n\r\n/**\r\n * This component draws a SVG line between two points, with an optional marker\r\n * indicating direction\r\n */\r\nexport const GraphLine: FC<IGraphLineProps> = (props: IGraphLineProps) => {\r\n    const { id, x1, x2, y1, y2, selected, directional = true } = props;\r\n    const { onLineSelected } = useGraphContext();\r\n\r\n    // Line is only selectable when it has an id\r\n    const onClick = () => {\r\n        id && onLineSelected && onLineSelected(id);\r\n    };\r\n\r\n    const xm = (x1 + x2) / 2;\r\n    const ym = (y1 + y2) / 2;\r\n\r\n    return (\r\n        <path\r\n            d={`M ${x1} ${y1} L ${xm} ${ym} L ${x2} ${y2}`}\r\n            strokeWidth={3}\r\n            stroke={selected ? \"yellow\" : \"black\"}\r\n            onClick={onClick}\r\n            markerMid={directional ? `url(#${MarkerArrowId})` : \"\"}\r\n        />\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/GraphLinesContainer.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+/**
+ * props for the GraphLineContainer
+ */
+export interface IGraphLinesContainerProps {
+    /**
+     * id of the container
+     */
+    id: string;
+}
+/**
+ * this component handles the dragging of new connections
+ * @param props
+ * @returns
+ */
+export declare const GraphLinesContainer: FC<IGraphLinesContainerProps>;

package/components/reactGraphSystem/GraphLinesContainer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDrop } from "react-dnd";
+import { GraphLine, MarkerArrowId } from "./GraphLine.js";
+/**
+ * this component handles the dragging of new connections
+ * @param props
+ * @returns
+ */
+export const GraphLinesContainer = (props) => {
+    const [{ start, delta }, dropRef] = useDrop(() => ({
+        accept: "connector",
+        canDrop: (item) => {
+            return item.parentContainerId === props.id;
+        },
+        collect: (monitor) => ({
+            start: monitor.getItem(),
+            delta: monitor.getDifferenceFromInitialOffset(),
+        }),
+    }));
+    return (_jsxs("svg", { width: "100%", height: "100%", ref: dropRef, children: [_jsx("defs", { children: _jsx("marker", { id: MarkerArrowId, markerWidth: "15", markerHeight: "15", refX: "5", refY: "5", orient: "auto", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", stroke: "black" }) }) }), props.children, start && start.parentContainerId === props.id && start.x !== undefined && start.y !== undefined && delta && (_jsx(GraphLine, { x1: start.x, y1: start.y, x2: start.x + delta.x, y2: start.y + delta.y, selected: false }))] }));
+};
+//# sourceMappingURL=GraphLinesContainer.js.map

package/components/reactGraphSystem/GraphLinesContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphLinesContainer.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLinesContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAkC,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/C,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,KAAK,EAAE,OAAO,CAAC,OAAO,EAAS;YAC/B,KAAK,EAAE,OAAO,CAAC,8BAA8B,EAAS;SACzD,CAAC;KACL,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,OAAO,aACxC,yBACI,iBAAQ,EAAE,EAAE,aAAa,EAAE,WAAW,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,YACzF,eAAM,CAAC,EAAC,uBAAuB,EAAC,MAAM,EAAC,OAAO,GAAG,GAC5C,GACN,EACN,KAAK,CAAC,QAAQ,EACd,KAAK,IAAI,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,IAAI,CACzG,KAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,CACzG,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { GraphLine, MarkerArrowId } from \"./GraphLine\";\r\n\r\n/**\r\n * props for the GraphLineContainer\r\n */\r\nexport interface IGraphLinesContainerProps {\r\n    /**\r\n     * id of the container\r\n     */\r\n    id: string;\r\n}\r\n\r\n/**\r\n * this component handles the dragging of new connections\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphLinesContainer: FC<IGraphLinesContainerProps> = (props) => {\r\n    const [{ start, delta }, dropRef] = useDrop(() => ({\r\n        accept: \"connector\",\r\n        canDrop: (item: any) => {\r\n            return item.parentContainerId === props.id;\r\n        },\r\n        collect: (monitor: DropTargetMonitor) => ({\r\n            start: monitor.getItem() as any,\r\n            delta: monitor.getDifferenceFromInitialOffset() as any,\r\n        }),\r\n    }));\r\n    return (\r\n        <svg width=\"100%\" height=\"100%\" ref={dropRef}>\r\n            <defs>\r\n                <marker id={MarkerArrowId} markerWidth=\"15\" markerHeight=\"15\" refX=\"5\" refY=\"5\" orient=\"auto\">\r\n                    <path d=\"M 0 0 L 10 5 L 0 10 z\" stroke=\"black\" />\r\n                </marker>\r\n            </defs>\r\n            {props.children}\r\n            {start && start.parentContainerId === props.id && start.x !== undefined && start.y !== undefined && delta && (\r\n                <GraphLine x1={start.x} y1={start.y} x2={start.x + delta.x} y2={start.y + delta.y} selected={false} />\r\n            )}\r\n        </svg>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/GraphNode.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from "react";
+export interface IGraphNodeProps {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    selected?: boolean;
+    width?: number;
+    height?: number;
+    highlighted?: boolean;
+    parentContainerId: string;
+}
+export declare const GraphNode: FC<IGraphNodeProps>;

package/components/reactGraphSystem/GraphNode.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDrag } from "react-dnd";
+import { ClassNames } from "../classNames.js";
+import { GraphConnectorHandler } from "./GraphConnectorHandle.js";
+import style from "./GraphNode.modules.scss";
+import { useGraphContext } from "./useGraphContext.js";
+export const GraphNode = (props) => {
+    const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;
+    const { onNodeSelected } = useGraphContext();
+    const [, dragRef] = useDrag(() => ({
+        type: "node",
+        item: { id, parentContainerId },
+        collect: (monitor) => ({
+            isDrag: !!monitor.isDragging(),
+        }),
+    }), []);
+    const onClick = () => {
+        onNodeSelected && onNodeSelected(id);
+    };
+    return (_jsx("div", { ref: dragRef, className: ClassNames({ node: true, selected, highlighted }, style), style: { left: x, top: y, minWidth: width + "px", minHeight: height + "px" }, onClick: onClick, children: _jsxs("div", { className: style.container, children: [_jsx("h2", { children: name }), _jsx(GraphConnectorHandler, { parentContainerId: parentContainerId, parentId: id, parentX: x, parentY: y, offsetY: -height / 2, parentWidth: width, parentHeight: height }), props.children] }) }));
+};
+//# sourceMappingURL=GraphNode.js.map

package/components/reactGraphSystem/GraphNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphNode.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNode.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,MAAM,0BAA0B,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,SAAS,GAAwB,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACrG,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE;QAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACnB,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;SACjC,CAAC;KACL,CAAC,EACF,EAAE,CACL,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,EACnE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,EAC5E,OAAO,EAAE,OAAO,YAEhB,eAAK,SAAS,EAAE,KAAK,CAAC,SAAS,aAC3B,uBAAK,IAAI,GAAM,EACf,KAAC,qBAAqB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,EAAE,EACZ,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,MAAM,GAAG,CAAC,EACpB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,MAAM,GACtB,EACD,KAAK,CAAC,QAAQ,IACb,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport style from \"./GraphNode.modules.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\nexport interface IGraphNodeProps {\r\n    id: string;\r\n    name: string;\r\n    x: number;\r\n    y: number;\r\n    selected?: boolean;\r\n    width?: number;\r\n    height?: number;\r\n    highlighted?: boolean;\r\n    parentContainerId: string;\r\n}\r\n\r\nexport const GraphNode: FC<IGraphNodeProps> = (props) => {\r\n    const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;\r\n    const { onNodeSelected } = useGraphContext();\r\n\r\n    const [, dragRef] = useDrag(\r\n        () => ({\r\n            type: \"node\",\r\n            item: { id, parentContainerId },\r\n            collect: (monitor) => ({\r\n                isDrag: !!monitor.isDragging(),\r\n            }),\r\n        }),\r\n        []\r\n    );\r\n\r\n    const onClick = () => {\r\n        onNodeSelected && onNodeSelected(id);\r\n    };\r\n\r\n    return (\r\n        <div\r\n            ref={dragRef}\r\n            className={ClassNames({ node: true, selected, highlighted }, style)}\r\n            style={{ left: x, top: y, minWidth: width + \"px\", minHeight: height + \"px\" }}\r\n            onClick={onClick}\r\n        >\r\n            <div className={style.container}>\r\n                <h2>{name}</h2>\r\n                <GraphConnectorHandler\r\n                    parentContainerId={parentContainerId}\r\n                    parentId={id}\r\n                    parentX={x}\r\n                    parentY={y}\r\n                    offsetY={-height / 2}\r\n                    parentWidth={width}\r\n                    parentHeight={height}\r\n                />\r\n                {props.children}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/GraphNode.modules.scss

@@ -0,0 +1,22 @@
+.node {
+    position: absolute;
+    background-color: #666666;
+    display: flex;
+    justify-content: center;
+    border: 1px solid #000000;
+}
+
+.selected {
+    border: 2px solid #ffffff;
+}
+
+.highlighted {
+    border: 2px solid hsl(64, 100%, 61%);
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}

package/components/reactGraphSystem/GraphNodesContainer.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+export interface IGraphContainerProps {
+    onNodeMoved: (id: string, x: number, y: number) => void;
+    id: string;
+}
+/**
+ * This component contains all the nodes and handles their dragging
+ */
+export declare const GraphNodesContainer: FC<IGraphContainerProps>;

package/components/reactGraphSystem/GraphNodesContainer.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Vector2 } from "@babylonjs/core/Maths/math.js";
+import { useEffect, useRef } from "react";
+import { useDragLayer } from "react-dnd";
+/**
+ * This component contains all the nodes and handles their dragging
+ */
+export const GraphNodesContainer = (props) => {
+    const lastDragPos = useRef(null);
+    const { currentOffset, item, isDragging } = useDragLayer((monitor) => ({
+        currentOffset: monitor.getSourceClientOffset(),
+        item: monitor.getItem(),
+        isDragging: monitor.isDragging(),
+    }));
+    useEffect(() => {
+        var _a;
+        if (currentOffset && item) {
+            if (lastDragPos.current) {
+                const delta = new Vector2(currentOffset.x, currentOffset.y).subtract(lastDragPos.current);
+                (_a = props.onNodeMoved) === null || _a === void 0 ? void 0 : _a.call(props, item.id, delta.x, delta.y);
+            }
+            lastDragPos.current = new Vector2(currentOffset.x, currentOffset.y);
+        }
+    }, [currentOffset, item]);
+    useEffect(() => {
+        if (!isDragging) {
+            lastDragPos.current = null;
+        }
+    }, [isDragging]);
+    return _jsx("div", { children: props.children });
+};
+//# sourceMappingURL=GraphNodesContainer.js.map

package/components/reactGraphSystem/GraphNodesContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphNodesContainer.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNodesContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,sCAAwB;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAMzC;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAA6B,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEpD,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACnE,aAAa,EAAE,OAAO,CAAC,qBAAqB,EAAE;QAC9C,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE;QACvB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;KACnC,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;;QACX,IAAI,aAAa,IAAI,IAAI,EAAE;YACvB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACrB,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC1F,MAAA,KAAK,CAAC,WAAW,sDAAG,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;aAClD;YACD,WAAW,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;SACvE;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE;YACb,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;SAC9B;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACjB,OAAO,wBAAM,KAAK,CAAC,QAAQ,GAAO,CAAC;AACvC,CAAC,CAAC","sourcesContent":["import { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FC } from \"react\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { useDragLayer } from \"react-dnd\";\r\nexport interface IGraphContainerProps {\r\n    onNodeMoved: (id: string, x: number, y: number) => void;\r\n    id: string;\r\n}\r\n\r\n/**\r\n * This component contains all the nodes and handles their dragging\r\n */\r\nexport const GraphNodesContainer: FC<IGraphContainerProps> = (props) => {\r\n    const lastDragPos = useRef<Nullable<Vector2>>(null);\r\n\r\n    const { currentOffset, item, isDragging } = useDragLayer((monitor) => ({\r\n        currentOffset: monitor.getSourceClientOffset(),\r\n        item: monitor.getItem(),\r\n        isDragging: monitor.isDragging(),\r\n    }));\r\n\r\n    useEffect(() => {\r\n        if (currentOffset && item) {\r\n            if (lastDragPos.current) {\r\n                const delta = new Vector2(currentOffset.x, currentOffset.y).subtract(lastDragPos.current);\r\n                props.onNodeMoved?.(item.id, delta.x, delta.y);\r\n            }\r\n            lastDragPos.current = new Vector2(currentOffset.x, currentOffset.y);\r\n        }\r\n    }, [currentOffset, item]);\r\n    useEffect(() => {\r\n        if (!isDragging) {\r\n            lastDragPos.current = null;\r\n        }\r\n    }, [isDragging]);\r\n    return <div>{props.children}</div>;\r\n};\r\n"]}

package/components/reactGraphSystem/NodeRenderer.d.ts

@@ -0,0 +1,69 @@
+import type { ComponentType } from "react";
+import type { Nullable } from "@babylonjs/core/types.js";
+export declare type IVisualRecordsType = Record<string, {
+    x: number;
+    y: number;
+}>;
+export declare type IConnectionType = {
+    id: string;
+    sourceId: string;
+    targetId: string;
+};
+export declare type ICustomDataType = {
+    type: string;
+    value: any;
+};
+export declare type INodeType = {
+    id: string;
+    label: string;
+    customData?: ICustomDataType;
+};
+/**
+ * props for the node renderer
+ */
+export interface INodeRendererProps {
+    /**
+     * array of connections between nodes
+     */
+    connections: IConnectionType[];
+    /**
+     * function called when a new connection is created
+     */
+    updateConnections: (sourceId: string, targetId: string) => void;
+    /**
+     * function called when a connection is deleted
+     */
+    deleteLine: (lineId: string) => void;
+    /**
+     * function called when a node is deleted
+     */
+    deleteNode: (nodeId: string) => void;
+    /**
+     * array of all nodes
+     */
+    nodes: INodeType[];
+    /**
+     * id of the node to highlight
+     */
+    highlightedNode?: Nullable<string>;
+    /**
+     * function to be called if a node is selected
+     */
+    selectNode?: (nodeId: Nullable<string>) => void;
+    /**
+     * id of this renderer
+     */
+    id: string;
+    /**
+     * optional list of custom components to be rendered inside nodes of
+     * a certain type
+     */
+    customComponents?: Record<string, ComponentType<any>>;
+}
+/**
+ * This component is a bridge between the app logic related to the graph, and the actual rendering
+ * of it. It manages the nodes' positions and selection states.
+ * @param props
+ * @returns
+ */
+export declare const NodeRenderer: (props: INodeRendererProps) => JSX.Element;

package/components/reactGraphSystem/NodeRenderer.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { GraphContainer } from "./GraphContainer.js";
+import { GraphLine } from "./GraphLine.js";
+import { GraphNode } from "./GraphNode.js";
+import { GraphNodesContainer } from "./GraphNodesContainer.js";
+import { GraphLinesContainer } from "./GraphLinesContainer.js";
+import { GraphContextManager } from "./GraphContextManager.js";
+const fullscreenStyle = { width: "100%", height: "100%" };
+/**
+ * This component is a bridge between the app logic related to the graph, and the actual rendering
+ * of it. It manages the nodes' positions and selection states.
+ * @param props
+ * @returns
+ */
+export const NodeRenderer = (props) => {
+    const { nodes, connections, updateConnections, highlightedNode } = props;
+    // Store the nodes positions
+    const [pos, setPos] = useState({});
+    const [selectedLine, setSelectedLine] = useState(null);
+    const [selectedNode, setSelectedNode] = useState(null);
+    const updatePos = (id, x, y) => {
+        setPos((currentPos) => {
+            const currPos = currentPos[id] || { x: 0, y: 0 };
+            currentPos[id] = { x: currPos.x + x, y: currPos.y + y };
+            return { ...currentPos };
+        });
+    };
+    const onNodesConnected = (sourceId, targetId) => {
+        updateConnections(sourceId, targetId);
+    };
+    const onLineSelected = (lineId) => {
+        setSelectedLine(lineId);
+        setSelectedNode(null);
+    };
+    const onNodeSelected = (nodeId) => {
+        setSelectedNode(nodeId);
+        setSelectedLine(null);
+    };
+    useEffect(() => {
+        props.selectNode && props.selectNode(selectedNode);
+    }, [selectedNode]);
+    const onKeyDown = (evt) => {
+        if (evt.key === "Delete") {
+            if (selectedLine) {
+                props.deleteLine(selectedLine);
+            }
+            else if (selectedNode) {
+                props.deleteNode(selectedNode);
+            }
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [selectedLine, selectedNode]);
+    const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);
+    return (_jsx("div", { style: fullscreenStyle, children: _jsx(GraphContextManager.Provider, { value: graphContext, children: _jsxs(GraphContainer, { children: [_jsx(GraphNodesContainer, { id: props.id, onNodeMoved: updatePos, children: nodes.map(({ id, label, customData }) => {
+                            const posInRecord = pos[id] || { x: 0, y: 0 };
+                            const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];
+                            return (_jsx(GraphNode, { parentContainerId: props.id, id: id, name: label, x: posInRecord.x, y: posInRecord.y, selected: id === selectedNode, highlighted: id === highlightedNode, children: CustomComponent && _jsx(CustomComponent, { ...customData.value }) }, id));
+                        }) }), _jsx(GraphLinesContainer, { id: props.id, children: connections.map(({ id, sourceId, targetId }) => {
+                            const sourcePos = pos[sourceId] || { x: 0, y: 0 };
+                            const targetPos = pos[targetId] || { x: 0, y: 0 };
+                            return _jsx(GraphLine, { id: id, x1: sourcePos.x, y1: sourcePos.y, x2: targetPos.x, y2: targetPos.y, selected: id === selectedLine }, id);
+                        }) })] }) }) }));
+};
+//# sourceMappingURL=NodeRenderer.js.map

package/components/reactGraphSystem/NodeRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { GraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst fullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\nexport type ICustomDataType = { type: string; value: any };\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n    /**\r\n     * array of connections between nodes\r\n     */\r\n    connections: IConnectionType[];\r\n    /**\r\n     * function called when a new connection is created\r\n     */\r\n    updateConnections: (sourceId: string, targetId: string) => void;\r\n    /**\r\n     * function called when a connection is deleted\r\n     */\r\n    deleteLine: (lineId: string) => void;\r\n    /**\r\n     * function called when a node is deleted\r\n     */\r\n    deleteNode: (nodeId: string) => void;\r\n    /**\r\n     * array of all nodes\r\n     */\r\n    nodes: INodeType[];\r\n    /**\r\n     * id of the node to highlight\r\n     */\r\n    highlightedNode?: Nullable<string>;\r\n    /**\r\n     * function to be called if a node is selected\r\n     */\r\n    selectNode?: (nodeId: Nullable<string>) => void;\r\n    /**\r\n     * id of this renderer\r\n     */\r\n    id: string;\r\n    /**\r\n     * optional list of custom components to be rendered inside nodes of\r\n     * a certain type\r\n     */\r\n    customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: INodeRendererProps) => {\r\n    const { nodes, connections, updateConnections, highlightedNode } = props;\r\n    // Store the nodes positions\r\n    const [pos, setPos] = useState<IVisualRecordsType>({});\r\n    const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n    const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n    const updatePos = (id: string, x: number, y: number) => {\r\n        setPos((currentPos) => {\r\n            const currPos = currentPos[id] || { x: 0, y: 0 };\r\n            currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n            return { ...currentPos };\r\n        });\r\n    };\r\n\r\n    const onNodesConnected = (sourceId: string, targetId: string) => {\r\n        updateConnections(sourceId, targetId);\r\n    };\r\n\r\n    const onLineSelected = (lineId: string) => {\r\n        setSelectedLine(lineId);\r\n        setSelectedNode(null);\r\n    };\r\n\r\n    const onNodeSelected = (nodeId: string) => {\r\n        setSelectedNode(nodeId);\r\n        setSelectedLine(null);\r\n    };\r\n\r\n    useEffect(() => {\r\n        props.selectNode && props.selectNode(selectedNode);\r\n    }, [selectedNode]);\r\n\r\n    const onKeyDown = (evt: KeyboardEvent) => {\r\n        if (evt.key === \"Delete\") {\r\n            if (selectedLine) {\r\n                props.deleteLine(selectedLine);\r\n            } else if (selectedNode) {\r\n                props.deleteNode(selectedNode);\r\n            }\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        document.addEventListener(\"keydown\", onKeyDown);\r\n        return () => {\r\n            document.removeEventListener(\"keydown\", onKeyDown);\r\n        };\r\n    }, [selectedLine, selectedNode]);\r\n\r\n    const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n    return (\r\n        <div style={fullscreenStyle}>\r\n            <GraphContextManager.Provider value={graphContext}>\r\n                <GraphContainer>\r\n                    <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n                        {nodes.map(({ id, label, customData }) => {\r\n                            const posInRecord = pos[id] || { x: 0, y: 0 };\r\n                            const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n                            return (\r\n                                <GraphNode\r\n                                    parentContainerId={props.id}\r\n                                    key={id}\r\n                                    id={id}\r\n                                    name={label}\r\n                                    x={posInRecord.x}\r\n                                    y={posInRecord.y}\r\n                                    selected={id === selectedNode}\r\n                                    highlighted={id === highlightedNode}\r\n                                >\r\n                                    {CustomComponent && <CustomComponent {...customData.value} />}\r\n                                </GraphNode>\r\n                            );\r\n                        })}\r\n                    </GraphNodesContainer>\r\n                    <GraphLinesContainer id={props.id}>\r\n                        {connections.map(({ id, sourceId, targetId }) => {\r\n                            const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n                            const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n                            return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n                        })}\r\n                    </GraphLinesContainer>\r\n                </GraphContainer>\r\n            </GraphContextManager.Provider>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/useGraphContext.d.ts

@@ -0,0 +1,5 @@
+/**
+ * utility hook to assist using the graph context
+ * @returns
+ */
+export declare const useGraphContext: () => import("./GraphContextManager").IGraphContext;

package/components/reactGraphSystem/useGraphContext.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { GraphContextManager } from "./GraphContextManager.js";
+/**
+ * utility hook to assist using the graph context
+ * @returns
+ */
+export const useGraphContext = () => {
+    const context = useContext(GraphContextManager);
+    return context;
+};
+//# sourceMappingURL=useGraphContext.js.map

package/components/reactGraphSystem/useGraphContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGraphContext.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/useGraphContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import { useContext } from \"react\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\n\r\n/**\r\n * utility hook to assist using the graph context\r\n * @returns\r\n */\r\nexport const useGraphContext = () => {\r\n    const context = useContext(GraphContextManager);\r\n    return context;\r\n};\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/shared-ui-components",
-    "version": "5.32.0",
+    "version": "5.32.2",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",