fixed several edge drawing and port hovering issues

ICRAR · Jul 24, 2024 · afb2ebf · afb2ebf
1 parent 160b119
commit afb2ebf
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/Edge.ts b/src/Edge.ts
@@ -388,14 +388,14 @@ export class Edge {
         }
 
         // check that source is output
-        if (!sourcePort.isOutputPort()){
+        if (!sourcePort.isOutputPort() && !draggingPortMode){
             const issue: Errors.Issue = Errors.ShowFix("Source port is not output port (" + sourcePort.getUsage() + ")", function(){Utils.showEdge(eagle, edgeId);}, function(){Utils.fixFieldUsage(eagle, sourcePort, Daliuge.FieldUsage.OutputPort)}, "Add output usage to source port");
             Edge.isValidLog(edge, draggingPortMode, Errors.Validity.Impossible, issue, showNotification, showConsole, errorsWarnings);
             impossibleEdge = true;
         }
 
         // check that destination in input
-        if (!destinationPort.isInputPort()){
+        if (!destinationPort.isInputPort() && !draggingPortMode){
             const issue: Errors.Issue = Errors.ShowFix("Destination port is not input port (" + destinationPort.getUsage() + ")", function(){Utils.showEdge(eagle, edgeId);}, function(){Utils.fixFieldUsage(eagle, destinationPort, Daliuge.FieldUsage.InputPort)}, "Add input usage to destination port");
             Edge.isValidLog(edge, draggingPortMode, Errors.Validity.Impossible, issue, showNotification, showConsole, errorsWarnings);
             impossibleEdge = true;

diff --git a/src/GraphRenderer.ts b/src/GraphRenderer.ts
@@ -919,7 +919,7 @@ export class GraphRenderer {
     }, this);
 
     static getPathSuggestedEdge : ko.PureComputed<string> = ko.pureComputed(() => {
-        if (GraphRenderer.portDragSuggestedNode() === null){
+        if (GraphRenderer.portDragSuggestedNode() === null || GraphRenderer.destinationPort !== null){
             return '';
         }
 
@@ -2100,14 +2100,25 @@ export class GraphRenderer {
         return {node: minNode, field: minPort, validity: minValidity};
     }
 
-    static mouseEnterPort(port : Field) : void {
+    static mouseEnterPort(usage:string, port : Field) : void {
         if (!GraphRenderer.draggingPort){
             return;
         }
 
         const eagle = Eagle.getInstance();
         GraphRenderer.destinationPort = port;
         GraphRenderer.destinationNode = eagle.logicalGraph().findNodeByKey(port.getNodeKey());
+        console.log("hi")
+        //if the port we are dragging from and are hovering one are the same type of port return an error
+        if(usage === 'input' && GraphRenderer.portDragSourcePortIsInput || usage === 'output' && !GraphRenderer.portDragSourcePortIsInput){
+            console.log('port is: ',port.isInputPort(),port.isOutputPort())
+            if(port.isInputPort() && port.isOutputPort()){
+                GraphRenderer.isDraggingPortValid(Errors.Validity.Fixable)
+            }else{
+                GraphRenderer.isDraggingPortValid(Errors.Validity.Impossible)
+            }
+            return
+        }
 
         const isValid = Edge.isValid(eagle, true, null, GraphRenderer.portDragSourceNode().getKey(), GraphRenderer.portDragSourcePort().getId(), GraphRenderer.destinationNode.getKey(), GraphRenderer.destinationPort.getId(), false, false, false, false, {errors:[], warnings:[]});
         GraphRenderer.isDraggingPortValid(isValid);

diff --git a/templates/base.html b/templates/base.html
@@ -84,7 +84,7 @@
                             <!-- 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($parent, $data)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':$data.getBackgroundColor(),'left':GraphRenderer.calculatePortPositionX('input',$data,$parent),'top':GraphRenderer.calculatePortPositionY('input',$data,$parent)},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 class="inputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($parent, $data)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':$data.getBackgroundColor(),'left':GraphRenderer.calculatePortPositionX('input',$data,$parent),'top':GraphRenderer.calculatePortPositionY('input',$data,$parent)},graphRendererPortPosition:{n:$parent,f:$data,type:'inputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'input')}, mouseenter:function(){GraphRenderer.mouseEnterPort('input', $data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
                                             <!-- ko if: $data.getIsEvent() -->
                                                 <i class="material-icons">alarm_on</i> 
                                             <!-- /ko -->
@@ -94,7 +94,7 @@
                                         </div>
                                         <!-- /ko -->
                                     <!-- ko foreach: $data.getOutputPorts() -->
-                                        <div class="outputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($parent, $data)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'border-color':$data.getBackgroundColor(),'left':GraphRenderer.calculatePortPositionX('output',$data,$parent),'top':GraphRenderer.calculatePortPositionY('output',$data,$parent)},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 class="outputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($parent, $data)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'border-color':$data.getBackgroundColor(),'left':GraphRenderer.calculatePortPositionX('output',$data,$parent),'top':GraphRenderer.calculatePortPositionY('output',$data,$parent)},graphRendererPortPosition:{n:$parent,f:$data,type:'outputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'output')}, mouseenter:function(){GraphRenderer.mouseEnterPort('output',$data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
                                             <!-- ko if: $data.getIsEvent() -->
                                                 <i class="material-icons">alarm_on</i> 
                                             <!-- /ko -->