@babylonjs/shared-ui-components 5.28.0

package/nodeGraphSystem/interfaces/portData.d.ts

@@ -0,0 +1,28 @@
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { GraphNode } from "../graphNode";
+export declare enum PortDataDirection {
+    /** Input */
+    Input = 0,
+    /** Output */
+    Output = 1
+}
+export interface IPortData {
+    data: any;
+    name: string;
+    internalName: string;
+    isExposedOnFrame: boolean;
+    exposedPortPosition: number;
+    isConnected: boolean;
+    direction: PortDataDirection;
+    ownerData: any;
+    connectedPort: Nullable<IPortData>;
+    needDualDirectionValidation: boolean;
+    hasEndpoints: boolean;
+    endpoints: Nullable<IPortData[]>;
+    updateDisplayName: (newName: string) => void;
+    canConnectTo: (port: IPortData) => boolean;
+    connectTo: (port: IPortData) => void;
+    disconnectFrom: (port: IPortData) => void;
+    checkCompatibilityState(port: IPortData): number;
+    getCompatibilityIssueMessage(issue: number, targetNode: GraphNode, targetPort: IPortData): string;
+}

package/nodeGraphSystem/interfaces/portData.js

@@ -0,0 +1,8 @@
+export var PortDataDirection;
+(function (PortDataDirection) {
+    /** Input */
+    PortDataDirection[PortDataDirection["Input"] = 0] = "Input";
+    /** Output */
+    PortDataDirection[PortDataDirection["Output"] = 1] = "Output";
+})(PortDataDirection || (PortDataDirection = {}));
+//# sourceMappingURL=portData.js.map

package/nodeGraphSystem/interfaces/portData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portData.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/portData.ts"],"names":[],"mappings":"AAGA,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IACzB,YAAY;IACZ,2DAAK,CAAA;IACL,aAAa;IACb,6DAAM,CAAA;AACV,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { GraphNode } from \"../graphNode\";\r\n\r\nexport enum PortDataDirection {\r\n    /** Input */\r\n    Input,\r\n    /** Output */\r\n    Output,\r\n}\r\n\r\nexport interface IPortData {\r\n    data: any;\r\n    name: string;\r\n    internalName: string;\r\n    isExposedOnFrame: boolean;\r\n    exposedPortPosition: number;\r\n    isConnected: boolean;\r\n    direction: PortDataDirection;\r\n    ownerData: any;\r\n    connectedPort: Nullable<IPortData>;\r\n    needDualDirectionValidation: boolean;\r\n    hasEndpoints: boolean;\r\n    endpoints: Nullable<IPortData[]>;\r\n\r\n    updateDisplayName: (newName: string) => void;\r\n    canConnectTo: (port: IPortData) => boolean;\r\n    connectTo: (port: IPortData) => void;\r\n    disconnectFrom: (port: IPortData) => void;\r\n    checkCompatibilityState(port: IPortData): number;\r\n    getCompatibilityIssueMessage(issue: number, targetNode: GraphNode, targetPort: IPortData): string;\r\n}\r\n"]}

package/nodeGraphSystem/interfaces/propertyComponentProps.d.ts

@@ -0,0 +1,6 @@
+import type { StateManager } from "../stateManager";
+import type { INodeData } from "./nodeData";
+export interface IPropertyComponentProps {
+    stateManager: StateManager;
+    nodeData: INodeData;
+}

package/nodeGraphSystem/interfaces/propertyComponentProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=propertyComponentProps.js.map

package/nodeGraphSystem/interfaces/propertyComponentProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propertyComponentProps.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/propertyComponentProps.ts"],"names":[],"mappings":"","sourcesContent":["import type { StateManager } from \"../stateManager\";\r\nimport type { INodeData } from \"./nodeData\";\r\n\r\nexport interface IPropertyComponentProps {\r\n    stateManager: StateManager;\r\n    nodeData: INodeData;\r\n}\r\n"]}

package/nodeGraphSystem/interfaces/selectionChangedOptions.d.ts

@@ -0,0 +1,11 @@
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { GraphFrame } from "../graphFrame";
+import type { GraphNode } from "../graphNode";
+import type { NodeLink } from "../nodeLink";
+import type { NodePort } from "../nodePort";
+import type { FramePortData } from "../types/framePortData";
+export interface ISelectionChangedOptions {
+    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;
+    forceKeepSelection?: boolean;
+    marqueeSelection?: boolean;
+}

package/nodeGraphSystem/interfaces/selectionChangedOptions.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=selectionChangedOptions.js.map

package/nodeGraphSystem/interfaces/selectionChangedOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionChangedOptions.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/selectionChangedOptions.ts"],"names":[],"mappings":"","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { GraphFrame } from \"../graphFrame\";\r\nimport type { GraphNode } from \"../graphNode\";\r\n\r\nimport type { NodeLink } from \"../nodeLink\";\r\nimport type { NodePort } from \"../nodePort\";\r\nimport type { FramePortData } from \"../types/framePortData\";\r\n\r\nexport interface ISelectionChangedOptions {\r\n    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;\r\n    forceKeepSelection?: boolean;\r\n    marqueeSelection?: boolean;\r\n}\r\n"]}

package/nodeGraphSystem/nodeLink.d.ts

