wip

Author: gr1m1um

README.md

@@ -90,7 +90,7 @@ Connects nodes using svg lines
 ></edge>
 ```
 
-Edges require node references `{ from: id|Object, to: String|Object }`, if nodes are refered by `id(String)` an array  `nodes` must be passed:
+Edges require node references `{ from: id|Object, to: String|Object }`, if nodes are refered by `id(String)` an array `nodes` must be passed:
 
 ```html
 <edge
@@ -141,11 +141,11 @@ Surrounds a group of nodes with a rectangle, allows dragging multiple nodes.
 
 ### Port
 
-Placed inside a node, automatically offsets edges to a determined position inside the nodes html (see Ports demo).
+Placed inside a node, automatically offsets edges to a their position inside the nodes html [Ports demo].
 
 ### Label
 
-Create a label positioned relative to an edge
+Create a label node that is positioned along an edge
 
 ```html
 <v-label :edge="graph.edges[0]" :perc="50" :offset="{x: 0, y: -50}">
@@ -156,7 +156,7 @@ Create a label positioned relative to an edge
 ### graph.js
 
 Can be used to store edges and nodes.
-Contains utility methods to build graphs, position nodes, remove and create nodes, edges and so on.
+Contains utility methods to build graphs, layouts, remove and create nodes, edges and so on.
 
 ## Styling
 

lib/svg-pan-zoom/svg-pan-zoom.js

@@ -676,8 +676,9 @@ SvgPanZoom.prototype.getPublicInstance = function() {
   // Create cache
   if (!this.publicInstance) {
     this.publicInstance = this.pi = {
+      options: this.options,
       // Pan
-      enablePan: function() {that.options.panEnabled = true; return that.pi}
+    enablePan: function() {that.options.panEnabled = true; return that.pi}
     , disablePan: function() {that.options.panEnabled = false; return that.pi}
     , isPanEnabled: function() {return !!that.options.panEnabled}
     , pan: function(point) {that.pan(point); return that.pi}

package-lock.json

@@ -162,8 +162,6 @@ export default {
         util.lineLine(x1, y1, x2, y2, box[2], box[1], box[2], box[3]), // right
         util.lineLine(x1, y1, x2, y2, box[0], box[3], box[2], box[3]) // bottom
       ].filter(i => i)
-
-
       const start = new Victor(x1, y1)
       return intersections
         .map(i => Object.assign(i, { distance: start.distance(new Victor(i.x, i.y)) }))

src/components/Edge.vue

@@ -5,12 +5,11 @@
     :y="minY - padding.top - margin"
     :width="width + (padding.left + padding.right) + margin * 2"
     :height="height + (padding.top + padding.bottom) + margin * 2"
-    @mousedown="onMousedown"
-  >
-    <div class="content" ref="content" :style="contentMargin">
-      <slot>
-      </slot>
-    </div>
+    @mousedown="onMousedown">
+      <div class="content" ref="content" :style="contentMargin">
+        <slot>
+        </slot>
+      </div>
   </foreignObject>
 </template>
 

src/components/Group.vue

@@ -24,7 +24,7 @@ export default {
   props: {
     edge: {
       type: Object,
-      required: true // { id, pathd } required
+      required: true // { id, pathd }
     },
     perc: {
       type: Number,

src/components/Label.vue

@@ -2,20 +2,20 @@
 <g>
   <g v-for="marker in all" :key="marker.id">
     <marker v-if="marker.type === 'arrow-start'"
-        :id="marker.id" orient="auto"
-        :markerWidth="13 * marker.scale"
-        :markerHeight="13 * marker.scale"
-        :refX="1 * marker.scale"
-        :refY="5 * marker.scale">
-      <path d="M0,5 L10,10 L10,0 L0,5" :style="`${marker.style};transform: scale(${marker.scale})`"/>
+      :id="marker.id" orient="auto"
+      :markerWidth="13 * marker.scale"
+      :markerHeight="13 * marker.scale"
+      :refX="1 * marker.scale"
+      :refY="5 * marker.scale">
+        <path d="M0,5 L10,10 L10,0 L0,5" :style="`${marker.style};transform: scale(${marker.scale})`"/>
     </marker>
     <marker v-if="marker.type === 'arrow-end'"
-        :id="marker.id" orient="auto"
-        :markerWidth="13 * marker.scale"
-        :markerHeight="13 * marker.scale"
-        :refX="9 * marker.scale"
-        :refY="5 * marker.scale">
-      <path d="M0,0 L0,10 L10,5 L0,0" :style="`${marker.style};transform: scale(${marker.scale})`"/>
+      :id="marker.id" orient="auto"
+      :markerWidth="13 * marker.scale"
+      :markerHeight="13 * marker.scale"
+      :refX="9 * marker.scale"
+      :refY="5 * marker.scale">
+        <path d="M0,0 L0,10 L10,5 L0,0" :style="`${marker.style};transform: scale(${marker.scale})`"/>
     </marker>
   </g>
 </g>