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

broken

parent 8d4ef553
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
.DS_Store
+ 0
− 0
View file @ 95e91c35
No preview for this file type
app/src/components/NodesLayer.vue
+ 63
− 155
View file @ 95e91c35
<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"
......@@ -10,8 +9,8 @@
:x="value.x_pos"
:y="value.y_pos"
:z="value.z_index"
:draggable="false"
:resizable="false"
:draggable="true"
:resizable="true"
style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
:min-width="200"
:min-height="220"
......@@ -59,104 +58,14 @@
<!-- <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>
<p class="info">*markdown supported &amp; autosaves</p>
<div class="btn-row">
<BaseButton buttonClass="danger" @click="deleteFlag()"
>Discard</BaseButton
>
<div v-if="value.read_mode == true">
<BaseButton
class="read"
buttonClass="action"
@click="readFlag()"
<BaseButton class="read" buttonClass="action" @click="readFlag()"
>Edit Mode
</BaseButton>
</div>
<div v-else>
<BaseButton
class="read"
buttonClass="action"
@click="readFlag()"
<BaseButton class="read" buttonClass="action" @click="readFlag()"
>Read Mode</BaseButton
>
</div>
......@@ -165,13 +74,12 @@
</vue-draggable-resizable>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import marked from 'marked'
import lodash from 'lodash'
//import lodash from 'lodash'
var readmode
export default {
......
app/src/components/OtherNodeslayer.vue
+ 82
− 193
View file @ 95e91c35
<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> -->
<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"
>
<p v-if="nodeid == emojis.node_id">
{{ emojis.emoji_text }}
</p>
</div>
</div>
<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)"
:title="emojiName"
>{{ emoji }}</span
>
</div>
</div>
</div>
</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"
......@@ -169,10 +62,7 @@
/>
</svg>
</div>
<div
slot="emoji-picker"
slot-scope="{ emojis, insert, display }"
>
<div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
<div
class="emoji-picker"
:style="{ top: display.y + 'px', left: display.x + 'px' }"
......@@ -210,7 +100,6 @@
</vue-draggable-resizable>
</div>
</div>
</div>
</template>
<script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment