@abi-software/scaffoldvuer 1.21.1-beta.2 → 2.0.0

package/src/components/ScaffoldOverlay.vue

@@ -1,9 +1,8 @@
 <template>
-  <div
-    ref="overlay"
-  >
+  <div ref="overlay">
     <div
-      class="content-layer" ref="contentLayer"
+      class="content-layer"
+      ref="contentLayer"
       @mouseleave.capture="skipWhenInBound"
       @mousedown.capture="(event) => contentMouseActive(event, true)"
       @mouseup.capture="(event) => contentMouseActive(event, false)"
@@ -12,7 +11,9 @@
     >
       <slot />
     </div>
-    <div v-if="positionalRotation" ref="topLayer"
+    <div
+      v-if="positionalRotation"
+      ref="topLayer"
       @mousemove.capture="forwardEvent"
       @mouseover.capture="forwardEvent"
       @touchmove.capture="forwardTouchEvent"
@@ -22,21 +23,28 @@
         v-for="overlay in rotationOverlays"
         :key="overlay.position"
         :class="['rotation-overlay', overlay.position, touchActive ? 'touch-active' : '']"
-        @mousedown="(event) => {setRotationMode(event, overlay.mode); forwardEvent(event)}"
+        @mousedown="
+          (event) => {
+            setRotationMode(event, overlay.mode);
+            forwardEvent(event);
+          }
+        "
         @mouseup="forwardEvent"
