@abi-software/scaffoldvuer 1.11.3 → 1.11.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.11.3",
+  "version": "1.11.4-beta.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

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"
@@ -22,6 +22,7 @@
         :marker-cluster="markerCluster"
         :minimap-settings="minimapSettings"
         :show-colour-picker="showColourPicker"
+        :positionalRotation="positionalRotation"
         :render="render"
         :region="region"
         :view-u-r-l="viewURL"
@@ -48,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>
@@ -191,18 +190,7 @@
           <el-col>
             <el-row :gutter="20" justify="center" align="middle">
               <el-col>
-                <el-switch v-model="syncMode" active-text="Sync Mode" active-color="#8300bf" />
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" justify="center" align="middle" v-if="syncMode">
-              <el-col :span="8">
-                <el-input-number v-model="zoom" :min="1.0" :controls="false" placeholder="Please input" aria-label="zoom" />
-              </el-col>
-              <el-col :span="8">
-                <el-input-number v-model="pos[0]" :min="-1.0" :max="1.0" :controls="false" placeholder="Please input" aria-label="x" />
-              </el-col>
-              <el-col :span="8">
-                <el-input-number v-model="pos[1]" :min="-1.0" :max="1.0" :controls="false" aria-label="y" />
+                <el-switch v-model="positionalRotation" active-text="Rotation Helper" active-color="#8300bf" />
               </el-col>
             </el-row>
           </el-col>
