@abi-software/scaffoldvuer 1.11.4-beta.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.11.4-beta.0",
+  "version": "1.12.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.7.1",
+    "@abi-software/map-utilities": "^1.7.4",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "1.0.2",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -5,7 +5,7 @@
       <ScaffoldVuer
         v-if="url"
         ref="scaffold"
-        class="vuer"
+        class="demo-vuer"
         :flatmapAPI="flatmapAPI"
         :display-u-i="displayUI"
         :url="url"
@@ -49,10 +49,8 @@
       @show-next="onHelpModeShowNext"
       @finish-help-mode="onFinishHelpMode"
     />
-
     <el-popover popper-class="options-container" placement="bottom" trigger="click" width="500" :teleported="false">
       <div>
-
         <el-row :gutter="20">
           <el-col>
             <p>{{ selectedCoordinates }}</p>
@@ -302,12 +300,12 @@
         </Suspense>
       </template>
       <template #reference>
-        <el-button class="models-button" :icon="ElIconFolderOpened">
+        <el-button class="models-button control-layer" :icon="ElIconFolderOpened">
           Models
         </el-button>
       </template>
     </el-popover>
-    <el-autocomplete v-model="searchText" class="search-box" placeholder="Search" :fetch-suggestions="fetchSuggestions"
+    <el-autocomplete v-model="searchText" class="search-box control-layer" placeholder="Search" :fetch-suggestions="fetchSuggestions"
       :teleported="false" popper-class="autocomplete-popper" @keyup.enter="search(searchText)"
       @select="search(searchText)">
       <template #default="{ item }">
