@abi-software/scaffoldvuer 1.0.0 → 1.1.0-beta.0

package/src/components/TextureSlidesControls.vue

@@ -1,8 +1,5 @@
 <template>
-  <el-container v-show="settings.length > 0" class="t-slides-container">
-    <el-header height="30px" class="header">
-      <div>Texture Slides Settings</div>
-    </el-header>
+  <el-container class="t-slides-container">
     <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">
@@ -74,12 +71,13 @@ import {
   ElCol as Col,
   ElContainer as Container,
   ElFooter as Footer,
-  ElHeader as Header,
   ElIcon as Icon,
   ElInputNumber as InputNumber,
   ElMain as Main,
   ElRow as Row,
+  ElSelect as Select,
   ElSlider as Slider,
+  ElOption as Option,
 } from "element-plus";
 
 /**
@@ -91,12 +89,13 @@ export default {
     Col,
     Container,
     Footer,
-    Header,
     Icon,
     InputNumber,
     Main,
     Row,
+    Select,
     Slider,
+    Option,
     ElIconDelete,
     ElIconPlus,
   },
@@ -144,7 +143,6 @@ export default {
       }
     },
     modifySlide: function (slide) {
-      console.log(slide.value)
       if (slide) {
         this._zincObject.modifySlideSettings(slide);
       }
@@ -159,13 +157,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.header {
-  color: #606266;
-  line-height: 1;
-  padding: 8px 17px 1px 15px;
-  border-bottom: 1px solid #ebeef5;
-  font-size: 14px;
-}
 
 .add-slides-text {
   color: $app-primary-color;
@@ -205,11 +196,8 @@ export default {
 
 .t-slides-container {
   width: 250px;
-  height: 250px;
-  border-radius: 4px;
-  border: solid 1px #d8dce6;
-  background-color: #fff;
-  overflow-y: none;
+  height: 150px;
+  overflow-y: auto;
 }
 
 .input-box {

package/src/components/TransformationControls.vue

@@ -0,0 +1,194 @@
+<template>
+  <el-container class="transformation-container">
+    <el-main class="slides-block">
+      <el-row>
+        <el-col :offset="0" :span="8">
+          Position:
+        </el-col>
+      </el-row>
+      <el-row class="">
+        <el-col :offset="3" :span="1">
+          x:
+        </el-col>
+        <el-col :span="3">
+          <el-input-number
+            v-model="x"
+            :step="1"
+            :controls="false"
+            class="input-box number-input"
+            @change="modifyPosition"
+          />
+        </el-col>
+        <el-col :offset="3" :span="1">
+          y:
+        </el-col>
+        <el-col :span="3">
+          <el-input-number
+            v-model="y"
+            :step="1"
+            :controls="false"
+            class="input-box number-input"
+            @change="modifyPosition"
+          />
+        </el-col>
+        <el-col :offset="3" :span="1">
+          z:
+        </el-col>
+        <el-col :span="3">
+          <el-input-number
+            v-model="z"
+            :step="1"
+            :controls="false"
+            class="input-box number-input"
+            @change="modifyPosition"
+          />
+        </el-col>
+      </el-row>
+      <el-row class="tool-row">
+        <el-col :offset="0" :span="6">
+          Scale:
+        </el-col>
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="scale"
+            :step="0.01"
+            :min="0"
+            :max="5"
+            :show-tooltip="false"
+            @input="modifyScale()"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
+          <el-input-number
+            v-model="scale"
+            :step="0.01"
+            :min="0"
+            :max="5"
+            :controls="false"
+            class="input-box number-input"
+            @change="modifyScale()"
+          />
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+
+import {
+  ElCol as Col,
+  ElContainer as Container,
+  ElInputNumber as InputNumber,
+  ElMain as Main,
+} from "element-plus";
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "TransformationControls",
+  components: {
+    Col,
+    Container,
+    InputNumber,
+    Main,
+  },
+  data: function () {
+    return {
+      x: 0,
+      y: 0,
+      z: 0,
+      scale: 1,
+    };
+  },
+  mounted: function () {
+    this._zincObject = undefined;
+  },
+  methods: {
+    setObject: function (object) {
+      if (object.isZincObject) {
+        this._zincObject = object;
+        const morph = this._zincObject.getGroup();
+        if (morph && morph.position) {
+          this.x = morph.position.x;
+          this.y = morph.position.y;
+          this.z = morph.position.z;
+          this.scale = morph.scale.x;
+        }
+      } else {
+        this._zincObject = undefined;
+        this.x = 0;
+        this.y = 0;
+        this.z = 0;
+        this.scale = 1;
+      }
+    },
+    modifyPosition: function() {
+      this._zincObject.setPosition(this.x, this.y, this.z);
+    },
+    modifyScale: function() {
+      this._zincObject.setScaleAll(this.scale);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.slides-block {
+  pointer-events: auto;
+  &.el-main {
+    padding: 5px;
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px #c0c4cc;
+    }
+  }
+}
+
+.transformation-container {
+  width: 250px;
+  height: auto;
+  background-color: #fff;
+  overflow-y: none;
+}
+
+.input-box {
+  width: 42px;
+  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__wrapper) {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+}
+
+.my-slider {
+  position: absolute;
+  width: 135px;
+  left: 50px;
+  pointer-events: auto;
+}
+
+.tool-row {
+  align-items:center;
+  text-align: center;
+  padding-top:8px;
+}
+
+</style>

package/src/components/TreeControls.vue

@@ -136,7 +136,7 @@ export default {
     this.sortedPrimitiveGroups = undefined;
   },
   methods: {
-    addTreeItem: function (parentContainer, item) {
+    addTreeItem: function (parentContainer, item, object) {
       //The following block prevent duplicate graphics with the same name
       if (parentContainer.some(child => child.label === item.label)) {
         return;
@@ -147,7 +147,10 @@ export default {
       });
       this.__nodeNumbers++;
       this.$nextTick(() => {
-        this.$refs.regionTree.setChecked(item.id, true);
+        const checked = this.$refs.regionTree.getCheckedKeys();
+        if (!checked.includes(item.id) && object.getVisibility()) {
+          this.$refs.regionTree.setChecked(item.id, true);
+        }
       });
     },
     // find or create new region, region id is always prefixed with
@@ -164,23 +167,23 @@ export default {
       }
       if (paths.length > 0) {
         const _paths = [...paths];
-        let childRegion = data.children.find(
+        let childRegionItem = data.children.find(
           (child) => child.label == _paths[0]
         );
         const path = prefix + "/" + paths[0];
         const region = this.$module.scene.getRootRegion().findChildFromPath(path);
-        if (!childRegion) {
-          childRegion = {
+        if (!childRegionItem) {
+          childRegionItem = {
             label: _paths[0],
             id: region.uuid,
             children: [],
             regionPath: path,
             isRegion: true,
           };
-          this.addTreeItem(data.children, childRegion);
+          this.addTreeItem(data.children, childRegionItem, region);
         }
         _paths.shift();
-        return this.findOrCreateRegion(childRegion, _paths, path);
+        return this.findOrCreateRegion(childRegionItem, _paths, path);
       } else {
         return data;
       }
@@ -209,7 +212,7 @@ export default {
               regionPath: zincObject.region.getFullPath(),
               isTextureSlides: zincObject.isTextureSlides ? true : false,
             };
-            this.addTreeItem(regionData.children, child);
+            this.addTreeItem(regionData.children, child, zincObject);
           }
         }
       }
@@ -372,9 +375,6 @@ export default {
         });
       }
     },
-    viewAll: function () {
-      this.$module.viewAll();
-    },
     visibilityToggle: function (item, event) {
       this.$module.changeOrganPartsVisibility(item, event);
       if (event == false) {

package/src/components.d.ts

@@ -7,8 +7,11 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    CreateTooltipContent: typeof import('./components/CreateTooltipContent.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElFooter: typeof import('element-plus/es')['ElFooter']
@@ -19,6 +22,7 @@ declare module 'vue' {
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
     ElIconWarningFilled: typeof import('@element-plus/icons-vue')['WarningFilled']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -29,13 +33,16 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTree: typeof import('element-plus/es')['ElTree']
+    LinesControls: typeof import('./components/LinesControls.vue')['default']
     OpacityControls: typeof import('./components/OpacityControls.vue')['default']
+    PointsControls: typeof import('./components/PointsControls.vue')['default']
     PrimitiveControls: typeof import('./components/PrimitiveControls.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScaffoldTooltip: typeof import('./components/ScaffoldTooltip.vue')['default']
     ScaffoldVuer: typeof import('./components/ScaffoldVuer.vue')['default']
     TextureSlidesControls: typeof import('./components/TextureSlidesControls.vue')['default']
+    TransformationControls: typeof import('./components/TransformationControls.vue')['default']
     TreeControls: typeof import('./components/TreeControls.vue')['default']
   }
   export interface ComponentCustomProperties {

package/src/scripts/GraphicsHighlight.js

@@ -116,7 +116,6 @@ const GraphicsHighlight = function() {
   }
   */
 
