@babylonjs/shared-ui-components 5.28.0 → 5.30.0

package/nodeGraphSystem/nodePort.js

@@ -1,129 +1,129 @@
-import commonStyles from "./common.modules.scss";
-import localStyles from "./nodePort.modules.scss";
-export 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(commonStyles.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 === commonStyles["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(localStyles["selected"]);
-                return;
-            }
-            this._element.classList.add(localStyles["selected"]);
-            this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);
-        });
-        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
-            const { selection } = options || {};
-            if (selection === this) {
-                this._img.classList.add(localStyles["selected"]);
-            }
-            else {
-                this._img.classList.remove(localStyles["selected"]);
-            }
-        });
-        this.refresh();
-    }
-    get element() {
-        if (this.delegatedPort) {
-            return this.delegatedPort.element;
-        }
-        return this._element;
-    }
-    get portName() {
-        return this.portData.name;
-    }
-    set portName(newName) {
-        if (this._portLabelElement) {
-            this.portData.updateDisplayName(newName);
-            this._portLabelElement.innerHTML = newName;
-        }
-    }
-    get disabled() {
-        if (!this.portData.isConnected) {
-            return false;
-        }
-        else if (this._isConnectedToNodeOutsideOfFrame()) {
-            //connected to outside node
-            return true;
-        }
-        else {
-            const link = this.node.getLinksForPortData(this.portData);
-            if (link.length) {
-                if (link[0].nodeB === this.node) {
-                    // check if this node is the receiving
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    hasLabel() {
-        return !!this._portLabelElement;
-    }
-    get exposedOnFrame() {
-        if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
-            return true;
-        }
-        return false;
-    }
-    set exposedOnFrame(value) {
-        if (this.disabled) {
-            return;
-        }
-        this.portData.isExposedOnFrame = value;
-    }
-    get exposedPortPosition() {
-        return this.portData.exposedPortPosition;
-    }
-    set exposedPortPosition(value) {
-        this.portData.exposedPortPosition = value;
-    }
-    _isConnectedToNodeOutsideOfFrame() {
-        const link = this.node.getLinksForPortData(this.portData);
-        if (link.length) {
-            for (let i = 0; i < link.length; i++) {
-                if (link[i].nodeA.enclosingFrameId !== link[i].nodeB.enclosingFrameId) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    refresh() {
-        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
-    }
-    dispose() {
-        this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);
-        if (this._onSelectionChangedObserver) {
-            this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
-        }
-    }
-    static CreatePortElement(portData, node, root, displayManager, stateManager) {
-        const portContainer = root.ownerDocument.createElement("div");
-        portContainer.classList.add(commonStyles.portLine);
-        root.appendChild(portContainer);
-        if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {
-            const portLabel = root.ownerDocument.createElement("div");
-            portLabel.classList.add(commonStyles["port-label"]);
-            portLabel.innerHTML = portData.name;
-            portContainer.appendChild(portLabel);
-        }
-        return new NodePort(portContainer, portData, node, stateManager);
-    }
-}
+import commonStyles from "./common.modules.scss";
+import localStyles from "./nodePort.modules.scss";
+export 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(commonStyles.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 === commonStyles["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(localStyles["selected"]);
+                return;
+            }
+            this._element.classList.add(localStyles["selected"]);
+            this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);
+        });
+        this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection } = options || {};
+            if (selection === this) {
+                this._img.classList.add(localStyles["selected"]);
+            }
+            else {
+                this._img.classList.remove(localStyles["selected"]);
+            }
+        });
+        this.refresh();
+    }
+    get element() {
+        if (this.delegatedPort) {
+            return this.delegatedPort.element;
+        }
+        return this._element;
+    }
+    get portName() {
+        return this.portData.name;
+    }
+    set portName(newName) {
+        if (this._portLabelElement) {
+            this.portData.updateDisplayName(newName);
+            this._portLabelElement.innerHTML = newName;
+        }
+    }
+    get disabled() {
+        if (!this.portData.isConnected) {
+            return false;
+        }
+        else if (this._isConnectedToNodeOutsideOfFrame()) {
+            //connected to outside node
+            return true;
+        }
+        else {
+            const link = this.node.getLinksForPortData(this.portData);
+            if (link.length) {
+                if (link[0].nodeB === this.node) {
+                    // check if this node is the receiving
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    hasLabel() {
+        return !!this._portLabelElement;
+    }
+    get exposedOnFrame() {
+        if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
+            return true;
+        }
+        return false;
+    }
+    set exposedOnFrame(value) {
+        if (this.disabled) {
+            return;
+        }
+        this.portData.isExposedOnFrame = value;
+    }
+    get exposedPortPosition() {
+        return this.portData.exposedPortPosition;
+    }
+    set exposedPortPosition(value) {
+        this.portData.exposedPortPosition = value;
+    }
+    _isConnectedToNodeOutsideOfFrame() {
+        const link = this.node.getLinksForPortData(this.portData);
+        if (link.length) {
+            for (let i = 0; i < link.length; i++) {
+                if (link[i].nodeA.enclosingFrameId !== link[i].nodeB.enclosingFrameId) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    refresh() {
+        this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
+    }
+    dispose() {
+        this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);
+        if (this._onSelectionChangedObserver) {
+            this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+        }
+    }
+    static CreatePortElement(portData, node, root, displayManager, stateManager) {
+        const portContainer = root.ownerDocument.createElement("div");
+        portContainer.classList.add(commonStyles.portLine);
+        root.appendChild(portContainer);
+        if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {
+            const portLabel = root.ownerDocument.createElement("div");
+            portLabel.classList.add(commonStyles["port-label"]);
+            portLabel.innerHTML = portData.name;
+            portContainer.appendChild(portLabel);
+        }
+        return new NodePort(portContainer, portData, node, stateManager);
+    }
+}
 //# sourceMappingURL=nodePort.js.map

package/nodeGraphSystem/propertyLedger.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentClass } from "react";
-import type { IPropertyComponentProps } from "./interfaces/propertyComponentProps";
-export declare class PropertyLedger {
-    static DefaultControl: ComponentClass<IPropertyComponentProps>;
-    static RegisteredControls: {
-        [key: string]: ComponentClass<IPropertyComponentProps>;
-    };
-}
+import type { ComponentClass } from "react";
+import type { IPropertyComponentProps } from "./interfaces/propertyComponentProps";
+export declare class PropertyLedger {
+    static DefaultControl: ComponentClass<IPropertyComponentProps>;
+    static RegisteredControls: {
+        [key: string]: ComponentClass<IPropertyComponentProps>;
+    };
+}

package/nodeGraphSystem/propertyLedger.js

@@ -1,4 +1,4 @@
-export class PropertyLedger {
-}
-PropertyLedger.RegisteredControls = {};
+export class PropertyLedger {
+}
+PropertyLedger.RegisteredControls = {};
 //# sourceMappingURL=propertyLedger.js.map

package/nodeGraphSystem/stateManager.d.ts

@@ -1,45 +1,45 @@
-import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { FrameNodePort } from "./frameNodePort";
-import type { GraphFrame } from "./graphFrame";
-import type { GraphNode } from "./graphNode";
-import type { INodeContainer } from "./interfaces/nodeContainer";
-import type { INodeData } from "./interfaces/nodeData";
-import type { IPortData } from "./interfaces/portData";
-import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
-import type { NodePort } from "./nodePort";
-export declare class StateManager {
-    data: any;
-    hostDocument: Document;
-    lockObject: any;
-    onSelectionChangedObservable: Observable<Nullable<ISelectionChangedOptions>>;
-    onFrameCreatedObservable: Observable<GraphFrame>;
-    onUpdateRequiredObservable: Observable<any>;
-    onGraphNodeRemovalObservable: Observable<GraphNode>;
-    onSelectionBoxMoved: Observable<DOMRect | ClientRect>;
-    onCandidateLinkMoved: Observable<Nullable<Vector2>>;
-    onCandidatePortSelectedObservable: Observable<Nullable<FrameNodePort | NodePort>>;
-    onNewNodeCreatedObservable: Observable<GraphNode>;
-    onRebuildRequiredObservable: Observable<boolean>;
-    onErrorMessageDialogRequiredObservable: Observable<string>;
-    onExposePortOnFrameObservable: Observable<GraphNode>;
-    onGridSizeChanged: Observable<void>;
-    onNewBlockRequiredObservable: Observable<{
-        type: string;
-        targetX: number;
-        targetY: number;
-        needRepositioning?: boolean | undefined;
-    }>;
-    exportData: (data: any, frame?: Nullable<GraphFrame>) => string;
-    isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
-    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => void;
-    storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;
-    getEditorDataMap: () => {
-        [key: number]: number;
-    };
-    createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{
-        data: INodeData;
-        name: string;
-    }>;
-}
+import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { FrameNodePort } from "./frameNodePort";
+import type { GraphFrame } from "./graphFrame";
+import type { GraphNode } from "./graphNode";
+import type { INodeContainer } from "./interfaces/nodeContainer";
+import type { INodeData } from "./interfaces/nodeData";
+import type { IPortData } from "./interfaces/portData";
+import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
+import type { NodePort } from "./nodePort";
+export declare class StateManager {
+    data: any;
+    hostDocument: Document;
+    lockObject: any;
+    onSelectionChangedObservable: Observable<Nullable<ISelectionChangedOptions>>;
+    onFrameCreatedObservable: Observable<GraphFrame>;
+    onUpdateRequiredObservable: Observable<any>;
+    onGraphNodeRemovalObservable: Observable<GraphNode>;
+    onSelectionBoxMoved: Observable<DOMRect | ClientRect>;
+    onCandidateLinkMoved: Observable<Nullable<Vector2>>;
+    onCandidatePortSelectedObservable: Observable<Nullable<FrameNodePort | NodePort>>;
+    onNewNodeCreatedObservable: Observable<GraphNode>;
+    onRebuildRequiredObservable: Observable<boolean>;
+    onErrorMessageDialogRequiredObservable: Observable<string>;
+    onExposePortOnFrameObservable: Observable<GraphNode>;
+    onGridSizeChanged: Observable<void>;
+    onNewBlockRequiredObservable: Observable<{
+        type: string;
+        targetX: number;
+        targetY: number;
+        needRepositioning?: boolean | undefined;
+    }>;
+    exportData: (data: any, frame?: Nullable<GraphFrame>) => string;
+    isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
+    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => void;
+    storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;
+    getEditorDataMap: () => {
+        [key: number]: number;
+    };
+    createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{
+        data: INodeData;
+        name: string;
+    }>;
+}

package/nodeGraphSystem/stateManager.js

@@ -1,19 +1,19 @@
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-export class StateManager {
-    constructor() {
-        this.onSelectionChangedObservable = new Observable();
-        this.onFrameCreatedObservable = new Observable();
-        this.onUpdateRequiredObservable = new Observable();
-        this.onGraphNodeRemovalObservable = new Observable();
-        this.onSelectionBoxMoved = new Observable();
-        this.onCandidateLinkMoved = new Observable();
-        this.onCandidatePortSelectedObservable = new Observable();
-        this.onNewNodeCreatedObservable = new Observable();
-        this.onRebuildRequiredObservable = new Observable();
-        this.onErrorMessageDialogRequiredObservable = new Observable();
-        this.onExposePortOnFrameObservable = new Observable();
-        this.onGridSizeChanged = new Observable();
-        this.onNewBlockRequiredObservable = new Observable();
-    }
-}
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+export class StateManager {
+    constructor() {
+        this.onSelectionChangedObservable = new Observable();
+        this.onFrameCreatedObservable = new Observable();
+        this.onUpdateRequiredObservable = new Observable();
+        this.onGraphNodeRemovalObservable = new Observable();
+        this.onSelectionBoxMoved = new Observable();
+        this.onCandidateLinkMoved = new Observable();
+        this.onCandidatePortSelectedObservable = new Observable();
+        this.onNewNodeCreatedObservable = new Observable();
+        this.onRebuildRequiredObservable = new Observable();
+        this.onErrorMessageDialogRequiredObservable = new Observable();
+        this.onExposePortOnFrameObservable = new Observable();
+        this.onGridSizeChanged = new Observable();
+        this.onNewBlockRequiredObservable = new Observable();
+    }
+}
 //# sourceMappingURL=stateManager.js.map

package/nodeGraphSystem/tools.d.ts

@@ -1,5 +1,5 @@
-import type { GraphNode } from "./graphNode";
-import type { NodeLink } from "./nodeLink";
-import type { FramePortData } from "./types/framePortData";
-export declare const IsFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
-export declare const RefreshNode: (node: GraphNode, visitedNodes?: Set<GraphNode> | undefined, visitedLinks?: Set<NodeLink> | undefined) => void;
+import type { GraphNode } from "./graphNode";
+import type { NodeLink } from "./nodeLink";
+import type { FramePortData } from "./types/framePortData";
+export declare const IsFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
+export declare const RefreshNode: (node: GraphNode, visitedNodes?: Set<GraphNode> | undefined, visitedLinks?: Set<NodeLink> | undefined) => void;

package/nodeGraphSystem/tools.js

@@ -1,37 +1,37 @@
-export const IsFramePortData = (variableToCheck) => {
-    if (variableToCheck) {
-        return variableToCheck.port !== undefined;
-    }
-    else {
-        return false;
-    }
-};
-export const RefreshNode = (node, visitedNodes, visitedLinks) => {
-    node.refresh();
-    const links = node.links;
-    if (visitedNodes) {
-        // refresh first the nodes so that the right types are assigned to the auto-detect ports
-        links.forEach((link) => {
-            const nodeA = link.nodeA, nodeB = link.nodeB;
-            if (!visitedNodes.has(nodeA)) {
-                visitedNodes.add(nodeA);
-                RefreshNode(nodeA, visitedNodes, visitedLinks);
-            }
-            if (nodeB && !visitedNodes.has(nodeB)) {
-                visitedNodes.add(nodeB);
-                RefreshNode(nodeB, visitedNodes, visitedLinks);
-            }
-        });
-    }
-    if (!visitedLinks) {
-        return;
-    }
-    // then refresh the links to display the right color between ports
-    links.forEach((link) => {
-        if (!visitedLinks.has(link)) {
-            visitedLinks.add(link);
-            link.update();
-        }
-    });
-};
+export const IsFramePortData = (variableToCheck) => {
+    if (variableToCheck) {
+        return variableToCheck.port !== undefined;
+    }
+    else {
+        return false;
+    }
+};
+export const RefreshNode = (node, visitedNodes, visitedLinks) => {
+    node.refresh();
+    const links = node.links;
+    if (visitedNodes) {
+        // refresh first the nodes so that the right types are assigned to the auto-detect ports
+        links.forEach((link) => {
+            const nodeA = link.nodeA, nodeB = link.nodeB;
+            if (!visitedNodes.has(nodeA)) {
+                visitedNodes.add(nodeA);
+                RefreshNode(nodeA, visitedNodes, visitedLinks);
+            }
+            if (nodeB && !visitedNodes.has(nodeB)) {
+                visitedNodes.add(nodeB);
+                RefreshNode(nodeB, visitedNodes, visitedLinks);
+            }
+        });
+    }
+    if (!visitedLinks) {
+        return;
+    }
+    // then refresh the links to display the right color between ports
+    links.forEach((link) => {
+        if (!visitedLinks.has(link)) {
+            visitedLinks.add(link);
+            link.update();
+        }
+    });
+};
 //# sourceMappingURL=tools.js.map

package/nodeGraphSystem/typeLedger.d.ts

@@ -1,8 +1,8 @@
-import type { INodeContainer } from "./interfaces/nodeContainer";
-import type { INodeData } from "./interfaces/nodeData";
-import type { IPortData } from "./interfaces/portData";
-import type { NodePort } from "./nodePort";
-export declare class TypeLedger {
-    static PortDataBuilder: (port: NodePort, nodeContainer: INodeContainer) => IPortData;
-    static NodeDataBuilder: (data: any, nodeContainer: INodeContainer) => INodeData;
-}
+import type { INodeContainer } from "./interfaces/nodeContainer";
+import type { INodeData } from "./interfaces/nodeData";
+import type { IPortData } from "./interfaces/portData";
+import type { NodePort } from "./nodePort";
+export declare class TypeLedger {
+    static PortDataBuilder: (port: NodePort, nodeContainer: INodeContainer) => IPortData;
+    static NodeDataBuilder: (data: any, nodeContainer: INodeContainer) => INodeData;
+}

package/nodeGraphSystem/typeLedger.js

@@ -1,3 +1,3 @@
-export class TypeLedger {
-}
+export class TypeLedger {
+}
 //# sourceMappingURL=typeLedger.js.map

package/nodeGraphSystem/types/framePortData.d.ts

@@ -1,7 +1,7 @@
-import type { GraphFrame } from "../graphFrame";
-declare type FrameNodePort = import("../frameNodePort").FrameNodePort;
-export declare type FramePortData = {
-    frame: GraphFrame;
-    port: FrameNodePort;
-};
-export {};
+import type { GraphFrame } from "../graphFrame";
+declare type FrameNodePort = import("../frameNodePort").FrameNodePort;
+export declare type FramePortData = {
+    frame: GraphFrame;
+    port: FrameNodePort;
+};
+export {};

package/nodeGraphSystem/types/framePortData.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=framePortData.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/shared-ui-components",
-    "version": "5.28.0",
+    "version": "5.30.0",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",
@@ -21,8 +21,8 @@
     },
     "devDependencies": {
         "@dev/build-tools": "^1.0.0",
-        "@lts/gui": "1.0.0",
         "@lts/core": "1.0.0",
+        "@lts/gui": "1.0.0",
         "rimraf": "^3.0.2",
         "typescript": "^4.4.4"
     },
@@ -30,6 +30,8 @@
         "@babylonjs/core": "^5.22.0",
         "@babylonjs/gui": "^5.22.0",
         "react": "^17.0.2",
+        "react-dnd": "15.0.1",
+        "react-dnd-touch-backend": "15.0.1",
         "react-dom": "^17.0.2"
     },
     "keywords": [
@@ -52,4 +54,3 @@
         "url": "https://github.com/BabylonJS/Babylon.js/issues"
     }
 }
-

package/propertyChangedEvent.d.ts

@@ -1,7 +1,7 @@
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-    allowNullValue?: boolean;
-}
+export declare class PropertyChangedEvent {
+    object: any;
+    property: string;
+    value: any;
+    initialValue: any;
+    allowNullValue?: boolean;
+}

package/propertyChangedEvent.js

@@ -1,3 +1,3 @@
-export class PropertyChangedEvent {
-}
+export class PropertyChangedEvent {
+}
 //# sourceMappingURL=propertyChangedEvent.js.map

package/stories/Button.stories.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import type { ButtonProps } from "../components/Button";
-declare const _default: {
-    title: string;
-    component: import("react").FC<ButtonProps>;
-};
-export default _default;
-export declare const Default: any;
-export declare const Wide: any;
-export declare const Small: any;
+/// <reference types="react" />
+import type { ButtonProps } from "../components/Button";
+declare const _default: {
+    title: string;
+    component: import("react").FC<ButtonProps>;
+};
+export default _default;
+export declare const Default: any;
+export declare const Wide: any;
+export declare const Small: any;