Explorar o código

More frame for node mat

David Catuhe %!s(int64=5) %!d(string=hai) anos
pai
achega
4826b041ce

+ 13 - 4
nodeEditor/src/diagram/graphCanvas.scss

@@ -27,11 +27,19 @@
         
         .group-box {
             position: absolute;
-            background: rgba(72, 72, 72, 0.5);
-            border: rgba(255, 255, 255, 0.432) solid 2px;
+            background: rgba(72, 72, 72, 0.7);
+            display: grid;
+            grid-template-rows: 40px calc(100% - 40px);
+            grid-template-columns: 100%;
+
+            .group-box-header {
+                grid-row: 1;
+                grid-column: 1;
+                background: rgba(72, 72, 72, 1);
+            }
 
             &.selected {
-                border-color: white;
+                border: white solid 4px;
             }
         }
     }
@@ -82,7 +90,7 @@
             height: 100%;                  
 
             .visual {
-                z-index: 1;
+                z-index: 2;
                 width: 200px;
                 position: absolute;
                 left: 0;
@@ -105,6 +113,7 @@
                     opacity: 0.8;
                     display: grid;
                     align-items: flex-end;
+                    pointer-events: none;
                 }
 
                 .selection-border {                    

+ 4 - 0
nodeEditor/src/diagram/graphCanvas.tsx

@@ -148,9 +148,13 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 this._selectedGroup = null;
             } else {
                 if (selection instanceof NodeLink) {
+                    this._selectedNodes = [];
+                    this._selectedGroup = null;
                     this._selectedLink = selection;
                 } else if (selection instanceof GraphNodeGroup) {
+                    this._selectedNodes = [];
                     this._selectedGroup = selection;
+                    this._selectedLink = null;
                 } else{
                     if (this._ctrlKeyIsPressed) {
                         if (this._selectedNodes.indexOf(selection) === -1) {

+ 12 - 7
nodeEditor/src/diagram/graphNodeGroup.ts

@@ -12,7 +12,8 @@ export class GraphNodeGroup {
     private _gridAlignedY = 0;    
     public width: number;
     public height: number;
-    public element: HTMLDivElement;    
+    public element: HTMLDivElement;   
+    private _headerElement: HTMLDivElement;    
     private _nodes: GraphNode[] = [];
     private _ownerCanvas: GraphCanvasComponent;
     private _mouseStartPointX: Nullable<number> = null;
@@ -37,7 +38,7 @@ export class GraphNodeGroup {
 
     public set name(value: string) {
         this._name = value;
-        this.element.innerHTML = value;
+        this._headerElement.innerHTML = value;
     }
 
     public get x() {
@@ -76,6 +77,10 @@ export class GraphNodeGroup {
         this.element.classList.add("group-box");
         root.appendChild(this.element);
 
+        this._headerElement = root.ownerDocument!.createElement("div");  
+        this._headerElement.classList.add("group-box-header");
+        this.element.appendChild(this._headerElement);
+
         this.x = parseFloat(candidate.style.left!.replace("px", ""));
         this.y = parseFloat(candidate.style.top!.replace("px", ""));
         this.width = parseFloat(candidate.style.width!.replace("px", ""));
@@ -86,9 +91,9 @@ export class GraphNodeGroup {
         this.element.style.width = `${this.width / canvas.zoom}px`;
         this.element.style.height = `${this.height / canvas.zoom}px`;
         
-        this.element.addEventListener("pointerdown", evt => this._onDown(evt));
-        this.element.addEventListener("pointerup", evt => this._onUp(evt));
-        this.element.addEventListener("pointermove", evt => this._onMove(evt));
+        this._headerElement.addEventListener("pointerdown", evt => this._onDown(evt));
+        this._headerElement.addEventListener("pointerup", evt => this._onUp(evt));
+        this._headerElement.addEventListener("pointermove", evt => this._onMove(evt));
 
         this._onSelectionChangedObserver = canvas.globalState.onSelectionChangedObservable.add(node => {
             if (node === this) {
@@ -110,7 +115,7 @@ export class GraphNodeGroup {
         this._mouseStartPointX = evt.clientX;
         this._mouseStartPointY = evt.clientY;        
         
-        this.element.setPointerCapture(evt.pointerId);
+        this._headerElement.setPointerCapture(evt.pointerId);
         this._ownerCanvas.globalState.onSelectionChangedObservable.notifyObservers(this);
 
         // Get nodes
@@ -128,7 +133,7 @@ export class GraphNodeGroup {
         this.cleanAccumulation();
         this._mouseStartPointX = null;
         this._mouseStartPointY = null;
-        this.element.releasePointerCapture(evt.pointerId);
+        this._headerElement.releasePointerCapture(evt.pointerId);
     }
 
     private _onMove(evt: PointerEvent) {