demos almost working

tiagolr · Dec 5, 2024 · 68b4c1d · 68b4c1d
1 parent 1d7c25b
commit 68b4c1d
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 105 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,2 +1,13 @@
+
+2.0
+  - New method of rendering nodes in a div layer instead of old foreignObject inside svg
+  - Improved ports offset calculation method
+  - Fixed ports continuous updates by using a computed property instead to trigger updates
+  - Other - default drag threshold reduced to 2
+          - simplified nodes and groups structure (less divs)
+          - removed margin from groups and nodes as its no longer needed
+          - removed node text select as this can be achieved using CSS
+          - fixed edge producing errors if assigned nodes cannot be found
+
 1.4.0
   - Fix safari issues for initial node dimensions and styles demo
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vnodes",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",

diff --git a/src/components/Group.vue b/src/components/Group.vue
@@ -1,23 +1,17 @@
 <template>
-  <foreignObject
-    class="group"
-    :x="minX - padding.left - margin"
-    :y="minY - padding.top - margin"
-    :width="width + (padding.left + padding.right) + margin * 2"
-    :height="height + (padding.top + padding.bottom) + margin * 2"
+  <div
+    class="node-group"
     @mousedown="onMousedown"
+    :style="groupStyle"
   >
-    <div ref="content" class="group-content" :style="contentMargin">
-      <slot>
-      </slot>
-    </div>
-  </foreignObject>
+    <slot>
+    </slot>
+  </div>
 </template>
 
 <script>
 /** */
 import drag from '../mixins/drag.js'
