@babylonjs/node-editor 5.45.2 → 5.46.0

package/dist/babylon.nodeEditor.max.js

@@ -48759,11 +48759,6 @@ __webpack_require__.r(__webpack_exports__);
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const Null_Value = Number.MAX_SAFE_INTEGER;
 class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
-    constructor(props) {
-        super(props);
-        this._localChange = false;
-        this.state = { value: this._remapValueIn(this._getValue(props)) };
-    }
     _remapValueIn(value) {
         return this.props.allowNullValue && value === null ? Null_Value : value;
     }
@@ -48776,6 +48771,11 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         }
         return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];
     }
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        this.state = { value: this._remapValueIn(this._getValue(props)) };
+    }
     shouldComponentUpdate(nextProps, nextState) {
         if (this._localChange) {
             this._localChange = false;
@@ -49544,25 +49544,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class FrameNodePort extends _nodePort__WEBPACK_IMPORTED_MODULE_1__.NodePort {
-    constructor(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId) {
-        super(portContainer, portData, node, stateManager);
-        this.portData = portData;
-        this.node = node;
-        this._onFramePortPositionChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
-        this._parentFrameId = parentFrameId;
-        this._isInput = isInput;
-        this._framePortId = framePortId;
-        this._onSelectionChangedObserver = stateManager.onSelectionChangedObservable.add((options) => {
-            const { selection } = options || {};
-            if ((0,_tools__WEBPACK_IMPORTED_MODULE_2__.IsFramePortData)(selection) && selection.port === this) {
-                this._img.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
-            }
-            else {
-                this._img.classList.remove(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
-            }
-        });
-        this.refresh();
-    }
     get parentFrameId() {
         return this._parentFrameId;
     }
@@ -49582,6 +49563,25 @@ class FrameNodePort extends _nodePort__WEBPACK_IMPORTED_MODULE_1__.NodePort {
         this._framePortPosition = position;
         this.onFramePortPositionChangedObservable.notifyObservers(this);
     }
+    constructor(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId) {
+        super(portContainer, portData, node, stateManager);
+        this.portData = portData;
+        this.node = node;
+        this._onFramePortPositionChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
+        this._parentFrameId = parentFrameId;
+        this._isInput = isInput;
+        this._framePortId = framePortId;
+        this._onSelectionChangedObserver = stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection } = options || {};
+            if ((0,_tools__WEBPACK_IMPORTED_MODULE_2__.IsFramePortData)(selection) && selection.port === this) {
+                this._img.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+            }
+            else {
+                this._img.classList.remove(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+            }
+        });
+        this.refresh();
+    }
     static CreateFrameNodePortElement(portData, node, root, displayManager, stateManager, isInput, framePortId, parentFrameId) {
         const portContainer = root.ownerDocument.createElement("div");
         portContainer.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].portLine);
@@ -49647,6 +49647,87 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
+    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;
+    }
     constructor(props) {
         super(props);
         this._minZoom = 0.1;
@@ -49799,87 +49880,6 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             }
         };
     }
