Collapsible nodes (#15776)

BabylonJS · Nov 5, 2024 · 0f3934a · 0f3934a
1 parent 44df9ea
commit 0f3934a
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 16 deletions.
diff --git a/packages/dev/core/src/FrameGraph/Node/nodeRenderGraph.ts b/packages/dev/core/src/FrameGraph/Node/nodeRenderGraph.ts
@@ -452,6 +452,7 @@ export class NodeRenderGraph {
                 blockId: number;
                 x: number;
                 y: number;
+                isCollapsed: boolean;
             }[] = source.locations || source.editorData.locations;
 
             for (const location of locations) {

diff --git a/packages/dev/core/src/Materials/Node/nodeMaterial.ts b/packages/dev/core/src/Materials/Node/nodeMaterial.ts
@@ -2395,6 +2395,7 @@ export class NodeMaterial extends PushMaterial {
                 blockId: number;
                 x: number;
                 y: number;
+                isCollapsed: boolean;
             }[] = source.locations || source.editorData.locations;
 
             for (const location of locations) {

diff --git a/packages/dev/core/src/Meshes/Node/nodeGeometry.ts b/packages/dev/core/src/Meshes/Node/nodeGeometry.ts
@@ -439,6 +439,7 @@ export class NodeGeometry {
                 blockId: number;
                 x: number;
                 y: number;
+                isCollapsed: boolean;
             }[] = source.locations || source.editorData.locations;
 
             for (const location of locations) {

diff --git a/packages/dev/sharedUiComponents/src/imgs/dropdownArrowIcon_white.svg b/packages/dev/sharedUiComponents/src/imgs/dropdownArrowIcon_white.svg
diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphCanvas.tsx b/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphCanvas.tsx
@@ -1446,6 +1446,9 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                     if (data && data.uniqueId === location.blockId) {
                         node.x = location.x;
                         node.y = location.y;
+                        if (location.isCollapsed) {
+                            node.collapse();
+                        }
                         node.cleanAccumulation();
                         break;
                     }

diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.modules.scss b/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.modules.scss
@@ -39,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 {

diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.ts b/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.ts
@@ -17,13 +17,16 @@ import commonStyles from "./common.modules.scss";
 import type { IEditablePropertyListOption, IEditablePropertyOption, IPropertyDescriptionForEdition } from "core/Decorators/nodeDecorator";
 import { PropertyTypeForEdition } from "core/Decorators/nodeDecorator";
 import { ForceRebuild } from "./automaticProperties";
+import dropdownArrowIcon from "../imgs/dropdownArrowIcon_white.svg";
 
 export class GraphNode {
     private _visual: HTMLDivElement;
     private _headerContainer: HTMLDivElement;
     private _headerIcon: HTMLDivElement;
     private _headerIconImg: HTMLImageElement;
+    private _headerCollapseImg: HTMLImageElement;
     private _header: HTMLDivElement;
+    private _headerCollapse: HTMLDivElement;
     private _connections: HTMLDivElement;
     private _optionsContainer: HTMLDivElement;
     private _inputsContainer: HTMLDivElement;
@@ -62,6 +65,10 @@ export class GraphNode {
         this._visual.classList.remove(className);
     }
 
+    public get isCollapsed() {
+        return this._isCollapsed;
+    }
+
     public get isVisible() {
         return this._isVisible;
     }
@@ -400,14 +407,11 @@ export class GraphNode {
         this._executionTime.innerHTML = executionTime >= 0 ? `${executionTime.toFixed(2)} ms` : "";
 
         this.content.prepareHeaderIcon(this._headerIcon, this._headerIconImg);
-        if (this._headerIconImg.src) {
-            this._header.classList.add(localStyles["headerWithIcon"]);
-        }
     }
 
     private _onDown(evt: PointerEvent) {
         // Check if this is coming from the port
-        if (evt.target && (evt.target as HTMLElement).nodeName === "IMG") {
+        if (evt.target && (evt.target as HTMLElement).nodeName === "IMG" && (evt.target as HTMLElement).draggable) {
             return;
         }
 
@@ -563,6 +567,48 @@ export class GraphNode {
         ForceRebuild(source, this._stateManager, propertyName, notifiers);
     }
 
+    private _isCollapsed = false;
+
+    /**
+     * Collapse the node
+     */
+    public collapse() {
+        this._headerCollapse.classList.add(localStyles.collapsed);
+        this._inputPorts
+            .filter((p) => !p.portData.isConnected)
+            .forEach((p) => {
+                p.container.classList.add(commonStyles.hidden);
+            });
+
+        this._outputPorts
+            .filter((p) => !p.portData.isConnected)
+            .forEach((p) => {
+                p.container.classList.add(commonStyles.hidden);
+            });
+
+        this._refreshLinks();
+    }
+
+    /**
+     * Expand the node
+     */
+    public expand() {
+        this._headerCollapse.classList.remove(localStyles.collapsed);
+        this._inputPorts
+            .filter((p) => !p.portData.isConnected)
+            .forEach((p) => {
+                p.container.classList.remove(commonStyles.hidden);
+            });
+
+        this._outputPorts
+            .filter((p) => !p.portData.isConnected)
+            .forEach((p) => {
+                p.container.classList.remove(commonStyles.hidden);
+            });
+
+        this._refreshLinks();
+    }
+
     public appendVisual(root: HTMLDivElement, owner: GraphCanvasComponent) {
         this._ownerCanvas = owner;
 
@@ -592,9 +638,31 @@ export class GraphNode {
         this._headerIcon = root.ownerDocument!.createElement("div");
         this._headerIcon.classList.add(localStyles.headerIcon);
         this._headerIconImg = root.ownerDocument!.createElement("img");
+        this._headerIconImg.draggable = false;
         this._headerIcon.appendChild(this._headerIconImg);
         this._headerContainer.appendChild(this._headerIcon);
 
+        if (this.content.inputs.length > 1 || this.content.outputs.length > 1) {
+            this._headerCollapse = root.ownerDocument!.createElement("div");
+            this._headerCollapse.classList.add(localStyles.headerCollapse);
+            this._headerCollapseImg = root.ownerDocument!.createElement("img");
+            this._headerCollapseImg.src = dropdownArrowIcon;
+            this._headerCollapseImg.draggable = false;
+            this._headerCollapse.appendChild(this._headerCollapseImg);
+            this._headerContainer.appendChild(this._headerCollapse);
+            this._headerCollapse.addEventListener("pointerup", (evt) => evt.stopPropagation());
+            this._headerCollapse.addEventListener("pointermove", (evt) => evt.stopPropagation());
+            this._headerCollapse.addEventListener("pointerdown", (evt) => {
+                this._isCollapsed = !this._isCollapsed;
+                if (this._isCollapsed) {
+                    this.collapse();
+                } else {
+                    this.expand();
+                }
+                evt.stopPropagation();
+            });
+        }
+
         this._selectionBorder = root.ownerDocument!.createElement("div");
         this._selectionBorder.classList.add("selection-border");
         this._visual.appendChild(this._selectionBorder);
@@ -630,7 +698,7 @@ export class GraphNode {
 
         this._visual.appendChild(this._comments);
 
-        // Comments
+        // Execution time
         this._executionTime = root.ownerDocument!.createElement("div");
         this._executionTime.classList.add(localStyles.executionTime);
 

diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeLocationInfo.ts b/packages/dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeLocationInfo.ts
@@ -2,6 +2,7 @@ export interface INodeLocationInfo {
     blockId: number;
     x: number;
     y: number;
+    isCollapsed: boolean;
 }
 
 export interface IFrameData {

diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts b/packages/dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts
@@ -12,6 +12,7 @@ import localStyles from "./nodePort.modules.scss";
 
 export class NodePort {
     protected _element: HTMLDivElement;
+    protected _portContainer: HTMLElement;
     protected _img: HTMLImageElement;
     protected _pip: HTMLDivElement;
     protected _stateManager: StateManager;
@@ -29,6 +30,14 @@ export class NodePort {
         return this._element;
     }
 
+    public get container(): HTMLElement {
+        if (this.delegatedPort) {
+            return this.delegatedPort.container;
+        }
+
+        return this._portContainer;
+    }
+
     public get portName() {
         return this.portData.name;
     }
@@ -106,6 +115,7 @@ export class NodePort {
         public node: GraphNode,
         stateManager: StateManager
     ) {
+        this._portContainer = portContainer;
         this._element = portContainer.ownerDocument!.createElement("div");
         this._element.classList.add(commonStyles.port);
         portContainer.appendChild(this._element);

diff --git a/packages/tools/nodeEditor/src/serializationTools.ts b/packages/tools/nodeEditor/src/serializationTools.ts
@@ -22,6 +22,7 @@ export class SerializationTools {
                 blockId: block.uniqueId,
                 x: node ? node.x : 0,
                 y: node ? node.y : 0,
+                isCollapsed: node ? node.isCollapsed : false,
             });
         }
 

diff --git a/packages/tools/nodeGeometryEditor/src/serializationTools.ts b/packages/tools/nodeGeometryEditor/src/serializationTools.ts
@@ -20,6 +20,7 @@ export class SerializationTools {
                 blockId: block.uniqueId,
                 x: node ? node.x : 0,
                 y: node ? node.y : 0,
+                isCollapsed: node ? node.isCollapsed : false,
             });
         }
 

diff --git a/packages/tools/nodeRenderGraphEditor/src/serializationTools.ts b/packages/tools/nodeRenderGraphEditor/src/serializationTools.ts
@@ -20,6 +20,7 @@ export class SerializationTools {
                 blockId: block.uniqueId,
                 x: node ? node.x : 0,
                 y: node ? node.y : 0,
+                isCollapsed: node ? node.isCollapsed : false,
             });
         }