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

edited so move doesn't drag nodes 

doubles the code though ( as you cant just wrap around part of the draggable component
parent 1aa25fea
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
CHANGELOG.md
+ 9
− 0
View file @ 5ea9750c
# 0.1.38
_5th December 2020_
### Changed
- read mode is now attached to each node instead of positions.
- node text and positioning is now using a computed filter - so the iterating should be less CPU intensive.
# 0.1.37 # 0.1.37
_30th November 2020_ _30th November 2020_
......
app/package.json
+ 1
− 1
View file @ 5ea9750c
{ {
"name": "nodenogg.in", "name": "nodenogg.in",
"version": "0.1.37", "version": "0.1.38",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
......
app/src/components/NodesLayer.vue
+ 155
− 67
View file @ 5ea9750c
<template> <template>
<div ref="nodes" class="node"> <div ref="nodes" class="node">
<div v-for="(value, index) in positions_filtered" v-bind:key="index"> <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"> <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<draggable <draggable
class="innernode" class="innernode"
v-if="nodes.node_id == value.node_id"
:w="value.width" :w="value.width"
:h="value.height" :h="value.height"
:x="value.x_pos" :x="value.x_pos"
...@@ -11,12 +13,17 @@ ...@@ -11,12 +13,17 @@
:z="value.z_index" :z="value.z_index"
:scale="scale" :scale="scale"
@activated="onActivated(nodes.node_id)" @activated="onActivated(nodes.node_id)"
:draggable="false"
:resizable="false"
@dragging="onDrag" @dragging="onDrag"
@resizing="onResize" @resizing="onResize"
@dragstop="onDragstop" @dragstop="onDragstop"
@resizestop="onResizestop" @resizestop="onResizestop"
:drag-cancel="'.drag-cancel'" :drag-cancel="'.drag-cancel'"
style="border: 2px dashed black; background-color: rgb(155, 194, 216)" style="
border: 2px dashed black;
background-color: rgb(155, 194, 216);
"
:min-width="200" :min-width="200"
:min-height="220" :min-height="220"
> >
...@@ -39,7 +46,7 @@ ...@@ -39,7 +46,7 @@
:inner-html.prop="nodes.node_text | marked" :inner-html.prop="nodes.node_text | marked"
></p> ></p>
</template> </template>
<!-- // v-if == 'select' --> <template v-if="toolmode == 'select'">
<div class="btn-row"> <div class="btn-row">
<SvgButton <SvgButton
buttonClass="nodes" buttonClass="nodes"
...@@ -50,7 +57,84 @@ ...@@ -50,7 +57,84 @@
@click.prevent="readFlag(nodes.node_id, nodes.read_mode)" @click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
/> />
</div> </div>
<!-- // v-else // empty 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>
</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)"
@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 &amp; 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="allemoji">
<div <div
class="eachemoji" class="eachemoji"
...@@ -67,6 +151,7 @@ ...@@ -67,6 +151,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -124,24 +209,28 @@ export default { ...@@ -124,24 +209,28 @@ export default {
return nodes.deleted == false return nodes.deleted == false
}) })
}, },
// this is not working correctly as dragging around moves wrong things
positions_filtered: function () { positions_filtered: function () {
return this.configPositions.filter((positions) => { return this.configPositions.filter((positions) => {
return this.myNodes.find((node) => { return this.myNodes.some((node) => {
return !node.deleted && positions.node_id == node.node_id return positions.node_id == node.node_id
}) })
}) })
}, },
}, },
// this is to stop sync chasing bug // this is to stop sync chasing bug
myArray: null, myArray: null,
positionsArray: null,
// NOTE: ok as created here but NOT if this is the first view to load // NOTE: ok as created here but NOT if this is the first view to load
created() { created() {
//access the custom option using $options //access the custom option using $options
this.$options.myArray = this.nodes_filtered this.$options.myArray = this.nodes_filtered
this.$options.positionsArray = this.positions_filtered
}, },
updated() { updated() {
this.$options.positionsArray = this.positions_filtered
if (this.toolmode == 'addNode') { if (this.toolmode == 'addNode') {
this.$options.myArray = this.nodes_filtered this.$options.myArray = this.nodes_filtered
this.$store.commit('ui/setMode', 'select') this.$store.commit('ui/setMode', 'select')
...@@ -244,7 +333,6 @@ export default { ...@@ -244,7 +333,6 @@ export default {
}, },
deleteFlag(e) { deleteFlag(e) {
console.log(e)
if (confirm('Confirm discard?')) { if (confirm('Confirm discard?')) {
this.$store.dispatch('deleteFlag', { e }) this.$store.dispatch('deleteFlag', { e })
this.$options.myArray = this.nodes_filtered this.$options.myArray = this.nodes_filtered
......
app/src/components/OtherNodeslayer.vue
+ 214
− 87
View file @ 5ea9750c
<template> <template>
<div ref="othernodes" class="node"> <div ref="othernodes" class="node">
<div v-for="(value, index) in positions_filtered" v-bind:key="index"> <div v-if="toolmode == 'move'">
<div v-for="(value, index) in $options.positionsArray" v-bind:key="index">
<div v-for="(nodes, index) in othernodes_filtered" v-bind:key="index"> <div v-for="(nodes, index) in othernodes_filtered" v-bind:key="index">
<draggable <draggable
v-if="nodes.node_id == value.node_id"
:w="value.width" :w="value.width"
:h="value.height" :h="value.height"
:x="value.x_pos" :x="value.x_pos"
...@@ -10,11 +12,125 @@ ...@@ -10,11 +12,125 @@
:z="value.z_index" :z="value.z_index"
:scale="scale" :scale="scale"
@activated="onActivated(nodes.node_id)" @activated="onActivated(nodes.node_id)"
:draggable="false"
:resizable="false"
@dragging="onDrag" @dragging="onDrag"
@resizing="onResize" @resizing="onResize"
@dragstop="onDragstop" @dragstop="onDragstop"
@resizestop="onResizestop" @resizestop="onResizestop"
style="border: 2px solid black; background-color: rgb(205, 234, 255)" style="
border: 2px solid black;
background-color: rgb(205, 234, 255);
"
:min-width="200"
:min-height="220"
>
<p
class="read"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text | marked"
></p>
<div class="react">
<div class="eeee">
<input :value="nodes.node_id" name="id" readonly hidden />
<input
id="emojifield"
class="regular-input"
v-model="input"
readonly
/>
<emoji-picker @emoji="append" :search="search">
<div
class="emoji-invoker"
slot="emoji-invoker"
slot-scope="{ events: { click: clickEvent } }"
@click.stop="clickEvent"
>
<svg
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
/>
</svg>
</div>
<div
slot="emoji-picker"
slot-scope="{ emojis, insert, display }"
>
<div
class="emoji-picker"
:style="{ top: display.y + 'px', left: display.x + 'px' }"
>
<div class="emoji-picker__search">
<input type="text" v-model="search" />
</div>
<div>
<div
v-for="(emojiGroup, category) in emojis"
:key="category"
>
<h5>{{ category }}</h5>
<div class="emojis">
<span
v-for="(emoji, emojiName) in emojiGroup"
:key="emojiName"
@click="insert(emoji), sentReact(nodes.node_id)"
:title="emojiName"
>{{ emoji }}</span
>
</div>
</div>
</div>
</div>
</div>
</emoji-picker>
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<p v-if="nodes.node_id == emojis.node_id">
{{ emojis.emoji_text }}
</p>
</div>
</div>
</div>
</div>
</draggable>
</div>
</div>
</div>
<!-- IF NOT MOVE tool -->
<div v-if="toolmode != 'move'">
<div v-for="(value, index) in $options.positionsArray" v-bind:key="index">
<div v-for="(nodes, index) in othernodes_filtered" v-bind:key="index">
<draggable
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)"
@dragging="onDrag"
@resizing="onResize"
@dragstop="onDragstop"
@resizestop="onResizestop"
style="
border: 2px solid black;
background-color: rgb(205, 234, 255);
"
:min-width="200" :min-width="200"
:min-height="220" :min-height="220"
> >
...@@ -101,6 +217,7 @@ ...@@ -101,6 +217,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -130,7 +247,6 @@ export default { ...@@ -130,7 +247,6 @@ export default {
marked: marked, marked: marked,
}, },
mounted() {},
computed: { computed: {
...mapState({ ...mapState({
scale: (state) => state.ui.scale, scale: (state) => state.ui.scale,
...@@ -150,12 +266,23 @@ export default { ...@@ -150,12 +266,23 @@ export default {
positions_filtered: function () { positions_filtered: function () {
return this.configPositions.filter((positions) => { return this.configPositions.filter((positions) => {
return this.otherNodes.find((node) => { return this.otherNodes.find((node) => {
return !node.deleted && positions.node_id == node.node_id return positions.node_id == node.node_id
}) })
}) })
}, },
}, },
positionsArray: null,
// NOTE: ok as created here but NOT if this is the first view to load
created() {
//access the custom option using $options
this.$options.positionsArray = this.positions_filtered
},
updated() {
this.$options.positionsArray = this.positions_filtered
},
methods: { methods: {
onActivated(e) { onActivated(e) {
this.nodeid = e this.nodeid = e
......
app/src/views/Organise.vue
+ 1
− 1
View file @ 5ea9750c
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment