@abi-software/scaffoldvuer 1.3.2 → 1.3.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.3.2",
+  "version": "1.3.3-beta.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.10.1"
+    "zincjs": "^1.10.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/App.vue

@@ -646,6 +646,7 @@ export default {
         }
       }
       this.scaffoldRef = this.$refs.scaffold;
+      // this.scaffoldRef.changeViewingMode('Annotation')
     },
     addLinesWithNormal: function (coord, normal) {
       if (coord && normal) {

package/src/components/LinesControls.vue

@@ -97,7 +97,7 @@
 /* eslint-disable no-alert, no-console */
 // This is not in use at this moment, due to
 // limited support to line width
-import { shallowRef } from 'vue';
+import { markRaw, shallowRef } from 'vue';
 import {
   getLineDistance,
   moveAndExtendLine,
@@ -146,26 +146,24 @@ export default {
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
       edited: false,
+      zincObject: undefined,
     };
   },
   watch: {
     "createData.faceIndex": {
       handler: function (value) {
-        if (this._zincObject?.isLines2) {
+        if (this.zincObject?.isLines2) {
           this.currentIndex = value;
-          this.distance = getLineDistance(this._zincObject, this.currentIndex);
+          this.distance = getLineDistance(this.zincObject, this.currentIndex);
         }
       },
       immediate: true,
     },
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     changeIndex: function(increment) {
       if (increment) {
-        const dist = getLineDistance(this._zincObject, this.currentIndex + 1);
+        const dist = getLineDistance(this.zincObject, this.currentIndex + 1);
         if (dist > 0) {
           this.currentIndex++;
           this.reset();
@@ -179,7 +177,7 @@ export default {
       if (this.newDistance !== 0) {
         this.distance = this.newDistance;
         this.edited = moveAndExtendLine(
-          this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+          this.zincObject, this.currentIndex, this.newDistance, true) || this.edited;
       } else {
         this.newDistance = this.distance;
       }
@@ -187,22 +185,22 @@ export default {
     onLengthSliding: function() {
       this.newDistance = Math.pow(10, this.lengthScale) * this.distance;
       this.edited = moveAndExtendLine(
-        this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+        this.zincObject, this.currentIndex, this.newDistance, true) || this.edited;
     },
     onMoveSliding: function() {
       const diff = (this.adjust - this.pAdjust) * this.distance;
       this.edited =  moveAndExtendLine(
-        this._zincObject, this.currentIndex, diff, false) || this.edited;
+        this.zincObject, this.currentIndex, diff, false) || this.edited;
       this.pAdjust = this.adjust;
     },
     reset: function() {
       this.adjust = 0;
       this.pAdjust = 0;
       this.lengthScale = 0;
-      this.distance = getLineDistance(this._zincObject, this.currentIndex);
+      this.distance = getLineDistance(this.zincObject, this.currentIndex);
       this.newDistance = this.distance;
       if (this.edited) {
-        this.$emit("primitivesUpdated", this._zincObject);
+        this.$emit("primitivesUpdated", this.zincObject);
         this.edited = false;
       }
     },
@@ -210,19 +208,19 @@ export default {
       this.currentIndex = -1;
       this.distance = 0;
       if (object.isLines2) {
-        this._zincObject = object;
-        this.width = this._zincObject.getMorph().material.linewidth;
+        this.zincObject = markRaw(object);
+        this.width = this.zincObject.getMorph().material.linewidth;
         if (object.isEditable) {
           this.currentIndex = 0;
           this.distance = getLineDistance(object, this.currentIndex);
         }
       } else {
-        this._zincObject = undefined;
-        this.linewidth = 10;
+        this.zincObject = undefined;
+        this.width = 10;
       }
     },
     modifyWidth: function () {
-      this._zincObject.setWidth(this.width);
+      this.zincObject.setWidth(this.width);
     },
   },
 };

package/src/components/PointsControls.vue

@@ -125,7 +125,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { shallowRef } from 'vue';
+import { markRaw, shallowRef } from 'vue';
 import {
   movePoint,
 } from "../scripts/Utilities.js";
@@ -184,11 +184,9 @@ export default {
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
       edited: false,
+      zincObject: undefined,
     };
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   watch: {
     boundingDims: {
       handler: function (value) {
@@ -211,7 +209,7 @@ export default {
   methods: {
     changeIndex: function(increment) {
       if (increment) {
-        if (this._zincObject.drawRange > this.currentIndex + 1) {
+        if (this.zincObject.drawRange > this.currentIndex + 1) {
           this.currentIndex++;
           this.reset();
         }
@@ -226,7 +224,7 @@ export default {
         this.translation[1] - this.pTranslation[1],
         this.translation[2] - this.pTranslation[2],
       ];
-      this.edited = movePoint(this._zincObject, this.currentIndex, diff) || this.edited;
+      this.edited = movePoint(this.zincObject, this.currentIndex, diff) || this.edited;
       for (let i = 0; i < 3; i++) {
         this.pTranslation[i] = this.translation[i];
       }
@@ -235,33 +233,33 @@ export default {
       this.translation = [0, 0, 0];
       this.pTranslation = [0, 0, 0];
       if (this.edited) {
-        this.$emit("primitivesUpdated", this._zincObject);
+        this.$emit("primitivesUpdated", this.zincObject);
         this.edited = false;
       }
     },
     setObject: function (object) {
       this.currentIndex = -1;
       if (object.isPointset) {
-        this._zincObject = object;
-        this.size = this._zincObject.morph.material.size;
-        this.attenuation = this._zincObject.morph.material.sizeAttenuation;
+        this.zincObject = markRaw(object);
+        this.size = this.zincObject.morph.material.size;
+        this.attenuation = this.zincObject.morph.material.sizeAttenuation;
         if (object.isEditable) {
-          if (this._zincObject.drawRange > 0) {
+          if (this.zincObject.drawRange > 0) {
             this.currentIndex = 0;
           }
         }
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.size = 10;
         this.attenuation = false;
       }
     },
     modifyAttenuation: function(flag) {
       this.attenuation = flag;
-      this._zincObject.setSizeAttenuation(flag);
+      this.zincObject.setSizeAttenuation(flag);
     },
     modifySize: function () {
-      this._zincObject.setSize(this.size);
+      this.zincObject.setSize(this.size);
     },
   },
 };

package/src/components/PrimitiveControls.vue

@@ -51,7 +51,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { ref, shallowRef } from 'vue';
+import { markRaw } from 'vue';
 import {
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
@@ -96,6 +96,7 @@ export default {
       drawerOpen: true,
       zincObject: undefined,
       isEditable: false,
+      displayString: "100%"
     };
   },
   methods: {
@@ -108,7 +109,7 @@ export default {
     },
     setObject: function(object) {
       if (object) {
-        this.zincObject = shallowRef(object);
+        this.zincObject = markRaw(object);
       } else {
         this.zincObject = undefined;
       }
@@ -136,7 +137,7 @@ export default {
         }
       }
       if (object && object.getMorph()) {
-        this.material = ref(object.getMorph().material);
+        this.material = object.getMorph().material;
       } else {
         this.material = undefined;
       }

package/src/components/ScaffoldTreeControls.vue

@@ -37,6 +37,7 @@ import {
 } from "../scripts/Utilities.js";
 import { TreeControls } from "@abi-software/map-utilities";
 import "@abi-software/map-utilities/dist/style.css";
+import { markRaw } from "vue";
 
 const nameSorting = (a, b) => {
   const labelA = a.label.toUpperCase();
@@ -74,6 +75,8 @@ export default {
       active: [],
       hover: [],
       drawerOpen: true,
+      nodeNumbers: 0,
+      module: undefined,
     };
   },
   computed: {
@@ -104,7 +107,7 @@ export default {
       parentContainer.sort((a, b) => {
         return nameSorting(a, b);
       });
-      this.__nodeNumbers++;
+      this.nodeNumbers++;
       this.$nextTick(() => {
         const checked =
           this.$refs.treeControls.$refs.regionTree.getCheckedKeys();
@@ -117,8 +120,8 @@ export default {
     // '__r/'
     findOrCreateRegion: function (data, paths, prefix) {
       //check if root region has been set
-      if (this.rootID === undefined && this.$module && this.$module.scene) {
-        this.treeData[0].id = this.$module.scene.getRootRegion().uuid;
+      if (this.module && this.module.scene) {
+        this.treeData[0].id = this.module.scene.getRootRegion().uuid;
         this.treeData[0].isRegion = true;
       }
       if (paths.length > 0) {
@@ -127,7 +130,7 @@ export default {
           (child) => child.label == _paths[0]
         );
         const path = prefix + "/" + paths[0];
-        const region = this.$module.scene
+        const region = this.module.scene
           .getRootRegion()
           .findChildFromPath(path);
         if (!childRegionItem) {
@@ -185,7 +188,7 @@ export default {
           for (let i = 0; i < regionData.children.length; i++) {
             if (regionData.children[i].label === group) {
               regionData.children.splice(i, 1);
-              this.__nodeNumbers--;
+              this.nodeNumbers--;
               return;
             }
           }
@@ -196,7 +199,7 @@ export default {
       const isRegion = node.isRegion;
       const isPrimitives = node.isPrimitives;
       const isChecked = data.checkedKeys.includes(node.id);
-      const region = this.$module.scene
+      const region = this.module.scene
         .getRootRegion()
         .findChildFromPath(node.regionPath);
       if (isRegion) {
@@ -238,7 +241,7 @@ export default {
      * Select a region by its name.
      */
     changeActiveByNames: function (names, regionPath, propagate) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       const targetObjects = findObjectsWithNames(
         rootRegion,
         names,
@@ -251,7 +254,7 @@ export default {
      * Hover a region by its name.
      */
     changeHoverByNames: function (names, regionPath, propagate) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       const targetObjects = findObjectsWithNames(
         rootRegion,
         names,
@@ -293,7 +296,7 @@ export default {
     clear: function () {
       this.active.length = 0;
       this.hover.length = 0;
-      this.__nodeNumbers = 0;
+      this.nodeNumbers = 0;
       this.$refs.treeControls.$refs.regionTree.updateKeyChildren(
         this.treeData[0].id,
         []
@@ -315,7 +318,7 @@ export default {
       return "#FFFFFF";
     },
     getZincObjectsFromNode: function (node, transverse) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       if (node.isPrimitives) {
         return findObjectsWithNames(
           rootRegion,
@@ -335,14 +338,14 @@ export default {
     },
     //Set this right at the beginning.
     setModule: function (moduleIn) {
-      this.$module = moduleIn;
-      this.__nodeNumbers = 0;
-      const objects = this.$module.scene.getRootRegion().getAllObjects(true);
+      this.module = markRaw(moduleIn);
+      this.nodeNumbers = 0;
+      const objects = this.module.scene.getRootRegion().getAllObjects(true);
       objects.forEach((zincObject) => {
         this.zincObjectAdded(zincObject);
       });
-      this.$module.addOrganPartAddedCallback(this.zincObjectAdded);
-      this.$module.addOrganPartRemovedCallback(this.zincObjectRemoved);
+      this.module.addOrganPartAddedCallback(this.zincObjectAdded);
+      this.module.addOrganPartRemovedCallback(this.zincObjectRemoved);
     },
     setColourField: function (treeData, nodeData = undefined) {
       treeData
@@ -382,7 +385,7 @@ export default {
       }
     },
     visibilityToggle: function (item, event) {
-      this.$module.changeOrganPartsVisibility(item, event);
+      this.module.changeOrganPartsVisibility(item, event);
       if (event == false) {
         if (this.activeRegion === item) {
           this.removeActive(true);
@@ -414,7 +417,7 @@ export default {
         list.splice(index, 1);
         ids.push(node.id);
       }
-      const region = this.$module.scene
+      const region = this.module.scene
         .getRootRegion()
         .findChildFromPath(node.regionPath);
       if (nodeName && nodeName !== "__r") {
@@ -444,13 +447,13 @@ export default {
     getState: function () {
       let checkedItems =
         this.$refs.treeControls.$refs.regionTree.getCheckedKeys();
-      if (checkedItems.length === this.__nodeNumbers) {
+      if (checkedItems.length === this.nodeNumbers) {
         return { checkAll: true, version: "2.0" };
       } else {
         //We cannot use the generated uuid as the identifier for permastate,
         //convert it back to paths
         let paths = convertUUIDsToFullPaths(
-          this.$module.scene.getRootRegion(),
+          this.module.scene.getRootRegion(),
           checkedItems
         );
         return { checkedItems: paths, version: "2.0" };

package/src/components/ScaffoldVuer.vue

@@ -299,7 +299,7 @@
               placeholder="Select"
               class="scaffold-select-box viewing-mode"
               popper-class="scaffold_viewer_dropdown"
-              @change="viewingModeChange"
+              @change="changeViewingMode"
             >
               <el-option v-for="item in viewingModes" :key="item" :label="item" :value="item">
                 <el-row>
@@ -1864,8 +1864,11 @@ export default {
     /**
      * Callback on viewing mode change
      */
-    viewingModeChange: function () {
+    changeViewingMode: function (modeName) {
       if (this.$module) {
+        if (modeName) {
+          this.viewingMode = modeName
+        }
         if (this.viewingMode === "Annotation") {
           let authenticated = false;
           if (this.userInformation) {

package/src/components/TextureSlidesControls.vue

@@ -79,6 +79,7 @@ import {
   ElSlider as Slider,
   ElOption as Option,
 } from "element-plus";
+import { markRaw } from 'vue';
 
 /**
  * A component to control the opacity of the target object.
@@ -116,39 +117,37 @@ export default {
           label: "z",
         },
       ],
+      zincObject: undefined,
     };
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     setObject: function (object) {
       if (object.isTextureSlides) {
-        this._zincObject = object;
-        this.settings = this._zincObject.getTextureSettings();
+        this.zincObject = markRaw(object);
+        this.settings = this.zincObject.getTextureSettings();
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.settings = [];
       }
     },
     addNewSlide: function () {
       const newSettings = { direction: "x", value: 0 };
-      const returnSettings = this._zincObject.createSlide(newSettings);
+      const returnSettings = this.zincObject.createSlide(newSettings);
       this.settings.push(returnSettings);
     },
     modifyDirection: function(direction, slide) {
       if (slide) {
         slide.direction = direction;
-        this._zincObject.modifySlideSettings(slide);
+        this.zincObject.modifySlideSettings(slide);
       }
     },
     modifySlide: function (slide) {
       if (slide) {
-        this._zincObject.modifySlideSettings(slide);
+        this.zincObject.modifySlideSettings(slide);
       }
     },
     removeSlide: function (index, slide) {
-      this._zincObject.removeSlideWithId(slide.id);
+      this.zincObject.removeSlideWithId(slide.id);
       this.settings.splice(index, 1);
     },
   },

package/src/components/TransformationControls.vue

@@ -119,6 +119,7 @@ import {
   ElMain as Main,
   ElSlider as Slider,
 } from "element-plus";
+import { markRaw } from "vue";
 
 /**
  * A component to control the opacity of the target object.
@@ -141,6 +142,7 @@ export default {
       scale: 1,
       min: [0, 0, 0],
       max: [1, 1, 1],
+      zincObject: undefined,
     };
   },
   watch: {
@@ -163,14 +165,11 @@ export default {
       deep: true,
     },
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     setObject: function (object) {
       if (object.isZincObject) {
-        this._zincObject = object;
-        const morph = this._zincObject.getGroup();
+        this.zincObject = markRaw(object);
+        const morph = this.zincObject.getGroup();
         if (morph && morph.position) {
           this.x = morph.position.x;
           this.y = morph.position.y;
@@ -178,7 +177,7 @@ export default {
           this.scale = morph.scale.x;
         }
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.x = 0;
         this.y = 0;
         this.z = 0;
@@ -186,10 +185,10 @@ export default {
       }
     },
     modifyPosition: function() {
-      this._zincObject.setPosition(this.x, this.y, this.z);
+      this.zincObject.setPosition(this.x, this.y, this.z);
     },
     modifyScale: function() {
-      this._zincObject.setScaleAll(this.scale);
+      this.zincObject.setScaleAll(this.scale);
     },
   },
 };