Layers

neuroanatomy · Dec 17, 2023 · b01ab11 · b01ab11
1 parent 3519237
commit b01ab11
Show file tree

Hide file tree

Showing 12 changed files with 474 additions and 295 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,7 +12,8 @@ module.exports = {
       files: [
         'app/views/scripts/components/Tools.vue',
         'app/views/scripts/components/Embed.vue',
-        'app/views/scripts/components/Data.vue'
+        'app/views/scripts/components/Data.vue',
+        'app/views/scripts/components/LayersManager.vue'
       ],
       rules: {
         'max-lines': 'off',

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "[javascript][vue]": {
     "editor.formatOnSave": false

diff --git a/app/public/js/configuration.json b/app/public/js/configuration.json
@@ -67,16 +67,6 @@
         "scriptPath": "/js/tools/draw.js",
         "iconPath": "/img/draw.svg"
       },
-      {
-        "name": "Layers",
-        "id": "layers",
-        "desc": "",
-        "exportedVar": [
-          "ToolLayers"
-        ],
-        "scriptPath": "/js/tools/layers.js",
-        "iconPath": "/img/layers.svg"
-      },
       {
         "name": "DrawPolygon",
         "id": "drawPolygon",

diff --git a/app/public/js/microdraw.js b/app/public/js/microdraw.js
@@ -1214,7 +1214,7 @@ const Microdraw = (function () {
       me.viewerOpenImage(me.ImageInfo[me.currentImage]);
 
       // update layers if there's any
-      me.tools.layers.updateLayers();
+      window.dispatchEvent(new CustomEvent('updateMicrodrawLayers'));
     },
 
     /**

diff --git a/app/public/js/tools/layers.js b/app/public/js/tools/layers.js
diff --git a/app/views/scripts/components/Data.vue b/app/views/scripts/components/Data.vue
@@ -2,7 +2,10 @@
   <Header v-if="!fullscreen">
     <span class="title">MicroDraw</span>
   </Header>
-  <main :class="{ fullscreen }">
+  <main
+    class="editor"
+    :class="{ fullscreen }"
+  >
     <OntologySelector
       :ontology="ontology"
       :open="displayOntology"
@@ -18,6 +21,10 @@
         <Tools />
       </template>
       <template #content>
+        <LayersManager
+          :open="displayLayers"
+          @on-close="displayLayers = false"
+        />
         <div
           id="microdraw"
           style="width: 100%; height: 100%"
@@ -37,13 +44,15 @@ import * as Vue from 'vue';
 
 import useVisualization from '../store/visualization';
 
+import LayersManager from './LayersManager.vue';
 import Tools from './Tools.vue';
 
 const {
   title,
   displayChat,
   displayScript,
   displayOntology,
+  displayLayers,
   currentLabel,
   ontology,
   fullscreen,

diff --git a/app/views/scripts/components/Embed.vue b/app/views/scripts/components/Embed.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="editor">
     <OntologySelector
       :ontology="ontology"
       :open="displayOntology"
@@ -15,6 +15,11 @@
         <Tools />
       </template>
       <template #content>
+        <LayersManager
+          :open="displayLayers"
+          @on-close="displayLayers = false"
+        />
+
         <div
           id="microdraw"
           style="width: 100%; height: 100%"
@@ -46,6 +51,7 @@ import * as Vue from 'vue';
 
 import useVisualization from '../store/visualization';
 
+import LayersManager from './LayersManager.vue';
 import Tools from './Tools.vue';
 
 
@@ -70,6 +76,7 @@ const {
   displayChat,
   displayScript,
   displayOntology,
+  displayLayers,
   currentLabel,
   ontology,
   fullscreen,