@@ -312,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 }">
@@ -408,13 +396,13 @@ export default {
       displayMarkers: false,
       onClickMarkers: false,
       wireframe: false,
-      syncMode: false,
       currentTime: 0,
       displayMinimap: false,
       tumbleOn: false,
       tumbleDirection: [1.0, 0.0],
       showColourPicker: true,
       markerCluster: false,
+      positionalRotation: true,
       minimapSettings: {
         x_offset: 16,
         y_offset: 50,
@@ -428,8 +416,6 @@ export default {
       viewURL: "",
       renderInfoOn: false,
       rendererInfo: undefined,
-      zoom: 1,
-      pos: [0, 0],
       format: "metadata",
       sceneSettings: [],
       searchInput: "",
@@ -488,9 +474,6 @@ export default {
       deep: true,
       immediate: true,
     },
-    syncMode: function (val) {
-      this.$refs.scaffold.toggleSyncControl(val);
-    },
     helpMode: function (newVal) {
       if (!newVal) {
         this.helpModeActiveItem = 0;
@@ -879,7 +862,7 @@ body {
   }
 }
 
-.vuer {
+.demo-vuer {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -939,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

@@ -0,0 +1,259 @@
+<template>
+  <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', touchActive ? 'touch-active' : '']"
+        @mousedown="(event) => {setRotationMode(event, 'vertical'); forwardEvent(event)}"
+        @mouseup="forwardEvent"
+        @touchstart="(event) => {setRotationMode(event, 'vertical'); forwardTouchEvent(event)}"
+        @touchend="forwardTouchEvent"
+      >
+        <span>Begin interaction here to rotate on the x-axis</span>
+      </div>
+      <div
+        :class="['rotation-overlay', 'bottom', touchActive ? 'touch-active' : '']"
+        @mousedown="(event) => {setRotationMode(event, 'vertical'); forwardEvent(event)}"
+        @mouseup="forwardEvent"
+        @touchstart="(event) => {setRotationMode(event, 'vertical'); forwardTouchEvent(event)}"
+        @touchend="forwardTouchEvent"
+      >
+        <span>Begin interaction here to rotate on the x-axis</span>
+      </div>
+      <div
+        :class="['rotation-overlay', 'left', touchActive ? 'touch-active' : '']"
+        @mousedown="(event) => {setRotationMode(event, 'horizontal'); forwardEvent(event)}"
+        @mouseup="forwardEvent"
+        @touchstart="(event) => {setRotationMode(event, 'horizontal'); forwardTouchEvent(event)}"
+        @touchend="forwardTouchEvent"
+      >
+        <span>Begin interaction here to rotate on the y-axis</span>
+      </div>
+      <div
+        :class="['rotation-overlay', 'right', touchActive ? 'touch-active' : '']"
+        @mousedown="(event) => {setRotationMode(event, 'horizontal'); forwardEvent(event)}"
+        @mouseup="forwardEvent"
+        @touchstart="(event) => {setRotationMode(event, 'horizontal'); forwardTouchEvent(event)}"
+        @touchend="forwardTouchEvent"
+      >
+        <span>Begin interaction here to rotate on the y-axis</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+
+export default {
+  name: "ScaffoldOverlay",
+  data: function () {
+    return {
+      lockRotationMode: false,
+      touchActive: false,
+    }
+  },
+  props: {
+    /**
+     * Experimental feature to restrict rotation at
+     * one-axis based on position of the initial click
+     */
+     positionalRotation: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    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;
+            }
+          }
+        }
+      }
+    },
+    setRotationMode: function(event, mode) {
+      if (!this.lockRotationMode) {
+        this.$emit('onRotationModeChange', mode);
+      }
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    skipWhenInBound: function(event) {
+      if (this.positionalRotation) {
+        const topLayer = this.$refs.topLayer;
+        const contentLayer = this.$refs.contentLayer;
+        if (topLayer && contentLayer) {
+          const pointerEvents = topLayer.style.pointerEvents;
+          topLayer.style.pointerEvents = 'none';
+          const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
+          topLayer.style.pointerEvents = pointerEvents;
+          if (contentLayer.contains(elementBelow)) {
+            event.stopPropagation();
+          }
+        }
+      }
+    },
+    forwardEvent: 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 elementBelow = document.elementFromPoint(event.clientX, event.clientY);
+      //const elementBelow = this.$el;
+      topLayer.style.pointerEvents = pointerEvents;
+      //const elementBelow = this.$refs.contentLayer;
+      // Hide the top layer from pointer events
+      // If there's an element below, dispatch a new event on it
+      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,
+          }
+        );
+        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.preventDefault();
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.rotation-overlay {
+  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)
+  }
+  &.top {
+    top:0%;
+    height:20%;
+    left: 35%;
+    width: 30%;
+  }
+  &.bottom {
+    bottom:0%;
+    height:20%;
+    left: 35%;
+    width: 30%;
+  }
+  &.left {
+    top:35%;
+    height:30%;
+    left: 0%;
+    width: 20%;
+  }
+  &.right {
+    top:35%;
+    height:30%;
+    right: 0%;
+    width: 20%;
+  }
+  span {
+    position: relative;
+    color:black;
+    opacity:0.5;
+    top: 50%;
+  }
+}
+
+.content-layer {
+  width: 100%;
+  height: 100%;
+}
+
+</style>

package/src/components/ScaffoldVuer.vue

@@ -1,10 +1,12 @@
 <template>
-  <div
+  <scaffold-overlay
     ref="scaffoldContainer"
     v-loading="loading"
     class="scaffold-container"
     element-loading-text="Loading..."
     element-loading-background="rgba(0, 0, 0, 0.3)"
+    :positionalRotation="positionalRotation"
+    @onRotationModeChange="setRotationMode"
   >
     <map-svg-sprite-color />
     <scaffold-tooltip
@@ -33,6 +35,7 @@
     <div v-show="displayUI && !isTransitioning">
       <DrawToolbar
         v-if="viewingMode === 'Annotation' && (authorisedUser || offlineAnnotationEnabled)"
+        class="control-layer"
         :toolbarOptions="toolbarOptions"
         :activeDrawTool="activeDrawTool"
         :activeDrawMode="activeDrawMode"
@@ -55,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)"
           >
@@ -77,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)"
           >
@@ -98,6 +101,7 @@
       >
         <template #reference>
           <ScaffoldTreeControls
+            class="control-layer"
             ref="scaffoldTreeControls"
             :isReady="isReady"
             :show-colour-picker="enableColourPicker"
