Optimizations

browser/vue-flow/src/assets/style.css

@@ -1,3 +1,9 @@
+* {
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 html,
 body {
   padding: 0;
@@ -55,6 +61,11 @@ ul {
   list-style: disc;
 }
 
+small {
+  font-size: 8px;
+  color: #ccc;
+}
+
 /* Let's get this party started */
 ::-webkit-scrollbar {
   padding-top: 10px;

browser/vue-flow/src/components/flow/link.vue

@@ -34,8 +34,9 @@ export default {
         s = Math.max(curve - (lineDist - Math.sqrt(dx * dx + dy * dy)), 0)
       }
       s = Math.max(s, 2)
-      const x2 = this.x2 - 7.5
-      return `M${this.x1},${this.y1} C${this.x1 + s},${this.y1} ${x2 - s},${this.y2} ${x2},${this.y2}`
+      const x2 = this.x2 - 16
+      const x1 = this.x1 + 8
+      return `M${x1},${this.y1} C${x1 + s},${this.y1} ${x2 - s},${this.y2} ${x2},${this.y2}`
     }
   }
 }
@@ -55,7 +56,7 @@ export default {
   fill: transparent;
   marker-end:url(#head);
 }
-.flow-link:hover .flow-link__visible {
+svg:not(.activity) .flow-link:hover .flow-link__visible {
   stroke: #F00;
   filter: url(#highlight-border);
 }

browser/vue-flow/src/components/flow/manager.vue

@@ -5,7 +5,7 @@
       xmlns:xlink="http://www.w3.org/1999/xlink"
       ref="svg"
       class="view"
-      :class="{'flow-linking':linking || stickySockets}"
+      :class="{ 'flow-linking':linking || stickySockets, 'activity':dragging || pointerLink.active }"
       @dragover.prevent
       @drop="managerDrop"
       :width="width"
@@ -13,7 +13,7 @@
       <defs>
         <marker id="head" orient="auto" markerWidth="2" markerHeight="4"
                 refX="0.1" refY="2">
-          <path d="M0,0 V4 L2,2 Z"/>
+          <path d="M0,0 V4 L2,2 Z" fill="rgba(0,0,0,0.5)"/>
         </marker>
         <filter
           id="highlight-border"
@@ -26,12 +26,12 @@
           <feMorphology in="SourceGraphic" result="MORPH" operator="dilate" radius="1" />
           <feColorMatrix
             in="MORPH" result="BORDER" type="matrix"
-            values=".7 0 0 0 0, 0 .7 0 0 0, 0 0 .7 0 0, 0 0 0 1 0"/>
+            values=".4 0 0 0 0, 0 .4 0 0 0, 0 0 .4 0 0, 0 0 0 .7 0"/>
           <feColorMatrix
             result = "matrixOut"
             in = "SourceGraphic"
             type = "matrix"
-            values = ".2 0 0 0 0,  0 .2 0 0 0,  0 0 .2 0 0,  0 0 0 1 0"/>
+            values = ".7 0 0 0 0,  0 .7 0 0 0,  0 0 .7 0 0,  0 0 0 1 0"/>
           <feGaussianBlur
             result="blurOut"
             in="matrixOut"
@@ -75,17 +75,7 @@
       <flow-pan-zoom
         ref="panzoom"
         v-model="panzoom">
-        <flow-link
-          v-for="(link,i) in nodeData.links"
-          :key="i"
-          v-bind="linkProps(link)"
-          @click="linkRemove(link)"
-        />
         <!-- mouse link-->
-        <flow-link
-          v-if="pointerLink.active"
-          v-bind="pointerLink.props"
-        />
         <flow-node
           ref="nodes"
           v-for="(n,i) of nodeData.nodes"
@@ -95,11 +85,23 @@
           @nodePointerDown.prevent="nodeDragStart($event,i)"
           @socketPointerDown="socketPointerDown(n.id,...arguments)"
         />
+        <flow-link
+          v-for="(link,i) in nodeData.links"
+          :key="i"
+          v-bind="linkProps(link)"
+          @click="linkRemove(link)"
+        />
+        <flow-link
+          v-if="pointerLink.active"
+          v-bind="pointerLink.props"
+        />
+
       </flow-pan-zoom>
     </svg>
     <div class="flow-container__control">
       <button @click="$emit('funcsPanelToggle')">Panel</button>
-      <button @click="panzoomReset">Reset view</button>
+      <button @click="stickySockets=!stickySockets"> {{ stickySockets? 'Hide':'Show' }} sockets </button>
+      <button v-if="panzoom.x!=0 || panzoom.y!=0 || panzoom.zoom!=1" @click="panzoomReset">Reset view</button>
 
     </div>
     <div class="flow-container__info">
@@ -121,8 +123,7 @@ export default {
     'value': {type: Object, default: () => {}},
     'registry': {type: Object, default: () => {}},
     'width': {type: String, default: '800px'},
-    'height': {type: String, default: '600px'},
-    'stickySockets': {type: Boolean, default: false}
+    'height': {type: String, default: '600px'}
   },
   data () {
     // const cloned = JSON.parse(JSON.stringify(this.value)) // initial?
@@ -132,6 +133,7 @@ export default {
       dragging: null,
 
       linking: false,
+      stickySockets: false,
       pointerLink: {active: false, props: {}, src: {}}
     }
   },
@@ -279,9 +281,10 @@ export default {
         const targetNodeId = ev.target.getAttribute('data-nodeid')
         const targetIn = ev.target.getAttribute('data-in')
         const targetOut = ev.target.getAttribute('data-out')
+
         // Not a node or same node
         if (targetNodeId === undefined || targetNodeId === nodeId) {
-          console.error('LINK: target is not a socket/ same socket')
+          console.error('LINK: target is not a socket or is node')
           return
         }
         let link
@@ -339,7 +342,6 @@ export default {
       }
       if (ev.button !== 0) return // first button
       if (ev.shiftKey) {
-        console.log('Shifting:', tnode)
         this.socketPointerDown(tnode.id, ev, {out: 0})
         return
       }
@@ -448,25 +450,26 @@ function guid () {
 
 .flow-container__control {
   position:absolute;
-  top: 0px;
-  left: 0px;
+  top: 20px;
+  left: 20px;
   display:flex;
   justify-content: center;
   align-items: center;
+  color: #FFF;
 }
 .flow-container__control button {
   display:flex;
   justify-content: center;
   margin:0;
   padding:14px;
+  color:#333;
 }
 .flow-container__info {
   position:absolute;
   bottom:10px;
   left:10px;
   padding:2px;
-  font-size:8px;
-  color: #777;
+  font-size:9px;
 }
 .flow-container .svg.view {
   border:none;
@@ -480,17 +483,16 @@ function guid () {
   stroke:transparent !important;
 }
 .flow-linking .flow-node__socket {
-  fill: #AFAFAF !important;
-  stroke: #AFAFAF !important;
+  fill: #444 !important;
+  stroke: #444 !important;
 }
 .flow-linking .flow-node__socket:hover {
-  stroke-width:5;
 }
-.flow-linking .flow-node__socket--match {
-  stroke-width:5;
-  stroke:#2a2 !important;
-  fill:#2a2 !important;
-  filter: url(#highlight);
+.flow-linking .flow-node__socket--match,
+.flow-node__socket--match {
+  stroke:#2f2 !important;
+  fill:#2f2 !important;
+  filter: url(#highlight-border);
 }
 .flow-linking .flow-node__socket--match:hover {
   stroke:#0F0 !important;

browser/vue-flow/src/components/flow/node.vue

@@ -75,7 +75,7 @@ export default {
       }
     },
     bodyProps () {
-      const width = this.labelRect.width + 20
+      const width = this.labelRect.width + 32
       const rect = {
         x: -width / 2,
         y: -50,
@@ -94,7 +94,7 @@ export default {
         const {x, y} = this.inputPos(i)
         return {
           transform: `translate(${x} ${y})`,
-          r: 6
+          r: 5
         }
       }
     },
@@ -103,7 +103,7 @@ export default {
         const {x, y} = this.outputPos(i)
         return {
           transform: `translate(${x} ${y})`,
-          r: 6
+          r: 5
         }
       }
     }
@@ -130,14 +130,14 @@ export default {
       if (ilen === 0) return {}
       const d = this.bodyProps.height / (ilen * 2)
       return {
-        x: this.bodyProps.x,
+        x: this.bodyProps.x + 8,
         y: this.bodyProps.y + d + (i * 2 * d)
       }
     },
     outputPos (i) {
       const rect = this.bodyProps
       return {
-        x: rect.x + rect.width,
+        x: rect.x + rect.width - 8,
         y: 0
       }
     },
@@ -150,32 +150,29 @@ export default {
 </script>
 <style lang="scss">
 .flow-node {
-  cursor:move;
-}
-.flow-node:hover {
   filter: url(#highlight-border);
 }
+svg:not(.activity) .flow-node:hover .flow-node__body{
+  stroke-width:1;
+  stroke:black;
+  cursor:move;
+
+}
 .flow-node__socket {
   stroke-width:1;
   cursor:pointer;
-  transition:all .3s;
-
   fill: #AFAFAF;
   stroke: #AFAFAF;
 }
 
-.flow-node__socket:hover {
-  stroke-width:5;
+.flow-node__socket:not(.flow-node__socket--match):hover {
+  stroke-width:10;
 }
 .flow-node__socket--match {
-  stroke-width:5;
+  stroke-width:10;
   stroke:#2a2;
   fill:#2a2;
-  filter: url(#highlight);
-}
-.flow-node__socket--match:hover {
-  stroke:#0F0;
-  fill:#0F0;
+  filter: url(#highlight-border);
 }
 
 .flow-node__label {

browser/vue-flow/src/components/main.vue

@@ -11,25 +11,31 @@
           <ul>
             <li><b>Pan</b>: Drag with Mouse button</li>
             <li><b>Zoom</b>: Mouse wheel up and down to zoom in and out</li>
-            <li><b>New Node</b>: Create a node by dragging a fn into area</li>
+            <li><b>New Node</b>: Create a node by dragging a fn from left panel into area</li>
             <li><b>Remove Node</b>: Middle click in a node to remove a node</li>
             <li><b>Move Node</b>: Mouse click and drag</li>
-            <li><b>Link two nodes</b>: Drag from any slot to any compatible in another node (in green)</li>
+            <li><b>Links</b>: Press [shift] and Drag from a node/socket to a socket highlighted in green</li>
+            <li><b>Links(alternative)</b>: Toggle socket visualisation in the panel and Drag from a socket to a socket highlighted in green</li>
             <li><b>Remove Link</b>: Simple click on the link when it turns red</li>
           </ul>
 
           <h4>TODO:</h4>
           <ul>
-            <li>Data visualizer: Special nodes with display capabilities</li>
-            <li>Visualiser: Group nodes into a single box, exposing inputs and outputs</li>
-            <li>Visualiser: Implement touch</li>
+            <li>UX/UI: Undo changes</li>
+            <li>UX/UI: Selectable nodes</li>
+            <li>UX/UI: Special nodes with display capabilities (images,datatables,...)</li>
+            <li>UX/UI: Group nodes into a single box, exposing inputs and outputs</li>
+            <li>UX/UI: Implement touch</li>
+            <li>UX/UI: drop link in node to link to next compatible available input</li>
             <li>Registry: Synchronize registry with server(GET)</li>
-            <li>Collaboration: Better concurrent editing/message passing</li>
+            <li>Collaboration: Better concurrent editing/message passing (testing)</li>
             <li>Collaboration: Improve document synchronization</li>
             <li>FlowServer: Build the graph on the server and run</li>
             <li>FlowPkg: Create training mechanism</li>
             <li>FlowPkg: matrix pooling function example</li>
           </ul>
+          <br>
+          <small>&copy; Luis Figueiredo (luisf@hexasoftware.com)</small>
         </div>
 
         <!--:value="nodeData"
@@ -49,7 +55,6 @@
 
           <flow-manager
             :registry="registry"
-            :sticky-sockets="managerStickySockets"
             v-model="nodeData"
             @funcsPanelToggle="funcsActive=!funcsActive"
 
@@ -95,15 +100,14 @@ export default {
         'fetch': { group: 'json', output: 'json', style: {'color': '#99a'} },
         'jsonExtract': { group: 'json', inputs: ['json'], output: 'string', style: {'color': '#99a'} },
 
-        'string': { group: 'Visualisation', inputs: ['string'], style: {'color': '#9a9'} },
-        'lineGraph': { group: 'Visualisation', inputs: ['[]float32', '[]float32'], style: {'color': '#9a9'} }
+        'string': { group: 'Visualization', inputs: ['string'], style: {'color': '#9a9'} },
+        'lineGraph': { group: 'Visualization', inputs: ['[]float32', '[]float32'], style: {'color': '#9a9'} }
       },
 
       nodeData: {nodes: [], links: []},
       funcsSize: '250px',
       funcsActive: true,
-      funcsResizeable: false,
-      managerStickySockets: false
+      funcsResizeable: false
 
     }
   },

browser/vue-flow/src/components/panel.vue

@@ -9,11 +9,6 @@
         @click="funcsViewBlocks=!funcsViewBlocks">
         {{ funcsViewBlocks ? 'List':'Blocks' }} view
       </button>
-      <button
-        class="item"
-        @click="$emit('toggleStickySockets')">
-        Sockets
-      </button>
       <button
         class="item"
         @click="$emit('toggleResizeable')">
@@ -103,7 +98,7 @@ export default {
 }
 .flow-funcs__control .item{
   border-right: solid 1px rgba(208,208,208,0.9);
-  font-size:10px;
+  font-size:14px;
   padding:13px;
   flex:1;
   height:100%;