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 {
},
},
// this is to stop sync chasing bug
myArray: null,
created() {
//access the custom option using $options
this.$options.myArray = this.nodes_filtered
},
methods: {
editNode(e) {
var nodeid = e.target.id
......
app/src/components/NodesLayer.vue
+ 55
− 199
View file @ 15cd6111
<template>
<div ref="nodes" class="node">
<div v-for="(value, index) in configPositions" v-bind:key="index">
<div v-if="toolmode == 'move'">
<div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<div v-for="(value, index) in configPositions" v-bind:key="index">
<draggable
class="innernode"
v-if="nodeid == value.node_id && deleted == false"
: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"
v-if="nodes.node_id == value.node_id"
:w="value.width"
:h="value.height"
:x="value.x_pos"
......@@ -104,68 +21,46 @@
: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">
<div v-if="nodeid == value.node_id">
<textarea
@focus="editTrue(true)"
@blur="editTrue(false)"
autofocus
v-model="value.node_text"
@input="editNode"
:id="nodeid"
class="drag-cancel"
ref="nodetext"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
>
</textarea>
</div>
</div>
<form class="nodes">
<template v-if="nodes.read_mode == false">
<textarea
@focus="editTrue(true)"
@blur="editTrue(false)"
autofocus
v-model="nodes.node_text"
@input="editNode"
:id="nodes.node_id"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
></textarea>
<p class="info">*markdown supported &amp; autosaves</p>
</div>
<div v-if="value.read_mode == true">
</template>
<template v-else>
<p
class="read"
:id="nodeid"
:inner-html.prop="nodetext | marked"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text | marked"
></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>
<!-- <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()"
>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
> -->
<template v-if="emojis.node_id == nodes.node_id">{{
emojis.emoji_text
}}</template>
</div>
</div>
</form>
......@@ -222,18 +117,27 @@ export default {
// this.$refs.nodetext.focus()
// },
computed: mapState({
scale: (state) => state.ui.scale,
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
configConnections: (state) => state.configConnections,
configEmoji: (state) => state.configEmoji,
toolmode: (state) => state.ui.mode,
}),
computed: {
...mapState({
scale: (state) => state.ui.scale,
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
configConnections: (state) => state.configConnections,
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,
created() {
//access the custom option using $options
this.$options.myArray = this.myNodes
this.$options.myArray = this.nodes_filtered
},
methods: {
......@@ -326,46 +230,6 @@ export default {
// // 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) {
var nodeid = e.target.id
var nodetext = e.target.value
......@@ -380,23 +244,15 @@ export default {
// nothing happens
}
},
readFlag(e) {
e = this.nodeid
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
if (this.configPositions[i].node_id == this.nodeid) {
this.localreadmode = this.configPositions[i].read_mode
}
}
readFlag(e, f) {
readmode = f
readmode = !readmode
this.$store.dispatch('readFlag', { e, readmode })
if (this.localreadmode == true) {
readmode = false
this.$store.dispatch('legacyreadFlag', { e, readmode })
if (readmode == true) {
this.mode = 'Read'
} else {
readmode = true
this.$store.dispatch('legacyreadFlag', { e, readmode })
this.mode = 'Edit'
}
},
......
app/src/views/Organise.vue
+ 1
− 8
View file @ 15cd6111
......@@ -42,14 +42,7 @@
v-bind:nodetext="value.node_text"
v-bind:deleted="value.deleted"
/>
<NodesLayer
@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"
/>
<NodesLayer @edit-true="(e) => editTrue(e)" />
<TipsLayer />
<ModeCardorg />
<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