@abi-software/scaffoldvuer 1.13.1-beta.12 → 1.13.1-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.13.1-beta.12",
+  "version": "1.13.1-beta.13",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/OpacityControls.vue

@@ -75,7 +75,6 @@ export default {
 .block {
   left: 40px;
   position: absolute;
-  top: 57px;
   width: 200px;
 }
 

package/src/components/PrimitiveControls.vue

@@ -1,52 +1,39 @@
 <template>
-  <div
-    v-show="hasValidPrimitive"
-    class="primitive-controls"
-    :class="{ open: drawerOpen, close: !drawerOpen }"
-  >
-    <div class="my-drawer" :class="{ open: drawerOpen, close: !drawerOpen }">
-      <el-collapse class="collapse" v-model="activeName" accordion>
-        <el-collapse-item title="Opacity" name="oControls" v-show="!isTextureSlides" >
-          <opacity-controls
-            :material="material"
-            :zincObject="zincObject"
-            ref="opacityControls" />
-        </el-collapse-item>
-        <el-collapse-item v-show="!isEditable" title="Transformation" name="trControls">
-          <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" />
-        </el-collapse-item>
-        <el-collapse-item v-show="isPointset" title="Points" name="pControls">
-          <points-controls
-            class="pointset-controls"
-            ref="pointsetControls"
-            @primitivesUpdated="$emit('primitivesUpdated', $event)"
-          />
-        </el-collapse-item>
-        <el-collapse-item v-show="isLines" title="Lines" name="lControls">
-          <lines-controls
-            class="lines-controls"
-            ref="linesControls"
-            :createData="createData"
-            :usageConfig="usageConfig"
-            @primitivesUpdated="$emit('primitivesUpdated', $event)"
-          />
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-    <div
-      class="drawer-button"
-      :class="{ open: drawerOpen, close: !drawerOpen }"
-      @click="toggleDrawer"
-    >
-      <el-icon><el-icon-arrow-right /></el-icon>
-    </div>
+  <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" >
+        <opacity-controls
+          :material="material"
+          :zincObject="zincObject"
+          ref="opacityControls" />
+      </el-collapse-item>
+      <el-collapse-item v-show="!isEditable" title="Transformation" name="trControls">
+        <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" />
+      </el-collapse-item>
+      <el-collapse-item v-show="isPointset" title="Points" name="pControls">
+        <points-controls
+          class="pointset-controls"
+          ref="pointsetControls"
+          @primitivesUpdated="$emit('primitivesUpdated', $event)"
+        />
+      </el-collapse-item>
+      <el-collapse-item v-show="isLines" title="Lines" name="lControls">
+        <lines-controls
+          class="lines-controls"
+          ref="linesControls"
+          :createData="createData"
+          :usageConfig="usageConfig"
+          @primitivesUpdated="$emit('primitivesUpdated', $event)"
+        />
+      </el-collapse-item>
+    </el-collapse>
   </div>
 </template>
 
@@ -101,7 +88,7 @@ export default {
       isTextureSlides: false,
       isPointset: false,
       isLines: false,
-      drawerOpen: true,
+
       zincObject: undefined,
       isEditable: false,
       displayString: "100%"
@@ -120,9 +107,6 @@ export default {
       this.displayString = Math.floor(100 * val + 0.5) + "%";
       return this.displayString;
     },
-    toggleDrawer: function() {
-      this.drawerOpen = !this.drawerOpen;
-    },
     setObject: function(object) {
       if (object) {
         this.zincObject = markRaw(object);
@@ -143,7 +127,7 @@ export default {
           this.isPointset = true;
           this.$refs.pointsetControls.setObject(object);
           this.activeName = "pControls";
-        } else if (object.isLines2 || (object.isTubeLines && 
+        } else if (object.isLines2 || (object.isTubeLines &&
           this.usageConfig?.showTubeLinesControls)) {
           this.isLines = true;
           this.$refs.linesControls.setObject(object);
@@ -163,72 +147,20 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.primitive-controls {
-  position: absolute;
-  bottom: 30%;
-  transition: all 1s ease;
-
-  &.open {
-    right: 0px;
-    .my-drawer {
-      opacity: 1;
-    }
-  }
-  &.close {
-    right: -250px;
-    .my-drawer {
-      pointer-events: none;
-      opacity: 0;
-    }
-  }
-}
 .my-drawer {
-  transition: all 1s ease;
-  float: right;
-  max-height: 150px;
-  text-align: left;
-  background: #ffffff;
-  width:250px;
   .collapse {
-    border: 1px solid rgb(220, 223, 230);
-    :deep(.el-collapse-item__header) {
-      padding-left: 8px;
-    }
-    :deep(.el-collapse-item__content) {
-      padding-bottom: 8px;
-    }
+    border-top: none;
+    border-bottom: none;
   }
-}
 
-.drawer-button {
-  float: right;
-  width: 20px;
-  height: 40px;
-  z-index: 8;
-  border: solid 1px $app-primary-color;
-  background-color: #f9f2fc;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  pointer-events: auto;
-  margin-top: 25px;
-
-  i {
-    font-weight: 600;
-    margin-top: 12px;
-    color: $app-primary-color;
-    transition-delay: 0.9s;
-  }
-  &.open {
-    i {
-      transform: rotate(0deg) scaleY(2.5);
-    }
+  :deep(.el-collapse-item__header) {
+    height:36px;
   }
-  &.close {
-    i {
-      transform: rotate(180deg) scaleY(2.5);
-    }
+
+  :deep(.el-collapse-item__content) {
+    padding-bottom: 0px;
   }
 }
 
+
 </style>

package/src/components/ScaffoldTreeControls.vue

@@ -1,26 +1,30 @@
 <template>
   <div class="tree-controls" :class="{ open: drawerOpen, close: !drawerOpen }">
-    <div class="traditional-container">
-      <slot name="treeSlot"></slot>
-      <TreeControls
-        mapType="scaffold"
-        title="Regions"
-        :isReady="isReady"
-        :treeData="treeDataEntry"
-        :active="active"
-        :hover="hover"
-        :showColourPicker="showColourPicker"
-        @setColour="setColour"
-        @checkChanged="checkChanged"
-        @changeActive="changeActiveByNode"
-        @changeHover="changeHoverByNode"
-        ref="treeControls"
-        @mouseleave="removeHover(true)"
-      />
+    <div class="tree-controls-scroll">
+      <div class="tree-controls-container"
+        :style="{ 'max-height': `${maxHeight}px` }">
+        <slot name="treeSlot"></slot>
+        <TreeControls
+          mapType="scaffold"
+          title="Regions"
+          :isReady="isReady"
+          :treeData="treeDataEntry"
+          :active="active"
+          :hover="hover"
+          :showColourPicker="showColourPicker"
+          @setColour="setColour"
+          @checkChanged="checkChanged"
+          @changeActive="changeActiveByNode"
+          @changeHover="changeHoverByNode"
+          ref="treeControls"
+          @mouseleave="removeHover(true)"
+        />
+      </div>
     </div>
     <div
       class="drawer-button"
       :class="{ open: drawerOpen, close: !drawerOpen }"
+      :style="{ 'bottom': `${drawerBottom}px` }"
       @click="toggleDrawer"
     >
       <el-icon><el-icon-arrow-left /></el-icon>
@@ -63,11 +67,12 @@ export default {
     TreeControls,
   },
   props: {
+    containerHeight: Number,
+    isReady: Boolean,
     /**
      * Enable/disable colour picker
      */
     showColourPicker: Boolean,
-    isReady: Boolean,
   },
   data: function () {
     return {
@@ -83,6 +88,19 @@ export default {
     };
   },
   computed: {
+    drawerBottom: function() {
+      if (100 > this.maxHeight) {
+        return this.maxHeight;
+      }
+      return 100;
+    },
+    maxHeight: function() {
+      let height = this.containerHeight - 114;
+      if (0 > height) {
+        height = 0;
+      }
+      return height;
+    },
     treeDataEntry: function () {
       return this.treeData[0].children;
     },
@@ -673,45 +691,69 @@ export default {
   }
   &.open {
     left: 0px;
-    .traditional-container {
+    .tree-controls-container {
       opacity: 1;
     }
   }
   &.close {
-    left: -298px;
-    .traditional-container {
+    left: -278px;
+    .tree-controls-container {
       pointer-events: none;
       opacity: 0;
     }
   }
 }
 
-.traditional-container {
+.tree-controls-container {
   transition: all 1s ease;
   float: left;
-  padding-left: 16px;
-  padding-right: 18px;
-  max-height: calc(100% - 154px);
+  padding-left: 8px;
+  padding-right: 8px;
   text-align: left;
-  overflow: none;
   border: 1px solid rgb(220, 223, 230);
-  padding-top: 7px;
   padding-bottom: 16px;
   background: #ffffff;
 }
 
+.tree-controls-scroll {
+  overflow-y:auto;
+  overflow-x:hidden;
+  //scrollbar-width: thin;
+
+  &:hover {
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 8px; /* Rounded corners for the track */
+
+  }
+  &::-webkit-scrollbar {
+    width:4px;
+
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px #c0c4cc;
+    background: #a1a1a1;
+  }
+}
+
 .drawer-button {
+  position: absolute;
   float: left;
   width: 20px;
   height: 40px;
   z-index: 8;
-  margin-top: calc(50% - 52px);
   border: solid 1px $app-primary-color;
   background-color: #f9f2fc;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   pointer-events: auto;
+  right: -22px;
 }
 
 .drawer-button {

package/src/components/ScaffoldVuer.vue

@@ -106,6 +106,7 @@
             class="control-layer"
             ref="scaffoldTreeControls"
             :isReady="isReady"
+            :containerHeight="clientHeight"
             :show-colour-picker="enableColourPicker"
             @object-selected="objectSelected"
             @object-hovered="objectHovered"
@@ -114,20 +115,31 @@
           >
           <template v-slot:treeSlot>
             <slot name="treeSlot"></slot>
+            <primitive-controls
+              class="control-layer"
+              ref="primitiveControls"
+              :createData="createData"
+              :viewingMode="viewingMode"
+              :usageConfig="usageConfig"
+              @primitivesUpdated="primitivesUpdated"
+            />
           </template>
           </ScaffoldTreeControls>
         </template>
       </el-popover>
-      <div class="primitive-controls-box">
-        <primitive-controls
-          class="control-layer"
-          ref="primitiveControls"
-          :createData="createData"
-          :viewingMode="viewingMode"
-          :usageConfig="usageConfig"
-          @primitivesUpdated="primitivesUpdated"
-        />
-      </div>
+        <!--
+        <div class="primitive-controls-box">
+
+          <primitive-controls
+            class="control-layer"
+            ref="primitiveControls"
+            :createData="createData"
+            :viewingMode="viewingMode"
+            :usageConfig="usageConfig"
+            @primitivesUpdated="primitivesUpdated"
+          />
+        </div>
+        -->
       <el-popover
         v-if="timeVarying"
         ref="sliderPopover"
@@ -827,6 +839,7 @@ export default {
   data: function () {
     return {
       annotator: undefined,
+      clientHeight: 300,
       colourRadio: true,
       createData: {
         drawingBox: false,
@@ -1060,6 +1073,7 @@ export default {
     this.$module.addOrganPartRemovedCallback(this.zincObjectRemoved);
     this.$module.initialiseRenderer(this.$refs.display);
     this.toggleRendering(this.render);
+    this.clientHeight = this.$refs.scaffoldContainer.$el.clientHeight;
     this.ro = new ResizeObserver(this.adjustLayout).observe(
       this.$refs.scaffoldContainer.$el
     );
@@ -3010,6 +3024,7 @@ export default {
     adjustLayout: function () {
       if (this.$refs.scaffoldContainer?.$el) {
         let width = this.$refs.scaffoldContainer.$el.clientWidth;
+        this.clientHeight = this.$refs.scaffoldContainer.$el.clientHeight;
         this.minimisedSlider = width < 812;
         if (this.minimisedSlider) {
           this.sliderPosition = this.drawerOpen ? "right" : "left";
@@ -3276,7 +3291,7 @@ export default {
   transition: all 1s ease;
 
   &.open {
-    left: 322px;
+    left: 302px;
   }
 
   &.close {

package/src/components/TextureSlidesControls.vue

@@ -74,7 +74,7 @@
           <el-slider
             v-model="slide.value"
             class="my-slider"
-            :step="0.005"
+            :step="0.001"
             :min="0"
             :max="1"
             :show-tooltip="false"
@@ -84,7 +84,8 @@
         <el-col :offset="0" :span="6">
           <el-input-number
             v-model="slide.value"
-            :step="0.01"
+            @change="modifySlide(slide)"
+            :step="0.001"
             :min="0"
             :max="1"
             :controls="false"

package/src/components/TransformationControls.vue

@@ -159,6 +159,7 @@ export default {
     calculateMinAndMax: function() {
       if (this.zincObject) {
         const originalPos = this.zincObject?.userData?.originalPos;
+        const morph = this.zincObject.getGroup();
         if (originalPos && this.boundingDims) {
           this.min = [
             originalPos[0] - this.boundingDims.size[0],
@@ -215,7 +216,8 @@ export default {
 .slides-block {
   pointer-events: auto;
   &.el-main {
-    padding: 5px;
+    padding: 0px 4px 8px 4px;
+    overflow: unset;
     &::-webkit-scrollbar {
       width: 10px;
     }
@@ -263,7 +265,7 @@ export default {
 .tool-row {
   align-items:center;
   text-align: center;
-  padding-top:8px;
+  padding-top:4px;
 }
 
 </style>

package/src/components.d.ts

@@ -16,7 +16,6 @@ declare module 'vue' {
     ElFooter: typeof import('element-plus/es')['ElFooter']
     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']