@@ -404,7 +402,7 @@ export default {
       tumbleDirection: [1.0, 0.0],
       showColourPicker: true,
       markerCluster: false,
-      positionalRotation: false,
+      positionalRotation: true,
       minimapSettings: {
         x_offset: 16,
         y_offset: 50,
@@ -864,7 +862,7 @@ body {
   }
 }
 
-.vuer {
+.demo-vuer {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -924,6 +922,10 @@ svg.map-icon {
   color: $app-primary-color;
 }
 
+.control-layer {
+  z-index: 2;
+}
+
 input[type="file"] {
   display: none;
 }

package/src/components/ScaffoldOverlay.vue

@@ -2,54 +2,55 @@
   <div
     ref="overlay"
   >
+    <div
+      class="content-layer" ref="contentLayer"
+      @mouseleave.capture="skipWhenInBound"
+      @mousedown.capture="(event) => contentMouseActive(event, true)"
+      @mouseup.capture="(event) => contentMouseActive(event, false)"
+      @touchstart.capture="(event) => contentMouseActive(event, true)"
+      @touchend.capture="(event) => contentMouseActive(event, false)"
+    >
+      <slot />
+    </div>
     <div v-if="positionalRotation" ref="topLayer"
       @mousemove.capture="forwardEvent"
       @mouseover.capture="forwardEvent"
+      @touchmove.capture="forwardTouchEvent"
       @click.capture="forwardEvent"
     >
-      <div class="rotation-overlay top"
-        @mousedown="(event) => {setRotationMode(event, 'vertical'); forwardEvent(event)}"
-        @mouseup="forwardEvent"
-      >
-        <span>Click and drag here to rotate vertically</span>
-      </div>
-      <div class="rotation-overlay bottom"
-        @mousedown="(event) => {setRotationMode(event, 'vertical'); forwardEvent(event)}"
-        @mouseup="forwardEvent"
-      >
-        <span>Click and drag here to rotate vertically</span>
-      </div>
-      <div class="rotation-overlay left"
-        @mousedown="(event) => {setRotationMode(event, 'horizontal'); forwardEvent(event)}"
+      <div
+        v-for="overlay in rotationOverlays"
+        :key="overlay.position"
+        :class="['rotation-overlay', overlay.position, touchActive ? 'touch-active' : '']"
+        @mousedown="(event) => {setRotationMode(event, overlay.mode); forwardEvent(event)}"
         @mouseup="forwardEvent"
+        @touchstart="(event) => {setRotationMode(event, overlay.mode); forwardTouchEvent(event)}"
+        @touchend="forwardTouchEvent"
       >
-        <span>Click and drag here to rotate horizontally</span>
+        <span>{{ overlay.text }}</span>
       </div>
-      <div class="rotation-overlay right"
-        @mousedown="(event) => {setRotationMode(event, 'horizontal'); forwardEvent(event)}"
-        @mouseup="forwardEvent"
-      >
-        <span>Click and drag here to rotate horizontally</span>
-      </div>
-    </div>
-    <div class="content-layer" ref="contentLayer"
-      @mouseleave.capture="skipWhenInBound"
-      @mousedown.capture="(event) => contentMouseActive(event, true)"
-      @mouseup.capture="(event) => contentMouseActive(event, false)"
-    >
-      <slot />
     </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' },
+  { position: 'left', mode: 'horizontal', text: 'Begin interaction here to rotate on the y-axis' },
+  { position: 'right', mode: 'horizontal', text: 'Begin interaction here to rotate on the y-axis' },
+];
+
 export default {
   name: "ScaffoldOverlay",
   data: function () {
     return {
       lockRotationMode: false,
+      touchActive: false,
+      rotationOverlays: rotationOverlays,
     }
   },
   props: {
@@ -66,20 +67,24 @@ export default {
     contentMouseActive: function(event, flag) {
       if (this.positionalRotation) {
         const topLayer = this.$refs.topLayer;
-        
         if (topLayer) {
           if (!flag) {
             this.lockRotationMode = false;
             this.setRotationMode(undefined, "free");
             topLayer.style.pointerEvents = 'auto';
+            if (event.type === "touchend") {
+              this.touchActive = false;
+            }
           }
           else {
             this.lockRotationMode = true;
             topLayer.style.pointerEvents = 'none';
+            if (event.type === "touchstart") {
+              this.touchActive = true;
+            }
           }
         }
       }
-      event.preventDefault();
     },
     setRotationMode: function(event, mode) {
       if (!this.lockRotationMode) {
@@ -113,7 +118,6 @@ export default {
       topLayer.style.pointerEvents = 'none';
       const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
       //const elementBelow = this.$el;
-      topLayer.style.pointerEvents = 'auto';
       topLayer.style.pointerEvents = pointerEvents;
       //const elementBelow = this.$refs.contentLayer;
       // Hide the top layer from pointer events
@@ -132,10 +136,52 @@ export default {
             button: event.button,
           }
         );
-
         elementBelow.dispatchEvent(newEvent);
+        event.stopPropagation();
+      }
+      event.preventDefault();
+    },
+    forwardTouchEvent: function(event) {
+      const topLayer = this.$refs.topLayer;
+      if (!topLayer) return;
+      // Find the element directly underneath the cursor
+      const pointerEvents = topLayer.style.pointerEvents;
+      topLayer.style.pointerEvents = 'none';
+      const firstTouch = event.changedTouches[0];
+      const clientX = firstTouch.clientX;
+      const clientY = firstTouch.clientY;
+      const elementBelow = document.elementFromPoint(clientX, clientY);
+      topLayer.style.pointerEvents = pointerEvents;
+      if (elementBelow) {
+        const newTouch = new Touch({
+          identifier: firstTouch.identifier,
+          target: elementBelow,
+          clientX: firstTouch.clientX,
+          clientY: firstTouch.clientY,
+          pageX: firstTouch.pageX,
+          pageY: firstTouch.pageY,
+          screenX: firstTouch.screenX,
+          screenY: firstTouch.screenY,
+          radiusX: firstTouch.radiusX,
+          radiusY: firstTouch.radiusY,
+          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],
+          }
+        );
+        elementBelow.dispatchEvent(newEvent);
+        event.stopPropagation();
       }
-      event.stopPropagation();
       event.preventDefault();
     }
   }
@@ -144,10 +190,14 @@ export default {
 
 <style scoped lang="scss">
 .rotation-overlay {
-  z-index: 2;
+  z-index: 1;
   background-color: transparent;
   position:absolute;
   opacity: 0;
+  &.touch-active {
+    opacity: 1;
+    background-color: rgba(173,216,230, 0.1)
+  }
   &:hover {
     opacity: 1;
     background-color: rgba(173,216,230, 0.1)

package/src/components/ScaffoldVuer.vue

@@ -35,6 +35,7 @@
     <div v-show="displayUI && !isTransitioning">
       <DrawToolbar
         v-if="viewingMode === 'Annotation' && (authorisedUser || offlineAnnotationEnabled)"
+        class="control-layer"
         :toolbarOptions="toolbarOptions"
         :activeDrawTool="activeDrawTool"
         :activeDrawMode="activeDrawMode"
@@ -57,7 +58,7 @@
         <template #reference>
           <div
             v-if="displayWarning"
-            class="message-icon warning-icon"
+            class="message-icon warning-icon control-layer"
             @mouseover="showHelpText(7)"
             @mouseout="hideHelpText(7)"
           >
@@ -79,7 +80,7 @@
         <template #reference>
           <div
             v-if="displayLatestChanges && latestChangesMessage"
-            class="el-icon-warning message-icon latest-changesicon"
+            class="el-icon-warning message-icon latest-changesicon control-layer"
             @mouseover="showHelpText(8)"
             @mouseout="hideHelpText(8)"
           >
@@ -100,6 +101,7 @@
       >
         <template #reference>
           <ScaffoldTreeControls
+            class="control-layer"
             ref="scaffoldTreeControls"
             :isReady="isReady"
             :show-colour-picker="enableColourPicker"
@@ -111,6 +113,7 @@
       </el-popover>
       <div class="primitive-controls-box">
         <primitive-controls
+          class="control-layer"
           ref="primitiveControls"
           :createData="createData"
           :viewingMode="viewingMode"
@@ -132,7 +135,7 @@
         <template #reference>
           <div
             v-if="timeVarying"
-            class="time-slider-container"
+            class="time-slider-container control-layer"
             :class="[minimisedSlider ? 'minimised' : '', sliderPosition]"
           >
             <el-tabs type="card">
@@ -201,7 +204,7 @@
           </div>
         </template>
       </el-popover>
-      <div class="bottom-right-control">
+      <div class="bottom-right-control control-layer">
         <el-popover
           :visible="hoverVisibilities[0].value"
           content="Zoom in"
@@ -298,7 +301,7 @@
         popper-class="background-popper non-selectable h-auto"
         virtual-triggering
       >
-        <div>
+        <div class="control-layer">
           <el-row class="backgroundText">Viewing Mode</el-row>
           <el-row class="backgroundControl">
             <div style="margin-bottom: 2px;">
@@ -362,7 +365,7 @@
         </div>
       </el-popover>
       <div
-        class="settings-group"
+        class="settings-group control-layer"
         :class="{ open: drawerOpen, close: !drawerOpen }"
       >
         <el-row v-if="showOpenMapButton">
@@ -1581,7 +1584,6 @@ export default {
     },
     setRotationMode: function(mode) {
       if (this.$module.scene) {
-        console.log("here", mode)
         const cameracontrol = this.$module.scene.getZincCameraControls();
         cameracontrol.setRotationMode(mode);
       }
@@ -2911,6 +2913,10 @@ export default {
   }
 }
 
+.control-layer {
+  z-index: 2;
+}
+
 .time-slider-container {
   text-align: left;
   position: absolute;