@@ -0,0 +1,31 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { FrameNodePort } from "./frameNodePort";
+import type { NodePort } from "./nodePort";
+import type { GraphNode } from "./graphNode";
+import type { GraphCanvasComponent } from "./graphCanvas";
+export declare class NodeLink {
+    private _graphCanvas;
+    private _portA;
+    private _portB?;
+    private _nodeA;
+    private _nodeB?;
+    private _path;
+    private _selectionPath;
+    private _onSelectionChangedObserver;
+    private _isVisible;
+    private _isTargetCandidate;
+    onDisposedObservable: Observable<NodeLink>;
+    get isTargetCandidate(): boolean;
+    set isTargetCandidate(value: boolean);
+    get isVisible(): boolean;
+    set isVisible(value: boolean);
+    get portA(): FrameNodePort | NodePort;
+    get portB(): FrameNodePort | NodePort | undefined;
+    get nodeA(): GraphNode;
+    get nodeB(): GraphNode | undefined;
+    intersectsWith(rect: DOMRect): boolean;
+    update(endX?: number, endY?: number, straight?: boolean): void;
+    constructor(graphCanvas: GraphCanvasComponent, portA: NodePort, nodeA: GraphNode, portB?: NodePort, nodeB?: GraphNode);
+    onClick(evt: MouseEvent): void;
+    dispose(notify?: boolean): void;
+}

package/nodeGraphSystem/nodeLink.js

@@ -0,0 +1,183 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { RefreshNode } from "./tools.js";
+import commonStyles from "./common.modules.scss";
+import styles from "./nodeLink.modules.scss";
+export class NodeLink {
+    constructor(graphCanvas, portA, nodeA, portB, nodeB) {
+        this._isVisible = true;
+        this._isTargetCandidate = false;
+        this.onDisposedObservable = new Observable();
+        this._portA = portA;
+        this._portB = portB;
+        this._nodeA = nodeA;
+        this._nodeB = nodeB;
+        this._graphCanvas = graphCanvas;
+        const document = portA.element.ownerDocument;
+        const svg = graphCanvas.svgCanvas;
+        // Create path
+        this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._path.setAttribute("fill", "none");
+        this._path.classList.add(styles["link"]);
+        svg.appendChild(this._path);
+        this._selectionPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._selectionPath.setAttribute("fill", "none");
+        this._selectionPath.classList.add(styles["selection-link"]);
+        svg.appendChild(this._selectionPath);
+        this._selectionPath.onmousedown = (evt) => this.onClick(evt);
+        if (this._portB) {
+            // Update
+            this.update();
+        }
+        this._onSelectionChangedObserver = this._graphCanvas.stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection } = options || {};
+            if (selection === this) {
+                this._path.classList.add(styles["selected"]);
+                this._selectionPath.classList.add(styles["selected"]);
+            }
+            else {
+                this._path.classList.remove(styles["selected"]);
+                this._selectionPath.classList.remove(styles["selected"]);
+            }
+        });
+    }
+    get isTargetCandidate() {
+        return this._isTargetCandidate;
+    }
+    set isTargetCandidate(value) {
+        if (this._isTargetCandidate === value) {
+            return;
+        }
+        this._isTargetCandidate = value;
+        if (value) {
+            this._path.classList.add(styles["target-candidate"]);
+        }
+        else {
+            this._path.classList.remove(styles["target-candidate"]);
+        }
+    }
+    get isVisible() {
+        return this._isVisible;
+    }
+    set isVisible(value) {
+        this._isVisible = value;
+        if (!value) {
+            this._path.classList.add(commonStyles["hidden"]);
+            this._selectionPath.classList.add(commonStyles["hidden"]);
+        }
+        else {
+            this._path.classList.remove(commonStyles["hidden"]);
+            this._selectionPath.classList.remove(commonStyles["hidden"]);
+        }
+        this.update();
+    }
+    get portA() {
+        return this._portA;
+    }
+    get portB() {
+        return this._portB;
+    }
+    get nodeA() {
+        return this._nodeA;
+    }
+    get nodeB() {
+        return this._nodeB;
+    }
+    intersectsWith(rect) {
+        const locatRect = this._path.getBoundingClientRect();
+        if (rect.left > locatRect.right || rect.right < locatRect.left || rect.top > locatRect.bottom || rect.bottom < locatRect.top) {
+            return false;
+        }
+        const svg = this._graphCanvas.svgCanvas;
+        const rootRect = svg.getBoundingClientRect();
+        const left = rect.x - rootRect.x;
+        const top = rect.y - rootRect.y;
+        const right = left + rect.width;
+        const bottom = top + rect.height;
+        const sampleRate = 10; // Checking 10 times on the path should be enough
+        for (let index = 0; index < 1; index += 1 / sampleRate) {
+            const point = this._path.getPointAtLength(index * this._path.getTotalLength());
+            if (left < point.x && right > point.x && top < point.y && bottom > point.y) {
+                return true;
+            }
+        }
+        return false;
+    }
+    update(endX = 0, endY = 0, straight = false) {
+        const rectA = this._portA.element.getBoundingClientRect();
+        const rootRect = this._graphCanvas.canvasContainer.getBoundingClientRect();
+        const zoom = this._graphCanvas.zoom;
+        const xOffset = rootRect.left;
+        const yOffset = rootRect.top;
+        const startX = (rectA.left - xOffset + 0.5 * rectA.width) / zoom;
+        const startY = (rectA.top - yOffset + 0.5 * rectA.height) / zoom;
+        if (this._portB) {
+            const rectB = this._portB.element.getBoundingClientRect();
+            endX = (rectB.left - xOffset + 0.5 * rectB.width) / zoom;
+            endY = (rectB.top - yOffset + 0.5 * rectB.height) / zoom;
+        }
+        if (straight) {
+            this._path.setAttribute("d", `M${startX},${startY} L${endX},${endY}`);
+            this._path.setAttribute("stroke-dasharray", "10, 10");
+            this._path.setAttribute("stroke-linecap", "round");
+        }
+        else {
+            const deltaX = endX - startX;
+            const deltaY = endY - startY;
+            const tangentLength = Math.min(Math.sqrt(deltaX * deltaX + deltaY * deltaY) * 0.5, 300);
+            this._path.setAttribute("d", `M${startX},${startY} C${startX + tangentLength},${startY} ${endX - tangentLength},${endY} ${endX},${endY}`);
+            this._selectionPath.setAttribute("d", `M${startX},${startY} C${startX + tangentLength},${startY} ${endX - tangentLength},${endY} ${endX},${endY}`);
+        }
+        this._path.setAttribute("stroke", this._portA.element.style.backgroundColor);
+    }
+    onClick(evt) {
+        const stateManager = this._graphCanvas.stateManager;
+        if (evt.altKey) {
+            const nodeA = this._nodeA;
+            const pointA = this._portA.portData;
+            const nodeB = this._nodeB;
+            const pointB = this._portB.portData;
+            if (!stateManager.isElbowConnectionAllowed(this._portA, this._portB)) {
+                return;
+            }
+            // Create an elbow at the clicked location
+            stateManager.onNewNodeCreatedObservable.addOnce((newNode) => {
+                const newElbowBlock = newNode.content.data;
+                // Delete previous link
+                this.dispose();
+                // Connect to Elbow block
+                this._graphCanvas.connectNodes(nodeA, pointA, newNode, newNode.getPortDataForPortDataContent(newElbowBlock.input));
+                this._graphCanvas.connectNodes(newNode, newNode.getPortDataForPortDataContent(newElbowBlock.output), nodeB, pointB);
+                stateManager.onRebuildRequiredObservable.notifyObservers(true);
+            });
+            stateManager.onNewBlockRequiredObservable.notifyObservers({
+                type: "ElbowBlock",
+                targetX: evt.clientX,
+                targetY: evt.clientY,
+                needRepositioning: true,
+            });
+            return;
+        }
+        stateManager.onSelectionChangedObservable.notifyObservers({ selection: this });
+    }
+    dispose(notify = true) {
+        this._graphCanvas.stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+        if (this._path.parentElement) {
+            this._path.parentElement.removeChild(this._path);
+        }
+        if (this._selectionPath.parentElement) {
+            this._selectionPath.parentElement.removeChild(this._selectionPath);
+        }
+        if (this._nodeB) {
+            this._nodeA.links.splice(this._nodeA.links.indexOf(this), 1);
+            this._nodeB.links.splice(this._nodeB.links.indexOf(this), 1);
+            this._graphCanvas.links.splice(this._graphCanvas.links.indexOf(this), 1);
+            this._portA.portData.disconnectFrom(this._portB.portData);
+            RefreshNode(this._nodeB);
+        }
+        if (notify) {
+            this.onDisposedObservable.notifyObservers(this);
+            this.onDisposedObservable.clear();
+        }
+    }
+}
+//# sourceMappingURL=nodeLink.js.map

