Fix #7248

nodeEditor/src/diagram/graphCanvas.scss

@@ -32,7 +32,7 @@
         grid-template-rows: 100%;          
         grid-template-columns: 100%;          
 
-        #group-container {
+        #frame-container {
             overflow: visible;   
             grid-row: 1;
             grid-column: 1;
@@ -41,7 +41,7 @@
             height: 100%;             
         }
 
-        .group-box {
+        .frame-box {
             position: absolute;
             background: rgba(72, 72, 72, 0.7);
             display: grid;
@@ -50,7 +50,7 @@
             border: transparent solid 4px;
             box-sizing: border-box;
 
-            .group-box-header {
+            .frame-box-header {
                 grid-row: 1;
                 grid-column: 1;
                 background: rgba(72, 72, 72, 1);    
@@ -67,8 +67,9 @@
 
             &.selected {
                 border-color: white;
+                z-index: 1;
 
-                .group-box-header {
+                .frame-box-header {
                     border-color: white !important;
                 }
             }
@@ -82,6 +83,7 @@
             height: 100%;  
             overflow: visible; 
             pointer-events: none;
+            z-index: 1;
             
             .link {
                 stroke-width: 4px;    
@@ -113,7 +115,7 @@
             height: 100%;                  
 
             .visual {
-                z-index: 2;
+                z-index: 3;
                 width: 200px;
                 position: absolute;
                 left: 0;

nodeEditor/src/diagram/graphCanvas.tsx

@@ -27,7 +27,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _hostCanvas: HTMLDivElement;
     private _graphCanvas: HTMLDivElement;
     private _selectionContainer: HTMLDivElement;
-    private _groupContainer: HTMLDivElement;
+    private _frameContainer: HTMLDivElement;
     private _svgCanvas: HTMLElement;
     private _rootContainer: HTMLDivElement;
     private _nodes: GraphNode[] = [];
@@ -139,8 +139,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         return this._selectionContainer;
     }
 
-    public get groupContainer() {
-        return this._groupContainer;
+    public get frameContainer() {
+        return this._frameContainer;
     }
     
 
@@ -364,7 +364,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         this._graphCanvas = this.props.globalState.hostDocument.getElementById("graph-canvas-container") as HTMLDivElement;
         this._svgCanvas = this.props.globalState.hostDocument.getElementById("graph-svg-container") as HTMLElement;        
         this._selectionContainer = this.props.globalState.hostDocument.getElementById("selection-container") as HTMLDivElement;   
-        this._groupContainer = this.props.globalState.hostDocument.getElementById("group-container") as HTMLDivElement;        
+        this._frameContainer = this.props.globalState.hostDocument.getElementById("frame-container") as HTMLDivElement;        
         
         this.gridSize = DataStorage.ReadNumber("GridSize", 20);
         this.updateTransform();
@@ -399,7 +399,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             return;
         }
 
-        // Candidate group box
+        // Candidate frame box
         if (this._frameCandidate) {
             const rootRect = this.canvasContainer.getBoundingClientRect();      
 
@@ -495,11 +495,11 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             return;
         }
 
-        // Group?
+        // Frame?
         if (evt.currentTarget === this._hostCanvas && evt.shiftKey) {
             this._frameCandidate = this.props.globalState.hostDocument.createElement("div");
-            this._frameCandidate.classList.add("group-box");
-            this._groupContainer.appendChild(this._frameCandidate);
+            this._frameCandidate.classList.add("frame-box");
+            this._frameContainer.appendChild(this._frameCandidate);
 
             const rootRect = this.canvasContainer.getBoundingClientRect();      
             this._selectionStartX = (evt.pageX - rootRect.left);
@@ -545,8 +545,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         }
 
         if (this._frameCandidate) {            
-            let newGroup = new GraphFrame(this._frameCandidate, this);
-            this._frames.push(newGroup);
+            let newFrame = new GraphFrame(this._frameCandidate, this);
+            this._frames.push(newFrame);
 
             this._frameCandidate.parentElement!.removeChild(this._frameCandidate);
             this._frameCandidate = null;
@@ -712,7 +712,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 <div id="graph-container">
                     <div id="graph-canvas-container">
                     </div>     
-                    <div id="group-container">                        
+                    <div id="frame-container">                        
                     </div>
                     <svg id="graph-svg-container">
                     </svg>                    

nodeEditor/src/diagram/graphFrame.ts

@@ -108,13 +108,13 @@ export class GraphFrame {
 
     public constructor(candidate: Nullable<HTMLDivElement>, canvas: GraphCanvasComponent) {
         this._ownerCanvas = canvas;
-        const root = canvas.groupContainer;
+        const root = canvas.frameContainer;
         this.element = root.ownerDocument!.createElement("div");        
-        this.element.classList.add("group-box");
+        this.element.classList.add("frame-box");
         root.appendChild(this.element);
 
         this._headerElement = root.ownerDocument!.createElement("div");  
-        this._headerElement.classList.add("group-box-header");
+        this._headerElement.classList.add("frame-box-header");
         this.element.appendChild(this._headerElement);
 
         this.name = "Frame";
@@ -139,7 +139,27 @@ export class GraphFrame {
             } else {
                 this.element.classList.remove("selected");
             }
-        });        
+        });  
+                
+        // Get nodes
+        this._nodes = [];
+        this._ownerCanvas.globalState.onFrameCreated.notifyObservers(this);
+    }
+
+    public syncNode(node: GraphNode) {
+        if (node.isOverlappingFrame(this)) {
+            let index = this.nodes.indexOf(node);
+
+            if (index === -1) {
+                this.nodes.push(node);
+            }
+        } else {
+            let index = this.nodes.indexOf(node);
+
+            if (index > -1) {
+                this.nodes.splice(index, 1);
+            }
+        }
     }
 
     public cleanAccumulation() {
@@ -155,10 +175,6 @@ export class GraphFrame {
         
         this._headerElement.setPointerCapture(evt.pointerId);
         this._ownerCanvas.globalState.onSelectionChangedObservable.notifyObservers(this);
-
-        // Get nodes
-        this._nodes = [];
-        this._ownerCanvas.globalState.onGroupAboutToMove.notifyObservers(this);
     }    
 
     private _onUp(evt: PointerEvent) {

nodeEditor/src/diagram/graphNode.ts

@@ -33,7 +33,7 @@ export class GraphNode {
     private _globalState: GlobalState;
     private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame>>>;   
     private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;  
-    private _onGroupAboutToMoveObserver: Nullable<Observer<GraphFrame>>;  
+    private _onFrameCreatedObserver: Nullable<Observer<GraphFrame>>;  
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;  
     private _ownerCanvas: GraphCanvasComponent; 
     private _isSelected: boolean;
@@ -65,6 +65,7 @@ export class GraphNode {
         this._visual.style.left = `${this._gridAlignedX}px`;
 
         this._refreshLinks();
+        this._refreshFrames();
     }
 
     public get y() {
@@ -82,6 +83,7 @@ export class GraphNode {
         this._visual.style.top = `${this._gridAlignedY}px`;
 
         this._refreshLinks();
+        this._refreshFrames();
     }
 
     public get width() {
@@ -152,20 +154,22 @@ export class GraphNode {
             this.isSelected = overlap;
         });
 
-        this._onGroupAboutToMoveObserver = this._globalState.onGroupAboutToMove.add(group => {
-            const rect2 = this._visual.getBoundingClientRect();
-            const rect1 = group.element.getBoundingClientRect();
-            var overlap = !(rect1.right < rect2.left || 
-                rect1.left > rect2.right || 
-                rect1.bottom < rect2.top || 
-                rect1.top > rect2.bottom);
-            
-            if (overlap) {
-                group.nodes.push(this);
+        this._onFrameCreatedObserver = this._globalState.onFrameCreated.add(frame => {            
+            if (this.isOverlappingFrame(frame)) {
+                frame.nodes.push(this);
             }
         });
     }
 
+    public isOverlappingFrame(frame: GraphFrame) {
+        const rect2 = this._visual.getBoundingClientRect();
+        const rect1 = frame.element.getBoundingClientRect();
+        return !(rect1.right < rect2.left || 
+            rect1.left > rect2.right || 
+            rect1.bottom < rect2.top || 
+            rect1.top > rect2.bottom);
+    }
+
     public getPortForConnectionPoint(point: NodeMaterialConnectionPoint) {
         for (var port of this._inputPorts) {
             let attachedPoint = port.connectionPoint;
@@ -189,7 +193,13 @@ export class GraphNode {
     public getLinksForConnectionPoint(point: NodeMaterialConnectionPoint) {
         return this._links.filter(link => link.portA.connectionPoint === point || link.portB!.connectionPoint === point);
     }
-
+    
+    private _refreshFrames() {       
+        // Frames
+        for (var frame of this._ownerCanvas.frames) {
+            frame.syncNode(this);
+        }
+    }
     private _refreshLinks() {
         for (var link of this._links) {
             link.update();
@@ -389,8 +399,8 @@ export class GraphNode {
             this._visual.parentElement.removeChild(this._visual);
         }
 
-        if (this._onGroupAboutToMoveObserver) {
-            this._globalState.onGroupAboutToMove.remove(this._onGroupAboutToMoveObserver);
+        if (this._onFrameCreatedObserver) {
+            this._globalState.onFrameCreated.remove(this._onFrameCreatedObserver);
         }
 
         for (var port of this._inputPorts) {

nodeEditor/src/globalState.ts

@@ -33,7 +33,7 @@ export class GlobalState {
     onAnimationCommandActivated = new Observable<void>();
     onCandidateLinkMoved = new Observable<Nullable<Vector2>>();   
     onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();       
-    onGroupAboutToMove = new Observable<GraphFrame>();   
+    onFrameCreated = new Observable<GraphFrame>();   
     onCandidatePortSelected = new Observable<Nullable<NodePort>>();
     onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
     onGridSizeChanged = new Observable<void>();