Firefox and Edge fixes

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

@@ -27,6 +27,10 @@ button {
   transition: all 0.3s;
 }
 
+button::-moz-focus-inner {
+  border: 0;
+}
+
 button::after,
 .hover::after {
   content: " ";

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

@@ -17,7 +17,7 @@
           xmlns:xlink="http://www.w3.org/1999/xlink"
           ref="svg"
           class="view"
-          @dragover.prevent="() => {}"
+          @dragover.prevent
           @drop="managerDrop"
           :width="width"
           :height="height">
@@ -169,7 +169,7 @@ export default {
     })
   },
   methods: {
-    funcsSizeUpdate (e, size) {
+    funcsSizeUpdate (ev, size) {
       this.funcsSize = size
     },
     panzoomReset () {
@@ -420,6 +420,7 @@ function guid () {
 svg.view {
   border:none;
   position:relative;
+  fill:transparent;
 }
 
 .split .splitter{

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

@@ -142,8 +142,8 @@ export default {
         y: this.bodyProps.y + d + (i * 2 * d)
       }
     },
-    socketPointerDown (e, socket) {
-      this.$emit('socketPointerDown', e, socket)
+    socketPointerDown (ev, socket) {
+      this.$emit('socketPointerDown', ev, socket)
     }
 
   }

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

@@ -20,7 +20,8 @@
             class="flow-funcs__src hover-anim"
             draggable="true"
             v-for="k in funcsGroup(g)"
-            @dragstart="fnDrag($event,k)"
+            @dragstart.stop="fnDrag($event,k)"
+
             :style="{'background':registry[k].style && registry[k].style.color}">
             {{ k }}
           </button>
@@ -62,7 +63,6 @@ export default {
   },
   methods: {
     fnDrag (ev, src) {
-      console.log('Dragging thing', src)
       ev.dataTransfer.setData('text/plain', src)
     }
   }

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

@@ -34,16 +34,6 @@ export default {
       moving: false
     }
   },
-  watch: {
-    value: {
-      handler () {
-        this.zoom = this.value.zoom
-        this.x = this.value.x
-        this.y = this.value.y
-      },
-      deep: true
-    }
-  },
   computed: {
     transformProps () {
       const transString = 'matrix(' + [
@@ -57,6 +47,17 @@ export default {
       }
     }
   },
+
+  watch: {
+    value: {
+      handler () {
+        this.zoom = this.value.zoom
+        this.x = this.value.x
+        this.y = this.value.y
+      },
+      deep: true
+    }
+  },
   mounted () {
     this.$el.addEventListener('wheel', this.wheel)
   },
@@ -82,13 +83,13 @@ export default {
       document.addEventListener('mousemove', drag)
       document.addEventListener('mouseup', drop)
     },
-    wheel (e) {
-      e.preventDefault()
-      let deltaY = (e.deltaY > 0) ? 1 : -1
-      deltaY *= (e.shiftKey) ? 0.01 : 0.07
+    wheel (ev) {
+      ev.preventDefault()
+      let deltaY = (ev.deltaY > 0) ? 1 : -1
+      deltaY *= (ev.shiftKey) ? 0.01 : 0.07
       const svgRect = this.$refs.transformer.getBoundingClientRect()
-      const oX = e.clientX - svgRect.left
-      const oY = e.clientY - svgRect.top
+      const oX = ev.clientX - svgRect.left
+      const oY = ev.clientY - svgRect.top
       const z = this.zoom - (deltaY * this.zoom)
 
       var curX = this.x
@@ -121,6 +122,7 @@ export default {
   fill:transparent;
 }
 .flow-pan-zoom__grid {
+  fill:transparent;
   pointer-events:none;
 }
 

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

@@ -74,10 +74,10 @@ export default {
         'test': { group: 'Text', inputs: [ '[]float32', 'string' ], output: 'string', style: {'color': '#a93'} },
         'reverse': { group: 'Text', inputs: [ 'string' ], output: 'string', style: {'color': '#a93'} },
 
-        'fetch': { group: 'json', output: 'json', style: {'color': '#99a'}},
+        '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'}},
+        'string': { group: 'Visualisation', inputs: ['string'], style: {'color': '#9a9'} },
         'lineGraph': { group: 'Visualisation', inputs: ['[]float32', '[]float32'], style: {'color': '#9a9'} }
       },
       nodeData: {nodes: [], links: []}

browser/vue-flow/src/components/shared/hx-collapsible.vue

@@ -38,7 +38,7 @@ export default {
     }
   },
   methods: {
-    toggle (e) {
+    toggle (ev) {
       this.state.active = !this.state.active
     }
   }

browser/vue-flow/src/components/shared/hx-split.vue

@@ -32,9 +32,9 @@ export default {
 
   methods: {
     startResize (ev) {
-      if (!this.resizeable || event.button !== 0) return
-      event.stopPropagation()
-      event.preventDefault()
+      if (!this.resizeable || ev.button !== 0) return
+      ev.stopPropagation()
+      ev.preventDefault()
       this.state.resizing = true
       // Grab delta
       const parentRect = this.$el.getBoundingClientRect()
@@ -42,7 +42,7 @@ export default {
       const delta = { x: ev.x - splitRect.left, y: ev.y - splitRect.top }
 
       const drag = (ev) => {
-        if (event.button !== 0) return
+        if (ev.button !== 0) return
         const h = this.dir === 'horizontal'
         var splitter = (h ? this.$el.children[1].clientWidth : this.$el.children[1].clientHeight) / 2
         var splitSize = h
@@ -51,10 +51,10 @@ export default {
 
         splitSize = Math.max(splitSize, 0)
         this.state.split = splitSize + '%'
-        this.$emit('onSplitResize', event, this.state.split)
+        this.$emit('onSplitResize', ev, this.state.split)
       }
       const drop = (ev) => {
-        if (event.button !== 0) return
+        if (ev.button !== 0) return
         this.state.resizing = false
         document.removeEventListener('mousemove', drag)
         document.removeEventListener('mouseup', drop)

browser/vue-flow/webpack.config.js

@@ -39,14 +39,14 @@ module.exports = {
         test: /\.(png|jpg|gif|svg)$/,
         loader: 'file-loader',
         options: {
-          name: '[name].[ext]?[hash]'
+          name: '[name]-[hash].[ext]'
         }
       },
       {
         test: /\.(ttf|woff)$/,
         loader: 'file-loader',
         options: {
-          name: '[name].[ext]?[hash]'
+          name: '[name]-[hash].[ext]'
         }
       }
     ]