diff --git a/.DS_Store b/.DS_Store
index 5c588bae285e7f51f378996362af221f47000e0f..fd53f8143debf746468430364110e21fcbb4dcc4 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a8e02f22f3412f73ce399da7d9bbbe54bde6945..65c6397761d0c80b9bd73746901be0e5be2fb404 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,20 +1,47 @@
+# 0.1.14
+
+_8th June 2020_
+
+### Changed
+
+- edited CSS to be more mobile friendly (just a little).
+- edited CSS to make things look a little nicer.
+
+### Added
+
+- created the brand new onboarding microcosm, all new devices will see this view on arrival.
+
+# 0.1.13
+
+_7th June 2020_
+
+### Added
+
+- Leave microcosm button added to toolbar.
+- Add simple offline mode if your device disconnects.
+
+### Changed
+
+- Tool bar add node works in basic format (press it to create node).
+- Home by default is the new spatial view.
+
# 0.1.12
_4th June 2020_
### Added
-- Read status is now in store so preserved for your nodes
-- iOS Home screen icon
+- Read status is now in store so preserved for your nodes.
+- iOS Home screen icon.
# 0.1.11d
_2 June 2020_
-This version has been move to alpha as I need to use the app more and thus drive some more development. The COVID-19 pandemic has slowed things down a lot and this version moves to introduce the new spatial mode. The new spatial mode is still missing some vital component to the main home version however for now keeping both old and new views should allow for a quicker capture of some of the missing components that need to be added to Sandbox.
+This version has been moved to alpha as I need to use the app more and thus drive some more development. The COVID-19 pandemic has slowed things down a lot and this version moves to introduce the new spatial mode. The new spatial mode is still missing some vital component to the main home version however for now keeping both old and new views should allow for a quicker capture of some of the missing components that need to be added to Sandbox.
### Changed
-- New menu bar at the top
+- New menu bar at the top.
- Sandbox view is a updated view of nodenogg.in and will replace home.
# 0.1.11
@@ -27,7 +54,7 @@ _10th April 2020_
### Fixed
-- Typo in CHANGELOG.md
+- Typo in CHANGELOG.md.
# 0.1.10
@@ -51,11 +78,11 @@ _26th March 2020_
### Added
-- Simple read mode for your own nodes can now be activated
+- Simple read mode for your own nodes can now be activated.
### Changed
-- made some minor changes to textarea CSS
+- made some minor changes to textarea CSS.
# 0.1.8
@@ -67,7 +94,7 @@ _25th March 2020_
### Changed
-- Simplified About page opening text
+- Simplified About page opening text.
# 0.1.7
diff --git a/app/package.json b/app/package.json
index 541ed68ef47f87ec154a0e5cf0d2791ad7e07f50..6263630e9b8260721c1342d55546445d4665e72f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.12",
+ "version": "0.1.14",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue
index 4404fcee9060b45e9506d4d15501a5dd15925232..0ce8b1d5fcb29a6cf8146701dd43e56c9b2e42cd 100644
--- a/app/src/components/BaseButton.vue
+++ b/app/src/components/BaseButton.vue
@@ -11,9 +11,9 @@
export default {
props: {
buttonClass: {
- type: String
- }
- }
+ type: String,
+ },
+ },
}
</script>
@@ -28,6 +28,7 @@ button {
box-shadow: 1px 1px 1px #000000;
padding: 0.6em;
margin-right: 1em;
+ margin-top: 1em;
}
button.onboard {
@@ -44,6 +45,10 @@ button.onboard {
padding: 0px;
}
+button.special {
+ background-color: #f2c94c;
+}
+
button.danger {
color: white;
background-color: red;
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index ac547ba8011533288c222a86129103bf4eec291d..1fb966ec90a1aae5f9628b4e4eda9415354b275a 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -31,7 +31,11 @@
</div>
</div>
<div v-if="posvalue.read_mode == true">
- <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+ <p
+ class="read"
+ :id="nodeid"
+ :inner-html.prop="nodetext | marked"
+ ></p>
</div>
<h3>Reactions</h3>
@@ -105,7 +109,11 @@
</div>
</div>
<div v-if="posvalue.read_mode == true">
- <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+ <p
+ class="read"
+ :id="nodeid"
+ :inner-html.prop="nodetext | marked"
+ ></p>
</div>
<h3>Reactions</h3>
@@ -303,6 +311,10 @@ export default {
position: relative;
}
+.vdr {
+ padding: 0 0.5em;
+}
+
.info {
font-size: 0.8em;
}
@@ -320,6 +332,7 @@ textarea {
.btn-row {
position: relative;
+
margin-bottom: 5px;
display: flex;
justify-content: center;
@@ -328,6 +341,10 @@ textarea {
border-radius: 4px;
}
+.allemoji {
+ font-size: 2em;
+}
+
img {
width: 100%;
}
diff --git a/app/src/components/OnBoard-old.vue b/app/src/components/OnBoard-old.vue
new file mode 100644
index 0000000000000000000000000000000000000000..208565734055f9c0cc3e9fa93403e0e765c7f55a
--- /dev/null
+++ b/app/src/components/OnBoard-old.vue
@@ -0,0 +1,175 @@
+<template>
+ <div class="notlogged">
+ <p>
+ nodenogg.in is a
+ <span>work in progress</span> collaborative co-creation research and
+ design thinking tool, read more details and links in the
+ <a href="/about">about</a> section.
+ </p>
+
+ <form v-show="parta" onsubmit="return false;">
+ <h2>1</h2>
+ <h3>microcosm</h3>
+ <p>
+ create or join a microcosm. a microcosm is a sharable digital space that
+ can be shared privately between a group of individuals. all content /
+ data you contribute is stored locally on your device and then shared
+ privately to others on the same microcosm. you can remove your
+ contributions at any time, they belong to you.
+ </p>
+ <input
+ type="text"
+ v-model.trim="localmicrocosm"
+ placeholder="microcosm name"
+ autocorrect="off"
+ autocapitalize="none"
+ autofocus
+ v-on:keyup.enter="createMicrocosm(), setFocus()"
+ />
+ <BaseButton buttonClass="onboard" @click="createMicrocosm(), setFocus()"
+ >+</BaseButton
+ >
+ </form>
+
+ <form v-show="partb" onsubmit="return false;">
+ <h2>2</h2>
+ <h3>object</h3>
+ <p>
+ give yourself an object name, this is what connects you to your content
+ / data. this object name is anonymous and stored privately.
+ </p>
+ <input
+ type="text"
+ v-model.trim="clientid"
+ placeholder="object name"
+ autocorrect="off"
+ autocapitalize="none"
+ ref="objectname"
+ v-on:keyup.enter="setClient(), setFocusTwo()"
+ />
+ <BaseButton buttonClass="onboard" @click="setClient(), setFocusTwo()"
+ >+</BaseButton
+ >
+ </form>
+
+ <form v-show="partc">
+ <input
+ class="start"
+ type="text"
+ v-on:keyup.enter="letsGo()"
+ ref="objectnametwo"
+ />
+ <h2>3</h2>
+ <h3>start</h3>
+ <BaseButton buttonClass="onboard" @click="letsGo()">+</BaseButton>
+ </form>
+ </div>
+</template>
+
+<script>
+var delay = 100
+var delaytwo = 100
+
+import Router from '@/router'
+
+export default {
+ data: function () {
+ return {
+ localmicrocosm: Router.currentRoute.params.microcosm,
+ clientid: '',
+ parta: true,
+ partb: false,
+ partc: false,
+ }
+ },
+
+ mounted() {
+ if (localStorage.myNNClient) {
+ this.clientid = localStorage.myNNClient
+ this.localmicrocosm = localStorage.mylastMicrocosm
+ this.createMicrocosm()
+ this.setClient()
+ this.letsGo()
+ }
+ },
+
+ methods: {
+ createMicrocosm() {
+ this.partb = true
+ this.$store.dispatch('createMicrocosm', this.localmicrocosm)
+ localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+ },
+ setClient() {
+ ;(this.partc = true),
+ this.$store.dispatch('setClient', this.clientid),
+ localStorage.setItem('myNNClient', this.clientid)
+ },
+
+ letsGo() {
+ this.$emit('clientAdded')
+ // this.$emit('readyMode')
+ },
+ setFocus() {
+ setTimeout(this.readyFocus, delay)
+ },
+ setFocusTwo() {
+ setTimeout(this.readyFocusTwo, delaytwo)
+ },
+ readyFocus() {
+ this.$refs.objectname.focus()
+ },
+ readyFocusTwo() {
+ this.$refs.objectnametwo.focus()
+ },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+.start {
+ opacity: 0;
+ filter: alpha(opacity=0);
+}
+
+h1,
+h2,
+h3,
+p {
+ margin: 0px;
+}
+
+h2 {
+ float: right;
+ font-size: 3em;
+}
+
+h3 {
+ font-size: 3em;
+ margin-top: 0.5em;
+}
+
+form {
+ /* width: 400px; */
+ padding: 1em;
+ border-style: solid;
+ border-width: 0.5em;
+ border-color: #cab6ff;
+ margin-top: 1em;
+}
+
+input {
+ border-style: solid;
+ border-width: 1px;
+ border-color: #cab6ff;
+ padding: 0.5em;
+}
+
+@media only screen and (min-width: 640px) {
+ /* Style adjustments for viewports that meet the condition */
+
+ /* .notlogged {
+ grid-column: 1 / 3;
+ grid-row: 1;
+ } */
+}
+</style>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index 4f2f60c0792439b593c89390e3aef41c367f9d77..f8224966dc7dd9d7373d95f0aa5aedd8dfe7d846 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -1,90 +1,96 @@
<template>
- <div class="notlogged">
- <p>
- nodenogg.in is a
- <span>work in progress</span> collaborative co-creation research and
- design thinking tool, read more details and links in the
- <a href="/about">about</a> section.
- </p>
-
- <form v-show="parta" onsubmit="return false;">
- <h2>1</h2>
- <h3>microcosm</h3>
- <p>
- create or join a microcosm. a microcosm is a sharable digital space that
- can be shared privately between a group of individuals. all content /
- data you contribute is stored locally on your device and then shared
- privately to others on the same microcosm. you can remove your
- contributions at any time, they belong to you.
- </p>
- <input
- type="text"
- v-model.trim="localmicrocosm"
- placeholder="microcosm name"
- autocorrect="off"
- autocapitalize="none"
- autofocus
- v-on:keyup.enter="createMicrocosm(), setFocus()"
- />
- <BaseButton buttonClass="onboard" @click="createMicrocosm(), setFocus()"
- >+</BaseButton
- >
- </form>
-
- <form v-show="partb" onsubmit="return false;">
- <h2>2</h2>
- <h3>object</h3>
- <p>
- give yourself an object name, this is what connects you to your content
- / data. this object name is anonymous and stored privately.
- </p>
- <input
- type="text"
- v-model.trim="clientid"
- placeholder="object name"
- autocorrect="off"
- autocapitalize="none"
- ref="objectname"
- v-on:keyup.enter="setClient(), setFocusTwo()"
- />
- <BaseButton buttonClass="onboard" @click="setClient(), setFocusTwo()"
- >+</BaseButton
- >
- </form>
-
- <form v-show="partc">
- <input
- class="start"
- type="text"
- v-on:keyup.enter="letsGo()"
- ref="objectnametwo"
- />
- <h2>3</h2>
- <h3>start</h3>
- <BaseButton buttonClass="onboard" @click="letsGo()">+</BaseButton>
- </form>
+ <div ref="nodes" class="node">
+ <vue-draggable-resizable
+ class="innernode"
+ :w="300"
+ :h="335"
+ :x="560"
+ :y="50"
+ :z="0"
+ :draggable="true"
+ style="background-color: #6fcf97;"
+ >
+ <form>
+ <div>
+ <p id="nodeid" :inner-html.prop="nodetext | marked"></p>
+ <input
+ type="text"
+ v-model.trim="clientid"
+ placeholder="device name"
+ autocorrect="off"
+ autocapitalize="none"
+ ref="objectname"
+ v-on:keyup.enter="setClient()"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ />
+ <div class="btn-row">
+ <BaseButton buttonClass="special" @click="setClient()"
+ >Store</BaseButton
+ >
+ </div>
+ </div>
+ </form>
+ </vue-draggable-resizable>
+
+ <vue-draggable-resizable
+ class="innernode"
+ :w="300"
+ :h="345"
+ :x="1100"
+ :y="50"
+ :z="0"
+ :draggable="true"
+ style="background-color: #6fcf97;"
+ >
+ <form>
+ <div>
+ <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
+ <input
+ type="text"
+ v-model.trim="localmicrocosm"
+ placeholder="microcosm name"
+ autocorrect="off"
+ autocapitalize="none"
+ autofocus
+ v-on:keyup.enter="createMicrocosm()"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ />
+ <div class="btn-row">
+ <BaseButton
+ buttonClass="special"
+ @click="createMicrocosm(), letsGo()"
+ >Create Microcosm</BaseButton
+ >
+ </div>
+ </div>
+ </form>
+ </vue-draggable-resizable>
</div>
</template>
<script>
-var delay = 100
-var delaytwo = 100
-
import Router from '@/router'
+import marked from 'marked'
export default {
data: function () {
return {
localmicrocosm: Router.currentRoute.params.microcosm,
clientid: '',
- parta: true,
- partb: false,
- partc: false,
+ nodetext:
+ '## What shall we call you ? 💥 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
+ nodetext2:
+ '## Start those engines ! 🎠\n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
+ // parta: true,
+ // partb: false,
+ // partc: false,
}
},
mounted() {
- if (localStorage.myNNClient) {
+ if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
this.clientid = localStorage.myNNClient
this.localmicrocosm = localStorage.mylastMicrocosm
this.createMicrocosm()
@@ -92,34 +98,26 @@ export default {
this.letsGo()
}
},
+ filters: {
+ marked: marked,
+ },
methods: {
createMicrocosm() {
- this.partb = true
this.$store.dispatch('createMicrocosm', this.localmicrocosm)
localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
},
setClient() {
- ;(this.partc = true),
- this.$store.dispatch('setClient', this.clientid),
+ this.$store.dispatch('setClient', this.clientid),
localStorage.setItem('myNNClient', this.clientid)
},
+ editTrue(e) {
+ this.$emit('editTrue', e)
+ },
+
letsGo() {
this.$emit('clientAdded')
- // this.$emit('readyMode')
- },
- setFocus() {
- setTimeout(this.readyFocus, delay)
- },
- setFocusTwo() {
- setTimeout(this.readyFocusTwo, delaytwo)
- },
- readyFocus() {
- this.$refs.objectname.focus()
- },
- readyFocusTwo() {
- this.$refs.objectnametwo.focus()
},
},
}
@@ -130,6 +128,9 @@ export default {
opacity: 0;
filter: alpha(opacity=0);
}
+.vdr {
+ padding: 0 0.5em;
+}
h1,
h2,
@@ -148,27 +149,22 @@ h3 {
margin-top: 0.5em;
}
-form {
- padding: 1em;
- border-style: solid;
- border-width: 0.5em;
- border-color: #cab6ff;
- margin-top: 1em;
+.btn-row {
+ margin-bottom: 5px;
+ padding: 0px 0px 15px 10px;
+ border-radius: 4px;
}
input {
- border-style: solid;
- border-width: 1px;
- border-color: #cab6ff;
- padding: 0.5em;
-}
-
-@media only screen and (min-width: 640px) {
- /* Style adjustments for viewports that meet the condition */
-
- /* .notlogged {
- grid-column: 1 / 3;
- grid-row: 1;
- } */
+ font-size: 1em;
+ padding: 10px;
+ /* margin-left: 20px; */
+ border-radius: 4px;
+ display: flex;
+ justify-content: center;
+ margin: 10px;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border-style: dotted;
}
</style>
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index d2f9d824201ca1add9cdda33d889ebe222a860f6..78b5f67ab863439edfbabedccaed0d49e95c213b 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -18,7 +18,9 @@
@resizestop="onResizestop"
style="border: 1px solid black; background-color: rgb(205, 234, 255);"
>
- <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
+ <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">
@@ -86,9 +88,11 @@
</div>
</div>
</emoji-picker>
- <BaseButton buttonClass="action" @click="sentReact()"
- >Send Reaction</BaseButton
- >
+ <!-- <div class="btn-row">
+ <BaseButton buttonClass="action" @click="sentReact()"
+ >Send Reaction</BaseButton
+ >
+ </div> -->
</div>
</div>
</vue-draggable-resizable>
@@ -110,7 +114,9 @@
@resizestop="onResizestop"
style="border: 1px solid black; background-color: rgb(205, 234, 255);"
>
- <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
+ <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">
@@ -168,7 +174,7 @@
<span
v-for="(emoji, emojiName) in emojiGroup"
:key="emojiName"
- @click="insert(emoji)"
+ @click="insert(emoji), sentReact()"
:title="emojiName"
>{{ emoji }}</span
>
@@ -178,9 +184,11 @@
</div>
</div>
</emoji-picker>
- <BaseButton buttonClass="action" @click="sentReact()"
- >Send Reaction</BaseButton
- >
+ <!-- <div class="btn-row">
+ <BaseButton buttonClass="action" @click="sentReact()"
+ >Send Reaction</BaseButton
+ >
+ </div> -->
</div>
</div>
</vue-draggable-resizable>
@@ -322,12 +330,35 @@ export default {
position: absolute;
}
+.vdr {
+ padding: 0 0.5em;
+}
+
+input {
+ display: none;
+}
+
+.allemoji {
+ font-size: 2em;
+}
+
+h3 {
+ margin-bottom: -30px;
+}
+
+.btn-row {
+ margin-bottom: 5px;
+ padding: 0px 0px 15px 10px;
+ border-radius: 4px;
+}
+
.emoji-invoker {
top: -0.5rem;
right: 0.5rem;
width: 1.5rem;
height: 1.5rem;
- margin-top: 1em;
+
+ margin: 0em 0em 1em 0em;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index ddac9616ae8b85cce4e206260ed8e887473cf11c..85fa0fa6d694058e78f3f5fd15b618cd19f1a966 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -98,11 +98,13 @@ export default {
<style scoped>
nav {
position: absolute;
- bottom: 20px;
- left: 20px;
+
+ bottom: 1em;
+ left: 1em;
display: flex;
+ flex-wrap: wrap;
align-items: center;
- justify-content: flex-start;
+ justify-content: space-between;
}
button {
border: none;
@@ -110,6 +112,7 @@ button {
height: 50px;
padding: 0;
margin: 0;
+ margin-top: 1em;
background: white;
border-radius: 25px;
display: flex;
@@ -123,4 +126,9 @@ button {
button.active {
background: rgb(30, 30, 30);
}
+
+@media only screen and (max-width: 600px) {
+ nav {
+ }
+}
</style>
diff --git a/app/src/experimental/ViewToolbar.vue b/app/src/experimental/ViewToolbar.vue
index 3c2ebc6a3d7ca722cebd850e03987d6f5d8555a4..aa515dc359820f553941b5e0c665c040decbb7ca 100644
--- a/app/src/experimental/ViewToolbar.vue
+++ b/app/src/experimental/ViewToolbar.vue
@@ -12,8 +12,8 @@ export default {
...mapGetters({
scalePercentage: 'ui/scalePercentage',
isScaled: 'ui/isScaled',
- isTranslated: 'ui/isTranslated'
- })
+ isTranslated: 'ui/isTranslated',
+ }),
},
methods: {
resetScale() {
@@ -21,8 +21,8 @@ export default {
},
resetTranslation() {
this.$store.commit('ui/setTranslation', { x: 0, y: 0 })
- }
- }
+ },
+ },
}
</script>
@@ -44,4 +44,10 @@ button {
border: none;
outline: none;
}
+
+@media only screen and (max-width: 600px) {
+ button {
+ display: none;
+ }
+}
</style>
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 479108b5e68b02c75f531194f2fb307f9172e4ab..982708b608ee4e1837ea042d0ca53194b1ebd698 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -6,7 +6,6 @@ import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import uiStore from '@/experimental/uiStore'
-
import Router from '@/router'
Vue.use(Vuex)
@@ -77,6 +76,7 @@ const store = new Vuex.Store({
pouchdb.close().then(function () {
if (urlmicrocosm != undefined) {
// myclient = urldevice
+
microcosm = urlmicrocosm
} else {
microcosm = doc
@@ -363,7 +363,7 @@ const store = new Vuex.Store({
node_id: uniqueid,
x_pos: 50,
y_pos: 50,
- width: 200,
+ width: 220,
height: 275,
z_index: 1,
read_mode: false,
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 075bafaa1a299549e89252308ee45fd1425df38c..f8b7c25792b98ccaa18bbd6831e7f97ba85bb66f 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -54,8 +54,25 @@
v-bind:nodetext="value.node_text"
/>
</div>
-
- <OnBoard v-else @clientAdded="clientAdded()" />
+ <div v-else>
+ <OnBoard
+ @clientAdded="clientAdded()"
+ @editTrue="(e) => editTrue(e)"
+ />
+ <OtherNodeslayer
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ />
+ <NodesLayer
+ @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"
+ />
+ </div>
</PanZoomContainer>
<ModeToolbar
@@ -176,9 +193,9 @@ export default {
<style scoped>
.wrapper {
- height: calc(100vh - 120px);
+ height: calc(100vh - 40px);
width: calc(100%-80px);
- margin: 40px;
+ margin: 0px;
position: relative;
}
</style>