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

more attempts to get this right

parent 56165289
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/src/components/CardsLayer.vue
+ 69
− 81
View file @ 1aa25fea
<template>
<div>
<div v-for="(value, index) in configPositions" v-bind:key="index">
<div class="nodes" v-if="nodeid == value.node_id && deleted == false">
<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)"
autofocus
v-model="value.node_text"
@input="editNode"
:id="nodeid"
ref="nodetext"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
></textarea>
</div>
<p class="info">*markdown supported &amp; autosaves</p>
<div class="grid">
<div v-for="(nodes, index) in nodes_filtered" v-bind:key="index">
<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"
ref="nodetext"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
></textarea>
</template>
<template v-else>
<p
: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>
<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 class="readmode" v-if="value.read_mode && deleted == false">
<p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
</div>
<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">
<SvgButton buttonClass="nodes" @click.prevent="deleteFlag()" />
<div v-if="value.read_mode == true && deleted == false">
<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()" />
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</template>
......@@ -69,26 +63,28 @@ export default {
}
},
props: {
nodeid: String,
nodetext: String,
deleted: Boolean,
},
filters: {
marked: marked,
},
computed: {
...mapState({
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
configEmoji: (state) => state.configEmoji,
}),
nodes_filtered: function () {
return this.myNodes.filter((nodes) => {
return nodes.deleted == false
})
},
},
computed: mapState({
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
configEmoji: (state) => state.configEmoji,
}),
// this is to stop sync chasing bug
myArray: null,
created() {
this.$options.myArray = this.myNodes
this.readFlag
mounted() {
//access the custom option using $options
this.$options.myArray = this.nodes_filtered
},
methods: {
......@@ -110,29 +106,17 @@ 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'
}
},
// setFocus() {
// this.$refs.nodetext.focus()
// },
},
components: {
SvgButton,
......@@ -142,6 +126,10 @@ export default {
</script>
<style lang="css" scoped>
.grid {
display: flex;
flex-wrap: wrap;
}
.nodes {
min-width: 343px;
max-width: 343px;
......
app/src/components/NodesLayer.vue
+ 18
− 15
View file @ 1aa25fea
<template>
<div ref="nodes" class="node">
<div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<div v-for="(value, index) in configPositions" v-bind:key="index">
<div v-for="(value, index) in positions_filtered" 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"
......@@ -40,7 +39,7 @@
:inner-html.prop="nodes.node_text | marked"
></p>
</template>
<!-- // v-if == 'select' -->
<div class="btn-row">
<SvgButton
buttonClass="nodes"
......@@ -51,7 +50,7 @@
@click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
/>
</div>
<!-- // v-else // empty div -->
<div class="allemoji">
<div
class="eachemoji"
......@@ -125,23 +124,30 @@ export default {
return nodes.deleted == false
})
},
positions_filtered: function () {
return this.configPositions.filter((positions) => {
return this.myNodes.find((node) => {
return !node.deleted && positions.node_id == node.node_id
})
})
},
},
// this is to stop sync chasing bug
myArray: null,
// NOTE: ok 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() {
//access the custom option using $options
this.$options.myArray = this.nodes_filtered
},
updated() {
this.$options.myArray = this.nodes_filtered
if (this.toolmode == 'addNode') {
this.$options.myArray = this.nodes_filtered
this.$store.commit('ui/setMode', 'select')
}
},
// updated() {
// this.$options.myArray = this.nodes_filtered
// },
methods: {
onActivated(e) {
this.nodeid = e
......@@ -153,8 +159,7 @@ export default {
}
}
},
onResize(x, y, width, height, e) {
console.log(e)
onResize(x, y, width, height) {
this.localx = x
this.localy = y
this.width = width
......@@ -230,8 +235,6 @@ export default {
editTrue(e) {
this.$emit('edit-true', e)
// this.firstload = false
// // console.log(e)
},
editNode(e) {
......
app/src/components/OtherCardslayer.vue
+ 29
− 18
View file @ 1aa25fea
<template>
<div>
<div v-if="deleted == false">
<div class="grid">
<div v-for="(nodes, index) in othernodes_filtered" v-bind:key="index">
<div class="nodes">
<p :inner-html.prop="nodetext | marked"></p>
<p :inner-html.prop="nodes.node_text | marked"></p>
<div class="eeee">
<input :value="nodeid" name="id" readonly hidden />
<input :value="nodes.node_id" name="id" readonly hidden />
<input
id="emojifield"
class="regular-input"
......@@ -38,7 +38,7 @@
:style="{ top: display.y + 'px', left: display.x + 'px' }"
>
<div class="emoji-picker__search">
<input type="text" v-model="search" v-focus />
<input type="text" v-model="search" />
</div>
<div>
<div v-for="(emojiGroup, category) in emojis" :key="category">
......@@ -47,7 +47,7 @@
<span
v-for="(emoji, emojiName) in emojiGroup"
:key="emojiName"
@click="insert(emoji), sentReact()"
@click="insert(emoji), sentReact(nodes.node_id)"
:title="emojiName"
>{{ emoji }}</span
>
......@@ -64,7 +64,7 @@
v-for="(emojis, index) in configEmoji"
:key="index"
>
<p v-if="nodeid == emojis.node_id">
<p v-if="nodes.node_id == emojis.node_id">
{{ emojis.emoji_text }}
</p>
</div>
......@@ -79,6 +79,10 @@
import { mapState } from 'vuex'
import EmojiPicker from 'vue-emoji-picker'
import marked from 'marked'
var nodeid
var emojitext
export default {
name: 'OtherCardslayer',
......@@ -93,16 +97,18 @@ export default {
}
},
props: {
nodeid: String,
nodetext: String,
deleted: Boolean,
},
computed: {
...mapState({
otherNodes: (state) => state.otherNodes,
configEmoji: (state) => state.configEmoji,
}),
computed: mapState({
otherNodes: (state) => state.otherNodes,
configEmoji: (state) => state.configEmoji,
}),
othernodes_filtered: function () {
return this.otherNodes.filter((nodes) => {
return nodes.deleted == false
})
},
},
filters: {
marked: marked,
......@@ -112,9 +118,10 @@ export default {
append(emoji) {
this.input += emoji
},
sentReact(nodeid, emojitext) {
sentReact(e) {
emojitext = this.input
nodeid = this.nodeid
nodeid = e
this.$store.dispatch('addEmoji', {
nodeid,
emojitext,
......@@ -127,6 +134,10 @@ export default {
</script>
<style lang="css" scoped>
.grid {
display: flex;
flex-wrap: wrap;
}
.nodes {
min-width: 343px;
max-width: 343px;
......
app/src/components/OtherNodeslayer.vue
+ 50
− 146
View file @ 1aa25fea
<template>
<div ref="othernodes" class="node">
<div v-for="(value, index) in configPositions" v-bind:key="index">
<div v-if="toolmode == 'move'">
<!-- make draggable false as we are panning around -->
<div v-for="(value, index) in positions_filtered" v-bind:key="index">
<div v-for="(nodes, index) in othernodes_filtered" v-bind:key="index">
<draggable
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"
@activated="onActivated"
@activated="onActivated(nodes.node_id)"
@dragging="onDrag"
@resizing="onResize"
:draggable="false"
:resizable="false"
@dragstop="onDragstop"
@resizestop="onResizestop"
style="border: 2px solid black; background-color: rgb(205, 234, 255)"
:min-width="200"
:min-height="220"
>
<p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
<!-- <h3>Reactions</h3> -->
<p
class="read"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text | marked"
></p>
<div class="react" v-if="nodeid != undefined">
<!-- <h2>React</h2> -->
<div class="react">
<div class="eeee">
<input :value="nodeid" name="id" readonly hidden />
<input :value="nodes.node_id" name="id" readonly hidden />
<input
id="emojifield"
class="regular-input"
v-model="input"
readonly
/>
<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>
<emoji-picker @emoji="append" :search="search">
<div
class="emoji-invoker"
......@@ -74,7 +62,7 @@
:style="{ top: display.y + 'px', left: display.x + 'px' }"
>
<div class="emoji-picker__search">
<input type="text" v-model="search" v-focus />
<input type="text" v-model="search" />
</div>
<div>
<div
......@@ -86,7 +74,7 @@
<span
v-for="(emoji, emojiName) in emojiGroup"
:key="emojiName"
@click="insert(emoji)"
@click="insert(emoji), sentReact(nodes.node_id)"
:title="emojiName"
>{{ emoji }}</span
>
......@@ -96,113 +84,17 @@
</div>
</div>
</emoji-picker>
<!-- <div class="btn-row">
<BaseButton buttonClass="action" @click="sentReact()"
>Send Reaction</BaseButton
>
</div> -->
</div>
</div>
</draggable>
</div>
<div v-else>
<draggable
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"
@activated="onActivated"
@dragging="onDrag"
@resizing="onResize"
@dragstop="onDragstop"
@resizestop="onResizestop"
style="border: 2px solid black; background-color: rgb(205, 234, 255)"
:min-width="200"
:min-height="220"
>
<p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
<!-- <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="react" v-if="nodeid != undefined">
<!-- <h2>React</h2> -->
<div class="eeee">
<input :value="nodeid" 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 class="allemoji">
<div
slot="emoji-picker"
slot-scope="{ emojis, insert, display }"
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<div
class="emoji-picker"
:style="{ top: display.y + 'px', left: display.x + 'px' }"
>
<div class="emoji-picker__search">
<input type="text" v-model="search" v-focus />
</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()"
:title="emojiName"
>{{ emoji }}</span
>
</div>
</div>
</div>
</div>
<p v-if="nodes.node_id == emojis.node_id">
{{ emojis.emoji_text }}
</p>
</div>
</emoji-picker>
<!-- <div class="btn-row">
<BaseButton buttonClass="action" @click="sentReact()"
>Send Reaction</BaseButton
>
</div> -->
</div>
</div>
</div>
</draggable>
......@@ -224,19 +116,13 @@ export default {
draggable,
EmojiPicker,
},
props: {
nodeid: String,
nodetext: String,
nodewidth: Number,
nodeheight: Number,
deleted: Boolean,
},
data() {
return {
input: '',
search: '',
pickupz: 1,
nodeid: String,
}
},
......@@ -245,16 +131,34 @@ export default {
},
mounted() {},
computed: mapState({
scale: (state) => state.ui.scale,
otherNodes: (state) => state.otherNodes,
configPositions: (state) => state.configPositions,
configConnections: (state) => state.configConnections,
configEmoji: (state) => state.configEmoji,
toolmode: (state) => state.ui.mode,
}),
computed: {
...mapState({
scale: (state) => state.ui.scale,
otherNodes: (state) => state.otherNodes,
configPositions: (state) => state.configPositions,
configConnections: (state) => state.configConnections,
configEmoji: (state) => state.configEmoji,
toolmode: (state) => state.ui.mode,
}),
othernodes_filtered: function () {
return this.otherNodes.filter((nodes) => {
return nodes.deleted == false
})
},
positions_filtered: function () {
return this.configPositions.filter((positions) => {
return this.otherNodes.find((node) => {
return !node.deleted && positions.node_id == node.node_id
})
})
},
},
methods: {
onActivated() {
onActivated(e) {
this.nodeid = e
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
if (this.configPositions[i].node_id == this.nodeid) {
......@@ -401,7 +305,7 @@ h3 {
top: -0.5rem;
right: 0.5rem;
width: 1.5rem;
height: 1.5rem;
height: 2.5rem;
/* transform: scale(1.6); */
/* margin: 0em 0em 1em 0em; */
/* border-radius: 50%; */
......
app/src/views/Cards.vue
+ 2
− 22
View file @ 1aa25fea
......@@ -3,24 +3,9 @@
<div v-if="clientset">
<h1 class="mobile">All nodes - card view</h1>
<div class="grid">
<CardsLayer
@editTrue="(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"
/>
<CardsLayer @editTrue="(e) => editTrue(e)" />
<OtherCardslayer
v-for="value in otherNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
v-bind:deleted="value.deleted"
/>
</div>
<OtherCardslayer />
<div class="btn-row">
<!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
......@@ -156,11 +141,6 @@ export default {
</script>
<style lang="css" scoped>
.grid {
display: flex;
flex-wrap: wrap;
}
.mobile {
margin-left: 1em;
font-size: 1em;
......
app/src/views/Organise.vue
+ 7
− 26
View file @ 1aa25fea
......@@ -35,40 +35,21 @@
v-bind:translation="translation"
>
<div v-if="clientset">
<OtherNodeslayer
v-for="value in otherNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
v-bind:deleted="value.deleted"
/>
<OtherNodeslayer />
<NodesLayer @edit-true="(e) => editTrue(e)" />
<TipsLayer />
<ModeCardorg />
<ConnectionsLayer />
<!-- <ConnectionsLayer /> -->
</div>
<div v-else>
<OtherNodeslayer
v-for="value in otherNodes"
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)"
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"
/>
<OtherNodeslayer />
<NodesLayer @edit-true="(e) => editTrue(e)" />
<OnBoard
@client-added="clientAdded()"
@edit-true="(e) => editTrue(e)"
/>
<ConnectionsLayer />
<!-- <ConnectionsLayer /> -->
</div>
<ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
</PanZoomContainer>
......@@ -95,7 +76,7 @@
<script>
import PanZoomContainer from '@/experimental/PanZoomContainer'
import ConnectionsLayer from '@/components/ConnectionsLayer'
//import ConnectionsLayer from '@/components/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer'
import OffLine from '@/components/OffLine'
......@@ -231,7 +212,7 @@ export default {
// SelectionLayer,
NodesLayer,
OtherNodeslayer,
ConnectionsLayer,
// ConnectionsLayer,
OnBoard,
// ToolBar,
OffLine,
......
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