package/nodeGraphSystem/nodeLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodeLink.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/nodeLink.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { NodePort } from \"./nodePort\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { GraphCanvasComponent } from \"./graphCanvas\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport { RefreshNode } from \"./tools\";\r\nimport commonStyles from \"./common.modules.scss\";\r\nimport styles from \"./nodeLink.modules.scss\";\r\n\r\nexport class NodeLink {\r\n    private _graphCanvas: GraphCanvasComponent;\r\n    private _portA: NodePort | FrameNodePort;\r\n    private _portB?: NodePort | FrameNodePort;\r\n    private _nodeA: GraphNode;\r\n    private _nodeB?: GraphNode;\r\n    private _path: SVGPathElement;\r\n    private _selectionPath: SVGPathElement;\r\n    private _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;\r\n    private _isVisible = true;\r\n    private _isTargetCandidate = false;\r\n\r\n    public onDisposedObservable = new Observable<NodeLink>();\r\n\r\n    public get isTargetCandidate() {\r\n        return this._isTargetCandidate;\r\n    }\r\n\r\n    public set isTargetCandidate(value: boolean) {\r\n        if (this._isTargetCandidate === value) {\r\n            return;\r\n        }\r\n\r\n        this._isTargetCandidate = value;\r\n\r\n        if (value) {\r\n            this._path.classList.add(styles[\"target-candidate\"]);\r\n        } else {\r\n            this._path.classList.remove(styles[\"target-candidate\"]);\r\n        }\r\n    }\r\n\r\n    public get isVisible() {\r\n        return this._isVisible;\r\n    }\r\n\r\n    public set isVisible(value: boolean) {\r\n        this._isVisible = value;\r\n\r\n        if (!value) {\r\n            this._path.classList.add(commonStyles[\"hidden\"]);\r\n            this._selectionPath.classList.add(commonStyles[\"hidden\"]);\r\n        } else {\r\n            this._path.classList.remove(commonStyles[\"hidden\"]);\r\n            this._selectionPath.classList.remove(commonStyles[\"hidden\"]);\r\n        }\r\n\r\n        this.update();\r\n    }\r\n\r\n    public get portA() {\r\n        return this._portA;\r\n    }\r\n\r\n    public get portB() {\r\n        return this._portB;\r\n    }\r\n\r\n    public get nodeA() {\r\n        return this._nodeA;\r\n    }\r\n\r\n    public get nodeB() {\r\n        return this._nodeB;\r\n    }\r\n\r\n    public intersectsWith(rect: DOMRect) {\r\n        const locatRect = this._path.getBoundingClientRect();\r\n        if (rect.left > locatRect.right || rect.right < locatRect.left || rect.top > locatRect.bottom || rect.bottom < locatRect.top) {\r\n            return false;\r\n        }\r\n\r\n        const svg = this._graphCanvas.svgCanvas as any as SVGSVGElement;\r\n        const rootRect = svg.getBoundingClientRect();\r\n\r\n        const left = rect.x - rootRect.x;\r\n        const top = rect.y - rootRect.y;\r\n        const right = left + rect.width;\r\n        const bottom = top + rect.height;\r\n\r\n        const sampleRate = 10; // Checking 10 times on the path should be enough\r\n\r\n        for (let index = 0; index < 1; index += 1 / sampleRate) {\r\n            const point = this._path.getPointAtLength(index * this._path.getTotalLength());\r\n            if (left < point.x && right > point.x && top < point.y && bottom > point.y) {\r\n                return true;\r\n            }\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    public update(endX = 0, endY = 0, straight = false) {\r\n        const rectA = this._portA.element.getBoundingClientRect();\r\n        const rootRect = this._graphCanvas.canvasContainer.getBoundingClientRect();\r\n        const zoom = this._graphCanvas.zoom;\r\n        const xOffset = rootRect.left;\r\n        const yOffset = rootRect.top;\r\n\r\n        const startX = (rectA.left - xOffset + 0.5 * rectA.width) / zoom;\r\n        const startY = (rectA.top - yOffset + 0.5 * rectA.height) / zoom;\r\n\r\n        if (this._portB) {\r\n            const rectB = this._portB.element.getBoundingClientRect();\r\n            endX = (rectB.left - xOffset + 0.5 * rectB.width) / zoom;\r\n            endY = (rectB.top - yOffset + 0.5 * rectB.height) / zoom;\r\n        }\r\n\r\n        if (straight) {\r\n            this._path.setAttribute(\"d\", `M${startX},${startY} L${endX},${endY}`);\r\n            this._path.setAttribute(\"stroke-dasharray\", \"10, 10\");\r\n            this._path.setAttribute(\"stroke-linecap\", \"round\");\r\n        } else {\r\n            const deltaX = endX - startX;\r\n            const deltaY = endY - startY;\r\n            const tangentLength = Math.min(Math.sqrt(deltaX * deltaX + deltaY * deltaY) * 0.5, 300);\r\n            this._path.setAttribute(\"d\", `M${startX},${startY} C${startX + tangentLength},${startY} ${endX - tangentLength},${endY} ${endX},${endY}`);\r\n            this._selectionPath.setAttribute(\"d\", `M${startX},${startY} C${startX + tangentLength},${startY} ${endX - tangentLength},${endY} ${endX},${endY}`);\r\n        }\r\n        this._path.setAttribute(\"stroke\", this._portA.element.style.backgroundColor!);\r\n    }\r\n\r\n    public constructor(graphCanvas: GraphCanvasComponent, portA: NodePort, nodeA: GraphNode, portB?: NodePort, nodeB?: GraphNode) {\r\n        this._portA = portA;\r\n        this._portB = portB;\r\n        this._nodeA = nodeA;\r\n        this._nodeB = nodeB;\r\n        this._graphCanvas = graphCanvas;\r\n\r\n        const document = portA.element.ownerDocument!;\r\n        const svg = graphCanvas.svgCanvas;\r\n\r\n        // Create path\r\n        this._path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\r\n        this._path.setAttribute(\"fill\", \"none\");\r\n        this._path.classList.add(styles[\"link\"]);\r\n\r\n        svg.appendChild(this._path);\r\n\r\n        this._selectionPath = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\r\n        this._selectionPath.setAttribute(\"fill\", \"none\");\r\n        this._selectionPath.classList.add(styles[\"selection-link\"]);\r\n\r\n        svg.appendChild(this._selectionPath);\r\n\r\n        this._selectionPath.onmousedown = (evt: MouseEvent) => this.onClick(evt);\r\n\r\n        if (this._portB) {\r\n            // Update\r\n            this.update();\r\n        }\r\n\r\n        this._onSelectionChangedObserver = this._graphCanvas.stateManager.onSelectionChangedObservable.add((options) => {\r\n            const { selection } = options || {};\r\n            if (selection === this) {\r\n                this._path.classList.add(styles[\"selected\"]);\r\n                this._selectionPath.classList.add(styles[\"selected\"]);\r\n            } else {\r\n                this._path.classList.remove(styles[\"selected\"]);\r\n                this._selectionPath.classList.remove(styles[\"selected\"]);\r\n            }\r\n        });\r\n    }\r\n\r\n    onClick(evt: MouseEvent) {\r\n        const stateManager = this._graphCanvas.stateManager;\r\n        if (evt.altKey) {\r\n            const nodeA = this._nodeA;\r\n            const pointA = this._portA.portData;\r\n            const nodeB = this._nodeB!;\r\n            const pointB = this._portB!.portData;\r\n\r\n            if (!stateManager.isElbowConnectionAllowed(this._portA, this._portB!)) {\r\n                return;\r\n            }\r\n\r\n            // Create an elbow at the clicked location\r\n            stateManager.onNewNodeCreatedObservable.addOnce((newNode) => {\r\n                const newElbowBlock = newNode.content.data as any;\r\n\r\n                // Delete previous link\r\n                this.dispose();\r\n\r\n                // Connect to Elbow block\r\n                this._graphCanvas.connectNodes(nodeA, pointA, newNode, newNode.getPortDataForPortDataContent(newElbowBlock.input)!);\r\n                this._graphCanvas.connectNodes(newNode, newNode.getPortDataForPortDataContent(newElbowBlock.output)!, nodeB, pointB);\r\n\r\n                stateManager.onRebuildRequiredObservable.notifyObservers(true);\r\n            });\r\n\r\n            stateManager.onNewBlockRequiredObservable.notifyObservers({\r\n                type: \"ElbowBlock\",\r\n                targetX: evt.clientX,\r\n                targetY: evt.clientY,\r\n                needRepositioning: true,\r\n            });\r\n            return;\r\n        }\r\n\r\n        stateManager.onSelectionChangedObservable.notifyObservers({ selection: this });\r\n    }\r\n\r\n    public dispose(notify = true) {\r\n        this._graphCanvas.stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n\r\n        if (this._path.parentElement) {\r\n            this._path.parentElement.removeChild(this._path);\r\n        }\r\n\r\n        if (this._selectionPath.parentElement) {\r\n            this._selectionPath.parentElement.removeChild(this._selectionPath);\r\n        }\r\n\r\n        if (this._nodeB) {\r\n            this._nodeA.links.splice(this._nodeA.links.indexOf(this), 1);\r\n            this._nodeB.links.splice(this._nodeB.links.indexOf(this), 1);\r\n            this._graphCanvas.links.splice(this._graphCanvas.links.indexOf(this), 1);\r\n\r\n            this._portA.portData.disconnectFrom(this._portB!.portData);\r\n\r\n            RefreshNode(this._nodeB);\r\n        }\r\n\r\n        if (notify) {\r\n            this.onDisposedObservable.notifyObservers(this);\r\n\r\n            this.onDisposedObservable.clear();\r\n        }\r\n    }\r\n}\r\n"]}

