Skip to content
Snippets Groups Projects
Commit 9d712274 authored by Adam Procter's avatar Adam Procter
Browse files

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
parent 69b5cedc
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
app/package.json
+ 4
− 4
View file @ 9d712274
......@@ -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"
}
}
app/src/components/BaseButton.vue
+ 1
− 11
View file @ 9d712274
......@@ -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>
app/src/components/ConnectionsLayer.vue 0 → 100644
+ 96
− 0
View file @ 9d712274
<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>
app/src/components/NodesLayer.vue
+ 0
− 5
View file @ 9d712274
......@@ -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
......
......
app/src/components/ScribbleLayer.vue
+ 24
− 24
View file @ 9d712274
......@@ -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
......
......
app/src/components/SvgLinks.vue
+ 3
− 1
View file @ 9d712274
......@@ -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) {
......
......
app/src/views/Home.vue
+ 5
− 7
View file @ 9d712274
......@@ -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'
......
......
app/yarn.lock
+ 13
− 9
View file @ 9d712274
......@@ -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"
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment