textareas

canvas-10-feb/src/components/CanvasLayer.vue

@@ -17,7 +17,7 @@ export default {
   mixins: [draw],
 
   computed: mapState({
-    configRect: state => state.configRect,
+    configConnect: state => state.configConnect,
     configHandle: state => state.configHandle
   }),
 

canvas-10-feb/src/components/NodesLayer.vue

 <template>
-  <div class="editor">
+  <div class="node" ref="nodes">
     <form id="editForm" class="myScroll">
       <textarea></textarea>
       <p>markdown supported</p>
@@ -16,7 +16,11 @@ export default {
   name: 'NodesLayer',
   mixins: [drag],
 
-  mounted() {},
+  mounted() {
+    var nodes = this.$refs.nodes
+
+    this.makeDraggable(nodes)
+  },
   methods: {
     setFocus() {
       this.$refs.notetext.focus()
@@ -30,7 +34,7 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.editor {
+.node {
   background-color: aquamarine;
   position: absolute;
 }

canvas-10-feb/src/components/mixins/drag.js

 export const drag = {
-  methods: {}
+  methods: {
+    makeDraggable(nodes) {
+      var active = false
+      var currentX
+      var currentY
+      var initialX
+      var initialY
+      var xOffset = 0
+      var yOffset = 0
+
+      nodes.addEventListener('mousedown', startDrag)
+      nodes.addEventListener('mousemove', drag)
+      nodes.addEventListener('mouseup', endDrag)
+      nodes.addEventListener('mouseleave', endDrag)
+      nodes.addEventListener('touchstart', startDrag)
+      nodes.addEventListener('touchmove', drag)
+      nodes.addEventListener('touchend', endDrag)
+      nodes.addEventListener('touchleave', endDrag)
+      nodes.addEventListener('touchcancel', endDrag)
+
+      function startDrag(e) {
+        if (e.type === 'touchstart') {
+          initialX = e.touches[0].clientX - xOffset
+          initialY = e.touches[0].clientY - yOffset
+        } else {
+          initialX = e.clientX - xOffset
+          initialY = e.clientY - yOffset
+        }
+        if (e.target.parentNode.classList.contains('node')) {
+          active = true
+        }
+      }
+
+      function drag(e) {
+        if (active) {
+          e.preventDefault()
+
+          if (e.type === 'touchmove') {
+            currentX = e.touches[0].clientX - initialX
+            currentY = e.touches[0].clientY - initialY
+          } else {
+            currentX = e.clientX - initialX
+            currentY = e.clientY - initialY
+          }
+
+          xOffset = currentX
+          yOffset = currentY
+
+          setTranslate(currentX, currentY, nodes)
+        }
+      }
+
+      function endDrag() {
+        initialX = currentX
+        initialY = currentY
+        active = false
+      }
+
+      function setTranslate(xPos, yPos, el) {
+        el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'
+      }
+    }
+  }
 }

canvas-10-feb/src/components/mixins/draw.js

@@ -7,12 +7,12 @@ export const draw = {
     box(ctx, x, y) {
       ctx.setTransform(1, 0, 0, 1, x, y)
 
-      ctx.fillStyle = this.configRect.fill
+      ctx.fillStyle = this.configConnect.fill
       ctx.fillRect(
-        this.configRect.x,
-        this.configRect.y,
-        this.configRect.height,
-        this.configRect.width
+        this.configConnect.x,
+        this.configConnect.y,
+        this.configConnect.height,
+        this.configConnect.width
       )
 
       ctx.fillStyle = this.configHandle.fill

canvas-10-feb/src/store/index.js

@@ -5,7 +5,8 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    configRect: {
+    // this will be objects containing arrays of all the handles / connections and nodes
+    configConnect: {
       x: -25,
       y: -25,
       height: 50,
@@ -15,10 +16,11 @@ export default new Vuex.Store({
     configHandle: {
       x: 25,
       y: 25,
-      height: 4,
-      width: 4,
+      height: 10,
+      width: 10,
       fill: 'black'
-    }
+    },
+    configNodes: {}
   },
   mutations: {},
   actions: {},

canvas-10-feb/src/views/Home.vue

 <template>
   <div class="home">
+    <!-- The number of NodesLayers comes from store -->
+    <NodesLayer />
     <NodesLayer />
     <CanvasLayer />
     <ControlsLayer />
@@ -12,13 +14,18 @@ import CanvasLayer from '@/components/CanvasLayer.vue'
 import NodesLayer from '@/components/NodesLayer.vue'
 import ControlsLayer from '@/components/ControlsLayer.vue'
 
+import { mapState } from 'vuex'
+
 export default {
   name: 'Home',
   components: {
     CanvasLayer,
     NodesLayer,
     ControlsLayer
-  }
+  },
+  computed: mapState({
+    configNodes: state => state.configNodes
+  })
 }
 </script>