package/nodeGraphSystem/nodePort.d.ts

@@ -0,0 +1,35 @@
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { Observer } from "@babylonjs/core/Misc/observable.js";
+import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import type { GraphNode } from "./graphNode";
+import type { StateManager } from "./stateManager";
+import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
+import type { FrameNodePort } from "./frameNodePort";
+import type { IDisplayManager } from "./interfaces/displayManager";
+import type { IPortData } from "./interfaces/portData";
+export declare class NodePort {
+    portData: IPortData;
+    node: GraphNode;
+    protected _element: HTMLDivElement;
+    protected _img: HTMLImageElement;
+    protected _stateManager: StateManager;
+    protected _portLabelElement: Element;
+    protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
+    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;
+    protected _exposedOnFrame: boolean;
+    delegatedPort: Nullable<FrameNodePort>;
+    get element(): HTMLDivElement;
+    get portName(): string;
+    set portName(newName: string);
+    get disabled(): boolean;
+    hasLabel(): boolean;
+    get exposedOnFrame(): boolean;
+    set exposedOnFrame(value: boolean);
+    get exposedPortPosition(): number;
+    set exposedPortPosition(value: number);
+    private _isConnectedToNodeOutsideOfFrame;
+    refresh(): void;
+    constructor(portContainer: HTMLElement, portData: IPortData, node: GraphNode, stateManager: StateManager);
+    dispose(): void;
+    static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager): NodePort;
+}