-    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) => selected.content.data !== i.connectedPort?.ownerData)).map((i) => i.connectedPort));
         outputs.push(...item.content.outputs
@@ -50876,945 +50876,945 @@ var FramePortPosition;
     FramePortPosition[FramePortPosition["Bottom"] = 2] = "Bottom";
 })(FramePortPosition || (FramePortPosition = {}));
 class GraphFrame {
-    constructor(candidate, canvas, doNotCaptureNodes = false) {
-        this._collapsedWidth = 200;
-        this._x = 0;
-        this._y = 0;
-        this._gridAlignedX = 0;
-        this._gridAlignedY = 0;
-        this._nodes = [];
-        this._mouseStartPointX = null;
-        this._mouseStartPointY = null;
-        this._onNodeLinkDisposedObservers = [];
-        this._isCollapsed = false;
-        this._frameInPorts = [];
-        this._frameOutPorts = [];
-        this._controlledPorts = []; // Ports on Nodes that are shown on outside of frame
-        this._exposedInPorts = [];
-        this._exposedOutPorts = [];
-        this._minFrameHeight = 40;
-        this._minFrameWidth = 220;
-        this.onExpandStateChanged = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
-        this._closeSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M16,15l5.85,5.84-1,1L15,15.93,9.15,21.78l-1-1L14,15,8.19,9.12l1-1L15,14l5.84-5.84,1,1Z"/></g></svg>`;
-        this._expandSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-6.75,6.75H11.06V14.44h3.38V11.06h1.12v3.38h3.38v1.12H15.56v3.38H14.44Z"/></g></svg>`;
-        this._collapseSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-2.25,6.75H11.06V14.44h7.88Z"/></g></svg>`;
-        this._initResizing = (evt) => {
-            evt.stopPropagation();
-            this._mouseStartPointX = evt.clientX;
-            this._mouseStartPointY = evt.clientY;
-            this._frameIsResizing = true;
-        };
-        this._cleanUpResizing = (evt) => {
-            evt.stopPropagation();
-            this._frameIsResizing = false;
-            this._resizingDirection = null;
-            this._mouseStartPointX = null;
-            this._mouseStartPointY = null;
-            this._mouseXLimit = null;
-            this.refresh();
-        };
-        this._updateMinHeightWithComments = () => {
-            if (this.comments && this.comments.length > 0) {
-                const minFrameHeightWithComments = this._commentsElement.offsetHeight + 40;
-                this._minFrameHeight = minFrameHeightWithComments;
-            }
-        };
-        this._onRightHandlePointerDown = (evt) => {
-            if (this.isCollapsed) {
-                return;
-            }
-            this._initResizing(evt);
-            this._resizingDirection = ResizingDirection.Right;
-            this._mouseXLimit = evt.clientX - (this.width - this._minFrameWidth);
-            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onRightHandlePointerUp);
-            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onRightHandlePointerMove);
-        };
-        this._onRightHandlePointerMove = (evt) => {
-            const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
-            const xLimit = this._mouseStartPointX - slack;
-            this._moveRightHandle(evt, xLimit);
-        };
-        this._moveRightHandle = (evt, xLimit) => {
-            // tslint:disable-next-line: no-this-assignment
-            if (this._mouseXLimit) {
-                if (!this._isResizingRight() || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientX < xLimit) {
-                    return;
+    get id() {
+        return this._id;
+    }
+    get isCollapsed() {
+        return this._isCollapsed;
+    }
+    _createInputPort(port, node) {
+        const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._inputPortContainer, null, this._ownerCanvas.stateManager, true, GraphFrame._FramePortCounter++, this.id);
+        this._frameInPorts.push(localPort);
+        port.delegatedPort = localPort;
+        this._controlledPorts.push(port);
+        port.exposedPortPosition = this._exposedInPorts.findIndex((nodePort) => nodePort === port);
+        if (port.exposedPortPosition < 0) {
+            this._exposedInPorts.push(port);
+            port.exposedPortPosition = this._exposedInPorts.length - 1;
+        }
+    }
+    // Mark ports with FramePortPosition for re-arrangement support
+    _markFramePortPositions() {
+        // mark FrameInPorts
+        if (this._frameInPorts.length == 2) {
+            this._frameInPorts[0].framePortPosition = FramePortPosition.Top;
+            this._frameInPorts[1].framePortPosition = FramePortPosition.Bottom;
+        }
+        else {
+            for (let i = 0; i < this._frameInPorts.length; i++) {
+                const port = this._frameInPorts[i];
+                if (i === 0) {
+                    port.framePortPosition = FramePortPosition.Top;
                 }
-                if (this._isResizingRight()) {
-                    evt.stopPropagation();
-                    const distanceMouseMoved = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandRight(distanceMouseMoved, evt.clientX);
-                    this._mouseStartPointX = evt.clientX;
+                else if (i === this._frameInPorts.length - 1) {
+                    port.framePortPosition = FramePortPosition.Bottom;
+                }
+                else {
+                    port.framePortPosition = FramePortPosition.Middle;
                 }
             }
-        };
-        this._onRightHandlePointerUp = (evt) => {
-            if (this._isResizingRight()) {
-                this.width = parseFloat(this.element.style.width.replace("px", ""));
-                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onRightHandlePointerUp);
-                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onRightHandlePointerMove);
-                this._cleanUpResizing(evt);
-            }
-        };
-        this._onBottomHandlePointerDown = (evt) => {
-            if (this.isCollapsed) {
-                return;
-            }
-            this._initResizing(evt);
-            this._resizingDirection = ResizingDirection.Bottom;
-            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onBottomHandlePointerMove);
-            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onBottomHandlePointerUp);
-        };
-        this._onBottomHandlePointerMove = (evt) => {
-            const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
-            const yLimit = this._mouseStartPointY - slack;
-            this._moveBottomHandle(evt, yLimit);
-        };
-        this._moveBottomHandle = (evt, yLimit) => {
-            if (this._resizingDirection !== ResizingDirection.Bottom || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientY < yLimit) {
-                return;
-            }
-            if (this._resizingDirection === ResizingDirection.Bottom) {
-                evt.stopPropagation();
-                const distanceMouseMoved = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                this._expandBottom(distanceMouseMoved);
-                this._mouseStartPointY = evt.clientY;
-            }
-        };
-        this._onBottomHandlePointerUp = (evt) => {
-            if (this._resizingDirection === ResizingDirection.Bottom) {
-                this.height = parseFloat(this.element.style.height.replace("px", ""));
-                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onBottomHandlePointerMove);
-                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onBottomHandlePointerUp);
-                this._cleanUpResizing(evt);
-            }
-        };
-        this._onLeftHandlePointerDown = (evt) => {
-            if (this.isCollapsed) {
-                return;
+        }
+        // mark FrameOutPorts
+        if (this._frameOutPorts.length == 2) {
+            this._frameOutPorts[0].framePortPosition = FramePortPosition.Top;
+            this._frameOutPorts[1].framePortPosition = FramePortPosition.Bottom;
+        }
+        else {
+            for (let i = 0; i < this._frameOutPorts.length; i++) {
+                const port = this._frameOutPorts[i];
+                if (i === 0) {
+                    port.framePortPosition = FramePortPosition.Top;
+                }
+                else if (i === this._frameInPorts.length - 1) {
+                    port.framePortPosition = FramePortPosition.Bottom;
+                }
+                else {
+                    port.framePortPosition = FramePortPosition.Middle;
+                }
             }
-            this._initResizing(evt);
-            this._resizingDirection = ResizingDirection.Left;
-            this._mouseXLimit = evt.clientX + this.width - this._minFrameWidth;
-            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onLeftHandlePointerUp);
-            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onLeftHandlePointerMove);
-        };
-        this._onLeftHandlePointerMove = (evt) => {
-            const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
-            const xLimit = this._mouseStartPointX + slack;
-            this._moveLeftHandle(evt, xLimit);
-        };
-        this._moveLeftHandle = (evt, xLimit) => {
-            if (this._mouseXLimit) {
-                if (this._resizingDirection !== ResizingDirection.Left || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientX > xLimit) {
-                    return;
+        }
+    }
+    _createFramePorts() {
+        for (const node of this._nodes) {
+            node.isVisible = false;
+        }
+        for (let i = 0; i < this._exposedOutPorts.length;) {
+            // Output
+            const port = this._exposedOutPorts[i];
+            if (port) {
+                if (port.node === null || port.node.enclosingFrameId != this.id) {
+                    if (this._removePortFromExposedWithNode(port, this._exposedOutPorts))
+                        continue;
                 }
-                if (this._resizingDirection === ResizingDirection.Left) {
-                    evt.stopPropagation();
-                    const distanceMouseMoved = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandLeft(distanceMouseMoved);
-                    this._mouseStartPointX = evt.clientX;
+                else {
+                    if (!this._createOutputPorts(port, port.node) && this._removePortFromExposedWithNode(port, this._exposedOutPorts)) {
+                        continue;
+                    }
                 }
             }
-        };
-        this._onLeftHandlePointerUp = (evt) => {
-            if (this._resizingDirection === ResizingDirection.Left) {
-                this.x = parseFloat(this.element.style.left.replace("px", ""));
-                this.width = parseFloat(this.element.style.width.replace("px", ""));
-                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onLeftHandlePointerUp);
-                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onLeftHandlePointerMove);
-                this._cleanUpResizing(evt);
+            ++i;
+        }
+        for (let i = 0; i < this._exposedInPorts.length;) {
+            // Input
+            const port = this._exposedInPorts[i];
+            if (!port || port.node === null || port.node.enclosingFrameId != this.id) {
+                if (this._removePortFromExposedWithNode(port, this._exposedInPorts)) {
+                    continue;
+                }
             }
-        };
-        this._onTopHandlePointerDown = (evt) => {
-            if (this.isCollapsed) {
-                return;
+            else {
+                if (!this._createInputPorts(port, port.node) && this._removePortFromExposedWithNode(port, this._exposedInPorts)) {
+                    continue;
+                }
             }
-            this._initResizing(evt);
-            this._resizingDirection = ResizingDirection.Top;
-            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopHandlePointerUp);
-            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopHandlePointerMove);
-        };
-        this._onTopHandlePointerMove = (evt) => {
-            const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
-            const yLimit = this._mouseStartPointY + slack;
-            this._moveTopHandle(evt, yLimit);
-        };
-        this._moveTopHandle = (evt, yLimit) => {
-            if (!this._isResizingTop() || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientY > yLimit) {
-                return;
+            ++i;
+        }
+        for (const node of this._nodes) {
+            for (const port of node.outputPorts) {
+                // Output
+                port.exposedPortPosition = this._exposedOutPorts.findIndex((nodePort) => nodePort === port);
+                if (port.exposedPortPosition < 0) {
+                    if (this._createOutputPorts(port, node)) {
+                        port.node.enclosingFrameId = this.id;
+                        this._exposedOutPorts.push(port);
+                        port.exposedPortPosition = this._exposedOutPorts.length - 1;
+                    }
+                }
             }
-            if (this._isResizingTop()) {
-                evt.stopPropagation();
-                const distanceMouseMoved = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                this._expandTop(distanceMouseMoved);
-                this._mouseStartPointY = evt.clientY;
+            for (const port of node.inputPorts) {
+                // Input
+                port.exposedPortPosition = this._exposedInPorts.findIndex((nodePort) => nodePort === port);
+                if (port.exposedPortPosition < 0) {
+                    this._createInputPorts(port, node);
+                }
             }
-        };
-        this._onTopHandlePointerUp = (evt) => {
-            if (this._isResizingTop()) {
-                this.y = parseFloat(this.element.style.top.replace("px", ""));
-                this.height = parseFloat(this.element.style.height.replace("px", ""));
-                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onTopHandlePointerUp);
-                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onTopHandlePointerMove);
-                this._cleanUpResizing(evt);
+        }
+    }
+    _removePortFromExposedWithNode(port, exposedPorts) {
+        const index = exposedPorts.findIndex((nodePort) => nodePort === port);
+        if (index >= 0) {
+            exposedPorts.splice(index, 1);
+            if (port) {
+                port.exposedPortPosition = -1;
             }
-        };
-        this._onTopRightHandlePointerDown = (evt) => {
-            if (this.isCollapsed) {
-                return;
+            return true;
+        }
+        return false;
+    }
+    _removePortFromExposedWithLink(nodeLink, exposedPorts) {
+        const aPort = exposedPorts.findIndex((nodePort) => nodePort === nodeLink.portA);
+        const bPort = exposedPorts.findIndex((nodePort) => nodePort === nodeLink.portB);
+        if (aPort >= 0) {
+            if (!nodeLink.portA.exposedOnFrame) {
+                exposedPorts.splice(aPort, 1);
+                nodeLink.portA.exposedPortPosition = -1;
+                return true;
             }
-            this._initResizing(evt);
-            this._resizingDirection = ResizingDirection.TopRight;
-            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopRightHandlePointerUp);
-            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopRightHandlePointerMove);
-        };
-        this._onTopRightHandlePointerMove = (evt) => {
-            const topSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
-            const yLimit = this._mouseStartPointY + topSlack;
-            const rightSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
-            const xLimit = this._mouseStartPointX - rightSlack;
-            this._moveTopRightHandle(evt, xLimit, yLimit);
-        };
-        this._moveTopRightHandle = (evt, xLimit, yLimit) => {
-            if (!(this._isResizingTop() && this._isResizingRight()) || this._mouseStartPointX === null || this._mouseStartPointY === null) {
-                return;
+        }
+        else if (bPort >= 0) {
+            if (nodeLink.portB && !nodeLink.portB.exposedOnFrame) {
+                exposedPorts.splice(bPort, 1);
+                nodeLink.portB.exposedPortPosition = -1;
+                return true;
             }
-            if (this._isResizingRight() && this._isResizingTop()) {
-                evt.stopPropagation();
-                if (evt.clientY < yLimit && evt.clientX > xLimit) {
-                    // able to move in X and Y
-                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandRight(distanceMouseMovedX, evt.clientX);
-                    this._mouseStartPointX = evt.clientX;
-                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                    this._expandTop(distanceMouseMovedY);
-                    this._mouseStartPointY = evt.clientY;
-                }
-                else if (evt.clientY > yLimit && evt.clientX > xLimit) {
-                    // able to move in X but not Y
-                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandRight(distanceMouseMovedX, evt.clientX);
-                    this._mouseStartPointX = evt.clientX;
-                }
-                else if (evt.clientY < yLimit && evt.clientX < xLimit) {
-                    // able to move in Y but not X
-                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                    this._expandTop(distanceMouseMovedY);
-                    this._mouseStartPointY = evt.clientY;
+        }
+        return false;
+    }
+    _createInputPorts(port, node) {
+        if (port.portData.isConnected) {
+            let portAdded = false;
+            for (const link of node.links) {
+                if (link.portB === port && this.nodes.indexOf(link.nodeA) === -1) {
+                    this._createInputPort(port, node);
+                    link.isVisible = true;
+                    portAdded = true;
+                    const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink) => {
+                        if (this._removePortFromExposedWithLink(nodeLink, this._exposedInPorts)) {
+                            this.redrawFramePorts();
+                        }
+                    });
+                    this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
                 }
             }
-        };
-        this._onTopRightHandlePointerUp = (evt) => {
-            evt.stopPropagation();
-            if (this._resizingDirection === ResizingDirection.TopRight) {
-                this.y = parseFloat(this.element.style.top.replace("px", ""));
-                this.height = parseFloat(this.element.style.height.replace("px", ""));
-                this.width = parseFloat(this.element.style.width.replace("px", ""));
-                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onTopRightHandlePointerUp);
-                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onTopRightHandlePointerMove);
-                this._cleanUpResizing(evt);
-            }
-        };
-        this._onBottomRightHandlePointerDown = (evt) => {
-            if (this.isCollapsed) {
-                return;
-            }
-            this._initResizing(evt);
-            this._resizingDirection = ResizingDirection.BottomRight;
-            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onBottomRightHandlePointerUp);
-            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onBottomRightHandlePointerMove);
-        };
-        this._onBottomRightHandlePointerMove = (evt) => {
-            const bottomSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
-            const yLimit = this._mouseStartPointY - bottomSlack;
-            const rightSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
-            const xLimit = this._mouseStartPointX - rightSlack;
-            this._moveBottomRightHandle(evt, xLimit, yLimit);
-        };
-        this._moveBottomRightHandle = (evt, xLimit, yLimit) => {
-            if (!(this._isResizingBottom() && this._isResizingRight()) || this._mouseStartPointX === null || this._mouseStartPointY === null) {
-                return;
-            }
-            if (this._isResizingRight() && this._isResizingBottom()) {
-                evt.stopPropagation();
-                if (evt.clientY > yLimit && evt.clientX > xLimit) {
-                    // able to move in X and Y
-                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandRight(distanceMouseMovedX, evt.clientX);
-                    this._mouseStartPointX = evt.clientX;
-                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                    this._expandBottom(distanceMouseMovedY);
-                    this._mouseStartPointY = evt.clientY;
-                }
-                else if (evt.clientY < yLimit && evt.clientX > xLimit) {
-                    // able to move in X but not Y
-                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandRight(distanceMouseMovedX, evt.clientX);
-                    this._mouseStartPointX = evt.clientX;
+            if (portAdded)
+                return true;
+        }
+        else if (port.exposedOnFrame) {
+            this._createInputPort(port, node);
+            return true;
+        }
+        return false;
+    }
+    _createOutputPorts(port, node) {
+        if (port.portData.hasEndpoints) {
+            let portAdded = false;
+            for (const link of node.links) {
+                if (link.portA === port && this.nodes.indexOf(link.nodeB) === -1) {
+                    let localPort;
+                    if (!portAdded) {
+                        portAdded = true;
+                        localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, link.nodeA, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
+                        this._frameOutPorts.push(localPort);
+                        link.isVisible = true;
+                        const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink) => {
+                            if (this._removePortFromExposedWithLink(nodeLink, this._exposedOutPorts)) {
+                                this.redrawFramePorts();
+                            }
+                        });
+                        this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
+                    }
+                    else if (this.nodes.indexOf(link.nodeB) === -1) {
+                        link.isVisible = true;
+                        localPort = this.ports.filter((p) => p.portData === port.portData)[0];
+                    }
+                    else {
+                        localPort = this.ports.filter((p) => p.portData === port.portData)[0];
+                    }
+                    port.delegatedPort = localPort;
+                    this._controlledPorts.push(port);
                 }
-                else if (evt.clientY > yLimit && evt.clientX < xLimit) {
-                    // able to move in Y but not X
-                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                    this._expandBottom(distanceMouseMovedY);
-                    this._mouseStartPointY = evt.clientY;
+                else if (port.exposedPortPosition >= 0 && !portAdded) {
+                    const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
+                    this._frameOutPorts.push(localPort);
+                    port.delegatedPort = localPort;
+                    this._controlledPorts.push(port);
+                    portAdded = true;
                 }
             }
-        };
-        this._onBottomRightHandlePointerUp = (evt) => {
-            if (this._resizingDirection === ResizingDirection.BottomRight) {
-                this.height = parseFloat(this.element.style.height.replace("px", ""));
-                this.width = parseFloat(this.element.style.width.replace("px", ""));
-                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onBottomRightHandlePointerUp);
-                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onBottomRightHandlePointerMove);
-                this._cleanUpResizing(evt);
-            }
-        };
-        //@ts-ignore
-        this._onBottomLeftHandlePointerDown = (evt) => {
-            if (this.isCollapsed) {
-                return;
-            }
-            this._initResizing(evt);
-            this._resizingDirection = ResizingDirection.BottomLeft;
-            this._mouseXLimit = evt.clientX + this.width - this._minFrameWidth;
-            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onBottomLeftHandlePointerUp);
-            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onBottomLeftHandlePointerMove);
-        };
-        this._onBottomLeftHandlePointerMove = (evt) => {
-            const bottomSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
-            const yLimit = this._mouseStartPointY - bottomSlack;
-            const leftSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
-            const xLimit = this._mouseStartPointX + leftSlack;
-            this._moveBottomLeftHandle(evt, xLimit, yLimit);
-        };
-        this._moveBottomLeftHandle = (evt, xLimit, yLimit) => {
-            if (!(this._isResizingBottom() && this._isResizingLeft()) || this._mouseStartPointX === null || this._mouseStartPointY === null) {
-                return;
+            if (portAdded)
+                return true;
+        }
+        else if (port.exposedOnFrame) {
+            const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
+            this._frameOutPorts.push(localPort);
+            port.delegatedPort = localPort;
+            this._controlledPorts.push(port);
+            return true;
+        }
+        return false;
+    }
+    redrawFramePorts() {
+        if (!this.isCollapsed) {
+            return;
+        }
+        this._outputPortContainer.innerHTML = "";
+        this._inputPortContainer.innerHTML = "";
+        this.ports.forEach((framePort) => {
+            framePort.dispose();
+        });
+        this._controlledPorts.forEach((port) => {
+            port.delegatedPort = null;
+            port.refresh();
+        });
+        this._frameInPorts = [];
+        this._frameOutPorts = [];
+        this._controlledPorts = [];
+        this._createFramePorts();
+        this._markFramePortPositions();
+        this.ports.forEach((framePort) => framePort.node._refreshLinks());
+    }
+    set isCollapsed(value) {
+        if (this._isCollapsed === value) {
+            return;
+        }
+        this._isCollapsed = value;
+        this._ownerCanvas._frameIsMoving = true;
+        // Need to delegate the outside ports to the frame
+        if (value) {
+            this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsed);
+            this.element.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
+            this._headerElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsedHeader);
+            this._moveFrame((this.width - this._collapsedWidth) / 2, 0);
+            this._createFramePorts();
+            this._markFramePortPositions();
+        }
+        else {
+            this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
+            this.element.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsed);
+            this._headerElement.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsedHeader);
+            this._outputPortContainer.innerHTML = "";
+            this._inputPortContainer.innerHTML = "";
+            this._frameInPorts.forEach((p) => {
+                p.dispose();
+            });
+            this._frameOutPorts.forEach((p) => {
+                p.dispose();
+            });
+            this._controlledPorts.forEach((port) => {
+                port.delegatedPort = null;
+                port.refresh();
+            });
+            this._frameInPorts = [];
+            this._frameOutPorts = [];
+            this._controlledPorts = [];
+            this._onNodeLinkDisposedObservers = [];
+            for (const node of this._nodes) {
+                node.isVisible = true;
             }
