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