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

Merge branch 'BugConnections' into main

parents e7fe8557 bf5a39ab
No related branches found
No related tags found
No related merge requests found
...@@ -101,7 +101,7 @@ export default { ...@@ -101,7 +101,7 @@ export default {
if (this.configPositions[j].node_id == this.myNodes[i].node_id) { if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
buttonMap[i].name = this.myNodes[i].node_id buttonMap[i].name = this.myNodes[i].node_id
// console.log(button_one.name) // console.log(button_one.name)
buttonMap[i].lineStyle(0) buttonMap[i].lineStyle(1)
buttonMap[i].beginFill(0xcab6ff, 1) buttonMap[i].beginFill(0xcab6ff, 1)
// x, y, radius // x, y, radius
...@@ -138,7 +138,7 @@ export default { ...@@ -138,7 +138,7 @@ export default {
if (this.configPositions[j].node_id == this.otherNodes[i].node_id) { if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
buttonMapOther[i].name = this.otherNodes[i].node_id buttonMapOther[i].name = this.otherNodes[i].node_id
// console.log(button_one.name) // console.log(button_one.name)
buttonMapOther[i].lineStyle(0) buttonMapOther[i].lineStyle(1)
buttonMapOther[i].beginFill(0xcab6ff, 1) buttonMapOther[i].beginFill(0xcab6ff, 1)
// x, y, radius // x, y, radius
...@@ -230,7 +230,7 @@ export default { ...@@ -230,7 +230,7 @@ export default {
connectionsDraw() { connectionsDraw() {
var i var i
// var j
this.canvas = this.$refs.pixi this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage const stage = this.PIXIApp.stage
let graphics = new PIXI.Graphics() let graphics = new PIXI.Graphics()
...@@ -239,10 +239,18 @@ export default { ...@@ -239,10 +239,18 @@ export default {
graphics.lineStyle(8, 0xcab6ff) graphics.lineStyle(8, 0xcab6ff)
// move the lines to start and end pos based on if to_node == node_id // move the lines to start and end pos based on if to_node == node_id
// or from_id == node_id // or from_id == node_id
//start_id == node_id
// this will put them in the same place as buttons // this will put them in the same place as buttons
// for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
// for (j = 0; j < Object.keys(this.configPositions).length; j++) {
// if (this.configConnections[j].start_id == this.otherNodes[i].node_id) {
// for (j = 0; j < Object.keys(this.otherNodes).length; j++) {
for (i = 0; i < Object.keys(this.configConnections).length; i++) { for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//start //start
graphics.moveTo( graphics.moveTo(
this.configConnections[i].x_pos_start, this.configConnections[i].x_pos_start,
this.configConnections[i].y_pos_start this.configConnections[i].y_pos_start
...@@ -254,6 +262,7 @@ export default { ...@@ -254,6 +262,7 @@ export default {
this.configConnections[i].y_pos_end this.configConnections[i].y_pos_end
) )
} }
// }
for (var l = stage.children.length - 1; l >= 0; l--) { for (var l = stage.children.length - 1; l >= 0; l--) {
stage.removeChild(stage.children[l]) stage.removeChild(stage.children[l])
} }
......
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
:z="value.z_index" :z="value.z_index"
:draggable="false" :draggable="false"
:resizable="false" :resizable="false"
style="background-color: rgb(205, 234, 255)" style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
:min-width="200" :min-width="200"
:min-height="221" :min-height="370"
> >
<form> <form>
<div v-if="value.read_mode == false"> <div v-if="value.read_mode == false">
...@@ -43,12 +43,17 @@ ...@@ -43,12 +43,17 @@
<!-- <h3>Reactions</h3> --> <!-- <h3>Reactions</h3> -->
<div v-for="(emojis, index) in configEmoji" :key="index"> <div class="allemoji">
<p class="allemoji" v-if="nodeid == emojis.node_id"> <div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<p v-if="nodeid == emojis.node_id">
{{ emojis.emoji_text }} {{ emojis.emoji_text }}
</p> </p>
</div> </div>
</div>
<p class="info">*markdown supported &amp; autosaves</p> <p class="info">*markdown supported &amp; autosaves</p>
<div class="btn-row"> <div class="btn-row">
<!-- <BaseButton buttonClass="danger" @click="deleteFlag()" <!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
...@@ -92,9 +97,9 @@ ...@@ -92,9 +97,9 @@
@dragstop="onDragstop" @dragstop="onDragstop"
@resizestop="onResizestop" @resizestop="onResizestop"
:drag-cancel="'.drag-cancel'" :drag-cancel="'.drag-cancel'"
style="background-color: rgb(205, 234, 255)" style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
:min-width="200" :min-width="200"
:min-height="221" :min-height="370"
> >
<form> <form>
<div v-if="value.read_mode == false"> <div v-if="value.read_mode == false">
...@@ -123,13 +128,17 @@ ...@@ -123,13 +128,17 @@
</div> </div>
<!-- <h3>Reactions</h3> --> <!-- <h3>Reactions</h3> -->
<div class="allemoji">
<div v-for="(emojis, index) in configEmoji" :key="index"> <div
<p class="allemoji" v-if="nodeid == emojis.node_id"> class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<p v-if="nodeid == emojis.node_id">
{{ emojis.emoji_text }} {{ emojis.emoji_text }}
</p> </p>
</div> </div>
</div>
<p class="info">*markdown supported &amp; autosaves</p> <p class="info">*markdown supported &amp; autosaves</p>
<div class="btn-row"> <div class="btn-row">
<BaseButton buttonClass="danger" @click="deleteFlag()" <BaseButton buttonClass="danger" @click="deleteFlag()"
...@@ -353,12 +362,13 @@ export default { ...@@ -353,12 +362,13 @@ export default {
textarea { textarea {
width: 100%; width: 100%;
height: 125px; height: 175px;
resize: none; resize: none;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Inter var', Helvetica, sans-serif; font-family: 'Inter var', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
margin-top: 1em;
border: none; border: none;
outline: none; outline: none;
background-color: rgb(187, 227, 255); background-color: rgb(187, 227, 255);
...@@ -367,7 +377,6 @@ textarea { ...@@ -367,7 +377,6 @@ textarea {
.btn-row { .btn-row {
position: relative; position: relative;
margin-bottom: 5px; margin-bottom: 5px;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -378,9 +387,16 @@ textarea { ...@@ -378,9 +387,16 @@ textarea {
.allemoji { .allemoji {
font-size: 2em; font-size: 2em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));
/* float: left; */ /* float: left; */
} }
.eachemoji p {
margin: 0em;
}
img { img {
width: 100%; width: 100%;
} }
......
...@@ -17,16 +17,21 @@ ...@@ -17,16 +17,21 @@
:resizable="false" :resizable="false"
@dragstop="onDragstop" @dragstop="onDragstop"
@resizestop="onResizestop" @resizestop="onResizestop"
style="border: 1px solid black; background-color: rgb(205, 234, 255)" style="border: 2px solid black; background-color: rgb(205, 234, 255)"
:min-width="200"
:min-height="370"
> >
<p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"> <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
{{ nodeid }} {{ nodeid }}
</p> </p>
<!-- <h3>Reactions</h3> --> <!-- <h3>Reactions</h3> -->
<div v-for="(emojis, index) in configEmoji" :key="index"> <div
<p class="allemoji" v-if="nodeid == emojis.node_id"> class="allemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<p class="eachemoji" v-if="nodeid == emojis.node_id">
{{ emojis.emoji_text }} {{ emojis.emoji_text }}
MOVE MODE
</p> </p>
</div> </div>
<div class="react" v-if="nodeid != undefined"> <div class="react" v-if="nodeid != undefined">
...@@ -114,17 +119,25 @@ ...@@ -114,17 +119,25 @@
@resizing="onResize" @resizing="onResize"
@dragstop="onDragstop" @dragstop="onDragstop"
@resizestop="onResizestop" @resizestop="onResizestop"
style="border: 1px solid black; background-color: rgb(205, 234, 255)" style="border: 2px solid black; background-color: rgb(205, 234, 255)"
:min-width="200"
:min-height="370"
> >
<p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"> <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
{{ nodeid }} {{ nodeid }}
</p> </p>
<!-- <h3>Reactions</h3> --> <!-- <h3>Reactions</h3> -->
<div v-for="(emojis, index) in configEmoji" :key="index"> <div class="allemoji">
<p class="allemoji" v-if="nodeid == emojis.node_id"> <div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<p v-if="nodeid == emojis.node_id">
{{ emojis.emoji_text }} {{ emojis.emoji_text }}
</p> </p>
</div> </div>
</div>
<div class="react" v-if="nodeid != undefined"> <div class="react" v-if="nodeid != undefined">
<!-- <h2>React</h2> --> <!-- <h2>React</h2> -->
<div class="eeee"> <div class="eeee">
...@@ -361,9 +374,16 @@ input { ...@@ -361,9 +374,16 @@ input {
.allemoji { .allemoji {
font-size: 2em; font-size: 2em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));
/* float: left; */ /* float: left; */
} }
.eachemoji p {
margin: 0em;
}
h3 { h3 {
margin-bottom: -30px; margin-bottom: -30px;
} }
...@@ -380,10 +400,10 @@ h3 { ...@@ -380,10 +400,10 @@ h3 {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
/* transform: scale(1.6); */ /* transform: scale(1.6); */
margin: 0em 0em 1em 0em; /* margin: 0em 0em 1em 0em; */
border-radius: 50%; /* border-radius: 50%; */
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.8s;
} }
.emoji-invoker:hover > svg { .emoji-invoker:hover > svg {
fill: #84949b; fill: #84949b;
...@@ -392,7 +412,7 @@ h3 { ...@@ -392,7 +412,7 @@ h3 {
} }
.emoji-invoker > svg { .emoji-invoker > svg {
fill: #b1c6d0; fill: #b1c6d0;
margin-top: -15px; margin-top: 10px;
margin-left: 0.2em; margin-left: 0.2em;
transform: scale(1.5); transform: scale(1.5);
} }
...@@ -410,6 +430,7 @@ h3 { ...@@ -410,6 +430,7 @@ h3 {
border-radius: 0.5rem; border-radius: 0.5rem;
background: #fff; background: #fff;
box-shadow: 1px 1px 8px #c7dbe6; box-shadow: 1px 1px 8px #c7dbe6;
margin-top: 3em;
} }
.emoji-picker__search { .emoji-picker__search {
display: flex; display: flex;
...@@ -422,6 +443,7 @@ h3 { ...@@ -422,6 +443,7 @@ h3 {
outline: none; outline: none;
} }
.emoji-picker h5 { .emoji-picker h5 {
margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
color: #b1b1b1; color: #b1b1b1;
text-transform: uppercase; text-transform: uppercase;
......
...@@ -457,8 +457,8 @@ const store = new Vuex.Store({ ...@@ -457,8 +457,8 @@ const store = new Vuex.Store({
node_id: uniqueid, node_id: uniqueid,
x_pos: localxpos, x_pos: localxpos,
y_pos: localypos, y_pos: localypos,
width: 220, width: 200,
height: 295, height: 370,
z_index: 10, z_index: 10,
read_mode: false, read_mode: false,
}) })
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment