@abi-software/scaffoldvuer 0.4.0-vue3.5 → 0.4.0-vue3.7

package/src/components/ScaffoldVuer.vue

@@ -152,7 +152,7 @@
                       :teleported="true"
                       :model-value="currentSpeed"
                       placeholder="Select"
-                      class="select-box"
+                      class="scaffold-select-box speed"
                       popper-class="scaffold_viewer_dropdown"
                       @change="speedChanged($event)"
                     >
@@ -268,7 +268,7 @@
               :teleported="false"
               v-model="viewingMode"
               placeholder="Select"
-              class="select-box viewing-mode"
+              class="scaffold-select-box viewing-mode"
               popper-class="scaffold_viewer_dropdown"
             >
                   <el-option v-for="item in viewingModes" :key="item" :label="item" :value="item">
@@ -509,13 +509,17 @@ export default {
       },
     },
     /**
-     * Flag to determine rather open map UI should be
-     * presented or not.
+     * Flag to determine rather the open map UI icon and popup
+     * should be shown or not.
      */
     enableOpenMapUI: {
       type: Boolean,
       default: false,
     },
+    /**
+     * This array populate the the openMapOptions popup.
+     * Each entry contains a pair of display and key.
+     */
     openMapOptions: {
       type: Array,
       default: function () {
@@ -709,6 +713,8 @@ export default {
     },
     currentTime: {
       handler: function () {
+        //Emit when time in the current scene has changed
+        //@arg Current time in scene
         this.$emit("timeChanged", this.currentTime);
       },
     },
@@ -762,12 +768,17 @@ export default {
       this.currentTime = this.$module.getCurrentTime();
     })
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     if (this.ro) this.ro.disconnect();
     this.$module.destroy();
     this.$module = undefined;
   },
   methods: {
+    /**
+     * @vuese
+     * Call this to manually add a zinc object into the current scene
+     * @arg Zinc object to be added
+     */
     addZincObject: function (zincObject) {
       if (this.$module.scene) {
         this.$module.scene.addZincObject(zincObject);
@@ -776,15 +787,19 @@ export default {
       }
     },
     /**
+     * Internal only.
      * This is called when a new zinc object is read into the scene.
      */
     zincObjectAdded: function (zincObject) {
       this.loading = false;
       this.$_searchIndex.addZincObject(zincObject, zincObject.uuid);
+      //Emit when a new object is added to the scene
+      //@arg The object added to the sceene
       this.$emit("zinc-object-added", zincObject);
     },
     /**
-     * 
+     * Internal only.
+     * Add regions to search index.
      */
     addRegionsToSearchIndex: function () {
       const rootRegion = this.$module.scene.getRootRegion();
@@ -794,6 +809,7 @@ export default {
       });
     },
     /**
+     * Internal only.
      * This is called when Change backgspeedround colour button
      * is pressed an causes the backgrouColornd colour to be changed
      * to one of the three preset colour: white, black and
@@ -806,6 +822,7 @@ export default {
         .setClearColor(this.currentBackground, 1);
     },
     /**
+     * Internal only.
      * This is called by captueeScreenshot and after the last render
      * loop, it download a screenshot of the current scene with no UI.
      */
@@ -826,11 +843,10 @@ export default {
       hrefElement.remove();
     },
     /**
+     * @vuese
      * Function for capturing a screenshot of the current rendering.
      *
-     * @param {String} filename filename given to the screenshot.
-     *
-     * @public
+     * @arg filename given to the screenshot.
      */
     captureScreenshot: function (filename) {
       this.captureFilename = filename;
@@ -839,9 +855,8 @@ export default {
       );
     },
     /**
+     * @vuese
      * Function to clear current scene, the tree controls and the search index.
-     *
-     * @public
      */
     clearScene: function () {
       if (this.$refs.treeControls) this.$refs.treeControls.clear();
@@ -859,10 +874,9 @@ export default {
       return val ? val.toFixed(2) + " ms" : "0 ms";
     },
     /**
+     * @vuese
      * Function to reset the view to default.
      * Also called when the associated button is pressed.
-     *
-     * @public
      */
     fitWindow: function () {
       if (this.$module.scene) {
@@ -870,10 +884,9 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to zoom in.
      * Also called when the associated button is pressed.
-     *
-     * @public
      */
     zoomIn: function () {
       if (this.$module.scene) {
@@ -884,7 +897,7 @@ export default {
      * Function to zoom out.
      * Also called when the associated button is pressed.
      *
-     * @public
+     * @vuese
      */
     zoomOut: function () {
       if (this.$module.scene) {
@@ -894,7 +907,7 @@ export default {
     /**
      * Function to change the current play speed.
      *
-     * @public
+     * @vuese
      */
     speedChanged: function (speed) {
       this.currentSpeed = speed;
@@ -903,13 +916,19 @@ export default {
     /**
      * Function used to stop the free spin
      *
-     * @public
+     * @vuese
      */
     stopFreeSpin: function () {
       let cameracontrol = this.$module.scene.getZincCameraControls();
       cameracontrol.stopAutoTumble();
       this.isTransitioning = false;
     },
+    /**
+     * Return a list of obejcts with the provided name.
+     * @arg Group name to search.
+     *
+     * @vuese
+     */
     findObjectsWithGroupName: function (name) {
       let objects = [];
       if (name && name != "" && this.$module.scene) {
@@ -918,7 +937,10 @@ export default {
       return objects;
     },
     /**
-     * Focus on named region
+     * Find and and zoom into objects with the provided list of names.
+     * @arg List of names
+     * 
+     * @vuese
      */
     viewRegion: function (names) {
       const rootRegion = this.$module.scene.getRootRegion();
@@ -962,6 +984,11 @@ export default {
         }
       }
     },
+    /**
+     * Return renderer information
+     * 
+     * @vuese
+     */
     getRendererInfo: function () {
       if (this.$module.zincRenderer) {
         return this.$module.zincRenderer.getThreeJSRenderer().info;
@@ -972,7 +999,7 @@ export default {
      * Function used to rotate the scene.
      * Also called when the associated button is pressed.
      *
-     * @public
+     * @vuese
      */
     freeSpin: function () {
       if (this.$module.scene) {
@@ -1023,6 +1050,8 @@ export default {
           //Make sure the tooltip is displayed with annotation mode
           this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
         }
+        //Emit when an object is selected
+        //@arg Identifier of selected objects
         this.$emit("scaffold-selected", event.identifiers);
       } else if (event.eventType == 2) {
         if (this.selectedObjects.length === 0) {
@@ -1051,7 +1080,8 @@ export default {
               this.tData.y = event.identifiers[0].coords.y;
             }
           }
-          // Triggers when an object has been highlighted
+          //Emit when an object is highlighted
+          //@arg Identifier of selected objects
           this.$emit("scaffold-highlighted", event.identifiers);
         }
       } else if (event.eventType == 3) {
@@ -1069,7 +1099,7 @@ export default {
     /**
      * Get the coordinates of the current selected region.
      *
-     * @public
+     * @vuese
      */
     getCoordinatesOfSelected: function () {
       if (this.selectedObjects && this.selectedObjects.length > 0) {
@@ -1082,7 +1112,7 @@ export default {
      * current selected region which will be updated after each render
      * loop.
      *
-     * @public
+     * @vuese
      */
     getDynamicSelectedCoordinates: function () {
       return this.$module.selectedScreenCoordinates;
@@ -1094,13 +1124,14 @@ export default {
       let normalizedTime = (event / this.timeMax) * 100;
       if (normalizedTime != this.currentTime) {
         this.$module.updateTime(normalizedTime);
-        console.log(this.currentTime)
       }
     },
     /**
      * A callback used by children components. Set the selected zinc object
      *
-     * @param {object} object Zinc object
+     * @arg Selected zinc objects
+     * @arg Flag to determine if callback should be triggered when new selection
+     * is made 
      */
     objectSelected: function (objects, propagate) {
       this.selectedObjects = objects;
@@ -1112,7 +1143,9 @@ export default {
     /**
      * A callback used by children components. Set the highlighted zinc object
      *
-     * @param {object} object Zinc object
+     * @arg Hovered zinc objects
+     * @arg Flag to determine if callback should be triggered when new selection
+     * is made 
      */
     objectHovered: function (objects, propagate) {
       this.hoveredObjects = objects;
@@ -1149,9 +1182,10 @@ export default {
       }
     },
     /**
+     * @vuese
      * Start the animation.
      *
-     * @param {object} object Zinc object
+     * @arg flag to turn the animation on/off
      */
     play: function (flag) {
       this.$module.playAnimation(flag);
@@ -1160,6 +1194,7 @@ export default {
       //this.hideRegionTooltip();
     },
     /**
+     * @vuese
      * Function to toggle on/off overlay help.
      */
     setHelpMode: function (helpMode) {
@@ -1329,6 +1364,10 @@ export default {
       this.hideRegionTooltip();
       return false;
     },
+    /**
+     * @vuese
+     * Hide the tooltip
+     */
     hideRegionTooltip: function () {
       if (this.$_liveCoordinatesUpdated) {
         this.$module.zincRenderer.removePostRenderCallbackFunction(
@@ -1354,6 +1393,7 @@ export default {
       }
     },
     /**
+     * @vuese
      * Set the marker modes for objects specified by the list of annotations
      */
     setMarkerModeWithAnnotations: function (annotations, mode) {
@@ -1384,6 +1424,13 @@ export default {
         clearTimeout(this.helpTextWait);
       }
     },
+    /**
+     * @vuese
+     * 
+     * Search a object and display the tooltip
+     * @arg text to search across
+     * @arg toggle the tooltip if this is set
+     */
     search: function (text, displayLabel) {
       if (this.$_searchIndex) {
         if (text === undefined || text === "" ||
@@ -1418,7 +1465,10 @@ export default {
       return false;
     },
     /**
-     * Get the list of suggested terms
+     * @vuese
+     * 
+     * Get the list of suggested terms based on the provided term.
+     * This can be used for autocomplete.
      */
     fetchSuggestions: function (term) {
       if (this.$_searchIndex === undefined) return [];
@@ -1472,6 +1522,7 @@ export default {
         this.$module.updateTime(0);
         this.$module.unsetFinishDownloadCallback();
         this.addRegionsToSearchIndex();
+        //Emit when all objects have been loaded
         this.$emit("on-ready");
         this.setMarkers();
         this.isReady = true;
@@ -1481,7 +1532,7 @@ export default {
      * Function used for getting the current states of the scene. This exported states
      * can be imported using the importStates method.
      *
-     * @public
+     * @vuese
      */
     getState: function () {
       let state = {
@@ -1502,7 +1553,7 @@ export default {
      * Function used for importing the states of the scene. This exported states
      * can be imported using the read states method.
      *
-     * @public
+     * @vuese
      */
     setState: function (state) {
       if (state) {
@@ -1533,6 +1584,12 @@ export default {
         }
       }
     },
+    /**
+     * export current scene in GLTF.
+     * @arg Return in binary form when set to true
+     * 
+     * @vuese
+     */
     exportGLTF: function (binary) {
       return this.$module.scene.exportGLTF(binary);
     },
@@ -1541,7 +1598,7 @@ export default {
      * viewport. This function will ignore the state prop and
      * read in the new url.
      *
-     * @public
+     * @vuese
      */
     setURLAndState: function (newValue, state) {
       if (newValue != this._currentURL) {
@@ -1587,7 +1644,7 @@ export default {
      * Function used for reading in new scaffold metadata. This function will ignore
      * the state prop and read in the new url.
      *
-     * @public
+     * @vuese
      */
     setURL: function (newValue) {
       this.setURLAndState(newValue, undefined);
@@ -1620,6 +1677,11 @@ export default {
         }
       }
     },
+    /**
+     * @vuese
+     * 
+     * Force the renderer to resize
+     */
     forceResize: function () {
       if (this.$module.zincRenderer) {
         this.$module.zincRenderer.onWindowResize();
@@ -1630,6 +1692,9 @@ export default {
       if (this.tData.visible) {
         this.showRegionTooltip(this.tData.label, true, true);
       }
+      //Emit when the scene has been transformed due to navigation,
+      //only triggered during syncControl mode
+      //@arg Information on the navigation
       this.$emit("scaffold-navigated", payload);
     },
     /**
@@ -2011,41 +2076,25 @@ export default {
     left: 53px !important;
   }
 }
-
-.select-box {
+.scaffold-select-box {
   border-radius: 4px;
   border: 1px solid rgb(144, 147, 153);
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
-  width:60px;
-  :deep(.el-select__wrapper) {
-    padding: 0px;
-    min-height: 26px;
-    color: rgb(48, 49, 51);
-  }
   &.viewing-mode {
-    :deep(.el-select__wrapper) {
-      line-height:30px
-    }
+    width: 150px!important;
   }
 
-  :deep()
-    .el-select__selected-item {
-    color: $app-primary-color;
-    height: 22px;
-    border: none;
-    font-family: "Asap", sans-serif;
-    line-height: 22px;
-    &is-focus, &:focus {
-      border: 1px solid $app-primary-color;
+  &.speed {
+    margin-left: 8px;
+    width:50px!important;
+    height: 24px;
+    :deep(.el-select__wrapper) {
+      padding: 0;
+      min-height: 24px
     }
   }
-
-  :deep(.el-input),
-  :deep(.el-input__icon) {
-    line-height: 22px;
-  }
 }
 
 :deep(.scaffold_viewer_dropdown) {
@@ -2064,7 +2113,6 @@ export default {
 </style>
 
 <style lang="scss">
-
 .scaffold-container {
   --el-color-primary: #8300BF;
   --el-color-primary-light-7: #dab3ec;

package/src/components/TextureSlidesControls.vue

@@ -3,12 +3,12 @@
     <el-header height="30px" class="header">
       <div>Texture Slides Settings</div>
     </el-header>
-    <el-main class="block">
-      <el-row v-for="(slide, index) in settings" :key="slide.id">
-        <el-col :offset="0" :span="2">
+    <el-main class="slides-block">
+      <el-row v-for="(slide, index) in settings" :key="slide.id" class="slide-row">
+        <el-col :offset="0" :span="6">
           <el-select
             :teleported="false"
-            :value="slide.direction"
+            :model-value="slide.direction"
             placeholder="Select"
             class="input-box"
             popper-class="viewer_dropdown"
@@ -22,7 +22,7 @@
             />
           </el-select>
         </el-col>
-        <el-col :offset="0" :span="14">
+        <el-col :offset="0" :span="10">
           <el-slider
             v-model="slide.value"
             class="my-slider"
@@ -33,7 +33,7 @@
             @input="modifySlide(slide)"
           />
         </el-col>
-        <el-col :offset="0" :span="3">
+        <el-col :offset="0" :span="6">
           <el-input-number
             v-model="slide.value"
             :step="0.01"
@@ -43,20 +43,22 @@
             class="input-box number-input"
           />
         </el-col>
-        <el-col :offset="2" :span="2">
-          <i
-            class="el-icon-close close-icon"
+        <el-col :offset="0" :span="2">
+          <el-icon
+            class="delete-icon"
             @click="removeSlide(index, slide)"
-          />
+          >
+            <el-icon-delete />
+          </el-icon>
         </el-col>
       </el-row>
     </el-main>
     <el-footer height="30px" class="add-slides-text" @click="addNewSlide">
       <el-row>
         <el-col :span="2">
-          <i class="el-icon-plus" />
+          <el-icon><el-icon-plus /></el-icon>
         </el-col>
-        <el-col :span="10"> Add a new slide </el-col>
+        <el-col :span="20"> Add a new slide </el-col>
       </el-row>
     </el-footer>
   </el-container>
@@ -64,6 +66,10 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import {
+  Delete as ElIconDelete,
+  Plus as ElIconPlus,
+} from '@element-plus/icons-vue'
 import {
   ElCol as Col,
   ElContainer as Container,
@@ -91,6 +97,8 @@ export default {
     Main,
     Row,
     Slider,
+    ElIconDelete,
+    ElIconPlus,
   },
   data: function () {
     return {
@@ -111,13 +119,6 @@ export default {
       ],
     };
   },
-  watch: {
-    settings: function () {
-      if (this.material && this._zincObject) {
-        this._zincObject.setAlpha(this.material.opacity);
-      }
-    },
-  },
   mounted: function () {
     this._zincObject = undefined;
   },
@@ -143,6 +144,7 @@ export default {
       }
     },
     modifySlide: function (slide) {
+      console.log(slide.value)
       if (slide) {
         this._zincObject.modifySlideSettings(slide);
       }
@@ -173,13 +175,11 @@ export default {
   font-size: 12px;
   cursor: pointer;
   pointer-events: auto;
+  direction:ltr;
 }
 
-.display {
-  width: 44px;
-}
-
-.block {
+.slides-block {
+  direction:rtl;
   pointer-events: auto;
   &.el-main {
     padding: 5px;
@@ -194,15 +194,17 @@ export default {
   }
 }
 
+#scroll div{
+    direction:ltr;
+}
+
 .my-slider {
-  width: 109px;
   top: -6px;
-  left: 50px;
   position: relative;
 }
 
 .t-slides-container {
-  width: 300px;
+  width: 250px;
   height: 250px;
   border-radius: 4px;
   border: solid 1px #d8dce6;
@@ -210,54 +212,54 @@ export default {
   overflow-y: none;
 }
 
-:deep(.el-slider__bar) {
-  background-color: $app-primary-color;
-}
-
 .input-box {
-  width: 42px;
+  width: 38px;
   border-radius: 4px;
   border: 1px solid rgb(144, 147, 153);
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
   margin-left: 8px;
+  height: 24px;
 
   &.number-input {
     width: 42px;
-    :deep(.el-input__inner) {
+    :deep(.el-input__wrapper) {
       padding-left: 0px;
       padding-right: 0px;
     }
   }
 
-  :deep(.el-input__inner) {
+  :deep(.el-select__wrapper) {
+    height: 24px;
+    padding: 0;
+    min-height: unset;
+  }
+
+  :deep(.el-select__selection) {
     color: $app-primary-color;
     height: 22px;
-    padding-left: 8px;
+    padding-left: 4px;
     padding-right: 8px;
     border: none;
     font-family: "Asap", sans-serif;
     line-height: 22px;
   }
 
-  :deep(.el-input),
-  :deep(.el-input__icon) {
+  :deep(.el-select__suffix),
+  :deep(.el-icon) {
     line-height: 22px;
   }
-
-  .viewer_dropdown .el-select-dropdown__item {
-    white-space: nowrap;
-    color: $app-primary-color;
-    text-align: left;
-    font-family: "Asap", sans-serif;
-  }
 }
 
-.close-icon {
+.delete-icon {
   color: $app-primary-color;
   top: 2px;
   position: relative;
   cursor: pointer;
 }
+
+.slide-row {
+  direction:ltr;
+}
 </style>

package/src/components/TreeControls.vue

@@ -132,7 +132,7 @@ export default {
       },
     },
   },
-  destroyed: function () {
+  unmounted: function () {
     this.sortedPrimitiveGroups = undefined;
   },
   methods: {

package/src/components.d.ts

@@ -16,6 +16,8 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
+    ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
+    ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
     ElIconWarningFilled: typeof import('@element-plus/icons-vue')['WarningFilled']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']