Nightly

dist/preview release/babylon.d.ts

@@ -51455,6 +51455,10 @@ declare module BABYLON.Debug {
          *
          * | Option          | Type    | Default | Description |
          * | --------------- | ------- | ------- | ----------- |
+         * | midStep         | float   | 0.235   | A percentage between a bone and its child that determines the widest part of a spur. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | midStepFactor   | float   | 0.15    | Mid step width expressed as a factor of the length. A value of 0.5 makes the spur width half of the spur length. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereBaseSize  | float   | 2       | Sphere base size. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereScaleUnit | float   | 0.865   | Sphere scale factor used to scale spheres in relation to the longest bone. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
          * | showLocalAxes   | boolean | false   | Displays local axes on all bones. |
          * | localAxesSize   | float   | 0.075   | Determines the length of each local axis. |
          *

dist/preview release/babylon.module.d.ts

@@ -53514,6 +53514,10 @@ declare module "babylonjs/Debug/skeletonViewer" {
          *
          * | Option          | Type    | Default | Description |
          * | --------------- | ------- | ------- | ----------- |
+         * | midStep         | float   | 0.235   | A percentage between a bone and its child that determines the widest part of a spur. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | midStepFactor   | float   | 0.15    | Mid step width expressed as a factor of the length. A value of 0.5 makes the spur width half of the spur length. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereBaseSize  | float   | 2       | Sphere base size. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereScaleUnit | float   | 0.865   | Sphere scale factor used to scale spheres in relation to the longest bone. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
          * | showLocalAxes   | boolean | false   | Displays local axes on all bones. |
          * | localAxesSize   | float   | 0.075   | Determines the length of each local axis. |
          *
@@ -131737,6 +131741,10 @@ declare module BABYLON.Debug {
          *
          * | Option          | Type    | Default | Description |
          * | --------------- | ------- | ------- | ----------- |
+         * | midStep         | float   | 0.235   | A percentage between a bone and its child that determines the widest part of a spur. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | midStepFactor   | float   | 0.15    | Mid step width expressed as a factor of the length. A value of 0.5 makes the spur width half of the spur length. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereBaseSize  | float   | 2       | Sphere base size. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereScaleUnit | float   | 0.865   | Sphere scale factor used to scale spheres in relation to the longest bone. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
          * | showLocalAxes   | boolean | false   | Displays local axes on all bones. |
          * | localAxesSize   | float   | 0.075   | Determines the length of each local axis. |
          *

dist/preview release/documentation.d.ts

@@ -51455,6 +51455,10 @@ declare module BABYLON.Debug {
          *
          * | Option          | Type    | Default | Description |
          * | --------------- | ------- | ------- | ----------- |
+         * | midStep         | float   | 0.235   | A percentage between a bone and its child that determines the widest part of a spur. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | midStepFactor   | float   | 0.15    | Mid step width expressed as a factor of the length. A value of 0.5 makes the spur width half of the spur length. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereBaseSize  | float   | 2       | Sphere base size. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereScaleUnit | float   | 0.865   | Sphere scale factor used to scale spheres in relation to the longest bone. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
          * | showLocalAxes   | boolean | false   | Displays local axes on all bones. |
          * | localAxesSize   | float   | 0.075   | Determines the length of each local axis. |
          *

dist/preview release/nodeEditor/babylon.nodeEditor.d.ts

@@ -162,6 +162,8 @@ declare module NODEEDITOR {
         private _frameInPorts;
         private _frameOutPorts;
         private _controlledPorts;
+        private _exposedInPorts;
+        private _exposedOutPorts;
         private _id;
         private _comments;
         private _frameIsResizing;
@@ -178,6 +180,9 @@ declare module NODEEDITOR {
         private _createInputPort;
         private _markFramePortPositions;
         private _createFramePorts;
+        private removePortFromExposed;
+        private createInputPorts;
+        private createOutputPorts;
         private _redrawFramePorts;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
@@ -273,6 +278,7 @@ declare module NODEEDITOR {
         protected _onCandidateLinkMovedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<BABYLON.Vector2>>>;
         protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         protected _exposedOnFrame: boolean;
+        isExposed: boolean;
         delegatedPort: BABYLON.Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
         get portName(): string;

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -67074,6 +67074,8 @@ var GraphFrame = /** @class */ (function () {
         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 babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
@@ -67713,6 +67715,10 @@ var GraphFrame = /** @class */ (function () {
         this._frameInPorts.push(localPort);
         port.delegatedPort = localPort;
         this._controlledPorts.push(port);
+        if (!port.isExposed) {
+            port.isExposed = true;
+            this._exposedInPorts.push(port);
+        }
     };
     // Mark ports with FramePortPosition for re-arrangement support
     GraphFrame.prototype._markFramePortPositions = function () {
@@ -67756,67 +67762,124 @@ var GraphFrame = /** @class */ (function () {
         }
     };
     GraphFrame.prototype._createFramePorts = function () {
-        var _this_1 = this;
         for (var _i = 0, _a = this._nodes; _i < _a.length; _i++) {
             var node = _a[_i];
             node.isVisible = false;
-            for (var _b = 0, _c = node.outputPorts; _b < _c.length; _b++) { // Output
-                var port = _c[_b];
-                if (port.connectionPoint.hasEndpoints) {
-                    var portAdded = false;
-                    for (var _d = 0, _e = node.links; _d < _e.length; _d++) {
-                        var link = _e[_d];
-                        if (link.portA === port && this.nodes.indexOf(link.nodeB) === -1 || (link.portA === port && port.exposedOnFrame)) {
-                            var localPort = void 0;
-                            if (!portAdded) {
-                                portAdded = true;
-                                localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_3__["FrameNodePort"].CreateFrameNodePortElement(port.connectionPoint, link.nodeA, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++, this.id);
-                                this._frameOutPorts.push(localPort);
-                                link.isVisible = true;
-                                var onLinkDisposedObserver = link.onDisposedObservable.add(function (nodeLink) {
-                                    _this_1._redrawFramePorts();
-                                });
-                                this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
-                            }
-                            else if (this.nodes.indexOf(link.nodeB) === -1) {
-                                link.isVisible = true;
-                                localPort = this.ports.filter(function (p) { return p.connectionPoint === port.connectionPoint; })[0];
-                            }
-                            else {
-                                localPort = this.ports.filter(function (p) { return p.connectionPoint === port.connectionPoint; })[0];
-                            }
-                            port.delegatedPort = localPort;
-                            this._controlledPorts.push(port);
-                        }
+        }
+        for (var _b = 0, _c = this._exposedOutPorts; _b < _c.length; _b++) { // Output
+            var port = _c[_b];
+            if (port.node === null || port.node.enclosingFrameId != this.id) {
+                var index = this._exposedOutPorts.findIndex(function (nodePort) { return nodePort === port; });
+                this._exposedOutPorts.splice(index, 1);
+                port.isExposed = false;
+            }
+            else {
+                this.createOutputPorts(port, port.node);
+            }
+        }
+        for (var _d = 0, _e = this._exposedInPorts; _d < _e.length; _d++) { // Input
+            var port = _e[_d];
+            if (port.node === null || port.node.enclosingFrameId != this.id) {
+                var index = this._exposedInPorts.findIndex(function (nodePort) { return nodePort === port; });
+                this._exposedInPorts.splice(index, 1);
+                port.isExposed = false;
+            }
+            else {
+                this.createInputPorts(port, port.node);
+            }
+        }
+        for (var _f = 0, _g = this._nodes; _f < _g.length; _f++) {
+            var node = _g[_f];
+            for (var _h = 0, _j = node.outputPorts; _h < _j.length; _h++) { // Output
+                var port = _j[_h];
+                if (!port.isExposed) {
+                    if (this.createOutputPorts(port, node)) {
+                        this._exposedOutPorts.push(port);
+                        port.isExposed = true;
                     }
                 }
-                else if (port.exposedOnFrame) {
-                    var localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_3__["FrameNodePort"].CreateFrameNodePortElement(port.connectionPoint, node, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++, this.id);
-                    this._frameOutPorts.push(localPort);
-                    port.delegatedPort = localPort;
-                    this._controlledPorts.push(port);
-                }
             }
-            for (var _f = 0, _g = node.inputPorts; _f < _g.length; _f++) { // Input
-                var port = _g[_f];
-                if (port.connectionPoint.isConnected) {
-                    for (var _h = 0, _j = node.links; _h < _j.length; _h++) {
-                        var link = _j[_h];
-                        if (link.portB === port && this.nodes.indexOf(link.nodeA) === -1) {
-                            this._createInputPort(port, node);
-                            link.isVisible = true;
-                            var onLinkDisposedObserver = link.onDisposedObservable.add(function (nodeLink) {
-                                _this_1._redrawFramePorts();
-                            });
-                            this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
-                        }
-                    }
+            for (var _k = 0, _l = node.inputPorts; _k < _l.length; _k++) { // Input
+                var port = _l[_k];
+                if (!port.isExposed) {
+                    this.createInputPorts(port, node);
                 }
-                else if (port.exposedOnFrame) {
+            }
+        }
+    };
+    GraphFrame.prototype.removePortFromExposed = function (nodeLink, exposedPorts) {
+        var aPort = exposedPorts.findIndex(function (nodePort) { return nodePort === nodeLink.portA; });
+        var bPort = exposedPorts.findIndex(function (nodePort) { return nodePort === nodeLink.portB; });
+        if (aPort >= 0) {
+            exposedPorts.splice(aPort, 1);
+            nodeLink.portA.isExposed = false;
+        }
+        else if (bPort >= 0) {
+            exposedPorts.splice(bPort, 1);
+            if (nodeLink.portB)
+                nodeLink.portB.isExposed = false;
+        }
+    };
+    GraphFrame.prototype.createInputPorts = function (port, node) {
+        var _this_1 = this;
+        if (port.connectionPoint.isConnected) {
+            for (var _i = 0, _a = node.links; _i < _a.length; _i++) {
+                var link = _a[_i];
+                if (link.portB === port && this.nodes.indexOf(link.nodeA) === -1) {
                     this._createInputPort(port, node);
+                    link.isVisible = true;
+                    var onLinkDisposedObserver = link.onDisposedObservable.add(function (nodeLink) {
+                        _this_1.removePortFromExposed(nodeLink, _this_1._exposedInPorts);
+                        _this_1._redrawFramePorts();
+                    });
+                    this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
                 }
             }
         }
+        else if (port.exposedOnFrame) {
+            this._createInputPort(port, node);
+        }
+    };
+    GraphFrame.prototype.createOutputPorts = function (port, node) {
+        var _this_1 = this;
+        if (port.connectionPoint.hasEndpoints) {
+            var portAdded = false;
+            for (var _i = 0, _a = node.links; _i < _a.length; _i++) {
+                var link = _a[_i];
+                if (link.portA === port && this.nodes.indexOf(link.nodeB) === -1 || (link.portA === port && port.exposedOnFrame)) {
+                    var localPort = void 0;
+                    if (!portAdded) {
+                        portAdded = true;
+                        localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_3__["FrameNodePort"].CreateFrameNodePortElement(port.connectionPoint, link.nodeA, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++, this.id);
+                        this._frameOutPorts.push(localPort);
+                        link.isVisible = true;
+                        var onLinkDisposedObserver = link.onDisposedObservable.add(function (nodeLink) {
+                            _this_1.removePortFromExposed(nodeLink, _this_1._exposedOutPorts);
+                            _this_1._redrawFramePorts();
+                        });
+                        this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
+                    }
+                    else if (this.nodes.indexOf(link.nodeB) === -1) {
+                        link.isVisible = true;
+                        localPort = this.ports.filter(function (p) { return p.connectionPoint === port.connectionPoint; })[0];
+                    }
+                    else {
+                        localPort = this.ports.filter(function (p) { return p.connectionPoint === port.connectionPoint; })[0];
+                    }
+                    port.delegatedPort = localPort;
+                    this._controlledPorts.push(port);
+                    return true;
+                }
+            }
+        }
+        else if (port.exposedOnFrame) {
+            var localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_3__["FrameNodePort"].CreateFrameNodePortElement(port.connectionPoint, node, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++, this.id);
+            this._frameOutPorts.push(localPort);
+            port.delegatedPort = localPort;
+            this._controlledPorts.push(port);
+            return true;
+        }
+        return false;
     };
     GraphFrame.prototype._redrawFramePorts = function () {
         if (!this.isCollapsed) {
@@ -68052,12 +68115,15 @@ var GraphFrame = /** @class */ (function () {
         evt.stopPropagation();
     };
     GraphFrame.prototype.moveFramePortUp = function (nodePort) {
+        var _a, _b;
         var elementsArray;
         if (nodePort.isInput) {
             if (this._inputPortContainer.children.length < 2) {
                 return;
             }
             elementsArray = Array.from(this._inputPortContainer.childNodes);
+            var indexInContainer = this._frameInPorts.findIndex(function (framePort) { return framePort === nodePort; });
+            _a = [this._exposedInPorts[indexInContainer], this._exposedInPorts[indexInContainer - 1]], this._exposedInPorts[indexInContainer - 1] = _a[0], this._exposedInPorts[indexInContainer] = _a[1]; // swap idicies
             this._movePortUp(elementsArray, nodePort, this._frameInPorts);
         }
         else {
@@ -68065,6 +68131,8 @@ var GraphFrame = /** @class */ (function () {
                 return;
             }
             elementsArray = Array.from(this._outputPortContainer.childNodes);
+            var indexInContainer = this._frameOutPorts.findIndex(function (framePort) { return framePort === nodePort; });
+            _b = [this._exposedOutPorts[indexInContainer], this._exposedOutPorts[indexInContainer - 1]], this._exposedOutPorts[indexInContainer - 1] = _b[0], this._exposedOutPorts[indexInContainer] = _b[1]; // swap idicies
             this._movePortUp(elementsArray, nodePort, this._frameOutPorts);
         }
         this.ports.forEach(function (framePort) { return framePort.node._refreshLinks(); });
@@ -68104,12 +68172,15 @@ var GraphFrame = /** @class */ (function () {
         }
     };
     GraphFrame.prototype.moveFramePortDown = function (nodePort) {
+        var _a, _b;
         var elementsArray;
         if (nodePort.isInput) {
             if (this._inputPortContainer.children.length < 2) {
                 return;
             }
             elementsArray = Array.from(this._inputPortContainer.childNodes);
+            var indexInContainer = this._frameInPorts.findIndex(function (framePort) { return framePort === nodePort; });
+            _a = [this._exposedInPorts[indexInContainer + 1], this._exposedInPorts[indexInContainer]], this._exposedInPorts[indexInContainer] = _a[0], this._exposedInPorts[indexInContainer + 1] = _a[1]; // swap idicies
             this._movePortDown(elementsArray, nodePort, this._frameInPorts);
         }
         else {
@@ -68117,6 +68188,8 @@ var GraphFrame = /** @class */ (function () {
                 return;
             }
             elementsArray = Array.from(this._outputPortContainer.childNodes);
+            var indexInContainer = this._frameOutPorts.findIndex(function (framePort) { return framePort === nodePort; });
+            _b = [this._exposedOutPorts[indexInContainer + 1], this._exposedOutPorts[indexInContainer]], this._exposedOutPorts[indexInContainer] = _b[0], this._exposedOutPorts[indexInContainer + 1] = _b[1]; // swap idicies
             this._movePortDown(elementsArray, nodePort, this._frameOutPorts);
         }
         this.ports.forEach(function (framePort) { return framePort.node._refreshLinks(); });
@@ -68924,6 +68997,7 @@ var NodePort = /** @class */ (function () {
         var _this = this;
         this.connectionPoint = connectionPoint;
         this.node = node;
+        this.isExposed = false;
         this.delegatedPort = null;
         this._element = portContainer.ownerDocument.createElement("div");
         this._element.classList.add("port");

dist/preview release/nodeEditor/babylon.nodeEditor.module.d.ts

@@ -263,6 +263,8 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private _frameInPorts;
         private _frameOutPorts;
         private _controlledPorts;
+        private _exposedInPorts;
+        private _exposedOutPorts;
         private _id;
         private _comments;
         private _frameIsResizing;
@@ -279,6 +281,9 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private _createInputPort;
         private _markFramePortPositions;
         private _createFramePorts;
+        private removePortFromExposed;
+        private createInputPorts;
+        private createOutputPorts;
         private _redrawFramePorts;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
@@ -385,6 +390,7 @@ declare module "babylonjs-node-editor/diagram/nodePort" {
         protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
         protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         protected _exposedOnFrame: boolean;
+        isExposed: boolean;
         delegatedPort: Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
         get portName(): string;
@@ -2069,6 +2075,8 @@ declare module NODEEDITOR {
         private _frameInPorts;
         private _frameOutPorts;
         private _controlledPorts;
+        private _exposedInPorts;
+        private _exposedOutPorts;
         private _id;
         private _comments;
         private _frameIsResizing;
@@ -2085,6 +2093,9 @@ declare module NODEEDITOR {
         private _createInputPort;
         private _markFramePortPositions;
         private _createFramePorts;
+        private removePortFromExposed;
+        private createInputPorts;
+        private createOutputPorts;
         private _redrawFramePorts;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
@@ -2180,6 +2191,7 @@ declare module NODEEDITOR {
         protected _onCandidateLinkMovedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<BABYLON.Vector2>>>;
         protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         protected _exposedOnFrame: boolean;
+        isExposed: boolean;
         delegatedPort: BABYLON.Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
         get portName(): string;

dist/preview release/viewer/babylon.module.d.ts

@@ -53514,6 +53514,10 @@ declare module "babylonjs/Debug/skeletonViewer" {
          *
          * | Option          | Type    | Default | Description |
          * | --------------- | ------- | ------- | ----------- |
+         * | midStep         | float   | 0.235   | A percentage between a bone and its child that determines the widest part of a spur. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | midStepFactor   | float   | 0.15    | Mid step width expressed as a factor of the length. A value of 0.5 makes the spur width half of the spur length. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereBaseSize  | float   | 2       | Sphere base size. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereScaleUnit | float   | 0.865   | Sphere scale factor used to scale spheres in relation to the longest bone. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
          * | showLocalAxes   | boolean | false   | Displays local axes on all bones. |
          * | localAxesSize   | float   | 0.075   | Determines the length of each local axis. |
          *
@@ -131737,6 +131741,10 @@ declare module BABYLON.Debug {
          *
          * | Option          | Type    | Default | Description |
          * | --------------- | ------- | ------- | ----------- |
+         * | midStep         | float   | 0.235   | A percentage between a bone and its child that determines the widest part of a spur. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | midStepFactor   | float   | 0.15    | Mid step width expressed as a factor of the length. A value of 0.5 makes the spur width half of the spur length. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereBaseSize  | float   | 2       | Sphere base size. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
+         * | sphereScaleUnit | float   | 0.865   | Sphere scale factor used to scale spheres in relation to the longest bone. Only used when `displayMode` is set to `DISPLAY_SPHERE_AND_SPURS`. |
          * | showLocalAxes   | boolean | false   | Displays local axes on all bones. |
          * | localAxesSize   | float   | 0.075   | Determines the length of each local axis. |
          *