@abi-software/scaffoldvuer 1.13.1-beta.8 → 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"
@@ -308,66 +321,74 @@
         virtual-triggering
       >
         <div class="control-layer">
-          <el-row class="backgroundText">Viewing Mode</el-row>
-          <el-row class="backgroundControl">
-            <div style="margin-bottom: 2px;">
-              <template
-                  v-for="(value, key, index) in viewingModes"
-                  :key="key"
-                >
-                  <template v-if="key === viewingMode">
-                    <span class="viewing-mode-title"><b >{{ key }}</b></span>
-                  </template>
-                  <template v-else>
-                    <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
-                  </template>
-              </template>
-            </div>
-            <el-row class="viewing-mode-description">
-              {{ modeDescription }}
+          <div class="viewing-mode-container">
+            <el-row class="backgroundText">Viewing Mode</el-row>
+            <el-row class="backgroundControl">
+              <div style="margin-bottom: 2px;">
+                <template
+                    v-for="(value, key, index) in viewingModes"
+                    :key="key"
+                  >
+                    <template v-if="key === viewingMode">
+                      <span class="viewing-mode-title"><b >{{ key }}</b></span>
+                    </template>
+                    <template v-else>
+                      <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
+                    </template>
+                </template>
+              </div>
+              <el-row class="viewing-mode-description">
+                {{ modeDescription }}
+              </el-row>
+              <el-row v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled" class="viewing-mode-description">
+                (Anonymous annotate)
+              </el-row>
             </el-row>
-            <el-row v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled" class="viewing-mode-description">
-              (Anonymous annotate)
+          </div>
+          <div class="colour-radio-container">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText">Organs display</el-row>
+            <el-row class="backgroundControl">
+              <el-radio-group
+                v-model="colourRadio"
+                class="scaffold-radio"
+                @change="setColour(colourRadio, true)"
+              >
+                <el-radio :value="true">Colour</el-radio>
+                <el-radio :value="false">Greyscale</el-radio>
+              </el-radio-group>
             </el-row>
-          </el-row>
-          <el-row class="backgroundSpacer"></el-row>
-          <el-row class="backgroundText">Organs display</el-row>
-          <el-row class="backgroundControl">
-            <el-radio-group
-              v-model="colourRadio"
-              class="scaffold-radio"
-              @change="setColour(colourRadio, true)"
-            >
-              <el-radio :value="true">Colour</el-radio>
-              <el-radio :value="false">Greyscale</el-radio>
-            </el-radio-group>
-          </el-row>
-          <el-row class="backgroundSpacer"></el-row>
-          <el-row class="backgroundText">Outlines display</el-row>
-          <el-row class="backgroundControl">
-            <el-radio-group
-              v-model="outlinesRadio"
-              class="scaffold-radio"
-              @change="setOutlines(outlinesRadio, true)"
-            >
-              <el-radio :value="true">Show</el-radio>
-              <el-radio :value="false">Hide</el-radio>
-            </el-radio-group>
-          </el-row>
-          <el-row class="backgroundSpacer"></el-row>
-          <el-row class="backgroundText"> Change background </el-row>
-          <el-row class="backgroundChooser">
-            <div
-              v-for="item in availableBackground"
-              :key="item"
-              :class="[
-                'backgroundChoice',
-                item,
-                item == currentBackground ? 'active' : '',
-              ]"
-              @click="backgroundChangeCallback(item)"
-            />
-          </el-row>
+          </div>
+          <div class="outlines-radio-container">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText">Outlines display</el-row>
+            <el-row class="backgroundControl">
+              <el-radio-group
+                v-model="outlinesRadio"
+                class="scaffold-radio"
+                @change="setOutlines(outlinesRadio, true)"
+              >
+                <el-radio :value="true">Show</el-radio>
+                <el-radio :value="false">Hide</el-radio>
+              </el-radio-group>
+            </el-row>
+          </div>
+          <div class="background-colour-container">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText"> Change background </el-row>
+            <el-row class="backgroundChooser">
+              <div
+                v-for="item in availableBackground"
+                :key="item"
+                :class="[
+                  'backgroundChoice',
+                  item,
+                  item == currentBackground ? 'active' : '',
+                ]"
+                @click="backgroundChangeCallback(item)"
+              />
+            </el-row>
+          </div>
         </div>
       </el-popover>
       <div