-import util from "../util";
 export default {
   mixins: [
     drag
@@ -27,10 +21,6 @@ export default {
       type: Array,
       default: () => []
     },
-    margin: {
-      type: Number,
-      default: 20
-    },
     padding: { // additional area covered by group besides nodes minxy, maxxy
       type: Object,
       default: () => ({ left: 10, right: 10, top: 10, bottom: 10 })
@@ -50,7 +40,13 @@ export default {
       width: `calc(100% - ${vm.margin * 2}px)`,
       height: `calc(100% - ${vm.margin * 2}px)`
     }),
-    position: () => util.isSafari() ? 'static': 'absolute'
+
+    groupStyle: vm => ({
+      left: `${vm.minX - vm.padding.left}px`,
+      top: `${vm.minY - vm.padding.top}px`,
+      width: `${vm.width + vm.padding.left + vm.padding.right}px`,
+      height: `${vm.height + vm.padding.top + vm.padding.bottom}px`
+    })
   },
   methods: {
     onDrag ({ x,y }) {
@@ -71,10 +67,9 @@ export default {
 </script>
 
 <style>
-.group-content {
-  width: 100%;
-  height: 100%;
-  position: v-bind('position');
+.node-group {
+  position: absolute;
+  display: inline-flex;
   border-radius: 7px;
   background-color: rgba(100, 100, 100, .25);
   display: inline-block;

diff --git a/src/components/Node.vue b/src/components/Node.vue
@@ -78,6 +78,7 @@ export default {
 <style>
 .node {
   display: inline-flex;
+  flex-direction: column;
   position: absolute;
   background-color: rgba(100, 200, 100, .9);
   border-radius: 7px;

diff --git a/src/components/Port.vue b/src/components/Port.vue
@@ -5,8 +5,6 @@
 </template>
 
 <script>
-import util from "../util";
-
 /**
  * Offsets edges to its position when placed inside a node
  */
@@ -16,22 +14,27 @@ export default {
     startOffset: Object, // {x, y}, contents center if null
     edgesFrom: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     edgesTo: {
       type: Array,
-      default: () => []
+      default: () => [],
     }
   },
   data() {
     return {
       offset: { x: 0, y: 0 },
-      position: util.isSafari() ? 'static': 'relative'
     }
   },
+  computed: {
+    // use a computed property by merging all edge ids
+    // to update position, avoids recalculations
+    edgeIds: vm => vm.edgesFrom
+      .map(e => e.id).concat(vm.edgesTo
+      .map(e => e.id)).join(' ')
+  },
   watch: {
-    edgesFrom: 'updatePosition',
-    edgesTo: 'updatePosition',
+    edgeIds: 'updatePosition'
   },
   mounted () {
     this.updatePosition()
@@ -47,16 +50,11 @@ export default {
         y: this.$el.offsetHeight / 2,
       }
       const rectPort = this.$el.getBoundingClientRect()
-      const rectNode = this.$el.closest('.screen').querySelector('edges').getBoundingClientRect()
+      const rectNode = this.$el.closest('.node').getBoundingClientRect()
       const diffx = rectPort.left - rectNode.left
       const diffy = rectPort.top - rectNode.top
 
-      const panzoom = this.$el.closest(".svg-pan-zoom_viewport")
-      if (!panzoom) {
-        console.debug('port failed to find panzoom container')
-        return
-      }
-
+      const panzoom = this.$el.closest(".screen").querySelector('.svg-pan-zoom_viewport')
       const zoom = new DOMMatrix(window.getComputedStyle(panzoom).transform).a
       this.offset.x += diffx / zoom
       this.offset.y += diffy / zoom
@@ -73,7 +71,4 @@ export default {
 </script>
 
 <style>
-.port {
-  position: v-bind("position");
-}
 </style>
diff --git a/src/components/Screen.vue b/src/components/Screen.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="screen">
     <svg ref="edges" class="edges">
-      <slot>
+      <slot name="edges">
       </slot>
     </svg>
     <div class="nodes" ref="nodes" style="overflow: hidden">

diff --git a/src/demo/Benchmark.vue b/src/demo/Benchmark.vue
@@ -2,10 +2,14 @@
   <div class="demo" id="benchmark-demo">
     <div class="viewport">
       <screen ref="screen">
-        <edge v-for="edge in graph.edges" :data="edge" :nodes="graph.nodes" :key="edge.id">
-        </edge>
-        <node :data="node" ref="node" v-for="node in graph.nodes" :key="node.id">
-        </node>
+        <template #edges>
+          <edge v-for="edge in graph.edges" :data="edge" :nodes="graph.nodes" :key="edge.id">
+          </edge>
+        </template>
+        <template #nodes>
+          <node :data="node" ref="node" v-for="node in graph.nodes" :key="node.id">
+          </node>
+        </template>
       </screen>
     </div>
     <div class="sidebar">
@@ -73,12 +77,12 @@ export default {
 </script>
 
 <style>
-#benchmark-demo .node .content {
+#benchmark-demo .node {
   /* background-color #14c56a */
   background-color: #47696e;
   color: white;
 }
-#benchmark-demo .node:hover .content {
+#benchmark-demo .node:hover {
   background-color: red;
 }
 #benchmark-demo .edge {

diff --git a/src/demo/Demo.vue b/src/demo/Demo.vue
@@ -13,7 +13,7 @@
     </edit> -->
 
     <h2>Ports <a href="https://github.com/txlabs/vnodes/blob/master/src/demo/Ports.vue" target="_blank">&lt;/&gt;</a></h2>
-    <ports v-if="false">
+    <ports>
     </ports>
 
     <!-- <h2>Groups <a href="https://github.com/txlabs/vnodes/blob/master/src/demo/Groups.vue" target="_blank">&lt;/&gt;</a></h2>
@@ -25,15 +25,15 @@
     </labels>
 
     <h2>Styles <a href="https://github.com/txlabs/vnodes/blob/master/src/demo/Styles.vue" target="_blank">&lt;/&gt;</a></h2>
-    <styles v-if="false">
+    <styles>
     </styles>
 
     <h2>Markers <a href="https://github.com/txlabs/vnodes/blob/master/src/demo/Markers.vue" target="_blank">&lt;/&gt;</a></h2>
     <markers v-if="false">
     </markers>
 
     <h2>Benchpress <a href="https://github.com/txlabs/vnodes/blob/master/src/demo/Benchmark.vue" target="_blank">&lt;/&gt;</a></h2>
-    <benchpress v-if="false">
+    <benchpress>
     </benchpress>
   </div>
 </template>

diff --git a/src/demo/Ports.vue b/src/demo/Ports.vue
@@ -2,44 +2,48 @@
   <div class="demo" id="ports-demo">
     <div class="viewport">
       <screen ref="screen">
-        <edge v-for="edge in graph.edges"
-          :data="edge"
-          :nodes="graph.nodes"
-          :key="edge.id"
-        ></edge>
-        <node :data="node" ref="node" v-for="node in graph.nodes" :key="node.id">
-          <div class="node-header"><strong>{{ node.id }}</strong></div>
-          <table>
-            <td style="border-bottom: none">
-              <tr v-for="input in node.inputs" :key="node.id+':'+input">
+        <template #edges>
+          <edge v-for="edge in graph.edges"
+            :data="edge"
+            :nodes="graph.nodes"
+            :key="edge.id"
+          ></edge>
+        </template>
+        <template #nodes>
+          <node :data="node" ref="node" v-for="node in graph.nodes" :key="node.id">
+            <div class="node-header"><strong>{{ node.id }}</strong></div>
+            <table>
+              <td style="border-bottom: none">
+                <tr v-for="input in node.inputs" :key="node.id+':'+input">
+                    <port ref="port"
+                      :id="node.id+':'+input"
+                      :edgesTo="getInputEdges(node, input)">
+                        <div class="port-inner"
+                          @mousedown.prevent.stop="evt => startConnect(node, { input }, evt)"
+                          @mouseup.prevent.stop="createConnect(node, { input })"
+                          :class="getInputEdges(node, input).length && 'connected'">
+                        </div>
+                    </port>
+                  {{ input.slice(1) }}
+                </tr>
+              </td>
+              <td style="border-bottom: none">
+                <tr v-for="output in node.outputs" :key="node.id+':'+output">
+                  {{ output.slice(1) }}
                   <port ref="port"
-                    :id="node.id+':'+input"
-                    :edgesTo="getInputEdges(node, input)">
+                    :id="node.id+':'+output"
+                    :edgesFrom="getOutputEdges(node, output)">
                       <div class="port-inner"
-                        @mousedown.prevent.stop="evt => startConnect(node, { input }, evt)"
-                        @mouseup.prevent.stop="createConnect(node, { input })"
-                        :class="getInputEdges(node, input).length && 'connected'">
+                        @mousedown.prevent.stop="evt => startConnect(node, { output }, evt)"
+                        @mouseup.prevent.stop="createConnect(node, { output })"
+                        :class="getOutputEdges(node, output).length && 'connected'">
                       </div>
                   </port>
-                {{ input.slice(1) }}
-              </tr>
-            </td>
-            <td style="border-bottom: none">
-              <tr v-for="output in node.outputs" :key="node.id+':'+output">
-                {{ output.slice(1) }}
-                <port ref="port"
-                  :id="node.id+':'+output"
-                  :edgesFrom="getOutputEdges(node, output)">
-                    <div class="port-inner"
-                      @mousedown.prevent.stop="evt => startConnect(node, { output }, evt)"
-                      @mouseup.prevent.stop="createConnect(node, { output })"
-                      :class="getOutputEdges(node, output).length && 'connected'">
-                    </div>
-                </port>
-              </tr>
-            </td>
-          </table>
-        </node>
+                </tr>
+              </td>
+            </table>
+          </node>
+        </template>
       </screen>
     </div>
     <div class="sidebar">
@@ -53,7 +57,6 @@ import Node from '../components/Node.vue'
 import Edge from '../components/Edge.vue'
 import Port from '../components/Port.vue'
 import graph from '../graph'
-import util from '../util'
 export default {
   components: {
     Screen,
@@ -212,9 +215,6 @@ export default {
     })
 
     await this.$nextTick()
-    if (util.isSafari()) {
-      await this.$nextTick() // await two ticks, in safari nodes take two ticks before updating their size, fixes render issues
-    }
     this.graph.graphNodes({ spacing: 75 })
     this.$refs.screen.zoomNodes(this.graph.nodes, { zoom: 1 })
     document.addEventListener('mouseup', this.cancelConnect)
@@ -255,7 +255,7 @@ export default {
 </style>
 
 <style>
-#ports-demo .node .content {
+#ports-demo .node {
   background-color: #eee;
   box-shadow: 2px 2px 2px 2px rgb(100, 100, 100, .5);
   /* outline: 2px solid #555; */

diff --git a/src/demo/PortsPort.vue b/src/demo/PortsPort.vue
diff --git a/src/demo/Sink.vue b/src/demo/Sink.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="demo demo-sink">
     <div class="viewport">
-      <screen ref="screen" :markers="[]">
-        <group v-if="groupNodes" :nodes="$refs.sidebar.filterNodes || graph.nodes">
-        </group>
-
-        <edge v-for="edge in graph.edges" :data="edge" :nodes="graph.nodes" :key="edge.id">
-        </edge>
-
+      <screen ref="screen">
+        <template #edges>
+          <edge v-for="edge in graph.edges" :data="edge" :nodes="graph.nodes" :key="edge.id">
+          </edge>
+        </template>
         <template #nodes>
+          <group v-if="groupNodes" :nodes="$refs.sidebar.filterNodes || graph.nodes">
+          </group>
           <node v-for="node in graph.nodes" :data="node" :key="node.id" :drag-threshold="2">
           </node>
         </template>