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

package/src/components/ScaffoldVuer.vue

@@ -106,27 +106,40 @@
             class="control-layer"
             ref="scaffoldTreeControls"
             :isReady="isReady"
+            :containerHeight="clientHeight"
             :show-colour-picker="enableColourPicker"
             @object-selected="objectSelected"
             @object-hovered="objectHovered"
             @drawer-toggled="drawerToggled"
+            @check-changed="$emit('check-changed', $event)"
           >
           <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"
@@ -826,6 +839,7 @@ export default {
   data: function () {
     return {
       annotator: undefined,
+      clientHeight: 300,
       colourRadio: true,
       createData: {
         drawingBox: false,
@@ -1059,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
     );
@@ -1442,6 +1457,9 @@ export default {
           this.renameAnnotations(payload.region, payload.group,
             this._editingZincObject, oldGroupName);
         }
+        else if (payload.deleting) {
+          this.confirmDelete();
+        }
         if (object) {
           this.addAndEditAnnotations(payload.region, payload.group, object.zincObject, "Create");
           object.zincObject.isEditable = true;
@@ -1520,6 +1538,12 @@ export default {
             this.offlineAnnotations = this.offlineAnnotations.filter(offline => offline.item.id !== annotation.item.id);
             sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
           }
+          this.$emit('userPrimitivesUpdated', {
+            region: this._editingZincObject.region,
+            group,
+            zincObject: this._editingZincObject,
+            deleted: true
+          });
         }
       }
       this.cancelCreate();
@@ -1825,6 +1849,21 @@ export default {
         setTimeout(this.stopFreeSpin, 4000);
       }
     },
+    activateDeleteMode: function(eventIdentifiers) {
+      const zincObject = getDeletableObjects(eventIdentifiers);
+      if (zincObject) {
+        this._editingZincObject = zincObject;
+        this.createData.faceIndex = -1;
+        this.createData.editingIndex = -1;
+        this.createData.renaming = false;
+        this.createData.tempGroupName = this._editingZincObject.groupName;
+        this.createData.regionPrefix =  this._editingZincObject.region.getFullPath();
+        this.createData.toBeConfirmed = true;
+        this.createData.toBeDeleted = true;
+        this.tData.x = 50;
+        this.tData.y = 200;
+      }
+    },
     activateEditingMode: function(eventIdentifiers) {
       let editing = getEditablePoint(eventIdentifiers);
       if (editing) {
@@ -1851,6 +1890,7 @@ export default {
         this.createData.tempGroupName = this._editingZincObject.groupName;
         this.createData.regionPrefix =  this._editingZincObject.region.getFullPath();
         this.createData.toBeConfirmed = true;
+        this.createData.toBeDeleted = false;
         this.showRegionTooltipWithAnnotations(eventIdentifiers, false, false);
         this.tData.x = 50;
         this.tData.y = 200;
@@ -1871,11 +1911,7 @@ export default {
           if (this.activeDrawMode === "Edit") {
             this.activateEditingMode(event.identifiers);
           } else if (this.activeDrawMode === "Delete") {
-            const zincObject = getDeletableObjects(event);
-            if (zincObject) {
-              this.createData.toBeDeleted = true;
-              this._editingZincObject = zincObject;
-            }
+            this.activateDeleteMode(event.identifiers);
           }
           if (this.activeDrawMode !== "Point" && this.activeDrawMode !== "LineString") {
             this.showRegionTooltipWithAnnotations(event.identifiers, true, false);
@@ -1891,6 +1927,7 @@ export default {
       this._editingZincObject = zincObject;
       this.createData.faceIndex = -1;
       this.createData.renaming = false;
+      this.createData.toBeDeleted = false;
       this.createData.editingIndex = index;
       this.createData.regionPrefix =  this._editingZincObject.region.getFullPath();
       this.createData.tempGroupName = this._editingZincObject.groupName;
@@ -1900,6 +1937,7 @@ export default {
       this._editingZincObject = zincObject;
       this.createData.faceIndex = faceIndex;
       this.createData.renaming = false;
+      this.createData.toBeDeleted = false;
       this.createData.editingIndex = vertexIndex;
       this.createData.regionPrefix =  this._editingZincObject.region.getFullPath();
       this.createData.tempGroupName = this._editingZincObject.groupName;
@@ -2144,9 +2182,10 @@ export default {
      *
      * @arg region Region to set the disable/enable checkbox
      * @arg flag Disable the checkbox when true and enable when false
+     * @arg childrenOnly Only disable/enable any child graphics/regions
      */
-     setRegionCheckboxDisabled: function(region, flag) {
-      this.$refs.scaffoldTreeControls.setRegionCheckboxDisabled(region, flag);
+     setRegionCheckboxDisabled: function(region, flag, childrenOnly = true) {
+      this.$refs.scaffoldTreeControls.setRegionCheckboxDisabled(region, flag, childrenOnly);
     },
     /**
      * @public
@@ -3008,6 +3047,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";
@@ -3274,7 +3314,7 @@ export default {
   transition: all 1s ease;
 
   &.open {
-    left: 322px;
+    left: 302px;
   }
 
   &.close {

package/src/components/TextureSlidesControls.vue

@@ -1,6 +1,13 @@
 <template>
   <el-container class="t-slides-container">
     <el-main class="slides-block">
+      <el-row class="slide-row">
+      <el-checkbox
+          v-model="discardAlpha"
+        >
+          Discard Translucent Pixel
+        </el-checkbox>
+      </el-row>
       <el-row class="slide-row">
         <el-col :offset="0" :span="8">
           Brightness
@@ -74,7 +81,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 +91,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"
@@ -119,6 +127,7 @@ import {
   Plus as ElIconPlus,
 } from '@element-plus/icons-vue'
 import {
+  ElCheckbox as Checkbox,
   ElCol as Col,
   ElContainer as Container,
   ElDivider as Divider,
@@ -139,6 +148,7 @@ import { markRaw } from 'vue';
 export default {
   name: "TextureSlidesControls",
   components: {
+    Checkbox,
     Col,
     Container,
     Divider,
@@ -157,6 +167,7 @@ export default {
     return {
       brightness: 0.0,
       contrast: 1.0,
+      discardAlpha: true,
       settings: [],
       directions: [
         {
@@ -191,6 +202,14 @@ export default {
         }
       },
       immediate: false,
+    },
+    discardAlpha: {
+      handler: function (value) {
+        if (this.zincObject) {
+          this.zincObject.discardAlphaPixel(value);
+        }
+      },
+      immediate: false,
     }
   },
   methods: {
@@ -200,11 +219,13 @@ export default {
         this.settings = this.zincObject.getTextureSettings();
         this.brightness = this.zincObject.getBrightness();
         this.contrast = this.zincObject.getContrast();
+        this.discardAlpha = this.zincObject.isAlphaPixelDiscarded();
       } else {
         this.zincObject = undefined;
         this.settings = [];
         this.brightness = 0.0;
         this.contrast = 1.0;
+        this.discardAlpha = true;
       }
     },
     addNewSlide: function () {
@@ -276,7 +297,7 @@ export default {
 
 .t-slides-container {
   width: 250px;
-  height: 218px;
+  height: 250px;
   overflow-y: auto;
 }
 

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

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
@@ -16,7 +17,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']

package/src/scripts/Utilities.js

@@ -50,6 +50,16 @@ export const getEditablePoint = (eventIdentifiers) => {
   return undefined;
 }
 
+export const getDeletableObjects = (eventIdentifiers) => {
+  const zincObject = eventIdentifiers[0].data?.zincObject;
+  if (zincObject) {
+    if (zincObject.isEditable) {
+      return zincObject;
+    }
+  }
+  return undefined;
+}
+
 export const getEditableLines = (eventIdentifiers) => {
   const zincObject = eventIdentifiers[0].data?.zincObject;
   if (zincObject) {
@@ -82,17 +92,6 @@ export const getClickedObjects = (event) => {
   return undefined;
 }
 
-export const getDeletableObjects = (event) => {
-  const zincObjects = event.zincObjects;
-  if (zincObjects.length > 0 && zincObjects[0]) {
-    const zincObject = zincObjects[0];
-    if (zincObject.isEditable) {
-      return zincObject;
-    }
-  }
-  return undefined;
-}
-
 export const movePoint = (zincObject, index, diff) => {
   if (zincObject?.isEditable && zincObject?.isPointset) {
     let found = false;