@abi-software/scaffoldvuer 1.13.1-beta.8 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.13.1-beta.8",
+  "version": "1.14.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.7.8-beta.2",
+    "@abi-software/map-utilities": "1.8.0",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "1.0.3",
     "@element-plus/icons-vue": "^2.3.1",
@@ -53,7 +53,7 @@
     "unplugin-vue-components": "^0.26.0",
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
-    "zincjs": "^1.16.7"
+    "zincjs": "^1.16.10"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.0",

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/ScaffoldTooltip.vue

@@ -32,28 +32,6 @@
           :annotationEntry="annotationEntry"
           @annotation="$emit('confirm-comment', $event)"
         />
-        <div v-if="createData.toBeDeleted" class="delete-container">
-          <el-row>
-            <el-col :span="10">Delete this feature?</el-col>
-            <el-col :span="7">
-              <el-button
-                class="delete-button"
-                :icon="ElIconDelete"
-                @click="$emit('confirm-delete')"
-                >
-                  Delete
-              </el-button>
-            </el-col>
-            <el-col :span="6">
-              <el-button
-                class="delete-button"
-                @click="$emit('cancel-create')"
-                >
-                  Dismiss
-              </el-button>
-            </el-col>
-          </el-row>
-        </div>
       </template>
     </el-popover>
   </div>
@@ -68,9 +46,6 @@ import {
   ElPopover as Popover,
   ElRow as Row,
 } from "element-plus";
-import {
-  Delete as ElIconDelete,
-} from '@element-plus/icons-vue'
 import { mapState } from 'pinia';
 import { useMainStore } from "@/store/index";
 import { CreateTooltipContent, Tooltip } from '@abi-software/map-utilities'
@@ -84,7 +59,6 @@ export default {
   components: {
     Col,
     CreateTooltipContent,
-    ElIconDelete,
     Icon,
     Popover,
     Row,
@@ -143,8 +117,7 @@ export default {
   data: function () {
     return {
       display: false,
-      annotationEntry: [],
-      ElIconDelete: shallowRef(ElIconDelete),
+      annotationEntry: []
     };
   },
   computed: {
@@ -211,7 +184,7 @@ export default {
 .region-tooltip {
   position: absolute;
   height: 50px;
-  z-index: 2;
+  z-index: 3;
   :deep(.tooltip-popper.el-popover.el-popper) {
     padding: 2px 6px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -254,23 +227,5 @@ export default {
       display:none;
     }
   }
-
-  .delete-container {
-    margin-top: 12px;
-    margin-bottom: 12px;
-    font-size: 14px;
-    .delete-button {
-      pointer-events: auto;
-      cursor: pointer;
-      margin-left:8px;
-      padding-left: 8px;
-      padding-right: 8px;
-      height: 24px !important;
-      color: $app-primary-color;
-      &:hover {
-        background-color: var(--el-color-primary-light-9);
-      }
-    }
-  }
 }
 </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;
     },
@@ -111,6 +129,40 @@ export default {
     */
   },
   methods: {
+    setCheckboxDisabled: function(data, flag, childrenOnly) {
+      if (data) {
+        if (!childrenOnly) {
+          data.disabled = flag;
+        }
+        if (data.children) {
+          data.children.forEach(child =>
+            this.setCheckboxDisabled(child, flag, false)
+          );
+        }
+      }
+    },
+    setRegionCheckboxDisabled: function (region, flag, childrenOnly) {
+      if (this.treeData[0] && region?.uuid) {
+        const data = this.findDataWithId(this.treeData[0], region?.uuid)
+        if (data) {
+          this.setCheckboxDisabled(data, flag, childrenOnly);
+        }
+      }
+    },
+    findDataWithId: function(data, uuid) {
+      if (data) {
+        if (data.id === uuid) {
+          return data;
+        }
+        if (data.children) {
+          for (let i = 0; i < data.children.length; i++) {
+            const found = this.findDataWithId(data.children[i], uuid);
+            if (found) return found;
+          }
+        }
+      }
+      return;
+    },
     addTreeItem: function (parentContainer, item, object) {
       //The following block prevent duplicate graphics with the same name
       if (parentContainer.some((child) => child.label === item.label)) {
@@ -251,6 +303,7 @@ export default {
           region.hideAllPrimitives();
           //this.checkedRegions = this.checkedRegions.filter(region => region.label !== node.label);
         }
+        this.$emit("check-changed", {region, isChecked});
       }
       if (isPrimitives) {
         const primitives = region.findObjectsWithGroupName(node.label);
@@ -258,6 +311,7 @@ export default {
           const visibility = isChecked && !node.disabled;
           primitive.setVisibility(visibility);
         });
+        this.$emit("check-changed", {zincObjects: primitives, isChecked});
       }
     },
     updateActiveUI: function (primitives) {
@@ -637,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 {