@abi-software/scaffoldvuer 1.11.0-demo.3 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.11.0-demo.3",
+  "version": "1.11.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.6.0",
+    "@abi-software/map-utilities": "^1.7.0",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
@@ -54,7 +54,7 @@
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.14.3"
+    "zincjs": "^1.15.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/App.vue

@@ -36,6 +36,7 @@
         @timeChanged="updateCurrentTime"
         @zinc-object-added="objectAdded"
         @vue:mounted="viewerMounted"
+        :usageConfig="usageConfig"
       />
     </drop-zone>
 
@@ -397,7 +398,7 @@ export default {
   },
   data: function () {
     return {
-      consoleOn: false,
+      consoleOn: true,
       createLinesWithNormal: false,
       url: undefined,
       input: undefined,
@@ -447,7 +448,10 @@ export default {
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
       auto: NaN,
       annotator: markRaw(new AnnotationService(`https://mapcore-demo.org/devel/flatmap/v4/annotator`)),
-      fitBoundingBox: false
+      fitBoundingBox: false,
+      usageConfig: {
+        showTubeLinesControls: true
+      },
     };
   },
   watch: {

package/src/components/LinesControls.vue

@@ -1,32 +1,90 @@
 <template>
   <el-container class="lines-container">
     <el-main class="slides-block">
-      <el-row>
-        <el-col :offset="0" :span="6">
-          Width:
-        </el-col>
-        <el-col :offset="0" :span="12">
-          <el-slider
-            v-model="width"
-            class="my-slider"
-            :step="1"
-            :min="1"
-            :max="100"
-            :show-tooltip="false"
-            @input="modifyWidth"
-          />
-        </el-col>
-        <el-col :offset="0" :span="4">
-          <el-input-number
-            v-model="width"
-            :step="1"
-            :min="1"
-            :max="100"
-            :controls="false"
-            class="input-box number-input"
-          />
-        </el-col>
-      </el-row>
+      <template v-if="isTubeLines && showTubeLinesControls">
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Radius:
+          </el-col>
+          <el-col :offset="0" :span="12">
+            <el-slider
+              v-model="radius"
+              class="my-slider"
+              :step="1"
+              :min="1"
+              :max="32"
+              :show-tooltip="false"
+              @input="modifyTubeLines"
+            />
+          </el-col>
+          <el-col :offset="0" :span="4">
+            <el-input-number
+              v-model="radius"
+              :step="1"
+              :min="1"
+              :max="32"
+              :controls="false"
+              @change="modifyTubeLines"
+              class="input-box number-input"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Radial Segments:
+          </el-col>
+          <el-col :offset="0" :span="12">
+            <el-slider
+              v-model="radialSegments"
+              class="my-slider"
+              :step="1"
+              :min="8"
+              :max="32"
+              :show-tooltip="false"
+              @input="modifyTubeLines"
+            />
+          </el-col>
+          <el-col :offset="0" :span="4">
+            <el-input-number
+              v-model="radialSegments"
+              :step="1"
+              :min="8"
+              :max="32"
+              :controls="false"
+              @change="modifyTubeLines"
+              class="input-box number-input"
+            />
+          </el-col>
+        </el-row>
+      </template>
+      <template v-else-if="!isTubeLines">
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Width:
+          </el-col>
+          <el-col :offset="0" :span="12">
+            <el-slider
+              v-model="width"
+              class="my-slider"
+              :step="1"
+              :min="1"
+              :max="100"
+              :show-tooltip="false"
+              @input="modifyWidth"
+            />
+          </el-col>
+          <el-col :offset="0" :span="4">
+            <el-input-number
+              v-model="width"
+              :step="1"
+              :min="1"
+              :max="100"
+              :controls="false"
+              class="input-box number-input"
+            />
+          </el-col>
+        </el-row>
+      </template>
       <template v-if="currentIndex > -1 && distance > 0">
         <el-row>
           <el-col :offset="0" :span="4">
@@ -101,6 +159,7 @@ import { markRaw, shallowRef } from 'vue';
 import {
   getLineDistance,
   moveAndExtendLine,
+  NERVE_CONFIG
 } from "../scripts/Utilities.js";
 import {
   ElButton as Button,
@@ -114,6 +173,7 @@ import{
   ArrowLeft as ElIconArrowLeft,
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
+
 /**
  * A component to control the opacity of the target object.
  */
@@ -133,6 +193,9 @@ export default {
     createData: {
       type: Object,
     },
+    usageConfig: {
+      type: Object,
+    },
   },
   data: function () {
     return {
@@ -142,13 +205,21 @@ export default {
       distance: 0,
       newDistance: 0, 
       width: 1,
+      radius: NERVE_CONFIG.DEFAULT_RADIUS,
+      radialSegments: NERVE_CONFIG.DEFAULT_RADIAL_SEGMENTS,
       currentIndex: 0,
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
       edited: false,
       zincObject: undefined,
+      isTubeLines: false,
     };
   },
+  computed: {
+    showTubeLinesControls() {
+      return this.usageConfig.showTubeLinesControls;
+    },
+  },
   watch: {
     "createData.faceIndex": {
       handler: function (value) {
@@ -207,12 +278,16 @@ export default {
     setObject: function (object) {
       this.currentIndex = -1;
       this.distance = 0;
-      if (object.isLines2) {
+      if (object.isLines2 || object.isTubeLines) {
         this.zincObject = markRaw(object);
         this.width = this.zincObject.getMorph().material.linewidth;
+        this.isTubeLines = object.isTubeLines;
         if (object.isEditable) {
           this.currentIndex = 0;
           this.distance = getLineDistance(object, this.currentIndex);
+        } else if (object.userData?.isNerves) {
+          this.radius = NERVE_CONFIG.ZOOM_RADIUS;
+          this.radialSegments = NERVE_CONFIG.ZOOM_RADIAL_SEGMENTS;
         }
       } else {
         this.zincObject = undefined;
@@ -222,6 +297,9 @@ export default {
     modifyWidth: function () {
       this.zincObject.setWidth(this.width);
     },
+    modifyTubeLines: function () {
+      this.zincObject.setTubeLines(this.radius, this.radius * this.radialSegments);
+    },
   },
 };
 </script>

package/src/components/PrimitiveControls.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-show="material || isTextureSlides"
+    v-show="hasValidPrimitive"
     class="primitive-controls"
     :class="{ open: drawerOpen, close: !drawerOpen }"
   >
@@ -34,6 +34,7 @@
             class="lines-controls"
             ref="linesControls"
             :createData="createData"
+            :usageConfig="usageConfig"
             @primitivesUpdated="$emit('primitivesUpdated', $event)"
           />
         </el-collapse-item>
@@ -85,6 +86,13 @@ export default {
     createData: {
       type: Object,
     },
+    viewingMode: {
+      type: String,
+      default: "Exploration",
+    },
+    usageConfig: {
+      type: Object,
+    }
   },
   data: function() {
     return {
@@ -99,6 +107,14 @@ export default {
       displayString: "100%"
     };
   },
+  computed: {
+    hasValidPrimitive: function () {
+      if (this.viewingMode === 'Exploration' || this.viewingMode === 'Annotation') {
+        return (this.material !== undefined || this.isTextureSlides === true);
+      }
+      return false;
+    }
+  },
   methods: {
     formatTooltip: function(val) {
       this.displayString = Math.floor(100 * val + 0.5) + "%";
@@ -127,7 +143,8 @@ export default {
           this.isPointset = true;
           this.$refs.pointsetControls.setObject(object);
           this.activeName = "pControls";
-        } else if (object.isLines2) {
+        } else if (object.isLines2 || (object.isTubeLines && 
+          this.usageConfig?.showTubeLinesControls)) {
           this.isLines = true;
           this.$refs.linesControls.setObject(object);
           this.activeName = "lControls";

package/src/components/ScaffoldTreeControls.vue

@@ -14,6 +14,7 @@
         @changeActive="changeActiveByNode"
         @changeHover="changeHoverByNode"
         ref="treeControls"
+        @mouseleave="removeHover(true)"
       />
     </div>
     <div
@@ -77,7 +78,7 @@ export default {
       drawerOpen: true,
       nodeNumbers: 0,
       module: undefined,
-      checkedRegions: [],
+      //checkedRegions: [],
     };
   },
   computed: {
@@ -93,18 +94,20 @@ export default {
           // Updated colour when scaffold is ready
           this.setColourField(data);
           // _helper is unchecked by default
-          this.checkedRegions = data.filter(region => region.label !== '_helper');
+          //this.checkedRegions = data.filter(region => region.label !== '_helper');
         }
       },
     },
+    /*
     checkedRegions: {
       deep: true,
       handler: function (data) {
         if (this.isReady) {
-          this.$emit('checked-regions', data)
+          this.$emit('checked-regions', data);
         }
       },
     },
+    */
   },
   methods: {
     addTreeItem: function (parentContainer, item, object) {
@@ -234,10 +237,10 @@ export default {
       if (isRegion) {
         if (isChecked) {
           region.showAllPrimitives();
-          this.checkedRegions.push(node);
+          //this.checkedRegions.push(node);
         } else {
           region.hideAllPrimitives();
-          this.checkedRegions = this.checkedRegions.filter(region => region.label !== node.label);
+          //this.checkedRegions = this.checkedRegions.filter(region => region.label !== node.label);
         }
       }
       if (isPrimitives) {
@@ -366,6 +369,19 @@ export default {
       }
       return "#FFFFFF";
     },
+    getNodeDataByRegionAndGroup: function (regin, group) {
+      for (const treeRegion of this.treeDataEntry) {
+        if (treeRegion.isRegion && treeRegion.label === regin) {
+          const treeGroups = treeRegion.children;
+          for (const treeGroup of treeGroups) {
+            if (treeGroup.isPrimitives && treeGroup.label === group) {
+              return treeGroup;
+            }
+          }
+        }
+      }
+      return undefined;
+    },
     getZincObjectsFromNode: function (node, transverse) {
       const rootRegion = this.module.scene.getRootRegion();
       if (node.isPrimitives) {