package/nodeGraphSystem/nodePort.js

@@ -0,0 +1,129 @@
+import commonStyles from "./common.modules.scss";
+import localStyles from "./nodePort.modules.scss";
+export class NodePort {
+    constructor(portContainer, portData, node, stateManager) {
+        this.portData = portData;
+        this.node = node;
+        this.delegatedPort = null;
+        this._element = portContainer.ownerDocument.createElement("div");
+        this._element.classList.add(commonStyles.port);
+        portContainer.appendChild(this._element);
+        this._stateManager = stateManager;
+        this._img = portContainer.ownerDocument.createElement("img");
+        this._element.appendChild(this._img);
+        // determine if node name is editable
+        if (portContainer.children[0].className === commonStyles["port-label"]) {
+            this._portLabelElement = portContainer.children[0];
+        }
+        this._element.port = this;
+        // Drag support
+        this._element.ondragstart = () => false;
+        this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {
+            const rect = this._element.getBoundingClientRect();
+            if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {
+                this._element.classList.remove(localStyles["selected"]);
+                return;
+            }
+            this._element.classList.add(localStyles["selected"]);
+            this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);
+        });
+        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection } = options || {};
+            if (selection === this) {
+                this._img.classList.add(localStyles["selected"]);
+            }
+            else {
+                this._img.classList.remove(localStyles["selected"]);
+            }
+        });
+        this.refresh();
+    }
+    get element() {
+        if (this.delegatedPort) {
+            return this.delegatedPort.element;
+        }
+        return this._element;
+    }
+    get portName() {
+        return this.portData.name;
+    }
+    set portName(newName) {
+        if (this._portLabelElement) {
+            this.portData.updateDisplayName(newName);
+            this._portLabelElement.innerHTML = newName;
+        }
+    }
+    get disabled() {
+        if (!this.portData.isConnected) {
+            return false;
+        }
+        else if (this._isConnectedToNodeOutsideOfFrame()) {
+            //connected to outside node
+            return true;
+        }
+        else {
+            const link = this.node.getLinksForPortData(this.portData);
+            if (link.length) {
+                if (link[0].nodeB === this.node) {
+                    // check if this node is the receiving
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    hasLabel() {
+        return !!this._portLabelElement;
+    }
+    get exposedOnFrame() {
+        if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
+            return true;
+        }
+        return false;
+    }
+    set exposedOnFrame(value) {
+        if (this.disabled) {
+            return;
+        }
+        this.portData.isExposedOnFrame = value;
+    }
+    get exposedPortPosition() {
+        return this.portData.exposedPortPosition;
+    }
+    set exposedPortPosition(value) {
+        this.portData.exposedPortPosition = value;
+    }
+    _isConnectedToNodeOutsideOfFrame() {
+        const link = this.node.getLinksForPortData(this.portData);
+        if (link.length) {
+            for (let i = 0; i < link.length; i++) {
+                if (link[i].nodeA.enclosingFrameId !== link[i].nodeB.enclosingFrameId) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    refresh() {
+        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
+    }
+    dispose() {
+        this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);
+        if (this._onSelectionChangedObserver) {
+            this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+        }
+    }
+    static CreatePortElement(portData, node, root, displayManager, stateManager) {
+        const portContainer = root.ownerDocument.createElement("div");
+        portContainer.classList.add(commonStyles.portLine);
+        root.appendChild(portContainer);
+        if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {
+            const portLabel = root.ownerDocument.createElement("div");
+            portLabel.classList.add(commonStyles["port-label"]);
+            portLabel.innerHTML = portData.name;
+            portContainer.appendChild(portLabel);
+        }
+        return new NodePort(portContainer, portData, node, stateManager);
+    }
+}
+//# sourceMappingURL=nodePort.js.map

package/nodeGraphSystem/nodePort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodePort.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { StateManager } from \"./stateManager\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { IDisplayManager } from \"./interfaces/displayManager\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport commonStyles from \"./common.modules.scss\";\r\nimport localStyles from \"./nodePort.modules.scss\";\r\n\r\nexport class NodePort {\r\n    protected _element: HTMLDivElement;\r\n    protected _img: HTMLImageElement;\r\n    protected _stateManager: StateManager;\r\n    protected _portLabelElement: Element;\r\n    protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;\r\n    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;\r\n    protected _exposedOnFrame: boolean;\r\n    public delegatedPort: Nullable<FrameNodePort> = null;\r\n\r\n    public get element(): HTMLDivElement {\r\n        if (this.delegatedPort) {\r\n            return this.delegatedPort.element;\r\n        }\r\n\r\n        return this._element;\r\n    }\r\n\r\n    public get portName() {\r\n        return this.portData.name;\r\n    }\r\n\r\n    public set portName(newName: string) {\r\n        if (this._portLabelElement) {\r\n            this.portData.updateDisplayName(newName);\r\n            this._portLabelElement.innerHTML = newName;\r\n        }\r\n    }\r\n\r\n    public get disabled() {\r\n        if (!this.portData.isConnected) {\r\n            return false;\r\n        } else if (this._isConnectedToNodeOutsideOfFrame()) {\r\n            //connected to outside node\r\n            return true;\r\n        } else {\r\n            const link = this.node.getLinksForPortData(this.portData);\r\n            if (link.length) {\r\n                if (link[0].nodeB === this.node) {\r\n                    // check if this node is the receiving\r\n                    return true;\r\n                }\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public hasLabel() {\r\n        return !!this._portLabelElement;\r\n    }\r\n\r\n    public get exposedOnFrame() {\r\n        if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public set exposedOnFrame(value: boolean) {\r\n        if (this.disabled) {\r\n            return;\r\n        }\r\n        this.portData.isExposedOnFrame = value;\r\n    }\r\n\r\n    public get exposedPortPosition() {\r\n        return this.portData.exposedPortPosition;\r\n    }\r\n\r\n    public set exposedPortPosition(value: number) {\r\n        this.portData.exposedPortPosition = value;\r\n    }\r\n\r\n    private _isConnectedToNodeOutsideOfFrame() {\r\n        const link = this.node.getLinksForPortData(this.portData);\r\n        if (link.length) {\r\n            for (let i = 0; i < link.length; i++) {\r\n                if (link[i].nodeA.enclosingFrameId !== link[i].nodeB!.enclosingFrameId) {\r\n                    return true;\r\n                }\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public refresh() {\r\n        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);\r\n    }\r\n\r\n    public constructor(portContainer: HTMLElement, public portData: IPortData, public node: GraphNode, stateManager: StateManager) {\r\n        this._element = portContainer.ownerDocument!.createElement(\"div\");\r\n        this._element.classList.add(commonStyles.port);\r\n        portContainer.appendChild(this._element);\r\n        this._stateManager = stateManager;\r\n\r\n        this._img = portContainer.ownerDocument!.createElement(\"img\");\r\n        this._element.appendChild(this._img);\r\n\r\n        // determine if node name is editable\r\n        if (portContainer.children[0].className === commonStyles[\"port-label\"]) {\r\n            this._portLabelElement = portContainer.children[0];\r\n        }\r\n\r\n        (this._element as any).port = this;\r\n\r\n        // Drag support\r\n        this._element.ondragstart = () => false;\r\n\r\n        this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {\r\n            const rect = this._element.getBoundingClientRect();\r\n\r\n            if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {\r\n                this._element.classList.remove(localStyles[\"selected\"]);\r\n                return;\r\n            }\r\n\r\n            this._element.classList.add(localStyles[\"selected\"]);\r\n            this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);\r\n        });\r\n\r\n        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {\r\n            const { selection } = options || {};\r\n            if (selection === this) {\r\n                this._img.classList.add(localStyles[\"selected\"]);\r\n            } else {\r\n                this._img.classList.remove(localStyles[\"selected\"]);\r\n            }\r\n        });\r\n\r\n        this.refresh();\r\n    }\r\n\r\n    public dispose() {\r\n        this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);\r\n\r\n        if (this._onSelectionChangedObserver) {\r\n            this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n        }\r\n    }\r\n\r\n    public static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager) {\r\n        const portContainer = root.ownerDocument!.createElement(\"div\");\r\n\r\n        portContainer.classList.add(commonStyles.portLine);\r\n\r\n        root.appendChild(portContainer);\r\n\r\n        if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {\r\n            const portLabel = root.ownerDocument!.createElement(\"div\");\r\n            portLabel.classList.add(commonStyles[\"port-label\"]);\r\n            portLabel.innerHTML = portData.name;\r\n            portContainer.appendChild(portLabel);\r\n        }\r\n\r\n        return new NodePort(portContainer, portData, node, stateManager);\r\n    }\r\n}\r\n"]}

package/nodeGraphSystem/propertyLedger.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentClass } from "react";
+import type { IPropertyComponentProps } from "./interfaces/propertyComponentProps";
+export declare class PropertyLedger {
+    static DefaultControl: ComponentClass<IPropertyComponentProps>;
+    static RegisteredControls: {
+        [key: string]: ComponentClass<IPropertyComponentProps>;
+    };
+}

package/nodeGraphSystem/propertyLedger.js

@@ -0,0 +1,4 @@
+export class PropertyLedger {
+}
+PropertyLedger.RegisteredControls = {};
+//# sourceMappingURL=propertyLedger.js.map

package/nodeGraphSystem/propertyLedger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propertyLedger.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/propertyLedger.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,cAAc;;AAET,iCAAkB,GAA+D,EAAE,CAAC","sourcesContent":["import type { ComponentClass } from \"react\";\r\nimport type { IPropertyComponentProps } from \"./interfaces/propertyComponentProps\";\r\n\r\nexport class PropertyLedger {\r\n    public static DefaultControl: ComponentClass<IPropertyComponentProps>;\r\n    public static RegisteredControls: { [key: string]: ComponentClass<IPropertyComponentProps> } = {};\r\n}\r\n"]}

