Pamela Wolf 4 роки тому
батько
коміт
d54aa8d436

+ 2 - 51
guiEditor/src/diagram/graphCanvas.tsx

@@ -5,7 +5,6 @@ import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/
 import { GraphNode } from './graphNode';
 import * as dagre from 'dagre';
 import { Nullable } from 'babylonjs/types';
-import { NodeLink } from './nodeLink';
 import { NodePort } from './nodePort';
 import { NodeMaterialConnectionPoint, NodeMaterialConnectionPointDirection, NodeMaterialConnectionPointCompatibilityStates } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
@@ -49,7 +48,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _rootContainer: HTMLDivElement;
     private _nodes: GraphNode[] = [];
     private _guiNodes: GraphNode[] = [];
-    private _links: NodeLink[] = [];
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null
     private _dropPointX = 0;
@@ -62,9 +60,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _zoom = 1;
     private _selectedNodes: GraphNode[] = [];
     private _selectedGuiNodes: GraphNode[] = [];
-    private _selectedLink: Nullable<NodeLink> = null;
     private _selectedPort: Nullable<NodePort> = null;
-    private _candidateLink: Nullable<NodeLink> = null;
     private _candidatePort: Nullable<NodePort | FrameNodePort> = null;
     private _gridSize = 20;
     private _selectionBox: Nullable<HTMLDivElement> = null;    
@@ -95,10 +91,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         return this._nodes;
     }
 
-    public get links() {
-        return this._links;
-    }
-
     public get zoom() {
         return this._zoom;
     }
@@ -141,10 +133,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         return this._selectedGuiNodes;
     }
 
-    public get selectedLink() {
-        return this._selectedLink;
-    }
-
     public get selectedPort() {
         return this._selectedPort;
     }
@@ -179,15 +167,9 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 }); 
                 this._selectedNodes = [];
                 this._selectedGuiNodes = [];
