diff --git a/app/src/components/ControlsLayer.vue b/app/src/components/ControlsLayer.vue
index 7401faed630a3a7748931883fa9b82e93869ef56..9d875ce05b114361c288e416b97aa5e4f1aec295 100644
--- a/app/src/components/ControlsLayer.vue
+++ b/app/src/components/ControlsLayer.vue
@@ -35,7 +35,7 @@
<script>
// This is for detecting offline issues
-var serverUrl = 'https://nodenogg.in'
+var serverUrl = 'http://127.0.0.1:5984'
import { mapState } from 'vuex'
export default {
@@ -45,8 +45,8 @@ export default {
},
computed: mapState({
- myMicrocosm: state => state.microcosm,
- myClient: state => state.myclient
+ myMicrocosm: (state) => state.microcosm,
+ myClient: (state) => state.myclient,
}),
methods: {
addNode() {
@@ -56,11 +56,11 @@ export default {
// FIXME: add action here to toggle visiblity
this.$emit('listView')
},
- exportStorage: function() {
+ exportStorage: function () {
// Save local indexeddb document-store to JSON file
// or export state.notes to JSON file
},
- removeLocal: function() {
+ removeLocal: function () {
localStorage.removeItem('myNNClient')
localStorage.removeItem('mylastMicrocosm')
// Hardcoded as when I set a URL had parameters the reload fails
@@ -76,10 +76,11 @@ export default {
deleteClient() {
this.$store.dispatch('deleteClient')
},
- handleConnection: function() {
+ handleConnection: function () {
var ref = this
+
if (navigator.onLine) {
- this.isReachable(this.getServerUrl()).then(function(online) {
+ this.isReachable(this.getServerUrl()).then(function (online) {
if (online) {
// handle online status
console.log('online')
@@ -94,19 +95,19 @@ export default {
ref.$emit('offlineTriggered')
}
},
- isReachable: function(url) {
+ isReachable: function (url) {
return fetch(url, { method: 'HEAD', mode: 'no-cors' })
- .then(function(resp) {
+ .then(function (resp) {
return resp && (resp.ok || resp.type === 'opaque')
})
- .catch(function(err) {
+ .catch(function (err) {
console.warn('[conn test failure]:', err)
})
},
- getServerUrl: function() {
+ getServerUrl: function () {
return serverUrl || window.location.origin
- }
- }
+ },
+ },
}
</script>
diff --git a/app/src/components/OffLine.vue b/app/src/components/OffLine.vue
new file mode 100644
index 0000000000000000000000000000000000000000..249ec444d956b8a633b0379f0a8c419d96066f44
--- /dev/null
+++ b/app/src/components/OffLine.vue
@@ -0,0 +1,72 @@
+// FIXME: Everything below is OLD code
+
+<template>
+ <div class="yourdata" name="anchorName">
+ <div v-for="value in myNodes" v-bind:key="value.node_id">
+ <textarea
+ v-if="nodeid == value.node_id"
+ @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!"
+ ></textarea>
+ </div>
+
+ <div class="btn-row">
+ <BaseButton buttonClass="danger" @click="deleteFlag()">Delete</BaseButton>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'OffLine',
+ computed: mapState({
+ myNodes: (state) => state.myNodes,
+ }),
+
+ props: {
+ nodeid: String,
+ },
+
+ methods: {
+ addDoc() {
+ this.$store.dispatch('addDoc')
+ this.$emit('editMode')
+ },
+ editTrue(e) {
+ this.$emit('editTrue', e)
+ //console.log(e)
+ },
+
+ editNode(e) {
+ var nodeid = e.target.id
+ var nodetext = e.target.value
+ this.$store.dispatch('editNode', { nodeid, nodetext })
+ },
+
+ deleteFlag(e) {
+ e = this.nodeid
+ this.$store.dispatch('deleteFlag', { e })
+ },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+h3 {
+ margin-top: 1em;
+}
+
+.data p {
+ white-space: pre-wrap;
+ line-height: 1em;
+}
+</style>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index d5aa8b094c844a829d22e38cec4b559d42e3db71..4f2f60c0792439b593c89390e3aef41c367f9d77 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -73,13 +73,13 @@ var delaytwo = 100
import Router from '@/router'
export default {
- data: function() {
+ data: function () {
return {
localmicrocosm: Router.currentRoute.params.microcosm,
clientid: '',
parta: true,
partb: false,
- partc: false
+ partc: false,
}
},
@@ -120,8 +120,8 @@ export default {
},
readyFocusTwo() {
this.$refs.objectnametwo.focus()
- }
- }
+ },
+ },
}
</script>
@@ -166,9 +166,9 @@ input {
@media only screen and (min-width: 640px) {
/* Style adjustments for viewports that meet the condition */
- .notlogged {
+ /* .notlogged {
grid-column: 1 / 3;
grid-row: 1;
- }
+ } */
}
</style>
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index aef16001a061e2b89a7d5f8a91df29fc7363b85a..ddac9616ae8b85cce4e206260ed8e887473cf11c 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -15,7 +15,7 @@
</template>
<script>
-var serverUrl = 'https://nodenogg.in'
+var serverUrl = 'http://127.0.0.1:5984'
import { mapState, mapGetters } from 'vuex'
import * as allModes from '@/experimental/modes'
@@ -36,13 +36,15 @@ export default {
methods: {
setMode(mode) {
this.$store.commit('ui/setMode', mode)
+ if (mode == 'exit') {
+ this.removeLocal()
+ }
+ if (mode == 'addNode') {
+ this.$store.dispatch('addNode')
+ }
},
isActive(mode) {
return this.mode === mode.name
-
- // if (mode.name == 'exit') {
- // console.log('exit')
- // }
},
removeLocal: function () {
diff --git a/app/src/experimental/icons/library/exit.vue b/app/src/experimental/icons/library/exit.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd1ed4aef054dbd2653423db0aceb6d690aee508
--- /dev/null
+++ b/app/src/experimental/icons/library/exit.vue
@@ -0,0 +1,12 @@
+<template>
+ <g>
+ <path d="M21 6H45V43H21" stroke="black" stroke-width="3" />
+ <rect x="18" y="8" width="25" height="32" fill="white" />
+ <path
+ d="M1.93934 23.9393C1.35355 24.5251 1.35355 25.4749 1.93934 26.0607L11.4853 35.6066C12.0711 36.1924 13.0208 36.1924 13.6066 35.6066C14.1924 35.0208 14.1924 34.0711 13.6066 33.4853L5.12132 25L13.6066 16.5147C14.1924 15.9289 14.1924 14.9792 13.6066 14.3934C13.0208 13.8076 12.0711 13.8076 11.4853 14.3934L1.93934 23.9393ZM32 23.5L3 23.5V26.5L32 26.5V23.5Z"
+ fill="black"
+ />
+ <line x1="22.5" y1="6" x2="22.5" y2="18" stroke="black" stroke-width="3" />
+ <line x1="22.5" y1="32" x2="22.5" y2="44" stroke="black" stroke-width="3" />
+ </g>
+</template>
diff --git a/app/src/experimental/icons/library/index.js b/app/src/experimental/icons/library/index.js
index 99ac758974b9283e02fd8d7afbd1e84001f2a0ce..8568f9ad38b4cd1edccdf9a8933f169783b7fb24 100644
--- a/app/src/experimental/icons/library/index.js
+++ b/app/src/experimental/icons/library/index.js
@@ -9,6 +9,7 @@ import person from './person'
import plus from './plus'
import select from './select'
import upload from './upload'
+import exit from './exit'
export {
addNode,
@@ -22,4 +23,5 @@ export {
plus,
select,
upload,
+ exit,
}
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 79aa399f4784a0b7019968b2d85f2974572cd08b..cc1562b66a762d2f399fafe9d56e379ed9bdf6ac 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -1,7 +1,7 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
-import Sandbox from '../views/Sandbox'
+import Oldhome from '../views/Oldhome'
Vue.use(VueRouter)
@@ -9,12 +9,12 @@ export const routes = [
{
path: '/',
name: 'Home',
- component: Home
+ component: Home,
},
{
- path: '/sandbox',
- name: 'Sandbox',
- component: Sandbox
+ path: '/oldhome',
+ name: 'Old Home',
+ component: Oldhome,
},
{
path: '/about',
@@ -23,12 +23,12 @@ export const routes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
- import(/* webpackChunkName: "about" */ '../views/About.vue')
+ import(/* webpackChunkName: "about" */ '../views/About.vue'),
},
// dynamic segement `:microcosm` is added to the path
{
path: '/microcosm/:microcosm',
- component: Home
+ component: Home,
},
{
@@ -38,8 +38,8 @@ export const routes = [
component: () =>
import(
/* webpackChunkName: "NotFoundComponent" */ '../views/NotFound.vue'
- )
- }
+ ),
+ },
]
const router = new VueRouter({
@@ -47,7 +47,7 @@ const router = new VueRouter({
//base: 'https://alpha.nodenogg.in/',
//base: process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '',
//base: process.env.VUE_APP_HTTP,
- routes
+ routes,
})
export default router
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 8515a9c14203be213fbf45a9fa93919a77337dc8..075bafaa1a299549e89252308ee45fd1425df38c 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,99 +1,145 @@
<template>
- <div class="home">
- <div v-if="clientset">
- <div v-if="listview">
- <ListLayer
+ <div>
+ <div class="offline" v-if="clientset && offline">
+ <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
+ <h2>Offline</h2>
+ <p>
+ nodenogg.in appears to be offline, which means you cant see other data
+ at this stage, as it maybe out of date. Once you reconnect. Your data
+ will sync and the main views will reappear. This maybe down to you or
+ maybe us. If you think it's us let us know.
+ </p>
+ <OffLine
v-for="value in myNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
+ @editTrue="(e) => editTrue(e)"
/>
-
- <OtherListlayer
- v-for="value in otherNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
+ <ModeToolbar
+ @offlineTriggered="offlineTriggered()"
+ @onlineTriggered="onlineTriggered()"
/>
+ <ViewToolbar />
+
+ <!-- <OnBoard v-else @clientAdded="clientAdded()" /> -->
</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"
+ </div>
+
+ <div class="online" v-else>
+ <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
+ <ConnectionsLayer
+ v-bind:width="width"
+ v-bind:height="height"
+ v-bind:connections="connections"
/>
+ <PanZoomContainer
+ v-bind:width="width"
+ v-bind:height="height"
+ v-bind:scale="scale"
+ v-bind:translation="translation"
+ >
+ <div v-if="clientset">
+ <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>
- <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"
+ <OnBoard v-else @clientAdded="clientAdded()" />
+ </PanZoomContainer>
+
+ <ModeToolbar
+ @offlineTriggered="offlineTriggered()"
+ @onlineTriggered="onlineTriggered()"
/>
+ <ViewToolbar />
</div>
- <ControlsLayer @listView="listView()" />
</div>
- <OnBoard v-else @clientAdded="clientAdded()" />
</div>
</template>
<script>
-// @ is an alias to /src
-import OnBoard from '@/components/OnBoard.vue'
-import NodesLayer from '@/components/NodesLayer.vue'
+import PanZoomContainer from '@/experimental/PanZoomContainer'
+import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
+import NodesLayer from '@/components/NodesLayer'
+import OffLine from '@/components/OffLine'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
-import ListLayer from '@/components/ListLayer.vue'
-import OtherListlayer from '@/components/OtherListlayer.vue'
-import ControlsLayer from '@/components/ControlsLayer.vue'
-
-import { mapState } from 'vuex'
+import OnBoard from '@/components/OnBoard.vue'
+import ModeToolbar from '@/experimental/ModeToolbar'
+import ViewToolbar from '@/experimental/ViewToolbar'
+// import SelectionLayer from '@/experimental/layers/SelectionLayer'
import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-// import Router from '@/router'
-// console.log(Router.currentRoute.params.microcosm)
+import { mapGetters, mapState } from 'vuex'
export default {
name: 'Home',
- // Shortcut mixin is here so we can call the keyboard controls anytime
mixins: [shortcutsMixin],
+ data: function () {
+ return {
+ elementWidth: undefined,
+ elementHeight: undefined,
+ width: 2000,
+ height: 2000,
+ clientset: false,
+ listview: false,
+ offline: false,
+ }
+ },
+ computed: {
+ domContainerReady() {
+ return !!this.elementWidth && !!this.elementHeight
+ },
+ ...mapState({
+ interaction: (state) => state.ui.interaction,
+ scale: (state) => state.ui.scale,
+ translation: (state) => state.ui.translation,
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
+ shortcutstate: (state) => state.shortcutstate,
+ connections: (state) => state.configConnections,
+ }),
+ ...mapGetters({
+ activeMode: 'ui/activeMode',
+ modeContainerStyle: 'ui/modeContainerStyle',
+ }),
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleResize)
+ this.handleResize()
+ },
+
created() {
if (typeof window !== 'undefined') {
document.addEventListener('keydown', this.handleKeyPress)
}
- if (localStorage.myNNClient == null) {
- // visiting from URL get them to name client
- // localStorage.setItem('myNNClient', 'unknown client')
- // console.log(localStorage.myNNClient)
- }
},
+
beforeDestroy() {
if (typeof window !== 'undefined') {
document.removeEventListener('keydown', this.handleKeyPress)
}
},
- data: function () {
- return {
- clientset: false,
- listview: false,
- offline: false,
- }
+ destroyed() {
+ window.removeEventListener('resize', this.handleResize)
},
-
- components: {
- OnBoard,
- NodesLayer,
- OtherNodeslayer,
- ListLayer,
- OtherListlayer,
- ControlsLayer,
- },
- computed: mapState({
- myNodes: (state) => state.myNodes,
- otherNodes: (state) => state.otherNodes,
- shortcutstate: (state) => state.shortcutstate,
- }),
methods: {
+ handleResize() {
+ const { offsetWidth, offsetHeight } = this.$refs.container
+ this.elementWidth = offsetWidth
+ this.elementHeight = offsetHeight
+ },
+
clientAdded() {
this.clientset = !this.clientset
},
@@ -107,14 +153,6 @@ export default {
this.$store.dispatch('addNode')
},
- listView() {
- if (this.listview == false) {
- this.listview = true
- } else {
- this.listview = false
- }
- },
-
offlineTriggered() {
this.offline = true
},
@@ -122,7 +160,25 @@ export default {
this.offline = false
},
},
+ components: {
+ ModeToolbar,
+ ViewToolbar,
+ PanZoomContainer,
+ // SelectionLayer,
+ NodesLayer,
+ OtherNodeslayer,
+ ConnectionsLayer,
+ OnBoard,
+ OffLine,
+ },
}
</script>
-<style scoped></style>
+<style scoped>
+.wrapper {
+ height: calc(100vh - 120px);
+ width: calc(100%-80px);
+ margin: 40px;
+ position: relative;
+}
+</style>
diff --git a/app/src/views/Oldhome.vue b/app/src/views/Oldhome.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc08863987e9de04ce82382ea25e9180f386bc36
--- /dev/null
+++ b/app/src/views/Oldhome.vue
@@ -0,0 +1,128 @@
+<template>
+ <div class="home">
+ <div v-if="clientset">
+ <div v-if="listview">
+ <ListLayer
+ v-for="value in myNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ />
+
+ <OtherListlayer
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ />
+ </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"
+ />
+
+ <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>
+ <ControlsLayer @listView="listView()" />
+ </div>
+ <OnBoard v-else @clientAdded="clientAdded()" />
+ </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import OnBoard from '@/components/OnBoard.vue'
+import NodesLayer from '@/components/NodesLayer.vue'
+import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
+import ListLayer from '@/components/ListLayer.vue'
+import OtherListlayer from '@/components/OtherListlayer.vue'
+import ControlsLayer from '@/components/ControlsLayer.vue'
+
+import { mapState } from 'vuex'
+import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
+// import Router from '@/router'
+// console.log(Router.currentRoute.params.microcosm)
+
+export default {
+ name: 'Oldhome',
+ // Shortcut mixin is here so we can call the keyboard controls anytime
+ mixins: [shortcutsMixin],
+ created() {
+ if (typeof window !== 'undefined') {
+ document.addEventListener('keydown', this.handleKeyPress)
+ }
+ if (localStorage.myNNClient == null) {
+ // visiting from URL get them to name client
+ // localStorage.setItem('myNNClient', 'unknown client')
+ // console.log(localStorage.myNNClient)
+ }
+ },
+ beforeDestroy() {
+ if (typeof window !== 'undefined') {
+ document.removeEventListener('keydown', this.handleKeyPress)
+ }
+ },
+
+ data: function () {
+ return {
+ clientset: false,
+ listview: false,
+ offline: false,
+ }
+ },
+
+ components: {
+ OnBoard,
+ NodesLayer,
+ OtherNodeslayer,
+ ListLayer,
+ OtherListlayer,
+ ControlsLayer,
+ },
+ computed: mapState({
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
+ shortcutstate: (state) => state.shortcutstate,
+ }),
+ methods: {
+ clientAdded() {
+ this.clientset = !this.clientset
+ },
+
+ editTrue(e) {
+ this.$store.dispatch('shortcutState', e)
+ },
+
+ // This is here to support the shortcuts
+ addNode() {
+ this.$store.dispatch('addNode')
+ },
+
+ listView() {
+ if (this.listview == false) {
+ this.listview = true
+ } else {
+ this.listview = false
+ }
+ },
+
+ offlineTriggered() {
+ this.offline = true
+ },
+ onlineTriggered() {
+ this.offline = false
+ },
+ },
+}
+</script>
+
+<style scoped></style>
diff --git a/app/src/views/Sandbox.vue b/app/src/views/Sandbox.vue
deleted file mode 100644
index d823a24ec21dc92a0b51e916ee9ecc85830a809f..0000000000000000000000000000000000000000
--- a/app/src/views/Sandbox.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
- <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
- <ConnectionsLayer
- v-bind:width="width"
- v-bind:height="height"
- v-bind:connections="connections"
- />
- <PanZoomContainer
- v-bind:width="width"
- v-bind:height="height"
- v-bind:scale="scale"
- v-bind:translation="translation"
- >
- <div v-if="clientset">
- <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>
- <OnBoard v-else @clientAdded="clientAdded()" />
- </PanZoomContainer>
- <!-- <SelectionLayer
- v-if="domContainerReady"
- v-bind:shape="interaction.shape"
- v-bind:width="elementWidth"
- v-bind:height="elementHeight"
- /> -->
- <ModeToolbar />
- <ViewToolbar />
- </div>
-</template>
-
-<script>
-import PanZoomContainer from '@/experimental/PanZoomContainer'
-import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
-import NodesLayer from '@/components/NodesLayer'
-import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
-import OnBoard from '@/components/OnBoard.vue'
-import ModeToolbar from '@/experimental/ModeToolbar'
-import ViewToolbar from '@/experimental/ViewToolbar'
-// import SelectionLayer from '@/experimental/layers/SelectionLayer'
-import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-import { mapGetters, mapState } from 'vuex'
-
-export default {
- name: 'Sandbox',
- mixins: [shortcutsMixin],
- data: function () {
- return {
- elementWidth: undefined,
- elementHeight: undefined,
- width: 2000,
- height: 2000,
- clientset: false,
- listview: false,
- offline: false,
- }
- },
- computed: {
- domContainerReady() {
- return !!this.elementWidth && !!this.elementHeight
- },
- ...mapState({
- interaction: (state) => state.ui.interaction,
- scale: (state) => state.ui.scale,
- translation: (state) => state.ui.translation,
- myNodes: (state) => state.myNodes,
- otherNodes: (state) => state.otherNodes,
- shortcutstate: (state) => state.shortcutstate,
- connections: (state) => state.configConnections,
- }),
- ...mapGetters({
- activeMode: 'ui/activeMode',
- modeContainerStyle: 'ui/modeContainerStyle',
- }),
- },
- mounted() {
- window.addEventListener('resize', this.handleResize)
- this.handleResize()
- },
-
- created() {
- if (typeof window !== 'undefined') {
- document.addEventListener('keydown', this.handleKeyPress)
- }
- },
-
- beforeDestroy() {
- if (typeof window !== 'undefined') {
- document.removeEventListener('keydown', this.handleKeyPress)
- }
- },
-
- destroyed() {
- window.removeEventListener('resize', this.handleResize)
- },
- methods: {
- handleResize() {
- const { offsetWidth, offsetHeight } = this.$refs.container
- this.elementWidth = offsetWidth
- this.elementHeight = offsetHeight
- },
-
- clientAdded() {
- this.clientset = !this.clientset
- },
-
- editTrue(e) {
- this.$store.dispatch('shortcutState', e)
- },
-
-
-
- // This is here to support the shortcuts
- addNode() {
- this.$store.dispatch('addNode')
- },
-
- offlineTriggered() {
- this.offline = true
- },
- onlineTriggered() {
- this.offline = false
- },
- },
- components: {
- ModeToolbar,
- ViewToolbar,
- PanZoomContainer,
- // SelectionLayer,
- NodesLayer,
- OtherNodeslayer,
- ConnectionsLayer,
- OnBoard,
- },
-}
-</script>
-
-<style scoped>
-.wrapper {
- height: calc(100vh - 120px);
- width: calc(100%-80px);
- margin: 40px;
- position: relative;
-}
-</style>