@abi-software/scaffoldvuer 1.5.0 → 1.6.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.5.0",
+  "version": "1.6.0-beta.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.1.2",
+    "@abi-software/map-utilities": "^1.2.0-beta.8",
     "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -297,7 +297,8 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { shallowRef } from 'vue';
+import { AnnotationService } from '@abi-software/sparc-annotation'
+import { markRaw, shallowRef } from 'vue';
 import { ScaffoldVuer } from "./components/index.js";
 import DropZone from "./app/DropZone.vue";
 import ModelsTable from "./app/ModelsTable.vue";
@@ -356,6 +357,11 @@ export default {
     ModelsTable,
     HelpModeDialog,
   },
+  provide() {
+    return {
+      $annotator: this.annotator,
+    }
+  },
   data: function () {
     return {
       consoleOn: true,
@@ -406,7 +412,8 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      auto: NaN
+      auto: NaN,
+      annotator: markRaw(new AnnotationService(`https://mapcore-demo.org/devel/flatmap/v4/annotator`)),
     };
   },
   watch: {

package/src/components/ScaffoldTooltip.vue

@@ -14,7 +14,7 @@
       <template #default>
         <div class="tooltip-text">{{ label }}</div>
         <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
-        <CreateTooltiipContent
+        <CreateTooltipContent
           v-show="createData.toBeConfirmed"
           :createData="createData"
           @confirm-create="$emit('confirm-create', $event)"
@@ -66,10 +66,9 @@ import {
 import {
   Delete as ElIconDelete,
 } from '@element-plus/icons-vue'
-import CreateTooltiipContent from "./CreateTooltipContent.vue";
 import { mapState } from 'pinia';
 import { useMainStore } from "@/store/index";
-import { Tooltip } from '@abi-software/map-utilities'
+import { CreateTooltipContent, Tooltip } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 
 /**
@@ -79,7 +78,7 @@ export default {
   name: "ScaffoldTooltip",
   components: {
     Col,
-    CreateTooltiipContent,
+    CreateTooltipContent,
     ElIconDelete,
     Icon,
     Popover,
@@ -165,9 +164,7 @@ export default {
       }
     },
     hideTriggered: function() {
-      if (this.createData.toBeConfirmed) {
-        this.$emit('cancel-create');
-      }
+      this.$emit('tooltip-hide');
     },
   },
   watch: {

package/src/components/ScaffoldVuer.vue

@@ -17,7 +17,8 @@
       :annotationDisplay="annotationDisplay"
       @confirm-create="confirmCreate($event)"
       @cancel-create="cancelCreate()"
-      @confirm-delete="confirmDelete($event)"
+      @confirm-delete="confirmDelete()"
+      @tooltip-hide="onTooltipHide()"
     />
     <div
       id="organsDisplayArea"
@@ -382,7 +383,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { markRaw, shallowRef } from 'vue';
+import { inject, markRaw, provide, shallowRef } from 'vue';
 import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
@@ -454,10 +455,21 @@ export default {
     ScaffoldTreeControls
   },
   setup(props) {
-    const annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
-    return { annotator };
+    let annotator = inject('$annotator')
+    if (!annotator) {
+      annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
+      provide('$annotator', annotator)
+    }
+    return { annotator }
   },
   props: {
+    /**
+      * The option to show annotation information in sidebar
+      */
+    annotationSidebar: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * URL of the zincjs metadata. This value will be ignored if a valid
      * state prop is also provided.
@@ -698,7 +710,6 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       scaffoldUrl: this.url,
-      $annotator: this.annotator,
       boundingDims: this.boundingDims,
     };
   },
@@ -902,6 +913,24 @@ export default {
       }
       this.previousMarkerLabels = markRaw({...labels});
     },
