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

package/src/components/ScaffoldVuer.vue

@@ -22,7 +22,6 @@
       @confirm-create="confirmCreate($event)"
       @cancel-create="cancelCreate()"
       @confirm-comment="confirmComment($event)"
-      @confirm-delete="confirmDelete()"
       @tooltip-hide="onTooltipHide()"
       @create-group-suggestions="$emit('create-group-suggestions', $event)"
       @create-region-suggestions="$emit('create-region-suggestions', $event)"
@@ -106,27 +105,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 +838,7 @@ export default {
   data: function () {
     return {
       annotator: undefined,
+      clientHeight: 300,
       colourRadio: true,
       createData: {
         drawingBox: false,
@@ -1059,6 +1072,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
     );
@@ -1333,9 +1347,9 @@ export default {
         this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
         const found = this.offlineAnnotations.find((element) => {
           return element.group === annotation.group &&
-                 element.region === annotation.region &&
-                 element.resource === annotation.resource &&
-                 element.feature.geometry.type === annotation.feature.geometry.type;
+            element.region === annotation.region &&
+            element.resource === annotation.resource &&
+            element.feature.geometry.type === annotation.feature.geometry.type;
         });
         if (found) {
           Object.assign(found, annotation);
@@ -1377,7 +1391,6 @@ export default {
                  element.feature.geometry.type === annotation.feature.geometry.type;
         });
         if (found) {
-          //console.log('found', found)
           Object.assign(found, annotation);
         }
         sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
@@ -1420,6 +1433,8 @@ export default {
             [this.createData.points[0], this.createData.points[1]],
             0x00ee22,
           );
+        } else if (payload.deleting) {
+          this.confirmDelete(payload);
         } else if (payload.editingIndex > -1) {
           if (this._editingZincObject) {
             let editedPoint = undefined;
@@ -1505,21 +1520,53 @@ export default {
      * Confirm delete of user created primitive.
      * This is only called from callback.
      */
-    confirmDelete: function () {
+    confirmDelete: function (payload) {
       if (this._editingZincObject?.isEditable) {
         const regionPath = this._editingZincObject.region.getFullPath() + "/";
         const group = this._editingZincObject.groupName;
+        let toBeDeleted = true;
+        if (payload.editingIndex > -1 && this._editingZincObject.isPointset) {
+          toBeDeleted = 1 > this._editingZincObject.deleteVertices(payload.editingIndex);
+        }
+        const message = toBeDeleted ? "Deleted" : "Removed a vertex";
+
         const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken,
-          this._editingZincObject, regionPath, group, this.url, "Deleted");
+          this._editingZincObject, regionPath, group, this.url, message);
         if (annotation) {
           this.existDrawnFeatures = markRaw(this.existDrawnFeatures.filter(feature => feature.id !== annotation.item.id));
-          const childRegion = this.$module.scene.getRootRegion().findChildFromPath(regionPath);
-          childRegion.removeZincObject(this._editingZincObject);
+          if (toBeDeleted) {
+            const childRegion = this.$module.scene.getRootRegion().findChildFromPath(regionPath);
+            childRegion.removeZincObject(this._editingZincObject);
+          }
           if (this.offlineAnnotationEnabled) {
+            annotation.group = group;
+            let regionPath = payload.region;
+            if (regionPath.slice(-1) === "/") {
+              regionPath = regionPath.slice(0, -1);
+            }
+            annotation.region = regionPath;
             this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
-            this.offlineAnnotations = this.offlineAnnotations.filter(offline => offline.item.id !== annotation.item.id);
+            if (toBeDeleted) {
+              this.offlineAnnotations = this.offlineAnnotations.filter(offline => offline.item.id !== annotation.item.id);
+            } else {
+            //Do not remove completely if there is primitive left
+              const found = this.offlineAnnotations.find((element) => {
+                return element.group === group &&
+                      element.region === annotation.region &&
+                      element.resource === annotation.resource &&
+                      element.feature.geometry.type === annotation.feature.geometry.type;
+              });
+              Object.assign(found, annotation);
+              this.existDrawnFeatures.push(annotation.feature);
+            }
             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 +1872,23 @@ export default {
         setTimeout(this.stopFreeSpin, 4000);
       }
     },
+    activateDeleteMode: function(eventIdentifiers) {
+      const zincObject = getDeletableObjects(eventIdentifiers);
+      if (zincObject) {
+        const editing = getEditablePoint(eventIdentifiers);
+        const editingIndex = editing?.index !== undefined ? editing.index : -1;
+        this._editingZincObject = zincObject;
+        this.createData.faceIndex = -1;
+        this.createData.editingIndex = editingIndex;
+        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 +1915,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 +1936,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 +1952,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 +1962,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 +2207,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 +3072,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 +3339,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;