-            if (this._isResizingLeft() && this._isResizingBottom()) {
-                evt.stopPropagation();
-                if (evt.clientY > yLimit && evt.clientX < xLimit) {
-                    // able to move in X and Y
-                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandLeft(distanceMouseMovedX);
-                    this._mouseStartPointX = evt.clientX;
-                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                    this._expandBottom(distanceMouseMovedY);
-                    this._mouseStartPointY = evt.clientY;
+            this._moveFrame(-(this.width - this._collapsedWidth) / 2, 0);
+        }
+        this.cleanAccumulation();
+        this._ownerCanvas._frameIsMoving = false;
+        // UI
+        if (this._isCollapsed) {
+            this._headerCollapseElement.innerHTML = this._expandSVG;
+            this._headerCollapseElement.title = "Expand";
+        }
+        else {
+            this._headerCollapseElement.innerHTML = this._collapseSVG;
+            this._headerCollapseElement.title = "Collapse";
+        }
+        this.onExpandStateChanged.notifyObservers(this);
+    }
+    get nodes() {
+        return this._nodes;
+    }
+    get ports() {
+        return this._frameInPorts.concat(this._frameOutPorts);
+    }
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        this._name = value;
+        this._headerTextElement.innerHTML = value;
+    }
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value;
+        this._headerElement.style.background = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 1)`;
+        this._headerElement.style.borderColor = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 1)`;
+        this.element.style.background = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 0.7)`;
+    }
+    get x() {
+        return this._x;
+    }
+    set x(value) {
+        if (this._x === value) {
+            return;
+        }
+        this._x = value;
+        this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
+        this.element.style.left = `${this._gridAlignedX}px`;
+    }
+    get y() {
+        return this._y;
+    }
+    set y(value) {
+        if (this._y === value) {
+            return;
+        }
+        this._y = value;
+        this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
+        this.element.style.top = `${this._gridAlignedY}px`;
+    }
+    get width() {
+        return this._width;
+    }
+    set width(value) {
+        if (this._width === value) {
+            return;
+        }
+        const viableWidth = value > this._minFrameWidth ? value : this._minFrameWidth;
+        this._width = viableWidth;
+        const gridAlignedRight = this._ownerCanvas.getGridPositionCeil(viableWidth + this._gridAlignedX);
+        this.element.style.width = `${gridAlignedRight - this._gridAlignedX}px`;
+    }
+    get height() {
+        return this._height;
+    }
+    set height(value) {
+        if (this._height === value) {
+            return;
+        }
+        this._height = value;
+        const gridAlignedBottom = this._ownerCanvas.getGridPositionCeil(value + this._gridAlignedY);
+        this.element.style.height = `${gridAlignedBottom - this._gridAlignedY}px`;
+    }
+    get comments() {
+        return this._comments;
+    }
+    set comments(comments) {
+        if (comments && !this._comments && comments.length > 0) {
+            this.element.style.gridTemplateRows = "40px min-content 1fr";
+            this._borderElement.style.gridRow = "1 / span 3";
+            this._portContainer.style.gridRow = "3";
+            this._commentsElement.classList.add("has-comments");
+        }
+        else if (!comments) {
+            this.element.style.gridTemplateRows = "40px calc(100% - 40px)";
+            this._borderElement.style.gridRow = "1 / span 2";
+            this._portContainer.style.gridRow = "2";
+            this._commentsElement.classList.remove("has-comments");
+        }
+        if (comments === "" || (comments && comments.length >= 0)) {
+            this._commentsElement.children[0].innerText = comments;
+        }
+        this.height = this._borderElement.offsetHeight;
+        this._comments = comments;
+        this._updateMinHeightWithComments();
+    }
+    constructor(candidate, canvas, doNotCaptureNodes = false) {
+        this._collapsedWidth = 200;
+        this._x = 0;
+        this._y = 0;
+        this._gridAlignedX = 0;
+        this._gridAlignedY = 0;
+        this._nodes = [];
+        this._mouseStartPointX = null;
+        this._mouseStartPointY = null;
+        this._onNodeLinkDisposedObservers = [];
+        this._isCollapsed = false;
+        this._frameInPorts = [];
+        this._frameOutPorts = [];
+        this._controlledPorts = []; // Ports on Nodes that are shown on outside of frame
+        this._exposedInPorts = [];
+        this._exposedOutPorts = [];
+        this._minFrameHeight = 40;
+        this._minFrameWidth = 220;
+        this.onExpandStateChanged = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
+        this._closeSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M16,15l5.85,5.84-1,1L15,15.93,9.15,21.78l-1-1L14,15,8.19,9.12l1-1L15,14l5.84-5.84,1,1Z"/></g></svg>`;
+        this._expandSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-6.75,6.75H11.06V14.44h3.38V11.06h1.12v3.38h3.38v1.12H15.56v3.38H14.44Z"/></g></svg>`;
+        this._collapseSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-2.25,6.75H11.06V14.44h7.88Z"/></g></svg>`;
+        this._initResizing = (evt) => {
+            evt.stopPropagation();
+            this._mouseStartPointX = evt.clientX;
+            this._mouseStartPointY = evt.clientY;
+            this._frameIsResizing = true;
+        };
+        this._cleanUpResizing = (evt) => {
+            evt.stopPropagation();
+            this._frameIsResizing = false;
+            this._resizingDirection = null;
+            this._mouseStartPointX = null;
+            this._mouseStartPointY = null;
+            this._mouseXLimit = null;
+            this.refresh();
+        };
+        this._updateMinHeightWithComments = () => {
+            if (this.comments && this.comments.length > 0) {
+                const minFrameHeightWithComments = this._commentsElement.offsetHeight + 40;
+                this._minFrameHeight = minFrameHeightWithComments;
+            }
+        };
+        this._onRightHandlePointerDown = (evt) => {
+            if (this.isCollapsed) {
+                return;
+            }
+            this._initResizing(evt);
+            this._resizingDirection = ResizingDirection.Right;
+            this._mouseXLimit = evt.clientX - (this.width - this._minFrameWidth);
+            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onRightHandlePointerUp);
+            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onRightHandlePointerMove);
+        };
+        this._onRightHandlePointerMove = (evt) => {
+            const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
+            const xLimit = this._mouseStartPointX - slack;
+            this._moveRightHandle(evt, xLimit);
+        };
+        this._moveRightHandle = (evt, xLimit) => {
+            // tslint:disable-next-line: no-this-assignment
+            if (this._mouseXLimit) {
+                if (!this._isResizingRight() || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientX < xLimit) {
+                    return;
                 }
-                else if (evt.clientY < yLimit && evt.clientX < xLimit) {
-                    // able to move in X but not Y
-                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandLeft(distanceMouseMovedX);
+                if (this._isResizingRight()) {
+                    evt.stopPropagation();
+                    const distanceMouseMoved = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandRight(distanceMouseMoved, evt.clientX);
                     this._mouseStartPointX = evt.clientX;
                 }
-                else if (evt.clientY > yLimit && evt.clientX > xLimit) {
-                    // able to move in Y but not X
-                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                    this._expandBottom(distanceMouseMovedY);
-                    this._mouseStartPointY = evt.clientY;
-                }
             }
         };
-        this._onBottomLeftHandlePointerUp = (evt) => {
-            evt.stopPropagation();
-            if (this._resizingDirection === ResizingDirection.BottomLeft) {
-                this.height = parseFloat(this.element.style.height.replace("px", ""));
-                this.x = parseFloat(this.element.style.left.replace("px", ""));
+        this._onRightHandlePointerUp = (evt) => {
+            if (this._isResizingRight()) {
                 this.width = parseFloat(this.element.style.width.replace("px", ""));
-                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onBottomLeftHandlePointerUp);
-                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onBottomLeftHandlePointerMove);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onRightHandlePointerUp);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onRightHandlePointerMove);
                 this._cleanUpResizing(evt);
             }
         };
-        //@ts-ignore
-        this._onTopLeftHandlePointerDown = (evt) => {
+        this._onBottomHandlePointerDown = (evt) => {
             if (this.isCollapsed) {
                 return;
             }
             this._initResizing(evt);
-            this._resizingDirection = ResizingDirection.TopLeft;
-            this._mouseXLimit = evt.clientX + this.width - this._minFrameWidth;
-            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopLeftHandlePointerUp);
-            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopLeftHandlePointerMove);
+            this._resizingDirection = ResizingDirection.Bottom;
+            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onBottomHandlePointerMove);
+            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onBottomHandlePointerUp);
         };
