Improved visual for empty, available to connect and connected ports

epam · Apr 18, 2017 · 3b68ddd · 3b68ddd
1 parent e0c9320
commit 3b68ddd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/src/pipeline.scss b/src/pipeline.scss
@@ -18,6 +18,8 @@ $light-gray: #ccc;
 // Semantic color mapping
 $step-color: $sharp-blue;
 $port-color: $graphite;
+$port-color-empty: $dark-blue;
+$port-color-available: $lime-green;
 
 .joint-type-visualstep.selected {
   .body {
@@ -54,6 +56,16 @@ $port-color: $graphite;
     fill: $port-color;
   }
 
+  .port-body-empty {
+    stroke: $port-color-empty;
+    stroke-width: 1.5px;
+    fill: $white;
+  }
+
+  .available-magnet {
+    fill: $port-color-available;
+  }
+
   .port-body:hover {
     opacity: 1;
     fill: $step-color;

diff --git a/src/visual/Paper.js b/src/visual/Paper.js
@@ -43,12 +43,16 @@ export default class Paper extends joint.dia.Paper {
           return false;
         }
         // source
-        if (!magnetS || magnetS.getAttribute('class') !== 'port-body' ||
+        if (!magnetS || (magnetS.getAttribute('class') !== 'port-body' &&
+          magnetS.getAttribute('class') !== 'port-body-empty' &&
+          magnetS.getAttribute('class') !== 'port-body-empty available-magnet') ||
           magnetS.getAttribute('port-group') !== 'out') {
           return false;
         }
         // target
-        if (!magnetT || magnetT.getAttribute('class') !== 'port-body' ||
+        if (!magnetT || (magnetT.getAttribute('class') !== 'port-body' &&
+          magnetT.getAttribute('class') !== 'port-body-empty' &&
+          magnetT.getAttribute('class') !== 'port-body-empty available-magnet') ||
           magnetT.getAttribute('port-group') !== 'in') {
           return false;
         }
@@ -61,6 +65,7 @@ export default class Paper extends joint.dia.Paper {
 
         return !portUsed;
       },
+      markAvailable: true,
     }));
   }
 

diff --git a/src/visual/VisualStep.js b/src/visual/VisualStep.js
@@ -52,6 +52,25 @@ export default class VisualStep extends joint.shapes.devs.Model {
     this.attr('.label', {
       text: step.name,
     });
+
+    const ports = this.getPorts();
+
+    _.forEach(ports, (port) => {
+      let isEmpty = true;
+      if (port.group === 'in') {
+        isEmpty = isEmpty && (_.size(step.i[port.id].inputs) === 0 && _.size(step.i[port.id].outputs) === 0);
+      }
+
+      if (port.group === 'out') {
+        isEmpty = isEmpty && (_.size(step.o[port.id].inputs) === 0 && _.size(step.o[port.id].outputs) === 0);
+      }
+
+      const propVal = this.portProp(port.id, 'attrs/circle/class');
+      const newVal = isEmpty ? 'port-body-empty' : 'port-body';
+      if (!propVal || newVal !== propVal) {
+        this.portProp(port.id, 'attrs/circle/class', newVal);
+      }
+    });
   }
 
   /**