diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue index 6278e4da91f5d6f7f168ffa8b8c888f41579fc36..e4c3030044d2b159f27246405eefe06d201ddbfe 100644 --- a/canvas-10-feb/src/components/NodesLayer.vue +++ b/canvas-10-feb/src/components/NodesLayer.vue @@ -1,7 +1,7 @@ <template> - <div class="node" ref="nodes"> + <div ref="nodes" class="node" v-bind:id="nodeid"> <form id="editForm" class="myScroll"> - <textarea></textarea> + <textarea v-model="nodetext"></textarea> <p>markdown supported</p> <button>delete</button> </form> @@ -9,26 +9,32 @@ </template> <script> -import { mapState } from 'vuex' import { drag } from './mixins/drag.js' export default { name: 'NodesLayer', mixins: [drag], + // FIXME : these probably need to be data/ computed and not props + // as will be editable + props: { nodetext: String, nodeid: Number }, + + // data() { + // return { + // + // } + // }, mounted() { var nodes = this.$refs.nodes - this.makeDraggable(nodes) }, methods: { setFocus() { - this.$refs.notetext.focus() + this.$refs.nodetext.focus() }, editNodeText() {}, deleteFlag() {} - }, - computed: mapState({}) + } } </script> diff --git a/canvas-10-feb/src/store/index.js b/canvas-10-feb/src/store/index.js index 353e3ec6be821fcafe56cdafb8fcead198965508..75fb6f80ee0cbdb9618f89492e5c4af888bde8ff 100644 --- a/canvas-10-feb/src/store/index.js +++ b/canvas-10-feb/src/store/index.js @@ -20,7 +20,11 @@ export default new Vuex.Store({ width: 10, fill: 'black' }, - configNodes: {} + configNodes: [ + { id: 1, text: 'node 1' }, + { id: 2, text: 'node 2' }, + { id: 3, text: 'node 3' } + ] }, mutations: {}, actions: {}, diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue index 1591e6790794e199bed6570fd219abb0f16c4659..17545e0f615e60be91a8a61b74d9d84227c416d2 100644 --- a/canvas-10-feb/src/views/Home.vue +++ b/canvas-10-feb/src/views/Home.vue @@ -1,8 +1,12 @@ <template> <div class="home"> <!-- The number of NodesLayers comes from store --> - <NodesLayer /> - <NodesLayer /> + <NodesLayer + v-for="(value, index) in configNodes" + v-bind:key="index" + v-bind:nodeid="value.id" + v-bind:nodetext="value.text" + /> <CanvasLayer /> <ControlsLayer /> </div>