-        this._onTopLeftHandlePointerMove = (evt) => {
-            const topSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
-            const yLimit = this._mouseStartPointY + topSlack;
-            const leftSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
-            const xLimit = this._mouseStartPointX + leftSlack;
-            this._moveTopLeftHandle(evt, xLimit, yLimit);
+        this._onBottomHandlePointerMove = (evt) => {
+            const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
+            const yLimit = this._mouseStartPointY - slack;
+            this._moveBottomHandle(evt, yLimit);
         };
-        this._moveTopLeftHandle = (evt, xLimit, yLimit) => {
-            if (!(this._isResizingTop() && this._isResizingLeft()) || this._mouseStartPointX === null || this._mouseStartPointY === null) {
+        this._moveBottomHandle = (evt, yLimit) => {
+            if (this._resizingDirection !== ResizingDirection.Bottom || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientY < yLimit) {
                 return;
             }
-            if (this._isResizingLeft() && this._isResizingTop()) {
+            if (this._resizingDirection === ResizingDirection.Bottom) {
                 evt.stopPropagation();
-                if (evt.clientY < yLimit && evt.clientX < xLimit) {
-                    // able to move in X and Y
-                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandLeft(distanceMouseMovedX);
-                    this._mouseStartPointX = evt.clientX;
-                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                    this._expandTop(distanceMouseMovedY);
-                    this._mouseStartPointY = evt.clientY;
-                }
-                else if (evt.clientY > yLimit && evt.clientX < xLimit) {
-                    // able to move in X but not Y
-                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
-                    this._expandLeft(distanceMouseMovedX);
-                    this._mouseStartPointX = evt.clientX;
-                }
-                else if (evt.clientY < yLimit && evt.clientX > xLimit) {
-                    // able to move in Y but not X
-                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
-                    this._expandTop(distanceMouseMovedY);
-                    this._mouseStartPointY = evt.clientY;
-                }
+                const distanceMouseMoved = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                this._expandBottom(distanceMouseMoved);
+                this._mouseStartPointY = evt.clientY;
             }
         };
-        this._onTopLeftHandlePointerUp = (evt) => {
-            evt.stopPropagation();
-            if (this._resizingDirection === ResizingDirection.TopLeft) {
-                this.y = parseFloat(this.element.style.top.replace("px", ""));
+        this._onBottomHandlePointerUp = (evt) => {
+            if (this._resizingDirection === ResizingDirection.Bottom) {
                 this.height = parseFloat(this.element.style.height.replace("px", ""));
-                this.x = parseFloat(this.element.style.left.replace("px", ""));
-                this.width = parseFloat(this.element.style.width.replace("px", ""));
-                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onTopLeftHandlePointerUp);
-                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onTopLeftHandlePointerMove);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onBottomHandlePointerMove);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onBottomHandlePointerUp);
                 this._cleanUpResizing(evt);
             }
         };
-        this._id = GraphFrame._FrameCounter++;
-        this._ownerCanvas = canvas;
-        const root = canvas.frameContainer;
-        this.element = root.ownerDocument.createElement("div");
-        this.element.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"]["frame-box"]);
-        root.appendChild(this.element);
-        this._headerElement = root.ownerDocument.createElement("div");
-        this._headerElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header"]);
-        this._headerElement.addEventListener("dblclick", () => {
-            this.isCollapsed = !this.isCollapsed;
-        });
-        this.element.appendChild(this._headerElement);
-        this._borderElement = root.ownerDocument.createElement("div");
-        this._borderElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-border"]);
-        this.element.appendChild(this._borderElement);
-        this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
-        // add resizing side handles
-        const rightHandle = root.ownerDocument.createElement("div");
-        rightHandle.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["right-handle"];
-        this.element.appendChild(rightHandle);
-        rightHandle.addEventListener("pointerdown", this._onRightHandlePointerDown);
-        const leftHandle = root.ownerDocument.createElement("div");
-        leftHandle.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["left-handle"];
-        this.element.appendChild(leftHandle);
-        leftHandle.addEventListener("pointerdown", this._onLeftHandlePointerDown);
-        const bottomHandle = root.ownerDocument.createElement("div");
-        bottomHandle.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["bottom-handle"];
-        this.element.appendChild(bottomHandle);
-        bottomHandle.addEventListener("pointerdown", this._onBottomHandlePointerDown);
-        const topHandle = root.ownerDocument.createElement("div");
-        topHandle.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["top-handle"];
-        this.element.appendChild(topHandle);
-        topHandle.addEventListener("pointerdown", this._onTopHandlePointerDown);
-        const topRightCornerHandle = root.ownerDocument.createElement("div");
-        topRightCornerHandle.className = (0,_components_classNames__WEBPACK_IMPORTED_MODULE_5__.ClassNames)({ "right-handle": true, "top-right-corner-handle": true }, _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
-        this.element.appendChild(topRightCornerHandle);
-        topRightCornerHandle.addEventListener("pointerdown", this._onTopRightHandlePointerDown);
-        const bottomRightCornerHandle = root.ownerDocument.createElement("div");
-        bottomRightCornerHandle.className = (0,_components_classNames__WEBPACK_IMPORTED_MODULE_5__.ClassNames)({ "right-handle": true, "bottom-right-corner-handle": true }, _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
-        this.element.appendChild(bottomRightCornerHandle);
-        bottomRightCornerHandle.addEventListener("pointerdown", this._onBottomRightHandlePointerDown);
-        const topLeftCornerHandle = root.ownerDocument.createElement("div");
-        topLeftCornerHandle.className = (0,_components_classNames__WEBPACK_IMPORTED_MODULE_5__.ClassNames)({ "left-handle": true, "top-left-corner-handle": true }, _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
-        this.element.appendChild(topLeftCornerHandle);
-        topLeftCornerHandle.addEventListener("pointerdown", this._onTopLeftHandlePointerDown);
-        const bottomLeftCornerHandle = root.ownerDocument.createElement("div");
-        bottomLeftCornerHandle.className = (0,_components_classNames__WEBPACK_IMPORTED_MODULE_5__.ClassNames)({ "left-handle": true, "bottom-left-corner-handle": true }, _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
-        this.element.appendChild(bottomLeftCornerHandle);
-        bottomLeftCornerHandle.addEventListener("pointerdown", this._onBottomLeftHandlePointerDown);
-        // add header elements
-        this._headerTextElement = root.ownerDocument.createElement("div");
-        this._headerTextElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-title"]);
-        this._headerElement.appendChild(this._headerTextElement);
-        this._headerCollapseElement = root.ownerDocument.createElement("div");
-        this._headerCollapseElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-collapse"]);
-        this._headerCollapseElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-button"]);
-        this._headerCollapseElement.title = "Collapse";
-        this._headerCollapseElement.ondragstart = () => false;
-        this._headerCollapseElement.addEventListener("pointerdown", (evt) => {
-            this._headerCollapseElement.classList.add("down");
-            evt.stopPropagation();
-        });
-        this._headerCollapseElement.addEventListener("pointerup", (evt) => {
-            evt.stopPropagation();
-            this._headerCollapseElement.classList.remove("down");
-            this.isCollapsed = !this.isCollapsed;
-        });
-        this._headerCollapseElement.innerHTML = this._collapseSVG;
-        this._headerElement.appendChild(this._headerCollapseElement);
-        this._headerCloseElement = root.ownerDocument.createElement("div");
-        this._headerCloseElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-close"]);
-        this._headerCloseElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-button"]);
-        this._headerCloseElement.title = "Close";
-        this._headerCloseElement.ondragstart = () => false;
-        this._headerCloseElement.addEventListener("pointerdown", (evt) => {
-            evt.stopPropagation();
-        });
-        this._headerCloseElement.addEventListener("pointerup", (evt) => {
-            evt.stopPropagation();
-            this.dispose();
-        });
-        this._headerCloseElement.innerHTML = this._closeSVG;
-        this._headerElement.appendChild(this._headerCloseElement);
-        this._portContainer = root.ownerDocument.createElement("div");
-        this._portContainer.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["port-container"]);
-        this.element.appendChild(this._portContainer);
-        this._outputPortContainer = root.ownerDocument.createElement("div");
-        this._outputPortContainer.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].outputsContainer);
-        this._portContainer.appendChild(this._outputPortContainer);
-        this._inputPortContainer = root.ownerDocument.createElement("div");
-        this._inputPortContainer.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].inputsContainer);
-        this._portContainer.appendChild(this._inputPortContainer);
-        this.name = "Frame";
-        this.color = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Color3.FromInts(72, 72, 72);
-        if (candidate) {
-            this.x = parseFloat(candidate.style.left.replace("px", ""));
-            this.y = parseFloat(candidate.style.top.replace("px", ""));
-            this.width = parseFloat(candidate.style.width.replace("px", ""));
-            this.height = parseFloat(candidate.style.height.replace("px", ""));
-            this.cleanAccumulation();
-        }
-        this._headerTextElement.addEventListener("pointerdown", (evt) => this._onDown(evt));
-        this._headerTextElement.addEventListener("pointerup", (evt) => this._onUp(evt));
-        this._headerTextElement.addEventListener("pointermove", (evt) => this._onMove(evt));
-        this._onSelectionChangedObserver = canvas.stateManager.onSelectionChangedObservable.add(() => {
-            if (this._ownerCanvas.selectedFrames.indexOf(this) !== -1) {
-                this._borderElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+        this._onLeftHandlePointerDown = (evt) => {
+            if (this.isCollapsed) {
+                return;
             }
-            else {
-                this._borderElement.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+            this._initResizing(evt);
+            this._resizingDirection = ResizingDirection.Left;
+            this._mouseXLimit = evt.clientX + this.width - this._minFrameWidth;
+            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onLeftHandlePointerUp);
+            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onLeftHandlePointerMove);
+        };
+        this._onLeftHandlePointerMove = (evt) => {
+            const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
+            const xLimit = this._mouseStartPointX + slack;
+            this._moveLeftHandle(evt, xLimit);
+        };
+        this._moveLeftHandle = (evt, xLimit) => {
+            if (this._mouseXLimit) {
+                if (this._resizingDirection !== ResizingDirection.Left || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientX > xLimit) {
+                    return;
+                }
+                if (this._resizingDirection === ResizingDirection.Left) {
+                    evt.stopPropagation();
+                    const distanceMouseMoved = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandLeft(distanceMouseMoved);
+                    this._mouseStartPointX = evt.clientX;
+                }
             }
-        });
-        canvas.stateManager.onSelectionBoxMoved.add((rect1) => {
-            const rect2 = this.element.getBoundingClientRect();
-            const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
-            if (overlap) {
-                canvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: this, forceKeepSelection: true, marqueeSelection: true });
+        };
+        this._onLeftHandlePointerUp = (evt) => {
+            if (this._resizingDirection === ResizingDirection.Left) {
+                this.x = parseFloat(this.element.style.left.replace("px", ""));
+                this.width = parseFloat(this.element.style.width.replace("px", ""));
+                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onLeftHandlePointerUp);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onLeftHandlePointerMove);
+                this._cleanUpResizing(evt);
             }
-        });
-        this._onGraphNodeRemovalObserver = canvas.stateManager.onGraphNodeRemovalObservable.add((node) => {
-            // remove node from this._nodes
-            const index = this._nodes.indexOf(node);
-            if (index === -1) {
+        };
+        this._onTopHandlePointerDown = (evt) => {
+            if (this.isCollapsed) {
                 return;
             }
-            else {
-                node.enclosingFrameId = -1;
-                this._nodes.splice(index, 1);
-            }
-        });
-        this._onExposePortOnFrameObserver = canvas.stateManager.onExposePortOnFrameObservable.add((node) => {
-            if (this.nodes.indexOf(node) === -1) {
+            this._initResizing(evt);
+            this._resizingDirection = ResizingDirection.Top;
+            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopHandlePointerUp);
+            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopHandlePointerMove);
+        };
+        this._onTopHandlePointerMove = (evt) => {
+            const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
+            const yLimit = this._mouseStartPointY + slack;
+            this._moveTopHandle(evt, yLimit);
+        };
+        this._moveTopHandle = (evt, yLimit) => {
+            if (!this._isResizingTop() || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientY > yLimit) {
                 return;
             }
-            this.redrawFramePorts();
-        });
-        this._commentsElement = document.createElement("div");
-        this._commentsElement.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-comments"];
-        this._commentsElement.style.color = "white";
-        this._commentsElement.style.fontSize = "16px";
-        const commentSpan = document.createElement("span");
-        commentSpan.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-comment-span"];
-        this._commentsElement.appendChild(commentSpan);
-        this.element.appendChild(this._commentsElement);
-        // Get nodes
-        if (!doNotCaptureNodes) {
-            this.refresh();
-        }
-    }
-    get id() {
-        return this._id;
-    }
-    get isCollapsed() {
-        return this._isCollapsed;
-    }
-    _createInputPort(port, node) {
-        const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._inputPortContainer, null, this._ownerCanvas.stateManager, true, GraphFrame._FramePortCounter++, this.id);
-        this._frameInPorts.push(localPort);
-        port.delegatedPort = localPort;
-        this._controlledPorts.push(port);
-        port.exposedPortPosition = this._exposedInPorts.findIndex((nodePort) => nodePort === port);
-        if (port.exposedPortPosition < 0) {
-            this._exposedInPorts.push(port);
-            port.exposedPortPosition = this._exposedInPorts.length - 1;
-        }
-    }
-    // Mark ports with FramePortPosition for re-arrangement support
-    _markFramePortPositions() {
-        // mark FrameInPorts
-        if (this._frameInPorts.length == 2) {
-            this._frameInPorts[0].framePortPosition = FramePortPosition.Top;
-            this._frameInPorts[1].framePortPosition = FramePortPosition.Bottom;
-        }
-        else {
-            for (let i = 0; i < this._frameInPorts.length; i++) {
-                const port = this._frameInPorts[i];
-                if (i === 0) {
-                    port.framePortPosition = FramePortPosition.Top;
-                }
-                else if (i === this._frameInPorts.length - 1) {
-                    port.framePortPosition = FramePortPosition.Bottom;
-                }
-                else {
-                    port.framePortPosition = FramePortPosition.Middle;
-                }
-            }
-        }
-        // mark FrameOutPorts
-        if (this._frameOutPorts.length == 2) {
-            this._frameOutPorts[0].framePortPosition = FramePortPosition.Top;
-            this._frameOutPorts[1].framePortPosition = FramePortPosition.Bottom;
-        }
-        else {
-            for (let i = 0; i < this._frameOutPorts.length; i++) {
-                const port = this._frameOutPorts[i];
-                if (i === 0) {
-                    port.framePortPosition = FramePortPosition.Top;
-                }
-                else if (i === this._frameInPorts.length - 1) {
-                    port.framePortPosition = FramePortPosition.Bottom;
-                }
-                else {
-                    port.framePortPosition = FramePortPosition.Middle;
-                }
+            if (this._isResizingTop()) {
+                evt.stopPropagation();
+                const distanceMouseMoved = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                this._expandTop(distanceMouseMoved);
+                this._mouseStartPointY = evt.clientY;
             }
-        }
-    }
-    _createFramePorts() {
-        for (const node of this._nodes) {
-            node.isVisible = false;
-        }
-        for (let i = 0; i < this._exposedOutPorts.length;) {
-            // Output
-            const port = this._exposedOutPorts[i];
-            if (port) {
-                if (port.node === null || port.node.enclosingFrameId != this.id) {
-                    if (this._removePortFromExposedWithNode(port, this._exposedOutPorts))
-                        continue;
-                }
-                else {
-                    if (!this._createOutputPorts(port, port.node) && this._removePortFromExposedWithNode(port, this._exposedOutPorts)) {
-                        continue;
-                    }
-                }
+        };
+        this._onTopHandlePointerUp = (evt) => {
+            if (this._isResizingTop()) {
+                this.y = parseFloat(this.element.style.top.replace("px", ""));
+                this.height = parseFloat(this.element.style.height.replace("px", ""));
+                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onTopHandlePointerUp);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onTopHandlePointerMove);
+                this._cleanUpResizing(evt);
             }
-            ++i;
-        }
-        for (let i = 0; i < this._exposedInPorts.length;) {
-            // Input
-            const port = this._exposedInPorts[i];
-            if (!port || port.node === null || port.node.enclosingFrameId != this.id) {
-                if (this._removePortFromExposedWithNode(port, this._exposedInPorts)) {
-                    continue;
-                }
+        };
+        this._onTopRightHandlePointerDown = (evt) => {
+            if (this.isCollapsed) {
+                return;
             }
-            else {
-                if (!this._createInputPorts(port, port.node) && this._removePortFromExposedWithNode(port, this._exposedInPorts)) {
-                    continue;
-                }
+            this._initResizing(evt);
+            this._resizingDirection = ResizingDirection.TopRight;
+            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopRightHandlePointerUp);
+            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopRightHandlePointerMove);
+        };
+        this._onTopRightHandlePointerMove = (evt) => {
+            const topSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
+            const yLimit = this._mouseStartPointY + topSlack;
+            const rightSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
+            const xLimit = this._mouseStartPointX - rightSlack;
+            this._moveTopRightHandle(evt, xLimit, yLimit);
+        };
+        this._moveTopRightHandle = (evt, xLimit, yLimit) => {
+            if (!(this._isResizingTop() && this._isResizingRight()) || this._mouseStartPointX === null || this._mouseStartPointY === null) {
+                return;
             }
-            ++i;
-        }
-        for (const node of this._nodes) {
-            for (const port of node.outputPorts) {
-                // Output
-                port.exposedPortPosition = this._exposedOutPorts.findIndex((nodePort) => nodePort === port);
-                if (port.exposedPortPosition < 0) {
-                    if (this._createOutputPorts(port, node)) {
-                        port.node.enclosingFrameId = this.id;
-                        this._exposedOutPorts.push(port);
-                        port.exposedPortPosition = this._exposedOutPorts.length - 1;
-                    }
+            if (this._isResizingRight() && this._isResizingTop()) {
+                evt.stopPropagation();
+                if (evt.clientY < yLimit && evt.clientX > xLimit) {
+                    // able to move in X and Y
+                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandRight(distanceMouseMovedX, evt.clientX);
+                    this._mouseStartPointX = evt.clientX;
+                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                    this._expandTop(distanceMouseMovedY);
+                    this._mouseStartPointY = evt.clientY;
                 }
-            }
-            for (const port of node.inputPorts) {
-                // Input
-                port.exposedPortPosition = this._exposedInPorts.findIndex((nodePort) => nodePort === port);
-                if (port.exposedPortPosition < 0) {
-                    this._createInputPorts(port, node);
+                else if (evt.clientY > yLimit && evt.clientX > xLimit) {
+                    // able to move in X but not Y
+                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandRight(distanceMouseMovedX, evt.clientX);
+                    this._mouseStartPointX = evt.clientX;
+                }
+                else if (evt.clientY < yLimit && evt.clientX < xLimit) {
+                    // able to move in Y but not X
+                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                    this._expandTop(distanceMouseMovedY);
+                    this._mouseStartPointY = evt.clientY;
                 }
             }
-        }
-    }
-    _removePortFromExposedWithNode(port, exposedPorts) {
-        const index = exposedPorts.findIndex((nodePort) => nodePort === port);
-        if (index >= 0) {
-            exposedPorts.splice(index, 1);
-            if (port) {
-                port.exposedPortPosition = -1;
+        };
+        this._onTopRightHandlePointerUp = (evt) => {
+            evt.stopPropagation();
+            if (this._resizingDirection === ResizingDirection.TopRight) {
+                this.y = parseFloat(this.element.style.top.replace("px", ""));
+                this.height = parseFloat(this.element.style.height.replace("px", ""));
+                this.width = parseFloat(this.element.style.width.replace("px", ""));
+                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onTopRightHandlePointerUp);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onTopRightHandlePointerMove);
+                this._cleanUpResizing(evt);
             }
-            return true;
-        }
-        return false;
-    }
-    _removePortFromExposedWithLink(nodeLink, exposedPorts) {
-        const aPort = exposedPorts.findIndex((nodePort) => nodePort === nodeLink.portA);
-        const bPort = exposedPorts.findIndex((nodePort) => nodePort === nodeLink.portB);
-        if (aPort >= 0) {
-            if (!nodeLink.portA.exposedOnFrame) {
-                exposedPorts.splice(aPort, 1);
-                nodeLink.portA.exposedPortPosition = -1;
-                return true;
+        };
+        this._onBottomRightHandlePointerDown = (evt) => {
+            if (this.isCollapsed) {
+                return;
             }
-        }
-        else if (bPort >= 0) {
-            if (nodeLink.portB && !nodeLink.portB.exposedOnFrame) {
-                exposedPorts.splice(bPort, 1);
-                nodeLink.portB.exposedPortPosition = -1;
-                return true;
+            this._initResizing(evt);
+            this._resizingDirection = ResizingDirection.BottomRight;
+            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onBottomRightHandlePointerUp);
+            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onBottomRightHandlePointerMove);
+        };
+        this._onBottomRightHandlePointerMove = (evt) => {
+            const bottomSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
+            const yLimit = this._mouseStartPointY - bottomSlack;
+            const rightSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
+            const xLimit = this._mouseStartPointX - rightSlack;
+            this._moveBottomRightHandle(evt, xLimit, yLimit);
+        };
+        this._moveBottomRightHandle = (evt, xLimit, yLimit) => {
+            if (!(this._isResizingBottom() && this._isResizingRight()) || this._mouseStartPointX === null || this._mouseStartPointY === null) {
+                return;
             }
-        }
-        return false;
-    }
-    _createInputPorts(port, node) {
-        if (port.portData.isConnected) {
-            let portAdded = false;
-            for (const link of node.links) {
-                if (link.portB === port && this.nodes.indexOf(link.nodeA) === -1) {
-                    this._createInputPort(port, node);
-                    link.isVisible = true;
-                    portAdded = true;
-                    const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink) => {
-                        if (this._removePortFromExposedWithLink(nodeLink, this._exposedInPorts)) {
-                            this.redrawFramePorts();
-                        }
-                    });
-                    this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
+            if (this._isResizingRight() && this._isResizingBottom()) {
+                evt.stopPropagation();
+                if (evt.clientY > yLimit && evt.clientX > xLimit) {
+                    // able to move in X and Y
+                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandRight(distanceMouseMovedX, evt.clientX);
+                    this._mouseStartPointX = evt.clientX;
+                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                    this._expandBottom(distanceMouseMovedY);
+                    this._mouseStartPointY = evt.clientY;
                 }
-            }
-            if (portAdded)
-                return true;
-        }
-        else if (port.exposedOnFrame) {
-            this._createInputPort(port, node);
-            return true;
-        }
-        return false;
-    }
-    _createOutputPorts(port, node) {
-        if (port.portData.hasEndpoints) {
-            let portAdded = false;
-            for (const link of node.links) {
-                if (link.portA === port && this.nodes.indexOf(link.nodeB) === -1) {
-                    let localPort;
-                    if (!portAdded) {
-                        portAdded = true;
-                        localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, link.nodeA, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
-                        this._frameOutPorts.push(localPort);
-                        link.isVisible = true;
-                        const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink) => {
-                            if (this._removePortFromExposedWithLink(nodeLink, this._exposedOutPorts)) {
-                                this.redrawFramePorts();
-                            }
-                        });
-                        this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
-                    }
-                    else if (this.nodes.indexOf(link.nodeB) === -1) {
-                        link.isVisible = true;
-                        localPort = this.ports.filter((p) => p.portData === port.portData)[0];
-                    }
-                    else {
-                        localPort = this.ports.filter((p) => p.portData === port.portData)[0];
-                    }
-                    port.delegatedPort = localPort;
-                    this._controlledPorts.push(port);
+                else if (evt.clientY < yLimit && evt.clientX > xLimit) {
+                    // able to move in X but not Y
+                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandRight(distanceMouseMovedX, evt.clientX);
+                    this._mouseStartPointX = evt.clientX;
                 }
-                else if (port.exposedPortPosition >= 0 && !portAdded) {
-                    const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
-                    this._frameOutPorts.push(localPort);
-                    port.delegatedPort = localPort;
-                    this._controlledPorts.push(port);
-                    portAdded = true;
+                else if (evt.clientY > yLimit && evt.clientX < xLimit) {
+                    // able to move in Y but not X
+                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                    this._expandBottom(distanceMouseMovedY);
+                    this._mouseStartPointY = evt.clientY;
                 }
             }
-            if (portAdded)
-                return true;
-        }
-        else if (port.exposedOnFrame) {
-            const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
-            this._frameOutPorts.push(localPort);
-            port.delegatedPort = localPort;
-            this._controlledPorts.push(port);
-            return true;
-        }
-        return false;
-    }
-    redrawFramePorts() {
-        if (!this.isCollapsed) {
-            return;
-        }
-        this._outputPortContainer.innerHTML = "";
-        this._inputPortContainer.innerHTML = "";
-        this.ports.forEach((framePort) => {
-            framePort.dispose();
-        });
-        this._controlledPorts.forEach((port) => {
-            port.delegatedPort = null;
-            port.refresh();
-        });
-        this._frameInPorts = [];
-        this._frameOutPorts = [];
-        this._controlledPorts = [];
-        this._createFramePorts();
-        this._markFramePortPositions();
-        this.ports.forEach((framePort) => framePort.node._refreshLinks());
-    }
-    set isCollapsed(value) {
-        if (this._isCollapsed === value) {
-            return;
-        }
-        this._isCollapsed = value;
-        this._ownerCanvas._frameIsMoving = true;
-        // Need to delegate the outside ports to the frame
-        if (value) {
-            this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsed);
-            this.element.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
-            this._headerElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsedHeader);
-            this._moveFrame((this.width - this._collapsedWidth) / 2, 0);
-            this._createFramePorts();
-            this._markFramePortPositions();
-        }
-        else {
-            this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
-            this.element.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsed);
-            this._headerElement.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsedHeader);
-            this._outputPortContainer.innerHTML = "";
-            this._inputPortContainer.innerHTML = "";
-            this._frameInPorts.forEach((p) => {
-                p.dispose();
-            });
-            this._frameOutPorts.forEach((p) => {
-                p.dispose();
-            });
-            this._controlledPorts.forEach((port) => {
-                port.delegatedPort = null;
-                port.refresh();
-            });
-            this._frameInPorts = [];
-            this._frameOutPorts = [];
-            this._controlledPorts = [];
-            this._onNodeLinkDisposedObservers = [];
-            for (const node of this._nodes) {
-                node.isVisible = true;
+        };
+        this._onBottomRightHandlePointerUp = (evt) => {
+            if (this._resizingDirection === ResizingDirection.BottomRight) {
+                this.height = parseFloat(this.element.style.height.replace("px", ""));
+                this.width = parseFloat(this.element.style.width.replace("px", ""));
+                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onBottomRightHandlePointerUp);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onBottomRightHandlePointerMove);
+                this._cleanUpResizing(evt);
             }
-            this._moveFrame(-(this.width - this._collapsedWidth) / 2, 0);
-        }
-        this.cleanAccumulation();
-        this._ownerCanvas._frameIsMoving = false;
-        // UI
-        if (this._isCollapsed) {
-            this._headerCollapseElement.innerHTML = this._expandSVG;
-            this._headerCollapseElement.title = "Expand";
-        }
-        else {
-            this._headerCollapseElement.innerHTML = this._collapseSVG;
-            this._headerCollapseElement.title = "Collapse";
-        }
-        this.onExpandStateChanged.notifyObservers(this);
-    }
-    get nodes() {
-        return this._nodes;
-    }
-    get ports() {
-        return this._frameInPorts.concat(this._frameOutPorts);
-    }
-    get name() {
-        return this._name;
-    }
-    set name(value) {
-        this._name = value;
-        this._headerTextElement.innerHTML = value;
-    }
-    get color() {
-        return this._color;
-    }
-    set color(value) {
-        this._color = value;
-        this._headerElement.style.background = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 1)`;
-        this._headerElement.style.borderColor = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 1)`;
-        this.element.style.background = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 0.7)`;
-    }
-    get x() {
-        return this._x;
-    }
-    set x(value) {
-        if (this._x === value) {
-            return;
-        }
-        this._x = value;
-        this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
-        this.element.style.left = `${this._gridAlignedX}px`;
-    }
-    get y() {
-        return this._y;
-    }
-    set y(value) {
-        if (this._y === value) {
-            return;
-        }
-        this._y = value;
-        this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
-        this.element.style.top = `${this._gridAlignedY}px`;
-    }
-    get width() {
-        return this._width;
-    }
-    set width(value) {
-        if (this._width === value) {
-            return;
-        }
-        const viableWidth = value > this._minFrameWidth ? value : this._minFrameWidth;
-        this._width = viableWidth;
-        const gridAlignedRight = this._ownerCanvas.getGridPositionCeil(viableWidth + this._gridAlignedX);
-        this.element.style.width = `${gridAlignedRight - this._gridAlignedX}px`;
-    }
-    get height() {
-        return this._height;
-    }
-    set height(value) {
-        if (this._height === value) {
-            return;
-        }
-        this._height = value;
-        const gridAlignedBottom = this._ownerCanvas.getGridPositionCeil(value + this._gridAlignedY);
-        this.element.style.height = `${gridAlignedBottom - this._gridAlignedY}px`;
-    }
-    get comments() {
-        return this._comments;
-    }
-    set comments(comments) {
-        if (comments && !this._comments && comments.length > 0) {
-            this.element.style.gridTemplateRows = "40px min-content 1fr";
-            this._borderElement.style.gridRow = "1 / span 3";
-            this._portContainer.style.gridRow = "3";
-            this._commentsElement.classList.add("has-comments");
-        }
-        else if (!comments) {
-            this.element.style.gridTemplateRows = "40px calc(100% - 40px)";
-            this._borderElement.style.gridRow = "1 / span 2";
-            this._portContainer.style.gridRow = "2";
-            this._commentsElement.classList.remove("has-comments");
+        };
+        //@ts-ignore
+        this._onBottomLeftHandlePointerDown = (evt) => {
+            if (this.isCollapsed) {
+                return;
+            }
+            this._initResizing(evt);
+            this._resizingDirection = ResizingDirection.BottomLeft;
+            this._mouseXLimit = evt.clientX + this.width - this._minFrameWidth;
+            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onBottomLeftHandlePointerUp);
+            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onBottomLeftHandlePointerMove);
+        };
+        this._onBottomLeftHandlePointerMove = (evt) => {
+            const bottomSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
+            const yLimit = this._mouseStartPointY - bottomSlack;
+            const leftSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
+            const xLimit = this._mouseStartPointX + leftSlack;
+            this._moveBottomLeftHandle(evt, xLimit, yLimit);
+        };
+        this._moveBottomLeftHandle = (evt, xLimit, yLimit) => {
+            if (!(this._isResizingBottom() && this._isResizingLeft()) || this._mouseStartPointX === null || this._mouseStartPointY === null) {
+                return;
+            }
+            if (this._isResizingLeft() && this._isResizingBottom()) {
+                evt.stopPropagation();
+                if (evt.clientY > yLimit && evt.clientX < xLimit) {
+                    // able to move in X and Y
+                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandLeft(distanceMouseMovedX);
+                    this._mouseStartPointX = evt.clientX;
+                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                    this._expandBottom(distanceMouseMovedY);
+                    this._mouseStartPointY = evt.clientY;
+                }
+                else if (evt.clientY < yLimit && evt.clientX < xLimit) {
+                    // able to move in X but not Y
+                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandLeft(distanceMouseMovedX);
+                    this._mouseStartPointX = evt.clientX;
+                }
+                else if (evt.clientY > yLimit && evt.clientX > xLimit) {
+                    // able to move in Y but not X
+                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                    this._expandBottom(distanceMouseMovedY);
+                    this._mouseStartPointY = evt.clientY;
+                }
+            }
+        };
+        this._onBottomLeftHandlePointerUp = (evt) => {
+            evt.stopPropagation();
+            if (this._resizingDirection === ResizingDirection.BottomLeft) {
+                this.height = parseFloat(this.element.style.height.replace("px", ""));
+                this.x = parseFloat(this.element.style.left.replace("px", ""));
+                this.width = parseFloat(this.element.style.width.replace("px", ""));
+                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onBottomLeftHandlePointerUp);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onBottomLeftHandlePointerMove);
+                this._cleanUpResizing(evt);
+            }
+        };
+        //@ts-ignore
+        this._onTopLeftHandlePointerDown = (evt) => {
+            if (this.isCollapsed) {
+                return;
+            }
+            this._initResizing(evt);
+            this._resizingDirection = ResizingDirection.TopLeft;
+            this._mouseXLimit = evt.clientX + this.width - this._minFrameWidth;
+            this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopLeftHandlePointerUp);
+            this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopLeftHandlePointerMove);
+        };
+        this._onTopLeftHandlePointerMove = (evt) => {
+            const topSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
+            const yLimit = this._mouseStartPointY + topSlack;
+            const leftSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
+            const xLimit = this._mouseStartPointX + leftSlack;
+            this._moveTopLeftHandle(evt, xLimit, yLimit);
+        };
+        this._moveTopLeftHandle = (evt, xLimit, yLimit) => {
+            if (!(this._isResizingTop() && this._isResizingLeft()) || this._mouseStartPointX === null || this._mouseStartPointY === null) {
+                return;
+            }
+            if (this._isResizingLeft() && this._isResizingTop()) {
+                evt.stopPropagation();
+                if (evt.clientY < yLimit && evt.clientX < xLimit) {
+                    // able to move in X and Y
+                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandLeft(distanceMouseMovedX);
+                    this._mouseStartPointX = evt.clientX;
+                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                    this._expandTop(distanceMouseMovedY);
+                    this._mouseStartPointY = evt.clientY;
+                }
+                else if (evt.clientY > yLimit && evt.clientX < xLimit) {
+                    // able to move in X but not Y
+                    const distanceMouseMovedX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
+                    this._expandLeft(distanceMouseMovedX);
+                    this._mouseStartPointX = evt.clientX;
+                }
+                else if (evt.clientY < yLimit && evt.clientX > xLimit) {
+                    // able to move in Y but not X
+                    const distanceMouseMovedY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
+                    this._expandTop(distanceMouseMovedY);
+                    this._mouseStartPointY = evt.clientY;
+                }
+            }
+        };
+        this._onTopLeftHandlePointerUp = (evt) => {
+            evt.stopPropagation();
+            if (this._resizingDirection === ResizingDirection.TopLeft) {
+                this.y = parseFloat(this.element.style.top.replace("px", ""));
+                this.height = parseFloat(this.element.style.height.replace("px", ""));
+                this.x = parseFloat(this.element.style.left.replace("px", ""));
+                this.width = parseFloat(this.element.style.width.replace("px", ""));
+                this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onTopLeftHandlePointerUp);
+                this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onTopLeftHandlePointerMove);
+                this._cleanUpResizing(evt);
+            }
+        };
+        this._id = GraphFrame._FrameCounter++;
+        this._ownerCanvas = canvas;
+        const root = canvas.frameContainer;
+        this.element = root.ownerDocument.createElement("div");
+        this.element.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"]["frame-box"]);
+        root.appendChild(this.element);
+        this._headerElement = root.ownerDocument.createElement("div");
+        this._headerElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header"]);
+        this._headerElement.addEventListener("dblclick", () => {
+            this.isCollapsed = !this.isCollapsed;
+        });
+        this.element.appendChild(this._headerElement);
+        this._borderElement = root.ownerDocument.createElement("div");
+        this._borderElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-border"]);
+        this.element.appendChild(this._borderElement);
+        this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
+        // add resizing side handles
+        const rightHandle = root.ownerDocument.createElement("div");
+        rightHandle.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["right-handle"];
+        this.element.appendChild(rightHandle);
+        rightHandle.addEventListener("pointerdown", this._onRightHandlePointerDown);
+        const leftHandle = root.ownerDocument.createElement("div");
+        leftHandle.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["left-handle"];
+        this.element.appendChild(leftHandle);
+        leftHandle.addEventListener("pointerdown", this._onLeftHandlePointerDown);
+        const bottomHandle = root.ownerDocument.createElement("div");
+        bottomHandle.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["bottom-handle"];
+        this.element.appendChild(bottomHandle);
+        bottomHandle.addEventListener("pointerdown", this._onBottomHandlePointerDown);
+        const topHandle = root.ownerDocument.createElement("div");
+        topHandle.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["top-handle"];
+        this.element.appendChild(topHandle);
+        topHandle.addEventListener("pointerdown", this._onTopHandlePointerDown);
+        const topRightCornerHandle = root.ownerDocument.createElement("div");
+        topRightCornerHandle.className = (0,_components_classNames__WEBPACK_IMPORTED_MODULE_5__.ClassNames)({ "right-handle": true, "top-right-corner-handle": true }, _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
+        this.element.appendChild(topRightCornerHandle);
+        topRightCornerHandle.addEventListener("pointerdown", this._onTopRightHandlePointerDown);
+        const bottomRightCornerHandle = root.ownerDocument.createElement("div");
+        bottomRightCornerHandle.className = (0,_components_classNames__WEBPACK_IMPORTED_MODULE_5__.ClassNames)({ "right-handle": true, "bottom-right-corner-handle": true }, _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
+        this.element.appendChild(bottomRightCornerHandle);
+        bottomRightCornerHandle.addEventListener("pointerdown", this._onBottomRightHandlePointerDown);
+        const topLeftCornerHandle = root.ownerDocument.createElement("div");
+        topLeftCornerHandle.className = (0,_components_classNames__WEBPACK_IMPORTED_MODULE_5__.ClassNames)({ "left-handle": true, "top-left-corner-handle": true }, _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
+        this.element.appendChild(topLeftCornerHandle);
+        topLeftCornerHandle.addEventListener("pointerdown", this._onTopLeftHandlePointerDown);
+        const bottomLeftCornerHandle = root.ownerDocument.createElement("div");
+        bottomLeftCornerHandle.className = (0,_components_classNames__WEBPACK_IMPORTED_MODULE_5__.ClassNames)({ "left-handle": true, "bottom-left-corner-handle": true }, _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
+        this.element.appendChild(bottomLeftCornerHandle);
+        bottomLeftCornerHandle.addEventListener("pointerdown", this._onBottomLeftHandlePointerDown);
+        // add header elements
+        this._headerTextElement = root.ownerDocument.createElement("div");
+        this._headerTextElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-title"]);
+        this._headerElement.appendChild(this._headerTextElement);
+        this._headerCollapseElement = root.ownerDocument.createElement("div");
+        this._headerCollapseElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-collapse"]);
+        this._headerCollapseElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-button"]);
+        this._headerCollapseElement.title = "Collapse";
+        this._headerCollapseElement.ondragstart = () => false;
+        this._headerCollapseElement.addEventListener("pointerdown", (evt) => {
+            this._headerCollapseElement.classList.add("down");
+            evt.stopPropagation();
+        });
+        this._headerCollapseElement.addEventListener("pointerup", (evt) => {
+            evt.stopPropagation();
+            this._headerCollapseElement.classList.remove("down");
+            this.isCollapsed = !this.isCollapsed;
+        });
+        this._headerCollapseElement.innerHTML = this._collapseSVG;
+        this._headerElement.appendChild(this._headerCollapseElement);
+        this._headerCloseElement = root.ownerDocument.createElement("div");
+        this._headerCloseElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-close"]);
+        this._headerCloseElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-box-header-button"]);
+        this._headerCloseElement.title = "Close";
+        this._headerCloseElement.ondragstart = () => false;
+        this._headerCloseElement.addEventListener("pointerdown", (evt) => {
+            evt.stopPropagation();
+        });
+        this._headerCloseElement.addEventListener("pointerup", (evt) => {
+            evt.stopPropagation();
+            this.dispose();
+        });
+        this._headerCloseElement.innerHTML = this._closeSVG;
+        this._headerElement.appendChild(this._headerCloseElement);
+        this._portContainer = root.ownerDocument.createElement("div");
+        this._portContainer.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["port-container"]);
+        this.element.appendChild(this._portContainer);
+        this._outputPortContainer = root.ownerDocument.createElement("div");
+        this._outputPortContainer.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].outputsContainer);
+        this._portContainer.appendChild(this._outputPortContainer);
+        this._inputPortContainer = root.ownerDocument.createElement("div");
+        this._inputPortContainer.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].inputsContainer);
+        this._portContainer.appendChild(this._inputPortContainer);
+        this.name = "Frame";
+        this.color = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Color3.FromInts(72, 72, 72);
+        if (candidate) {
+            this.x = parseFloat(candidate.style.left.replace("px", ""));
+            this.y = parseFloat(candidate.style.top.replace("px", ""));
+            this.width = parseFloat(candidate.style.width.replace("px", ""));
+            this.height = parseFloat(candidate.style.height.replace("px", ""));
+            this.cleanAccumulation();
         }
-        if (comments === "" || (comments && comments.length >= 0)) {
-            this._commentsElement.children[0].innerText = comments;
+        this._headerTextElement.addEventListener("pointerdown", (evt) => this._onDown(evt));
+        this._headerTextElement.addEventListener("pointerup", (evt) => this._onUp(evt));
+        this._headerTextElement.addEventListener("pointermove", (evt) => this._onMove(evt));
+        this._onSelectionChangedObserver = canvas.stateManager.onSelectionChangedObservable.add(() => {
+            if (this._ownerCanvas.selectedFrames.indexOf(this) !== -1) {
+                this._borderElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+            }
+            else {
+                this._borderElement.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+            }
+        });
+        canvas.stateManager.onSelectionBoxMoved.add((rect1) => {
+            const rect2 = this.element.getBoundingClientRect();
+            const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
+            if (overlap) {
+                canvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: this, forceKeepSelection: true, marqueeSelection: true });
+            }
+        });
+        this._onGraphNodeRemovalObserver = canvas.stateManager.onGraphNodeRemovalObservable.add((node) => {
+            // remove node from this._nodes
+            const index = this._nodes.indexOf(node);
+            if (index === -1) {
+                return;
+            }
+            else {
+                node.enclosingFrameId = -1;
+                this._nodes.splice(index, 1);
+            }
+        });
+        this._onExposePortOnFrameObserver = canvas.stateManager.onExposePortOnFrameObservable.add((node) => {
+            if (this.nodes.indexOf(node) === -1) {
+                return;
+            }
+            this.redrawFramePorts();
+        });
+        this._commentsElement = document.createElement("div");
+        this._commentsElement.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-comments"];
+        this._commentsElement.style.color = "white";
+        this._commentsElement.style.fontSize = "16px";
+        const commentSpan = document.createElement("span");
+        commentSpan.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-comment-span"];
+        this._commentsElement.appendChild(commentSpan);
+        this.element.appendChild(this._commentsElement);
+        // Get nodes
+        if (!doNotCaptureNodes) {
+            this.refresh();
         }
-        this.height = this._borderElement.offsetHeight;
-        this._comments = comments;
-        this._updateMinHeightWithComments();
     }
     refresh() {
         this._nodes = [];
@@ -52204,54 +52204,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class GraphNode {
-    constructor(content, stateManager) {
-        this.content = content;
-        this._inputPorts = [];
-        this._outputPorts = [];
-        this._links = [];
-        this._x = 0;
-        this._y = 0;
-        this._gridAlignedX = 0;
-        this._gridAlignedY = 0;
-        this._mouseStartPointX = null;
-        this._mouseStartPointY = null;
-        this._displayManager = null;
-        this._isVisible = true;
-        this._enclosingFrameId = -1;
-        this._stateManager = stateManager;
-        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
-            const { selection: node } = options || {};
-            if (node === this) {
-                this._visual.classList.add(_graphNode_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].selected);
-            }
-            else {
-                setTimeout(() => {
-                    if (this._ownerCanvas.selectedNodes.indexOf(this) === -1) {
-                        this._visual.classList.remove(_graphNode_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].selected);
-                    }
-                });
-            }
-        });
-        this._onUpdateRequiredObserver = this._stateManager.onUpdateRequiredObservable.add((data) => {
-            if (data !== this.content.data) {
-                return;
-            }
-            this.refresh();
-        });
-        this._onSelectionBoxMovedObserver = this._stateManager.onSelectionBoxMoved.add((rect1) => {
-            const rect2 = this._visual.getBoundingClientRect();
-            const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
-            this.setIsSelected(overlap, true);
-        });
-        this._onFrameCreatedObserver = this._stateManager.onFrameCreatedObservable.add((frame) => {
-            if (this._ownerCanvas.frames.some((f) => f.nodes.indexOf(this) !== -1)) {
-                return;
-            }
-            if (this.isOverlappingFrame(frame)) {
-                frame.nodes.push(this);
-            }
-        });
-    }
     addClassToVisual(className) {
         this._visual.classList.add(className);
     }
@@ -52363,6 +52315,54 @@ class GraphNode {
             this._stateManager.onSelectionChangedObservable.notifyObservers({ selection: this, marqueeSelection });
         }
     }
+    constructor(content, stateManager) {
+        this.content = content;
+        this._inputPorts = [];
+        this._outputPorts = [];
+        this._links = [];
+        this._x = 0;
+        this._y = 0;
+        this._gridAlignedX = 0;
+        this._gridAlignedY = 0;
+        this._mouseStartPointX = null;
+        this._mouseStartPointY = null;
+        this._displayManager = null;
+        this._isVisible = true;
+        this._enclosingFrameId = -1;
+        this._stateManager = stateManager;
+        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection: node } = options || {};
+            if (node === this) {
+                this._visual.classList.add(_graphNode_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].selected);
+            }
+            else {
+                setTimeout(() => {
+                    if (this._ownerCanvas.selectedNodes.indexOf(this) === -1) {
+                        this._visual.classList.remove(_graphNode_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].selected);
+                    }
+                });
+            }
+        });
+        this._onUpdateRequiredObserver = this._stateManager.onUpdateRequiredObservable.add((data) => {
+            if (data !== this.content.data) {
+                return;
+            }
+            this.refresh();
+        });
+        this._onSelectionBoxMovedObserver = this._stateManager.onSelectionBoxMoved.add((rect1) => {
+            const rect2 = this._visual.getBoundingClientRect();
+            const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
+            this.setIsSelected(overlap, true);
+        });
+        this._onFrameCreatedObserver = this._stateManager.onFrameCreatedObservable.add((frame) => {
+            if (this._ownerCanvas.frames.some((f) => f.nodes.indexOf(this) !== -1)) {
+                return;
+            }
+            if (this.isOverlappingFrame(frame)) {
+                frame.nodes.push(this);
+            }
+        });
+    }
     isOverlappingFrame(frame) {
         const rect2 = this._visual.getBoundingClientRect();
         const rect1 = frame.element.getBoundingClientRect();
@@ -52728,43 +52728,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class NodeLink {
-    constructor(graphCanvas, portA, nodeA, portB, nodeB) {
-        this._isVisible = true;
-        this._isTargetCandidate = false;
-        this.onDisposedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
-        this._portA = portA;
-        this._portB = portB;
-        this._nodeA = nodeA;
-        this._nodeB = nodeB;
-        this._graphCanvas = graphCanvas;
-        const document = portA.element.ownerDocument;
-        const svg = graphCanvas.svgCanvas;
-        // Create path
-        this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        this._path.setAttribute("fill", "none");
-        this._path.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].link);
-        svg.appendChild(this._path);
-        this._selectionPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        this._selectionPath.setAttribute("fill", "none");
-        this._selectionPath.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["selection-link"]);
-        svg.appendChild(this._selectionPath);
-        this._selectionPath.onmousedown = (evt) => this.onClick(evt);
-        if (this._portB) {
-            // Update
-            this.update();
-        }
-        this._onSelectionChangedObserver = this._graphCanvas.stateManager.onSelectionChangedObservable.add((options) => {
-            const { selection } = options || {};
-            if (selection === this) {
-                this._path.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
-                this._selectionPath.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
-            }
-            else {
-                this._path.classList.remove(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
-                this._selectionPath.classList.remove(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
-            }
-        });
-    }
     get isTargetCandidate() {
         return this._isTargetCandidate;
     }
@@ -52855,6 +52818,43 @@ class NodeLink {
         }
         this._path.setAttribute("stroke", this._portA.element.style.backgroundColor);
     }
+    constructor(graphCanvas, portA, nodeA, portB, nodeB) {
+        this._isVisible = true;
+        this._isTargetCandidate = false;
+        this.onDisposedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
+        this._portA = portA;
+        this._portB = portB;
+        this._nodeA = nodeA;
+        this._nodeB = nodeB;
+        this._graphCanvas = graphCanvas;
+        const document = portA.element.ownerDocument;
+        const svg = graphCanvas.svgCanvas;
+        // Create path
+        this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._path.setAttribute("fill", "none");
+        this._path.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].link);
+        svg.appendChild(this._path);
+        this._selectionPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._selectionPath.setAttribute("fill", "none");
+        this._selectionPath.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["selection-link"]);
+        svg.appendChild(this._selectionPath);
+        this._selectionPath.onmousedown = (evt) => this.onClick(evt);
+        if (this._portB) {
+            // Update
+            this.update();
+        }
+        this._onSelectionChangedObserver = this._graphCanvas.stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection } = options || {};
+            if (selection === this) {
+                this._path.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+                this._selectionPath.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+            }
+            else {
+                this._path.classList.remove(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+                this._selectionPath.classList.remove(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
+            }
+        });
+    }
     onClick(evt) {
         const stateManager = this._graphCanvas.stateManager;
         if (evt.altKey) {
@@ -52915,54 +52915,17 @@ class NodeLink {
   !*** ../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodePort.js ***!
   \************************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "NodePort": () => (/* binding */ NodePort)
-/* harmony export */ });
-/* harmony import */ var _common_modules_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./common.modules.scss */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/common.modules.scss");
-/* harmony import */ var _nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./nodePort.modules.scss */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodePort.modules.scss");
-
-
-class NodePort {
-    constructor(portContainer, portData, node, stateManager) {
-        this.portData = portData;
-        this.node = node;
-        this.delegatedPort = null;
-        this._element = portContainer.ownerDocument.createElement("div");
-        this._element.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_0__["default"].port);
-        portContainer.appendChild(this._element);
-        this._stateManager = stateManager;
-        this._img = portContainer.ownerDocument.createElement("img");
-        this._element.appendChild(this._img);
-        // determine if node name is editable
-        if (portContainer.children[0].className === _common_modules_scss__WEBPACK_IMPORTED_MODULE_0__["default"]["port-label"]) {
-            this._portLabelElement = portContainer.children[0];
-        }
-        this._element.port = this;
-        // Drag support
-        this._element.ondragstart = () => false;
-        this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {
-            const rect = this._element.getBoundingClientRect();
-            if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {
-                this._element.classList.remove(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"].selected);
-                return;
-            }
-            this._element.classList.add(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"].selected);
-            this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);
-        });
-        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
-            const { selection } = options || {};
-            if (selection === this) {
-                this._img.classList.add(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"].selected);
-            }
-            else {
-                this._img.classList.remove(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"].selected);
-            }
-        });
-        this.refresh();
-    }
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "NodePort": () => (/* binding */ NodePort)
+/* harmony export */ });
+/* harmony import */ var _common_modules_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./common.modules.scss */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/common.modules.scss");
+/* harmony import */ var _nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./nodePort.modules.scss */ "../../../dev/sharedUiComponents/dist/nodeGraphSystem/nodePort.modules.scss");
+
+
+class NodePort {
     get element() {
         if (this.delegatedPort) {
             return this.delegatedPort.element;
@@ -53032,6 +52995,43 @@ class NodePort {
     refresh() {
         this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
     }
+    constructor(portContainer, portData, node, stateManager) {
+        this.portData = portData;
+        this.node = node;
+        this.delegatedPort = null;
+        this._element = portContainer.ownerDocument.createElement("div");
+        this._element.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_0__["default"].port);
+        portContainer.appendChild(this._element);
+        this._stateManager = stateManager;
+        this._img = portContainer.ownerDocument.createElement("img");
+        this._element.appendChild(this._img);
+        // determine if node name is editable
+        if (portContainer.children[0].className === _common_modules_scss__WEBPACK_IMPORTED_MODULE_0__["default"]["port-label"]) {
+            this._portLabelElement = portContainer.children[0];
+        }
+        this._element.port = this;
+        // Drag support
+        this._element.ondragstart = () => false;
+        this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {
+            const rect = this._element.getBoundingClientRect();
+            if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {
+                this._element.classList.remove(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"].selected);
+                return;
+            }
+            this._element.classList.add(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"].selected);
+            this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);
+        });
+        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection } = options || {};
+            if (selection === this) {
+                this._img.classList.add(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"].selected);
+            }
+            else {
+                this._img.classList.remove(_nodePort_modules_scss__WEBPACK_IMPORTED_MODULE_1__["default"].selected);
+            }
+        });
+        this.refresh();
+    }
     dispose() {
         this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);
         if (this._onSelectionChangedObserver) {
@@ -54817,6 +54817,39 @@ __webpack_require__.r(__webpack_exports__);
 
 const dontSerializeTextureContent = true;
 class PreviewManager {
+    _serializeMaterial() {
+        const nodeMaterial = this._nodeMaterial;
+        let fullSerialization = false;
+        if (dontSerializeTextureContent) {
+            const textureBlocks = nodeMaterial.getAllTextureBlocks();
+            for (const block of textureBlocks) {
+                const texture = block.texture;
+                if (!texture || block.hasImageSource) {
+                    continue;
+                }
+                let found = false;
+                for (const localTexture of this._engine.getLoadedTexturesCache()) {
+                    if (localTexture.uniqueId === texture._texture?.uniqueId) {
+                        found = true;
+                        break;
+                    }
+                }
+                if (!found) {
+                    fullSerialization = true;
+                    break;
+                }
+            }
+        }
+        const bufferSerializationState = core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers;
+        if (dontSerializeTextureContent) {
+            core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers = fullSerialization;
+            core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture._SerializeInternalTextureUniqueId = true;
+        }
+        const serializationObject = nodeMaterial.serialize();
+        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers = bufferSerializationState;
+        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture._SerializeInternalTextureUniqueId = false;
+        return serializationObject;
+    }
     constructor(targetCanvas, globalState) {
         this._nodeMaterial = globalState.nodeMaterial;
         this._globalState = globalState;
@@ -54885,39 +54918,6 @@ class PreviewManager {
             lastOffsetX = evt.event.offsetX;
         });
     }
-    _serializeMaterial() {
-        const nodeMaterial = this._nodeMaterial;
-        let fullSerialization = false;
-        if (dontSerializeTextureContent) {
-            const textureBlocks = nodeMaterial.getAllTextureBlocks();
-            for (const block of textureBlocks) {
-                const texture = block.texture;
-                if (!texture || block.hasImageSource) {
-                    continue;
-                }
-                let found = false;
-                for (const localTexture of this._engine.getLoadedTexturesCache()) {
-                    if (localTexture.uniqueId === texture._texture?.uniqueId) {
-                        found = true;
-                        break;
-                    }
-                }
-                if (!found) {
-                    fullSerialization = true;
-                    break;
-                }
-            }
-        }
-        const bufferSerializationState = core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers;
-        if (dontSerializeTextureContent) {
-            core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers = fullSerialization;
-            core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture._SerializeInternalTextureUniqueId = true;
-        }
-        const serializationObject = nodeMaterial.serialize();
-        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers = bufferSerializationState;
-        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture._SerializeInternalTextureUniqueId = false;
-        return serializationObject;
-    }
     _handleAnimations() {
         this._scene.stopAllAnimations();
         if (this._globalState.rotatePreview) {
@@ -56123,6 +56123,16 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class GlobalState {
+    /** Gets the mode */
+    get mode() {
+        return this._mode;
+    }
+    /** Sets the mode */
+    set mode(m) {
+        core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.WriteNumber("Mode", m);
+        this._mode = m;
+        this.onPreviewCommandActivated.notifyObservers(true);
+    }
     constructor() {
         this.onBuiltObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onResetRequiredObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -56162,16 +56172,6 @@ class GlobalState {
         const b = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadNumber("BackgroundColorB", 0.25098039215686274);
         this.backgroundColor = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Color4(r, g, b, 1.0);
     }
-    /** Gets the mode */
-    get mode() {
-        return this._mode;
-    }
-    /** Sets the mode */
-    set mode(m) {
-        core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.WriteNumber("Mode", m);
-        this._mode = m;
-        this.onPreviewCommandActivated.notifyObservers(true);
-    }
     storeEditorData(serializationObject, frame) {
         this.stateManager.storeEditorData(serializationObject, frame);
     }
@@ -56232,6 +56232,47 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
+    appendBlock(dataToAppend, recursion = true) {
+        return this._graphCanvas.createNodeFromObject(dataToAppend instanceof core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialBlock ? shared_ui_components_nodeGraphSystem_typeLedger__WEBPACK_IMPORTED_MODULE_17__.TypeLedger.NodeDataBuilder(dataToAppend, this._graphCanvas) : dataToAppend, (block) => {
+            if (this.props.globalState.nodeMaterial.attachedBlocks.indexOf(block) === -1) {
+                this.props.globalState.nodeMaterial.attachedBlocks.push(block);
+            }
+            if (block.isFinalMerger) {
+                this.props.globalState.nodeMaterial.addOutputNode(block);
+            }
+        }, recursion);
+    }
+    addValueNode(type) {
+        const nodeType = _blockTools__WEBPACK_IMPORTED_MODULE_8__.BlockTools.GetConnectionNodeTypeFromString(type);
+        const newInputBlock = new core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.InputBlock(type, undefined, nodeType);
+        return this.appendBlock(newInputBlock);
+    }
+    componentDidMount() {
+        window.addEventListener("wheel", this.onWheel, { passive: false });
+        if (this.props.globalState.hostDocument) {
+            this._graphCanvas = this._graphCanvasRef.current;
+            this._diagramContainer = this._diagramContainerRef.current;
+            this._previewManager = new _components_preview_previewManager__WEBPACK_IMPORTED_MODULE_9__.PreviewManager(this.props.globalState.hostDocument.getElementById("preview-canvas"), this.props.globalState);
+            this.props.globalState._previewManager = this._previewManager;
+        }
+        if (navigator.userAgent.indexOf("Mobile") !== -1) {
+            (this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
+        }
+        this.props.globalState.onPopupClosedObservable.addOnce(() => {
+            this.componentWillUnmount();
+        });
+        this.build();
+    }
+    componentWillUnmount() {
+        window.removeEventListener("wheel", this.onWheel);
+        if (this.props.globalState.hostDocument) {
+            this.props.globalState.hostDocument.removeEventListener("keyup", this._onWidgetKeyUpPointer, false);
+        }
+        if (this._previewManager) {
+            this._previewManager.dispose();
+            this._previewManager = null;
+        }
+    }
     constructor(props) {
         super(props);
         this._leftWidth = core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.DataStorage.ReadNumber("LeftWidth", 200);
@@ -56472,47 +56513,6 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             this.setState({ message: message, isError: true });
         });
     }
-    appendBlock(dataToAppend, recursion = true) {
-        return this._graphCanvas.createNodeFromObject(dataToAppend instanceof core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialBlock ? shared_ui_components_nodeGraphSystem_typeLedger__WEBPACK_IMPORTED_MODULE_17__.TypeLedger.NodeDataBuilder(dataToAppend, this._graphCanvas) : dataToAppend, (block) => {
-            if (this.props.globalState.nodeMaterial.attachedBlocks.indexOf(block) === -1) {
-                this.props.globalState.nodeMaterial.attachedBlocks.push(block);
-            }
-            if (block.isFinalMerger) {
-                this.props.globalState.nodeMaterial.addOutputNode(block);
-            }
-        }, recursion);
-    }
-    addValueNode(type) {
-        const nodeType = _blockTools__WEBPACK_IMPORTED_MODULE_8__.BlockTools.GetConnectionNodeTypeFromString(type);
-        const newInputBlock = new core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.InputBlock(type, undefined, nodeType);
-        return this.appendBlock(newInputBlock);
-    }
-    componentDidMount() {
-        window.addEventListener("wheel", this.onWheel, { passive: false });
-        if (this.props.globalState.hostDocument) {
-            this._graphCanvas = this._graphCanvasRef.current;
-            this._diagramContainer = this._diagramContainerRef.current;
-            this._previewManager = new _components_preview_previewManager__WEBPACK_IMPORTED_MODULE_9__.PreviewManager(this.props.globalState.hostDocument.getElementById("preview-canvas"), this.props.globalState);
-            this.props.globalState._previewManager = this._previewManager;
-        }
-        if (navigator.userAgent.indexOf("Mobile") !== -1) {
-            (this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
-        }
-        this.props.globalState.onPopupClosedObservable.addOnce(() => {
-            this.componentWillUnmount();
-        });
-        this.build();
-    }
-    componentWillUnmount() {
-        window.removeEventListener("wheel", this.onWheel);
-        if (this.props.globalState.hostDocument) {
-            this.props.globalState.hostDocument.removeEventListener("keyup", this._onWidgetKeyUpPointer, false);
-        }
-        if (this._previewManager) {
-            this._previewManager.dispose();
-            this._previewManager = null;
-        }
-    }
     zoomToFit() {
         this._graphCanvas.zoomToFit();
     }
@@ -56740,21 +56740,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class BlockNodeData {
-    constructor(data, nodeContainer) {
-        this.data = data;
-        this._inputs = [];
-        this._outputs = [];
-        if (data.inputs) {
-            this.data.inputs.forEach((input) => {
-                this._inputs.push(new _connectionPointPortData__WEBPACK_IMPORTED_MODULE_1__.ConnectionPointPortData(input, nodeContainer));
-            });
-        }
-        if (data.outputs) {
-            this.data.outputs.forEach((output) => {
-                this._outputs.push(new _connectionPointPortData__WEBPACK_IMPORTED_MODULE_1__.ConnectionPointPortData(output, nodeContainer));
-            });
-        }
-    }
     get uniqueId() {
         return this.data.uniqueId;
     }
@@ -56812,6 +56797,21 @@ class BlockNodeData {
         }
         iconDiv.classList.add(_blockNodeData_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].hidden);
     }
+    constructor(data, nodeContainer) {
+        this.data = data;
+        this._inputs = [];
+        this._outputs = [];
+        if (data.inputs) {
+            this.data.inputs.forEach((input) => {
+                this._inputs.push(new _connectionPointPortData__WEBPACK_IMPORTED_MODULE_1__.ConnectionPointPortData(input, nodeContainer));
+            });
+        }
+        if (data.outputs) {
+            this.data.outputs.forEach((output) => {
+                this._outputs.push(new _connectionPointPortData__WEBPACK_IMPORTED_MODULE_1__.ConnectionPointPortData(output, nodeContainer));
+            });
+        }
+    }
 }
 
 
@@ -56836,11 +56836,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class ConnectionPointPortData {
-    constructor(connectionPoint, nodeContainer) {
-        this._connectedPort = null;
-        this.data = connectionPoint;
-        this._nodeContainer = nodeContainer;
-    }
     get name() {
         const block = this.data.ownerBlock;
         let portName = this.data.displayName || this.data.name;
@@ -56910,6 +56905,11 @@ class ConnectionPointPortData {
         });
         return endpoints;
     }
+    constructor(connectionPoint, nodeContainer) {
+        this._connectedPort = null;
+        this.data = connectionPoint;
+        this._nodeContainer = nodeContainer;
+    }
     updateDisplayName(newName) {
         this.data.displayName = newName;
     }