diff --git a/CHANGELOG.md b/CHANGELOG.md
index c992f6f437045e5da6bfcf3401c8a170ca2dc2cc..bfc05b5a77d384a6a533de3a75432d1b52e24c9b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,43 @@
+# 0.1.28
+
+_10th October 2020_
+
+### Fixed
+
+- Changes and additions in 0.1.26 and 0.1.27 poor implementation of changed so have refactored to work correctly on mobile.
+
+### Removed
+
+- Toolbar showing current microcosm, poor implementation.
+
+# 0.1.27
+
+_9th October 2020_
+
+### Added
+
+- Basic card view of all nodes
+- Leave link in Navigation
+
+### Changed
+
+- List view now you can enter basic read mode
+- List view you can now discard your nodes
+
+# 0.1.26
+
+_6th October 2020_
+
+### Changed
+
+- Renamed Mobile to List
+- Refactored the way the list and discarded view work
+- Added some basic style to list and discarded views
+
+### Added
+
+- The toolbar now shows (in basic form) to you only your device name and the microcosm you are currently viewing
+
# 0.1.25
_2nd October 2020_
diff --git a/app/package.json b/app/package.json
index 7673df313939b6a025a763981de2d6592e20c9fd..933606ccce15057fbb3df40b835fe34d2425662a 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.25",
+ "version": "0.1.28",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/App.vue b/app/src/App.vue
index 7f45790f2709e4f7c5d3d6f02c4cbd0b93176464..d6dc96eb99b715de647cd615f89a5ed905455234 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -9,14 +9,14 @@
import { routes } from './router'
import Navigation from './components/Navigation'
export default {
- data: function() {
+ data: function () {
return {
- routes: routes.filter(route => !!route.name)
+ routes: routes.filter((route) => !!route.name),
}
},
components: {
- navigation: Navigation
- }
+ navigation: Navigation,
+ },
}
</script>
<style>
diff --git a/app/src/components/CardsLayer.vue b/app/src/components/CardsLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3af978600dccfec66cde63daf48eeb9177804588
--- /dev/null
+++ b/app/src/components/CardsLayer.vue
@@ -0,0 +1,172 @@
+<template>
+ <div>
+ <div v-if="deleted == false">
+ <form class="nodes">
+ <div v-for="value in $options.myArray" v-bind:key="value.node_id">
+ <textarea
+ v-if="nodeid == value.node_id"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ v-model="value.node_text"
+ @input="editNode"
+ :id="value.node_id"
+ ref="nodetext"
+ placeholder="Idea goes here!"
+ ></textarea>
+ </div>
+
+ <!-- <div v-if="localreadmode == true && deleted == false">
+ <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+ </div> -->
+ <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()"
+ >Discard</BaseButton
+ >
+ <!-- <div v-if="localreadmode == true && deleted == false">
+ <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>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+//var readmode
+export default {
+ name: 'CardsLayer',
+
+ data: function () {
+ return {
+ // localreadmode: false,
+ }
+ },
+
+ props: {
+ nodeid: String,
+ nodetext: String,
+ deleted: Boolean,
+ },
+
+ computed: mapState({
+ myNodes: (state) => state.myNodes,
+ configPositions: (state) => state.configPositions,
+ configEmoji: (state) => state.configEmoji,
+ }),
+
+ myArray: null,
+ created() {
+ this.$options.myArray = this.myNodes
+ this.readFlag
+ },
+
+ methods: {
+ editNode(e) {
+ var nodeid = e.target.id
+ var nodetext = e.target.value
+ this.$store.dispatch('editNode', { nodeid, nodetext })
+ },
+
+ editTrue(e) {
+ this.$emit('editTrue', e)
+ },
+
+ deleteFlag(e) {
+ e = this.nodeid
+ this.$store.dispatch('deleteFlag', { e })
+ },
+
+ // readFlag(e) {
+ // e = this.nodeid
+
+ // var i
+ // for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+ // if (this.configPositions[i].node_id == this.nodeid) {
+ // this.localreadmode = this.configPositions[i].read_mode
+ // }
+ // }
+
+ // if (this.localreadmode == true) {
+ // readmode = false
+ // this.$store.dispatch('readFlag', { e, readmode })
+ // this.mode = 'Read'
+ // } else {
+ // readmode = true
+ // this.$store.dispatch('readFlag', { e, readmode })
+ // this.mode = 'Edit'
+ // }
+ // },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+h2 {
+ color: red;
+}
+
+.nodes {
+ width: 95%;
+ border: 2px dashed black;
+ background-color: rgb(155, 194, 216);
+ margin-top: 1em;
+ margin-left: 1em;
+}
+
+textarea {
+ width: 90%;
+ 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: 1em;
+ border: none;
+ outline: none;
+ background-color: rgb(187, 227, 255);
+ scrollbar-color: yellow rgb(187, 227, 255);
+}
+.btn-row {
+ position: relative;
+ margin-bottom: 5px;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ padding: 0 15px;
+ border-radius: 4px;
+}
+
+.allemoji {
+ font-size: 2em;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(0, auto));
+
+ /* float: left; */
+}
+
+.eachemoji p {
+ margin: 0em;
+}
+</style>
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 033eb3ce7ff269f2ea85e7ac7453f7f35e453630..49288b2d2b3de4f791d741d5ed41983d5e1c74a8 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -78,6 +78,7 @@ export default {
myArray: null,
created() {
this.$options.myArray = this.myNodes
+ this.readFlag
},
methods: {
diff --git a/app/src/components/OtherCardslayer.vue b/app/src/components/OtherCardslayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83a7c42aefa8241c3bf5bc60a52f5c2ee51b7883
--- /dev/null
+++ b/app/src/components/OtherCardslayer.vue
@@ -0,0 +1,94 @@
+<template>
+ <div>
+ <div v-if="deleted == false">
+ <div class="nodes">
+ <p :inner-html.prop="nodetext | marked"></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>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+export default {
+ name: 'OtherCardslayer',
+
+ data: function () {
+ return {}
+ },
+
+ props: {
+ nodeid: String,
+ nodetext: String,
+ deleted: Boolean,
+ },
+
+ computed: mapState({
+ otherNodes: (state) => state.otherNodes,
+ configEmoji: (state) => state.configEmoji,
+ }),
+
+ filters: {
+ marked: marked,
+ },
+}
+</script>
+
+<style lang="css" scoped>
+h2 {
+ color: red;
+}
+
+.nodes {
+ width: 300px;
+ border: 2px dashed black;
+ background-color: rgb(155, 194, 216);
+ margin-top: 1em;
+ margin-left: 1em;
+}
+
+p {
+ width: 90%;
+ /* 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: 1em;
+}
+.btn-row {
+ position: relative;
+ margin-bottom: 5px;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ padding: 0 15px;
+ border-radius: 4px;
+}
+
+.allemoji {
+ font-size: 2em;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(0, auto));
+
+ /* float: left; */
+}
+
+.eachemoji p {
+ margin: 0em;
+}
+</style>
diff --git a/app/src/router/index.js b/app/src/router/index.js
index fabc5fd3cb8601e50422199b89df05691ecf3602..83879cc8c8c51eed1508cee1da6c44e1cfa1f4b4 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -1,6 +1,7 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
+import Cards from '../views/Cards.vue'
import List from '../views/List.vue'
import Discarded from '../views/Discarded.vue'
import Leave from '../views/Leave.vue'
@@ -15,6 +16,11 @@ export const routes = [
name: 'Home',
component: Home,
},
+ {
+ path: '/cards',
+ name: 'Cards',
+ component: Cards,
+ },
{
path: '/list',
name: 'My List',
diff --git a/app/src/views/Cards.vue b/app/src/views/Cards.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b2fc5ecaeae18932d03d5feade9d41e77ae27cb4
--- /dev/null
+++ b/app/src/views/Cards.vue
@@ -0,0 +1,139 @@
+<template>
+ <div id="listwrapper">
+ <div v-if="clientset">
+ <h1 class="mobile">Your nodes - list mode</h1>
+
+ <div class="btn-row">
+ <BaseButton class="new" buttonClass="action" @click="addNode()"
+ >Create Node</BaseButton
+ >
+ </div>
+
+ <div class="grid">
+ <CardsLayer
+ @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"
+ v-bind:deleted="value.deleted"
+ />
+
+ <OtherCardslayer
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
+ />
+ </div>
+ </div>
+
+ <div v-else>
+ <OtherNodeslayer
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
+ />
+ <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"
+ v-bind:deleted="value.deleted"
+ />
+ <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
+ </div>
+ </div>
+</template>
+
+<script>
+//import Router from '@/router'
+import CardsLayer from '@/components/CardsLayer'
+import OtherCardslayer from '@/components/OtherCardslayer'
+import OnBoard from '@/components/OnBoard'
+import NodesLayer from '@/components/NodesLayer'
+import OtherNodeslayer from '@/components/OtherNodeslayer'
+
+import { mapState } from 'vuex'
+
+import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
+
+export default {
+ name: 'List',
+
+ mixins: [shortcutsMixin],
+ data: function () {
+ return {
+ clientset: false,
+ }
+ },
+
+ props: {
+ nodeid: String,
+ nodetext: String,
+ deleted: Boolean,
+ },
+
+ computed: {
+ ...mapState({
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
+ shortcutstate: (state) => state.shortcutstate,
+ toolmode: (state) => state.ui.mode,
+ }),
+ },
+
+ created() {
+ if (typeof window !== 'undefined') {
+ document.addEventListener('keydown', this.handleKeyPress)
+ }
+ },
+
+ beforeDestroy() {
+ if (typeof window !== 'undefined') {
+ document.removeEventListener('keydown', this.handleKeyPress)
+ }
+ },
+
+ methods: {
+ clientAdded() {
+ this.clientset = !this.clientset
+ },
+
+ addNode() {
+ this.$store.dispatch('addNode')
+ },
+
+ editTrue(e) {
+ this.$store.dispatch('shortcutState', e)
+ },
+ },
+ components: {
+ CardsLayer,
+ OtherCardslayer,
+
+ OnBoard,
+ OtherNodeslayer,
+ NodesLayer,
+ },
+}
+</script>
+
+<style lang="css" scoped>
+.grid {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.mobile {
+ margin-left: 1em;
+ font-size: 1em;
+}
+.new {
+ margin-bottom: 1em;
+}
+</style>
diff --git a/app/src/views/Discarded-old.vue b/app/src/views/Discarded-old.vue
deleted file mode 100644
index 901dfabf9aced6fe7847536cce55a39b0f1fb2cd..0000000000000000000000000000000000000000
--- a/app/src/views/Discarded-old.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
- <div id="discardwrapper">
- <h1 class="restore">Your discarded nodes</h1>
-
- <div v-if="clientset">
- <form>
- <div v-for="value in myNodes" v-bind:key="value.node_id">
- <div v-if="value.deleted == true">
- {{ value.node_text }}
-
- <div class="btn-row">
- <BaseButton
- class="new"
- buttonClass="action"
- @click="restoreNode(value.node_id)"
- >Restore</BaseButton
- >
- </div>
- </div>
- </div>
- </form>
- </div>
- <!-- // onboarding for list view -->
- <div v-else>
- <form>
- <div>
- <p id="nodeid" :inner-html.prop="nodetext1 | marked"></p>
-
- <div v-if="name == false">
- <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>
- <div v-else>
- <h4>Saved</h4>
- </div>
- </div>
- </form>
-
- <form>
- <div>
- <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
- <div v-if="microcosm == false">
- <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>
- <div v-else>
- <h4>Loading...</h4>
- </div>
- </div>
- </form>
- </div>
- </div>
- <!-- </div> -->
-</template>
-
-<script>
-// import OffLine from '@/components/OffLine'
-// import OnBoard from '@/components/OnBoard.vue'
-import Router from '@/router'
-
-import { mapState } from 'vuex'
-import marked from 'marked'
-import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-
-export default {
- name: 'Discarded',
- mixins: [shortcutsMixin],
- data: function () {
- return {
- localmicrocosm: Router.currentRoute.params.microcosm,
- clientid: '',
- clientset: false,
- offline: false,
- nodetext1:
- '## 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:
- '## Join/Start a microcosm ! 🚀 \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>',
- name: false,
- microcosm: false,
- }
- },
-
- props: {
- nodeid: String,
- nodetext: String,
- deleted: Boolean,
- },
-
- computed: mapState({
- myNodes: (state) => state.myNodes,
- configPositions: (state) => state.configPositions,
- shortcutstate: (state) => state.shortcutstate,
- }),
-
- created() {
- if (typeof window !== 'undefined') {
- document.addEventListener('keydown', this.handleKeyPress)
- }
- },
-
- beforeDestroy() {
- if (typeof window !== 'undefined') {
- document.removeEventListener('keydown', this.handleKeyPress)
- }
- },
-
- mounted() {
- if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
- this.clientid = localStorage.myNNClient
- this.localmicrocosm = localStorage.mylastMicrocosm
- this.createMicrocosm()
- this.setClient()
- this.letsGo()
- this.clientset = 'true'
- }
- },
-
- components: {
- // OnBoard,
- // OffLine,
- //ModeToolbar,
- },
-
- filters: {
- marked: marked,
- },
- methods: {
- clientAdded() {
- this.clientset = !this.clientset
- },
-
- createMicrocosm() {
- this.$store.dispatch('createMicrocosm', this.localmicrocosm)
- localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
- this.microcosm = true
- },
- setClient() {
- this.$store.dispatch('setClient', this.clientid),
- localStorage.setItem('myNNClient', this.clientid)
- this.name = true
- },
-
- letsGo() {
- this.clientset = !this.clientset
- this.$emit('clientAdded')
- },
-
- restoreNode(e) {
- this.$store.dispatch('restoreNode', { e })
- },
-
- editTrue(e) {
- this.$store.dispatch('shortcutState', e)
- },
-
- editNode(e) {
- var nodeid = e.target.id
- var nodetext = e.target.value
- this.$store.dispatch('editNode', { nodeid, nodetext })
- },
- },
-}
-</script>
-
-<style lang="css" scoped>
-textarea {
- width: 95%;
- height: 100px;
- margin-left: 1em;
- margin-bottom: 1em;
-}
-</style>
diff --git a/app/src/views/Discarded.vue b/app/src/views/Discarded.vue
index 7679a79e670010c89b0421d5e1c455cb778707b4..40b4c07f70a46817ed1431b0fce3755c88c25009 100644
--- a/app/src/views/Discarded.vue
+++ b/app/src/views/Discarded.vue
@@ -13,17 +13,33 @@
</div>
<div v-else>
+ <OtherNodeslayer
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
+ />
+ <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"
+ v-bind:deleted="value.deleted"
+ />
<OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
</div>
</div>
</template>
<script>
-import Router from '@/router'
import DiscardLayer from '@/components/DiscardLayer'
import OnBoard from '@/components/OnBoard'
+import NodesLayer from '@/components/NodesLayer'
+import OtherNodeslayer from '@/components/OtherNodeslayer'
import { mapState } from 'vuex'
-import marked from 'marked'
+
import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
export default {
@@ -32,12 +48,7 @@ export default {
mixins: [shortcutsMixin],
data: function () {
return {
- localmicrocosm: Router.currentRoute.params.microcosm,
- clientid: '',
clientset: false,
- offline: false,
- name: false,
- microcosm: false,
}
},
@@ -50,7 +61,7 @@ export default {
computed: {
...mapState({
myNodes: (state) => state.myNodes,
- // otherNodes: (state) => state.otherNodes,
+ otherNodes: (state) => state.otherNodes,
shortcutstate: (state) => state.shortcutstate,
toolmode: (state) => state.ui.mode,
}),
@@ -73,10 +84,6 @@ export default {
this.clientset = !this.clientset
},
- addNode() {
- this.$store.dispatch('addNode')
- },
-
editTrue(e) {
this.$store.dispatch('shortcutState', e)
},
@@ -84,9 +91,8 @@ export default {
components: {
DiscardLayer,
OnBoard,
- },
- filters: {
- marked: marked,
+ NodesLayer,
+ OtherNodeslayer,
},
}
</script>
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 618b5db0de1170067a7886904ea2a361dc4aa72a..86098d715f0c437695de26149f18969046c2d523 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -19,17 +19,35 @@
</div>
<div v-else>
+ <OtherNodeslayer
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
+ />
+ <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"
+ v-bind:deleted="value.deleted"
+ />
<OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
</div>
</div>
</template>
<script>
-import Router from '@/router'
+//import Router from '@/router'
import ListLayer from '@/components/ListLayer'
import OnBoard from '@/components/OnBoard'
+import NodesLayer from '@/components/NodesLayer'
+import OtherNodeslayer from '@/components/OtherNodeslayer'
+
import { mapState } from 'vuex'
-import marked from 'marked'
+
import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
export default {
@@ -38,12 +56,7 @@ export default {
mixins: [shortcutsMixin],
data: function () {
return {
- localmicrocosm: Router.currentRoute.params.microcosm,
- clientid: '',
clientset: false,
- offline: false,
- name: false,
- microcosm: false,
}
},
@@ -56,7 +69,7 @@ export default {
computed: {
...mapState({
myNodes: (state) => state.myNodes,
- // otherNodes: (state) => state.otherNodes,
+ otherNodes: (state) => state.otherNodes,
shortcutstate: (state) => state.shortcutstate,
toolmode: (state) => state.ui.mode,
}),
@@ -90,9 +103,8 @@ export default {
components: {
ListLayer,
OnBoard,
- },
- filters: {
- marked: marked,
+ OtherNodeslayer,
+ NodesLayer,
},
}
</script>