From 95e91c3594e1c1d650cdbf12367466be3fc84837 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 1 Oct 2020 13:18:09 +0100
Subject: [PATCH] broken
---
.DS_Store | Bin 10244 -> 10244 bytes
app/src/components/NodesLayer.vue | 218 ++++++--------------
app/src/components/OtherNodeslayer.vue | 275 ++++++++-----------------
3 files changed, 145 insertions(+), 348 deletions(-)
diff --git a/.DS_Store b/.DS_Store
index 109c2ae889d0ec12ec3cae3d563a2b76b53bdc04..168e6ef6134c828e8a261816e920c3331eeec3ee 100644
GIT binary patch
delta 19
acmZn(XbISGMu5%SQb)niZ1W`nBXIyl0|q<*
delta 19
acmZn(XbISGMu5%IQb)niWb-8fBXIyl4F)^_
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index c0c26de..a19e516 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -1,169 +1,77 @@
<template>
<div ref="nodes" class="node">
<div v-for="(value, index) in configPositions" v-bind:key="index">
- <div v-if="toolmode == 'move'">
- <vue-draggable-resizable
- 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"
- :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 myNodes" v-bind:key="value.node_id">
- <textarea
- v-if="nodeid == value.node_id"
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- @input="editNode"
- v-model="value.node_text"
- :id="nodeid"
- class="drag-cancel"
- ref="nodetext"
- placeholder="Idea goes here! (auto saved every keystroke)"
- ></textarea>
- </div>
- </div>
- <div v-if="value.read_mode == true">
- <p
- class="read"
+ <vue-draggable-resizable
+ 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"
+ :draggable="true"
+ :resizable="true"
+ 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 myNodes" v-bind:key="value.node_id">
+ <textarea
+ v-if="nodeid == value.node_id"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ @input="editNode"
+ v-model="value.node_text"
:id="nodeid"
- :inner-html.prop="nodetext | marked"
- ></p>
+ class="drag-cancel"
+ ref="nodetext"
+ placeholder="Idea goes here! (auto saved every keystroke)"
+ ></textarea>
</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 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>
- <p class="info">*markdown supported & autosaves</p>
- <div class="btn-row">
- <!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
+ </div>
+ <p class="info">*markdown supported & autosaves</p>
+ <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>
- </vue-draggable-resizable>
- </div>
-
- <!-- Same code as above when in any other mode other than move so you can drag nodes-->
-
- <div v-else>
- <vue-draggable-resizable
- 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"
- @activated="onActivated"
- @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>
- <div v-if="value.read_mode == false">
- <div v-for="value in myNodes" v-bind:key="value.node_id">
- <div v-if="nodeid == value.node_id">
- <textarea
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- @input="editNode"
- v-model="value.node_text"
- :id="nodeid"
- class="drag-cancel"
- ref="nodetext"
- placeholder="Idea goes here! (auto saved every keystroke)"
- ></textarea>
- </div>
- </div>
- </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 v-if="value.read_mode == true">
+ <BaseButton class="read" buttonClass="action" @click="readFlag()"
+ >Edit Mode
+ </BaseButton>
</div>
- <p class="info">*markdown supported & autosaves</p>
- <div class="btn-row">
- <BaseButton buttonClass="danger" @click="deleteFlag()"
- >Discard</BaseButton
+ <div v-else>
+ <BaseButton class="read" buttonClass="action" @click="readFlag()"
+ >Read Mode</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>
- </vue-draggable-resizable>
- </div>
+ </div>
+ </form>
+ </vue-draggable-resizable>
</div>
</div>
</template>
@@ -171,7 +79,7 @@
<script>
import { mapState } from 'vuex'
import marked from 'marked'
-import lodash from 'lodash'
+//import lodash from 'lodash'
var readmode
export default {
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index 584f84b..41f5b8f 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -1,214 +1,103 @@
<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 -->
- <vue-draggable-resizable
- v-if="nodeid == value.node_id"
- :w="value.width"
- :h="value.height"
- :x="value.x_pos"
- :y="value.y_pos"
- :z="value.z_index"
- @activated="onActivated"
- @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">
- {{ nodeid }}
- </p>
- <!-- <h3>Reactions</h3> -->
+ <vue-draggable-resizable
+ v-if="nodeid == value.node_id"
+ :w="value.width"
+ :h="value.height"
+ :x="value.x_pos"
+ :y="value.y_pos"
+ :z="value.z_index"
+ @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">
+ {{ nodeid }}
+ </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
+ />
- <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
- />
- <div class="allemoji">
- <div
- class="eachemoji"
- v-for="(emojis, index) in configEmoji"
- :key="index"
+ <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"
>
- <p v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
- </div>
+ <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>
- <emoji-picker @emoji="append" :search="search">
+ <div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
<div
- class="emoji-invoker"
- slot="emoji-invoker"
- slot-scope="{ events: { click: clickEvent } }"
- @click.stop="clickEvent"
+ class="emoji-picker"
+ :style="{ top: display.y + 'px', left: display.x + 'px' }"
>
- <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" 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)"
- :title="emojiName"
- >{{ emoji }}</span
- >
- </div>
- </div>
- </div>
+ <div class="emoji-picker__search">
+ <input type="text" v-model="search" v-focus />
</div>
- </div>
- </emoji-picker>
- <!-- <div class="btn-row">
- <BaseButton buttonClass="action" @click="sentReact()"
- >Send Reaction</BaseButton
- >
- </div> -->
- </div>
- </div>
- </vue-draggable-resizable>
- </div>
-
- <div v-else>
- <vue-draggable-resizable
- v-if="nodeid == value.node_id"
- :w="value.width"
- :h="value.height"
- :x="value.x_pos"
- :y="value.y_pos"
- :z="value.z_index"
- @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">
- {{ nodeid }}
- </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
- 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" 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
+ 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>
- </emoji-picker>
- <!-- <div class="btn-row">
+ </div>
+ </emoji-picker>
+ <!-- <div class="btn-row">
<BaseButton buttonClass="action" @click="sentReact()"
>Send Reaction</BaseButton
>
</div> -->
- </div>
</div>
- </vue-draggable-resizable>
- </div>
+ </div>
+ </vue-draggable-resizable>
</div>
</div>
</template>
--
GitLab