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

adding nodes

parent 0adcc7aa
No related branches found
No related tags found
No related merge requests found
<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 {
......
<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({
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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
canvas {
border: 1px solid black;
}
</style>
<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
var textarea = 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;
......
<template>
<div class="editor">
<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() {},
methods: {
setFocus() {
this.$refs.notetext.focus()
},
editNodeText() {},
deleteFlag() {}
},
computed: mapState({})
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.editor {
background-color: aquamarine;
position: absolute;
}
</style>
export const drag = {
methods: {}
}
<template>
<div class="home">
<HelloWorld />
<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'
export default {
name: 'Home',
components: {
HelloWorld
CanvasLayer,
NodesLayer,
ControlsLayer
}
}
</script>
<style scoped></style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment