@abi-software/scaffoldvuer 1.21.1-beta.4 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.21.1-beta.4",
+  "version": "2.0.0",
   "license": "Apache-2.0",
   "engines": {
     "node": "^24.20.0"
@@ -21,6 +21,7 @@
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
     "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
+    "release:major": "npm version major;  npm publish",
     "release:minor": "npm version minor; npm publish",
     "release:patch": "npm version patch;  npm publish",
     "docs:dev": "vitepress dev docs",
@@ -58,7 +59,7 @@
     "simple-dropzone": "^0.8.3",
     "vue": "^3.5.41",
     "vue-router": "^5.2.0",
-    "zincjs": "^2.4.1-beta.4"
+    "zincjs": "^3.0.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^8.0.1",

package/src/components/ScaffoldVuer.vue

@@ -753,6 +753,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * If this flag is set to true, renderer will only be redrawn when changes are
+     * made through ZincJS APIs or time is running. Any external change made to the scene will require
+     * invalidate() be called on object, region, scene and renderer in order to be redrawn.
+     *
+     */
+    renderOnDemand: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Specify the endpoint of the flatmap server.
      * This is used by annotation service included in
@@ -918,6 +928,7 @@ export default {
         isSearch: false,
       }),
       //checkedRegions: []
+      unwatchRenderOnDemand: null,
       unwatchURL: null,
       unwatchRegion: null,
       unwatchState: null,
@@ -1046,14 +1057,13 @@ export default {
       this.backgroundChangeCallback(this.currentBackground);
     });
     //Setup some watchers that depend on threejs init()
-    this.unwatchURL = this.$watch(
-      'url',
-      (newVal) => {
-        if (this.state === undefined || this.state.url === undefined) {
-          this.setURL(newVal);
-        }
+    this.unwatchRenderOnDemand = this.$watch(
+      'renderOnDemand',
+      (renderOnDemand) => {
+        //Older versions of ZincJS do not support render on demand
+        this.$module.zincRenderer.setRenderOnDemand?.(renderOnDemand);
       },
-      { immediate: true }, // Runs immediately after creation, if desired
+      { immediate: true },
     );
     this.unwatchRegion = this.$watch(
       'region',
@@ -1096,6 +1106,7 @@ export default {
     );
   },
   beforeUnmount: function () {
+    if (this.unwatchRenderOnDemand) this.unwatchRenderOnDemand();
     if (this.unwatchURL) this.unwatchURL();
     if (this.unwatchRegion) this.unwatchRegion();
     if (this.unwatchState) this.unwatchState();
@@ -1292,6 +1303,8 @@ export default {
     backgroundChangeCallback: function (colour) {
       this.currentBackground = colour;
       this.$module.zincRenderer.getThreeJSRenderer().setClearColor(this.currentBackground, 1);
+      //The clear colour is set on the THREE.js renderer directly
+      this.$module.zincRenderer.invalidate?.();
     },
     /**
      * Internal only.
@@ -1316,6 +1329,8 @@ export default {
         camera.aspect = width / height;
         camera.updateProjectionMatrix();
         //this.$module.zincRenderer.onWindowResize();
+        //Force a draw, the size and camera are changed directly
+        this.$module.zincRenderer.invalidate?.();
         this.$module.zincRenderer.render();
         //renderer.render(this.$module.scene, camera);
 
@@ -1326,6 +1341,7 @@ export default {
         camera.aspect = originalAspect;
         camera.updateProjectionMatrix();
         //this.$module.zincRenderer.onWindowResize();
+        this.$module.zincRenderer.invalidate?.();
         this.$module.zincRenderer.render();
         //renderer.render(this.$module.scene, camera);
 
@@ -1348,6 +1364,8 @@ export default {
       this.captureID = this.$module.zincRenderer.addPostRenderCallbackFunction(
         this.captureScreenshotCallback(filename, width, height),
       );
+      //Post render callbacks only run when a frame is drawn
+      this.$module.zincRenderer.invalidate?.();
     },
     /**
      * @public
@@ -3177,11 +3195,11 @@ export default {
     toggleRendering: function (flag) {
       if (this.$module.zincRenderer) {
         if (flag) {
-        //  this.forceContextRestore();
+          //  this.forceContextRestore();
           this.$module.zincRenderer.animate();
         } else {
           this.$module.zincRenderer.stopAnimate();
-        //  this.forceContextLoss();
+          //  this.forceContextLoss();
         }
       }
     },

package/src/scripts/RendererModule.js

@@ -125,6 +125,8 @@ RendererModule.prototype.setHighlightedByObjects = function (
 ) {
   const zincObjects = objectsToZincObjects(objects);
   const changed = this.graphicsHighlight.setHighlighted(objects);
+  //Some highlights are applied to THREE.js materials directly
+  if (changed) this.zincRenderer?.invalidate?.();
   if (propagateChanges) {
     let eventType = EVENT_TYPE.MOVE;
     if (changed) eventType = EVENT_TYPE.HIGHLIGHTED;
@@ -183,6 +185,8 @@ RendererModule.prototype.setSelectedByObjects = function (
   let changed;
   if (this.selectObjectOnPick) {
     changed = this.graphicsHighlight.setSelected(objects);
+    //Some highlights are applied to THREE.js materials directly
+    if (changed) this.zincRenderer?.invalidate?.();
   } else {
     changed = true;
   }

package/vite.config.js

@@ -61,7 +61,8 @@ export default defineConfig(({ command }) => {
             '@abi-software/sparc-annotation': '@abi-software/sparc-annotation',
             '@abi-software/svg-sprite': '@abi-software/svg-sprite',
             '@abi-software/map-utilities': '@abi-software/map-utilities',
-            '@abi-software/map-utilities/dist/style.css': '_abi_software_map_utilities_dist_style_css',
+            '@abi-software/map-utilities/dist/style.css':
+              '_abi_software_map_utilities_dist_style_css',
             pinia: 'pinia',
           },
           // keep css output name stable for the "./dist/style.css" export/import paths