Newer
Older
<div v-if="toolmode == 'move'">
<div v-for="(value, index) in $options.positionsArray" v-bind:key="index">
<div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<draggable
class="innernode"
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"
@activated="onActivated(nodes.node_id, value.z_index)"
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
:draggable="false"
:resizable="false"
@dragging="onDrag"
@resizing="onResize"
@dragstop="onDragstop"
@resizestop="onResizestop"
:drag-cancel="'.drag-cancel'"
style="
border: 2px dashed black;
background-color: rgb(155, 194, 216);
"
:min-width="200"
:min-height="220"
>
<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 & autosaves</p>
</template>
<template v-else>
<p
:id="nodes.node_id"
:inner-html.prop="nodes.node_text | marked"
></p>
</template>
<template v-if="toolmode == 'select'">
<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>
</template>
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<template v-if="emojis.node_id == nodes.node_id">{{
emojis.emoji_text
}}</template>
</div>
</form>
</draggable>
</div>
</div>
</div>
<!-- IF NOT MOVE -->
<div v-if="toolmode != 'move'">
<div v-for="(value, index) in $options.positionsArray" v-bind:key="index">
<div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<draggable
class="innernode"
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"
@activated="onActivated(nodes.node_id, value.z_index)"
@dragging="onDrag"
@resizing="onResize"
@dragstop="onDragstop"
@resizestop="onResizestop"
:drag-cancel="'.drag-cancel'"
style="
border: 2px dashed black;
background-color: rgb(155, 194, 216);
"
:min-width="200"
:min-height="220"
>
<form class="nodes">
<template v-if="nodes.read_mode == false">
<textarea
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
@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 & autosaves</p>
</template>
<template v-else>
<p
:id="nodes.node_id"
:inner-html.prop="nodes.node_text | marked"
></p>
</template>
<template v-if="toolmode == 'select'">
<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>
</template>
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<template v-if="emojis.node_id == nodes.node_id">{{
emojis.emoji_text
}}</template>
</div>
</div>
</form>
</draggable>
</div>
import SvgButton from '@/components/SvgButton'
import SvgButton2 from '@/components/SvgButton2'
import draggable from '@/experimental/Draggable'
// FIXME: how do we know how to focus on the newest node ?
// FIXME: Tab between them would also be good
// var delay = 100
// var input
// mounted() {
// setTimeout(this.setFocus, delay)
// input = this.$refs.nodetext
// },
// method
// setFocus() {
// 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,
}),
nodes_filtered: function () {
return this.myNodes.filter((nodes) => {
return nodes.deleted == false
})
},
// this is not working correctly as dragging around moves wrong things
positions_filtered: function () {
return this.configPositions.filter((positions) => {
return this.myNodes.some((node) => {
return positions.node_id == node.node_id
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
mounted() {
const unwatch = this.$watch('nodes_filtered', (value) => {
this.$options.myArray = this.nodes_filtered
// this.$options.positionsArray = this.positions_filtered
this.$forceUpdate()
// ignore falsy values
if (!value) return
// stop watching when nodes_filtered[] is not empty
if (value && value.length) unwatch()
// process value here
})
const unwatchtwo = this.$watch('positions_filtered', (value) => {
// this.$options.myArray = this.nodes_filtered
this.$options.positionsArray = this.positions_filtered
this.$forceUpdate()
// ignore falsy values
if (!value) return
// stop watching when nodes_filtered[] is not empty
if (value && value.length) unwatchtwo()
// process value here
})
this.$options.positionsArray = this.positions_filtered
setTimeout(this.loadData, 300)
// this.$options.myArray = this.nodes_filtered
this.$store.commit('ui/setMode', 'select')
}
loadData() {
this.$options.myArray = this.nodes_filtered
this.$options.positionsArray = this.positions_filtered
this.$forceUpdate()
},
onActivated(id, zindex) {
this.zindex = zindex
this.nodeid = id
var zindexes = []
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
//console.log(Math.max(...this.configPositions[i].z_index))
zindexes.push(this.configPositions[i].z_index)
if (this.configPositions[i].node_id == this.nodeid) {
this.width = this.configPositions[i].width
this.height = this.configPositions[i].height
this.zindex = this.configPositions[i].z_index
}
// console.log(Math.max(...zindexes))
}
var topZ = Math.max(...zindexes)
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
if (this.configPositions[i].node_id == this.nodeid) {
this.width = this.configPositions[i].width
this.height = this.configPositions[i].height
if (topZ > 9999) {
this.configPositions[i].z_index = 0
} else {
this.configPositions[i].z_index = topZ + 1
}
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
if (this.configPositions[i].node_id == this.nodeid) {
this.width = this.configPositions[i].width
this.height = this.configPositions[i].height
}
}
this.width = width
this.height = height
this.$store.dispatch('movePos', {
localnodeid,
x,
y,
width,
height,
width = this.width
height = this.height
if (this.configPositions[i].node_id == this.nodeid) {
this.localx = this.configPositions[i].x_pos
this.localy = this.configPositions[i].y_pos
this.$store.dispatch('movePos', {
localnodeid,
x,
y,
width,
height,
var j
for (j = 0; j < Object.keys(this.configConnections).length; j++) {
if (this.configConnections[j].start_id == this.nodeid) {
this.$store.dispatch('updateConnect', {
localnodeid,
x,
y,
})
}
if (this.configConnections[j].end_id == this.nodeid) {
this.$store.dispatch('updateConnectTwo', {
localnodeid,
x,
y,
})
}
}
var nodeid = e.target.id
var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext })
if (confirm('Confirm discard?')) {
this.$store.dispatch('deleteFlag', { e })
this.$options.myArray = this.nodes_filtered
readFlag(e, f) {
readmode = f
readmode = !readmode
this.$store.dispatch('readFlag', { e, readmode })
this.$options.myArray = this.nodes_filtered
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.vdr {
padding: 0 0.5em;
}
box-sizing: border-box;
font-family: 'Inter var', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
outline: none;
background-color: rgb(187, 227, 255);
scrollbar-color: yellow rgb(187, 227, 255);
}
.btn-row {
position: relative;
margin-bottom: 5px;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0 15px;
border-radius: 4px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));