-                this._selectedLink = null;
                 this._selectedPort = null;
             } else {
-                if (selection instanceof NodeLink) {
-                    this._selectedNodes = [];
-                    this._selectedGuiNodes = [];
-                    this._selectedLink = selection;
-                    this._selectedPort = null;
-                }  else if (selection instanceof GraphNode){
+                if (selection instanceof GraphNode){
                     if (this._ctrlKeyIsPressed) {
                         if (this._selectedNodes.indexOf(selection) === -1) {
                             this._selectedNodes.push(selection);
@@ -200,12 +182,10 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 } else if(selection instanceof NodePort){
                     this._selectedNodes = [];
                     this._selectedGuiNodes = [];
-                    this._selectedLink = null;
                     this._selectedPort = selection;
                 } else {
                     this._selectedNodes = [];
                     this._selectedGuiNodes = [];
-                    this._selectedLink = null;
                     //this._selectedPort = selection.port;
                 }
             }
@@ -289,7 +269,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         
 
         this._nodes = [];
-        this._links = [];
         this._graphCanvas.innerHTML = "";
         this._svgCanvas.innerHTML = "";
     }
@@ -302,15 +281,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
     }
 
-    removeLink(link: NodeLink) {
-        let index = this._links.indexOf(link);
-
-        if (index > -1) {
-            this._links.splice(index, 1);
-        }
-
-        link.dispose();
-    }
 
     appendBlock(block: NodeMaterialBlock) {
         let newNode = new GraphNode(block, this.props.globalState, null);
@@ -545,11 +515,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
         // Port dragging
         if (evt.nativeEvent.srcElement && (evt.nativeEvent.srcElement as HTMLElement).nodeName === "IMG") {
-            if (!this._candidateLink) {
-                let portElement = ((evt.nativeEvent.srcElement as HTMLElement).parentElement as any).port as NodePort;
-                this._candidateLink = new NodeLink(this, portElement, portElement.node);
-                this._candidateLinkedHasMoved = false;
-            }  
             return;
         }
 
@@ -564,21 +529,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         this._rootContainer.releasePointerCapture(evt.pointerId);   
         this._oldY = -1; 
 
-        if (this._candidateLink) {       
-            if (this._candidateLinkedHasMoved) {       
-                this.props.globalState.onCandidateLinkMoved.notifyObservers(null);
-            } else { // is a click event on NodePort
-                if(this._candidateLink.portA instanceof FrameNodePort) { //only on Frame Node Ports
-                    const port = this._candidateLink.portA;
-                
-                } else if(this._candidateLink.portA instanceof NodePort){
-                    this.props.globalState.onSelectionChangedObservable.notifyObservers(this._candidateLink.portA );
-                }
-            }
-            this._candidateLink.dispose();
-            this._candidateLink = null;
-            this._candidatePort = null;
-        }
+        
 
         if (this._selectionBox) {
            this._selectionBox.parentElement!.removeChild(this._selectionBox);

+ 1 - 2
guiEditor/src/diagram/graphNode.ts

@@ -9,7 +9,6 @@ import * as React from 'react';
 import { GenericPropertyComponent } from './properties/genericNodePropertyComponent';
 import { DisplayLedger } from './displayLedger';
 import { IDisplayManager } from './display/displayManager';
-import { NodeLink } from './nodeLink';
 import { NodePort } from './nodePort';
 import { Vector2 } from 'babylonjs';
 
@@ -28,7 +27,7 @@ export class GraphNode {
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null    
     private _globalState: GlobalState;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | NodePort | FramePortData>>>;  
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodePort | FramePortData>>>;  
     private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;   
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;  
     private _ownerCanvas: GraphCanvasComponent; 

+ 0 - 156
guiEditor/src/diagram/nodeLink.ts

@@ -1,156 +0,0 @@
-import { GraphCanvasComponent, FramePortData } from './graphCanvas';
-import { GraphNode } from './graphNode';
-import { NodePort } from './nodePort';
-import { Nullable } from 'babylonjs/types';
-import { Observer, Observable } from 'babylonjs/Misc/observable';
-import { GraphFrame } from './graphFrame';
-import { FrameNodePort } from './frameNodePort';
-
-export class NodeLink {
-    private _graphCanvas: GraphCanvasComponent;
-    private _portA: NodePort | FrameNodePort;
-    private _portB?: NodePort | FrameNodePort;
-    private _nodeA: GraphNode;
-    private _nodeB?: GraphNode;
-    private _path: SVGPathElement;
-    private _selectionPath: SVGPathElement;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;  
-    private _isVisible = true;
-
-    public onDisposedObservable = new Observable<NodeLink>();
-
-    public get isVisible() {
-        return this._isVisible;
-    }
-
-    public set isVisible(value: boolean) {
-        this._isVisible = value;
-
-        if (!value) {
-            this._path.classList.add("hidden");
-            this._selectionPath.classList.add("hidden");
-        } else {
-            this._path.classList.remove("hidden");
-            this._selectionPath.classList.remove("hidden");
-        }
-
-        this.update();
-    }
-
-    public get portA() {
-        return this._portA;
-    }
-
-    public get portB() {
-        return this._portB;
-    }
-
-    public get nodeA() {
-        return this._nodeA;
-    }
-
-    public get nodeB() {
-        return this._nodeB;
-    }
-
-    public update(endX = 0, endY = 0, straight = false) {
-        const rectA = this._portA.element.getBoundingClientRect();
-        const rootRect = this._graphCanvas.canvasContainer.getBoundingClientRect();
-        const zoom = this._graphCanvas.zoom;
-        const xOffset = rootRect.left;
-        const yOffset = rootRect.top;
-
-        var startX = (rectA.left - xOffset + 0.5 * rectA.width) / zoom;
-        var startY = (rectA.top - yOffset + 0.5 * rectA.height) / zoom;
-
-        if (this._portB) {
-            const rectB = this._portB.element.getBoundingClientRect();
-            endX = (rectB.left - xOffset + 0.5 * rectB.width) / zoom;
-            endY = (rectB.top - yOffset + 0.5 * rectB.height) / zoom;
-        }
-
-        if (straight) {
-            this._path.setAttribute("d", `M${startX},${startY} L${endX},${endY}`);
-            this._path.setAttribute("stroke-dasharray", "10, 10");
-            this._path.setAttribute("stroke-linecap", "round");
-        } else {
-            const deltaX = endX - startX;
-            const deltaY = endY - startY;
-            const tangentLength = Math.min(Math.sqrt(deltaX * deltaX + deltaY * deltaY) * 0.5, 300);
-            this._path.setAttribute("d", `M${startX},${startY} C${startX + tangentLength},${startY} ${endX - tangentLength},${endY} ${endX},${endY}`);
-            this._selectionPath.setAttribute("d", `M${startX},${startY} C${startX + tangentLength},${startY} ${endX - tangentLength},${endY} ${endX},${endY}`);
-        }
-        this._path.setAttribute("stroke", this._portA.element.style.backgroundColor!);
-    }
-
-    public constructor(graphCanvas: GraphCanvasComponent, portA: NodePort, nodeA: GraphNode, portB?: NodePort, nodeB?: GraphNode) {
-        this._portA = portA;
-        this._portB = portB;
-        this._nodeA = nodeA;
-        this._nodeB = nodeB;
-        this._graphCanvas = graphCanvas;
-
-        var document = portA.element.ownerDocument!;
-        var svg = graphCanvas.svgCanvas;
-
-        // Create path
-        this._path = document.createElementNS('http://www.w3.org/2000/svg', "path");
-        this._path.setAttribute("fill", "none");
-        this._path.classList.add("link");
-
-        svg.appendChild(this._path);
-
-        this._selectionPath = document.createElementNS('http://www.w3.org/2000/svg', "path");
-        this._selectionPath.setAttribute("fill", "none");
-        this._selectionPath.classList.add("selection-link");
-
-        svg.appendChild(this._selectionPath);
-
-        this._selectionPath.onmousedown = () => this.onClick();
-
-        if (this._portB) {
-            // Update
-            this.update();
-        }
-
-        this._onSelectionChangedObserver = this._graphCanvas.globalState.onSelectionChangedObservable.add((selection) => {
-            if (selection === this) {
-                this._path.classList.add("selected");
-                this._selectionPath.classList.add("selected");
-            } else {
-                this._path.classList.remove("selected");
-                this._selectionPath.classList.remove("selected");
-            }
-        });
-    }
-
-    onClick() {
-        this._graphCanvas.globalState.onSelectionChangedObservable.notifyObservers(this);
-    }
-
-    public dispose(notify = true) {
-        this._graphCanvas.globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
-
-        if (this._path.parentElement) {
-            this._path.parentElement.removeChild(this._path);
-        }
-
-        if (this._selectionPath.parentElement) {
-            this._selectionPath.parentElement.removeChild(this._selectionPath);
-        }
-
-        if (this._nodeB) {
-            this._nodeA.links.splice(this._nodeA.links.indexOf(this), 1);
-            this._nodeB.links.splice(this._nodeB.links.indexOf(this), 1);
-            this._graphCanvas.links.splice(this._graphCanvas.links.indexOf(this), 1);
-
-            this._portA.connectionPoint.disconnectFrom(this._portB!.connectionPoint);
-        }
-
-        if (notify) {
-            this.onDisposedObservable.notifyObservers(this);
-
-            this.onDisposedObservable.clear();
-        }
-    }
-}

+ 1 - 6
guiEditor/src/graphEditor.tsx

@@ -191,12 +191,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                         this._blocks.splice(blockIndex, 1);
                     }                                  
                 }
-
-                if (this._graphCanvas.selectedLink) {
-                    this._graphCanvas.selectedLink.dispose();
-                }
-
-                
+               
 
                 this.props.globalState.onSelectionChangedObservable.notifyObservers(null);  
                 this.props.globalState.onRebuildRequiredObservable.notifyObservers();