Start of work on ideal vs actual port angles

ICRAR · Jan 19, 2024 · 2bb7ce1 · 2bb7ce1
1 parent 0e7ee3c
commit 2bb7ce1
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 18 deletions.
diff --git a/src/Field.ts b/src/Field.ts
@@ -23,13 +23,18 @@ export class Field {
     private isEvent : ko.Observable<boolean>;
     private nodeKey : ko.Observable<number>;
 
-    //graph related things
+    // graph related attributes
     private inputX : number;
     private inputY : number;
     private outputX : number;
     private outputY : number;
     private peek : ko.Observable<boolean>;
 
+    private idealInputAngle : number;
+    private actualInputAngle: ko.Observable<number>;
+    private idealOutputAngle : number;
+    private actualOutputAngle: ko.Observable<number>;
+
     constructor(id: string, displayText: string, value: string, defaultValue: string, description: string, readonly: boolean, type: string, precious: boolean, options: string[], positional: boolean, parameterType: Daliuge.FieldType, usage: Daliuge.FieldUsage, keyAttribute: boolean){
         this.displayText = ko.observable(displayText);
         this.value = ko.observable(value);
@@ -54,6 +59,11 @@ export class Field {
         this.outputX = 0;
         this.outputY = 0;
         this.peek = ko.observable(false);
+
+        this.idealInputAngle = 0;
+        this.actualInputAngle = ko.observable(0);
+        this.idealOutputAngle = 0;
+        this.actualOutputAngle = ko.observable(0);
     }
 
     getId = () : string => {
@@ -292,6 +302,48 @@ export class Field {
         this.nodeKey(key);
     }
 
+    setIdealAngle = (angle: number, dataType: string): void => {
+        switch (dataType){
+            case "inputPort":
+                this.setIdealInputAngle(angle);
+                break;
+            case "outputPort":
+                this.setIdealOutputAngle(angle);
+                break;
+            default:
+                this.setIdealInputAngle(angle);
+                this.setIdealOutputAngle(angle);
+                break;
+        }
+    }
+
+    getIdealAngle = (dataType: string): number => {
+        switch (dataType){
+            case "inputPort":
+                return this.getIdealInputAngle();
+            case "outputPort":
+                return this.getIdealOutputAngle();
+            default:
+                return this.getIdealInputAngle();
+        }
+    }
+
+    setIdealInputAngle = (angle: number): void => {
+        this.idealInputAngle = angle;
+    }
+
+    getIdealInputAngle = (): number => {
+        return this.idealInputAngle;
+    }
+
+    setIdealOutputAngle = (angle: number): void => {
+        this.idealOutputAngle = angle;
+    }
+
+    getIdealOutputAngle = (): number => {
+        return this.idealOutputAngle;
+    }
+
     clear = () : void => {
         this.displayText("");
         this.value("");

diff --git a/src/GraphRenderer.ts b/src/GraphRenderer.ts
@@ -88,7 +88,8 @@ ko.bindingHandlers.graphRendererPortPosition = {
     update: function (element:any, valueAccessor) {
         //the update function is called initially and then whenever a change to a utilised observable occurs
         const eagle : Eagle = Eagle.getInstance();
-        const data = ko.utils.unwrapObservable(valueAccessor()).data;
+        const n: Node = ko.utils.unwrapObservable(valueAccessor()).n;
+        const f: Field = ko.utils.unwrapObservable(valueAccessor()).f;
         const dataType: string = ko.utils.unwrapObservable(valueAccessor()).type;
         const portOnEmbeddedApp = false //used to identify when we are calculating the port position for a port on an embedded application
 
@@ -99,29 +100,29 @@ ko.bindingHandlers.graphRendererPortPosition = {
         switch(dataType){
             case 'inputApp':
                 // console.log(data.getName(), 'is input app')
-                node = eagle.logicalGraph().findNodeByKeyQuiet(data.getEmbedKey())
-                for(const port of data.getFields()){
+                node = eagle.logicalGraph().findNodeByKeyQuiet(n.getEmbedKey())
+                for(const port of n.getFields()){
                     if (port.isInputPort()){
                         field = port
                     }
                 }
                 break;
             case 'outputApp':
                 // console.log(data.getName(), 'is output app')
-                node = eagle.logicalGraph().findNodeByKeyQuiet(data.getEmbedKey())
-                for(const port of data.getFields()){
+                node = eagle.logicalGraph().findNodeByKeyQuiet(n.getEmbedKey())
+                for(const port of n.getFields()){
                     if (port.isOutputPort()){
                         field = port
                     }
                 }
                 break;
             case 'inputPort':
             case 'outputPort':
-                node = eagle.logicalGraph().findNodeByKeyQuiet(data.getNodeKey())
-                field = data
+                node = eagle.logicalGraph().findNodeByKeyQuiet(f.getNodeKey())
+                field = f
                 break;
             case 'comment':
-                node = data
+                node = f
                 field = null
                 break;
         }
@@ -135,10 +136,10 @@ ko.bindingHandlers.graphRendererPortPosition = {
 
         switch(dataType){
             case 'comment':
-                const adjacentNode: Node = eagle.logicalGraph().findNodeByKeyQuiet(data.getSubjectKey());
+                const adjacentNode: Node = eagle.logicalGraph().findNodeByKeyQuiet(n.getSubjectKey());
 
                 if (adjacentNode === null){
-                    console.warn("Could not find adjacentNode for comment with subjectKey", data.getSubjectKey());
+                    console.warn("Could not find adjacentNode for comment with subjectKey", n.getSubjectKey());
                     return;
                 }
 
@@ -174,7 +175,7 @@ ko.bindingHandlers.graphRendererPortPosition = {
         let nodeRadius = node.getRadius()
         if(portOnEmbeddedApp){
             // if we are working with ports of an embedded app, we need to use the parent construct to calculate the angle, but we want to use the radius of the embedded app to place the port
-            nodeRadius = eagle.logicalGraph().findNodeByKeyQuiet(data.getNodeKey()).getRadius()
+            nodeRadius = eagle.logicalGraph().findNodeByKeyQuiet(f.getNodeKey()).getRadius()
         }
 
         // determine port position
@@ -234,7 +235,7 @@ ko.bindingHandlers.graphRendererPortPosition = {
         if (dataType === 'inputApp' || dataType === 'outputApp'){
             //we are saving the embedded application's position data here using the offset we calculated
             const newPos = {x: node.getPosition().x-nodeRadius+portPosition.x, y:node.getPosition().y-nodeRadius+portPosition.y}
-            data.setPosition(newPos.x,newPos.y)
+            n.setPosition(newPos.x,newPos.y)
             portPosition = {x:portPosition.x-nodeRadius,y:portPosition.y-nodeRadius}
             x = portPosition.x
             y = portPosition.y

diff --git a/templates/base.html b/templates/base.html
@@ -85,14 +85,14 @@
                             <!-- ko foreach: $root.logicalGraph().getAllNodes() -->
                                 <div data-bind="class:$data.getId()">
                                     <!-- ko foreach: $data.getInputPorts() -->
-                                        <div class="inputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($data,$parent)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':GraphConfig.getColor('nodeInputPort')},graphRendererPortPosition:{data:$data,type:'inputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'input')}, mouseenter:function(){GraphRenderer.mouseEnterPort($data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
+                                        <div class="inputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($data,$parent)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':GraphConfig.getColor('nodeInputPort')},graphRendererPortPosition:{n:$parent,f:$data,type:'inputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'input')}, mouseenter:function(){GraphRenderer.mouseEnterPort($data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
                                             <div>
                                                 <div class="portTitle" data-bind="text:$data.displayText()"></div>
                                             </div>
                                         </div>
                                         <!-- /ko -->
                                     <!-- ko foreach: $data.getOutputPorts() -->
-                                        <div class="outputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($data,$parent)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':GraphConfig.getColor('nodeOutputPort')},graphRendererPortPosition:{data:$data,type:'outputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'output')}, mouseenter:function(){GraphRenderer.mouseEnterPort($data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
+                                        <div class="outputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($data,$parent)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':GraphConfig.getColor('nodeOutputPort')},graphRendererPortPosition:{n:$parent,f:$data,type:'outputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'output')}, mouseenter:function(){GraphRenderer.mouseEnterPort($data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
                                             <div>
                                                 <div class="portTitle" data-bind="text:$data.displayText()"></div>
                                             </div>

diff --git a/templates/comment_node.html b/templates/comment_node.html
@@ -6,7 +6,7 @@
 
         <div class="body"  data-bind="eagleRightClick: {data:$data,type:'rightClick_graphNode'}, event: {mousedown: function(object,event){GraphRenderer.startDrag(object,event);}, mouseup: function(){GraphRenderer.endDrag($data);}}, mousedownBubble: false, mouseupBubble: false">
             <span data-bind="class: $data.getIcon(), style:{'color':$data.color}"></span>
-            <div class="connectingPort port" data-bind="style:{'background-color':GraphConfig.getColor('nodeUtilPort')},graphRendererPortPosition:{data:$data,type:'comment'}"></div>
+            <div class="connectingPort port" data-bind="style:{'background-color':GraphConfig.getColor('nodeUtilPort')},graphRendererPortPosition:{n:null,f:$data,type:'comment'}"></div>
         </div>
     </div>
 </div>
diff --git a/templates/construct_node.html b/templates/construct_node.html
@@ -10,12 +10,12 @@
     </div>
 
     <!-- ko with: $data.getInputApplication() -->
-        <div class="constructInputApp" data-bind="graphRendererPortPosition:{data:$data,type:'inputApp'},nodeRenderHandler:$data">
+        <div class="constructInputApp" data-bind="graphRendererPortPosition:{n:$data,f:null,type:'inputApp'},nodeRenderHandler:$data">
             {% include 'basic_node.html' %}
         </div>
     <!-- /ko -->
     <!-- ko with: $data.getOutputApplication() -->
-        <div class="constructOutputApp" data-bind="graphRendererPortPosition:{data:$data,type:'outputApp'}, nodeRenderHandler:$data">
+        <div class="constructOutputApp" data-bind="graphRendererPortPosition:{n:$data,f:null,type:'outputApp'}, nodeRenderHandler:$data">
             {% include 'basic_node.html' %}
         </div>
     <!-- /ko -->