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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.11.2",
+  "version": "1.11.4-beta.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "1.7.0",
+    "@abi-software/map-utilities": "^1.7.1",
     "@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

@@ -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"
@@ -191,18 +192,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>
@@ -408,13 +398,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: false,
       minimapSettings: {
         x_offset: 16,
         y_offset: 50,
@@ -428,8 +418,6 @@ export default {
       viewURL: "",
       renderInfoOn: false,
       rendererInfo: undefined,
-      zoom: 1,
-      pos: [0, 0],
       format: "metadata",
       sceneSettings: [],
       searchInput: "",
@@ -488,9 +476,6 @@ export default {
       deep: true,
       immediate: true,
     },
-    syncMode: function (val) {
-      this.$refs.scaffold.toggleSyncControl(val);
-    },
     helpMode: function (newVal) {
       if (!newVal) {
         this.helpModeActiveItem = 0;

package/src/components/ScaffoldOverlay.vue

@@ -0,0 +1,192 @@
+<template>
+  <div
+    ref="overlay"
+  >
+    <div v-if="positionalRotation" ref="topLayer"
+      @mousemove.capture="forwardEvent"
+      @mouseover.capture="forwardEvent"
+      @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)}"
+        @mouseup="forwardEvent"
+      >
+        <span>Click and drag here to rotate horizontally</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 */
+
+export default {
+  name: "ScaffoldOverlay",
+  data: function () {
+    return {
+      lockRotationMode: 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';
+          }
+          else {
+            this.lockRotationMode = true;
+            topLayer.style.pointerEvents = 'none';
+          }
+        }
+      }
+      event.preventDefault();
+    },
+    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 = 'auto';
+      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();
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.rotation-overlay {
+  z-index: 2;
+  background-color: transparent;
+  position:absolute;
+  opacity: 0;
+  &: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
@@ -410,7 +412,7 @@
         </el-row>
       </div>
     </div>
-  </div>
+  </scaffold-overlay>
 </template>
 
 <script>
@@ -422,6 +424,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 +492,7 @@ export default {
     Radio,
     RadioGroup,
     Row,
+    ScaffoldOverlay,
     Select,
     Slider,
     TabPane,
@@ -684,6 +688,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 +1039,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 +1579,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 +1838,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 +2797,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";

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']