From 9d712274393110fc028ba758f720fdad5739bd20 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 20 Aug 2020 17:43:46 +0100
Subject: [PATCH] ditched SVG moving to Pixi

I was not really getting far and as I want to use pixi anyway I am not creating the connections layer with pixi instead - so moved back some SVG code stuff and created new ConnectionsLayer in components
---
 app/package.json                        |  8 +--
 app/src/components/BaseButton.vue       | 12 +---
 app/src/components/ConnectionsLayer.vue | 96 +++++++++++++++++++++++++
 app/src/components/NodesLayer.vue       |  5 --
 app/src/components/ScribbleLayer.vue    | 48 ++++++-------
 app/src/components/SvgLinks.vue         |  4 +-
 app/src/views/Home.vue                  | 12 ++--
 app/yarn.lock                           | 22 +++---
 8 files changed, 146 insertions(+), 61 deletions(-)
 create mode 100644 app/src/components/ConnectionsLayer.vue

diff --git a/app/package.json b/app/package.json
index a8bf844..9cb069b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -12,11 +12,11 @@
     "core-js": "^3.6.5",
     "file-loader": "^6.0.0",
     "ipfs": "^0.49.0",
-    "lodash": "^4.17.19",
+    "lodash": "^4.17.20",
     "marked": "^1.1.1",
     "pixi.js": "^5.3.3",
     "pouchdb": "^7.2.2",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue-context": "^5.2.0",
     "vue-draggable-resizable": "^2.2.0",
     "vue-emoji-picker": "^1.0.1",
@@ -31,10 +31,10 @@
     "@vue/cli-service": "^4.5.3",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.0.3",
-    "eslint": "^7.6.0",
+    "eslint": "^7.7.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.2",
     "prettier": "^2.0.5",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   }
 }
diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue
index 5dd2ef0..5003a18 100644
--- a/app/src/components/BaseButton.vue
+++ b/app/src/components/BaseButton.vue
@@ -61,7 +61,7 @@ button.action {
 button:active {
   background-color: #cab6ff;
 }
-
+/* FIXME: old code  */
 button.new-link {
   position: absolute;
   top: calc(50%);
@@ -74,14 +74,4 @@ button.new-link {
   background: rgb(253, 180, 243);
   outline: none;
 }
-
-/* button.link-node {
-  position: absolute;
-  right: -6px;
-  top: calc(50% - 6px);
-  width: 12px;
-  height: 12px;
-  border-radius: 6px;
-  z-index: 2;
-} */
 </style>
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
new file mode 100644
index 0000000..146b13b
--- /dev/null
+++ b/app/src/components/ConnectionsLayer.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="connections">
+    <canvas id="pixi"></canvas>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import * as PIXI from 'pixi.js'
+export default {
+  name: 'ConnectionsLayer',
+  computed: mapState({
+    toolmode: (state) => state.ui.mode,
+  }),
+  methods: {},
+}
+
+var canvas = document.getElementById('pixi')
+
+const app = new PIXI.Application({
+  width: window.innerWidth,
+  height: window.innerHeight,
+  antialias: true,
+  transparent: true,
+  view: canvas,
+})
+
+let graphics = new PIXI.Graphics()
+graphics.x = app.renderer.width / 2
+graphics.y = app.renderer.width / 2
+app.stage.addChild(graphics)
+
+graphics.lineStyle(0)
+graphics.beginFill(0xde3249, 1)
+graphics.drawCircle(100, 250, 50)
+graphics.endFill()
+
+graphics.lineStyle(0)
+graphics.beginFill(0xde3249, 1)
+graphics.drawCircle(300, 250, 50)
+graphics.endFill()
+
+graphics.lineStyle(2, 0xffffff, 1)
+graphics.moveTo(100, 250)
+graphics.lineTo(300, 250)
+
+graphics.lineStyle(2, 0xffffff, 1)
+graphics.moveTo(0, 0)
+
+// Opt-in to interactivity
+// graphics.interactive = true
+
+// // Shows hand cursor
+// graphics.buttonMode = true
+
+// graphics
+//   .on('pointerdown', onDragStart)
+//   .on('pointerup', onDragEnd)
+//   .on('pointerupoutside', onDragEnd)
+//   .on('pointermove', onDragMove)
+
+// let lines = []
+// let initialMoveTo
+
+// function onDragStart(event) {
+//   this.dragging = true
+
+//   let mouseX = event.data.global.x
+//   let mouseY = event.data.global.y
+
+//   initialMoveTo = [mouseX, mouseY]
+
+//   let line = new PIXI.Graphics()
+//   line.lineStyle(6, 0xffffff)
+//   line.moveTo(mouseX, mouseY)
+
+//   lines = [line].concat(lines)
+
+//   app.stage.addChild(line)
+// }
+
+// function onDragEnd() {
+//   this.dragging = false
+// }
+
+// function onDragMove(event) {
+//   if (this.dragging) {
+//     let mouseX = event.data.global.x
+//     let mouseY = event.data.global.y
+//     lines[0].clear()
+//     lines[0].lineStyle(6, 0xffffff)
+//     lines[0].moveTo(initialMoveTo[0], initialMoveTo[1])
+//     lines[0].lineTo(mouseX, mouseY)
+//   }
+// }
+</script>
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index c00078a..82352eb 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -106,10 +106,6 @@
                     ref="nodetext"
                     placeholder="Idea goes here! (auto saved every keystroke)"
                   ></textarea>
-                  <BaseButton
-                    buttonClass="new-link"
-                    @click="onClickNewLink(value.node_id)"
-                  ></BaseButton>
                 </div>
               </div>
             </div>
@@ -120,7 +116,6 @@
                 :inner-html.prop="nodetext | marked"
               ></p>
 
-              <button class="new-link" @click="onClickNewLink(value.node_id)" />
               <!-- <button class="link-node" /> -->
 
               <!-- <button
diff --git a/app/src/components/ScribbleLayer.vue b/app/src/components/ScribbleLayer.vue
index 804774b..69dcc52 100644
--- a/app/src/components/ScribbleLayer.vue
+++ b/app/src/components/ScribbleLayer.vue
@@ -24,30 +24,30 @@ export default {
   },
 
   methods: {
-    // startPainting(e) {
-    //   this.painting = this.drawready
-    //   if (this.painting == true) {
-    //     // console.log(this.painting)
-    //     this.draw(e)
-    //   }
-    // },
-    // finishedPainting() {
-    //   this.painting = false
-    //   //  console.log(this.painting)
-    //   this.ctx.beginPath()
-    // },
-    // draw(e) {
-    //   if (!this.painting) return
-
-    //   this.ctx.lineWidth = 6
-    //   this.ctx.lineCap = 'round'
-
-    //   this.ctx.lineTo(e.clientX, e.clientY)
-    //   this.ctx.stroke()
-
-    //   this.ctx.beginPath()
-    //   this.ctx.moveTo(e.clientX, e.clientY)
-    // },
+    startPainting(e) {
+      this.painting = this.drawready
+      if (this.painting == true) {
+        // console.log(this.painting)
+        this.draw(e)
+      }
+    },
+    finishedPainting() {
+      this.painting = false
+      //  console.log(this.painting)
+      this.ctx.beginPath()
+    },
+    draw(e) {
+      if (!this.painting) return
+
+      this.ctx.lineWidth = 6
+      this.ctx.lineCap = 'round'
+
+      this.ctx.lineTo(e.clientX, e.clientY)
+      this.ctx.stroke()
+
+      this.ctx.beginPath()
+      this.ctx.moveTo(e.clientX, e.clientY)
+    },
 
     // touch methods
 
diff --git a/app/src/components/SvgLinks.vue b/app/src/components/SvgLinks.vue
index 5bc9e7d..e245902 100644
--- a/app/src/components/SvgLinks.vue
+++ b/app/src/components/SvgLinks.vue
@@ -6,7 +6,7 @@
   >
     <template v-for="group in groups">
       <path
-        v-on:click="(e) => onClick(curve, e)"
+        @click="(e) => onClick(curve, e)"
         v-for="curve in group.links"
         v-bind:key="curve.id"
         v-bind:d="curve.path"
@@ -46,6 +46,7 @@ import { groupBy } from '@/experimental/utils/helpers'
 const groupByFrom = groupBy('from')
 
 export default {
+  props: {},
   data() {
     return {
       getPalette,
@@ -88,6 +89,7 @@ export default {
       return r
     },
     onClick(link, e) {
+      console.log(link)
       this.onClickLink([link.id])
     },
     findNode(id) {
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 6f0da4b..0bf1799 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -28,12 +28,6 @@
 
     <div class="online" v-else>
       <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
-        <ConnectionsLayer
-          v-bind:width="width"
-          v-bind:height="height"
-          v-bind:connections="connections"
-        />
-
         <PanZoomContainer
           v-bind:width="width"
           v-bind:height="height"
@@ -76,6 +70,10 @@
             />
           </div>
           <ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
+          <ConnectionsLayer
+            v-bind:width="width"
+            v-bind:height="height"
+          ></ConnectionsLayer>
         </PanZoomContainer>
 
         <ModeToolbar
@@ -100,7 +98,7 @@
 
 <script>
 import PanZoomContainer from '@/experimental/PanZoomContainer'
-import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
+import ConnectionsLayer from '@/components/ConnectionsLayer'
 import NodesLayer from '@/components/NodesLayer'
 import OffLine from '@/components/OffLine'
 import ScribbleLayer from '@/components/ScribbleLayer'
diff --git a/app/yarn.lock b/app/yarn.lock
index ed9eb21..dfd41c3 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -4608,9 +4608,9 @@ eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
 
-eslint@^7.6.0:
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.6.0.tgz#522d67cfaea09724d96949c70e7a0550614d64d6"
+eslint@^7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.7.0.tgz#18beba51411927c4b64da0a8ceadefe4030d6073"
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"
@@ -7996,6 +7996,10 @@ lodash@^4.17.19:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
 
+lodash@^4.17.20:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+
 log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -12031,9 +12035,9 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.11:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
+vue-template-compiler@^2.6.12:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -12042,9 +12046,9 @@ vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
 
-vue@^2.6.11:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
+vue@^2.6.12:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
 
 vuex@^3.5.1:
   version "3.5.1"
-- 
GitLab