From 65453a4f3e2fefe73b846c18a2895a9406986463 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Sun, 7 Jun 2020 12:10:39 +0100
Subject: [PATCH] move Sandbox to be Home
Updated so that the Sandbox view is now the default starting view, which has more features
---
app/src/components/OnBoard.vue | 12 +-
app/src/experimental/ModeToolbar.vue | 4 +-
app/src/experimental/icons/library/exit.vue | 12 ++
app/src/experimental/icons/library/index.js | 2 +
app/src/router/index.js | 20 +--
app/src/views/Home.vue | 162 ++++++++++++--------
app/src/views/Oldhome.vue | 128 ++++++++++++++++
app/src/views/Sandbox.vue | 156 -------------------
8 files changed, 256 insertions(+), 240 deletions(-)
create mode 100644 app/src/experimental/icons/library/exit.vue
create mode 100644 app/src/views/Oldhome.vue
delete mode 100644 app/src/views/Sandbox.vue
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index d5aa8b0..4f2f60c 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 f11df85..ddac961 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -37,9 +37,11 @@ export default {
setMode(mode) {
this.$store.commit('ui/setMode', mode)
if (mode == 'exit') {
- console.log('YOu')
this.removeLocal()
}
+ if (mode == 'addNode') {
+ this.$store.dispatch('addNode')
+ }
},
isActive(mode) {
return this.mode === mode.name
diff --git a/app/src/experimental/icons/library/exit.vue b/app/src/experimental/icons/library/exit.vue
new file mode 100644
index 0000000..dd1ed4a
--- /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 99ac758..8568f9a 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 79aa399..cc1562b 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 8515a9c..fbd822f 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,29 +1,23 @@
<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>
+ <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"
@@ -32,68 +26,93 @@
v-bind:nodetext="value.node_text"
/>
</div>
- <ControlsLayer @listView="listView()" />
- </div>
- <OnBoard v-else @clientAdded="clientAdded()" />
+ <OnBoard v-else @clientAdded="clientAdded()" />
+ </PanZoomContainer>
+ <!-- <SelectionLayer
+ v-if="domContainerReady"
+ v-bind:shape="interaction.shape"
+ v-bind:width="elementWidth"
+ v-bind:height="elementHeight"
+ /> -->
+ <ModeToolbar
+ @offlineTriggered="offlineTriggered()"
+ @onlineTriggered="onlineTriggered()"
+ />
+ <ViewToolbar />
</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 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 +126,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 +133,24 @@ export default {
this.offline = false
},
},
+ components: {
+ ModeToolbar,
+ ViewToolbar,
+ PanZoomContainer,
+ // SelectionLayer,
+ NodesLayer,
+ OtherNodeslayer,
+ ConnectionsLayer,
+ OnBoard,
+ },
}
</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 0000000..bc08863
--- /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 d6f1a74..0000000
--- a/app/src/views/Sandbox.vue
+++ /dev/null
@@ -1,156 +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
- @offlineTriggered="offlineTriggered()"
- @onlineTriggered="onlineTriggered()"
- />
- <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>
--
GitLab