bug fixes and added tips node

app/src/components/ConnectionsLayer.vue

@@ -7,6 +7,7 @@
 <script>
 import { mapState } from 'vuex'
 import * as PIXI from 'pixi.js'
+//var initialMoveTo
 
 export default {
   name: 'ConnectionsLayer',
@@ -30,8 +31,20 @@ export default {
       this.canvas = this.$refs.pixi
       const stage = this.PIXIApp.stage
       let graphics = new PIXI.Graphics()
+      //let line = new PIXI.Graphics()
+
       graphics.lineStyle(8, 0xcab6ff)
 
+      // FIXME: removes connections probably need to be own function
+      // for (i = 0; i < Object.keys(this.configConnections).length; i++) {
+      //   // static circle - needs to be same place as buttons
+      //   graphics.lineStyle(0)
+      //   graphics.beginFill(0xde3249, 1)
+      //   graphics.drawCircle(100, 250, 50)
+      //   graphics.endFill()
+      //   stage.addChild(graphics)
+      // }
+
       for (i = 0; i < Object.keys(this.configConnections).length; i++) {
         //start
         graphics.moveTo(
@@ -47,8 +60,78 @@ export default {
       for (var j = stage.children.length - 1; j >= 0; j--) {
         stage.removeChild(stage.children[j])
       }
+
       stage.addChild(graphics)
     },
+
+    //FIXME : this is a sketch of the final code for connection buttons
+    // Eventually can move this all from nodes layers as well (which make sense)
+    connectingDraw() {
+      var i
+      this.canvas = this.$refs.pixi
+      const stage = this.PIXIApp.stage
+      let circle = new PIXI.Graphics()
+      let line = new PIXI.Graphics()
+
+      circle.lineStyle(8, 0xcab6ff)
+
+      for (i = 0; i < Object.keys(this.configConnections).length; i++) {
+        // static circle - needs to be same place as buttons
+        circle.lineStyle(0)
+        circle.beginFill(0xde3249, 1)
+        circle.drawCircle(100, 250, 50)
+        circle.endFill()
+        stage.addChild(circle)
+      }
+
+      // connection on move
+      var initialMoveTo
+      // Opt-in to interactivity
+      circle.interactive = true
+
+      // Shows hand cursor
+      circle.buttonMode = true
+
+      circle
+        .on('pointerdown', onDragStart)
+        .on('pointerup', onDragEnd)
+        .on('pointerupoutside', onDragEnd)
+        .on('pointermove', onDragMove)
+
+      let lines = []
+
+      function onDragStart(event) {
+        this.dragging = true
+
+        let mouseX = event.data.global.x
+        let mouseY = event.data.global.y
+
+        initialMoveTo = [mouseX, mouseY]
+
+        line.lineStyle(8, 0xcab6ff)
+        line.moveTo(mouseX, mouseY)
+
+        lines = [line].concat(lines)
+
+        stage.addChild(line)
+      }
+
+      function onDragEnd() {
+        this.dragging = false
+        stage.removeChild(line)
+      }
+
+      function onDragMove(event) {
+        if (this.dragging) {
+          let mouseX = event.data.global.x
+          let mouseY = event.data.global.y
+          lines[0].clear()
+          lines[0].lineStyle(8, 0xcab6ff)
+          lines[0].moveTo(initialMoveTo[0], initialMoveTo[1])
+          lines[0].lineTo(mouseX, mouseY)
+        }
+      }
+    },
   },
   mounted() {
     const canvas = this.$refs.pixi
@@ -60,6 +143,7 @@ export default {
       view: canvas,
     })
     this.drawPixi()
+    this.connectingDraw()
   },
 }
 </script>

app/src/components/OnBoard.vue

@@ -8,6 +8,7 @@
       :y="15"
       :z="1"
       :draggable="true"
+      :resizable="false"
       style="background-color: #6fcf97;"
     >
       <form>
@@ -47,6 +48,7 @@
       :y="15"
       :z="1"
       :draggable="true"
+      :resizable="false"
       style="background-color: #6fcf97;"
     >
       <form>

app/src/components/OtherNodeslayer.vue

@@ -26,6 +26,7 @@
           <div v-for="(emojis, index) in configEmoji" :key="index">
             <p class="allemoji" v-if="nodeid == emojis.node_id">
               {{ emojis.emoji_text }}
+              MOVE MODE
             </p>
           </div>
           <div class="react" v-if="nodeid != undefined">
@@ -99,7 +100,7 @@
         </vue-draggable-resizable>
       </div>
 
-      <div v-if="toolmode == 'connect'">
+      <div v-else-if="toolmode == 'connect'">
         <!-- make draggable false as we are panning around -->
         <vue-draggable-resizable
           v-if="nodeid == value.node_id"

app/src/components/TipsLayer.vue

+<template>
+  <div ref="nodes" class="node">
+    <vue-draggable-resizable
+      class="innernode"
+      :w="250"
+      :h="225"
+      :x="205"
+      :y="15"
+      :z="1"
+      :draggable="true"
+      :resizable="false"
+      style="background-color: #6fcf97;"
+    >
+      <div>
+        <p id="nodeid" :inner-html.prop="nodetext | marked"></p>
+
+        <div class="btn-row">
+          <BaseButton buttonClass="danger" @click="deleteFlag()"
+            >Hide</BaseButton
+          >
+        </div>
+      </div>
+    </vue-draggable-resizable>
+  </div>
+</template>
+
+<script>
+import marked from 'marked'
+
+export default {
+  data: function () {
+    return {
+      nodetext:
+        '## Shortcuts 🐢 -> 🐰 \n **n** to create new nodes. </br> **c** create connections </br> **a** or **s** select mode. </br> **m** move mode',
+    }
+  },
+
+  mounted() {},
+  filters: {
+    marked: marked,
+  },
+
+  methods: {},
+}
+</script>
+
+<style lang="css" scoped>
+.start {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+.vdr {
+  padding: 0 0.5em;
+}
+
+.content {
+  overflow: hidden;
+  max-height: 100%;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0px;
+}
+
+h2 {
+  float: right;
+  font-size: 3em;
+}
+
+h3 {
+  font-size: 3em;
+  margin-top: 0.5em;
+}
+
+.btn-row {
+  margin-bottom: 5px;
+  padding: 0px 0px 15px 10px;
+  border-radius: 4px;
+}
+
+input {
+  font-size: 1em;
+  padding: 10px;
+  /* margin-left: 20px; */
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-style: dotted;
+}
+</style>

app/src/experimental/PanZoomContainer.vue

@@ -25,6 +25,7 @@
       <!-- {{ JSON.stringify(interaction) }} -->
       <!-- view paramaters not being utilised ? -->
       <!-- {{ mode }} -->
+    
       <slot />
     </div>
   </div>
@@ -57,7 +58,7 @@
 import { mapState } from 'vuex'
 import { constrainTranslation } from '@/experimental/utils/numbers'
 import {
- // getNormalisedInteraction,
+  // getNormalisedInteraction,
   changeViewFromWheelEvent,
   changeViewFromMultiTouchEvent,
 } from '@/experimental/utils/view'

app/src/views/Home.vue

@@ -48,6 +48,7 @@
               v-bind:nodeid="value.node_id"
               v-bind:nodetext="value.node_text"
             />
+            <TipsLayer />
             <ConnectionsLayer />
           </div>
 
@@ -103,6 +104,7 @@ import ScribbleLayer from '@/components/ScribbleLayer'
 import UploadLayer from '@/components/UploadLayer'
 import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
 import OnBoard from '@/components/OnBoard.vue'
+import TipsLayer from '@/components/TipsLayer.vue'
 import ModeToolbar from '@/experimental/ModeToolbar'
 import ViewToolbar from '@/experimental/ViewToolbar'
 // import SelectionLayer from '@/experimental/layers/SelectionLayer'
@@ -224,6 +226,7 @@ export default {
     OffLine,
     UploadLayer,
     ScribbleLayer,
+    TipsLayer,
   },
 }
 </script>