@@ -818,6 +839,7 @@ export default {
   data: function () {
     return {
       annotator: undefined,
+      clientHeight: 300,
       colourRadio: true,
       createData: {
         drawingBox: false,
@@ -1051,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
     );
@@ -1434,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;
@@ -1512,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();
@@ -1817,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) {
@@ -1843,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;
@@ -1863,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);
@@ -1883,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;
@@ -1892,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;
@@ -2130,6 +2176,17 @@ export default {
       //Hide tooltip as location may
       //this.hideRegionTooltip();
     },
+    /**
+     * @public
+     * Disable/enable target region and its children checkbox
+     *
+     * @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, childrenOnly = true) {
+      this.$refs.scaffoldTreeControls.setRegionCheckboxDisabled(region, flag, childrenOnly);
+    },
     /**
      * @public
      * Function to toggle on/off overlay help.
@@ -2990,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";
@@ -3256,7 +3314,7 @@ export default {
   transition: all 1s ease;
 
   &.open {
-    left: 322px;
+    left: 302px;
   }
 
   &.close {

package/src/components/TextureSlidesControls.vue

@@ -1,6 +1,64 @@
 <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
+        </el-col>
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="brightness"
+            class="my-slider"
+            :step="0.01"
+            :min="-1"
+            :max="1"
+            :show-tooltip="false"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
+          <el-input-number
+            v-model="brightness"
+            :step="0.01"
+            :min="-1"
+            :max="1"
+            :controls="false"
+            class="input-box number-input"
+          />
+        </el-col>
+      </el-row>
+      <el-row class="slide-row">
+        <el-col :offset="0" :span="8">
+          Contrast
+        </el-col>
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="contrast"
+            class="my-slider"
+            :step="0.01"
+            :min="0"
+            :max="10"
+            :show-tooltip="false"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
+          <el-input-number
+            v-model="contrast"
+            :step="0.01"
+            :min="0"
+            :max="10"
+            :controls="false"
+            class="input-box number-input"
+          />
+        </el-col>
+      </el-row>
+      <el-divider />
       <el-row v-for="(slide, index) in settings" :key="slide.id" class="slide-row">
         <el-col :offset="0" :span="6">
           <el-select
@@ -23,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"
@@ -33,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"
@@ -68,8 +127,10 @@ import {
   Plus as ElIconPlus,
 } from '@element-plus/icons-vue'
 import {
+  ElCheckbox as Checkbox,
   ElCol as Col,
   ElContainer as Container,
+  ElDivider as Divider,
   ElFooter as Footer,
   ElIcon as Icon,
   ElInputNumber as InputNumber,
@@ -87,8 +148,10 @@ import { markRaw } from 'vue';
 export default {
   name: "TextureSlidesControls",
   components: {
+    Checkbox,
     Col,
     Container,
+    Divider,
     Footer,
     Icon,
     InputNumber,
@@ -102,6 +165,9 @@ export default {
   },
   data: function () {
     return {
+      brightness: 0.0,
+      contrast: 1.0,
+      discardAlpha: true,
       settings: [],
       directions: [
         {
@@ -120,14 +186,46 @@ export default {
       zincObject: undefined,
     };
   },
+  watch: {
+    brightness: {
+      handler: function (value) {
+        if (this.zincObject) {
+          this.zincObject.setBrightness(value);
+        }
+      },
+      immediate: false,
+    },
+    contrast: {
+      handler: function (value) {
+        if (this.zincObject) {
+          this.zincObject.setContrast(value);
+        }
+      },
+      immediate: false,
+    },
+    discardAlpha: {
+      handler: function (value) {
+        if (this.zincObject) {
+          this.zincObject.discardAlphaPixel(value);
+        }
+      },
+      immediate: false,
+    }
+  },
   methods: {
     setObject: function (object) {
       if (object.isTextureSlides) {
         this.zincObject = markRaw(object);
         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 () {
@@ -168,6 +266,10 @@ export default {
   direction:ltr;
 }
 
+:deep(.el-divider--horizontal) {
+  margin: 8px 0;
+}
+
 .slides-block {
   direction:rtl;
   pointer-events: auto;
@@ -195,7 +297,7 @@ export default {
 
 .t-slides-container {
   width: 250px;
-  height: 150px;
+  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,14 +8,15 @@ 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']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     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;