Merge branch 'textarea'

canvas-10-feb/src/App.vue

 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
+      <router-link to="/">Home</router-link>|
       <router-link to="/about">About</router-link>
     </div>
     <router-view />
@@ -13,8 +13,7 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+
 }
 
 #nav {

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

+<template>
+  <div class="canvas">
+    <!-- canvas element draws the connection and nodes -->
+    <canvas ref="canvas"></canvas>
+    <!-- textarea is the cards/nodes -->
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { draw } from './mixins/draw.js'
+
+var canvas = null
+
+export default {
+  name: 'CanvasLayer',
+  mixins: [draw],
+
+  computed: mapState({
+    configConnect: state => state.configConnect,
+    configHandle: state => state.configHandle
+  }),
+
+  mounted() {
+    canvas = this.$refs.canvas
+    this.ctx = canvas.getContext('2d')
+    this.draw()
+  },
+  methods: {
+    clear(ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+canvas {
+  border: 1px solid black;
+}
+</style>

canvas-10-feb/src/components/HelloWorld.vue → canvas-10-feb/src/components/ControlsLayer.vue

 <template>
-  <div class="hello">
-    <h1>Welcome to Vue &amp; Canvas testing ground</h1>
-
-    <canvas ref="canvas"></canvas>
-
-    <div class="controls">
-      <div class="btn-row">
-        <button on:click="popups.showPane = !popups.showPane">Button</button>
-      </div>
-      <!--
+  <div class="controls">
+    <div class="btn-row">
+      <button on:click="popups.showPane = !popups.showPane">Button</button>
+    </div>
+    <!--
       <div class="popup" v-if="popups.showPane">
         <div class="popup-title">Pane Title</div>
         <label>
           <input type="radio" name="color" />
         </label>
-      </div>-->
-    </div>
+    </div>-->
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-import { draw } from './mixins/draw.js'
-var canvas = null
-
-export default {
-  name: 'HelloWorld',
-  mixins: [draw],
-
-  computed: mapState({
-    configRect: state => state.configRect,
-    configHandle: state => state.configHandle
-  }),
-
-  mounted() {
-    canvas = this.$refs.canvas
-    this.ctx = canvas.getContext('2d')
-    this.draw()
-  },
-  methods: {
-    clear(ctx) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
-    }
-  }
-}
-</script>
+<script></script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-canvas {
-  border: 1px solid black;
-}
-
 .controls {
   position: fixed;
   z-index: 5;

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

+<template>
+  <div class="node" ref="nodes">
+    <form id="editForm" class="myScroll">
+      <textarea></textarea>
+      <p>markdown supported</p>
+      <button>delete</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { drag } from './mixins/drag.js'
+
+export default {
+  name: 'NodesLayer',
+  mixins: [drag],
+
+  mounted() {
+    var nodes = this.$refs.nodes
+
+    this.makeDraggable(nodes)
+  },
+  methods: {
+    setFocus() {
+      this.$refs.notetext.focus()
+    },
+    editNodeText() {},
+    deleteFlag() {}
+  },
+  computed: mapState({})
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.node {
+  background-color: aquamarine;
+  position: absolute;
+}
+</style>

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

+export const drag = {
+  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">
-    <HelloWorld />
+    <!-- The number of NodesLayers comes from store -->
+    <NodesLayer />
+    <NodesLayer />
+    <CanvasLayer />
+    <ControlsLayer />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+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: {
-    HelloWorld
-  }
+    CanvasLayer,
+    NodesLayer,
+    ControlsLayer
+  },
+  computed: mapState({
+    configNodes: state => state.configNodes
+  })
 }
 </script>
+
+<style scoped></style>