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

package/src/components/LinesControls.vue

@@ -3,9 +3,7 @@
     <el-main class="slides-block">
       <template v-if="isTubeLines && showTubeLinesControls">
         <el-row>
-          <el-col :offset="0" :span="6">
-            Radius:
-          </el-col>
+          <el-col :offset="0" :span="6">Radius:</el-col>
           <el-col :offset="0" :span="12">
             <el-slider
               v-model="radius"
@@ -30,9 +28,7 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-col :offset="0" :span="6">
-            Radial Segments:
-          </el-col>
+          <el-col :offset="0" :span="6">Radial Segments:</el-col>
           <el-col :offset="0" :span="12">
             <el-slider
               v-model="radialSegments"
@@ -59,9 +55,7 @@
       </template>
       <template v-else-if="!isTubeLines">
         <el-row>
-          <el-col :offset="0" :span="6">
-            Width:
-          </el-col>
+          <el-col :offset="0" :span="6">Width:</el-col>
           <el-col :offset="0" :span="12">
             <el-slider
               v-model="width"
@@ -89,27 +83,19 @@
         <el-row>
           <el-col :offset="0" :span="4">
             <el-button
-              size='small'
+              size="small"
               :disabled="currentIndex === 0"
               :icon="ElIconArrowLeft"
               @click="changeIndex(false)"
             />
           </el-col>
-          <el-col :offset="4" :span="9">
-            Editing Line {{ currentIndex + 1}}
-          </el-col>
+          <el-col :offset="4" :span="9">Editing Line {{ currentIndex + 1 }}</el-col>
           <el-col :offset="2" :span="2">
-            <el-button
-              size='small'
-              :icon="ElIconArrowRight"
-              @click="changeIndex(true)"
-            />
+            <el-button size="small" :icon="ElIconArrowRight" @click="changeIndex(true)" />
           </el-col>
         </el-row>
         <el-row>
-          <el-col :offset="0" :span="6">
-            Move:
-          </el-col>
+          <el-col :offset="0" :span="6">Move:</el-col>
           <el-col :offset="0" :span="16">
             <el-slider
               v-model="adjust"
@@ -123,9 +109,7 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-col :offset="0" :span="6">
-            Length:
-          </el-col>
+          <el-col :offset="0" :span="6">Length:</el-col>
           <el-col :offset="0" :span="10">
             <el-slider
               v-model="lengthScale"
@@ -152,24 +136,11 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
 // This is not in use at this moment, due to
 // limited support to line width
 import { markRaw, shallowRef } from 'vue';
+import { getLineDistance, moveAndExtendLine, NERVE_CONFIG } from '../scripts/Utilities.js';
 import {
-  getLineDistance,
-  moveAndExtendLine,
-  NERVE_CONFIG
-} from "../scripts/Utilities.js";
-import {
-  ElButton as Button,
-  ElCol as Col,
-  ElContainer as Container,
-  ElInputNumber as InputNumber,
-  ElMain as Main,
-  ElSlider as Slider,
-} from "element-plus";
-import{
   ArrowLeft as ElIconArrowLeft,
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
@@ -178,17 +149,7 @@ import{
  * A component to control the opacity of the target object.
  */
 export default {
-  name: "LinesControls",
-  components: {
-    Button,
-    Col,
-    Container,
-    InputNumber,
-    Main,
-    Slider,
-    ElIconArrowLeft,
-    ElIconArrowRight,
-  },
+  name: 'LinesControls',
   props: {
     createData: {
       type: Object,
@@ -203,7 +164,7 @@ export default {
       pAdjust: 0,
       lengthScale: 0,
       distance: 0,
-      newDistance: 0, 
+      newDistance: 0,
       width: 1,
       radius: NERVE_CONFIG.DEFAULT_RADIUS,
       radialSegments: NERVE_CONFIG.DEFAULT_RADIAL_SEGMENTS,
@@ -221,7 +182,7 @@ export default {
     },
   },
   watch: {
-    "createData.faceIndex": {
+    'createData.faceIndex': {
       handler: function (value) {
         if (this.zincObject?.isLines2) {
           this.currentIndex = value;
@@ -232,7 +193,7 @@ export default {
     },
   },
   methods: {
-    changeIndex: function(increment) {
+    changeIndex: function (increment) {
       if (increment) {
         const dist = getLineDistance(this.zincObject, this.currentIndex + 1);
         if (dist > 0) {
@@ -244,34 +205,36 @@ export default {
         this.reset();
       }
     },
-    onLengthInput: function() {
+    onLengthInput: function () {
       if (this.newDistance !== 0) {
         this.distance = this.newDistance;
-        this.edited = moveAndExtendLine(
-          this.zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+        this.edited =
+          moveAndExtendLine(this.zincObject, this.currentIndex, this.newDistance, true) ||
+          this.edited;
       } else {
         this.newDistance = this.distance;
       }
     },
-    onLengthSliding: function() {
+    onLengthSliding: function () {
       this.newDistance = Math.pow(10, this.lengthScale) * this.distance;
-      this.edited = moveAndExtendLine(
-        this.zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+      this.edited =
+        moveAndExtendLine(this.zincObject, this.currentIndex, this.newDistance, true) ||
+        this.edited;
     },
-    onMoveSliding: function() {
+    onMoveSliding: function () {
       const diff = (this.adjust - this.pAdjust) * this.distance;
-      this.edited =  moveAndExtendLine(
-        this.zincObject, this.currentIndex, diff, false) || this.edited;
+      this.edited =
+        moveAndExtendLine(this.zincObject, this.currentIndex, diff, false) || this.edited;
       this.pAdjust = this.adjust;
     },
-    reset: function() {
+    reset: function () {
       this.adjust = 0;
       this.pAdjust = 0;
       this.lengthScale = 0;
       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;
       }
     },
@@ -306,7 +269,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 .slides-block {
   pointer-events: auto;
   &.el-main {
@@ -362,7 +324,7 @@ export default {
     padding-left: 4px;
     padding-right: 8px;
     border: none;
-    font-family: "Asap", sans-serif;
+    font-family: 'Asap', sans-serif;
     line-height: 22px;
   }
 
@@ -371,5 +333,4 @@ export default {
     line-height: 22px;
   }
 }
-
 </style>

package/src/components/OpacityControls.vue

@@ -3,7 +3,8 @@
     <div class="block">
       <span class="display">{{ displayString }}</span>
       <el-slider
-        v-model="material.opacity"
+        :model-value="material.opacity"
+        @update:model-value="updateOpacity"
         class="my-slider"
         :step="0.01"
         :min="0"
@@ -16,44 +17,41 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import {
-  ElContainer as Container,
-  ElHeader as Header,
-  ElMain as Main,
-  ElSlider as Slider
-} from "element-plus";
-
 /**
  * A component to control the opacity of the target object.
  */
 export default {
-  name: "OpacityControls",
-  components: {
-    Container,
-    Header,
-    Main,
-    Slider,
-  },
+  name: 'OpacityControls',
   props: {
     material: undefined,
     zincObject: undefined,
   },
-  data: function() {
+  data: function () {
     return {
-      displayString: "100%",
+      displayString: '100%',
     };
   },
   watch: {
-    "material.opacity": function() {
-      if (this.material && this.zincObject) {
-        this.zincObject.setAlpha(this.material.opacity);
-      }
-    }
+    'material.opacity': {
+      immediate: true,
+      handler: function () {
+        if (!this.material) {
+          return;
+        }
+        this.displayString = this.formatTooltip(this.material.opacity);
+        if (this.zincObject) {
+          this.zincObject.setAlpha(this.material.opacity);
+        }
+      },
+    },
   },
   methods: {
+    updateOpacity(val) {
+      this.displayString = this.formatTooltip(val);
+      this.$emit('update:opacity', val);
+    },
     formatTooltip(val) {
-      this.displayString = Math.floor(100 * val + 0.5) + "%";
+      this.displayString = Math.floor(100 * val + 0.5) + '%';
       return this.displayString;
     },
   },
@@ -62,7 +60,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 .display {
   width: 44px;
 }
@@ -94,5 +91,4 @@ export default {
 :deep(.el-slider__bar) {
   background-color: $app-primary-color;
 }
-
 </style>

package/src/components/PointsControls.vue

@@ -2,9 +2,7 @@
   <el-container class="pointset-container">
     <el-main class="slides-block">
       <el-row>
-        <el-col :offset="0" :span="6">
-          Size:
-        </el-col>
+        <el-col :offset="0" :span="6">Size:</el-col>
         <el-col :offset="0" :span="10">
           <el-slider
             v-model="size"
@@ -28,9 +26,7 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :offset="0" :span="16">
-          Size attenuation:
-        </el-col>
+        <el-col :offset="0" :span="16">Size attenuation:</el-col>
         <el-col :offset="0" :span="5">
           <el-select
             :teleported="false"
@@ -53,27 +49,19 @@
         <el-row>
           <el-col :offset="0" :span="4">
             <el-button
-              size='small'
+              size="small"
               :disabled="currentIndex === 0"
               :icon="ElIconArrowLeft"
               @click="changeIndex(false)"
             />
           </el-col>
-          <el-col :offset="4" :span="9">
-            Editing Point {{ currentIndex + 1}}
-          </el-col>
+          <el-col :offset="4" :span="9">Editing Point {{ currentIndex + 1 }}</el-col>
           <el-col :offset="2" :span="2">
-            <el-button
-              size='small'
-              :icon="ElIconArrowRight"
-              @click="changeIndex(true)"
-            />
+            <el-button size="small" :icon="ElIconArrowRight" @click="changeIndex(true)" />
           </el-col>
         </el-row>
         <el-row>
-          <el-col :offset="0" :span="6">
-            x:
-          </el-col>
+          <el-col :offset="0" :span="6">x:</el-col>
           <el-col :offset="0" :span="16">
             <el-slider
               v-model="translation[0]"
@@ -87,9 +75,7 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-col :offset="0" :span="6">
-            y:
-          </el-col>
+          <el-col :offset="0" :span="6">y:</el-col>
           <el-col :offset="0" :span="16">
             <el-slider
               v-model="translation[1]"
@@ -103,9 +89,7 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-col :offset="0" :span="6">
-            z:
-          </el-col>
+          <el-col :offset="0" :span="6">z:</el-col>
           <el-col :offset="0" :span="16">
             <el-slider
               v-model="translation[2]"
@@ -124,22 +108,9 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
 import { markRaw, shallowRef } from 'vue';
+import { movePoint } from '../scripts/Utilities.js';
 import {
-  movePoint,
-} from "../scripts/Utilities.js";
-import {
-  ElCol as Col,
-  ElContainer as Container,
-  ElInputNumber as InputNumber,
-  ElMain as Main,
-  ElRow as Row,
-  ElSelect as Select,
-  ElSlider as Slider,
-  ElOption as Option,
-} from "element-plus";
-import{
   ArrowLeft as ElIconArrowLeft,
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
@@ -148,19 +119,7 @@ import{
  * A component to control the opacity of the target object.
  */
 export default {
-  name: "PointsControls",
-  components: {
-    Col,
-    Container,
-    InputNumber,
-    Main,
-    Select,
-    Slider,
-    Row,
-    Option,
-    ElIconArrowLeft,
-    ElIconArrowRight,
-  },
+  name: 'PointsControls',
   inject: ['boundingDims'],
   data: function () {
     return {
@@ -169,11 +128,11 @@ export default {
       choices: [
         {
           value: true,
-          label: "On",
+          label: 'On',
         },
         {
           value: false,
-          label: "off",
+          label: 'off',
         },
       ],
       min: [0, 0, 0],
@@ -191,23 +150,15 @@ export default {
     boundingDims: {
       handler: function (value) {
         const size = value.size;
-        this.min = [
-          -size[0] / 2,
-          -size[1] / 2,
-          -size[2] / 2,
-        ];
-        this.max = [
-          size[0] / 2,
-          size[1] / 2,
-          size[2] / 2,
-        ];
+        this.min = [-size[0] / 2, -size[1] / 2, -size[2] / 2];
+        this.max = [size[0] / 2, size[1] / 2, size[2] / 2];
       },
       immediate: true,
       deep: true,
     },
   },
   methods: {
-    changeIndex: function(increment) {
+    changeIndex: function (increment) {
       if (increment) {
         if (this.zincObject.drawRange > this.currentIndex + 1) {
           this.currentIndex++;
@@ -218,7 +169,7 @@ export default {
         this.reset();
       }
     },
-    onMoveSliding: function() {
+    onMoveSliding: function () {
       const diff = [
         this.translation[0] - this.pTranslation[0],
         this.translation[1] - this.pTranslation[1],
@@ -229,11 +180,11 @@ export default {
         this.pTranslation[i] = this.translation[i];
       }
     },
-    reset: function() {
+    reset: function () {
       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;
       }
     },
@@ -254,7 +205,7 @@ export default {
         this.attenuation = false;
       }
     },
-    modifyAttenuation: function(flag) {
+    modifyAttenuation: function (flag) {
       this.attenuation = flag;
       this.zincObject.setSizeAttenuation(flag);
     },
@@ -267,7 +218,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 .slides-block {
   pointer-events: auto;
   &.el-main {
@@ -324,7 +274,7 @@ export default {
     padding-left: 4px;
     padding-right: 8px;
     border: none;
-    font-family: "Asap", sans-serif;
+    font-family: 'Asap', sans-serif;
     line-height: 22px;
   }
 
@@ -333,5 +283,4 @@ export default {
     line-height: 22px;
   }
 }
-
 </style>

package/src/components/PrimitiveControls.vue

@@ -1,21 +1,19 @@
 <template>
   <div v-show="hasValidPrimitive" class="my-drawer">
     <el-collapse class="collapse" v-model="activeName" accordion>
-      <el-collapse-item title="Opacity" name="oControls" v-show="!isTextureSlides" >
+      <el-collapse-item title="Opacity" name="oControls" v-show="!isTextureSlides">
         <opacity-controls
           :material="material"
           :zincObject="zincObject"
-          ref="opacityControls" />
+          ref="opacityControls"
+          @update:opacity="material.opacity = $event"
+        />
       </el-collapse-item>
       <el-collapse-item v-show="!isEditable" title="Transformation" name="trControls">
-        <transformation-controls
-          class="transformation-controls"
-          ref="transformationControls" />
+        <transformation-controls class="transformation-controls" ref="transformationControls" />
       </el-collapse-item>
       <el-collapse-item v-show="isTextureSlides" title="Texture Slides" name="tsControls">
-        <texture-slides-controls
-          class="texture-controls"
-          ref="tSlidesControls" />
+        <texture-slides-controls class="texture-controls" ref="tSlidesControls" />
       </el-collapse-item>
       <el-collapse-item v-show="isPointset" title="Points" name="pControls">
         <points-controls
@@ -45,38 +43,27 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
 import { markRaw } from 'vue';
-import {
-  ArrowRight as ElIconArrowRight,
-} from '@element-plus/icons-vue';
-import {
-  ElCollapse as Collapse,
-  ElCollapseItem as CollapseItem,
-} from "element-plus";
 
-import OpacityControls from "./OpacityControls.vue";
-import PointsControls from "./PointsControls.vue";
-import LinesControls from "./LinesControls.vue";
-import GlyphsControls from "./GlyphsControls.vue";
-import TextureSlidesControls from "./TextureSlidesControls.vue";
-import TransformationControls from "./TransformationControls.vue";
+import OpacityControls from './OpacityControls.vue';
+import PointsControls from './PointsControls.vue';
+import LinesControls from './LinesControls.vue';
+import GlyphsControls from './GlyphsControls.vue';
+import TextureSlidesControls from './TextureSlidesControls.vue';
+import TransformationControls from './TransformationControls.vue';
 
 /**
  * A component to control the opacity of the target object.
  */
 export default {
-  name: "PrimitiveControls",
+  name: 'PrimitiveControls',
   components: {
-    Collapse,
-    CollapseItem,
     GlyphsControls,
     LinesControls,
     OpacityControls,
     PointsControls,
     TextureSlidesControls,
     TransformationControls,
-    ElIconArrowRight,
   },
   props: {
     createData: {
@@ -84,15 +71,15 @@ export default {
     },
     viewingMode: {
       type: String,
-      default: "Exploration",
+      default: 'Exploration',
     },
     usageConfig: {
       type: Object,
-    }
+    },
   },
-  data: function() {
+  data: function () {
     return {
-      activeName: "oControls",
+      activeName: 'oControls',
       material: undefined,
       isTextureSlides: false,
       isPointset: false,
@@ -100,23 +87,23 @@ export default {
       isGlyph: false,
       zincObject: undefined,
       isEditable: false,
-      displayString: "100%"
+      displayString: '100%',
     };
   },
   computed: {
     hasValidPrimitive: function () {
       if (this.viewingMode === 'Exploration' || this.viewingMode === 'Annotation') {
-        return (this.material !== undefined || this.isTextureSlides === true);
+        return this.material !== undefined || this.isTextureSlides === true;
       }
       return false;
-    }
+    },
   },
   methods: {
-    formatTooltip: function(val) {
-      this.displayString = Math.floor(100 * val + 0.5) + "%";
+    formatTooltip: function (val) {
+      this.displayString = Math.floor(100 * val + 0.5) + '%';
       return this.displayString;
     },
-    setObject: function(object) {
+    setObject: function (object) {
       if (object) {
         this.zincObject = markRaw(object);
       } else {
@@ -126,27 +113,28 @@ export default {
       this.isPointset = false;
       this.isTextureSlides = false;
       this.isLines = false;
-      this.isGlyph = false,
-      this.activeName  = "trControls";
+      ((this.isGlyph = false), (this.activeName = 'trControls'));
       if (object) {
         if (object.isTextureSlides) {
           this.isTextureSlides = true;
           this.$refs.tSlidesControls.setObject(object);
-          this.activeName = "tsControls";
+          this.activeName = 'tsControls';
         } else if (object.isPointset) {
           this.isPointset = true;
           this.$refs.pointsetControls.setObject(object);
-          this.activeName = "pControls";
-        } else if (object.isLines2 || (object.isTubeLines &&
-          this.usageConfig?.showTubeLinesControls)) {
+          this.activeName = 'pControls';
+        } else if (
+          object.isLines2 ||
+          (object.isTubeLines && this.usageConfig?.showTubeLinesControls)
+        ) {
           this.isLines = true;
           this.$refs.linesControls.setObject(object);
-          this.activeName = "lControls";
+          this.activeName = 'lControls';
         } else if (object.isGlyphset) {
           if (object.canShowLabel()) {
             this.isGlyph = true;
             this.$refs.glyphControls.setObject(object);
-            this.activeName = "gControls";
+            this.activeName = 'gControls';
           }
         }
         this.$refs.transformationControls.setObject(object);
@@ -156,8 +144,8 @@ export default {
       } else {
         this.material = undefined;
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -170,13 +158,11 @@ export default {
   }
 
   :deep(.el-collapse-item__header) {
-    height:36px;
+    height: 36px;
   }
 
   :deep(.el-collapse-item__content) {
     padding-bottom: 0px;
   }
 }
-
-
 </style>