wip layers

Author: denishov

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "[javascript][vue]": {
     "editor.formatOnSave": false

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",

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'));
     },
 
     /**

app/public/js/tools/layers.js

@@ -5,59 +5,65 @@
     <li>
       <b class="layer-item"> Opacity (%):</b>
       <input
+        type="number"
         class="layer-value"
         :value="layer.opacity * 100"
-        onchange="changeOpacity"
+        @change="emit('updateLayer', index, 'opacity', $event.target.valueAsNumber / 100)"
       >
       <input
         type="range"
         :value="layer.opacity * 100"
         min="0"
         max="100"
-        oninput="changeOpacity"
+        @input="emit('updateLayer', index, 'opacity', $event.target.valueAsNumber / 100)"
         style="width:100px"
       >
     </li>
     <li>
       <b class="layer-item">Position (%)</b>
       <input
+        type="number"
         class="layer-value"
         :value="layer.x"
-        onchange="changeX"
+        @change="emit('updateLayer', index, 'x', $event.target.valueAsNumber)"
       >
       <input
+        type="number"
         class="layer-value"
         :value="layer.y"
-        onchange="changeY"
+        @change="emit('updateLayer', index, 'y', $event.target.valueAsNumber)"
       >
     </li>
     <li>
       <b class="layer-item">Rotation (deg):</b> <input
+        type="number"
         class="layer-value"
         :value="layer.rotation"
-        onchange="changeRotation"
+        @change="emit('updateLayer', index, 'rotation', $event.target.valueAsNumber)"
       >
     </li>
     <li>
       <b class="layer-item"> First slice:</b> <input
+        type="number"
         class="layer-value"
         :value="layer.firstSlice"
         min="0"
-        max="999"
-        onchange="changeFirstSlice"
+        :max="maxSlice"
+        @change="emit('updateLayer', index, 'firstSlice', $event.target.valueAsNumber)"
       > (0 - {{ maxSlice }})
     </li>
     <li>
       <b class="layer-item"> Last slice:</b> <input
+        type="number"
         class="layer-value"
         :value="layer.lastSlice"
         min="0"
-        max="999"
-        onchange="changeLastSlice"
+        :max="maxSlice"
+        @change="emit('updateLayer', index, 'lastSlice', $event.target.valueAsNumber)"
       > (0 - {{ maxSlice }})
     </li>
     <li>
-      <button onclick="deleteLayer">
+      <button @click="emit('delete')">
         Delete layer
       </button>
     </li>
@@ -71,17 +77,14 @@ const props = defineProps({
   layer: {
     type: Object,
     required: true
+  },
+  index: {
+    type: Number,
+    required: true
   }
 });
 
-const changeOpacity = () => {};
-const changeX = () => {};
-const changeY = () => {};
-const changeRotation = () => {};
-
-const changeFirstSlice = () => {};
-const changeLastSlice = () => {};
-
+const emit = defineEmits(['delete', 'updateLayer']);
 const maxSlice = computed(() => props.layer.imageSources.tileSources.length - 1);
 
 </script>
@@ -93,11 +96,11 @@ ul {
 }
 .layer-item {
   display: inline-block;
-  width: 100px;
+  width: 120px;
   margin-left: 10px;
 }
 .layer-value {
-    width: 40px;
+    width: 50px;
     text-align: right;
     color: #000;
 }