@abi-software/flatmapvuer 0.6.1-vue3.9 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.6.1-vue3.9",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,16 +43,16 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.4.4",
+    "@abi-software/flatmap-viewer": "2.6.2",
     "@abi-software/sparc-annotation": "0.2.0",
-    "@abi-software/svg-sprite": "^0.4.0-vue3-beta.0",
+    "@abi-software/svg-sprite": "1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "css-element-queries": "^1.2.2",
     "element-plus": "2.5.5",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
     "unplugin-vue-components": "^0.26.0",
-    "vue": "^3.3.13"
+    "vue": "^3.4.15"
   },
   "devDependencies": {
     "@cypress/webpack-dev-server": "^3.6.1",

package/src/components/AnnotationTool.vue

@@ -2,7 +2,7 @@
   <el-main class="main">
     <div class="block">
       <el-row class="info-field">
-        <span class="title">Feature Annotations</span>
+        <div class="title">Feature Annotations</div>
       </el-row>
       <template v-if="annotationEntry">
         <el-row
@@ -332,6 +332,10 @@ export default {
 
 .block {
   margin-bottom: 0.5em;
+
+  .main > &:first-of-type {
+    margin-right: 0.5em;
+  }
 }
 
 .button {
@@ -363,7 +367,7 @@ export default {
   padding: 1em !important;
   overflow-x: hidden;
   overflow-y: auto;
-  min-width: 20rem;
+  min-width: 300px; // .maplibregl-popup max-width
   max-height: 400px;
   scrollbar-width: thin;
 

package/src/components/FlatmapVuer.vue

@@ -377,6 +377,7 @@
             <el-select
               :teleported="false"
               v-model="viewingMode"
+              @change="changeViewingMode"
               placeholder="Select"
               class="select-box"
               popper-class="flatmap_dropdown"
@@ -637,7 +638,7 @@ export default {
     setFlightPath3D: function (flag) {
       this.flightPath3DRadio = flag
       if (this.mapImp) {
-        this.mapImp.enable3dPaths(flag)
+        this.mapImp.enableFlightPaths(flag)
       }
     },
     /**
@@ -1027,6 +1028,16 @@ export default {
         }
       }
     },
+    /**
+     * @vuese
+     * Function triggered by viewing mode change.
+     * (e.g., from 'Exploration' to 'Annotation')
+     * All tooltips and popups currently showing on map will be closed
+     * when this function is triggered.
+     */
+     changeViewingMode: function () {
+      this.closeTooltip()
+    },
     /**
      * @vuese
      * Function to create/display tooltips from the provided ``data``.
@@ -1067,13 +1078,13 @@ export default {
      */
     popUpCssHacks: function () {
       // Below is a hack to remove flatmap tooltips while popup is open
-      let ftooltip = document.querySelector('.flatmap-tooltip-popup')
+      const ftooltip = document.querySelector('.flatmap-tooltip-popup')
+      const popupCloseButton = document.querySelector('.maplibregl-popup-close-button')
       if (ftooltip) ftooltip.style.display = 'none'
-      document.querySelector('.maplibregl-popup-close-button').style.display =
-        'block'
+      popupCloseButton.style.display = 'block'
       this.$refs.tooltip.$el.style.display = 'flex'
-      document.querySelector('.maplibregl-popup-close-button').onclick = () => {
-        document.querySelector('.flatmap-tooltip-popup').style.display = 'block'
+      popupCloseButton.onclick = () => {
+        if (ftooltip) ftooltip.style.display = 'block'
       }
     },
     /**
@@ -1344,8 +1355,8 @@ export default {
       if (mapVersion === mapVersionForFlightPath || mapVersion > mapVersionForFlightPath) {
         // Show flight path option UI
         this.displayFlightPathOption = true
-        // Show 3D as default on FC type
-        this.setFlightPath3D(true)
+        // Show 2D as default on FC type
+        this.setFlightPath3D(false)
       }
     },
     /**
@@ -2013,23 +2024,77 @@ export default {
   }
   &.maplibregl-popup-anchor-top {
     .maplibregl-popup-content {
-      margin-top: 18px;
+      margin-top: 12px;
       &::after,
       &::before {
-        top: calc(-100% + 6px);
+        top: auto;
+        bottom: 100%;
         border-width: 12px;
       }
       /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
       &::after {
-        margin-top: 1px;
         border-color: transparent transparent rgb(255, 255, 255) transparent;
       }
       &::before {
         margin: 0 auto;
+        margin-bottom: 1px;
         border-color: transparent transparent $app-primary-color transparent;
       }
     }
   }
+  &.maplibregl-popup-anchor-left {
+    margin-left: 8px;
+    .maplibregl-popup-content {
+      &::after,
+      &::before {
+        top: 50%;
+        left: 0;
+        border-width: 8px;
+        margin-top: -8px;
+        margin-left: -16px;
+      }
+      /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
+      &::after {
+        transform: translateX(1px);
+        border-color: transparent rgb(255, 255, 255) transparent transparent;
+      }
+      &::before {
+        border-color: transparent $app-primary-color transparent transparent;
+      }
+    }
+  }
+  &.maplibregl-popup-anchor-right {
+    margin-right: 8px;
+    .maplibregl-popup-content {
+      &::after,
+      &::before {
+        top: 50%;
+        right: 0;
+        border-width: 8px;
+        margin-top: -8px;
+        margin-right: -16px;
+      }
+      /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
+      &::after {
+        transform: translateX(-1px);
+        border-color: transparent transparent transparent rgb(255, 255, 255);
+      }
+      &::before {
+        border-color: transparent transparent transparent $app-primary-color;
+      }
+    }
+  }
+  &.maplibregl-popup-anchor-top-left,
+  &.maplibregl-popup-anchor-top-right,
+  &.maplibregl-popup-anchor-bottom-left,
+  &.maplibregl-popup-anchor-bottom-right {
+    .maplibregl-popup-content {
+      &::after,
+      &::before {
+        display: none;
+      }
+    }
+  }
   .maplibregl-popup-content {
     border-radius: 4px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -2089,7 +2154,7 @@ export default {
 :deep(.flatmapvuer-popover) {
   .maplibregl-popup-close-button {
     position: absolute;
-    right: 0.5em;
+    right: 0;
     top: 0;
     border: 0;
     border-radius: 0 3px 0 0;
@@ -2097,7 +2162,11 @@ export default {
     background-color: transparent;
     font-size: 2.5em;
     color: grey;
-    top: 0.95em;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: $app-primary-color;
+    }
   }
 }
 

package/src/components/ProvenancePopup.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="entry" class="main" v-loading="loading">
     <div class="block" v-if="entry.title">
-      <span class="title">{{ capitalise(entry.title) }}</span>
+      <div class="title">{{ capitalise(entry.title) }}</div>
       <div
         v-if="
           entry.provenanceTaxonomyLabel &&
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="block" v-else>
-      <span class="title">{{ entry.featureId }}</span>
+      <div class="title">{{ entry.featureId }}</div>
     </div>
     <div v-show="showDetails" class="hide" id="hide-path-info" @click="showDetails = false">
       Hide path information
@@ -284,7 +284,7 @@ export default {
 
 .title {
   text-align: left;
-  width: 16em;
+  // width: 16em;
   line-height: 1.5em !important;
   font-size: 1em;
   font-family: Helvetica;
@@ -295,6 +295,10 @@ export default {
 
 .block {
   margin-bottom: 0.5em;
+
+  .main > &:first-of-type {
+    margin-right: 0.5em;
+  }
 }
 
 .pub {
@@ -468,6 +472,10 @@ export default {
   overflow-y: scroll;
   scrollbar-width: thin !important;
   max-height: 240px;
+
+  .block {
+    padding-top: 0.5em;
+  }
 }
 
 .scrollbar::-webkit-scrollbar-track {

package/src/components.d.ts

@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -30,7 +29,6 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTree: typeof import('element-plus/es')['ElTree']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     FlatmapVuer: typeof import('./components/FlatmapVuer.vue')['default']