+    annotationDisplay: function(value) {
+      if (this.annotationSidebar) {
+        if (value) {
+          const region = this.tData.region ? this.tData.region +"/" : "";
+          const annotationEntry = {
+            "featureId": region + this.tData.label,
+            "resourceId": this.url,
+            "resource": this.url,
+          };
+          this.$emit('annotation-open', {annotationEntry: annotationEntry,
+            commitCallback: this.commitAnnotationEvent});
+        } else {
+          if (!this.createData.toBeConfirmed || !this.createData.toBeDeleted) {
+            this.$emit("annotation-close");
+          }
+        }
+      }
+    }
   },
   beforeCreate: function () {
     this.$module = new OrgansViewer();
@@ -1171,13 +1200,16 @@ export default {
         this.$module.scene.removeTemporaryPrimitive(this._tempPoint);
         this._tempPoint = undefined;
       }
+      if (this.annotationSidebar){
+        this.$emit("annotation-close");
+      }
     },
     /**
      * Internal only.
      * Confirm delete of user created primitive.
      * This is only called from callback.
      */
-     confirmDelete: function() {
+    confirmDelete: function() {
       if (this._editingZincObject?.isEditable) {
         const regionPath = this._editingZincObject.region.getFullPath() + "/";
         const group = this._editingZincObject.groupName;
@@ -1191,6 +1223,15 @@ export default {
       }
       this.cancelCreate();
     },
+    /**
+     * Internal only.
+     * This is triggered when tooltip is hidden
+     */
+     onTooltipHide: function() {
+      if (this.createData.toBeConfirmed && !this.annotationSidebar) {
+        this.cancelCreate();
+      }
+    },
     formatTooltip(val) {
       if (this.timeMax >= 1000) {
         if (val) {
@@ -1387,21 +1428,21 @@ export default {
       if (this.createData.toBeConfirmed === false) {
         this.createData.points.length = 0;
         this.createData.points.push(coords);
+        this.createData.toBeConfirmed = true;
         this.showRegionTooltipWithAnnotations(data, true, false);
         this.tData.x = 50;
         this.tData.y = 200;
         this._tempPoint = this.$module.scene.addTemporaryPoints([coords], 0xffff00);
-        this.createData.toBeConfirmed = true;
       }
     },
     drawLine: function(coords, data) {
       if (this.createData.toBeConfirmed === false) {
         if (this.createData.points.length === 1) {
           this.createData.points.push(coords);
+          this.createData.toBeConfirmed = true;
           this.showRegionTooltipWithAnnotations(data, true, false);
           this.tData.x = 50;
           this.tData.y = 200;
-          this.createData.toBeConfirmed = true;
         } else {
           this._tempPoint = this.$module.scene.addTemporaryPoints([coords], 0xffff00);
           this.createData.points.push(coords);
@@ -1463,8 +1504,6 @@ export default {
           }
           if (this.activeDrawMode !== "Point" && this.activeDrawMode !== "LineString") {
             this.showRegionTooltipWithAnnotations(event.identifiers, true, false);
-            this.tData.x = 50;
-            this.tData.y = 200;
           } else {
             this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
           }
@@ -1883,13 +1922,31 @@ export default {
       if (this.$module.scene) {
         const result = getObjectsFromAnnotations(this.$module.scene, annotations);
         if (result && result.objects.length > 0) {
-          return this.showRegionTooltipWithObjects(
-            result.label,
-            result.objects,
-            result.regionPath,
-            resetView,
-            liveUpdates
-          );
+          if (!this.annotationSidebar) {
+            return this.showRegionTooltipWithObjects(
+              result.label,
+              result.objects,
+              result.regionPath,
+              resetView,
+              liveUpdates
+            );
+          } else {
+            this.tData.visible = false;
+            const region = this.tData.region ? this.tData.region +"/" : "";
+            const annotationEntry = {
+              "featureId": region + this.tData.label,
+              "resourceId": this.url,
+              "resource": this.url,
+            };
+            this.$emit('annotation-open', {
+              annotationEntry: annotationEntry,
+              createData: this.createData,
+              confirmCreate: this.confirmCreate,
+              cancelCreate: this.cancelCreate,
+              confirmDelete: this.confirmDelete,
+            });
+            return;
+          }
         }
       }
       this.hideRegionTooltip();

package/src/components.d.ts

@@ -7,21 +7,18 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CreateTooltipContent: typeof import('./components/CreateTooltipContent.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElFooter: typeof import('element-plus/es')['ElFooter']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
     ElIconWarningFilled: typeof import('@element-plus/icons-vue')['WarningFilled']
-    ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']

package/src/components/CreateTooltipContent.vue

@@ -1,201 +0,0 @@
-<template>
-  <el-container class="create-container">
-    <el-header height="30px" class="header">
-      <div>Create {{ createData.shape }}</div>
-    </el-header>
-    <el-main class="slides-block">
-      <span class="create-text">
-        Primitives will be created in the
-        <br>
-        __annotation region
-      </span>
-      <el-row class="row" v-show="showPoint">
-        <el-col :offset="0" :span="8">
-          Position:
-        </el-col>
-        <el-col :offset="0" :span="16">
-          <el-row v-for="{ value, i } in createData.points" :key="i" class="value">
-            {{ i }}
-          </el-row>
-        </el-col>
-      </el-row>
-      <el-row class="row">
-        <el-col :offset="0" :span="8">
-          Region:
-        </el-col>
-        <el-col :offset="0" :span="16">
-          <el-input
-            v-model="region"
-            placeholder="__annotation"
-            size="small"
-          />
-        </el-col>
-      </el-row>
-      <el-row class="row">
-        <el-col :offset="0" :span="8">
-          Group:
-        </el-col>
-        <el-col :offset="0" :span="16">
-          <el-input
-            v-model="group"
-            :placeholder="createData.shape"
-            size="small"
-          />
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :offset="0" :span="12">
-          <el-button
-            type="primary"
-            plain
-            @click="confirm"
-          >
-            {{ confirmText }}
-          </el-button>
-        </el-col>
-        <el-col :offset="0" :span="12">
-          <el-button
-            type="primary"
-            plain
-            @click="cancel"
-          >
-            Cancel
-          </el-button>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-
-import {
-  ElButton as Button,
-  ElCol as Col,
-  ElContainer as Container,
-  ElHeader as Header,
-  ElInput as Input,
-  ElMain as Main,
-
-} from "element-plus";
-
-/**
- * A component to control the opacity of the target object.
- */
-export default {
-  name: "CreateTooltipContent",
-  components: {
-    Button,
-    Col,
-    Container,
-    Header,
-    Input,
-    Main,
-  },
-  props: {
-    createData: {
-      type: Object,
-    },
-  },
-  watch: {
-    "createData.shape": {
-      handler: function (value) {
-        this.group = value;
-        this.$emit("cancel-create");
-      },
-      immediate: true,
-    },
-  },
-  computed: {
-    confirmText: function () {
-      if (this.createData.editingIndex > -1) {
-        return "Edit";
-      }
-      return "Confirm";
-    },
-  },
-  data: function () {
-    return {
-      group: "default",
-      region: "",
-      showPoint: false,
-    }
-  },
-  methods: {
-    confirm: function () {
-      this.$emit(
-        "confirm-create", 
-        { 
-          region: "__annotation/" + this.region, 
-          group: this.group,
-          shape: this.createData.shape,
-          editingIndex: this.createData.editingIndex,
-        }
-      );
-      this.group = this.createData.shape;
-    },
-    cancel: function () {
-      this.$emit("cancel-create");
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.header {
-  color: #606266;
-  line-height: 1;
-  padding: 8px 17px 1px 15px;
-  border-bottom: 1px solid #ebeef5;
-  font-size: 14px;
-}
-
-.row {
-  margin: 4px;
-  text-align: left;
-}
-
-:deep(.create-text) {
-  max-width: 220px;
-  height:35px;
-  font-size: 12px;
-}
-
-
-.create-container {
-  width: 250px;
-  height: auto;
-  border-radius: 4px;
-  border: solid 1px #d8dce6;
-  background-color: #fff;
-  overflow-y: none;
-  user-select: auto;
-  pointer-events: auto;
-}
-
-.value {
-  font-size: 12px;
-}
-
-.input-box {
-  width: 42px;
-  border-radius: 4px;
-  border: 1px solid rgb(144, 147, 153);
-  background-color: var(--white);
-  font-weight: 500;
-  color: rgb(48, 49, 51);
-  margin-left: 8px;
-  height: 24px;
-
-  &.number-input {
-    width: 42px;
-    :deep(.el-input__wrapper) {
-      padding-left: 0px;
-      padding-right: 0px;
-    }
-  }
-}
-
-</style>