@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/nodeGraphSystem/graphCanvas.js

@@ -1,1132 +1,1132 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { GraphNode } from "./graphNode.js";
-import * as dagre from "dagre";
-import { NodeLink } from "./nodeLink.js";
-import { NodePort } from "./nodePort.js";
-import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
-import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
-import { GraphFrame } from "./graphFrame.js";
-import { FrameNodePort } from "./frameNodePort.js";
-import { PortDataDirection } from "./interfaces/portData.js";
-import styles from "./graphCanvas.modules.scss";
-import commonStyles from "./common.modules.scss";
-import { TypeLedger } from "./typeLedger.js";
-import { RefreshNode } from "./tools.js";
-export class GraphCanvasComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._minZoom = 0.1;
-        this._maxZoom = 4;
-        this._nodes = [];
-        this._links = [];
-        this._mouseStartPointX = null;
-        this._mouseStartPointY = null;
-        this._dropPointX = 0;
-        this._dropPointY = 0;
-        this._selectionStartX = 0;
-        this._selectionStartY = 0;
-        this._candidateLinkedHasMoved = false;
-        this._x = 0;
-        this._y = 0;
-        this._zoom = 1;
-        this._selectedNodes = [];
-        this._selectedLink = null;
-        this._selectedPort = null;
-        this._candidateLink = null;
-        this._candidatePort = null;
-        this._gridSize = 20;
-        this._selectionBox = null;
-        this._selectedFrames = [];
-        this._frameCandidate = null;
-        this._frames = [];
-        this._nodeDataContentList = new Array();
-        this._altKeyIsPressed = false;
-        this._multiKeyIsPressed = false;
-        this._oldY = -1;
-        this._frameIsMoving = false;
-        this._isLoading = false;
-        this._targetLinkCandidate = null;
-        this._copiedNodes = [];
-        this._copiedFrames = [];
-        props.stateManager.onSelectionChangedObservable.add((options) => {
-            const { selection, forceKeepSelection, marqueeSelection = false } = options || {};
-            if (!selection) {
-                this._selectedNodes = [];
-                this._selectedLink = null;
-                this._selectedFrames = [];
-                this._selectedPort = null;
-            }
-            else {
-                if (selection instanceof NodeLink) {
-                    this._selectedNodes = [];
-                    this._selectedFrames = [];
-                    this._selectedLink = selection;
-                    this._selectedPort = null;
-                }
-                else if (selection instanceof NodePort) {
-                    this._selectedNodes = [];
-                    this._selectedFrames = [];
-                    this._selectedLink = null;
-                    this._selectedPort = selection;
-                }
-                else if (selection instanceof FrameNodePort) {
-                    this._selectedNodes = [];
-                    this._selectedFrames = [];
-                    this._selectedLink = null;
-                    this._selectedPort = selection;
-                }
-                else if (selection instanceof GraphNode || selection instanceof GraphFrame) {
-                    // If in marquee selection mode, always prioritize selecting nodes. Otherwise, always prioritize selecting the type of
-                    // the selected element
-                    if (marqueeSelection) {
-                        if (selection instanceof GraphFrame && !this._selectedFrames.includes(selection)) {
-                            this._selectedFrames.push(selection);
-                        }
-                        else if (selection instanceof GraphNode && !this._selectedNodes.includes(selection)) {
-                            this._selectedNodes.push(selection);
-                        }
-                        if (this._selectedFrameAndNodesConflict(this.selectedFrames, this.selectedNodes)) {
-                            const framesToRemove = new Set();
-                            for (const selectedNode of this._selectedNodes) {
-                                for (const selectedFrame of this._selectedFrames) {
-                                    if (selectedFrame.nodes.includes(selectedNode)) {
-                                        framesToRemove.add(selectedFrame);
-                                    }
-                                }
-                            }
-                            this._selectedFrames = this._selectedFrames.filter((f) => !framesToRemove.has(f));
-                        }
-                    }
-                    else {
-                        if (selection instanceof GraphFrame) {
-                            if (this._multiKeyIsPressed || forceKeepSelection) {
-                                if (!this._selectedFrameAndNodesConflict([selection], this._selectedNodes) && !this._selectedFrames.includes(selection)) {
-                                    this._selectedFrames.push(selection);
-                                }
-                            }
-                            else {
-                                this._selectedFrames = [selection];
-                                this._selectedNodes = [];
-                                this._selectedLink = null;
-                                this._selectedPort = null;
-                            }
-                        }
-                        else if (selection instanceof GraphNode) {
-                            if (this._multiKeyIsPressed || forceKeepSelection) {
-                                if (!this._selectedFrameAndNodesConflict(this._selectedFrames, [selection]) && !this._selectedNodes.includes(selection)) {
-                                    this._selectedNodes.push(selection);
-                                }
-                            }
-                            else {
-                                this._selectedFrames = [];
-                                this._selectedNodes = [selection];
-                                this._selectedLink = null;
-                                this._selectedPort = null;
-                            }
-                        }
-                    }
-                }
-            }
-        });
-        props.stateManager.onCandidatePortSelectedObservable.add((port) => {
-            this._candidatePort = port;
-        });
-        props.stateManager.onGridSizeChanged.add(() => {
-            this.gridSize = DataStorage.ReadNumber("GridSize", 20);
-        });
-        this.props.stateManager.hostDocument.addEventListener("keyup", () => this.onKeyUp(), false);
-        this.props.stateManager.hostDocument.addEventListener("keydown", (evt) => {
-            this._altKeyIsPressed = evt.altKey;
-            this._multiKeyIsPressed = evt.ctrlKey || evt.metaKey;
-        }, false);
-        this.props.stateManager.hostDocument.defaultView.addEventListener("blur", () => {
-            this._altKeyIsPressed = false;
-            this._multiKeyIsPressed = false;
-        }, false);
-        // Store additional data to serialization object
-        this.props.stateManager.storeEditorData = (editorData, graphFrame) => {
-            editorData.frames = [];
-            if (graphFrame) {
-                editorData.frames.push(graphFrame.serialize(false));
-            }
-            else {
-                editorData.x = this.x;
-                editorData.y = this.y;
-                editorData.zoom = this.zoom;
-                for (const frame of this._frames) {
-                    editorData.frames.push(frame.serialize(true));
-                }
-            }
-        };
-    }
-    get gridSize() {
-        return this._gridSize;
-    }
-    set gridSize(value) {
-        this._gridSize = value;
-        this.updateTransform();
-    }
-    get stateManager() {
-        return this.props.stateManager;
-    }
-    get nodes() {
-        return this._nodes;
-    }
-    get links() {
-        return this._links;
-    }
-    get frames() {
-        return this._frames;
-    }
-    get zoom() {
-        return this._zoom;
-    }
-    set zoom(value) {
-        if (this._zoom === value) {
-            return;
-        }
-        this._zoom = value;
-        this.updateTransform();
-    }
-    get x() {
-        return this._x;
-    }
-    set x(value) {
-        this._x = value;
-        this.updateTransform();
-    }
-    get y() {
-        return this._y;
-    }
-    set y(value) {
-        this._y = value;
-        this.updateTransform();
-    }
-    get selectedNodes() {
-        return this._selectedNodes;
-    }
-    get selectedLink() {
-        return this._selectedLink;
-    }
-    get selectedFrames() {
-        return this._selectedFrames;
-    }
-    get selectedPort() {
-        return this._selectedPort;
-    }
-    get canvasContainer() {
-        return this._graphCanvas;
-    }
-    get hostCanvas() {
-        return this._hostCanvas;
-    }
-    get svgCanvas() {
-        return this._svgCanvas;
-    }
-    get selectionContainer() {
-        return this._selectionContainer;
-    }
-    get frameContainer() {
-        return this._frameContainer;
-    }
-    // There is a selection conflict between nodes and frames if any selected node is inside any selected frame
-    _selectedFrameAndNodesConflict(frameSelection, nodeSelection) {
-        for (const frame of frameSelection) {
-            for (const node of nodeSelection) {
-                if (frame.nodes.includes(node)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    populateConnectedEntriesBeforeRemoval(item, items, inputs, outputs) {
-        inputs.push(...item.content.inputs.filter((i) => i.isConnected && items.every((selected) => { var _a; return selected.content.data !== ((_a = i.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData); })).map((i) => i.connectedPort));
-        outputs.push(...item.content.outputs
-            .filter((i) => i.isConnected)
-            .map((i) => i.endpoints)
-            .flat()
-            .filter((i) => i && items.every((selected) => selected.content.data !== i.ownerData)));
-    }
-    automaticRewire(inputs, outputs, firstOnly = false) {
-        let oneConnectionFound = false;
-        if (outputs.length && inputs.length) {
-            inputs.forEach((input) => {
-                if (oneConnectionFound) {
-                    return;
-                }
-                if (!input) {
-                    return;
-                }
-                const output = outputs[0];
-                if (output && input.canConnectTo(output)) {
-                    const nodeInput = this.findNodeFromData(input.ownerData);
-                    const nodeOutput = this.findNodeFromData(output.ownerData);
-                    this.connectNodes(nodeInput, input, nodeOutput, output);
-                    outputs.shift();
-                    if (firstOnly) {
-                        oneConnectionFound = true;
-                        return;
-                    }
-                }
-            });
-        }
-    }
-    handleKeyDown(evt, onRemove, mouseLocationX, mouseLocationY, dataGenerator, rootElement) {
-        if ((evt.keyCode === 46 || evt.keyCode === 8) && !this.props.stateManager.lockObject.lock) {
-            // Delete
-            const selectedItems = this.selectedNodes;
-            const inputs = [];
-            const outputs = [];
-            if (selectedItems.length > 0) {
-                for (const selectedItem of selectedItems) {
-                    if (evt.altKey) {
-                        this.populateConnectedEntriesBeforeRemoval(selectedItem, selectedItems, inputs, outputs);
-                    }
-                    selectedItem.dispose();
-                    onRemove(selectedItem.content);
-                    this.removeDataFromCache(selectedItem.content.data);
-                }
-            }
-            if (this.selectedLink) {
-                this.selectedLink.dispose();
-            }
-            if (this.selectedFrames.length) {
-                for (const frame of this.selectedFrames) {
-                    if (frame.isCollapsed) {
-                        while (frame.nodes.length > 0) {
-                            onRemove(frame.nodes[0].content);
-                            this.removeDataFromCache(frame.nodes[0].content.data);
-                            frame.nodes[0].dispose();
-                        }
-                        frame.isCollapsed = false;
-                    }
-                    else {
-                        frame.nodes.forEach((node) => {
-                            node.enclosingFrameId = -1;
-                        });
-                    }
-                    frame.dispose();
-                }
-            }
-            // Reconnect if required
-            this.automaticRewire(inputs, outputs);
-            this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
-            this.props.stateManager.onRebuildRequiredObservable.notifyObservers(false);
-            return;
-        }
-        if ((!evt.ctrlKey && !evt.metaKey) || this.props.stateManager.lockObject.lock) {
-            return;
-        }
-        if (evt.key === "c" || evt.key === "C") {
-            // Copy
-            this._copiedNodes = [];
-            this._copiedFrames = [];
-            if (this.selectedFrames.length) {
-                for (const frame of this.selectedFrames) {
-                    frame.serialize(true);
-                    this._copiedFrames.push(frame);
-                }
-                return;
-            }
-            const selectedItems = this.selectedNodes;
-            if (!selectedItems.length) {
-                return;
-            }
-            const selectedItem = selectedItems[0];
-            if (!selectedItem.content.data) {
-                return;
-            }
-            this._copiedNodes = selectedItems.slice(0);
-        }
-        else if (evt.key === "v" || evt.key === "V") {
-            // Paste
-            const zoomLevel = this.zoom;
-            let currentY = (mouseLocationY - rootElement.offsetTop - this.y - 20) / zoomLevel;
-            if (this._copiedFrames.length) {
-                for (const frame of this._copiedFrames) {
-                    // New frame
-                    const newFrame = new GraphFrame(null, this, true);
-                    this.frames.push(newFrame);
-                    newFrame.width = frame.width;
-                    newFrame.height = frame.height;
-                    newFrame.width / 2;
-                    newFrame.name = frame.name;
-                    newFrame.color = frame.color;
-                    let currentX = (mouseLocationX - rootElement.offsetLeft - this.x) / zoomLevel;
-                    newFrame.x = currentX - newFrame.width / 2;
-                    newFrame.y = currentY;
-                    // Paste nodes
-                    if (frame.nodes.length) {
-                        currentX = newFrame.x + frame.nodes[0].x - frame.x;
-                        currentY = newFrame.y + frame.nodes[0].y - frame.y;
-                        this._frameIsMoving = true;
-                        const newNodes = this.pasteSelection(frame.nodes, currentX, currentY, dataGenerator);
-                        if (newNodes) {
-                            for (const node of newNodes) {
-                                newFrame.syncNode(node);
-                            }
-                        }
-                        this._frameIsMoving = false;
-                    }
-                    newFrame.adjustPorts();
-                    if (frame.isCollapsed) {
-                        newFrame.isCollapsed = true;
-                    }
-                    // Select
-                    this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: newFrame, forceKeepSelection: true });
-                    return;
-                }
-            }
-            if (!this._copiedNodes.length) {
-                return;
-            }
-            const currentX = (mouseLocationX - rootElement.offsetLeft - this.x - GraphCanvasComponent.NodeWidth) / zoomLevel;
-            this.pasteSelection(this._copiedNodes, currentX, currentY, dataGenerator, true);
-        }
-    }
-    pasteSelection(copiedNodes, currentX, currentY, dataGenerator, selectNew = false) {
-        let originalNode = null;
-        const newNodes = [];
-        // Copy to prevent recursive side effects while creating nodes.
-        copiedNodes = copiedNodes.slice();
-        // Cancel selection
-        this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
-        // Create new nodes
-        for (const node of copiedNodes) {
-            const data = node.content.data;
-            if (!data) {
-                continue;
-            }
-            const newNode = dataGenerator(node.content);
-            let x = 0;
-            let y = 0;
-            if (originalNode) {
-                x = currentX + node.x - originalNode.x;
-                y = currentY + node.y - originalNode.y;
-            }
-            else {
-                originalNode = node;
-                x = currentX;
-                y = currentY;
-            }
-            newNode.x = x;
-            newNode.y = y;
-            newNode.cleanAccumulation();
-            newNodes.push(newNode);
-            if (selectNew) {
-                this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: newNode, forceKeepSelection: true });
-            }
-        }
-        // Relink
-        const done = new Array(newNodes.length);
-        for (let index = 0; index < newNodes.length; index++) {
-            this.reconnectNewNodes(index, newNodes, copiedNodes, done);
-        }
-        return newNodes;
-    }
-    reconnectNewNodes(nodeIndex, newNodes, sourceNodes, done) {
-        if (done[nodeIndex]) {
-            return;
-        }
-        const currentNode = newNodes[nodeIndex];
-        const sourceNode = sourceNodes[nodeIndex];
-        for (let inputIndex = 0; inputIndex < sourceNode.content.inputs.length; inputIndex++) {
-            const sourceInput = sourceNode.content.inputs[inputIndex];
-            const currentInput = currentNode.content.inputs[inputIndex];
-            if (!sourceInput.isConnected) {
-                continue;
-            }
-            const sourceContent = this.findNodeFromData(sourceInput.connectedPort.ownerData).content;
-            const activeNodes = sourceNodes.filter((s) => s.content === sourceContent);
-            if (activeNodes.length > 0) {
-                const activeNode = activeNodes[0];
-                const indexInList = sourceNodes.indexOf(activeNode);
-                // First make sure to connect the other one
-                this.reconnectNewNodes(indexInList, newNodes, sourceNodes, done);
-                // Then reconnect
-                const outputIndex = sourceContent.outputs.indexOf(sourceInput.connectedPort);
-                const newOutput = newNodes[indexInList].content.data.outputs[outputIndex];
-                newOutput.connectTo(currentInput.data);
-            }
-            else {
-                // Connect with outside nodes
-                sourceInput.connectedPort.connectTo(currentInput);
-            }
-            this.connectPorts(currentInput.connectedPort, currentInput);
-        }
-        currentNode.refresh();
-        done[nodeIndex] = true;
-    }
-    getCachedData() {
-        return this._nodeDataContentList;
-    }
-    removeDataFromCache(data) {
-        const dataIndex = this._nodeDataContentList.indexOf(data);
-        if (dataIndex > -1) {
-            this._nodeDataContentList.splice(dataIndex, 1);
-        }
-    }
-    createNodeFromObject(nodeData, onNodeCreated, recursion = true) {
-        if (this._nodeDataContentList.indexOf(nodeData.data) !== -1) {
-            // Links
-            if (nodeData.inputs.length && recursion) {
-                for (const input of nodeData.inputs) {
-                    if (input.isConnected) {
-                        this.connectPorts(input.connectedPort, input);
-                    }
-                }
-            }
-            return this.nodes.filter((n) => n.content.data === nodeData.data)[0];
-        }
-        onNodeCreated(nodeData.data);
-        // Connections
-        if (nodeData.inputs.length) {
-            for (const input of nodeData.inputs) {
-                if (input.connectedPort && recursion) {
-                    this.createNodeFromObject(TypeLedger.NodeDataBuilder(input.connectedPort.ownerData, this), onNodeCreated);
-                }
-            }
-        }
-        // Graph
-        const node = this.appendNode(nodeData);
-        // Links
-        if (nodeData.inputs.length && recursion) {
-            for (const input of nodeData.inputs) {
-                if (input.isConnected) {
-                    this.connectPorts(input.connectedPort, input);
-                }
-            }
-        }
-        return node;
-    }
-    getGridPosition(position, useCeil = false) {
-        const gridSize = this.gridSize;
-        if (gridSize === 0) {
-            return position;
-        }
-        if (useCeil) {
-            return gridSize * Math.ceil(position / gridSize);
-        }
-        return gridSize * Math.floor(position / gridSize);
-    }
-    getGridPositionCeil(position) {
-        const gridSize = this.gridSize;
-        if (gridSize === 0) {
-            return position;
-        }
-        return gridSize * Math.ceil(position / gridSize);
-    }
-    updateTransform() {
-        this._rootContainer.style.transform = `translate(${this._x}px, ${this._y}px) scale(${this._zoom})`;
-        if (DataStorage.ReadBoolean("ShowGrid", true)) {
-            this._hostCanvas.style.backgroundSize = `${this._gridSize * this._zoom}px ${this._gridSize * this._zoom}px`;
-            this._hostCanvas.style.backgroundPosition = `${this._x}px ${this._y}px`;
-        }
-        else {
-            this._hostCanvas.style.backgroundSize = `0`;
-        }
-    }
-    onKeyUp() {
-        this._altKeyIsPressed = false;
-        this._multiKeyIsPressed = false;
-        this._oldY = -1;
-    }
-    findNodeFromData(data) {
-        return this.nodes.filter((n) => n.content.data === data)[0];
-    }
-    reset() {
-        this._nodeDataContentList = [];
-        for (const node of this._nodes) {
-            node.dispose();
-        }
-        const frames = this._frames.splice(0);
-        for (const frame of frames) {
-            frame.dispose();
-        }
-        this._nodes = [];
-        this._frames = [];
-        this._links = [];
-        this._graphCanvas.innerHTML = "";
-        this._svgCanvas.innerHTML = "";
-    }
-    connectPorts(pointA, pointB) {
-        if (!pointA || !pointB) {
-            return;
-        }
-        const ownerDataA = pointA.ownerData;
-        const ownerDataB = pointB.ownerData;
-        const nodeA = this.findNodeFromData(ownerDataA);
-        const nodeB = this.findNodeFromData(ownerDataB);
-        if (!nodeA || !nodeB) {
-            return;
-        }
-        const portA = nodeA.getPortForPortData(pointA);
-        const portB = nodeB.getPortForPortData(pointB);
-        if (!portA || !portB) {
-            return;
-        }
-        for (const currentLink of this._links) {
-            if (currentLink.portA === portA && currentLink.portB === portB) {
-                return;
-            }
-            if (currentLink.portA === portB && currentLink.portB === portA) {
-                return;
-            }
-        }
-        const link = new NodeLink(this, portA, nodeA, portB, nodeB);
-        this._links.push(link);
-        nodeA.links.push(link);
-        nodeB.links.push(link);
-    }
-    removeLink(link) {
-        const index = this._links.indexOf(link);
-        if (index > -1) {
-            this._links.splice(index, 1);
-        }
-        link.dispose();
-    }
-    appendNode(nodeData) {
-        const newNode = new GraphNode(nodeData, this.props.stateManager);
-        newNode.appendVisual(this._graphCanvas, this);
-        this._nodes.push(newNode);
-        this._nodeDataContentList.push(nodeData.data);
-        return newNode;
-    }
-    distributeGraph() {
-        this.x = 0;
-        this.y = 0;
-        this.zoom = 1;
-        const graph = new dagre.graphlib.Graph();
-        graph.setGraph({});
-        graph.setDefaultEdgeLabel(() => ({}));
-        graph.graph().rankdir = "LR";
-        // Build dagre graph
-        this._nodes.forEach((node) => {
-            if (this._frames.some((f) => f.nodes.indexOf(node) !== -1)) {
-                return;
-            }
-            graph.setNode(node.id.toString(), {
-                id: node.id,
-                type: "node",
-                width: node.width,
-                height: node.height,
-            });
-        });
-        this._frames.forEach((frame) => {
-            graph.setNode(frame.id.toString(), {
-                id: frame.id,
-                type: "frame",
-                width: frame.element.clientWidth,
-                height: frame.element.clientHeight,
-            });
-        });
-        this._nodes.forEach((node) => {
-            node.content.outputs.forEach((output) => {
-                if (!output.hasEndpoints) {
-                    return;
-                }
-                output.endpoints.forEach((endpoint) => {
-                    const sourceFrames = this._frames.filter((f) => f.nodes.indexOf(node) !== -1);
-                    const targetFrames = this._frames.filter((f) => f.nodes.some((n) => n.content.data === endpoint.ownerData));
-                    const sourceId = sourceFrames.length > 0 ? sourceFrames[0].id : node.id;
-                    const targetId = targetFrames.length > 0 ? targetFrames[0].id : endpoint.ownerData.uniqueId;
-                    graph.setEdge(sourceId.toString(), targetId.toString());
-                });
-            });
-        });
-        // Distribute
-        dagre.layout(graph);
-        // Update graph
-        const dagreNodes = graph.nodes().map((node) => graph.node(node));
-        dagreNodes.forEach((dagreNode) => {
-            if (!dagreNode) {
-                return;
-            }
-            if (dagreNode.type === "node") {
-                for (const node of this._nodes) {
-                    if (node.id === dagreNode.id) {
-                        node.x = dagreNode.x - dagreNode.width / 2;
-                        node.y = dagreNode.y - dagreNode.height / 2;
-                        node.cleanAccumulation();
-                        return;
-                    }
-                }
-                return;
-            }
-            for (const frame of this._frames) {
-                if (frame.id === dagreNode.id) {
-                    this._frameIsMoving = true;
-                    frame.move(dagreNode.x - dagreNode.width / 2, dagreNode.y - dagreNode.height / 2, false);
-                    frame.cleanAccumulation();
-                    this._frameIsMoving = false;
-                    return;
-                }
-            }
-        });
-    }
-    componentDidMount() {
-        this._hostCanvas = this.props.stateManager.hostDocument.getElementById("graph-canvas");
-        this._rootContainer = this.props.stateManager.hostDocument.getElementById("graph-container");
-        this._graphCanvas = this.props.stateManager.hostDocument.getElementById("graph-canvas-container");
-        this._svgCanvas = this.props.stateManager.hostDocument.getElementById("graph-svg-container");
-        this._selectionContainer = this.props.stateManager.hostDocument.getElementById("selection-container");
-        this._frameContainer = this.props.stateManager.hostDocument.getElementById("frame-container");
-        this.gridSize = DataStorage.ReadNumber("GridSize", 20);
-        this.updateTransform();
-    }
-    onMove(evt) {
-        // Selection box
-        if (this._selectionBox) {
-            const rootRect = this.canvasContainer.getBoundingClientRect();
-            const localX = evt.pageX - rootRect.left;
-            const localY = evt.pageY - rootRect.top;
-            if (localX > this._selectionStartX) {
-                this._selectionBox.style.left = `${this._selectionStartX / this.zoom}px`;
-                this._selectionBox.style.width = `${(localX - this._selectionStartX) / this.zoom}px`;
-            }
-            else {
-                this._selectionBox.style.left = `${localX / this.zoom}px`;
-                this._selectionBox.style.width = `${(this._selectionStartX - localX) / this.zoom}px`;
-            }
-            if (localY > this._selectionStartY) {
-                this._selectionBox.style.top = `${this._selectionStartY / this.zoom}px`;
-                this._selectionBox.style.height = `${(localY - this._selectionStartY) / this.zoom}px`;
-            }
-            else {
-                this._selectionBox.style.top = `${localY / this.zoom}px`;
-                this._selectionBox.style.height = `${(this._selectionStartY - localY) / this.zoom}px`;
-            }
-            this.props.stateManager.onSelectionBoxMoved.notifyObservers(this._selectionBox.getBoundingClientRect());
-            return;
-        }
-        // Candidate frame box
-        if (this._frameCandidate) {
-            const rootRect = this.canvasContainer.getBoundingClientRect();
-            const localX = evt.pageX - rootRect.left;
-            const localY = evt.pageY - rootRect.top;
-            if (localX > this._selectionStartX) {
-                this._frameCandidate.style.left = `${this._selectionStartX / this.zoom}px`;
-                this._frameCandidate.style.width = `${(localX - this._selectionStartX) / this.zoom}px`;
-            }
-            else {
-                this._frameCandidate.style.left = `${localX / this.zoom}px`;
-                this._frameCandidate.style.width = `${(this._selectionStartX - localX) / this.zoom}px`;
-            }
-            if (localY > this._selectionStartY) {
-                this._frameCandidate.style.top = `${this._selectionStartY / this.zoom}px`;
-                this._frameCandidate.style.height = `${(localY - this._selectionStartY) / this.zoom}px`;
-            }
-            else {
-                this._frameCandidate.style.top = `${localY / this.zoom}px`;
-                this._frameCandidate.style.height = `${(this._selectionStartY - localY) / this.zoom}px`;
-            }
-            return;
-        }
-        // Candidate link
-        if (this._candidateLink) {
-            const rootRect = this.canvasContainer.getBoundingClientRect();
-            this._candidatePort = null;
-            this.props.stateManager.onCandidateLinkMoved.notifyObservers(new Vector2(evt.pageX, evt.pageY));
-            this._dropPointX = (evt.pageX - rootRect.left) / this.zoom;
-            this._dropPointY = (evt.pageY - rootRect.top) / this.zoom;
-            this._candidateLink.update(this._dropPointX, this._dropPointY, true);
-            this._candidateLinkedHasMoved = true;
-            return;
-        }
-        // Zoom with mouse + alt
-        if (this._altKeyIsPressed && evt.buttons === 1) {
-            if (this._oldY < 0) {
-                this._oldY = evt.pageY;
-            }
-            const zoomDelta = (evt.pageY - this._oldY) / 10;
-            if (Math.abs(zoomDelta) > 5) {
-                const oldZoom = this.zoom;
-                this.zoom = Math.max(Math.min(this._maxZoom, this.zoom + zoomDelta / 100), this._minZoom);
-                const boundingRect = evt.currentTarget.getBoundingClientRect();
-                const clientWidth = boundingRect.width;
-                const widthDiff = clientWidth * this.zoom - clientWidth * oldZoom;
-                const clientX = evt.clientX - boundingRect.left;
-                const xFactor = (clientX - this.x) / oldZoom / clientWidth;
-                this.x = this.x - widthDiff * xFactor;
-                this._oldY = evt.pageY;
-            }
-            return;
-        }
-        // Move canvas
-        this._rootContainer.style.cursor = "move";
-        if (this._mouseStartPointX === null || this._mouseStartPointY === null) {
-            return;
-        }
-        this.x += evt.clientX - this._mouseStartPointX;
-        this.y += evt.clientY - this._mouseStartPointY;
-        this._mouseStartPointX = evt.clientX;
-        this._mouseStartPointY = evt.clientY;
-    }
-    onDown(evt) {
-        this._rootContainer.setPointerCapture(evt.pointerId);
-        // Port dragging
-        if (evt.nativeEvent.srcElement && evt.nativeEvent.srcElement.nodeName === "IMG") {
-            if (!this._candidateLink) {
-                const portElement = evt.nativeEvent.srcElement.parentElement.port;
-                if (this._altKeyIsPressed && (portElement.portData.isConnected || portElement.portData.hasEndpoints)) {
-                    const node = portElement.node;
-                    // Delete connection
-                    const links = node.getLinksForPortData(portElement.portData);
-                    links.forEach((link) => {
-                        link.dispose(false);
-                    });
-                    // Pick the first one as target port
-                    const targetNode = links[0].nodeA === node ? links[0].nodeB : links[0].nodeA;
-                    const targetPort = links[0].nodeA === node ? links[0].portB : links[0].portA;
-                    // Start a new one
-                    this._candidateLink = new NodeLink(this, targetPort, targetNode);
-                }
-                else if (this._multiKeyIsPressed && (portElement.portData.isConnected || portElement.portData.hasEndpoints)) {
-                    const node = portElement.node;
-                    const links = node.getLinksForPortData(portElement.portData);
-                    // Pick the first one as target port
-                    const linkToConsider = this._selectedLink || links[0];
-                    const targetNode = linkToConsider.nodeA === node ? linkToConsider.nodeB : linkToConsider.nodeA;
-                    const targetPort = linkToConsider.nodeA === node ? linkToConsider.portB : linkToConsider.portA;
-                    // Start a new one
-                    this._candidateLink = new NodeLink(this, targetPort, targetNode);
-                }
-                else {
-                    this._candidateLink = new NodeLink(this, portElement, portElement.node);
-                }
-                this._candidateLinkedHasMoved = false;
-            }
-            return;
-        }
-        // Selection?
-        if (evt.currentTarget === this._hostCanvas && this._multiKeyIsPressed) {
-            this._selectionBox = this.props.stateManager.hostDocument.createElement("div");
-            this._selectionBox.classList.add(styles["selection-box"]);
-            this._selectionContainer.appendChild(this._selectionBox);
-            const rootRect = this.canvasContainer.getBoundingClientRect();
-            this._selectionStartX = evt.pageX - rootRect.left;
-            this._selectionStartY = evt.pageY - rootRect.top;
-            this._selectionBox.style.left = `${this._selectionStartX / this.zoom}px`;
-            this._selectionBox.style.top = `${this._selectionStartY / this.zoom}px`;
-            this._selectionBox.style.width = "0px";
-            this._selectionBox.style.height = "0px";
-            return;
-        }
-        // Frame?
-        if (evt.currentTarget === this._hostCanvas && evt.shiftKey) {
-            this._frameCandidate = this.props.stateManager.hostDocument.createElement("div");
-            this._frameCandidate.classList.add(commonStyles["frame-box"]);
-            this._frameContainer.appendChild(this._frameCandidate);
-            const rootRect = this.canvasContainer.getBoundingClientRect();
-            this._selectionStartX = evt.pageX - rootRect.left;
-            this._selectionStartY = evt.pageY - rootRect.top;
-            this._frameCandidate.style.left = `${this._selectionStartX / this.zoom}px`;
-            this._frameCandidate.style.top = `${this._selectionStartY / this.zoom}px`;
-            this._frameCandidate.style.width = "0px";
-            this._frameCandidate.style.height = "0px";
-            return;
-        }
-        this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
-        this._mouseStartPointX = evt.clientX;
-        this._mouseStartPointY = evt.clientY;
-    }
-    onUp(evt) {
-        this._mouseStartPointX = null;
-        this._mouseStartPointY = null;
-        this._rootContainer.releasePointerCapture(evt.pointerId);
-        this._oldY = -1;
-        if (this._candidateLink) {
-            if (this._candidateLinkedHasMoved) {
-                this.processCandidatePort();
-                this.props.stateManager.onCandidateLinkMoved.notifyObservers(null);
-            }
-            else {
-                // is a click event on NodePort
-                if (this._candidateLink.portA instanceof FrameNodePort) {
-                    //only on Frame Node Ports
-                    const port = this._candidateLink.portA;
-                    const frame = this.frames.find((frame) => frame.id === port.parentFrameId);
-                    if (frame) {
-                        const data = {
-                            frame,
-                            port,
-                        };
-                        this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: data });
-                    }
-                }
-                else if (this._candidateLink.portA instanceof NodePort) {
-                    this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: this._candidateLink.portA });
-                }
-            }
-            this._candidateLink.dispose();
-            this._candidateLink = null;
-            this._candidatePort = null;
-        }
-        if (this._selectionBox) {
-            this._selectionBox.parentElement.removeChild(this._selectionBox);
-            this._selectionBox = null;
-        }
-        if (this._frameCandidate) {
-            const newFrame = new GraphFrame(this._frameCandidate, this);
-            this._frames.push(newFrame);
-            this._frameCandidate.parentElement.removeChild(this._frameCandidate);
-            this._frameCandidate = null;
-            this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: newFrame });
-        }
-    }
-    onWheel(evt) {
-        const delta = evt.deltaY < 0 ? 0.1 : -0.1;
-        const oldZoom = this.zoom;
-        this.zoom = Math.min(Math.max(this._minZoom, this.zoom + delta * this.zoom), this._maxZoom);
-        const boundingRect = evt.currentTarget.getBoundingClientRect();
-        const clientWidth = boundingRect.width;
-        const clientHeight = boundingRect.height;
-        const widthDiff = clientWidth * this.zoom - clientWidth * oldZoom;
-        const heightDiff = clientHeight * this.zoom - clientHeight * oldZoom;
-        const clientX = evt.clientX - boundingRect.left;
-        const clientY = evt.clientY - boundingRect.top;
-        const xFactor = (clientX - this.x) / oldZoom / clientWidth;
-        const yFactor = (clientY - this.y) / oldZoom / clientHeight;
-        this.x = this.x - widthDiff * xFactor;
-        this.y = this.y - heightDiff * yFactor;
-    }
-    zoomToFit() {
-        // Get negative offset
-        let minX = 0;
-        let minY = 0;
-        this._nodes.forEach((node) => {
-            if (this._frames.some((f) => f.nodes.indexOf(node) !== -1)) {
-                return;
-            }
-            if (node.x < minX) {
-                minX = node.x;
-            }
-            if (node.y < minY) {
-                minY = node.y;
-            }
-        });
-        this._frames.forEach((frame) => {
-            if (frame.x < minX) {
-                minX = frame.x;
-            }
-            if (frame.y < minY) {
-                minY = frame.y;
-            }
-        });
-        // Restore to 0
-        this._frames.forEach((frame) => {
-            frame.x += -minX;
-            frame.y += -minY;
-            frame.cleanAccumulation();
-        });
-        this._nodes.forEach((node) => {
-            node.x += -minX;
-            node.y += -minY;
-            node.cleanAccumulation();
-        });
-        // Get correct zoom
-        const xFactor = this._rootContainer.clientWidth / this._rootContainer.scrollWidth;
-        const yFactor = this._rootContainer.clientHeight / this._rootContainer.scrollHeight;
-        const zoomFactor = xFactor < yFactor ? xFactor : yFactor;
-        this.zoom = zoomFactor;
-        this.x = 0;
-        this.y = 0;
-    }
-    processCandidatePort() {
-        let pointB = this._candidateLink.portA.portData;
-        let nodeB = this._candidateLink.portA.node;
-        let pointA;
-        let nodeA;
-        if (this._candidatePort) {
-            pointA = this._candidatePort.portData;
-            nodeA = this._candidatePort.node;
-        }
-        else {
-            if (pointB.direction === PortDataDirection.Output) {
-                return;
-            }
-            // No destination so let's spin a new input node
-            const newDefaultInput = this.props.stateManager.createDefaultInputData(this.props.stateManager.data, this._candidateLink.portA.portData, this);
-            if (!newDefaultInput) {
-                return;
-            }
-            const pointName = newDefaultInput.name;
-            const emittedNodeData = newDefaultInput.data;
-            pointA = emittedNodeData.getPortByName(pointName);
-            if (!emittedNodeData.isInput) {
-                nodeA = this.props.onEmitNewNode(emittedNodeData);
-            }
-            else {
-                nodeA = this.appendNode(emittedNodeData);
-            }
-            nodeA.x = this._dropPointX - 200;
-            nodeA.y = this._dropPointY - 50;
-            const x = nodeA.x - 250;
-            let y = nodeA.y;
-            emittedNodeData.inputs.forEach((portData) => {
-                if (portData.connectedPort) {
-                    const existingNodes = this.nodes.filter((n) => {
-                        var _a;
-                        return n.content.data === ((_a = portData.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData);
-                    });
-                    const connectedNode = existingNodes[0];
-                    if (connectedNode.x === 0 && connectedNode.y === 0) {
-                        connectedNode.x = x;
-                        connectedNode.y = y;
-                        connectedNode.cleanAccumulation();
-                        y += 80;
-                    }
-                }
-            });
-        }
-        if (pointA.direction === PortDataDirection.Input) {
-            const temp = pointB;
-            pointB = pointA;
-            pointA = temp;
-            const tempNode = nodeA;
-            nodeA = nodeB;
-            nodeB = tempNode;
-        }
-        if (pointB.connectedPort === pointA) {
-            return;
-        }
-        if (pointB === pointA) {
-            return;
-        }
-        if (pointB.direction === pointA.direction) {
-            return;
-        }
-        if (pointB.ownerData === pointA.ownerData) {
-            return;
-        }
-        // Check compatibility
-        let compatibilityState = pointA.checkCompatibilityState(pointB);
-        if ((pointA.needDualDirectionValidation || pointB.needDualDirectionValidation) && !compatibilityState) {
-            compatibilityState = pointB.checkCompatibilityState(pointA);
-        }
-        const message = pointA.getCompatibilityIssueMessage(compatibilityState, nodeB, pointB);
-        if (message) {
-            this.props.stateManager.onErrorMessageDialogRequiredObservable.notifyObservers(message);
-            return;
-        }
-        let linksToNotifyForDispose = null;
-        if (pointB.isConnected) {
-            const links = nodeB.getLinksForPortData(pointB);
-            linksToNotifyForDispose = links.slice();
-            links.forEach((link) => {
-                link.dispose(false);
-            });
-        }
-        if (pointB.ownerData.inputsAreExclusive) {
-            // Disconnect all inputs if node has exclusive inputs
-            pointB.ownerData.inputs.forEach((i) => {
-                const links = nodeB.getLinksForPortData(i);
-                if (!linksToNotifyForDispose) {
-                    linksToNotifyForDispose = links.slice();
-                }
-                else {
-                    linksToNotifyForDispose.push(...links.slice());
-                }
-                links.forEach((link) => {
-                    link.dispose(false);
-                });
-            });
-        }
-        this.connectNodes(nodeA, pointA, nodeB, pointB);
-        linksToNotifyForDispose === null || linksToNotifyForDispose === void 0 ? void 0 : linksToNotifyForDispose.forEach((link) => {
-            link.onDisposedObservable.notifyObservers(link);
-            link.onDisposedObservable.clear();
-        });
-        this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
-    }
-    connectNodes(nodeA, pointA, nodeB, pointB) {
-        pointA.connectTo(pointB);
-        this.connectPorts(pointA, pointB);
-        // Need to potentially propagate the type of pointA to other ports of nodes connected to owner of pointB
-        // We also need to check if we want to display the promotion warning
-        const visitedNodes = new Set([nodeA]);
-        const visitedLinks = new Set([nodeB.links[nodeB.links.length - 1]]);
-        RefreshNode(nodeB, visitedNodes, visitedLinks);
-    }
-    drop(newNode, targetX, targetY, offsetX, offsetY) {
-        let x = targetX - this.x - offsetX * this.zoom;
-        let y = targetY - this.y - offsetY * this.zoom;
-        newNode.x = x / this.zoom;
-        newNode.y = y / this.zoom;
-        newNode.cleanAccumulation();
-        this.props.stateManager.onNewNodeCreatedObservable.notifyObservers(newNode);
-        this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
-        this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: newNode });
-        x -= GraphCanvasComponent.NodeWidth + 150;
-        newNode.content.inputs.forEach((portData) => {
-            if (portData.connectedPort) {
-                const existingNodes = this.nodes.filter((n) => {
-                    var _a;
-                    return n.content.data === ((_a = portData.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData);
-                });
-                const connectedNode = existingNodes[0];
-                if (connectedNode.x === 0 && connectedNode.y === 0) {
-                    connectedNode.x = x / this.zoom;
-                    connectedNode.y = y / this.zoom;
-                    connectedNode.cleanAccumulation();
-                    y += 80;
-                }
-            }
-        });
-    }
-    processEditorData(editorData) {
-        const frames = this._frames.splice(0);
-        for (const frame of frames) {
-            frame.dispose();
-        }
-        this._frames = [];
-        this.x = editorData.x || 0;
-        this.y = editorData.y || 0;
-        this.zoom = editorData.zoom || 1;
-        // Frames
-        if (editorData.frames) {
-            for (const frameData of editorData.frames) {
-                const frame = GraphFrame.Parse(frameData, this, editorData.map);
-                this._frames.push(frame);
-            }
-        }
-    }
-    reOrganize(editorData = null, isImportingAFrame = false) {
-        if (!editorData || !editorData.locations) {
-            this.distributeGraph();
-        }
-        else {
-            // Locations
-            for (const location of editorData.locations) {
-                for (const node of this.nodes) {
-                    const data = node.content.data;
-                    if (data && data.uniqueId === location.blockId) {
-                        node.x = location.x;
-                        node.y = location.y;
-                        node.cleanAccumulation();
-                        break;
-                    }
-                }
-            }
-            if (!isImportingAFrame) {
-                this.processEditorData(editorData);
-            }
-        }
-        this._isLoading = false;
-        for (const node of this.nodes) {
-            node._refreshLinks();
-        }
-    }
-    addFrame(frameData) {
-        const frame = GraphFrame.Parse(frameData, this, this.props.stateManager.getEditorDataMap());
-        this._frames.push(frame);
-        this.stateManager.onSelectionChangedObservable.notifyObservers({ selection: frame });
-    }
-    render() {
-        return (_jsx("div", { id: "graph-canvas", className: styles["graph-canvas"], onWheel: (evt) => this.onWheel(evt), onPointerMove: (evt) => this.onMove(evt), onPointerDown: (evt) => this.onDown(evt), onPointerUp: (evt) => this.onUp(evt), children: _jsxs("div", { id: "graph-container", className: styles["graph-container"], children: [_jsx("div", { id: "graph-canvas-container", className: styles["graph-canvas-container"] }), _jsx("div", { id: "frame-container", className: styles["frame-container"] }), _jsx("svg", { id: "graph-svg-container", className: styles["graph-svg-container"] }), _jsx("div", { id: "selection-container", className: styles["selection-container"] })] }) }));
-    }
-}
-GraphCanvasComponent.NodeWidth = 100;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GraphNode } from "./graphNode.js";
+import * as dagre from "dagre";
+import { NodeLink } from "./nodeLink.js";
+import { NodePort } from "./nodePort.js";
+import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
+import { GraphFrame } from "./graphFrame.js";
+import { FrameNodePort } from "./frameNodePort.js";
+import { PortDataDirection } from "./interfaces/portData.js";
+import styles from "./graphCanvas.modules.scss";
+import commonStyles from "./common.modules.scss";
+import { TypeLedger } from "./typeLedger.js";
+import { RefreshNode } from "./tools.js";
+export class GraphCanvasComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._minZoom = 0.1;
+        this._maxZoom = 4;
+        this._nodes = [];
+        this._links = [];
+        this._mouseStartPointX = null;
+        this._mouseStartPointY = null;
+        this._dropPointX = 0;
+        this._dropPointY = 0;
+        this._selectionStartX = 0;
+        this._selectionStartY = 0;
+        this._candidateLinkedHasMoved = false;
+        this._x = 0;
+        this._y = 0;
+        this._zoom = 1;
+        this._selectedNodes = [];
+        this._selectedLink = null;
+        this._selectedPort = null;
+        this._candidateLink = null;
+        this._candidatePort = null;
+        this._gridSize = 20;
+        this._selectionBox = null;
+        this._selectedFrames = [];
+        this._frameCandidate = null;
+        this._frames = [];
+        this._nodeDataContentList = new Array();
+        this._altKeyIsPressed = false;
+        this._multiKeyIsPressed = false;
+        this._oldY = -1;
+        this._frameIsMoving = false;
+        this._isLoading = false;
+        this._targetLinkCandidate = null;
+        this._copiedNodes = [];
+        this._copiedFrames = [];
+        props.stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection, forceKeepSelection, marqueeSelection = false } = options || {};
+            if (!selection) {
+                this._selectedNodes = [];
+                this._selectedLink = null;
+                this._selectedFrames = [];
+                this._selectedPort = null;
+            }
+            else {
+                if (selection instanceof NodeLink) {
+                    this._selectedNodes = [];
+                    this._selectedFrames = [];
+                    this._selectedLink = selection;
+                    this._selectedPort = null;
+                }
+                else if (selection instanceof NodePort) {
+                    this._selectedNodes = [];
+                    this._selectedFrames = [];
+                    this._selectedLink = null;
+                    this._selectedPort = selection;
+                }
+                else if (selection instanceof FrameNodePort) {
+                    this._selectedNodes = [];
+                    this._selectedFrames = [];
+                    this._selectedLink = null;
+                    this._selectedPort = selection;
+                }
+                else if (selection instanceof GraphNode || selection instanceof GraphFrame) {
+                    // If in marquee selection mode, always prioritize selecting nodes. Otherwise, always prioritize selecting the type of
+                    // the selected element
+                    if (marqueeSelection) {
+                        if (selection instanceof GraphFrame && !this._selectedFrames.includes(selection)) {
+                            this._selectedFrames.push(selection);
+                        }
+                        else if (selection instanceof GraphNode && !this._selectedNodes.includes(selection)) {
+                            this._selectedNodes.push(selection);
+                        }
+                        if (this._selectedFrameAndNodesConflict(this.selectedFrames, this.selectedNodes)) {
+                            const framesToRemove = new Set();
+                            for (const selectedNode of this._selectedNodes) {
+                                for (const selectedFrame of this._selectedFrames) {
+                                    if (selectedFrame.nodes.includes(selectedNode)) {
+                                        framesToRemove.add(selectedFrame);
+                                    }
+                                }
+                            }
+                            this._selectedFrames = this._selectedFrames.filter((f) => !framesToRemove.has(f));
+                        }
+                    }
+                    else {
+                        if (selection instanceof GraphFrame) {
+                            if (this._multiKeyIsPressed || forceKeepSelection) {
+                                if (!this._selectedFrameAndNodesConflict([selection], this._selectedNodes) && !this._selectedFrames.includes(selection)) {
+                                    this._selectedFrames.push(selection);
+                                }
+                            }
+                            else {
+                                this._selectedFrames = [selection];
+                                this._selectedNodes = [];
+                                this._selectedLink = null;
+                                this._selectedPort = null;
+                            }
+                        }
+                        else if (selection instanceof GraphNode) {
+                            if (this._multiKeyIsPressed || forceKeepSelection) {
+                                if (!this._selectedFrameAndNodesConflict(this._selectedFrames, [selection]) && !this._selectedNodes.includes(selection)) {
+                                    this._selectedNodes.push(selection);
+                                }
+                            }
+                            else {
+                                this._selectedFrames = [];
+                                this._selectedNodes = [selection];
+                                this._selectedLink = null;
+                                this._selectedPort = null;
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        props.stateManager.onCandidatePortSelectedObservable.add((port) => {
+            this._candidatePort = port;
+        });
+        props.stateManager.onGridSizeChanged.add(() => {
+            this.gridSize = DataStorage.ReadNumber("GridSize", 20);
+        });
+        this.props.stateManager.hostDocument.addEventListener("keyup", () => this.onKeyUp(), false);
+        this.props.stateManager.hostDocument.addEventListener("keydown", (evt) => {
+            this._altKeyIsPressed = evt.altKey;
+            this._multiKeyIsPressed = evt.ctrlKey || evt.metaKey;
+        }, false);
+        this.props.stateManager.hostDocument.defaultView.addEventListener("blur", () => {
+            this._altKeyIsPressed = false;
+            this._multiKeyIsPressed = false;
+        }, false);
+        // Store additional data to serialization object
+        this.props.stateManager.storeEditorData = (editorData, graphFrame) => {
+            editorData.frames = [];
+            if (graphFrame) {
+                editorData.frames.push(graphFrame.serialize(false));
+            }
+            else {
+                editorData.x = this.x;
+                editorData.y = this.y;
+                editorData.zoom = this.zoom;
+                for (const frame of this._frames) {
+                    editorData.frames.push(frame.serialize(true));
+                }
+            }
+        };
+    }
+    get gridSize() {
+        return this._gridSize;
+    }
+    set gridSize(value) {
+        this._gridSize = value;
+        this.updateTransform();
+    }
+    get stateManager() {
+        return this.props.stateManager;
+    }
+    get nodes() {
+        return this._nodes;
+    }
+    get links() {
+        return this._links;
+    }
+    get frames() {
+        return this._frames;
+    }
+    get zoom() {
+        return this._zoom;
+    }
+    set zoom(value) {
+        if (this._zoom === value) {
+            return;
+        }
+        this._zoom = value;
+        this.updateTransform();
+    }
+    get x() {
+        return this._x;
+    }
+    set x(value) {
+        this._x = value;
+        this.updateTransform();
+    }
+    get y() {
+        return this._y;
+    }
+    set y(value) {
+        this._y = value;
+        this.updateTransform();
+    }
+    get selectedNodes() {
+        return this._selectedNodes;
+    }
+    get selectedLink() {
+        return this._selectedLink;
+    }
+    get selectedFrames() {
+        return this._selectedFrames;
+    }
+    get selectedPort() {
+        return this._selectedPort;
+    }
+    get canvasContainer() {
+        return this._graphCanvas;
+    }
+    get hostCanvas() {
+        return this._hostCanvas;
+    }
+    get svgCanvas() {
+        return this._svgCanvas;
+    }
+    get selectionContainer() {
+        return this._selectionContainer;
+    }
+    get frameContainer() {
+        return this._frameContainer;
+    }
+    // There is a selection conflict between nodes and frames if any selected node is inside any selected frame
+    _selectedFrameAndNodesConflict(frameSelection, nodeSelection) {
+        for (const frame of frameSelection) {
+            for (const node of nodeSelection) {
+                if (frame.nodes.includes(node)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    populateConnectedEntriesBeforeRemoval(item, items, inputs, outputs) {
+        inputs.push(...item.content.inputs.filter((i) => i.isConnected && items.every((selected) => { var _a; return selected.content.data !== ((_a = i.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData); })).map((i) => i.connectedPort));
+        outputs.push(...item.content.outputs
+            .filter((i) => i.isConnected)
+            .map((i) => i.endpoints)
+            .flat()
+            .filter((i) => i && items.every((selected) => selected.content.data !== i.ownerData)));
+    }
+    automaticRewire(inputs, outputs, firstOnly = false) {
+        let oneConnectionFound = false;
+        if (outputs.length && inputs.length) {
+            inputs.forEach((input) => {
+                if (oneConnectionFound) {
+                    return;
+                }
+                if (!input) {
+                    return;
+                }
+                const output = outputs[0];
+                if (output && input.canConnectTo(output)) {
+                    const nodeInput = this.findNodeFromData(input.ownerData);
+                    const nodeOutput = this.findNodeFromData(output.ownerData);
+                    this.connectNodes(nodeInput, input, nodeOutput, output);
+                    outputs.shift();
+                    if (firstOnly) {
+                        oneConnectionFound = true;
+                        return;
+                    }
+                }
+            });
+        }
+    }
+    handleKeyDown(evt, onRemove, mouseLocationX, mouseLocationY, dataGenerator, rootElement) {
+        if ((evt.keyCode === 46 || evt.keyCode === 8) && !this.props.stateManager.lockObject.lock) {
+            // Delete
+            const selectedItems = this.selectedNodes;
+            const inputs = [];
+            const outputs = [];
+            if (selectedItems.length > 0) {
+                for (const selectedItem of selectedItems) {
+                    if (evt.altKey) {
+                        this.populateConnectedEntriesBeforeRemoval(selectedItem, selectedItems, inputs, outputs);
+                    }
+                    selectedItem.dispose();
+                    onRemove(selectedItem.content);
+                    this.removeDataFromCache(selectedItem.content.data);
+                }
+            }
+            if (this.selectedLink) {
+                this.selectedLink.dispose();
+            }
+            if (this.selectedFrames.length) {
+                for (const frame of this.selectedFrames) {
+                    if (frame.isCollapsed) {
+                        while (frame.nodes.length > 0) {
+                            onRemove(frame.nodes[0].content);
+                            this.removeDataFromCache(frame.nodes[0].content.data);
+                            frame.nodes[0].dispose();
+                        }
+                        frame.isCollapsed = false;
+                    }
+                    else {
+                        frame.nodes.forEach((node) => {
+                            node.enclosingFrameId = -1;
+                        });
+                    }
+                    frame.dispose();
+                }
+            }
+            // Reconnect if required
+            this.automaticRewire(inputs, outputs);
+            this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
+            this.props.stateManager.onRebuildRequiredObservable.notifyObservers(false);
+            return;
+        }
+        if ((!evt.ctrlKey && !evt.metaKey) || this.props.stateManager.lockObject.lock) {
+            return;
+        }
+        if (evt.key === "c" || evt.key === "C") {
+            // Copy
+            this._copiedNodes = [];
+            this._copiedFrames = [];
+            if (this.selectedFrames.length) {
+                for (const frame of this.selectedFrames) {
+                    frame.serialize(true);
+                    this._copiedFrames.push(frame);
+                }
+                return;
+            }
+            const selectedItems = this.selectedNodes;
+            if (!selectedItems.length) {
+                return;
+            }
+            const selectedItem = selectedItems[0];
+            if (!selectedItem.content.data) {
+                return;
+            }
+            this._copiedNodes = selectedItems.slice(0);
+        }
+        else if (evt.key === "v" || evt.key === "V") {
+            // Paste
+            const zoomLevel = this.zoom;
+            let currentY = (mouseLocationY - rootElement.offsetTop - this.y - 20) / zoomLevel;
+            if (this._copiedFrames.length) {
+                for (const frame of this._copiedFrames) {
+                    // New frame
+                    const newFrame = new GraphFrame(null, this, true);
+                    this.frames.push(newFrame);
+                    newFrame.width = frame.width;
+                    newFrame.height = frame.height;
+                    newFrame.width / 2;
+                    newFrame.name = frame.name;
+                    newFrame.color = frame.color;
+                    let currentX = (mouseLocationX - rootElement.offsetLeft - this.x) / zoomLevel;
+                    newFrame.x = currentX - newFrame.width / 2;
+                    newFrame.y = currentY;
+                    // Paste nodes
+                    if (frame.nodes.length) {
+                        currentX = newFrame.x + frame.nodes[0].x - frame.x;
+                        currentY = newFrame.y + frame.nodes[0].y - frame.y;
+                        this._frameIsMoving = true;
+                        const newNodes = this.pasteSelection(frame.nodes, currentX, currentY, dataGenerator);
+                        if (newNodes) {
+                            for (const node of newNodes) {
+                                newFrame.syncNode(node);
+                            }
+                        }
+                        this._frameIsMoving = false;
+                    }
+                    newFrame.adjustPorts();
+                    if (frame.isCollapsed) {
+                        newFrame.isCollapsed = true;
+                    }
+                    // Select
+                    this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: newFrame, forceKeepSelection: true });
+                    return;
+                }
+            }
+            if (!this._copiedNodes.length) {
+                return;
+            }
+            const currentX = (mouseLocationX - rootElement.offsetLeft - this.x - GraphCanvasComponent.NodeWidth) / zoomLevel;
+            this.pasteSelection(this._copiedNodes, currentX, currentY, dataGenerator, true);
+        }
+    }
+    pasteSelection(copiedNodes, currentX, currentY, dataGenerator, selectNew = false) {
+        let originalNode = null;
+        const newNodes = [];
+        // Copy to prevent recursive side effects while creating nodes.
+        copiedNodes = copiedNodes.slice();
+        // Cancel selection
+        this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
+        // Create new nodes
+        for (const node of copiedNodes) {
+            const data = node.content.data;
+            if (!data) {
+                continue;
+            }
+            const newNode = dataGenerator(node.content);
+            let x = 0;
+            let y = 0;
+            if (originalNode) {
+                x = currentX + node.x - originalNode.x;
+                y = currentY + node.y - originalNode.y;
+            }
+            else {
+                originalNode = node;
+                x = currentX;
+                y = currentY;
+            }
+            newNode.x = x;
+            newNode.y = y;
+            newNode.cleanAccumulation();
+            newNodes.push(newNode);
+            if (selectNew) {
+                this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: newNode, forceKeepSelection: true });
+            }
+        }
+        // Relink
+        const done = new Array(newNodes.length);
+        for (let index = 0; index < newNodes.length; index++) {
+            this.reconnectNewNodes(index, newNodes, copiedNodes, done);
+        }
+        return newNodes;
+    }
+    reconnectNewNodes(nodeIndex, newNodes, sourceNodes, done) {
+        if (done[nodeIndex]) {
+            return;
+        }
+        const currentNode = newNodes[nodeIndex];
+        const sourceNode = sourceNodes[nodeIndex];
+        for (let inputIndex = 0; inputIndex < sourceNode.content.inputs.length; inputIndex++) {
+            const sourceInput = sourceNode.content.inputs[inputIndex];
+            const currentInput = currentNode.content.inputs[inputIndex];
+            if (!sourceInput.isConnected) {
+                continue;
+            }
+            const sourceContent = this.findNodeFromData(sourceInput.connectedPort.ownerData).content;
+            const activeNodes = sourceNodes.filter((s) => s.content === sourceContent);
+            if (activeNodes.length > 0) {
+                const activeNode = activeNodes[0];
+                const indexInList = sourceNodes.indexOf(activeNode);
+                // First make sure to connect the other one
+                this.reconnectNewNodes(indexInList, newNodes, sourceNodes, done);
+                // Then reconnect
+                const outputIndex = sourceContent.outputs.indexOf(sourceInput.connectedPort);
+                const newOutput = newNodes[indexInList].content.data.outputs[outputIndex];
+                newOutput.connectTo(currentInput.data);
+            }
+            else {
+                // Connect with outside nodes
+                sourceInput.connectedPort.connectTo(currentInput);
+            }
+            this.connectPorts(currentInput.connectedPort, currentInput);
+        }
+        currentNode.refresh();
+        done[nodeIndex] = true;
+    }
+    getCachedData() {
+        return this._nodeDataContentList;
+    }
+    removeDataFromCache(data) {
+        const dataIndex = this._nodeDataContentList.indexOf(data);
+        if (dataIndex > -1) {
+            this._nodeDataContentList.splice(dataIndex, 1);
+        }
+    }
+    createNodeFromObject(nodeData, onNodeCreated, recursion = true) {
+        if (this._nodeDataContentList.indexOf(nodeData.data) !== -1) {
+            // Links
+            if (nodeData.inputs.length && recursion) {
+                for (const input of nodeData.inputs) {
+                    if (input.isConnected) {
+                        this.connectPorts(input.connectedPort, input);
+                    }
+                }
+            }
+            return this.nodes.filter((n) => n.content.data === nodeData.data)[0];
+        }
+        onNodeCreated(nodeData.data);
+        // Connections
+        if (nodeData.inputs.length) {
+            for (const input of nodeData.inputs) {
+                if (input.connectedPort && recursion) {
+                    this.createNodeFromObject(TypeLedger.NodeDataBuilder(input.connectedPort.ownerData, this), onNodeCreated);
+                }
+            }
+        }
+        // Graph
+        const node = this.appendNode(nodeData);
+        // Links
+        if (nodeData.inputs.length && recursion) {
+            for (const input of nodeData.inputs) {
+                if (input.isConnected) {
+                    this.connectPorts(input.connectedPort, input);
+                }
+            }
+        }
+        return node;
+    }
+    getGridPosition(position, useCeil = false) {
+        const gridSize = this.gridSize;
+        if (gridSize === 0) {
+            return position;
+        }
+        if (useCeil) {
+            return gridSize * Math.ceil(position / gridSize);
+        }
+        return gridSize * Math.floor(position / gridSize);
+    }
+    getGridPositionCeil(position) {
+        const gridSize = this.gridSize;
+        if (gridSize === 0) {
+            return position;
+        }
+        return gridSize * Math.ceil(position / gridSize);
+    }
+    updateTransform() {
+        this._rootContainer.style.transform = `translate(${this._x}px, ${this._y}px) scale(${this._zoom})`;
+        if (DataStorage.ReadBoolean("ShowGrid", true)) {
+            this._hostCanvas.style.backgroundSize = `${this._gridSize * this._zoom}px ${this._gridSize * this._zoom}px`;
+            this._hostCanvas.style.backgroundPosition = `${this._x}px ${this._y}px`;
+        }
+        else {
+            this._hostCanvas.style.backgroundSize = `0`;
+        }
+    }
+    onKeyUp() {
+        this._altKeyIsPressed = false;
+        this._multiKeyIsPressed = false;
+        this._oldY = -1;
+    }
+    findNodeFromData(data) {
+        return this.nodes.filter((n) => n.content.data === data)[0];
+    }
+    reset() {
+        this._nodeDataContentList = [];
+        for (const node of this._nodes) {
+            node.dispose();
+        }
+        const frames = this._frames.splice(0);
+        for (const frame of frames) {
+            frame.dispose();
+        }
+        this._nodes = [];
+        this._frames = [];
+        this._links = [];
+        this._graphCanvas.innerHTML = "";
+        this._svgCanvas.innerHTML = "";
+    }
+    connectPorts(pointA, pointB) {
+        if (!pointA || !pointB) {
+            return;
+        }
+        const ownerDataA = pointA.ownerData;
+        const ownerDataB = pointB.ownerData;
+        const nodeA = this.findNodeFromData(ownerDataA);
+        const nodeB = this.findNodeFromData(ownerDataB);
+        if (!nodeA || !nodeB) {
+            return;
+        }
+        const portA = nodeA.getPortForPortData(pointA);
+        const portB = nodeB.getPortForPortData(pointB);
+        if (!portA || !portB) {
+            return;
+        }
+        for (const currentLink of this._links) {
+            if (currentLink.portA === portA && currentLink.portB === portB) {
+                return;
+            }
+            if (currentLink.portA === portB && currentLink.portB === portA) {
+                return;
+            }
+        }
+        const link = new NodeLink(this, portA, nodeA, portB, nodeB);
+        this._links.push(link);
+        nodeA.links.push(link);
+        nodeB.links.push(link);
+    }
+    removeLink(link) {
+        const index = this._links.indexOf(link);
+        if (index > -1) {
+            this._links.splice(index, 1);
+        }
+        link.dispose();
+    }
+    appendNode(nodeData) {
+        const newNode = new GraphNode(nodeData, this.props.stateManager);
+        newNode.appendVisual(this._graphCanvas, this);
+        this._nodes.push(newNode);
+        this._nodeDataContentList.push(nodeData.data);
+        return newNode;
+    }
+    distributeGraph() {
+        this.x = 0;
+        this.y = 0;
+        this.zoom = 1;
+        const graph = new dagre.graphlib.Graph();
+        graph.setGraph({});
+        graph.setDefaultEdgeLabel(() => ({}));
+        graph.graph().rankdir = "LR";
+        // Build dagre graph
+        this._nodes.forEach((node) => {
+            if (this._frames.some((f) => f.nodes.indexOf(node) !== -1)) {
+                return;
+            }
+            graph.setNode(node.id.toString(), {
+                id: node.id,
+                type: "node",
+                width: node.width,
+                height: node.height,
+            });
+        });
+        this._frames.forEach((frame) => {
+            graph.setNode(frame.id.toString(), {
+                id: frame.id,
+                type: "frame",
+                width: frame.element.clientWidth,
+                height: frame.element.clientHeight,
+            });
+        });
+        this._nodes.forEach((node) => {
+            node.content.outputs.forEach((output) => {
+                if (!output.hasEndpoints) {
+                    return;
+                }
+                output.endpoints.forEach((endpoint) => {
+                    const sourceFrames = this._frames.filter((f) => f.nodes.indexOf(node) !== -1);
+                    const targetFrames = this._frames.filter((f) => f.nodes.some((n) => n.content.data === endpoint.ownerData));
+                    const sourceId = sourceFrames.length > 0 ? sourceFrames[0].id : node.id;
+                    const targetId = targetFrames.length > 0 ? targetFrames[0].id : endpoint.ownerData.uniqueId;
+                    graph.setEdge(sourceId.toString(), targetId.toString());
+                });
+            });
+        });
+        // Distribute
+        dagre.layout(graph);
+        // Update graph
+        const dagreNodes = graph.nodes().map((node) => graph.node(node));
+        dagreNodes.forEach((dagreNode) => {
+            if (!dagreNode) {
+                return;
+            }
+            if (dagreNode.type === "node") {
+                for (const node of this._nodes) {
+                    if (node.id === dagreNode.id) {
+                        node.x = dagreNode.x - dagreNode.width / 2;
+                        node.y = dagreNode.y - dagreNode.height / 2;
+                        node.cleanAccumulation();
+                        return;
+                    }
+                }
+                return;
+            }
+            for (const frame of this._frames) {
+                if (frame.id === dagreNode.id) {
+                    this._frameIsMoving = true;
+                    frame.move(dagreNode.x - dagreNode.width / 2, dagreNode.y - dagreNode.height / 2, false);
+                    frame.cleanAccumulation();
+                    this._frameIsMoving = false;
+                    return;
+                }
+            }
+        });
+    }
+    componentDidMount() {
+        this._hostCanvas = this.props.stateManager.hostDocument.getElementById("graph-canvas");
+        this._rootContainer = this.props.stateManager.hostDocument.getElementById("graph-container");
+        this._graphCanvas = this.props.stateManager.hostDocument.getElementById("graph-canvas-container");
+        this._svgCanvas = this.props.stateManager.hostDocument.getElementById("graph-svg-container");
+        this._selectionContainer = this.props.stateManager.hostDocument.getElementById("selection-container");
+        this._frameContainer = this.props.stateManager.hostDocument.getElementById("frame-container");
+        this.gridSize = DataStorage.ReadNumber("GridSize", 20);
+        this.updateTransform();
+    }
+    onMove(evt) {
+        // Selection box
+        if (this._selectionBox) {
+            const rootRect = this.canvasContainer.getBoundingClientRect();
+            const localX = evt.pageX - rootRect.left;
+            const localY = evt.pageY - rootRect.top;
+            if (localX > this._selectionStartX) {
+                this._selectionBox.style.left = `${this._selectionStartX / this.zoom}px`;
+                this._selectionBox.style.width = `${(localX - this._selectionStartX) / this.zoom}px`;
+            }
+            else {
+                this._selectionBox.style.left = `${localX / this.zoom}px`;
+                this._selectionBox.style.width = `${(this._selectionStartX - localX) / this.zoom}px`;
+            }
+            if (localY > this._selectionStartY) {
+                this._selectionBox.style.top = `${this._selectionStartY / this.zoom}px`;
+                this._selectionBox.style.height = `${(localY - this._selectionStartY) / this.zoom}px`;
+            }
+            else {
+                this._selectionBox.style.top = `${localY / this.zoom}px`;
+                this._selectionBox.style.height = `${(this._selectionStartY - localY) / this.zoom}px`;
+            }
+            this.props.stateManager.onSelectionBoxMoved.notifyObservers(this._selectionBox.getBoundingClientRect());
+            return;
+        }
+        // Candidate frame box
+        if (this._frameCandidate) {
+            const rootRect = this.canvasContainer.getBoundingClientRect();
+            const localX = evt.pageX - rootRect.left;
+            const localY = evt.pageY - rootRect.top;
+            if (localX > this._selectionStartX) {
+                this._frameCandidate.style.left = `${this._selectionStartX / this.zoom}px`;
+                this._frameCandidate.style.width = `${(localX - this._selectionStartX) / this.zoom}px`;
+            }
+            else {
+                this._frameCandidate.style.left = `${localX / this.zoom}px`;
+                this._frameCandidate.style.width = `${(this._selectionStartX - localX) / this.zoom}px`;
+            }
+            if (localY > this._selectionStartY) {
+                this._frameCandidate.style.top = `${this._selectionStartY / this.zoom}px`;
+                this._frameCandidate.style.height = `${(localY - this._selectionStartY) / this.zoom}px`;
+            }
+            else {
+                this._frameCandidate.style.top = `${localY / this.zoom}px`;
+                this._frameCandidate.style.height = `${(this._selectionStartY - localY) / this.zoom}px`;
+            }
+            return;
+        }
+        // Candidate link
+        if (this._candidateLink) {
+            const rootRect = this.canvasContainer.getBoundingClientRect();
+            this._candidatePort = null;
+            this.props.stateManager.onCandidateLinkMoved.notifyObservers(new Vector2(evt.pageX, evt.pageY));
+            this._dropPointX = (evt.pageX - rootRect.left) / this.zoom;
+            this._dropPointY = (evt.pageY - rootRect.top) / this.zoom;
+            this._candidateLink.update(this._dropPointX, this._dropPointY, true);
+            this._candidateLinkedHasMoved = true;
+            return;
+        }
+        // Zoom with mouse + alt
+        if (this._altKeyIsPressed && evt.buttons === 1) {
+            if (this._oldY < 0) {
+                this._oldY = evt.pageY;
+            }
+            const zoomDelta = (evt.pageY - this._oldY) / 10;
+            if (Math.abs(zoomDelta) > 5) {
+                const oldZoom = this.zoom;
+                this.zoom = Math.max(Math.min(this._maxZoom, this.zoom + zoomDelta / 100), this._minZoom);
+                const boundingRect = evt.currentTarget.getBoundingClientRect();
+                const clientWidth = boundingRect.width;
+                const widthDiff = clientWidth * this.zoom - clientWidth * oldZoom;
+                const clientX = evt.clientX - boundingRect.left;
+                const xFactor = (clientX - this.x) / oldZoom / clientWidth;
+                this.x = this.x - widthDiff * xFactor;
+                this._oldY = evt.pageY;
+            }
+            return;
+        }
+        // Move canvas
+        this._rootContainer.style.cursor = "move";
+        if (this._mouseStartPointX === null || this._mouseStartPointY === null) {
+            return;
+        }
+        this.x += evt.clientX - this._mouseStartPointX;
+        this.y += evt.clientY - this._mouseStartPointY;
+        this._mouseStartPointX = evt.clientX;
+        this._mouseStartPointY = evt.clientY;
+    }
+    onDown(evt) {
+        this._rootContainer.setPointerCapture(evt.pointerId);
+        // Port dragging
+        if (evt.nativeEvent.srcElement && evt.nativeEvent.srcElement.nodeName === "IMG") {
+            if (!this._candidateLink) {
+                const portElement = evt.nativeEvent.srcElement.parentElement.port;
+                if (this._altKeyIsPressed && (portElement.portData.isConnected || portElement.portData.hasEndpoints)) {
+                    const node = portElement.node;
+                    // Delete connection
+                    const links = node.getLinksForPortData(portElement.portData);
+                    links.forEach((link) => {
+                        link.dispose(false);
+                    });
+                    // Pick the first one as target port
+                    const targetNode = links[0].nodeA === node ? links[0].nodeB : links[0].nodeA;
+                    const targetPort = links[0].nodeA === node ? links[0].portB : links[0].portA;
+                    // Start a new one
+                    this._candidateLink = new NodeLink(this, targetPort, targetNode);
+                }
+                else if (this._multiKeyIsPressed && (portElement.portData.isConnected || portElement.portData.hasEndpoints)) {
+                    const node = portElement.node;
+                    const links = node.getLinksForPortData(portElement.portData);
+                    // Pick the first one as target port
+                    const linkToConsider = this._selectedLink || links[0];
+                    const targetNode = linkToConsider.nodeA === node ? linkToConsider.nodeB : linkToConsider.nodeA;
+                    const targetPort = linkToConsider.nodeA === node ? linkToConsider.portB : linkToConsider.portA;
+                    // Start a new one
+                    this._candidateLink = new NodeLink(this, targetPort, targetNode);
+                }
+                else {
+                    this._candidateLink = new NodeLink(this, portElement, portElement.node);
+                }
+                this._candidateLinkedHasMoved = false;
+            }
+            return;
+        }
+        // Selection?
+        if (evt.currentTarget === this._hostCanvas && this._multiKeyIsPressed) {
+            this._selectionBox = this.props.stateManager.hostDocument.createElement("div");
+            this._selectionBox.classList.add(styles["selection-box"]);
+            this._selectionContainer.appendChild(this._selectionBox);
+            const rootRect = this.canvasContainer.getBoundingClientRect();
+            this._selectionStartX = evt.pageX - rootRect.left;
+            this._selectionStartY = evt.pageY - rootRect.top;
+            this._selectionBox.style.left = `${this._selectionStartX / this.zoom}px`;
+            this._selectionBox.style.top = `${this._selectionStartY / this.zoom}px`;
+            this._selectionBox.style.width = "0px";
+            this._selectionBox.style.height = "0px";
+            return;
+        }
+        // Frame?
+        if (evt.currentTarget === this._hostCanvas && evt.shiftKey) {
+            this._frameCandidate = this.props.stateManager.hostDocument.createElement("div");
+            this._frameCandidate.classList.add(commonStyles["frame-box"]);
+            this._frameContainer.appendChild(this._frameCandidate);
+            const rootRect = this.canvasContainer.getBoundingClientRect();
+            this._selectionStartX = evt.pageX - rootRect.left;
+            this._selectionStartY = evt.pageY - rootRect.top;
+            this._frameCandidate.style.left = `${this._selectionStartX / this.zoom}px`;
+            this._frameCandidate.style.top = `${this._selectionStartY / this.zoom}px`;
+            this._frameCandidate.style.width = "0px";
+            this._frameCandidate.style.height = "0px";
+            return;
+        }
+        this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
+        this._mouseStartPointX = evt.clientX;
+        this._mouseStartPointY = evt.clientY;
+    }
+    onUp(evt) {
+        this._mouseStartPointX = null;
+        this._mouseStartPointY = null;
+        this._rootContainer.releasePointerCapture(evt.pointerId);
+        this._oldY = -1;
+        if (this._candidateLink) {
+            if (this._candidateLinkedHasMoved) {
+                this.processCandidatePort();
+                this.props.stateManager.onCandidateLinkMoved.notifyObservers(null);
+            }
+            else {
+                // is a click event on NodePort
+                if (this._candidateLink.portA instanceof FrameNodePort) {
+                    //only on Frame Node Ports
+                    const port = this._candidateLink.portA;
+                    const frame = this.frames.find((frame) => frame.id === port.parentFrameId);
+                    if (frame) {
+                        const data = {
+                            frame,
+                            port,
+                        };
+                        this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: data });
+                    }
+                }
+                else if (this._candidateLink.portA instanceof NodePort) {
+                    this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: this._candidateLink.portA });
+                }
+            }
+            this._candidateLink.dispose();
+            this._candidateLink = null;
+            this._candidatePort = null;
+        }
+        if (this._selectionBox) {
+            this._selectionBox.parentElement.removeChild(this._selectionBox);
+            this._selectionBox = null;
+        }
+        if (this._frameCandidate) {
+            const newFrame = new GraphFrame(this._frameCandidate, this);
+            this._frames.push(newFrame);
+            this._frameCandidate.parentElement.removeChild(this._frameCandidate);
+            this._frameCandidate = null;
+            this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: newFrame });
+        }
+    }
+    onWheel(evt) {
+        const delta = evt.deltaY < 0 ? 0.1 : -0.1;
+        const oldZoom = this.zoom;
+        this.zoom = Math.min(Math.max(this._minZoom, this.zoom + delta * this.zoom), this._maxZoom);
+        const boundingRect = evt.currentTarget.getBoundingClientRect();
+        const clientWidth = boundingRect.width;
+        const clientHeight = boundingRect.height;
+        const widthDiff = clientWidth * this.zoom - clientWidth * oldZoom;
+        const heightDiff = clientHeight * this.zoom - clientHeight * oldZoom;
+        const clientX = evt.clientX - boundingRect.left;
+        const clientY = evt.clientY - boundingRect.top;
+        const xFactor = (clientX - this.x) / oldZoom / clientWidth;
+        const yFactor = (clientY - this.y) / oldZoom / clientHeight;
+        this.x = this.x - widthDiff * xFactor;
+        this.y = this.y - heightDiff * yFactor;
+    }
+    zoomToFit() {
+        // Get negative offset
+        let minX = 0;
+        let minY = 0;
+        this._nodes.forEach((node) => {
+            if (this._frames.some((f) => f.nodes.indexOf(node) !== -1)) {
+                return;
+            }
+            if (node.x < minX) {
+                minX = node.x;
+            }
+            if (node.y < minY) {
+                minY = node.y;
+            }
+        });
+        this._frames.forEach((frame) => {
+            if (frame.x < minX) {
+                minX = frame.x;
+            }
+            if (frame.y < minY) {
+                minY = frame.y;
+            }
+        });
+        // Restore to 0
+        this._frames.forEach((frame) => {
+            frame.x += -minX;
+            frame.y += -minY;
+            frame.cleanAccumulation();
+        });
+        this._nodes.forEach((node) => {
+            node.x += -minX;
+            node.y += -minY;
+            node.cleanAccumulation();
+        });
+        // Get correct zoom
+        const xFactor = this._rootContainer.clientWidth / this._rootContainer.scrollWidth;
+        const yFactor = this._rootContainer.clientHeight / this._rootContainer.scrollHeight;
+        const zoomFactor = xFactor < yFactor ? xFactor : yFactor;
+        this.zoom = zoomFactor;
+        this.x = 0;
+        this.y = 0;
+    }
+    processCandidatePort() {
+        let pointB = this._candidateLink.portA.portData;
+        let nodeB = this._candidateLink.portA.node;
+        let pointA;
+        let nodeA;
+        if (this._candidatePort) {
+            pointA = this._candidatePort.portData;
+            nodeA = this._candidatePort.node;
+        }
+        else {
+            if (pointB.direction === PortDataDirection.Output) {
+                return;
+            }
+            // No destination so let's spin a new input node
+            const newDefaultInput = this.props.stateManager.createDefaultInputData(this.props.stateManager.data, this._candidateLink.portA.portData, this);
+            if (!newDefaultInput) {
+                return;
+            }
+            const pointName = newDefaultInput.name;
+            const emittedNodeData = newDefaultInput.data;
+            pointA = emittedNodeData.getPortByName(pointName);
+            if (!emittedNodeData.isInput) {
+                nodeA = this.props.onEmitNewNode(emittedNodeData);
+            }
+            else {
+                nodeA = this.appendNode(emittedNodeData);
+            }
+            nodeA.x = this._dropPointX - 200;
+            nodeA.y = this._dropPointY - 50;
+            const x = nodeA.x - 250;
+            let y = nodeA.y;
+            emittedNodeData.inputs.forEach((portData) => {
+                if (portData.connectedPort) {
+                    const existingNodes = this.nodes.filter((n) => {
+                        var _a;
+                        return n.content.data === ((_a = portData.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData);
+                    });
+                    const connectedNode = existingNodes[0];
+                    if (connectedNode.x === 0 && connectedNode.y === 0) {
+                        connectedNode.x = x;
+                        connectedNode.y = y;
+                        connectedNode.cleanAccumulation();
+                        y += 80;
+                    }
+                }
+            });
+        }
+        if (pointA.direction === PortDataDirection.Input) {
+            const temp = pointB;
+            pointB = pointA;
+            pointA = temp;
+            const tempNode = nodeA;
+            nodeA = nodeB;
+            nodeB = tempNode;
+        }
+        if (pointB.connectedPort === pointA) {
+            return;
+        }
+        if (pointB === pointA) {
+            return;
+        }
+        if (pointB.direction === pointA.direction) {
+            return;
+        }
+        if (pointB.ownerData === pointA.ownerData) {
+            return;
+        }
+        // Check compatibility
+        let compatibilityState = pointA.checkCompatibilityState(pointB);
+        if ((pointA.needDualDirectionValidation || pointB.needDualDirectionValidation) && !compatibilityState) {
+            compatibilityState = pointB.checkCompatibilityState(pointA);
+        }
+        const message = pointA.getCompatibilityIssueMessage(compatibilityState, nodeB, pointB);
+        if (message) {
+            this.props.stateManager.onErrorMessageDialogRequiredObservable.notifyObservers(message);
+            return;
+        }
+        let linksToNotifyForDispose = null;
+        if (pointB.isConnected) {
+            const links = nodeB.getLinksForPortData(pointB);
+            linksToNotifyForDispose = links.slice();
+            links.forEach((link) => {
+                link.dispose(false);
+            });
+        }
+        if (pointB.ownerData.inputsAreExclusive) {
+            // Disconnect all inputs if node has exclusive inputs
+            pointB.ownerData.inputs.forEach((i) => {
+                const links = nodeB.getLinksForPortData(i);
+                if (!linksToNotifyForDispose) {
+                    linksToNotifyForDispose = links.slice();
+                }
+                else {
+                    linksToNotifyForDispose.push(...links.slice());
+                }
+                links.forEach((link) => {
+                    link.dispose(false);
+                });
+            });
+        }
+        this.connectNodes(nodeA, pointA, nodeB, pointB);
+        linksToNotifyForDispose === null || linksToNotifyForDispose === void 0 ? void 0 : linksToNotifyForDispose.forEach((link) => {
+            link.onDisposedObservable.notifyObservers(link);
+            link.onDisposedObservable.clear();
+        });
+        this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
+    }
+    connectNodes(nodeA, pointA, nodeB, pointB) {
+        pointA.connectTo(pointB);
+        this.connectPorts(pointA, pointB);
+        // Need to potentially propagate the type of pointA to other ports of nodes connected to owner of pointB
+        // We also need to check if we want to display the promotion warning
+        const visitedNodes = new Set([nodeA]);
+        const visitedLinks = new Set([nodeB.links[nodeB.links.length - 1]]);
+        RefreshNode(nodeB, visitedNodes, visitedLinks);
+    }
+    drop(newNode, targetX, targetY, offsetX, offsetY) {
+        let x = targetX - this.x - offsetX * this.zoom;
+        let y = targetY - this.y - offsetY * this.zoom;
+        newNode.x = x / this.zoom;
+        newNode.y = y / this.zoom;
+        newNode.cleanAccumulation();
+        this.props.stateManager.onNewNodeCreatedObservable.notifyObservers(newNode);
+        this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
+        this.props.stateManager.onSelectionChangedObservable.notifyObservers({ selection: newNode });
+        x -= GraphCanvasComponent.NodeWidth + 150;
+        newNode.content.inputs.forEach((portData) => {
+            if (portData.connectedPort) {
+                const existingNodes = this.nodes.filter((n) => {
+                    var _a;
+                    return n.content.data === ((_a = portData.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData);
+                });
+                const connectedNode = existingNodes[0];
+                if (connectedNode.x === 0 && connectedNode.y === 0) {
+                    connectedNode.x = x / this.zoom;
+                    connectedNode.y = y / this.zoom;
+                    connectedNode.cleanAccumulation();
+                    y += 80;
+                }
+            }
+        });
+    }
+    processEditorData(editorData) {
+        const frames = this._frames.splice(0);
+        for (const frame of frames) {
+            frame.dispose();
+        }
+        this._frames = [];
+        this.x = editorData.x || 0;
+        this.y = editorData.y || 0;
+        this.zoom = editorData.zoom || 1;
+        // Frames
+        if (editorData.frames) {
+            for (const frameData of editorData.frames) {
+                const frame = GraphFrame.Parse(frameData, this, editorData.map);
+                this._frames.push(frame);
+            }
+        }
+    }
+    reOrganize(editorData = null, isImportingAFrame = false) {
+        if (!editorData || !editorData.locations) {
+            this.distributeGraph();
+        }
+        else {
+            // Locations
+            for (const location of editorData.locations) {
+                for (const node of this.nodes) {
+                    const data = node.content.data;
+                    if (data && data.uniqueId === location.blockId) {
+                        node.x = location.x;
+                        node.y = location.y;
+                        node.cleanAccumulation();
+                        break;
+                    }
+                }
+            }
+            if (!isImportingAFrame) {
+                this.processEditorData(editorData);
+            }
+        }
+        this._isLoading = false;
+        for (const node of this.nodes) {
+            node._refreshLinks();
+        }
+    }
+    addFrame(frameData) {
+        const frame = GraphFrame.Parse(frameData, this, this.props.stateManager.getEditorDataMap());
+        this._frames.push(frame);
+        this.stateManager.onSelectionChangedObservable.notifyObservers({ selection: frame });
+    }
+    render() {
+        return (_jsx("div", { id: "graph-canvas", className: styles["graph-canvas"], onWheel: (evt) => this.onWheel(evt), onPointerMove: (evt) => this.onMove(evt), onPointerDown: (evt) => this.onDown(evt), onPointerUp: (evt) => this.onUp(evt), children: _jsxs("div", { id: "graph-container", className: styles["graph-container"], children: [_jsx("div", { id: "graph-canvas-container", className: styles["graph-canvas-container"] }), _jsx("div", { id: "frame-container", className: styles["frame-container"] }), _jsx("svg", { id: "graph-svg-container", className: styles["graph-svg-container"] }), _jsx("div", { id: "selection-container", className: styles["selection-container"] })] }) }));
+    }
+}
+GraphCanvasComponent.NodeWidth = 100;
 //# sourceMappingURL=graphCanvas.js.map