@abi-software/scaffoldvuer 0.3.0 → 0.3.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.3.0",
+  "version": "0.3.2-beta.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -29,6 +29,7 @@
     "*.js"
   ],
   "dependencies": {
+    "@abi-software/flatmapvuer": "^0.5.9-beta.3",
     "@abi-software/svg-sprite": "^0.3.0",
     "axios": "^0.21.2",
     "core-js": "^3.22.5",
@@ -42,7 +43,7 @@
     "vue-custom-element": "^3.3.0",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^1.2.0"
+    "zincjs": "^1.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

package/src/App.vue

@@ -8,6 +8,7 @@
       <ScaffoldVuer
         ref="scaffold"
         class="vuer"
+        :flatmapAPI="flatmapAPI"
         :display-u-i="displayUI"
         :url="url"
         :help-mode="helpMode"
@@ -341,6 +342,7 @@ export default {
       searchText: "",
       loadTextureVolumeOnReady: false,
       readyCallback: undefined,
+      flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v4/",
     };
   },
   watch: {

package/src/components/OpacityControls.vue

@@ -1,72 +1,38 @@
 <template>
-  <div
-    v-if="material!=undefined"
-    ref="control"
-    class="opacity-control"
-  >
-    <el-drawer
-      custom-class="my-drawer"
-      class="drawer-content"
-      :visible.sync="drawerOpen"
-      :append-to-body="false"
-      :modal-append-to-body="false"
-      size="300"
-      :with-header="false"
-      :wrapper-closable="false"
-      :modal="false"
+  <el-container v-if="material" class="opacity-container">
+    <el-header
+      height="37px"
+      class="header"
     >
-      <div
-        v-if="drawerOpen"
-        class="tab-button close"
-        @click="toggleDrawer"
-      >
-        <i class="el-icon-arrow-right" />
+      <div>Opacity</div>
+    </el-header>
+    <el-main class="main">
+      <div class="block">
+        <span class="display">{{ displayString }}</span>
+        <el-slider
+          v-model="material.opacity"
+          class="my-slider"
+          :step="0.01"
+          :min="0"
+          :max="1"
+          :format-tooltip="formatTooltip"
+          :show-tooltip="false"
+        />
       </div>
-      <el-container class="opacity-container">
-        <el-header
-          height="37px"
-          class="header"
-        >
-          <div>Opacity</div>
-        </el-header>
-        <el-main class="main">
-          <div class="block">
-            <span class="display">{{ displayString }}</span>
-            <el-slider
-              v-model="material.opacity"
-              class="my-slider"
-              :step="0.01"
-              :min="0"
-              :max="1"
-              :format-tooltip="formatTooltip"
-              :show-tooltip="false"
-            />
-          </div>
-        </el-main>
-      </el-container>
-    </el-drawer>
-    <div
-      v-if="!drawerOpen"
-      class="tab-button open"
-      @click="toggleDrawer"
-    >
-      <i class="el-icon-arrow-left" />
-    </div>
-  </div>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import { Container, Drawer, Header, Icon, Main, Slider } from "element-ui";
+import { Container, Header, Main, Slider } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 
 locale.use(lang);
 Vue.use(Container);
-Vue.use(Drawer);
 Vue.use(Header);
-Vue.use(Icon);
 Vue.use(Main);
 Vue.use(Slider);
 
@@ -75,51 +41,41 @@ Vue.use(Slider);
  */
 export default {
   name: "OpacityControls",
+  props: {
+    material: undefined,
+  },
   data: function() {
     return {
       displayString: "100%",
-      material: undefined,
-      drawerOpen: true
     };
   },
   watch: {
     "material.opacity": function() {
-      if (this.material) {
-        this._zincobject.setAlpha(this.material.opacity);
+      if (this.material && this._zincObject) {
+        this._zincObject.setAlpha(this.material.opacity);
       }
     }
   },
   mounted: function() {
-    this._zincobject = undefined;
+    this._zincObject = undefined;
   },
   methods: {
     formatTooltip(val) {
       this.displayString = Math.floor(100 * val + 0.5) + "%";
       return this.displayString;
     },
-    toggleDrawer: function() {
-      this.drawerOpen = !this.drawerOpen;
-    },
     setObject(object) {
-      if (object) this.material = object.morph.material;
-      else this.material = undefined;
-      this._zincobject = object;
+      this._zincObject = object;
     }
-  }
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 @import "~element-ui/packages/theme-chalk/src/container";
-@import "~element-ui/packages/theme-chalk/src/drawer";
 @import "~element-ui/packages/theme-chalk/src/slider";
 
-.opacity-control {
-  text-align: left;
-  width:300px;
-}
-
 .header {
   color: #606266;
   line-height: 1;
@@ -132,12 +88,6 @@ export default {
   width: 44px;
 }
 
-.icon {
-  right: 17px;
-  position: absolute;
-  top: 10px;
-}
-
 .main {
   font-size: 13px;
   padding: 20px 17px 0 15px;
@@ -170,53 +120,4 @@ export default {
   background-color: $app-primary-color;
 }
 
-.drawer-content {
-  position: relative;
-  height: 93px;
-  pointer-events: none;
-}
-
-::v-deep .my-drawer {
-  background: rgba(0, 0, 0, 0);
-  box-shadow: none;
-}
-
-::v-deep .my-drawer .el-drawer__body {
-  height: 93px;
-}
-
-.tab-button {
-  width: 20px;
-  height: 40px;
-  z-index: 8;
-  right: 0px;
-  
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px #e4e7ed;
-  background-color: #FFFFFF;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  pointer-events: auto;
-  //transition: bottom 0.3s;
-
-  &.close {
-    float: left;
-    flex: 1;
-    border-right: 0;
-    margin-top: 26px;
-  }
-
-  &.open {
-    position: absolute;
-    bottom:26px;
-  }
-
-  i {
-    margin-top: 12px;
-    color: $app-primary-color;
-    transform: scaleY(2.5);
-  }
-}
-
 </style>

package/src/components/PrimitiveControls.vue

@@ -1,11 +1,15 @@
 <template>
   <div
-    v-show="material!=undefined"
+    v-show="material || isTextureSlides"
     class="primitive-controls"
   >
     <el-drawer
       custom-class="my-drawer"
-      class="drawer-content"
+      :class="{
+        'drawer-content': true,
+        'opacity': material !== undefined,
+        'texture-slides': isTextureSlides,
+      }"
       :visible.sync="drawerOpen"
       :append-to-body="false"
       :modal-append-to-body="false"
@@ -24,6 +28,10 @@
       <opacity-controls
         :material="material"
         ref="opacityControls" />
+      <texture-slides-controls
+        v-show="isTextureSlides"
+        class="controls"
+        ref="tSlidesControls" />
     </el-drawer>
     <div
       v-if="!drawerOpen"
@@ -39,6 +47,7 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import OpacityControls from "./OpacityControls";
+import TextureSlidesControls from "./TextureSlidesControls";
 import { Drawer, Icon } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
@@ -54,29 +63,34 @@ export default {
   name: "PrimitiveControls",
   components: {
     OpacityControls,
+    TextureSlidesControls,
   },
   data: function() {
     return {
       material: undefined,
-      drawerOpen: true
+      isTextureSlides: false,
+      drawerOpen: true,
     };
-  },
-  watch: {
-
   },
   mounted: function() {
     this._zincobject = undefined;
   },
   methods: {
-    formatTooltip(val) {
+    formatTooltip: function(val) {
       this.displayString = Math.floor(100 * val + 0.5) + "%";
       return this.displayString;
     },
     toggleDrawer: function() {
       this.drawerOpen = !this.drawerOpen;
     },
-    setObject(object) {
-      console.log(object, this.$refs)
+    setObject: function(object) {
+      this._zincobject = object;
+      if (object.isTextureSlides) {
+        this.isTextureSlides = true;
+        this.$refs.tSlidesControls.setObject(object);
+      } else {
+        this.isTextureSlides = false;
+      }
       if (object && object.morph) this.material = object.morph.material;
       else this.material = undefined;
       this.$refs.opacityControls.setObject(object);
@@ -93,7 +107,8 @@ export default {
 
 .primitive-controls {
   text-align: left;
-  width:300px;
+  width:350px;
+  pointer-events:none;
 }
 
 .display {
@@ -108,8 +123,12 @@ export default {
 
 .drawer-content {
   position: relative;
-  height: 93px;
-  pointer-events: none;
+  &.opacity {
+    height: 93px;
+  }
+  &.texture-slides{
+    height: 250px;
+  }
 }
 
 ::v-deep .my-drawer {
@@ -117,10 +136,6 @@ export default {
   box-shadow: none;
 }
 
-::v-deep .my-drawer .el-drawer__body {
-  height: 93px;
-}
-
 .tab-button {
   width: 20px;
   height: 40px;
@@ -140,7 +155,7 @@ export default {
     float: left;
     flex: 1;
     border-right: 0;
-    margin-top: 26px;
+    bottom: 26px;
   }
 
   &.open {

package/src/components/ScaffoldTooltip.vue

@@ -12,6 +12,13 @@
       <template v-popover:tooltip>
         <div class="tooltip-text">{{ label }}</div>
         <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
+        <Tooltip
+          class="p-tooltip"
+          v-show="annotationDisplay"
+          ref="annotationTooltip"
+          :annotationDisplay="true"
+          :annotationEntry="annotationEntry"
+        />
       </template>
     </el-popover>
   </div>
@@ -21,6 +28,7 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import { Popover } from "element-ui";
+import Tooltip from "@abi-software/flatmapvuer/src/components/Tooltip";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 
@@ -32,11 +40,18 @@ Vue.use(Popover);
  */
 export default {
   name: "ScaffoldTooltip",
+ components: {
+    Tooltip,
+  },
   props: {
     label: {
       type: String,
       default: "",
     },
+    annotationDisplay: {
+      type: Boolean,
+      default: false,
+    },
     region: {
       type: String,
       default: "",
@@ -54,9 +69,11 @@ export default {
       default: 200,
     },
   },
+  inject: ['scaffoldUrl'],
   data: function () {
     return {
       display: false,
+      annotationEntry: { }
     };
   },
   computed: {
@@ -69,23 +86,43 @@ export default {
       return { left: x + "px", top: this.y - yOffset + "px" };
     },
   },
+  methods: {
+    checkForDisplay: function () {
+      if (this.visible && this.label && this.label !== "") {
+        this.display = true;
+        if (this.annotationDisplay) {
+          const region = this.region ? this.region +"/" : "";
+          this.annotationEntry = {
+            "featureId": encodeURIComponent(region + this.label),
+            "resourceId": encodeURIComponent(this.scaffoldUrl),
+          };
+        }
+      }
+      else {
+        this.display = false;
+        this.annotationEntry = { };
+      }
+    }
+  },
   watch: {
     label: {
       handler: function () {
-        if (this.visible && this.label && this.label !== "")
-          this.display = true;
-        else this.display = false;
+        this.checkForDisplay();
       },
       immediate: true,
     },
     visible: {
       handler: function () {
-        if (this.visible && this.label && this.label !== "")
-          this.display = true;
-        else this.display = false;
+        this.checkForDisplay();
       },
       immediate: true,
     },
+    annotationDisplay: {
+      handler: function () {
+        this.checkForDisplay();
+      },
+      immediate: true,
+    }
   },
 };
 </script>
@@ -138,5 +175,17 @@ export default {
     user-select: none;
     pointer-events: none;
   }
+
+  .p-tooltip {
+    display: flex;
+    width: 300px;
+    white-space:normal;
+    .attribute-content {
+      color: rgb(44, 62, 80);
+    }
+    &::before, &::after {
+      display:none;
+    }
+  }
 }
 </style>

package/src/components/ScaffoldVuer.vue

@@ -14,6 +14,7 @@
       :visible="tData.visible"
       :x="tData.x"
       :y="tData.y"
+      :annotationDisplay="viewingMode === 'Annotation' && tData.active === true"
     />
     <div
       id="organsDisplayArea"
@@ -80,8 +81,8 @@
         @object-hovered="objectHovered"
         @drawer-toggled="drawerToggled"
       />
-      <div class="opacity-box">
-        <opacity-controls ref="opacityControl" />
+      <div class="primitive-controls-box">
+        <primitive-controls ref="primitiveControls" />
       </div>
       <el-popover
         v-if="sceneData.timeVarying"
@@ -246,6 +247,23 @@
         trigger="click"
         popper-class="background-popper non-selectable"
       >
+        <el-row class="backgroundText">Viewing Mode</el-row>
+        <el-row class="backgroundControl">
+          <el-select
+            :popper-append-to-body="false"
+            v-model="viewingMode"
+            placeholder="Select"
+            class="select-box viewing-mode"
+            popper-class="scaffold_viewer_dropdownr"
+          >
+            <el-option v-for="item in viewingModes" :key="item" :label="item" :value="item">
+              <el-row>
+                <el-col :span="12">{{ item }}</el-col>
+              </el-row>
+            </el-option>
+          </el-select>
+        </el-row>
+        <el-row class="backgroundSpacer"></el-row>
         <el-row class="backgroundText"> Change background </el-row>
         <el-row class="backgroundChooser">
           <div
@@ -311,7 +329,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import OpacityControls from "./OpacityControls";
+import PrimitiveControls from "./PrimitiveControls";
 import ScaffoldTooltip from "./ScaffoldTooltip";
 import TreeControls from "./TreeControls";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
@@ -350,7 +368,7 @@ const EventNotifier = require("../scripts/eventNotifier").EventNotifier;
 /**
  * A vue component of the scaffold viewer.
  *
- * @requires ./OpacityControls.vue
+ * @requires ./PrimitveControls.vue
  * @requires ./TreeControls.vue
  */
 export default {
@@ -358,7 +376,7 @@ export default {
   components: {
     MapSvgIcon,
     MapSvgSpriteColor,
-    OpacityControls,
+    PrimitiveControls,
     ScaffoldTooltip,
     TreeControls,
   },
@@ -526,6 +544,21 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * Specify the endpoint of the flatmap server.
+     * This is used by annotation service included in
+     * third party flatmapvuer library.
+     */
+    flatmapAPI: {
+      type: String,
+      default: "https://mapcore-demo.org/current/flatmap/v3/"
+    },
+  },
+  provide() {
+    return {
+      flatmapAPI: this.flatmapAPI,
+      scaffoldUrl: this.url,
+    };
   },
   data: function () {
     return {
@@ -594,9 +627,15 @@ export default {
         visible: false,
         x: 200,
         y: 200,
+        active: false,
       },
       fileFormat: "metadata",
       previousMarkerLabels: [],
+      viewingMode: "Exploration",
+      viewingModes: [
+        "Annotation",
+        "Exploration",
+      ]
     };
   },
   watch: {
@@ -969,6 +1008,7 @@ export default {
               ? event.identifiers[0].data.id
               : event.identifiers[0].data.group;
             if (event.identifiers[0].coords) {
+              this.tData.active = false;
               this.tData.visible = true;
               this.tData.label = id;
               if (event.identifiers[0].data.region)
@@ -1029,8 +1069,9 @@ export default {
      */
     objectSelected: function (objects, propagate) {
       this.selectedObjects = objects;
-      if (this.selectedObjects && this.selectedObjects.length > 0)
-        this.$refs.opacityControl.setObject(this.selectedObjects[0]);
+      if (this.selectedObjects && this.selectedObjects.length > 0) {
+        this.$refs.primitiveControls.setObject(this.selectedObjects[0]);
+      }
       this.$module.setSelectedByZincObjects(objects, undefined, propagate);
     },
     /**
@@ -1155,6 +1196,11 @@ export default {
                 );
             }
           } else {
+            if (!name.includes("Search Results for")) {
+              this.tData.active = true;
+            } else {
+              this.tData.active = false;
+            }
             this.tData.visible = true;
             this.tData.label = name;
             this.tData.x = coords.position.x;
@@ -1256,6 +1302,7 @@ export default {
         //Unset the tracking
         this.$module.setupLiveCoordinates(undefined);
       }
+      this.tData.active = false;
       this.tData.visible = false;
       this.tData.region = undefined;
     },
@@ -1595,6 +1642,11 @@ export default {
   }
 }
 
+.backgroundSpacer {
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 10px;
+}
+
 .warning-icon {
   color: $warning;
   top: 15px;
@@ -1729,7 +1781,7 @@ export default {
   background-color: #ffffff;
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-  height: 72px;
+  height: 124px;
   width: 128px;
   min-width: 128px;
 
@@ -1741,6 +1793,10 @@ export default {
       }
     }
   }
+
+  .el-row ~ .el-row {
+    margin-top: 8px;
+  }
 }
 
 ::v-deep .open-map-popper {
@@ -1963,6 +2019,13 @@ export default {
   color: rgb(48, 49, 51);
   margin-left: 8px;
 
+  &.viewing-mode {
+    width: unset;
+    ::v-deep .el-input__inner {
+      line-height:30px
+    }
+  }
+
   ::v-deep .el-input__inner {
     color: $app-primary-color;
     height: 22px;
@@ -1971,6 +2034,9 @@ export default {
     border: none;
     font-family: "Asap", sans-serif;
     line-height: 22px;
+    &is-focus, &:focus {
+      border: 1px solid $app-primary-color;
+    }
   }
 
   ::v-deep .el-input,
@@ -1998,7 +2064,7 @@ export default {
   font-family: "Asap", sans-serif;
 }
 
-.opacity-box {
+.primitive-controls-box {
   right: 0px;
   bottom: 200px;
   position: absolute;