-
   this.setHighlighted = function(objects) {
     const previousHighlightedObjects = [...currentHighlightedObjects];
     _this.resetHighlighted();
@@ -131,7 +130,7 @@ const GraphicsHighlight = function() {
   this.setSelected = function(objects) {
     // first find highlighted object that are not selected
     const previousHSelectedObjects = [...currentSelectedObjects];
-    const array = getUnmatchingObjects(currentHighlightedObjects, objects);
+    //const array = getUnmatchingObjects(currentHighlightedObjects, objects);
     _this.resetHighlighted();
     _this.resetSelected();
     const fullList = getFullListOfObjects(objects);

package/src/scripts/OrgansRenderer.js

@@ -234,20 +234,30 @@ const OrgansSceneData = function() {
 		return function(intersects, window_x, window_y) {
       const intersected = _this.getIntersectedObject(intersects);
       const idObject = getIdObjectFromIntersect(intersected);
+			const extraData = {
+				worldCoords: [
+					intersected ? intersected.point.x : 0,
+					intersected ? intersected.point.y : 0,
+					intersected ? intersected.point.z : 0,
+				],
+				intersected,
+			};
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
         if (idObject.object.userData.isGlyph) { 
-          if (idObject.object.name)
-            _this.setSelectedByObjects([idObject.object], coords, true);
-          else
+          if (idObject.object.name) {
+            _this.setSelectedByObjects([idObject.object], coords,
+							extraData, true);
+					} else {
             _this.setSelectedByZincObjects(idObject.object.userData.getGlyphset(),
-              coords, true);
+							coords, extraData, true);
+					}
         } else {
-          _this.setSelectedByObjects([idObject.object], coords, true);
+          _this.setSelectedByObjects([idObject.object], coords, extraData, true);
         }
         return;
       } else {
-				_this.setSelectedByObjects([], coords, true);
+				_this.setSelectedByObjects([], coords, extraData, true);
 			}
 		}
 	};
@@ -261,15 +271,22 @@ const OrgansSceneData = function() {
 		return function(intersects, window_x, window_y) {
       const intersected = _this.getIntersectedObject(intersects);
       const idObject = getIdObjectFromIntersect(intersected);
+			const extraData = {
+				worldCoords: [
+					intersected ? intersected.point.x : 0,
+					intersected ? intersected.point.y : 0,
+					intersected ? intersected.point.z : 0,
+				],
+			}
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
         _this.displayArea.style.cursor = "pointer";
-        _this.setHighlightedByObjects([idObject.object], coords, true);
+        _this.setHighlightedByObjects([idObject.object], coords, extraData, true);
         return;
       }
       else {
 				_this.displayArea.style.cursor = "auto";
-				_this.setHighlightedByObjects([], coords, true);
+				_this.setHighlightedByObjects([], coords, extraData, true);
       }
 		}
 	};
@@ -483,6 +500,7 @@ const OrgansSceneData = function() {
 			      } else {
 			    	  organScene = _this.zincRenderer.createScene(name);
 			      }
+						_this.selectObjectOnPick = true;
 			      for (let i = 0; i < sceneChangedCallbacks.length;i++) {
 			    	  sceneChangedCallbacks[i](_this.sceneData);
 			      }
@@ -493,8 +511,8 @@ const OrgansSceneData = function() {
 			    	  _this.sceneData.viewURL = undefined;
             }
 			      _this.sceneData.metaURL = url;
-			      organScene.loadMetadataURL(url, _addOrganPartCallback(systemName, partName, false),
-			    	  downloadCompletedCallback());	      
+						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
+			      organScene.loadMetadataURL(url, undefined, downloadCompletedCallback());	      
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();
@@ -523,8 +541,8 @@ const OrgansSceneData = function() {
 			      }
   	    	  _this.sceneData.viewURL = undefined;
 			      _this.sceneData.metaURL = url;
-			      organScene.loadGLTF(url, _addOrganPartCallback(undefined, partName, false),
-              downloadCompletedCallback());
+						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(undefined, partName, false));
+			      organScene.loadGLTF(url, undefined, undefined, downloadCompletedCallback());
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();

package/src/scripts/RendererModule.js