package/nodeGraphSystem/stateManager.d.ts

@@ -0,0 +1,45 @@
+import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { FrameNodePort } from "./frameNodePort";
+import type { GraphFrame } from "./graphFrame";
+import type { GraphNode } from "./graphNode";
+import type { INodeContainer } from "./interfaces/nodeContainer";
+import type { INodeData } from "./interfaces/nodeData";
+import type { IPortData } from "./interfaces/portData";
+import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
+import type { NodePort } from "./nodePort";
+export declare class StateManager {
+    data: any;
+    hostDocument: Document;
+    lockObject: any;
+    onSelectionChangedObservable: Observable<Nullable<ISelectionChangedOptions>>;
+    onFrameCreatedObservable: Observable<GraphFrame>;
+    onUpdateRequiredObservable: Observable<any>;
+    onGraphNodeRemovalObservable: Observable<GraphNode>;
+    onSelectionBoxMoved: Observable<DOMRect | ClientRect>;
+    onCandidateLinkMoved: Observable<Nullable<Vector2>>;
+    onCandidatePortSelectedObservable: Observable<Nullable<FrameNodePort | NodePort>>;
+    onNewNodeCreatedObservable: Observable<GraphNode>;
+    onRebuildRequiredObservable: Observable<boolean>;
+    onErrorMessageDialogRequiredObservable: Observable<string>;
+    onExposePortOnFrameObservable: Observable<GraphNode>;
+    onGridSizeChanged: Observable<void>;
+    onNewBlockRequiredObservable: Observable<{
+        type: string;
+        targetX: number;
+        targetY: number;
+        needRepositioning?: boolean | undefined;
+    }>;
+    exportData: (data: any, frame?: Nullable<GraphFrame>) => string;
+    isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
+    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => void;
+    storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;
+    getEditorDataMap: () => {
+        [key: number]: number;
+    };
+    createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{
+        data: INodeData;
+        name: string;
+    }>;
+}

