@babylonjs/shared-ui-components 7.32.4 → 7.33.0

package/nodeGraphSystem/graphNode.modules.scss

@@ -14,6 +14,10 @@
     box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2);
 }
 
+.topMost {
+    z-index: 5000;
+}
+
 .highlighted {
     animation: glow 0.5s infinite alternate;
     @keyframes glow {
@@ -35,33 +39,51 @@
     transform: scaleX(1.01) translateY(-0.5px);
     transform-origin: center;
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: auto 1fr auto;
     grid-template-rows: 100%;
 }
 
-$iconSize: 20px;
-$iconMargin: 6px;
-
 .headerIcon {
     z-index: 10;
     align-self: center;
     user-select: none;
-    pointer-events: none;
-    width: $iconSize;
     display: grid;
-    margin-left: $iconMargin;
+    transform: translateY(1px);
+    grid-row: 1;
+    grid-column: 3;
+}
+
+.headerCollapse {
+    grid-row: 1;
+    grid-column: 1;
+    z-index: 10;
+    align-self: center;
+    user-select: none;
+    display: grid;
+    cursor: pointer;
+    color: white;
+    font-weight: bold;
+    font-size: 16px;
+    justify-content: center;
+    width: 20px;
+    transform: rotate(0deg);
+    transition: transform 0.2s;
+    transform-origin: center;
+}
+
+.collapsed {
+    transform: rotate(-90deg);
 }
 
 .header {
+    grid-row: 1;
+    grid-column: 2;
     font-size: 16px;
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-}
-
-.headerWithIcon {
-    margin-left: calc(#{$iconSize} + #{$iconMargin});
+    transform: translateY(-2px);
 }
 
 .connections {
@@ -70,6 +92,7 @@ $iconMargin: 6px;
 
     display: grid;
     grid-template-columns: 50% 50%;
+    grid-template-rows: auto auto auto;
     transform: scale(1);
 }
 
@@ -104,8 +127,278 @@ $iconMargin: 6px;
     align-items: flex-end;
     justify-content: end;
     pointer-events: none;
+    z-index: -1;
 }
 
 .selected {
     border-color: white !important;
 }
+
+.optionsContainer {
+    grid-row: 2;
+    grid-column: 1 / 3;
+}
+
+.booleanContainer {
+    height: 20px;
+    display: flex;
+    margin-left: 4px;
+    input[type="checkbox"] {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        width: 14px;
+        height: 14px;
+        border-radius: 2px;
+        border: transparent;
+        background-color: black;
+        opacity: 0.5;
+        position: relative;
+
+        &:checked {
+            background-color: rgb(51, 122, 183);
+            opacity: 1;
+        }
+
+        &:checked::after {
+            content: "✓";
+            color: white; /* Checkmark color */
+            font-weight: bold;
+            font-size: 12px;
+            position: relative;
+            left: 3px;
+            top: -1px;
+        }
+    }
+    label {
+        word-wrap: break-word;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        transform: translateY(-1px);
+    }
+}
+
+.floatContainer {
+    display: grid;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    height: 20px;
+
+    input[type="number"] {
+        grid-row: 1;
+        grid-column: 1;
+        -moz-appearance: textfield;
+        margin-left: 5px;
+        margin-right: 5px;
+        transform: translateY(2px);
+        border: 0px;
+        opacity: 0.9;
+        color: white;
+        border: 0px;
+        border-radius: 2px;
+        background-color: rgba(0, 0, 0, 0.5);
+        padding-left: 5px;
+        z-index: 1;
+        text-align: end;
+        padding-right: 5px;
+        cursor: col-resize;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        &:focus {
+            outline: 0px;
+            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+            background-color: rgba(0, 0, 0, 0.8);
+            opacity: 1;
+
+            + div {
+                display: none;
+            }
+        }
+    }
+
+    div {
+        grid-row: 1;
+        grid-column: 1;
+        z-index: 2;
+        align-self: center;
+        justify-self: left;
+        margin-left: 15px;
+        font-size: 12px;
+        font-weight: 100;
+    }
+}
+
+.listContainer {
+    margin-top: 3px;
+    height: 20px;
+    display: grid;
+    margin-bottom: 3px;
+}
+
+.select {
+    grid-row: 1;
+    grid-column: 1;
+    position: relative;
+    margin-left: 10px;
+    margin-right: 10px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0.9;
+    cursor: pointer;
+    text-align: center;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    &:focus {
+        outline: 0px;
+        opacity: 1;
+    }
+}
+
+.selectText {
+    color: white;
+    pointer-events: none;
+    background: transparent;
+    transform: translateY(-1px);
+}
+
+.active {
+    border-radius: 4px 4px 0 0;
+    border-color: transparent;
+    background-color: rgba(0, 0, 0, 0.2);
+    opacity: 1;
+}
+
+.selectList {
+    border-radius: 0 0 4px 4px;
+    overflow: auto;
+    padding: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    transform: translateX(-1px);
+    top: 20px;
+    width: 100%;
+    list-style: none;
+    margin: 0;
+    position: absolute;
+    border: 0;
+    z-index: 100000;
+    background-color: rgb(51, 51, 51);
+    border: 1px solid rgba(51, 51, 51);
+    max-height: 200px;
+
+    // Simple
+    &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+    }
+    &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: rgba(0, 0, 0, 0.1);
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: rgba(0, 0, 0, 0.2);
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: rgba(0, 0, 0, 0.4);
+    }
+    &::-webkit-scrollbar-thumb:active {
+        background: rgba(0, 0, 0, 0.9);
+    }
+}
+
+.option {
+    opacity: 0.8;
+    height: 22px;
+    font-size: 14px;
+    margin-left: 5px;
+    margin-right: 5px;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+}
+
+.sliderContainer {
+    display: grid;
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    input[type="range"] {
+        grid-row: 1;
+        grid-column: 1;
+        -webkit-appearance: none;
+        margin: 0;
+        margin-left: 5px;
+        margin-right: 5px;
+        transform: translateY(2px);
+        border-radius: 2px;
+        border: 0px;
+        opacity: 0.5;
+        overflow: hidden;
+        background-color: rgba(0, 0, 0, 1);
+
+        &:hover {
+            outline: 0px;
+            opacity: 0.8;
+        }
+
+        &::-webkit-slider-runnable-track {
+            height: 5px;
+            -webkit-appearance: none;
+            margin-top: -1px;
+            border: 0;
+        }
+
+        &::-webkit-slider-thumb {
+            width: 0.01px;
+            -webkit-appearance: none;
+            height: 0.01px;
+            cursor: ew-resize;
+            background: black;
+            border: 0;
+            box-shadow: -100px 0 0 100px rgb(51, 122, 183);
+            opacity: 0.8;
+            z-index: 1;
+        }
+    }
+
+    label {
+        grid-row: 1;
+        grid-column: 1;
+        margin-left: 10px;
+        word-wrap: break-word;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        z-index: 2;
+        pointer-events: none;
+        font-weight: 100;
+    }
+
+    div {
+        grid-row: 1;
+        grid-column: 1;
+        z-index: 2;
+        pointer-events: none;
+        font-size: 12px;
+        align-self: center;
+        justify-self: end;
+        margin-right: 10px;
+    }
+}

