diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 44f69f797a7e4ccc031ae6b37e2992147725fe01..4347b6d1f45bd573db97502044578b811995d3fb 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -101,7 +101,7 @@ export default {
if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
buttonMap[i].name = this.myNodes[i].node_id
// console.log(button_one.name)
- buttonMap[i].lineStyle(0)
+ buttonMap[i].lineStyle(1)
buttonMap[i].beginFill(0xcab6ff, 1)
// x, y, radius
@@ -138,7 +138,7 @@ export default {
if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
buttonMapOther[i].name = this.otherNodes[i].node_id
// console.log(button_one.name)
- buttonMapOther[i].lineStyle(0)
+ buttonMapOther[i].lineStyle(1)
buttonMapOther[i].beginFill(0xcab6ff, 1)
// x, y, radius
@@ -230,7 +230,7 @@ export default {
connectionsDraw() {
var i
-
+ // var j
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let graphics = new PIXI.Graphics()
@@ -239,10 +239,18 @@ export default {
graphics.lineStyle(8, 0xcab6ff)
// move the lines to start and end pos based on if to_node == node_id
// or from_id == node_id
+ //start_id == node_id
// 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++) {
//start
+
graphics.moveTo(
this.configConnections[i].x_pos_start,
this.configConnections[i].y_pos_start
@@ -254,6 +262,7 @@ export default {
this.configConnections[i].y_pos_end
)
}
+ // }
for (var l = stage.children.length - 1; l >= 0; l--) {
stage.removeChild(stage.children[l])
}
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index f6bd5804a2e2f87f81a2b16de765e6178580eb56..ba5388ae576209bfb028bf8464d892c235ca1717 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -12,9 +12,9 @@
:z="value.z_index"
:draggable="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-height="221"
+ :min-height="370"
>
<form>
<div v-if="value.read_mode == false">
@@ -43,12 +43,17 @@
<!-- <h3>Reactions</h3> -->
- <div v-for="(emojis, index) in configEmoji" :key="index">
- <p class="allemoji" v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
+ <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 & autosaves</p>
<div class="btn-row">
<!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
@@ -92,9 +97,9 @@
@dragstop="onDragstop"
@resizestop="onResizestop"
: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-height="221"
+ :min-height="370"
>
<form>
<div v-if="value.read_mode == false">
@@ -123,13 +128,17 @@
</div>
<!-- <h3>Reactions</h3> -->
-
- <div v-for="(emojis, index) in configEmoji" :key="index">
- <p class="allemoji" v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
+ <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 & autosaves</p>
<div class="btn-row">
<BaseButton buttonClass="danger" @click="deleteFlag()"
@@ -353,12 +362,13 @@ export default {
textarea {
width: 100%;
- height: 125px;
+ height: 175px;
resize: none;
box-sizing: border-box;
font-family: 'Inter var', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ margin-top: 1em;
border: none;
outline: none;
background-color: rgb(187, 227, 255);
@@ -367,7 +377,6 @@ textarea {
.btn-row {
position: relative;
-
margin-bottom: 5px;
display: flex;
justify-content: center;
@@ -378,9 +387,16 @@ textarea {
.allemoji {
font-size: 2em;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(0, auto));
+
/* float: left; */
}
+.eachemoji p {
+ margin: 0em;
+}
+
img {
width: 100%;
}
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index b2226bff5702fe9f740570b8a76c6b2d3a3f900f..cfeac99d026345dab75c60a19018f084071663b5 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -17,16 +17,21 @@
:resizable="false"
@dragstop="onDragstop"
@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">
{{ nodeid }}
</p>
<!-- <h3>Reactions</h3> -->
- <div v-for="(emojis, index) in configEmoji" :key="index">
- <p class="allemoji" v-if="nodeid == emojis.node_id">
+ <div
+ class="allemoji"
+ v-for="(emojis, index) in configEmoji"
+ :key="index"
+ >
+ <p class="eachemoji" v-if="nodeid == emojis.node_id">
{{ emojis.emoji_text }}
- MOVE MODE
</p>
</div>
<div class="react" v-if="nodeid != undefined">
@@ -114,16 +119,24 @@
@resizing="onResize"
@dragstop="onDragstop"
@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">
{{ nodeid }}
</p>
<!-- <h3>Reactions</h3> -->
- <div v-for="(emojis, index) in configEmoji" :key="index">
- <p class="allemoji" v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
+ <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> -->
@@ -361,9 +374,16 @@ input {
.allemoji {
font-size: 2em;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(0, auto));
+
/* float: left; */
}
+.eachemoji p {
+ margin: 0em;
+}
+
h3 {
margin-bottom: -30px;
}
@@ -380,10 +400,10 @@ h3 {
width: 1.5rem;
height: 1.5rem;
/* transform: scale(1.6); */
- margin: 0em 0em 1em 0em;
- border-radius: 50%;
+ /* margin: 0em 0em 1em 0em; */
+ /* border-radius: 50%; */
cursor: pointer;
- transition: all 0.2s;
+ transition: all 0.8s;
}
.emoji-invoker:hover > svg {
fill: #84949b;
@@ -392,7 +412,7 @@ h3 {
}
.emoji-invoker > svg {
fill: #b1c6d0;
- margin-top: -15px;
+ margin-top: 10px;
margin-left: 0.2em;
transform: scale(1.5);
}
@@ -410,6 +430,7 @@ h3 {
border-radius: 0.5rem;
background: #fff;
box-shadow: 1px 1px 8px #c7dbe6;
+ margin-top: 3em;
}
.emoji-picker__search {
display: flex;
@@ -422,6 +443,7 @@ h3 {
outline: none;
}
.emoji-picker h5 {
+ margin-top: 0;
margin-bottom: 0;
color: #b1b1b1;
text-transform: uppercase;
diff --git a/app/src/experimental/PanZoomContainer.vue b/app/src/experimental/PanZoomContainer.vue
index 9a930e5ba7f480537ae308ed336063bb3caac49e..2b0d317ca91f85851459df3cca88f21f0c8e53e3 100644
--- a/app/src/experimental/PanZoomContainer.vue
+++ b/app/src/experimental/PanZoomContainer.vue
@@ -25,7 +25,7 @@
<!-- {{ JSON.stringify(interaction) }} -->
<!-- view paramaters not being utilised ? -->
<!-- {{ mode }} -->
-
+
<slot />
</div>
</div>
diff --git a/app/src/store/index.js b/app/src/store/index.js
index c1afaab92beb024bb5e5a1b5032cec7868fc4ecf..6b5e065a3735029a2615ff4283c23f04f86f3924 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -457,8 +457,8 @@ const store = new Vuex.Store({
node_id: uniqueid,
x_pos: localxpos,
y_pos: localypos,
- width: 220,
- height: 295,
+ width: 200,
+ height: 370,
z_index: 10,
read_mode: false,
})