@abi-software/scaffoldvuer 1.0.1 → 1.1.0-beta.0

package/src/components/PointsControls.vue

@@ -0,0 +1,194 @@
+<template>
+  <el-container class="pointset-container">
+    <el-main class="slides-block">
+      <el-row>
+        <el-col :offset="0" :span="6">
+          Size:
+        </el-col>
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="size"
+            class="my-slider"
+            :step="1"
+            :min="0"
+            :max="100"
+            :show-tooltip="false"
+            @input="modifySize()"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
+          <el-input-number
+            v-model="size"
+            :step="1"
+            :min="0"
+            :max="100"
+            :controls="false"
+            class="input-box number-input"
+          />
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :offset="0" :span="16">
+          Size attenuation:
+        </el-col>
+        <el-col :offset="0" :span="5">
+          <el-select
+            :teleported="false"
+            :model-value="attenuation"
+            placeholder="Select"
+            class="input-box"
+            popper-class="viewer_dropdown"
+            @change="modifyAttenuation($event, slide)"
+          >
+            <el-option
+              v-for="item in choices"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+
+import {
+  ElCol as Col,
+  ElContainer as Container,
+  ElInputNumber as InputNumber,
+  ElMain as Main,
+  ElSelect as Select,
+  ElSlider as Slider,
+  ElOption as Option,
+} from "element-plus";
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "PointsControls",
+  components: {
+    Col,
+    Container,
+    InputNumber,
+    Main,
+    Select,
+    Slider,
+    Option,
+  },
+  data: function () {
+    return {
+      attenuation: false,
+      size: 10,
+      choices: [
+        {
+          value: true,
+          label: "On",
+        },
+        {
+          value: false,
+          label: "off",
+        },
+      ],
+    };
+  },
+  mounted: function () {
+    this._zincObject = undefined;
+  },
+  methods: {
+    setObject: function (object) {
+      if (object.isPointset) {
+        this._zincObject = object;
+        this.size = this._zincObject.morph.material.size;
+        this.attenuation = this._zincObject.morph.material.sizeAttenuation
+      } else {
+        this._zincObject = undefined;
+        this.size = 10;
+        this.attenuation = false;
+      }
+    },
+    modifyAttenuation: function(flag) {
+      this.attenuation = flag;
+      this._zincObject.setSizeAttenuation(flag);
+    },
+    modifySize: function () {
+      this._zincObject.setSize(this.size);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+.slides-block {
+  pointer-events: auto;
+  &.el-main {
+    padding: 5px;
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px #c0c4cc;
+    }
+  }
+}
+
+.my-slider {
+  top: -6px;
+  position: relative;
+}
+
+.pointset-container {
+  width: 250px;
+  height: auto;
+  overflow-y: none;
+}
+
+.input-box {
+  width: 42px;
+  border-radius: 4px;
+  border: 1px solid rgb(144, 147, 153);
+  background-color: var(--white);
+  font-weight: 500;
+  color: rgb(48, 49, 51);
+  margin-left: 8px;
+  height: 24px;
+
+  &.number-input {
+    width: 42px;
+    :deep(.el-input__wrapper) {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+
+  :deep(.el-select__wrapper) {
+    height: 24px;
+    padding: 0;
+    min-height: unset;
+  }
+
+  :deep(.el-select__selection) {
+    color: $app-primary-color;
+    height: 22px;
+    padding-left: 4px;
+    padding-right: 8px;
+    border: none;
+    font-family: "Asap", sans-serif;
+    line-height: 22px;
+  }
+
+  :deep(.el-select__suffix),
+  :deep(.el-icon) {
+    line-height: 22px;
+  }
+}
+
+</style>

package/src/components/PrimitiveControls.vue

@@ -5,14 +5,35 @@
     :class="{ open: drawerOpen, close: !drawerOpen }"
   >
     <div class="my-drawer" :class="{ open: drawerOpen, close: !drawerOpen }">
-      <opacity-controls
-        :material="material"
-        :zincObject="zincObject"
-        ref="opacityControls" />
-      <texture-slides-controls
-        v-show="isTextureSlides"
-        class="texture-controls"
-        ref="tSlidesControls" />
+      <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 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" />
+        </el-collapse-item>
+        <el-collapse-item v-show="isLines" title="Lines" name="lControls">
+          <lines-controls
+            class="lines-controls"
+            ref="linesControls"
+            :createData="createData" />
+        </el-collapse-item>
+      </el-collapse>
     </div>
     <div
       class="drawer-button"
@@ -29,9 +50,17 @@
 import { ref, shallowRef } from 'vue';
 import {
   ArrowRight as ElIconArrowRight,
-} from '@element-plus/icons-vue'
+} from '@element-plus/icons-vue';
+import {
+  ElCollapse as Collapse,
+  ElCollapseItem as CollapseItem,
+} from "element-plus";
+
 import OpacityControls from "./OpacityControls.vue";
+import PointsControls from "./PointsControls.vue";
+import LinesControls from "./LinesControls.vue";
 import TextureSlidesControls from "./TextureSlidesControls.vue";
+import TransformationControls from "./TransformationControls.vue";
 
 /**
  * A component to control the opacity of the target object.
@@ -39,13 +68,27 @@ import TextureSlidesControls from "./TextureSlidesControls.vue";
 export default {
   name: "PrimitiveControls",
   components: {
+    Collapse,
+    CollapseItem,
+    LinesControls,
     OpacityControls,
+    PointsControls,
     TextureSlidesControls,
+    TransformationControls,
+    ElIconArrowRight,
+  },
+  props: {
+    createData: {
+      type: Object,
+    },
   },
   data: function() {
     return {
+      activeName: "oControls",
       material: undefined,
       isTextureSlides: false,
+      isPointset: false,
+      isLines: false,
       drawerOpen: true,
       zincObject: undefined,
     };
@@ -59,12 +102,32 @@ export default {
       this.drawerOpen = !this.drawerOpen;
     },
     setObject: function(object) {
-      this.zincObject = shallowRef(object);
-      if (object.isTextureSlides) {
-        this.isTextureSlides = true;
-        this.$refs.tSlidesControls.setObject(object);
+      if (object) {
+        this.zincObject = shallowRef(object);
       } else {
-        this.isTextureSlides = false;
+        this.zincObject = undefined;
+      }
+      this.isPointset = false;
+      this.isTextureSlides = false;
+      this.isLines = false;
+      this.activeName  = "oControls";
+      if (object) {
+        if (object.isTextureSlides) {
+          this.isTextureSlides = true;
+          this.$refs.tSlidesControls.setObject(object);
+          this.activeName = "tsControls";
+        } else if (object.isPointset) {
+          this.isPointset = true;
+          this.$refs.pointsetControls.setObject(object);
+          this.activeName = "pControls";
+        } else if (object.isLines2) {
+          this.isLines = true;
+          this.$refs.linesControls.setObject(object);
+          this.activeName = "lControls";
+        }
+        if (!object.isTextureSlides) {
+          this.$refs.transformationControls.setObject(object);
+        }
       }
       if (object && object.getMorph()) {
         this.material = ref(object.getMorph().material);
@@ -81,7 +144,6 @@ export default {
 .primitive-controls {
   position: absolute;
   bottom: 30%;
-  pointer-events:none;
   transition: all 1s ease;
 
   &.open {
@@ -103,9 +165,17 @@ export default {
   float: right;
   max-height: 150px;
   text-align: left;
-  border: 1px solid rgb(220, 223, 230);
   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;
+    }
+  }
 }
 
 .drawer-button {

package/src/components/ScaffoldTooltip.vue

@@ -9,13 +9,20 @@
       trigger="manual"
       popper-class="tooltip-popper non-selectable"
       virtual-triggering
+      @hide="hideTriggered"
     >
       <template #default>
         <div class="tooltip-text">{{ label }}</div>
         <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
+        <CreateTooltiipContent
+          v-show="createData.toBeConfirmed"
+          :createData="createData"
+          @confirm-create="$emit('confirm-create', $event)"
+          @cancel-create="$emit('cancel-create')"
+        /> 
         <Tooltip
           class="p-tooltip"
-          v-show="annotationDisplay"
+          v-show="annotationDisplay && !createData.toBeConfirmed"
           ref="annotationTooltip"
           :annotationDisplay="true"
           :annotationEntry="annotationEntry"
@@ -28,6 +35,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import { ElPopover as Popover } from "element-plus";
+import CreateTooltiipContent from "./CreateTooltipContent.vue";
 import { Tooltip } from "@abi-software/flatmapvuer";
 import "@abi-software/flatmapvuer/dist/style.css";
 import { mapState } from 'pinia';
@@ -39,10 +47,21 @@ import { useMainStore } from "@/store/index";
 export default {
   name: "ScaffoldTooltip",
   components: {
+    CreateTooltiipContent,
     Popover,
     Tooltip,
   },
   props: {
+    createData: {
+      type: Object,
+      default: {
+        toBeConfirmed: false,
+        points: [],
+        shape: "",
+        x: 0,
+        y: 0,
+      }
+    },
     label: {
       type: String,
       default: "",
@@ -108,7 +127,12 @@ export default {
         this.display = false;
         this.annotationEntry = { };
       }
-    }
+    },
+    hideTriggered: function() {
+      if (this.createData.toBeConfirmed) {
+        this.$emit('cancel-create');
+      }
+    },
   },
   watch: {
     label: {