package/nodeGraphSystem/interfaces/nodeLocationInfo.d.ts

@@ -2,6 +2,7 @@ export interface INodeLocationInfo {
     blockId: number;
     x: number;
     y: number;
+    isCollapsed: boolean;
 }
 export interface IFrameData {
     x: number;

package/nodeGraphSystem/interfaces/nodeLocationInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodeLocationInfo.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeLocationInfo.ts"],"names":[],"mappings":"","sourcesContent":["export interface INodeLocationInfo {\r\n    blockId: number;\r\n    x: number;\r\n    y: number;\r\n}\r\n\r\nexport interface IFrameData {\r\n    x: number;\r\n    y: number;\r\n    width: number;\r\n    height: number;\r\n    color: number[];\r\n    name: string;\r\n    isCollapsed: boolean;\r\n    blocks: number[];\r\n    comments: string;\r\n}\r\n\r\nexport interface IEditorData {\r\n    locations: INodeLocationInfo[];\r\n    x: number;\r\n    y: number;\r\n    zoom: number;\r\n    frames?: IFrameData[];\r\n    map?: { [key: number]: number };\r\n}\r\n"]}
+{"version":3,"file":"nodeLocationInfo.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeLocationInfo.ts"],"names":[],"mappings":"","sourcesContent":["export interface INodeLocationInfo {\r\n    blockId: number;\r\n    x: number;\r\n    y: number;\r\n    isCollapsed: boolean;\r\n}\r\n\r\nexport interface IFrameData {\r\n    x: number;\r\n    y: number;\r\n    width: number;\r\n    height: number;\r\n    color: number[];\r\n    name: string;\r\n    isCollapsed: boolean;\r\n    blocks: number[];\r\n    comments: string;\r\n}\r\n\r\nexport interface IEditorData {\r\n    locations: INodeLocationInfo[];\r\n    x: number;\r\n    y: number;\r\n    zoom: number;\r\n    frames?: IFrameData[];\r\n    map?: { [key: number]: number };\r\n}\r\n"]}

