Fix zorder

nodeEditor/src/diagram/graphCanvas.scss

@@ -22,9 +22,25 @@
         }
     }
 
-    #group-container {
-        overflow: visible;
-        
+    #graph-container {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        transform-origin: left top;
+        display: grid;
+        grid-template-rows: 100%;          
+        grid-template-columns: 100%;          
+
+        #group-container {
+            overflow: visible;   
+            grid-row: 1;
+            grid-column: 1;
+            position: relative;
+            width: 100%;
+            height: 100%;             
+        }
+
         .group-box {
             position: absolute;
             background: rgba(72, 72, 72, 0.7);
@@ -42,16 +58,6 @@
                 border: white solid 4px;
             }
         }
-    }
-
-    #graph-container {
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        transform-origin: left top;
-        display: grid;
-        grid-template: 100% 100%;     
 
         #graph-svg-container {
             grid-row: 1;
@@ -60,6 +66,7 @@
             width: 100%;
             height: 100%;  
             overflow: visible; 
+            pointer-events: none;
             
             .link {
                 stroke-width: 4px;    
@@ -70,6 +77,7 @@
             }
 
             .selection-link {
+                pointer-events: all;
                 stroke-width: 16px;
                 opacity: 0;
                 &:hover, &.selected {

nodeEditor/src/diagram/graphCanvas.tsx

@@ -11,7 +11,7 @@ import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { FragmentOutputBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/fragmentOutputBlock';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { DataStorage } from '../dataStorage';
-import { GraphNodeGroup } from './graphNodeGroup';
+import { GraphFrame } from './graphFrame';
 
 require("./graphCanvas.scss");
 
@@ -46,10 +46,10 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _candidatePort: Nullable<NodePort> = null;
     private _gridSize = 20;
     private _selectionBox: Nullable<HTMLDivElement> = null;   
-    private _selectedGroup: Nullable<GraphNodeGroup> = null;   
-    private _groupCandidateBox: Nullable<HTMLDivElement> = null;  
+    private _selectedFrame: Nullable<GraphFrame> = null;   
+    private _frameCandidate: Nullable<HTMLDivElement> = null;  
 
-    private _groups: GraphNodeGroup[] = [];
+    private _frames: GraphFrame[] = [];
 
     private _altKeyIsPressed = false;
     private _ctrlKeyIsPressed = false;
@@ -118,8 +118,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     public get selectedLink() {
         return this._selectedLink;
     }
-    public get selectedGroup() {
-        return this._selectedGroup;
+    public get selectedFrame() {
+        return this._selectedFrame;
     }
 
     public get canvasContainer() {
@@ -137,6 +137,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     public get groupContainer() {
         return this._groupContainer;
     }
+    
 
     constructor(props: IGraphCanvasComponentProps) {
         super(props);
@@ -145,15 +146,15 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             if (!selection) {
                 this._selectedNodes = [];
                 this._selectedLink = null;
-                this._selectedGroup = null;
+                this._selectedFrame = null;
             } else {
                 if (selection instanceof NodeLink) {
                     this._selectedNodes = [];
-                    this._selectedGroup = null;
+                    this._selectedFrame = null;
                     this._selectedLink = selection;
-                } else if (selection instanceof GraphNodeGroup) {
+                } else if (selection instanceof GraphFrame) {
                     this._selectedNodes = [];
-                    this._selectedGroup = selection;
+                    this._selectedFrame = selection;
                     this._selectedLink = null;
                 } else{
                     if (this._ctrlKeyIsPressed) {
@@ -375,26 +376,26 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         }
 
         // Candidate group box
-        if (this._groupCandidateBox) {
+        if (this._frameCandidate) {
             const rootRect = this.canvasContainer.getBoundingClientRect();      
 
             const localX = evt.pageX - rootRect.left;
             const localY = evt.pageY - rootRect.top;
 
             if (localX > this._selectionStartX) {
-                this._groupCandidateBox.style.left = `${this._selectionStartX / this.zoom}px`;
-                this._groupCandidateBox.style.width = `${(localX - this._selectionStartX) / this.zoom}px`;
+                this._frameCandidate.style.left = `${this._selectionStartX / this.zoom}px`;
+                this._frameCandidate.style.width = `${(localX - this._selectionStartX) / this.zoom}px`;
             } else {
-                this._groupCandidateBox.style.left = `${localX / this.zoom}px`;
-                this._groupCandidateBox.style.width = `${(this._selectionStartX - localX) / this.zoom}px`;
+                this._frameCandidate.style.left = `${localX / this.zoom}px`;
+                this._frameCandidate.style.width = `${(this._selectionStartX - localX) / this.zoom}px`;
             }
 
             if (localY > this._selectionStartY) {                
-                this._groupCandidateBox.style.top = `${this._selectionStartY / this.zoom}px`;
-                this._groupCandidateBox.style.height = `${(localY - this._selectionStartY) / this.zoom}px`;
+                this._frameCandidate.style.top = `${this._selectionStartY / this.zoom}px`;
+                this._frameCandidate.style.height = `${(localY - this._selectionStartY) / this.zoom}px`;
             } else {
-                this._groupCandidateBox.style.top = `${localY / this.zoom}px`;
-                this._groupCandidateBox.style.height = `${(this._selectionStartY - localY) / this.zoom}px`;
+                this._frameCandidate.style.top = `${localY / this.zoom}px`;
+                this._frameCandidate.style.height = `${(this._selectionStartY - localY) / this.zoom}px`;
             }
 
             return;
@@ -472,17 +473,17 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
         // Group?
         if (evt.currentTarget === this._hostCanvas && evt.shiftKey) {
-            this._groupCandidateBox = this.props.globalState.hostDocument.createElement("div");
-            this._groupCandidateBox.classList.add("group-box");
-            this._groupContainer.appendChild(this._groupCandidateBox);
+            this._frameCandidate = this.props.globalState.hostDocument.createElement("div");
+            this._frameCandidate.classList.add("group-box");
+            this._groupContainer.appendChild(this._frameCandidate);
 
             const rootRect = this.canvasContainer.getBoundingClientRect();      
             this._selectionStartX = (evt.pageX - rootRect.left);
             this._selectionStartY = (evt.pageY - rootRect.top);
-            this._groupCandidateBox.style.left = `${this._selectionStartX / this.zoom}px`;
-            this._groupCandidateBox.style.top = `${this._selectionStartY / this.zoom}px`;
-            this._groupCandidateBox.style.width = "0px";
-            this._groupCandidateBox.style.height = "0px";
+            this._frameCandidate.style.left = `${this._selectionStartX / this.zoom}px`;
+            this._frameCandidate.style.top = `${this._selectionStartY / this.zoom}px`;
+            this._frameCandidate.style.width = "0px";
+            this._frameCandidate.style.height = "0px";
             return;
         }
 
@@ -519,12 +520,12 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
            this._selectionBox = null;
         }
 
-        if (this._groupCandidateBox) {            
-            let newGroup = new GraphNodeGroup(this._groupCandidateBox, this);
-            this._groups.push(newGroup);
+        if (this._frameCandidate) {            
+            let newGroup = new GraphFrame(this._frameCandidate, this);
+            this._frames.push(newGroup);
 
-            this._groupCandidateBox.parentElement!.removeChild(this._groupCandidateBox);
-            this._groupCandidateBox = null;
+            this._frameCandidate.parentElement!.removeChild(this._frameCandidate);
+            this._frameCandidate = null;
          }
     }
 
@@ -665,7 +666,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                     <div id="group-container">                        
                     </div>
                     <svg id="graph-svg-container">
-                    </svg>
+                    </svg>                    
                     <div id="selection-container">                        
                     </div>
                 </div>

nodeEditor/src/diagram/graphNodeGroup.ts

@@ -4,7 +4,7 @@ import { Nullable } from 'babylonjs/types';
 import { Observer } from 'babylonjs/Misc/observable';
 import { NodeLink } from './nodeLink';
 
-export class GraphNodeGroup {
+export class GraphFrame {
     private _name: string;
     private _x = 0;
     private _y = 0;
@@ -18,7 +18,7 @@ export class GraphNodeGroup {
     private _ownerCanvas: GraphCanvasComponent;
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphNodeGroup>>>;   
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame>>>;   
 
     public get nodes() {
         return this._nodes;
@@ -88,8 +88,8 @@ export class GraphNodeGroup {
 
         this.cleanAccumulation();        
 
-        this.element.style.width = `${this.width / canvas.zoom}px`;
-        this.element.style.height = `${this.height / canvas.zoom}px`;
+        this.element.style.width = `${this.width}px`;
+        this.element.style.height = `${this.height}px`;
         
         this._headerElement.addEventListener("pointerdown", evt => this._onDown(evt));
         this._headerElement.addEventListener("pointerup", evt => this._onUp(evt));

nodeEditor/src/diagram/graphNode.ts

@@ -11,7 +11,7 @@ import { DisplayLedger } from './displayLedger';
 import { IDisplayManager } from './display/displayManager';
 import { NodeLink } from './nodeLink';
 import { NodePort } from './nodePort';
-import { GraphNodeGroup } from './graphNodeGroup';
+import { GraphFrame } from './graphFrame';
 
 export class GraphNode {
     private _visual: HTMLDivElement;
@@ -31,9 +31,9 @@ export class GraphNode {
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null    
     private _globalState: GlobalState;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphNodeGroup>>>;   
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame>>>;   
     private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;  
-    private _onGroupAboutToMoveObserver: Nullable<Observer<GraphNodeGroup>>;  
+    private _onGroupAboutToMoveObserver: Nullable<Observer<GraphFrame>>;  
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;  
     private _ownerCanvas: GraphCanvasComponent; 
     private _isSelected: boolean;

nodeEditor/src/diagram/nodeLink.ts

@@ -3,7 +3,7 @@ import { GraphNode } from './graphNode';
 import { NodePort } from './nodePort';
 import { Nullable } from 'babylonjs/types';
 import { Observer } from 'babylonjs/Misc/observable';
-import { GraphNodeGroup } from './graphNodeGroup';
+import { GraphFrame } from './graphFrame';
 
 export class NodeLink {   
     private _graphCanvas: GraphCanvasComponent;
@@ -13,7 +13,7 @@ export class NodeLink {
     private _nodeB?: GraphNode;
     private _path: SVGPathElement;
     private _selectionPath: SVGPathElement;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphNodeGroup>>>;
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame>>>;
 
     public get portA() {
         return this._portA;

nodeEditor/src/globalState.ts

@@ -10,13 +10,13 @@ import { GraphNode } from './diagram/graphNode';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { NodePort } from './diagram/nodePort';
 import { NodeLink } from './diagram/nodeLink';
-import { GraphNodeGroup } from './diagram/graphNodeGroup';
+import { GraphFrame } from './diagram/graphFrame';
 
 export class GlobalState {
     nodeMaterial: NodeMaterial;
     hostElement: HTMLElement;
     hostDocument: HTMLDocument;
-    onSelectionChangedObservable = new Observable<Nullable<GraphNode | NodeLink | GraphNodeGroup>>();
+    onSelectionChangedObservable = new Observable<Nullable<GraphNode | NodeLink | GraphFrame>>();
     onRebuildRequiredObservable = new Observable<void>();
     onResetRequiredObservable = new Observable<void>();
     onUpdateRequiredObservable = new Observable<void>();
@@ -33,7 +33,7 @@ export class GlobalState {
     onAnimationCommandActivated = new Observable<void>();
     onCandidateLinkMoved = new Observable<Nullable<Vector2>>();   
     onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();       
-    onGroupAboutToMove = new Observable<GraphNodeGroup>();   
+    onGroupAboutToMove = new Observable<GraphFrame>();   
     onCandidatePortSelected = new Observable<Nullable<NodePort>>();
     onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
     onGridSizeChanged = new Observable<void>();

nodeEditor/src/graphEditor.tsx

@@ -165,8 +165,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     this._graphCanvas.selectedLink.dispose();
                 }
 
-                if (this._graphCanvas.selectedGroup) {
-                    this._graphCanvas.selectedGroup.dispose();
+                if (this._graphCanvas.selectedFrame) {
+                    this._graphCanvas.selectedFrame.dispose();
                 }
 
                 this.props.globalState.onSelectionChangedObservable.notifyObservers(null);