-        @touchstart="(event) => {setRotationMode(event, overlay.mode); forwardTouchEvent(event)}"
+        @touchstart="
+          (event) => {
+            setRotationMode(event, overlay.mode);
+            forwardTouchEvent(event);
+          }
+        "
         @touchend="forwardTouchEvent"
       >
         <span>{{ overlay.text }}</span>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-
 const rotationOverlays = [
   { position: 'top', mode: 'vertical', text: 'Begin interaction here to rotate on the x-axis' },
   { position: 'bottom', mode: 'vertical', text: 'Begin interaction here to rotate on the x-axis' },
@@ -45,48 +53,47 @@ const rotationOverlays = [
 ];
 
 export default {
-  name: "ScaffoldOverlay",
+  name: 'ScaffoldOverlay',
   data: function () {
     return {
       lockRotationMode: false,
       touchActive: false,
       rotationOverlays: rotationOverlays,
-    }
+    };
   },
   props: {
     /**
      * Experimental feature to restrict rotation at
      * one-axis based on position of the initial click
      */
-     positionalRotation: {
+    positionalRotation: {
       type: Boolean,
       default: false,
     },
   },
   methods: {
-    contentMouseActive: function(event, flag) {
+    contentMouseActive: function (event, flag) {
       if (this.positionalRotation) {
         const topLayer = this.$refs.topLayer;
         if (topLayer) {
           if (!flag) {
             this.lockRotationMode = false;
-            this.setRotationMode(undefined, "free");
+            this.setRotationMode(undefined, 'free');
             topLayer.style.pointerEvents = 'auto';
-            if (event.type === "touchend") {
+            if (event.type === 'touchend') {
               this.touchActive = false;
             }
-          }
-          else {
+          } else {
             this.lockRotationMode = true;
             topLayer.style.pointerEvents = 'none';
-            if (event.type === "touchstart") {
+            if (event.type === 'touchstart') {
               this.touchActive = true;
             }
           }
         }
       }
     },
-    setRotationMode: function(event, mode) {
+    setRotationMode: function (event, mode) {
       if (!this.lockRotationMode) {
         this.$emit('onRotationModeChange', mode);
       }
@@ -95,7 +102,7 @@ export default {
         event.stopPropagation();
       }
     },
-    skipWhenInBound: function(event) {
+    skipWhenInBound: function (event) {
       if (this.positionalRotation) {
         const topLayer = this.$refs.topLayer;
         const contentLayer = this.$refs.contentLayer;
@@ -110,7 +117,7 @@ export default {
         }
       }
     },
-    forwardEvent: function(event) {
+    forwardEvent: function (event) {
       const topLayer = this.$refs.topLayer;
       if (!topLayer) return;
       // Find the element directly underneath the cursor
@@ -125,23 +132,20 @@ export default {
       if (elementBelow) {
         // We create a new MouseEvent, copying the properties from the original event.
         // This is more robust than dispatching the original event itself.
-        const newEvent = new MouseEvent(
-          event.type,
-          {
-            bubbles: event.bubbles,
-            cancelable: event.cancelable,
-            view: event.view,
-            clientX: event.clientX,
-            clientY: event.clientY,
-            button: event.button,
-          }
-        );
+        const newEvent = new MouseEvent(event.type, {
+          bubbles: event.bubbles,
+          cancelable: event.cancelable,
+          view: event.view,
+          clientX: event.clientX,
+          clientY: event.clientY,
+          button: event.button,
+        });
         elementBelow.dispatchEvent(newEvent);
         event.stopPropagation();
       }
       event.preventDefault();
     },
-    forwardTouchEvent: function(event) {
+    forwardTouchEvent: function (event) {
       const topLayer = this.$refs.topLayer;
       if (!topLayer) return;
       // Find the element directly underneath the cursor
@@ -167,69 +171,66 @@ export default {
           rotationAngle: firstTouch.rotationAngle,
           force: firstTouch.force,
         });
-        const newEvent = new TouchEvent(
-          event.type,
-          {
-            bubbles: event.bubbles,
-            cancelable: event.cancelable,
-            composed: true,
-            view: event.view,
-            touches: [newTouch],
-            targetTouches: [newTouch],
-            changedTouches: [newTouch],
-          }
-        );
+        const newEvent = new TouchEvent(event.type, {
+          bubbles: event.bubbles,
+          cancelable: event.cancelable,
+          composed: true,
+          view: event.view,
+          touches: [newTouch],
+          targetTouches: [newTouch],
+          changedTouches: [newTouch],
+        });
         elementBelow.dispatchEvent(newEvent);
         event.stopPropagation();
       }
       event.preventDefault();
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .rotation-overlay {
   z-index: 1;
   background-color: transparent;
-  position:absolute;
+  position: absolute;
   opacity: 0;
   &.touch-active {
     opacity: 1;
-    background-color: rgba(173,216,230, 0.1)
+    background-color: rgba(173, 216, 230, 0.1);
   }
   &:hover {
     opacity: 1;
-    background-color: rgba(173,216,230, 0.1)
+    background-color: rgba(173, 216, 230, 0.1);
   }
   &.top {
-    top:0%;
-    height:20%;
+    top: 0%;
+    height: 20%;
     left: 35%;
     width: 30%;
   }
   &.bottom {
-    bottom:0%;
-    height:20%;
+    bottom: 0%;
+    height: 20%;
     left: 35%;
     width: 30%;
   }
   &.left {
-    top:35%;
-    height:30%;
+    top: 35%;
+    height: 30%;
     left: 0%;
     width: 20%;
   }
   &.right {
-    top:35%;
-    height:30%;
+    top: 35%;
+    height: 30%;
     right: 0%;
     width: 20%;
   }
   span {
     position: relative;
-    color:black;
-    opacity:0.5;
+    color: black;
+    opacity: 0.5;
     top: 50%;
     text-shadow:
       -1px -1px 0 white,
@@ -243,5 +244,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-
 </style>

package/src/components/ScaffoldTooltip.vue

@@ -13,9 +13,7 @@
     >
       <template #default>
         <div class="tooltip-text">{{ label }}</div>
-        <div class="tooltip-text" v-if="region && region != '/'">
-          Region: {{ region }}
-        </div>
+        <div class="tooltip-text" v-if="region && region != '/'">Region: {{ region }}</div>
         <CreateTooltipContent
           v-show="createData.toBeConfirmed"
           :createData="createData"
@@ -38,53 +36,41 @@
 </template>
 
 <script>
-import { shallowRef } from 'vue';
-/* eslint-disable no-alert, no-console */
-import {
-  ElCol as Col,
-  ElIcon as Icon,
-  ElPopover as Popover,
-  ElRow as Row,
-} from "element-plus";
 import { mapState } from 'pinia';
-import { useMainStore } from "@/store/index";
-import { CreateTooltipContent, Tooltip } from '@abi-software/map-utilities'
-import '@abi-software/map-utilities/dist/style.css'
+import { useMainStore } from '@/store/index';
+import { CreateTooltipContent, Tooltip } from '@abi-software/map-utilities';
+import '@abi-software/map-utilities/dist/style.css';
 
 /**
  * A component to control the opacity of the target object.
  */
 export default {
-  name: "ScaffoldTooltip",
+  name: 'ScaffoldTooltip',
   components: {
-    Col,
     CreateTooltipContent,
-    Icon,
-    Popover,
-    Row,
     Tooltip,
   },
   props: {
     createData: {
       type: Object,
-      default:{
+      default: () => ({
         drawingBox: false,
         renaming: false,
         toBeConfirmed: false,
         points: [],
         tempGroupName: undefined,
-        shape: "",
+        shape: '',
         x: 0,
         y: 0,
         editingIndex: -1,
         faceIndex: -1,
         toBeDeleted: false,
-        regionPrefix: "__annotation"
-      },
+        regionPrefix: '__annotation',
+      }),
     },
     label: {
       type: String,
-      default: "",
+      default: '',
     },
     annotationDisplay: {
       type: Boolean,
@@ -92,7 +78,7 @@ export default {
     },
     annotationFeature: {
       type: Object,
-      default: {},
+      default: () => ({}),
     },
     offlineAnnotationEnabled: {
       type: Boolean,
@@ -100,7 +86,7 @@ export default {
     },
     region: {
       type: String,
-      default: "",
+      default: '',
     },
     visible: {
       type: Boolean,
@@ -124,41 +110,42 @@ export default {
   data: function () {
     return {
       display: false,
-      annotationEntry: []
+      annotationEntry: [],
     };
   },
   computed: {
-    ...mapState(useMainStore,  ['userToken']),
+    ...mapState(useMainStore, ['userToken']),
     position: function () {
       let yOffset = 40;
       if (this.region) {
         yOffset = 55;
       }
       const x = this.x - 40;
-      return { left: x + "px", top: this.y - yOffset + "px" };
+      return { left: x + 'px', top: this.y - yOffset + 'px' };
     },
   },
   methods: {
     checkForDisplay: function () {
-      if (this.visible && this.label && this.label !== "") {
+      if (this.visible && this.label && this.label !== '') {
         this.display = true;
         if (this.annotationDisplay) {
-          const region = this.region ? this.region +"/" : "";
-          this.annotationEntry = [{
-            "featureId": region + this.label,
-            "resourceId": this.scaffoldUrl,
-            "resource": this.scaffoldUrl,
-            "feature": this.annotationFeature,
-            "offline": this.offlineAnnotationEnabled,
-          }];
+          const region = this.region ? this.region + '/' : '';
+          this.annotationEntry = [
+            {
+              featureId: region + this.label,
+              resourceId: this.scaffoldUrl,
+              resource: this.scaffoldUrl,
+              feature: this.annotationFeature,
+              offline: this.offlineAnnotationEnabled,
+            },
+          ];
         }
-      }
-      else {
+      } else {
         this.display = false;
         this.annotationEntry = [];
       }
     },
-    hideTriggered: function() {
+    hideTriggered: function () {
       this.$emit('tooltip-hide');
     },
   },
@@ -180,14 +167,13 @@ export default {
         this.checkForDisplay();
       },
       immediate: true,
-    }
+    },
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 .region-tooltip {
   position: absolute;
   height: 50px;
@@ -201,9 +187,9 @@ export default {
     border: 1px solid $app-primary-color;
     border-radius: 4px;
     white-space: nowrap;
-    min-width: unset!important;
-    max-width:fit-content;
-    width:unset!important;
+    min-width: unset !important;
+    max-width: fit-content;
+    width: unset !important;
     pointer-events: none;
     top: -15px !important;
     .el-popper__arrow {
@@ -226,12 +212,13 @@ export default {
   .p-tooltip {
     display: flex;
     width: 300px;
-    white-space:normal;
+    white-space: normal;
     .attribute-content {
       color: rgb(44, 62, 80);
     }
-    &::before, &::after {
-      display:none;
+    &::before,
+    &::after {
+      display: none;
     }
   }
 }