package/nodeGraphSystem/nodePort.d.ts

@@ -11,6 +11,7 @@ export declare class NodePort {
     portData: IPortData;
     node: GraphNode;
     protected _element: HTMLDivElement;
+    protected _portContainer: HTMLElement;
     protected _img: HTMLImageElement;
     protected _pip: HTMLDivElement;
     protected _stateManager: StateManager;
@@ -20,6 +21,7 @@ export declare class NodePort {
     protected _exposedOnFrame: boolean;
     delegatedPort: Nullable<FrameNodePort>;
     get element(): HTMLDivElement;
+    get container(): HTMLElement;
     get portName(): string;
     set portName(newName: string);
     get disabled(): boolean;

package/nodeGraphSystem/nodePort.js

@@ -7,6 +7,12 @@ export class NodePort {
         }
         return this._element;
     }
+    get container() {
+        if (this.delegatedPort) {
+            return this.delegatedPort.container;
+        }
+        return this._portContainer;
+    }
     get portName() {
         return this.portData.name;
     }
@@ -74,6 +80,7 @@ export class NodePort {
         this.portData = portData;
         this.node = node;
         this.delegatedPort = null;
+        this._portContainer = portContainer;
         this._element = portContainer.ownerDocument.createElement("div");
         this._element.classList.add(commonStyles.port);
         portContainer.appendChild(this._element);

package/nodeGraphSystem/nodePort.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodePort.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { StateManager } from \"./stateManager\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { IDisplayManager } from \"./interfaces/displayManager\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport commonStyles from \"./common.modules.scss\";\r\nimport localStyles from \"./nodePort.modules.scss\";\r\n\r\nexport class NodePort {\r\n    protected _element: HTMLDivElement;\r\n    protected _img: HTMLImageElement;\r\n    protected _pip: HTMLDivElement;\r\n    protected _stateManager: StateManager;\r\n    protected _portLabelElement: Element;\r\n    protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;\r\n    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;\r\n    protected _exposedOnFrame: boolean;\r\n    public delegatedPort: Nullable<FrameNodePort> = null;\r\n\r\n    public get element(): HTMLDivElement {\r\n        if (this.delegatedPort) {\r\n            return this.delegatedPort.element;\r\n        }\r\n\r\n        return this._element;\r\n    }\r\n\r\n    public get portName() {\r\n        return this.portData.name;\r\n    }\r\n\r\n    public set portName(newName: string) {\r\n        if (this._portLabelElement) {\r\n            this.portData.updateDisplayName(newName);\r\n            this._portLabelElement.innerHTML = newName;\r\n        }\r\n    }\r\n\r\n    public get disabled() {\r\n        if (!this.portData.isConnected) {\r\n            return false;\r\n        } else if (this._isConnectedToNodeOutsideOfFrame()) {\r\n            //connected to outside node\r\n            return true;\r\n        } else {\r\n            const link = this.node.getLinksForPortData(this.portData);\r\n            if (link.length) {\r\n                if (link[0].nodeB === this.node) {\r\n                    // check if this node is the receiving\r\n                    return true;\r\n                }\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public hasLabel() {\r\n        return !!this._portLabelElement;\r\n    }\r\n\r\n    public get exposedOnFrame() {\r\n        if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public set exposedOnFrame(value: boolean) {\r\n        if (this.disabled) {\r\n            return;\r\n        }\r\n        this.portData.isExposedOnFrame = value;\r\n    }\r\n\r\n    public get exposedPortPosition() {\r\n        return this.portData.exposedPortPosition;\r\n    }\r\n\r\n    public set exposedPortPosition(value: number) {\r\n        this.portData.exposedPortPosition = value;\r\n    }\r\n\r\n    private _isConnectedToNodeOutsideOfFrame() {\r\n        const link = this.node.getLinksForPortData(this.portData);\r\n        if (link.length) {\r\n            for (let i = 0; i < link.length; i++) {\r\n                if (link[i].nodeA.enclosingFrameId !== link[i].nodeB!.enclosingFrameId) {\r\n                    return true;\r\n                }\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public refresh() {\r\n        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img, this._pip);\r\n    }\r\n\r\n    public constructor(\r\n        portContainer: HTMLElement,\r\n        public portData: IPortData,\r\n        public node: GraphNode,\r\n        stateManager: StateManager\r\n    ) {\r\n        this._element = portContainer.ownerDocument!.createElement(\"div\");\r\n        this._element.classList.add(commonStyles.port);\r\n        portContainer.appendChild(this._element);\r\n        this._stateManager = stateManager;\r\n\r\n        this._img = portContainer.ownerDocument!.createElement(\"img\");\r\n        this._element.appendChild(this._img);\r\n\r\n        this._pip = portContainer.ownerDocument!.createElement(\"div\");\r\n        this._pip.classList.add(localStyles[\"pip\"]);\r\n        this._pip.style.display = \"none\";\r\n        this._element.appendChild(this._pip);\r\n\r\n        // determine if node name is editable\r\n        if (portContainer.children[0].className === commonStyles[\"port-label\"]) {\r\n            this._portLabelElement = portContainer.children[0];\r\n        }\r\n\r\n        (this._element as any).port = this;\r\n\r\n        // Drag support\r\n        this._element.ondragstart = () => false;\r\n\r\n        this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {\r\n            const rect = this._element.getBoundingClientRect();\r\n\r\n            if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {\r\n                this._element.classList.remove(localStyles[\"selected\"]);\r\n                return;\r\n            }\r\n\r\n            this._element.classList.add(localStyles[\"selected\"]);\r\n            this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);\r\n        });\r\n\r\n        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {\r\n            const { selection } = options || {};\r\n            if (selection === this) {\r\n                this._img.classList.add(localStyles[\"selected\"]);\r\n            } else {\r\n                this._img.classList.remove(localStyles[\"selected\"]);\r\n            }\r\n        });\r\n\r\n        this.refresh();\r\n    }\r\n\r\n    public dispose() {\r\n        this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);\r\n\r\n        if (this._onSelectionChangedObserver) {\r\n            this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n        }\r\n    }\r\n\r\n    public static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager) {\r\n        const portContainer = root.ownerDocument!.createElement(\"div\");\r\n\r\n        portContainer.classList.add(commonStyles.portLine);\r\n\r\n        root.appendChild(portContainer);\r\n\r\n        if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {\r\n            const portLabel = root.ownerDocument!.createElement(\"div\");\r\n            portLabel.classList.add(commonStyles[\"port-label\"]);\r\n            portLabel.innerHTML = portData.name;\r\n            portContainer.appendChild(portLabel);\r\n        }\r\n\r\n        return new NodePort(portContainer, portData, node, stateManager);\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"nodePort.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { StateManager } from \"./stateManager\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { IDisplayManager } from \"./interfaces/displayManager\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport commonStyles from \"./common.modules.scss\";\r\nimport localStyles from \"./nodePort.modules.scss\";\r\n\r\nexport class NodePort {\r\n    protected _element: HTMLDivElement;\r\n    protected _portContainer: HTMLElement;\r\n    protected _img: HTMLImageElement;\r\n    protected _pip: HTMLDivElement;\r\n    protected _stateManager: StateManager;\r\n    protected _portLabelElement: Element;\r\n    protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;\r\n    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;\r\n    protected _exposedOnFrame: boolean;\r\n    public delegatedPort: Nullable<FrameNodePort> = null;\r\n\r\n    public get element(): HTMLDivElement {\r\n        if (this.delegatedPort) {\r\n            return this.delegatedPort.element;\r\n        }\r\n\r\n        return this._element;\r\n    }\r\n\r\n    public get container(): HTMLElement {\r\n        if (this.delegatedPort) {\r\n            return this.delegatedPort.container;\r\n        }\r\n\r\n        return this._portContainer;\r\n    }\r\n\r\n    public get portName() {\r\n        return this.portData.name;\r\n    }\r\n\r\n    public set portName(newName: string) {\r\n        if (this._portLabelElement) {\r\n            this.portData.updateDisplayName(newName);\r\n            this._portLabelElement.innerHTML = newName;\r\n        }\r\n    }\r\n\r\n    public get disabled() {\r\n        if (!this.portData.isConnected) {\r\n            return false;\r\n        } else if (this._isConnectedToNodeOutsideOfFrame()) {\r\n            //connected to outside node\r\n            return true;\r\n        } else {\r\n            const link = this.node.getLinksForPortData(this.portData);\r\n            if (link.length) {\r\n                if (link[0].nodeB === this.node) {\r\n                    // check if this node is the receiving\r\n                    return true;\r\n                }\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public hasLabel() {\r\n        return !!this._portLabelElement;\r\n    }\r\n\r\n    public get exposedOnFrame() {\r\n        if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public set exposedOnFrame(value: boolean) {\r\n        if (this.disabled) {\r\n            return;\r\n        }\r\n        this.portData.isExposedOnFrame = value;\r\n    }\r\n\r\n    public get exposedPortPosition() {\r\n        return this.portData.exposedPortPosition;\r\n    }\r\n\r\n    public set exposedPortPosition(value: number) {\r\n        this.portData.exposedPortPosition = value;\r\n    }\r\n\r\n    private _isConnectedToNodeOutsideOfFrame() {\r\n        const link = this.node.getLinksForPortData(this.portData);\r\n        if (link.length) {\r\n            for (let i = 0; i < link.length; i++) {\r\n                if (link[i].nodeA.enclosingFrameId !== link[i].nodeB!.enclosingFrameId) {\r\n                    return true;\r\n                }\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n\r\n    public refresh() {\r\n        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img, this._pip);\r\n    }\r\n\r\n    public constructor(\r\n        portContainer: HTMLElement,\r\n        public portData: IPortData,\r\n        public node: GraphNode,\r\n        stateManager: StateManager\r\n    ) {\r\n        this._portContainer = portContainer;\r\n        this._element = portContainer.ownerDocument!.createElement(\"div\");\r\n        this._element.classList.add(commonStyles.port);\r\n        portContainer.appendChild(this._element);\r\n        this._stateManager = stateManager;\r\n\r\n        this._img = portContainer.ownerDocument!.createElement(\"img\");\r\n        this._element.appendChild(this._img);\r\n\r\n        this._pip = portContainer.ownerDocument!.createElement(\"div\");\r\n        this._pip.classList.add(localStyles[\"pip\"]);\r\n        this._pip.style.display = \"none\";\r\n        this._element.appendChild(this._pip);\r\n\r\n        // determine if node name is editable\r\n        if (portContainer.children[0].className === commonStyles[\"port-label\"]) {\r\n            this._portLabelElement = portContainer.children[0];\r\n        }\r\n\r\n        (this._element as any).port = this;\r\n\r\n        // Drag support\r\n        this._element.ondragstart = () => false;\r\n\r\n        this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {\r\n            const rect = this._element.getBoundingClientRect();\r\n\r\n            if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {\r\n                this._element.classList.remove(localStyles[\"selected\"]);\r\n                return;\r\n            }\r\n\r\n            this._element.classList.add(localStyles[\"selected\"]);\r\n            this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);\r\n        });\r\n\r\n        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {\r\n            const { selection } = options || {};\r\n            if (selection === this) {\r\n                this._img.classList.add(localStyles[\"selected\"]);\r\n            } else {\r\n                this._img.classList.remove(localStyles[\"selected\"]);\r\n            }\r\n        });\r\n\r\n        this.refresh();\r\n    }\r\n\r\n    public dispose() {\r\n        this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);\r\n\r\n        if (this._onSelectionChangedObserver) {\r\n            this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n        }\r\n    }\r\n\r\n    public static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager) {\r\n        const portContainer = root.ownerDocument!.createElement(\"div\");\r\n\r\n        portContainer.classList.add(commonStyles.portLine);\r\n\r\n        root.appendChild(portContainer);\r\n\r\n        if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {\r\n            const portLabel = root.ownerDocument!.createElement(\"div\");\r\n            portLabel.classList.add(commonStyles[\"port-label\"]);\r\n            portLabel.innerHTML = portData.name;\r\n            portContainer.appendChild(portLabel);\r\n        }\r\n\r\n        return new NodePort(portContainer, portData, node, stateManager);\r\n    }\r\n}\r\n"]}

