@babylonjs/shared-ui-components 5.28.0 → 5.30.0

package/nodeGraphSystem/nodeLink.js

@@ -1,183 +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();
-        }
-    }
-}
+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/nodePort.d.ts

@@ -1,35 +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;
-}
+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;
+}