@@ -109,6 +113,7 @@
       </el-popover>
       <div class="primitive-controls-box">
         <primitive-controls
+          class="control-layer"
           ref="primitiveControls"
           :createData="createData"
           :viewingMode="viewingMode"
@@ -130,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">
@@ -199,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"
@@ -296,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;">
@@ -360,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">
@@ -410,7 +415,7 @@
         </el-row>
       </div>
     </div>
-  </div>
+  </scaffold-overlay>
 </template>
 
 <script>
@@ -422,6 +427,7 @@ import {
   ArrowLeft as ElIconArrowLeft,
 } from '@element-plus/icons-vue'
 import PrimitiveControls from "./PrimitiveControls.vue";
+import ScaffoldOverlay from "./ScaffoldOverlay.vue";
 import ScaffoldTooltip from "./ScaffoldTooltip.vue";
 import ScaffoldTreeControls from "./ScaffoldTreeControls.vue";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
@@ -489,6 +495,7 @@ export default {
     Radio,
     RadioGroup,
     Row,
+    ScaffoldOverlay,
     Select,
     Slider,
     TabPane,
@@ -684,6 +691,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * Experimental feature to restrict rotation at
+     * one-axis based on position of the initial click
+     */
+    positionalRotation: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Define what is considered as nerves.
      */
@@ -1027,7 +1042,7 @@ export default {
     this.$module.initialiseRenderer(this.$refs.display);
     this.toggleRendering(this.render);
     this.ro = new ResizeObserver(this.adjustLayout).observe(
-      this.$refs.scaffoldContainer
+      this.$refs.scaffoldContainer.$el
     );
     this.helpTextWait = [];
     this.helpTextWait.length = this.hoverVisibilities.length;
@@ -1567,6 +1582,13 @@ export default {
         }
       }
     },
+    setRotationMode: function(mode) {
+      if (this.$module.scene) {
+        console.log("here", mode)
+        const cameracontrol = this.$module.scene.getZincCameraControls();
+        cameracontrol.setRotationMode(mode);
+      }
+    },
     updateViewURL: function (viewURL) {
       if (viewURL) {
         if (this.isReady) {
@@ -1819,7 +1841,7 @@ export default {
           if (event.identifiers.length > 0 && event.identifiers[0]) {
             if (event.identifiers[0].coords) {
               const offsets =
-                this.$refs.scaffoldContainer.getBoundingClientRect();
+                this.$refs.scaffoldContainer.$el.getBoundingClientRect();
               this.tData.x = event.identifiers[0].coords.x - offsets.left;
               this.tData.y = event.identifiers[0].coords.y - offsets.top;
             }
@@ -2778,8 +2800,8 @@ export default {
      * Callback using ResizeObserver.
      */
     adjustLayout: function () {
-      if (this.$refs.scaffoldContainer) {
-        let width = this.$refs.scaffoldContainer.clientWidth;
+      if (this.$refs.scaffoldContainer?.$el) {
+        let width = this.$refs.scaffoldContainer.$el.clientWidth;
         this.minimisedSlider = width < 812;
         if (this.minimisedSlider) {
           this.sliderPosition = this.drawerOpen ? "right" : "left";
@@ -2892,6 +2914,10 @@ export default {
   }
 }
 
+.control-layer {
+  z-index: 2;
+}
+
 .time-slider-container {
   text-align: left;
   position: absolute;

package/src/components.d.ts

@@ -36,6 +36,7 @@ declare module 'vue' {
     PrimitiveControls: typeof import('./components/PrimitiveControls.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScaffoldOverlay: typeof import('./components/ScaffoldOverlay.vue')['default']
     ScaffoldTooltip: typeof import('./components/ScaffoldTooltip.vue')['default']
     ScaffoldTreeControls: typeof import('./components/ScaffoldTreeControls.vue')['default']
     ScaffoldVuer: typeof import('./components/ScaffoldVuer.vue')['default']