package/nodeGraphSystem/stateManager.d.ts

@@ -10,6 +10,7 @@ import type { IPortData } from "./interfaces/portData";
 import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
 import type { NodePort } from "./nodePort";
 import type { HistoryStack } from "../historyStack";
+import type { Scene } from "@babylonjs/core/scene.js";
 export declare class StateManager {
     data: any;
     hostDocument: Document;
@@ -44,6 +45,7 @@ export declare class StateManager {
         data: any;
         active: boolean;
     }>;
+    onPreviewCommandActivated: Observable<boolean>;
     exportData: (data: any, frame?: Nullable<GraphFrame>) => string;
     isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
     isDebugConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
@@ -52,6 +54,7 @@ export declare class StateManager {
     getEditorDataMap: () => {
         [key: number]: number;
     };
+    getScene?: () => Scene;
     createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{
         data: INodeData;
         name: string;

package/nodeGraphSystem/stateManager.js

@@ -17,6 +17,7 @@ export class StateManager {
         this.onGridSizeChanged = new Observable();
         this.onNewBlockRequiredObservable = new Observable();
         this.onHighlightNodeObservable = new Observable();
+        this.onPreviewCommandActivated = new Observable();
     }
 }
 //# sourceMappingURL=stateManager.js.map

package/nodeGraphSystem/stateManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"stateManager.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/stateManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAYlD,MAAM,OAAO,YAAY;IAAzB;QAQI,kCAA6B,GAAG,IAAI,UAAU,EAA4B,CAAC;QAC3E,iCAA4B,GAAG,IAAI,UAAU,EAAsC,CAAC;QACpF,6BAAwB,GAAG,IAAI,UAAU,EAAc,CAAC;QACxD,+BAA0B,GAAG,IAAI,UAAU,EAAiB,CAAC;QAC7D,iCAA4B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC3D,wBAAmB,GAAG,IAAI,UAAU,EAAwB,CAAC;QAC7D,yBAAoB,GAAG,IAAI,UAAU,EAAqB,CAAC;QAC3D,sCAAiC,GAAG,IAAI,UAAU,EAAsC,CAAC;QACzF,+BAA0B,GAAG,IAAI,UAAU,EAAa,CAAC;QACzD,gCAA2B,GAAG,IAAI,UAAU,EAAQ,CAAC;QACrD,0BAAqB,GAAG,IAAI,UAAU,EAAa,CAAC;QACpD,2CAAsC,GAAG,IAAI,UAAU,EAAU,CAAC;QAClE,kCAA6B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC5D,sBAAiB,GAAG,IAAI,UAAU,EAAQ,CAAC;QAC3C,iCAA4B,GAAG,IAAI,UAAU,EAAuG,CAAC;QACrJ,8BAAyB,GAAG,IAAI,UAAU,EAAkC,CAAC;IAYjF,CAAC;CAAA","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { GraphFrame } from \"./graphFrame\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { INodeContainer } from \"./interfaces/nodeContainer\";\r\nimport type { INodeData } from \"./interfaces/nodeData\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { NodePort } from \"./nodePort\";\r\nimport type { HistoryStack } from \"../historyStack\";\r\n\r\nexport class StateManager {\r\n    data: any;\r\n    hostDocument: Document;\r\n    lockObject: any;\r\n    modalIsDisplayed: boolean;\r\n\r\n    historyStack: HistoryStack;\r\n\r\n    onSearchBoxRequiredObservable = new Observable<{ x: number; y: number }>();\r\n    onSelectionChangedObservable = new Observable<Nullable<ISelectionChangedOptions>>();\r\n    onFrameCreatedObservable = new Observable<GraphFrame>();\r\n    onUpdateRequiredObservable = new Observable<Nullable<any>>();\r\n    onGraphNodeRemovalObservable = new Observable<GraphNode>();\r\n    onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();\r\n    onCandidateLinkMoved = new Observable<Nullable<Vector2>>();\r\n    onCandidatePortSelectedObservable = new Observable<Nullable<NodePort | FrameNodePort>>();\r\n    onNewNodeCreatedObservable = new Observable<GraphNode>();\r\n    onRebuildRequiredObservable = new Observable<void>();\r\n    onNodeMovedObservable = new Observable<GraphNode>();\r\n    onErrorMessageDialogRequiredObservable = new Observable<string>();\r\n    onExposePortOnFrameObservable = new Observable<GraphNode>();\r\n    onGridSizeChanged = new Observable<void>();\r\n    onNewBlockRequiredObservable = new Observable<{ type: string; targetX: number; targetY: number; needRepositioning?: boolean; smartAdd?: boolean }>();\r\n    onHighlightNodeObservable = new Observable<{ data: any; active: boolean }>();\r\n\r\n    exportData: (data: any, frame?: Nullable<GraphFrame>) => string;\r\n    isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n    isDebugConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement, pip: HTMLDivElement) => void;\r\n\r\n    storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;\r\n\r\n    getEditorDataMap: () => { [key: number]: number };\r\n\r\n    createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{ data: INodeData; name: string }>;\r\n}\r\n"]}
+{"version":3,"file":"stateManager.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/stateManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAalD,MAAM,OAAO,YAAY;IAAzB;QAQI,kCAA6B,GAAG,IAAI,UAAU,EAA4B,CAAC;QAC3E,iCAA4B,GAAG,IAAI,UAAU,EAAsC,CAAC;QACpF,6BAAwB,GAAG,IAAI,UAAU,EAAc,CAAC;QACxD,+BAA0B,GAAG,IAAI,UAAU,EAAiB,CAAC;QAC7D,iCAA4B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC3D,wBAAmB,GAAG,IAAI,UAAU,EAAwB,CAAC;QAC7D,yBAAoB,GAAG,IAAI,UAAU,EAAqB,CAAC;QAC3D,sCAAiC,GAAG,IAAI,UAAU,EAAsC,CAAC;QACzF,+BAA0B,GAAG,IAAI,UAAU,EAAa,CAAC;QACzD,gCAA2B,GAAG,IAAI,UAAU,EAAQ,CAAC;QACrD,0BAAqB,GAAG,IAAI,UAAU,EAAa,CAAC;QACpD,2CAAsC,GAAG,IAAI,UAAU,EAAU,CAAC;QAClE,kCAA6B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC5D,sBAAiB,GAAG,IAAI,UAAU,EAAQ,CAAC;QAC3C,iCAA4B,GAAG,IAAI,UAAU,EAAuG,CAAC;QACrJ,8BAAyB,GAAG,IAAI,UAAU,EAAkC,CAAC;QAC7E,8BAAyB,GAAG,IAAI,UAAU,EAAW,CAAC;IAc1D,CAAC;CAAA","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { GraphFrame } from \"./graphFrame\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { INodeContainer } from \"./interfaces/nodeContainer\";\r\nimport type { INodeData } from \"./interfaces/nodeData\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { NodePort } from \"./nodePort\";\r\nimport type { HistoryStack } from \"../historyStack\";\r\nimport type { Scene } from \"core/scene\";\r\n\r\nexport class StateManager {\r\n    data: any;\r\n    hostDocument: Document;\r\n    lockObject: any;\r\n    modalIsDisplayed: boolean;\r\n\r\n    historyStack: HistoryStack;\r\n\r\n    onSearchBoxRequiredObservable = new Observable<{ x: number; y: number }>();\r\n    onSelectionChangedObservable = new Observable<Nullable<ISelectionChangedOptions>>();\r\n    onFrameCreatedObservable = new Observable<GraphFrame>();\r\n    onUpdateRequiredObservable = new Observable<Nullable<any>>();\r\n    onGraphNodeRemovalObservable = new Observable<GraphNode>();\r\n    onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();\r\n    onCandidateLinkMoved = new Observable<Nullable<Vector2>>();\r\n    onCandidatePortSelectedObservable = new Observable<Nullable<NodePort | FrameNodePort>>();\r\n    onNewNodeCreatedObservable = new Observable<GraphNode>();\r\n    onRebuildRequiredObservable = new Observable<void>();\r\n    onNodeMovedObservable = new Observable<GraphNode>();\r\n    onErrorMessageDialogRequiredObservable = new Observable<string>();\r\n    onExposePortOnFrameObservable = new Observable<GraphNode>();\r\n    onGridSizeChanged = new Observable<void>();\r\n    onNewBlockRequiredObservable = new Observable<{ type: string; targetX: number; targetY: number; needRepositioning?: boolean; smartAdd?: boolean }>();\r\n    onHighlightNodeObservable = new Observable<{ data: any; active: boolean }>();\r\n    onPreviewCommandActivated = new Observable<boolean>();\r\n\r\n    exportData: (data: any, frame?: Nullable<GraphFrame>) => string;\r\n    isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n    isDebugConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement, pip: HTMLDivElement) => void;\r\n\r\n    storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;\r\n\r\n    getEditorDataMap: () => { [key: number]: number };\r\n\r\n    getScene?: () => Scene;\r\n\r\n    createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{ data: INodeData; name: string }>;\r\n}\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/shared-ui-components",
-    "version": "7.32.4",
+    "version": "7.33.0",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",