@babylonjs/shared-ui-components 6.17.1 → 6.19.0

package/nodeGraphSystem/common.modules.scss

@@ -7,6 +7,9 @@
     width: 20px;
     height: 20px;
     align-self: center;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
 
     .img {
         width: 100%;

package/nodeGraphSystem/nodePort.d.ts

@@ -12,6 +12,7 @@ export declare class NodePort {
     node: GraphNode;
     protected _element: HTMLDivElement;
     protected _img: HTMLImageElement;
+    protected _pip: HTMLDivElement;
     protected _stateManager: StateManager;
     protected _portLabelElement: Element;
     protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;

package/nodeGraphSystem/nodePort.js

@@ -68,7 +68,7 @@ export class NodePort {
         return false;
     }
     refresh() {
-        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
+        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img, this._pip);
     }
     constructor(portContainer, portData, node, stateManager) {
         this.portData = portData;
@@ -80,6 +80,10 @@ export class NodePort {
         this._stateManager = stateManager;
         this._img = portContainer.ownerDocument.createElement("img");
         this._element.appendChild(this._img);
+        this._pip = portContainer.ownerDocument.createElement("div");
+        this._pip.classList.add(localStyles["pip"]);
+        this._pip.style.display = "none";
+        this._element.appendChild(this._pip);
         // determine if node name is editable
         if (portContainer.children[0].className === commonStyles["port-label"]) {
             this._portLabelElement = portContainer.children[0];

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 _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);\r\n    }\r\n\r\n    public constructor(portContainer: HTMLElement, public portData: IPortData, public node: GraphNode, stateManager: StateManager) {\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        // 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 _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(portContainer: HTMLElement, public portData: IPortData, public node: GraphNode, stateManager: StateManager) {\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/nodePort.modules.scss

@@ -2,6 +2,27 @@
     filter: brightness(2);
 }
 
+.pip {
+    background: green;
+    width: 6px;
+    height: 6px;
+    grid-row: 1;
+    grid-column: 1;
+    align-self: center;
+    justify-self: center;
+    border-radius: 7px;
+    border: 2px solid black;
+
+    &.hidden {
+        display: none;
+    }
+}
+
+img {
+    grid-row: 1;
+    grid-column: 1;
+}
+
 img.selected {
     box-shadow: 0 0 0 2px;
     border-radius: 50%;

package/nodeGraphSystem/stateManager.d.ts

@@ -43,7 +43,7 @@ export declare class StateManager {
     }>;
     exportData: (data: any, frame?: Nullable<GraphFrame>) => string;
     isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
-    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => void;
+    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement, pip: HTMLDivElement) => void;
     storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;
     getEditorDataMap: () => {
         [key: number]: number;

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;AAWlD,MAAM,OAAO,YAAY;IAAzB;QAMI,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,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;IAWjF,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\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    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    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    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => 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;AAWlD,MAAM,OAAO,YAAY;IAAzB;QAMI,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,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;IAWjF,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\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    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    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    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"]}

package/package.json

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