@abi-software/scaffoldvuer 1.11.4-beta.1 → 1.13.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.11.4-beta.1",
+  "version": "1.13.0-beta.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.6",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "1.0.2",
     "@element-plus/icons-vue": "^2.3.1",
@@ -53,7 +53,7 @@
     "unplugin-vue-components": "^0.26.0",
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
-    "zincjs": "1.15.1"
+    "zincjs": "^1.16.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.0",

package/src/components/ScaffoldOverlay.vue

@@ -19,40 +19,15 @@
       @click.capture="forwardEvent"
     >
       <div
-        :class="['rotation-overlay', 'top', touchActive ? 'touch-active' : '']"
-        @mousedown="(event) => {setRotationMode(event, 'vertical'); forwardEvent(event)}"
+        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, 'vertical'); forwardTouchEvent(event)}"
+        @touchstart="(event) => {setRotationMode(event, overlay.mode); 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>
+        <span>{{ overlay.text }}</span>
       </div>
     </div>
 
@@ -62,12 +37,20 @@
 <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: {

package/src/components/ScaffoldVuer.vue

@@ -1050,6 +1050,9 @@ export default {
     this.$module.zincRenderer.addPreRenderCallbackFunction(() => {
       this.currentTime = this.$module.getCurrentTime();
     })
+    this.$module.zincRenderer.addContextRestoredCallbackFunction(() => {
+      this.backgroundChangeCallback(this.currentBackground);
+    })
   },
   beforeUnmount: function () {
     if (this.ro) this.ro.disconnect();
@@ -1584,7 +1587,6 @@ export default {
     },
     setRotationMode: function(mode) {
       if (this.$module.scene) {
-        console.log("here", mode)
         const cameracontrol = this.$module.scene.getZincCameraControls();
         cameracontrol.setRotationMode(mode);
       }
@@ -2283,6 +2285,12 @@ export default {
     emitOfflineAnnotationUpdate: function () {
       this.$emit('update-offline-annotation-enabled', this.offlineAnnotationEnabled);
     },
+    forceContextRestore: function() {
+      this.$module.zincRenderer.forceContextRestore();
+    },
+    forceContextLoss: function() {
+      this.$module.zincRenderer.forceContextLoss();
+    },
     /**
      * @public
      * Hide the tooltip
@@ -2813,9 +2821,11 @@ export default {
     toggleRendering: function (flag) {
       if (this.$module.zincRenderer) {
         if (flag) {
+          this.forceContextRestore();
           this.$module.zincRenderer.animate();
         } else {
           this.$module.zincRenderer.stopAnimate();
+          this.forceContextLoss();
         }
       }
     },