@abi-software/scaffoldvuer 1.21.1-beta.2 → 2.0.0

package/src/components/TextureSlidesControls.vue

@@ -2,16 +2,10 @@
   <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-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="8">Brightness</el-col>
         <el-col :offset="0" :span="10">
           <el-slider
             v-model="brightness"
@@ -34,9 +28,7 @@
         </el-col>
       </el-row>
       <el-row class="slide-row">
-        <el-col :offset="0" :span="8">
-          Contrast
-        </el-col>
+        <el-col :offset="0" :span="8">Contrast</el-col>
         <el-col :offset="0" :span="10">
           <el-slider
             v-model="contrast"
@@ -100,10 +92,7 @@
           />
         </el-col>
         <el-col :offset="0" :span="2">
-          <el-icon
-            class="delete-icon"
-            @click="removeSlide(index, slide)"
-          >
+          <el-icon class="delete-icon" @click="removeSlide(index, slide)">
             <el-icon-delete />
           </el-icon>
         </el-col>
@@ -114,52 +103,22 @@
         <el-col :span="2">
           <el-icon><el-icon-plus /></el-icon>
         </el-col>
-        <el-col :span="20"> Add a new slide </el-col>
+        <el-col :span="20">Add a new slide</el-col>
       </el-row>
     </el-footer>
   </el-container>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import {
-  Delete as ElIconDelete,
-  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,
-  ElMain as Main,
-  ElRow as Row,
-  ElSelect as Select,
-  ElSlider as Slider,
-  ElOption as Option,
-} from "element-plus";
+import { Delete as ElIconDelete, Plus as ElIconPlus } from '@element-plus/icons-vue';
 import { markRaw } from 'vue';
 
 /**
  * A component to control the opacity of the target object.
  */
 export default {
-  name: "TextureSlidesControls",
+  name: 'TextureSlidesControls',
   components: {
-    Checkbox,
-    Col,
-    Container,
-    Divider,
-    Footer,
-    Icon,
-    InputNumber,
-    Main,
-    Row,
-    Select,
-    Slider,
-    Option,
     ElIconDelete,
     ElIconPlus,
   },
@@ -171,16 +130,16 @@ export default {
       settings: [],
       directions: [
         {
-          value: "x",
-          label: "x",
+          value: 'x',
+          label: 'x',
         },
         {
-          value: "y",
-          label: "y",
+          value: 'y',
+          label: 'y',
         },
         {
-          value: "z",
-          label: "z",
+          value: 'z',
+          label: 'z',
         },
       ],
       zincObject: undefined,
@@ -210,7 +169,7 @@ export default {
         }
       },
       immediate: false,
-    }
+    },
   },
   methods: {
     setObject: function (object) {
@@ -229,11 +188,11 @@ export default {
       }
     },
     addNewSlide: function () {
-      const newSettings = { direction: "x", value: 0 };
+      const newSettings = { direction: 'x', value: 0 };
       const returnSettings = this.zincObject.createSlide(newSettings);
       this.settings.push(returnSettings);
     },
-    modifyDirection: function(direction, slide) {
+    modifyDirection: function (direction, slide) {
       if (slide) {
         slide.direction = direction;
         this.zincObject.modifySlideSettings(slide);
@@ -254,7 +213,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 .add-slides-text {
   color: $app-primary-color;
   line-height: 1;
@@ -263,7 +221,7 @@ export default {
   font-size: 12px;
   cursor: pointer;
   pointer-events: auto;
-  direction:ltr;
+  direction: ltr;
 }
 
 :deep(.el-divider--horizontal) {
@@ -271,7 +229,7 @@ export default {
 }
 
 .slides-block {
-  direction:rtl;
+  direction: rtl;
   pointer-events: auto;
   &.el-main {
     padding: 5px;
@@ -286,8 +244,8 @@ export default {
   }
 }
 
-#scroll div{
-    direction:ltr;
+#scroll div {
+  direction: ltr;
 }
 
 .my-slider {
@@ -331,7 +289,7 @@ export default {
     padding-left: 4px;
     padding-right: 8px;
     border: none;
-    font-family: "Asap", sans-serif;
+    font-family: 'Asap', sans-serif;
     line-height: 22px;
   }
 
@@ -349,6 +307,6 @@ export default {
 }
 
 .slide-row {
-  direction:ltr;
+  direction: ltr;
 }
 </style>

package/src/components/TransformationControls.vue

@@ -2,9 +2,7 @@
   <el-container class="transformation-container">
     <el-main class="slides-block">
       <el-row class="tool-row">
-        <el-col :offset="0" :span="6">
-          x:
-        </el-col>
+        <el-col :offset="0" :span="6">x:</el-col>
         <el-col :offset="0" :span="10">
           <el-slider
             v-model="x"
@@ -28,9 +26,7 @@
         </el-col>
       </el-row>
       <el-row class="tool-row">
-        <el-col :offset="0" :span="6">
-          y:
-        </el-col>
+        <el-col :offset="0" :span="6">y:</el-col>
         <el-col :offset="0" :span="10">
           <el-slider
             v-model="y"
@@ -54,9 +50,7 @@
         </el-col>
       </el-row>
       <el-row class="tool-row">
-        <el-col :offset="0" :span="6">
-          z:
-        </el-col>
+        <el-col :offset="0" :span="6">z:</el-col>
         <el-col :offset="0" :span="10">
           <el-slider
             v-model="z"
@@ -80,9 +74,7 @@
         </el-col>
       </el-row>
       <el-row class="tool-row" v-if="enableScaling">
-        <el-col :offset="0" :span="6">
-          Scale:
-        </el-col>
+        <el-col :offset="0" :span="6">Scale:</el-col>
         <el-col :offset="0" :span="10">
           <el-slider
             v-model="scale"
@@ -110,29 +102,13 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-
-import {
-  ElCol as Col,
-  ElContainer as Container,
-  ElInputNumber as InputNumber,
-  ElMain as Main,
-  ElSlider as Slider,
-} from "element-plus";
-import { markRaw } from "vue";
+import { markRaw } from 'vue';
 
 /**
  * A component to control the opacity of the target object.
  */
 export default {
-  name: "TransformationControls",
-  components: {
-    Col,
-    Container,
-    InputNumber,
-    Main,
-    Slider,
-  },
+  name: 'TransformationControls',
   inject: ['boundingDims'],
   data: function () {
     return {
@@ -143,12 +119,12 @@ export default {
       min: [0, 0, 0],
       max: [1, 1, 1],
       zincObject: undefined,
-      enableScaling: true
+      enableScaling: true,
     };
   },
   watch: {
     boundingDims: {
-      handler: function (value) {
+      handler: function (_value) {
         this.calculateMinAndMax();
       },
       immediate: true,
@@ -156,20 +132,19 @@ export default {
     },
   },
   methods: {
-    calculateMinAndMax: function() {
+    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],
             originalPos[1] - this.boundingDims.size[1],
-            originalPos[2] - this.boundingDims.size[2]
+            originalPos[2] - this.boundingDims.size[2],
           ];
           this.max = [
             originalPos[0] + this.boundingDims.size[0],
             originalPos[1] + this.boundingDims.size[1],
-            originalPos[2] + this.boundingDims.size[2]
+            originalPos[2] + this.boundingDims.size[2],
           ];
         }
       }
@@ -178,7 +153,6 @@ export default {
       if (object.isZincObject) {
         this.zincObject = markRaw(object);
         const morph = this.zincObject.getGroup();
-        const originalPos = this.zincObject.userData.originalPos;
         if (morph && morph.position) {
           this.x = morph.position.x;
           this.y = morph.position.y;
@@ -199,12 +173,12 @@ export default {
         this.scale = 1;
       }
     },
-    modifyPosition: function() {
+    modifyPosition: function () {
       if (this.zincObject) {
         this.zincObject.setPosition(this.x, this.y, this.z);
       }
     },
-    modifyScale: function() {
+    modifyScale: function () {
       this.zincObject.setScaleAll(this.scale);
     },
   },
@@ -263,9 +237,8 @@ export default {
 }
 
 .tool-row {
-  align-items:center;
+  align-items: center;
   text-align: center;
-  padding-top:4px;
+  padding-top: 4px;
 }
-
 </style>

package/src/components/index.js

@@ -1,6 +1,6 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import ScaffoldVuer from "./ScaffoldVuer.vue";
-import "../assets/fonts.scss";
+import ScaffoldVuer from './ScaffoldVuer.vue';
+import '../assets/fonts.scss';
 
 export { ScaffoldVuer };

package/src/main.js

@@ -1,30 +1,28 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import * as VueRouter from 'vue-router'
-import App from './App.vue'
-import { useMainStore } from '@/store/index'
-import './assets/fonts.scss'
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import * as VueRouter from 'vue-router';
+import App from './App.vue';
+import { useMainStore } from '@/store/index';
+import './assets/fonts.scss';
 
-const routes = [
-  { path: '/'},
-]
+const routes = [{ path: '/' }];
 
-const app = createApp(App)
+const app = createApp(App);
 
 const router = VueRouter.createRouter({
   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
   history: VueRouter.createWebHashHistory(),
   routes,
-})
-app.use(router)
-const pinia = createPinia()
+});
+app.use(router);
+const pinia = createPinia();
 
-app.use(pinia)
+app.use(pinia);
 
-const mainStore = useMainStore()
-const token = document.cookie.split("; ").find((row) => row.startsWith("user-token"))
+const mainStore = useMainStore();
+const token = document.cookie.split('; ').find((row) => row.startsWith('user-token'));
 if (mainStore && token) {
-  mainStore.setUserToken(token.split("=")[1])
+  mainStore.setUserToken(token.split('=')[1]);
 }
 
-app.mount('#app')
+app.mount('#app');

package/src/scripts/Annotation.js

@@ -1,7 +1,7 @@
-const Annotation = function() {
-  this.type = "anatomical";
+const Annotation = function () {
+  this.type = 'anatomical';
   this.data = undefined;
   this.isAnnotation = true;
-}
+};
 
 export { Annotation as default };

package/src/scripts/BaseModule.js

@@ -1,67 +1,63 @@
 const MODULE_CHANGE = { ALL: 0, DESTROYED: 1, NAME_CHANGED: 2, SETTINGS_CHANGED: 3 };
 
-const BaseModule = function() {
-  this.typeName = "Base Module";
-  this.instanceName = "default";
+const BaseModule = function () {
+  this.typeName = 'Base Module';
+  this.instanceName = 'default';
   this.onChangedCallbacks = [];
   /**  Notifier handle for informing other modules of any changes **/
   this.eventNotifiers = [];
-}
+};
 
-BaseModule.prototype.setName = function(name) {
+BaseModule.prototype.setName = function (name) {
   if (name && this.instanceName !== name) {
     this.instanceName = name;
     const callbackArray = this.onChangedCallbacks.slice();
     for (let i = 0; i < callbackArray.length; i++) {
-      callbackArray[i]( this, MODULE_CHANGE.NAME_CHANGED );
+      callbackArray[i](this, MODULE_CHANGE.NAME_CHANGED);
     }
   }
-}
+};
 
-BaseModule.prototype.settingsChanged = function() {
-	const callbackArray = this.onChangedCallbacks.slice();
+BaseModule.prototype.settingsChanged = function () {
+  const callbackArray = this.onChangedCallbacks.slice();
   for (let i = 0; i < callbackArray.length; i++) {
-    callbackArray[i]( this, MODULE_CHANGE.SETTINGS_CHANGED );
+    callbackArray[i](this, MODULE_CHANGE.SETTINGS_CHANGED);
   }
-}
+};
 
-BaseModule.prototype.publishChanges = function(annotations, eventType, zincObjects) {
+BaseModule.prototype.publishChanges = function (annotations, eventType, zincObjects) {
   for (let i = 0; i < this.eventNotifiers.length; i++) {
     this.eventNotifiers[i].publish(this, eventType, annotations, zincObjects);
   }
-}
+};
 
-BaseModule.prototype.getName = function() {
+BaseModule.prototype.getName = function () {
   return this.instanceName;
-}
+};
 
-BaseModule.prototype.destroy = function() {
+BaseModule.prototype.destroy = function () {
   //Make a temorary copy as the array may be altered during the loop
   const callbackArray = this.onChangedCallbacks.slice();
   for (let i = 0; i < callbackArray.length; i++) {
-    callbackArray[i]( this, MODULE_CHANGE.DESTROYED );
+    callbackArray[i](this, MODULE_CHANGE.DESTROYED);
   }
 
   delete this;
-}
+};
 
-BaseModule.prototype.addChangedCallback = function(callback) {
-  if (this.onChangedCallbacks.includes(callback) == false)
-    this.onChangedCallbacks.push(callback);
-}
+BaseModule.prototype.addChangedCallback = function (callback) {
+  if (this.onChangedCallbacks.includes(callback) == false) this.onChangedCallbacks.push(callback);
+};
 
-BaseModule.prototype.removeChangedCallback = function(callback) {
+BaseModule.prototype.removeChangedCallback = function (callback) {
   const index = this.onChangedCallbacks.indexOf(callback);
   if (index > -1) {
     this.onChangedCallbacks.splice(index, 1);
   }
-}
+};
 
-BaseModule.prototype.addNotifier = function(eventNotifier) {
+BaseModule.prototype.addNotifier = function (eventNotifier) {
   this.eventNotifiers.push(eventNotifier);
-}
+};
 
-export {
-  BaseModule,
-  MODULE_CHANGE
-}
+export { BaseModule, MODULE_CHANGE };

package/src/scripts/EventNotifier.js

@@ -1,69 +1,63 @@
 const EVENT_TYPE = { ALL: 0, SELECTED: 1, HIGHLIGHTED: 2, MOVE: 3 };
 
-const SelectionEvent = function(eventTypeIn, identifiersIn, zincObjects) {
+const SelectionEvent = function (eventTypeIn, identifiersIn, zincObjects) {
   this.eventType = eventTypeIn;
   this.identifiers = identifiersIn;
   this.zincObjects = zincObjects;
-}
+};
 
-const returnFullID = function(sourceId) {
-  //return full annotations with all different name
-}
-  
-const Subscription = function(subscriberIn, callbackIn, eventType) {
+const Subscription = function (subscriberIn, callbackIn, eventType) {
   this.targetedID = [];
   const subscriber = subscriberIn;
   const callback = callbackIn;
   this.targetEventType = eventType;
   const _this = this;
 
-  if (eventType === undefined)
-    this.targetEventType = EVENT_TYPE.ALL;
-  
-  this.getEventType = function() {
+  if (eventType === undefined) this.targetEventType = EVENT_TYPE.ALL;
+
+  this.getEventType = function () {
     return eventType;
-  }
-  
-  this.notify = function(source, eventType, ids, zincObjects) {
-    if (source !== subscriber && (_this.targetEventType ===  EVENT_TYPE.ALL ||
-        _this.targetEventType === eventType)) {
+  };
+
+  this.notify = function (source, eventType, ids, zincObjects) {
+    if (
+      source !== subscriber &&
+      (_this.targetEventType === EVENT_TYPE.ALL || _this.targetEventType === eventType)
+    ) {
       //should support different type of id e.g lyph, name, fmas...
       //need a function that finds all relavant ids
       const event = new SelectionEvent(eventType, ids, zincObjects);
       callback(event);
     }
-  }
-}
+  };
+};
 
-const EventNotifier = function() {
+const EventNotifier = function () {
   const subscriptions = [];
-  
-  this.publish = function(source, eventType, id, zincObjects) {
-    for (let i = 0; i < subscriptions.length;i++) {
+
+  this.publish = function (source, eventType, id, zincObjects) {
+    for (let i = 0; i < subscriptions.length; i++) {
       subscriptions[i].notify(source, eventType, id, zincObjects);
     }
-  }
-  
-  this.subscribe = function(subscriber, callbackFunction, eventType) {
-    if (typeof callbackFunction === "function") {
+  };
+
+  this.subscribe = function (subscriber, callbackFunction, eventType) {
+    if (typeof callbackFunction === 'function') {
       const subscription = new Subscription(subscriber, callbackFunction, eventType);
       subscriptions.push(subscription);
       return subscription;
     }
     return undefined;
-  }
-  
-  this.unsubscribe = function(subscription) {
-    for (let i = 0; i < subscriptions.length;i++) {
+  };
+
+  this.unsubscribe = function (subscription) {
+    for (let i = 0; i < subscriptions.length; i++) {
       if (subscription === subscriptions[i]) {
         subscriptions.splice(i, 1);
         return;
       }
     }
-  }
-}  
-
-export {
-  EventNotifier,
-  EVENT_TYPE,
+  };
 };
+
+export { EventNotifier, EVENT_TYPE };