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

wip new nodes

parent e73f2d90
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/src/components/ListLayer.vue
+ 7
− 0
View file @ 15cd6111
...@@ -82,6 +82,13 @@ export default { ...@@ -82,6 +82,13 @@ export default {
}, },
}, },
// this is to stop sync chasing bug
myArray: null,
created() {
//access the custom option using $options
this.$options.myArray = this.nodes_filtered
},
methods: { methods: {
editNode(e) { editNode(e) {
var nodeid = e.target.id var nodeid = e.target.id
......
app/src/components/NodesLayer.vue
+ 55
− 199
View file @ 15cd6111
<template> <template>
<div ref="nodes" class="node"> <div ref="nodes" class="node">
<div v-for="(value, index) in configPositions" v-bind:key="index"> <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<div v-if="toolmode == 'move'"> <div v-for="(value, index) in configPositions" v-bind:key="index">
<draggable <draggable
class="innernode" class="innernode"
v-if="nodeid == value.node_id && deleted == false" v-if="nodes.node_id == value.node_id"
:w="value.width"
:h="value.height"
:x="value.x_pos"
:y="value.y_pos"
:z="value.z_index"
:scale="scale"
:draggable="false"
:resizable="false"
style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
:min-width="200"
:min-height="220"
>
<form>
<div v-if="value.read_mode == false">
<div v-for="value in $options.myArray" v-bind:key="value.node_id">
<textarea
v-if="nodeid == value.node_id"
@focus="editTrue(true)"
@blur="editTrue(false)"
v-model="value.node_text"
autofocus
@input="editNode"
:id="nodeid"
class="drag-cancel"
ref="nodetext"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
></textarea>
</div>
<p class="info">*markdown supported &amp; autosaves</p>
</div>
<div v-if="value.read_mode == true">
<p
class="read"
:id="nodeid"
:inner-html.prop="nodetext | marked"
></p>
</div>
<!-- <h3>Reactions</h3> -->
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<p v-if="nodeid == emojis.node_id">
{{ emojis.emoji_text }}
</p>
</div>
</div>
<div class="btn-row">
<!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
>Delete</BaseButton
> -->
<!-- <div v-if="value.read_mode == true">
<BaseButton
class="read"
buttonClass="action"
@click="readFlag()"
>Edit Mode
</BaseButton>
</div>
<div v-else>
<BaseButton
class="read"
buttonClass="action"
@click="readFlag()"
>Read Mode</BaseButton
>
</div> -->
</div>
</form>
</draggable>
</div>
<!-- Same code as above when in any other mode other than move so you can drag nodes-->
<div v-else>
<draggable
class="innernode"
v-if="nodeid == value.node_id && deleted == false"
:w="value.width" :w="value.width"
:h="value.height" :h="value.height"
:x="value.x_pos" :x="value.x_pos"
...@@ -104,68 +21,46 @@ ...@@ -104,68 +21,46 @@
:min-width="200" :min-width="200"
:min-height="220" :min-height="220"
> >
<form> <form class="nodes">
<div v-if="value.read_mode == false"> <template v-if="nodes.read_mode == false">
<div v-for="value in $options.myArray" v-bind:key="value.node_id"> <textarea
<div v-if="nodeid == value.node_id"> @focus="editTrue(true)"
<textarea @blur="editTrue(false)"
@focus="editTrue(true)" autofocus
@blur="editTrue(false)" v-model="nodes.node_text"
autofocus @input="editNode"
v-model="value.node_text" :id="nodes.node_id"
@input="editNode" placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
:id="nodeid" ></textarea>
class="drag-cancel"
ref="nodetext"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
>
</textarea>
</div>
</div>
<p class="info">*markdown supported &amp; autosaves</p> <p class="info">*markdown supported &amp; autosaves</p>
</div> </template>
<div v-if="value.read_mode == true"> <template v-else>
<p <p
class="read" :id="nodes.node_id"
:id="nodeid" :inner-html.prop="nodes.node_text | marked"
:inner-html.prop="nodetext | marked"
></p> ></p>
</template>
<div class="btn-row">
<SvgButton
buttonClass="nodes"
@click.prevent="deleteFlag(nodes.node_id)"
/>
<SvgButton2
buttonClass="nodes"
@click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
/>
</div> </div>
<!-- <h3>Reactions</h3> -->
<div class="allemoji"> <div class="allemoji">
<div <div
class="eachemoji" class="eachemoji"
v-for="(emojis, index) in configEmoji" v-for="(emojis, index) in configEmoji"
:key="index" :key="index"
> >
<p v-if="nodeid == emojis.node_id"> <template v-if="emojis.node_id == nodes.node_id">{{
{{ emojis.emoji_text }} emojis.emoji_text
</p> }}</template>
</div>
</div>
<div class="btn-row">
<!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
>Discard</BaseButton
> -->
<SvgButton buttonClass="nodes" @click.prevent="deleteFlag()" />
<div v-if="value.read_mode == true">
<SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
<!-- <BaseButton
class="read"
buttonClass="action"
@click="readFlag()"
>Edit Mode
</BaseButton> -->
</div>
<div v-else>
<SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
<!-- <BaseButton
class="read"
buttonClass="action"
@click="readFlag()"
>Read Mode</BaseButton
> -->
</div> </div>
</div> </div>
</form> </form>
...@@ -222,18 +117,27 @@ export default { ...@@ -222,18 +117,27 @@ export default {
// this.$refs.nodetext.focus() // this.$refs.nodetext.focus()
// }, // },
computed: mapState({ computed: {
scale: (state) => state.ui.scale, ...mapState({
myNodes: (state) => state.myNodes, scale: (state) => state.ui.scale,
configPositions: (state) => state.configPositions, myNodes: (state) => state.myNodes,
configConnections: (state) => state.configConnections, configPositions: (state) => state.configPositions,
configEmoji: (state) => state.configEmoji, configConnections: (state) => state.configConnections,
toolmode: (state) => state.ui.mode, configEmoji: (state) => state.configEmoji,
}), toolmode: (state) => state.ui.mode,
}),
nodes_filtered: function () {
return this.myNodes.filter((nodes) => {
return nodes.deleted == false
})
},
},
// this is to stop sync chasing bug
myArray: null, myArray: null,
created() { created() {
//access the custom option using $options //access the custom option using $options
this.$options.myArray = this.myNodes this.$options.myArray = this.nodes_filtered
}, },
methods: { methods: {
...@@ -326,46 +230,6 @@ export default { ...@@ -326,46 +230,6 @@ export default {
// // console.log(e) // // console.log(e)
}, },
// _.debounce(function(e) {
// this.input = e.target.value;
// }, 300)
// editNode(e) {
// const el = e.target
// const cursorPos = el.selectionStart
// console.log(cursorPos)
// var nodeid = e.target.id
// var nodetext = e.target.value
// this.$store.dispatch('editNode', { nodeid, nodetext })
// this.$nextTick(() => {
// e.target.selectionStart = e.target.selectionEnd = cursorPos
// })
// this.$nextTick(() => {
// el.setSelectionRange(cursorPos, cursorPos)
// })
//},
// editNode: lodash.debounce(function (e) {
// var nodeid = e.target.id
// var nodetext = e.target.value
// this.$store.dispatch('editNode', { nodeid, nodetext })
// }, 600),
// editNode: lodash.debounce(function (e) {
// const el = e.target
// const cursorPos = el.selectionStart
// var nodeid = e.target.id
// var nodetext = e.target.value
// this.$store.dispatch('editNode', { nodeid, nodetext })
// this.$nextTick(() => {
// el.setSelectionRange(cursorPos, cursorPos)
// })
// }, 600),
editNode(e) { editNode(e) {
var nodeid = e.target.id var nodeid = e.target.id
var nodetext = e.target.value var nodetext = e.target.value
...@@ -380,23 +244,15 @@ export default { ...@@ -380,23 +244,15 @@ export default {
// nothing happens // nothing happens
} }
}, },
readFlag(e) {
e = this.nodeid
var i readFlag(e, f) {
for (i = 0; i < Object.keys(this.configPositions).length; i++) { readmode = f
if (this.configPositions[i].node_id == this.nodeid) { readmode = !readmode
this.localreadmode = this.configPositions[i].read_mode this.$store.dispatch('readFlag', { e, readmode })
}
}
if (this.localreadmode == true) { if (readmode == true) {
readmode = false
this.$store.dispatch('legacyreadFlag', { e, readmode })
this.mode = 'Read' this.mode = 'Read'
} else { } else {
readmode = true
this.$store.dispatch('legacyreadFlag', { e, readmode })
this.mode = 'Edit' this.mode = 'Edit'
} }
}, },
......
app/src/views/Organise.vue
+ 1
− 8
View file @ 15cd6111
...@@ -42,14 +42,7 @@ ...@@ -42,14 +42,7 @@
v-bind:nodetext="value.node_text" v-bind:nodetext="value.node_text"
v-bind:deleted="value.deleted" v-bind:deleted="value.deleted"
/> />
<NodesLayer <NodesLayer @edit-true="(e) => editTrue(e)" />
@edit-true="(e) => editTrue(e)"
v-for="value in myNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
v-bind:deleted="value.deleted"
/>
<TipsLayer /> <TipsLayer />
<ModeCardorg /> <ModeCardorg />
<ConnectionsLayer /> <ConnectionsLayer />
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment