@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/nodeGraphSystem/graphNode.js

@@ -1,460 +1,460 @@
-import * as React from "react";
-import { NodePort } from "./nodePort.js";
-import { PropertyLedger } from "./propertyLedger.js";
-import { DisplayLedger } from "./displayLedger.js";
-import localStyles from "./graphNode.modules.scss";
-import commonStyles from "./common.modules.scss";
-export class GraphNode {
-    constructor(content, stateManager) {
-        this.content = content;
-        this._inputPorts = [];
-        this._outputPorts = [];
-        this._links = [];
-        this._x = 0;
-        this._y = 0;
-        this._gridAlignedX = 0;
-        this._gridAlignedY = 0;
-        this._mouseStartPointX = null;
-        this._mouseStartPointY = null;
-        this._displayManager = null;
-        this._isVisible = true;
-        this._enclosingFrameId = -1;
-        this._stateManager = stateManager;
-        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
-            const { selection: node } = options || {};
-            if (node === this) {
-                this._visual.classList.add(localStyles["selected"]);
-            }
-            else {
-                setTimeout(() => {
-                    if (this._ownerCanvas.selectedNodes.indexOf(this) === -1) {
-                        this._visual.classList.remove(localStyles["selected"]);
-                    }
-                });
-            }
-        });
-        this._onUpdateRequiredObserver = this._stateManager.onUpdateRequiredObservable.add((data) => {
-            if (data !== this.content.data) {
-                return;
-            }
-            this.refresh();
-        });
-        this._onSelectionBoxMovedObserver = this._stateManager.onSelectionBoxMoved.add((rect1) => {
-            const rect2 = this._visual.getBoundingClientRect();
-            const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
-            this.setIsSelected(overlap, true);
-        });
-        this._onFrameCreatedObserver = this._stateManager.onFrameCreatedObservable.add((frame) => {
-            if (this._ownerCanvas.frames.some((f) => f.nodes.indexOf(this) !== -1)) {
-                return;
-            }
-            if (this.isOverlappingFrame(frame)) {
-                frame.nodes.push(this);
-            }
-        });
-    }
-    get isVisible() {
-        return this._isVisible;
-    }
-    set isVisible(value) {
-        this._isVisible = value;
-        if (!value) {
-            this._visual.classList.add(commonStyles["hidden"]);
-        }
-        else {
-            this._visual.classList.remove(commonStyles["hidden"]);
-            this._upateNodePortNames();
-        }
-        for (const link of this._links) {
-            link.isVisible = value;
-        }
-        this._refreshLinks();
-    }
-    _upateNodePortNames() {
-        for (const port of this._inputPorts.concat(this._outputPorts)) {
-            if (port.hasLabel()) {
-                port.portName = port.portData.name;
-            }
-        }
-    }
-    get outputPorts() {
-        return this._outputPorts;
-    }
-    get inputPorts() {
-        return this._inputPorts;
-    }
-    get links() {
-        return this._links;
-    }
-    get gridAlignedX() {
-        return this._gridAlignedX;
-    }
-    get gridAlignedY() {
-        return this._gridAlignedY;
-    }
-    get x() {
-        return this._x;
-    }
-    set x(value) {
-        if (this._x === value) {
-            return;
-        }
-        this._x = value;
-        this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
-        this._visual.style.left = `${this._gridAlignedX}px`;
-        this._refreshLinks();
-        this._refreshFrames();
-    }
-    get y() {
-        return this._y;
-    }
-    set y(value) {
-        if (this._y === value) {
-            return;
-        }
-        this._y = value;
-        this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
-        this._visual.style.top = `${this._gridAlignedY}px`;
-        this._refreshLinks();
-        this._refreshFrames();
-    }
-    get width() {
-        return this._visual.clientWidth;
-    }
-    get height() {
-        return this._visual.clientHeight;
-    }
-    get id() {
-        return this.content.uniqueId;
-    }
-    get name() {
-        return this.content.name;
-    }
-    get isSelected() {
-        return this._isSelected;
-    }
-    get enclosingFrameId() {
-        return this._enclosingFrameId;
-    }
-    set enclosingFrameId(value) {
-        this._enclosingFrameId = value;
-    }
-    set isSelected(value) {
-        this.setIsSelected(value, false);
-    }
-    setIsSelected(value, marqueeSelection) {
-        if (this._isSelected === value) {
-            return;
-        }
-        this._isSelected = value;
-        if (!value) {
-            this._visual.classList.remove(localStyles["selected"]);
-            const indexInSelection = this._ownerCanvas.selectedNodes.indexOf(this);
-            if (indexInSelection > -1) {
-                this._ownerCanvas.selectedNodes.splice(indexInSelection, 1);
-            }
-        }
-        else {
-            this._stateManager.onSelectionChangedObservable.notifyObservers({ selection: this, marqueeSelection });
-        }
-    }
-    isOverlappingFrame(frame) {
-        const rect2 = this._visual.getBoundingClientRect();
-        const rect1 = frame.element.getBoundingClientRect();
-        // Add a tiny margin
-        rect1.width -= 5;
-        rect1.height -= 5;
-        const isOverlappingFrame = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
-        if (isOverlappingFrame) {
-            this.enclosingFrameId = frame.id;
-        }
-        return isOverlappingFrame;
-    }
-    getPortForPortData(portData) {
-        for (const port of this._inputPorts) {
-            const attachedPoint = port.portData;
-            if (attachedPoint === portData || (attachedPoint.ownerData === portData.ownerData && attachedPoint.internalName === portData.internalName)) {
-                return port;
-            }
-        }
-        for (const port of this._outputPorts) {
-            const attachedPoint = port.portData;
-            if (attachedPoint === portData || (attachedPoint.ownerData === portData.ownerData && attachedPoint.internalName === portData.internalName)) {
-                return port;
-            }
-        }
-        return null;
-    }
-    getPortDataForPortDataContent(data) {
-        for (const port of this._inputPorts) {
-            const attachedPoint = port.portData;
-            if (attachedPoint.data === data) {
-                return attachedPoint;
-            }
-        }
-        for (const port of this._outputPorts) {
-            const attachedPoint = port.portData;
-            if (attachedPoint.data === data) {
-                return attachedPoint;
-            }
-        }
-        return null;
-    }
-    getLinksForPortDataContent(data) {
-        return this._links.filter((link) => link.portA.portData.data === data || link.portB.portData.data === data);
-    }
-    getLinksForPortData(portData) {
-        return this._links.filter((link) => link.portA.portData === portData || link.portB.portData === portData);
-    }
-    _refreshFrames() {
-        if (this._ownerCanvas._frameIsMoving || this._ownerCanvas._isLoading) {
-            return;
-        }
-        // Frames
-        for (const frame of this._ownerCanvas.frames) {
-            frame.syncNode(this);
-        }
-    }
-    _refreshLinks() {
-        if (this._ownerCanvas._isLoading) {
-            return;
-        }
-        for (const link of this._links) {
-            link.update();
-        }
-    }
-    refresh() {
-        if (this._displayManager) {
-            this._header.innerHTML = this._displayManager.getHeaderText(this.content);
-            this._displayManager.updatePreviewContent(this.content, this._content);
-            this._visual.style.background = this._displayManager.getBackgroundColor(this.content);
-            const additionalClass = this._displayManager.getHeaderClass(this.content);
-            this._header.classList.value = localStyles.header;
-            this._headerContainer.classList.value = localStyles["header-container"];
-            if (additionalClass) {
-                this._headerContainer.classList.add(additionalClass);
-            }
-            if (this._displayManager.updateFullVisualContent) {
-                this._displayManager.updateFullVisualContent(this.content, {
-                    visual: this._visual,
-                    header: this._header,
-                    headerContainer: this._headerContainer,
-                    headerIcon: this._headerIcon,
-                    headerIconImg: this._headerIconImg,
-                    comments: this._comments,
-                    connections: this._connections,
-                    inputsContainer: this._inputsContainer,
-                    outputsContainer: this._outputsContainer,
-                    content: this._content,
-                    selectionBorder: this._selectionBorder,
-                });
-            }
-        }
-        else {
-            this._header.innerHTML = this.content.name;
-        }
-        for (const port of this._inputPorts) {
-            port.refresh();
-        }
-        for (const port of this._outputPorts) {
-            port.refresh();
-        }
-        if (this.enclosingFrameId !== -1) {
-            const index = this._ownerCanvas.frames.findIndex((frame) => frame.id === this.enclosingFrameId);
-            if (index >= 0 && this._ownerCanvas.frames[index].isCollapsed) {
-                this._ownerCanvas.frames[index].redrawFramePorts();
-            }
-        }
-        this._comments.innerHTML = this.content.comments || "";
-        this._comments.title = this.content.comments || "";
-        this.content.prepareHeaderIcon(this._headerIcon, this._headerIconImg);
-    }
-    _onDown(evt) {
-        // Check if this is coming from the port
-        if (evt.target && evt.target.nodeName === "IMG") {
-            return;
-        }
-        const indexInSelection = this._ownerCanvas.selectedNodes.indexOf(this);
-        if (indexInSelection === -1) {
-            this._stateManager.onSelectionChangedObservable.notifyObservers({ selection: this });
-        }
-        else if (evt.ctrlKey) {
-            this.setIsSelected(false, false);
-        }
-        evt.stopPropagation();
-        for (const selectedNode of this._ownerCanvas.selectedNodes) {
-            selectedNode.cleanAccumulation();
-        }
-        this._mouseStartPointX = evt.clientX;
-        this._mouseStartPointY = evt.clientY;
-        this._visual.setPointerCapture(evt.pointerId);
-    }
-    cleanAccumulation(useCeil = false) {
-        this.x = this._ownerCanvas.getGridPosition(this.x, useCeil);
-        this.y = this._ownerCanvas.getGridPosition(this.y, useCeil);
-    }
-    _onUp(evt) {
-        evt.stopPropagation();
-        for (const selectedNode of this._ownerCanvas.selectedNodes) {
-            selectedNode.cleanAccumulation();
-        }
-        this._mouseStartPointX = null;
-        this._mouseStartPointY = null;
-        this._visual.releasePointerCapture(evt.pointerId);
-        if (!this._ownerCanvas._targetLinkCandidate) {
-            return;
-        }
-        // Connect the ports
-        const inputs = [];
-        const outputs = [];
-        const availableNodeInputs = [];
-        const availableNodeOutputs = [];
-        const leftNode = this._ownerCanvas._targetLinkCandidate.nodeA;
-        const rightNode = this._ownerCanvas._targetLinkCandidate.nodeB;
-        // Delete previous
-        this._ownerCanvas._targetLinkCandidate.dispose();
-        this._ownerCanvas._targetLinkCandidate = null;
-        // Get the ports
-        availableNodeInputs.push(...this.content.inputs.filter((i) => !i.isConnected));
-        availableNodeOutputs.push(...this.content.outputs);
-        inputs.push(...leftNode.content.outputs);
-        outputs.push(...rightNode.content.inputs.filter((i) => !i.isConnected));
-        // Reconnect
-        this._ownerCanvas.automaticRewire(inputs, availableNodeInputs, true);
-        this._ownerCanvas.automaticRewire(availableNodeOutputs, outputs, true);
-        this._stateManager.onRebuildRequiredObservable.notifyObservers(false);
-    }
-    _onMove(evt) {
-        this._ownerCanvas._targetLinkCandidate = null;
-        if (this._mouseStartPointX === null || this._mouseStartPointY === null || evt.ctrlKey) {
-            return;
-        }
-        // Move
-        const newX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-        const newY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-        for (const selectedNode of this._ownerCanvas.selectedNodes) {
-            selectedNode.x += newX;
-            selectedNode.y += newY;
-        }
-        for (const frame of this._ownerCanvas.selectedFrames) {
-            frame._moveFrame(newX, newY);
-        }
-        this._mouseStartPointX = evt.clientX;
-        this._mouseStartPointY = evt.clientY;
-        evt.stopPropagation();
-        if (this._inputPorts.some((p) => p.portData.isConnected) || this._outputPorts.some((o) => o.portData.hasEndpoints)) {
-            return;
-        }
-        // Check wires that could be underneath
-        const rect = this._visual.getBoundingClientRect();
-        for (const link of this._ownerCanvas.links) {
-            if (link.portA.node === this || link.portB.node === this) {
-                link.isTargetCandidate = false;
-                continue;
-            }
-            link.isTargetCandidate = link.intersectsWith(rect);
-            if (link.isTargetCandidate) {
-                if (this._ownerCanvas._targetLinkCandidate !== link) {
-                    if (this._ownerCanvas._targetLinkCandidate) {
-                        this._ownerCanvas._targetLinkCandidate.isTargetCandidate = false;
-                    }
-                    this._ownerCanvas._targetLinkCandidate = link;
-                }
-            }
-        }
-    }
-    renderProperties() {
-        let control = PropertyLedger.RegisteredControls[this.content.getClassName()];
-        if (!control) {
-            control = PropertyLedger.DefaultControl;
-        }
-        return React.createElement(control, {
-            stateManager: this._stateManager,
-            nodeData: this.content,
-        });
-    }
-    appendVisual(root, owner) {
-        this._ownerCanvas = owner;
-        // Display manager
-        const displayManagerClass = DisplayLedger.RegisteredControls[this.content.getClassName()];
-        if (displayManagerClass) {
-            this._displayManager = new displayManagerClass();
-        }
-        // DOM
-        this._visual = root.ownerDocument.createElement("div");
-        this._visual.classList.add(localStyles.visual);
-        this._visual.addEventListener("pointerdown", (evt) => this._onDown(evt));
-        this._visual.addEventListener("pointerup", (evt) => this._onUp(evt));
-        this._visual.addEventListener("pointermove", (evt) => this._onMove(evt));
-        this._headerContainer = root.ownerDocument.createElement("div");
-        this._headerContainer.classList.add(localStyles["header-container"]);
-        this._visual.appendChild(this._headerContainer);
-        this._header = root.ownerDocument.createElement("div");
-        this._header.classList.add(localStyles.header);
-        this._headerContainer.appendChild(this._header);
-        this._headerIcon = root.ownerDocument.createElement("div");
-        this._headerIcon.classList.add(localStyles.headerIcon);
-        this._headerIconImg = root.ownerDocument.createElement("img");
-        this._headerIcon.appendChild(this._headerIconImg);
-        this._headerContainer.appendChild(this._headerIcon);
-        this._selectionBorder = root.ownerDocument.createElement("div");
-        this._selectionBorder.classList.add("selection-border");
-        this._visual.appendChild(this._selectionBorder);
-        this._connections = root.ownerDocument.createElement("div");
-        this._connections.classList.add(localStyles.connections);
-        this._visual.appendChild(this._connections);
-        this._inputsContainer = root.ownerDocument.createElement("div");
-        this._inputsContainer.classList.add(commonStyles.inputsContainer);
-        this._connections.appendChild(this._inputsContainer);
-        this._outputsContainer = root.ownerDocument.createElement("div");
-        this._outputsContainer.classList.add(commonStyles.outputsContainer);
-        this._connections.appendChild(this._outputsContainer);
-        this._content = root.ownerDocument.createElement("div");
-        this._content.classList.add(localStyles.content);
-        this._visual.appendChild(this._content);
-        root.appendChild(this._visual);
-        // Comments
-        this._comments = root.ownerDocument.createElement("div");
-        this._comments.classList.add(localStyles.comments);
-        this._visual.appendChild(this._comments);
-        // Connections
-        for (const input of this.content.inputs) {
-            this._inputPorts.push(NodePort.CreatePortElement(input, this, this._inputsContainer, this._displayManager, this._stateManager));
-        }
-        for (const output of this.content.outputs) {
-            this._outputPorts.push(NodePort.CreatePortElement(output, this, this._outputsContainer, this._displayManager, this._stateManager));
-        }
-        this.refresh();
-    }
-    dispose() {
-        // notify frame observers that this node is being deleted
-        this._stateManager.onGraphNodeRemovalObservable.notifyObservers(this);
-        if (this._onSelectionChangedObserver) {
-            this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
-        }
-        if (this._onUpdateRequiredObserver) {
-            this._stateManager.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
-        }
-        if (this._onSelectionBoxMovedObserver) {
-            this._stateManager.onSelectionBoxMoved.remove(this._onSelectionBoxMovedObserver);
-        }
-        if (this._visual.parentElement) {
-            this._visual.parentElement.removeChild(this._visual);
-        }
-        if (this._onFrameCreatedObserver) {
-            this._stateManager.onFrameCreatedObservable.remove(this._onFrameCreatedObserver);
-        }
-        for (const port of this._inputPorts) {
-            port.dispose();
-        }
-        for (const port of this._outputPorts) {
-            port.dispose();
-        }
-        const links = this._links.slice(0);
-        for (const link of links) {
-            link.dispose();
-        }
-        this.content.dispose();
-    }
-}
+import * as React from "react";
+import { NodePort } from "./nodePort.js";
+import { PropertyLedger } from "./propertyLedger.js";
+import { DisplayLedger } from "./displayLedger.js";
+import localStyles from "./graphNode.modules.scss";
+import commonStyles from "./common.modules.scss";
+export class GraphNode {
+    constructor(content, stateManager) {
+        this.content = content;
+        this._inputPorts = [];
+        this._outputPorts = [];
+        this._links = [];
+        this._x = 0;
+        this._y = 0;
+        this._gridAlignedX = 0;
+        this._gridAlignedY = 0;
+        this._mouseStartPointX = null;
+        this._mouseStartPointY = null;
+        this._displayManager = null;
+        this._isVisible = true;
+        this._enclosingFrameId = -1;
+        this._stateManager = stateManager;
+        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection: node } = options || {};
+            if (node === this) {
+                this._visual.classList.add(localStyles["selected"]);
+            }
+            else {
+                setTimeout(() => {
+                    if (this._ownerCanvas.selectedNodes.indexOf(this) === -1) {
+                        this._visual.classList.remove(localStyles["selected"]);
+                    }
+                });
+            }
+        });
+        this._onUpdateRequiredObserver = this._stateManager.onUpdateRequiredObservable.add((data) => {
+            if (data !== this.content.data) {
+                return;
+            }
+            this.refresh();
+        });
+        this._onSelectionBoxMovedObserver = this._stateManager.onSelectionBoxMoved.add((rect1) => {
+            const rect2 = this._visual.getBoundingClientRect();
+            const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
+            this.setIsSelected(overlap, true);
+        });
+        this._onFrameCreatedObserver = this._stateManager.onFrameCreatedObservable.add((frame) => {
+            if (this._ownerCanvas.frames.some((f) => f.nodes.indexOf(this) !== -1)) {
+                return;
+            }
+            if (this.isOverlappingFrame(frame)) {
+                frame.nodes.push(this);
+            }
+        });
+    }
+    get isVisible() {
+        return this._isVisible;
+    }
+    set isVisible(value) {
+        this._isVisible = value;
+        if (!value) {
+            this._visual.classList.add(commonStyles["hidden"]);
+        }
+        else {
+            this._visual.classList.remove(commonStyles["hidden"]);
+            this._upateNodePortNames();
+        }
+        for (const link of this._links) {
+            link.isVisible = value;
+        }
+        this._refreshLinks();
+    }
+    _upateNodePortNames() {
+        for (const port of this._inputPorts.concat(this._outputPorts)) {
+            if (port.hasLabel()) {
+                port.portName = port.portData.name;
+            }
+        }
+    }
+    get outputPorts() {
+        return this._outputPorts;
+    }
+    get inputPorts() {
+        return this._inputPorts;
+    }
+    get links() {
+        return this._links;
+    }
+    get gridAlignedX() {
+        return this._gridAlignedX;
+    }
+    get gridAlignedY() {
+        return this._gridAlignedY;
+    }
+    get x() {
+        return this._x;
+    }
+    set x(value) {
+        if (this._x === value) {
+            return;
+        }
+        this._x = value;
+        this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
+        this._visual.style.left = `${this._gridAlignedX}px`;
+        this._refreshLinks();
+        this._refreshFrames();
+    }
+    get y() {
+        return this._y;
+    }
+    set y(value) {
+        if (this._y === value) {
+            return;
+        }
+        this._y = value;
+        this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
+        this._visual.style.top = `${this._gridAlignedY}px`;
+        this._refreshLinks();
+        this._refreshFrames();
+    }
+    get width() {
+        return this._visual.clientWidth;
+    }
+    get height() {
+        return this._visual.clientHeight;
+    }
+    get id() {
+        return this.content.uniqueId;
+    }
+    get name() {
+        return this.content.name;
+    }
+    get isSelected() {
+        return this._isSelected;
+    }
+    get enclosingFrameId() {
+        return this._enclosingFrameId;
+    }
+    set enclosingFrameId(value) {
+        this._enclosingFrameId = value;
+    }
+    set isSelected(value) {
+        this.setIsSelected(value, false);
+    }
+    setIsSelected(value, marqueeSelection) {
+        if (this._isSelected === value) {
+            return;
+        }
+        this._isSelected = value;
+        if (!value) {
+            this._visual.classList.remove(localStyles["selected"]);
+            const indexInSelection = this._ownerCanvas.selectedNodes.indexOf(this);
+            if (indexInSelection > -1) {
+                this._ownerCanvas.selectedNodes.splice(indexInSelection, 1);
+            }
+        }
+        else {
+            this._stateManager.onSelectionChangedObservable.notifyObservers({ selection: this, marqueeSelection });
+        }
+    }
+    isOverlappingFrame(frame) {
+        const rect2 = this._visual.getBoundingClientRect();
+        const rect1 = frame.element.getBoundingClientRect();
+        // Add a tiny margin
+        rect1.width -= 5;
+        rect1.height -= 5;
+        const isOverlappingFrame = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
+        if (isOverlappingFrame) {
+            this.enclosingFrameId = frame.id;
+        }
+        return isOverlappingFrame;
+    }
+    getPortForPortData(portData) {
+        for (const port of this._inputPorts) {
+            const attachedPoint = port.portData;
+            if (attachedPoint === portData || (attachedPoint.ownerData === portData.ownerData && attachedPoint.internalName === portData.internalName)) {
+                return port;
+            }
+        }
+        for (const port of this._outputPorts) {
+            const attachedPoint = port.portData;
+            if (attachedPoint === portData || (attachedPoint.ownerData === portData.ownerData && attachedPoint.internalName === portData.internalName)) {
+                return port;
+            }
+        }
+        return null;
+    }
+    getPortDataForPortDataContent(data) {
+        for (const port of this._inputPorts) {
+            const attachedPoint = port.portData;
+            if (attachedPoint.data === data) {
+                return attachedPoint;
+            }
+        }
+        for (const port of this._outputPorts) {
+            const attachedPoint = port.portData;
+            if (attachedPoint.data === data) {
+                return attachedPoint;
+            }
+        }
+        return null;
+    }
+    getLinksForPortDataContent(data) {
+        return this._links.filter((link) => link.portA.portData.data === data || link.portB.portData.data === data);
+    }
+    getLinksForPortData(portData) {
+        return this._links.filter((link) => link.portA.portData === portData || link.portB.portData === portData);
+    }
+    _refreshFrames() {
+        if (this._ownerCanvas._frameIsMoving || this._ownerCanvas._isLoading) {
+            return;
+        }
+        // Frames
+        for (const frame of this._ownerCanvas.frames) {
+            frame.syncNode(this);
+        }
+    }
+    _refreshLinks() {
+        if (this._ownerCanvas._isLoading) {
+            return;
+        }
+        for (const link of this._links) {
+            link.update();
+        }
+    }
+    refresh() {
+        if (this._displayManager) {
+            this._header.innerHTML = this._displayManager.getHeaderText(this.content);
+            this._displayManager.updatePreviewContent(this.content, this._content);
+            this._visual.style.background = this._displayManager.getBackgroundColor(this.content);
+            const additionalClass = this._displayManager.getHeaderClass(this.content);
+            this._header.classList.value = localStyles.header;
+            this._headerContainer.classList.value = localStyles["header-container"];
+            if (additionalClass) {
+                this._headerContainer.classList.add(additionalClass);
+            }
+            if (this._displayManager.updateFullVisualContent) {
+                this._displayManager.updateFullVisualContent(this.content, {
+                    visual: this._visual,
+                    header: this._header,
+                    headerContainer: this._headerContainer,
+                    headerIcon: this._headerIcon,
+                    headerIconImg: this._headerIconImg,
+                    comments: this._comments,
+                    connections: this._connections,
+                    inputsContainer: this._inputsContainer,
+                    outputsContainer: this._outputsContainer,
+                    content: this._content,
+                    selectionBorder: this._selectionBorder,
+                });
+            }
+        }
+        else {
+            this._header.innerHTML = this.content.name;
+        }
+        for (const port of this._inputPorts) {
+            port.refresh();
+        }
+        for (const port of this._outputPorts) {
+            port.refresh();
+        }
+        if (this.enclosingFrameId !== -1) {
+            const index = this._ownerCanvas.frames.findIndex((frame) => frame.id === this.enclosingFrameId);
+            if (index >= 0 && this._ownerCanvas.frames[index].isCollapsed) {
+                this._ownerCanvas.frames[index].redrawFramePorts();
+            }
+        }
+        this._comments.innerHTML = this.content.comments || "";
+        this._comments.title = this.content.comments || "";
+        this.content.prepareHeaderIcon(this._headerIcon, this._headerIconImg);
+    }
+    _onDown(evt) {
+        // Check if this is coming from the port
+        if (evt.target && evt.target.nodeName === "IMG") {
+            return;
+        }
+        const indexInSelection = this._ownerCanvas.selectedNodes.indexOf(this);
+        if (indexInSelection === -1) {
+            this._stateManager.onSelectionChangedObservable.notifyObservers({ selection: this });
+        }
+        else if (evt.ctrlKey) {
+            this.setIsSelected(false, false);
+        }
+        evt.stopPropagation();
+        for (const selectedNode of this._ownerCanvas.selectedNodes) {
+            selectedNode.cleanAccumulation();
+        }
+        this._mouseStartPointX = evt.clientX;
+        this._mouseStartPointY = evt.clientY;
+        this._visual.setPointerCapture(evt.pointerId);
+    }
+    cleanAccumulation(useCeil = false) {
+        this.x = this._ownerCanvas.getGridPosition(this.x, useCeil);
+        this.y = this._ownerCanvas.getGridPosition(this.y, useCeil);
+    }
+    _onUp(evt) {
+        evt.stopPropagation();
+        for (const selectedNode of this._ownerCanvas.selectedNodes) {
+            selectedNode.cleanAccumulation();
+        }
+        this._mouseStartPointX = null;
+        this._mouseStartPointY = null;
+        this._visual.releasePointerCapture(evt.pointerId);
+        if (!this._ownerCanvas._targetLinkCandidate) {
+            return;
+        }
+        // Connect the ports
+        const inputs = [];
+        const outputs = [];
+        const availableNodeInputs = [];
+        const availableNodeOutputs = [];
+        const leftNode = this._ownerCanvas._targetLinkCandidate.nodeA;
+        const rightNode = this._ownerCanvas._targetLinkCandidate.nodeB;
+        // Delete previous
+        this._ownerCanvas._targetLinkCandidate.dispose();
+        this._ownerCanvas._targetLinkCandidate = null;
+        // Get the ports
+        availableNodeInputs.push(...this.content.inputs.filter((i) => !i.isConnected));
+        availableNodeOutputs.push(...this.content.outputs);
+        inputs.push(...leftNode.content.outputs);
+        outputs.push(...rightNode.content.inputs.filter((i) => !i.isConnected));
+        // Reconnect
+        this._ownerCanvas.automaticRewire(inputs, availableNodeInputs, true);
+        this._ownerCanvas.automaticRewire(availableNodeOutputs, outputs, true);
+        this._stateManager.onRebuildRequiredObservable.notifyObservers(false);
+    }
+    _onMove(evt) {
+        this._ownerCanvas._targetLinkCandidate = null;
+        if (this._mouseStartPointX === null || this._mouseStartPointY === null || evt.ctrlKey) {
+            return;
+        }
+        // Move
+        const newX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+        const newY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+        for (const selectedNode of this._ownerCanvas.selectedNodes) {
+            selectedNode.x += newX;
+            selectedNode.y += newY;
+        }
+        for (const frame of this._ownerCanvas.selectedFrames) {
+            frame._moveFrame(newX, newY);
+        }
+        this._mouseStartPointX = evt.clientX;
+        this._mouseStartPointY = evt.clientY;
+        evt.stopPropagation();
+        if (this._inputPorts.some((p) => p.portData.isConnected) || this._outputPorts.some((o) => o.portData.hasEndpoints)) {
+            return;
+        }
+        // Check wires that could be underneath
+        const rect = this._visual.getBoundingClientRect();
+        for (const link of this._ownerCanvas.links) {
+            if (link.portA.node === this || link.portB.node === this) {
+                link.isTargetCandidate = false;
+                continue;
+            }
+            link.isTargetCandidate = link.intersectsWith(rect);
+            if (link.isTargetCandidate) {
+                if (this._ownerCanvas._targetLinkCandidate !== link) {
+                    if (this._ownerCanvas._targetLinkCandidate) {
+                        this._ownerCanvas._targetLinkCandidate.isTargetCandidate = false;
+                    }
+                    this._ownerCanvas._targetLinkCandidate = link;
+                }
+            }
+        }
+    }
+    renderProperties() {
+        let control = PropertyLedger.RegisteredControls[this.content.getClassName()];
+        if (!control) {
+            control = PropertyLedger.DefaultControl;
+        }
+        return React.createElement(control, {
+            stateManager: this._stateManager,
+            nodeData: this.content,
+        });
+    }
+    appendVisual(root, owner) {
+        this._ownerCanvas = owner;
+        // Display manager
+        const displayManagerClass = DisplayLedger.RegisteredControls[this.content.getClassName()];
+        if (displayManagerClass) {
+            this._displayManager = new displayManagerClass();
+        }
+        // DOM
+        this._visual = root.ownerDocument.createElement("div");
+        this._visual.classList.add(localStyles.visual);
+        this._visual.addEventListener("pointerdown", (evt) => this._onDown(evt));
+        this._visual.addEventListener("pointerup", (evt) => this._onUp(evt));
+        this._visual.addEventListener("pointermove", (evt) => this._onMove(evt));
+        this._headerContainer = root.ownerDocument.createElement("div");
+        this._headerContainer.classList.add(localStyles["header-container"]);
+        this._visual.appendChild(this._headerContainer);
+        this._header = root.ownerDocument.createElement("div");
+        this._header.classList.add(localStyles.header);
+        this._headerContainer.appendChild(this._header);
+        this._headerIcon = root.ownerDocument.createElement("div");
+        this._headerIcon.classList.add(localStyles.headerIcon);
+        this._headerIconImg = root.ownerDocument.createElement("img");
+        this._headerIcon.appendChild(this._headerIconImg);
+        this._headerContainer.appendChild(this._headerIcon);
+        this._selectionBorder = root.ownerDocument.createElement("div");
+        this._selectionBorder.classList.add("selection-border");
+        this._visual.appendChild(this._selectionBorder);
+        this._connections = root.ownerDocument.createElement("div");
+        this._connections.classList.add(localStyles.connections);
+        this._visual.appendChild(this._connections);
+        this._inputsContainer = root.ownerDocument.createElement("div");
+        this._inputsContainer.classList.add(commonStyles.inputsContainer);
+        this._connections.appendChild(this._inputsContainer);
+        this._outputsContainer = root.ownerDocument.createElement("div");
+        this._outputsContainer.classList.add(commonStyles.outputsContainer);
+        this._connections.appendChild(this._outputsContainer);
+        this._content = root.ownerDocument.createElement("div");
+        this._content.classList.add(localStyles.content);
+        this._visual.appendChild(this._content);
+        root.appendChild(this._visual);
+        // Comments
+        this._comments = root.ownerDocument.createElement("div");
+        this._comments.classList.add(localStyles.comments);
+        this._visual.appendChild(this._comments);
+        // Connections
+        for (const input of this.content.inputs) {
+            this._inputPorts.push(NodePort.CreatePortElement(input, this, this._inputsContainer, this._displayManager, this._stateManager));
+        }
+        for (const output of this.content.outputs) {
+            this._outputPorts.push(NodePort.CreatePortElement(output, this, this._outputsContainer, this._displayManager, this._stateManager));
+        }
+        this.refresh();
+    }
+    dispose() {
+        // notify frame observers that this node is being deleted
+        this._stateManager.onGraphNodeRemovalObservable.notifyObservers(this);
+        if (this._onSelectionChangedObserver) {
+            this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+        }
+        if (this._onUpdateRequiredObserver) {
+            this._stateManager.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
+        }
+        if (this._onSelectionBoxMovedObserver) {
+            this._stateManager.onSelectionBoxMoved.remove(this._onSelectionBoxMovedObserver);
+        }
+        if (this._visual.parentElement) {
+            this._visual.parentElement.removeChild(this._visual);
+        }
+        if (this._onFrameCreatedObserver) {
+            this._stateManager.onFrameCreatedObservable.remove(this._onFrameCreatedObserver);
+        }
+        for (const port of this._inputPorts) {
+            port.dispose();
+        }
+        for (const port of this._outputPorts) {
+            port.dispose();
+        }
+        const links = this._links.slice(0);
+        for (const link of links) {
+            link.dispose();
+        }
+        this.content.dispose();
+    }
+}
 //# sourceMappingURL=graphNode.js.map