package/nodeGraphSystem/stateManager.js

@@ -0,0 +1,19 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+export class StateManager {
+    constructor() {
+        this.onSelectionChangedObservable = new Observable();
+        this.onFrameCreatedObservable = new Observable();
+        this.onUpdateRequiredObservable = new Observable();
+        this.onGraphNodeRemovalObservable = new Observable();
+        this.onSelectionBoxMoved = new Observable();
+        this.onCandidateLinkMoved = new Observable();
+        this.onCandidatePortSelectedObservable = new Observable();
+        this.onNewNodeCreatedObservable = new Observable();
+        this.onRebuildRequiredObservable = new Observable();
+        this.onErrorMessageDialogRequiredObservable = new Observable();
+        this.onExposePortOnFrameObservable = new Observable();
+        this.onGridSizeChanged = new Observable();
+        this.onNewBlockRequiredObservable = new Observable();
+    }
+}
+//# sourceMappingURL=stateManager.js.map

package/nodeGraphSystem/stateManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateManager.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/stateManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAWlD,MAAM,OAAO,YAAY;IAAzB;QAKI,iCAA4B,GAAG,IAAI,UAAU,EAAsC,CAAC;QACpF,6BAAwB,GAAG,IAAI,UAAU,EAAc,CAAC;QACxD,+BAA0B,GAAG,IAAI,UAAU,EAAiB,CAAC;QAC7D,iCAA4B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC3D,wBAAmB,GAAG,IAAI,UAAU,EAAwB,CAAC;QAC7D,yBAAoB,GAAG,IAAI,UAAU,EAAqB,CAAC;QAC3D,sCAAiC,GAAG,IAAI,UAAU,EAAsC,CAAC;QACzF,+BAA0B,GAAG,IAAI,UAAU,EAAa,CAAC;QACzD,gCAA2B,GAAG,IAAI,UAAU,EAAW,CAAC;QACxD,2CAAsC,GAAG,IAAI,UAAU,EAAU,CAAC;QAClE,kCAA6B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC5D,sBAAiB,GAAG,IAAI,UAAU,EAAQ,CAAC;QAC3C,iCAA4B,GAAG,IAAI,UAAU,EAAmF,CAAC;IAWrI,CAAC;CAAA","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { GraphFrame } from \"./graphFrame\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { INodeContainer } from \"./interfaces/nodeContainer\";\r\nimport type { INodeData } from \"./interfaces/nodeData\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { NodePort } from \"./nodePort\";\r\n\r\nexport class StateManager {\r\n    data: any;\r\n    hostDocument: Document;\r\n    lockObject: any;\r\n\r\n    onSelectionChangedObservable = new Observable<Nullable<ISelectionChangedOptions>>();\r\n    onFrameCreatedObservable = new Observable<GraphFrame>();\r\n    onUpdateRequiredObservable = new Observable<Nullable<any>>();\r\n    onGraphNodeRemovalObservable = new Observable<GraphNode>();\r\n    onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();\r\n    onCandidateLinkMoved = new Observable<Nullable<Vector2>>();\r\n    onCandidatePortSelectedObservable = new Observable<Nullable<NodePort | FrameNodePort>>();\r\n    onNewNodeCreatedObservable = new Observable<GraphNode>();\r\n    onRebuildRequiredObservable = new Observable<boolean>();\r\n    onErrorMessageDialogRequiredObservable = new Observable<string>();\r\n    onExposePortOnFrameObservable = new Observable<GraphNode>();\r\n    onGridSizeChanged = new Observable<void>();\r\n    onNewBlockRequiredObservable = new Observable<{ type: string; targetX: number; targetY: number; needRepositioning?: boolean }>();\r\n\r\n    exportData: (data: any, frame?: Nullable<GraphFrame>) => string;\r\n    isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => void;\r\n\r\n    storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;\r\n\r\n    getEditorDataMap: () => { [key: number]: number };\r\n\r\n    createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{ data: INodeData; name: string }>;\r\n}\r\n"]}

package/nodeGraphSystem/tools.d.ts

@@ -0,0 +1,5 @@
+import type { GraphNode } from "./graphNode";
+import type { NodeLink } from "./nodeLink";
+import type { FramePortData } from "./types/framePortData";
+export declare const IsFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
+export declare const RefreshNode: (node: GraphNode, visitedNodes?: Set<GraphNode> | undefined, visitedLinks?: Set<NodeLink> | undefined) => void;