From 1b622510b2ec6b91fb68afaf7c0c6762c5554684 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 17 Feb 2020 17:12:22 +0000
Subject: [PATCH] adding nodes
---
canvas-10-feb/src/App.vue | 5 +-
canvas-10-feb/src/components/CanvasLayer.vue | 42 ++++++++++
.../src/components/ControlsLayer.vue | 43 ++++++++++
canvas-10-feb/src/components/HelloWorld.vue | 79 -------------------
canvas-10-feb/src/components/NodesLayer.vue | 37 +++++++++
canvas-10-feb/src/components/mixins/drag.js | 3 +
canvas-10-feb/src/views/Home.vue | 14 +++-
7 files changed, 138 insertions(+), 85 deletions(-)
create mode 100644 canvas-10-feb/src/components/CanvasLayer.vue
create mode 100644 canvas-10-feb/src/components/ControlsLayer.vue
delete mode 100644 canvas-10-feb/src/components/HelloWorld.vue
create mode 100644 canvas-10-feb/src/components/NodesLayer.vue
create mode 100644 canvas-10-feb/src/components/mixins/drag.js
diff --git a/canvas-10-feb/src/App.vue b/canvas-10-feb/src/App.vue
index 2ccc72f..9c19e5c 100644
--- a/canvas-10-feb/src/App.vue
+++ b/canvas-10-feb/src/App.vue
@@ -1,7 +1,7 @@
<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 {
diff --git a/canvas-10-feb/src/components/CanvasLayer.vue b/canvas-10-feb/src/components/CanvasLayer.vue
new file mode 100644
index 0000000..89fa957
--- /dev/null
+++ b/canvas-10-feb/src/components/CanvasLayer.vue
@@ -0,0 +1,42 @@
+<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>
diff --git a/canvas-10-feb/src/components/ControlsLayer.vue b/canvas-10-feb/src/components/ControlsLayer.vue
new file mode 100644
index 0000000..426cbb1
--- /dev/null
+++ b/canvas-10-feb/src/components/ControlsLayer.vue
@@ -0,0 +1,43 @@
+<template>
+ <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>
+</template>
+
+<script></script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.controls {
+ position: fixed;
+ z-index: 5;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 60px;
+ background-color: rgb(10, 10, 10);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ user-select: none;
+}
+
+.btn-row {
+ position: relative;
+ margin-bottom: 5px;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ padding: 0 15px;
+ border-radius: 4px;
+}
+</style>
diff --git a/canvas-10-feb/src/components/HelloWorld.vue b/canvas-10-feb/src/components/HelloWorld.vue
deleted file mode 100644
index d4a40e1..0000000
--- a/canvas-10-feb/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
- <div class="hello">
- <h1>Welcome to Vue & 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="popup" v-if="popups.showPane">
- <div class="popup-title">Pane Title</div>
- <label>
- <input type="radio" name="color" />
- </label>
- </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>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-canvas {
- border: 1px solid black;
-}
-
-.controls {
- position: fixed;
- z-index: 5;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 60px;
- background-color: rgb(10, 10, 10);
- display: flex;
- justify-content: center;
- align-items: center;
- user-select: none;
-}
-
-.btn-row {
- position: relative;
- margin-bottom: 5px;
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- padding: 0 15px;
- border-radius: 4px;
-}
-</style>
diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
new file mode 100644
index 0000000..def2422
--- /dev/null
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -0,0 +1,37 @@
+<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>
diff --git a/canvas-10-feb/src/components/mixins/drag.js b/canvas-10-feb/src/components/mixins/drag.js
new file mode 100644
index 0000000..412563c
--- /dev/null
+++ b/canvas-10-feb/src/components/mixins/drag.js
@@ -0,0 +1,3 @@
+export const drag = {
+ methods: {}
+}
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 540323e..1f2953a 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,17 +1,25 @@
<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>
--
GitLab