@@ -32,6 +32,7 @@ const RendererModule = function()  {
   this.rendererContainer = undefined;
   this.displayArea = undefined;
   this.graphicsHighlight = new GraphicsHighlight();
+  this.selectObjectOnPick = true;
   this.zincRenderer = null;
   this.selectedScreenCoordinates = new THREE.Vector3();
   this.selectedCenter = undefined;
@@ -93,7 +94,7 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
 }
 
 RendererModule.prototype.setHighlightedByObjects = function(
-  objects, coords, propagateChanges) {
+  objects, coords, extraData, propagateChanges) {
   const changed = this.graphicsHighlight.setHighlighted(objects);
   const zincObjects = this.objectsToZincObjects(objects);
   if (propagateChanges) {
@@ -101,8 +102,10 @@ RendererModule.prototype.setHighlightedByObjects = function(
     if (changed)
       eventType = EVENT_TYPE.HIGHLIGHTED;
     const annotations = this.getAnnotationsFromObjects(objects);
-    if (annotations.length > 0)
+    if (annotations.length > 0) {
       annotations[0].coords = coords;
+      annotations[0].extraData = extraData;
+    }
     this.publishChanges(annotations, eventType, zincObjects);
   }
   return changed;
@@ -110,7 +113,7 @@ RendererModule.prototype.setHighlightedByObjects = function(
 
 
 RendererModule.prototype.setHighlightedByZincObjects = function(
-  zincObjects, coords, propagateChanges) {
+  zincObjects, coords, extraData, propagateChanges) {
     let morphs = [];
     if (zincObjects) {
       zincObjects.forEach(zincObject => {
@@ -119,7 +122,7 @@ RendererModule.prototype.setHighlightedByZincObjects = function(
       });
     }
 
-    return this.setHighlightedByObjects(morphs, coords,propagateChanges);
+    return this.setHighlightedByObjects(morphs, coords, extraData, propagateChanges);
 }
 
 RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
@@ -127,11 +130,15 @@ RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
   if (zincObjects && (zincObjects.length > 0)) {
     const boundingBox = this.scene.getBoundingBoxOfZincObjects(zincObjects);
     let newSelectedCenter = new THREE.Vector3();
-    boundingBox.getCenter(newSelectedCenter);
-    if (this.selectedCenter == undefined) {
-      this.selectedCenter = newSelectedCenter;
+    if (boundingBox) {
+      boundingBox.getCenter(newSelectedCenter);
+      if (this.selectedCenter == undefined) {
+        this.selectedCenter = newSelectedCenter;
+      } else {
+        this.selectedCenter.copy(newSelectedCenter);
+      }
     } else {
-      this.selectedCenter.copy(newSelectedCenter);
+      this.selectedCenter = undefined;
     }
   } else {
     this.selectedCenter = undefined;
@@ -158,16 +165,25 @@ RendererModule.prototype.objectsToZincObjects = function(objects) {
 
 
 RendererModule.prototype.setSelectedByObjects = function(
-  objects, coords, propagateChanges) {
-  const changed = this.graphicsHighlight.setSelected(objects);
+  objects, coords, extraData, propagateChanges) {
+  let changed = false;
+  if (this.selectObjectOnPick) {
+    changed = this.graphicsHighlight.setSelected(objects);
+  } else {
+    changed = true;
+  }
   if (changed) {
     const zincObjects = this.objectsToZincObjects(objects);
-    this.setupLiveCoordinates(zincObjects);
+    if (this.selectObjectOnPick) {
+      this.setupLiveCoordinates(zincObjects);
+    }
     if (propagateChanges) {
       const eventType = EVENT_TYPE.SELECTED;
       const annotations = this.getAnnotationsFromObjects(objects);
-      if (annotations.length > 0)
+      if (annotations.length > 0) {
         annotations[0].coords = coords;
+        annotations[0].extraData = extraData;
+      }
       this.publishChanges(annotations, eventType, zincObjects);
     }
   }
@@ -175,7 +191,7 @@ RendererModule.prototype.setSelectedByObjects = function(
 }
 
 RendererModule.prototype.setSelectedByZincObjects = function(
-  zincObjects, coords, propagateChanges) {
+  zincObjects, coords, extraData, propagateChanges) {
   let morphs = [];
   if (zincObjects) {
     zincObjects.forEach(zincObject => {
@@ -188,7 +204,7 @@ RendererModule.prototype.setSelectedByZincObjects = function(
     });
   }
 
-  return this.setSelectedByObjects(morphs, coords, propagateChanges);
+  return this.setSelectedByObjects(morphs, coords, extraData, propagateChanges);
 }
 
 const addGlyphToArray = function(objects) {
@@ -203,12 +219,12 @@ RendererModule.prototype.findObjectsByGroupName = function(groupName) {
 
 RendererModule.prototype.setHighlightedByGroupName = function(groupName, propagateChanges) {
   const objects = this.findObjectsByGroupName(groupName);
-  return this.setHighlightedByObjects(objects, undefined, propagateChanges);
+  return this.setHighlightedByObjects(objects, undefined, {}, propagateChanges);
 }
 
 RendererModule.prototype.setSelectedByGroupName = function(groupName, propagateChanges) {
   const objects = this.findObjectsByGroupName(groupName);
-  return this.setSelectedByObjects(objects, undefined, propagateChanges);
+  return this.setSelectedByObjects(objects, undefined, {}, propagateChanges);
 }
 
 RendererModule.prototype.changeBackgroundColour = function(backgroundColourString) {