@abi-software/scaffoldvuer 1.2.1 → 1.3.0-beta.0

package/src/components/LinesControls.vue

@@ -5,7 +5,7 @@
         <el-col :offset="0" :span="6">
           Width:
         </el-col>
-        <el-col :offset="0" :span="10">
+        <el-col :offset="0" :span="12">
           <el-slider
             v-model="width"
             class="my-slider"
@@ -16,7 +16,7 @@
             @input="modifyWidth"
           />
         </el-col>
-        <el-col :offset="0" :span="6">
+        <el-col :offset="0" :span="4">
           <el-input-number
             v-model="width"
             :step="1"
@@ -27,24 +27,66 @@
           />
         </el-col>
       </el-row>
-      <el-row v-if="createData.faceIndex > -1">
+      <template v-if="currentIndex > -1 && distance > 0">
         <el-col :offset="0" :span="4">
-          <el-button :icon="ElIconArrowLeft" @click="onMoveClick(-unit)"/>
-        </el-col>
-        <el-col :offset="3" :span="3">
-          Move
-        </el-col>
-        <el-col :offset="0" :span="7">
-          <el-input-number
-            v-model="unit"
-            :controls="false"
-            class="input-box number-input"
+          <el-button
+            size='small'
+            :disabled="currentIndex === 0"
+            :icon="ElIconArrowLeft"
+            @click="changeIndex(false)"
           />
         </el-col>
+        <el-col :offset="4" :span="9">
+          Editing Line {{ currentIndex + 1}}
+        </el-col>
         <el-col :offset="2" :span="2">
-          <el-button :icon="ElIconArrowRight" @click="onMoveClick(unit)"/>
+          <el-button
+            size='small'
+            :icon="ElIconArrowRight"
+            @click="changeIndex(true)"
+          />
         </el-col>
-      </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Move:
+          </el-col>
+          <el-col :offset="0" :span="16">
+            <el-slider
+              v-model="adjust"
+              :step="0.01"
+              :min="-3"
+              :max="3"
+              :show-tooltip="false"
+              @input="onMoveSliding()"
+              @change="reset()"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Length:
+          </el-col>
+          <el-col :offset="0" :span="10">
+            <el-slider
+              v-model="lengthScale"
+              :step="0.01"
+              :min="-1"
+              :max="1"
+              :show-tooltip="false"
+              @input="onLengthSliding()"
+              @change="reset()"
+            />
+          </el-col>
+          <el-col :offset="0" :span="6">
+            <el-input-number
+              v-model="newDistance"
+              :controls="false"
+              class="input-box number-input"
+              @change="onLengthInput"
+            />
+          </el-col>
+        </el-row>
+      </template>
     </el-main>
   </el-container>
 </template>
@@ -55,7 +97,8 @@
 // limited support to line width
 import { shallowRef } from 'vue';
 import {
-  moveLine,
+  getLineDistance,
+  moveAndExtendLine,
 } from "../scripts/Utilities.js";
 import {
   ElButton as Button,
@@ -63,15 +106,12 @@ import {
   ElContainer as Container,
   ElInputNumber as InputNumber,
   ElMain as Main,
-  ElSelect as Select,
   ElSlider as Slider,
-  ElOption as Option,
 } from "element-plus";
-import {
+import{
   ArrowLeft as ElIconArrowLeft,
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
-
 /**
  * A component to control the opacity of the target object.
  */
@@ -83,9 +123,7 @@ export default {
     Container,
     InputNumber,
     Main,
-    Select,
     Slider,
-    Option,
     ElIconArrowLeft,
     ElIconArrowRight,
   },
@@ -96,23 +134,85 @@ export default {
   },
   data: function () {
     return {
+      adjust: 0,
+      pAdjust: 0,
+      lengthScale: 0,
+      newDistance: 0, 
       width: 1,
-      unit: 0.1,
+      currentIndex: 0,
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
+      edited: false,
     };
   },
+  watch: {
+    "createData.faceIndex": {
+      handler: function (value) {
+        if (this._zincObject?.isLines2) {
+          this.currentIndex = value;
+          this.distance = getLineDistance(this._zincObject, this.currentIndex);
+        }
+      },
+      immediate: true,
+    },
+  },
   mounted: function () {
     this._zincObject = undefined;
   },
   methods: {
-    onMoveClick: function(unit) {
-      moveLine(this._zincObject, this.createData.faceIndex, unit);
+    changeIndex: function(increment) {
+      if (increment) {
+        const dist = getLineDistance(this._zincObject, this.currentIndex + 1);
+        if (dist > 0) {
+          this.currentIndex++;
+          this.reset();
+        }
+      } else {
+        this.currentIndex--;
+        this.reset();
+      }
+    },
+    onLengthInput: function() {
+      if (this.newDistance !== 0) {
+        this.distance = this.newDistance;
+        this.edited = moveAndExtendLine(
+          this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+      } else {
+        this.newDistance = this.distance;
+      }
+    },
+    onLengthSliding: function() {
+      this.newDistance = Math.pow(10, this.lengthScale) * this.distance;
+      this.edited = moveAndExtendLine(
+        this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+    },
+    onMoveSliding: function() {
+      const diff = (this.adjust - this.pAdjust) * this.distance;
+      this.edited =  moveAndExtendLine(
+        this._zincObject, this.currentIndex, diff, false) || this.edited;
+      this.pAdjust = this.adjust;
+    },
+    reset: function() {
+      this.adjust = 0;
+      this.pAdjust = 0;
+      this.lengthScale = 0;
+      this.distance = getLineDistance(this._zincObject, this.currentIndex);
+      this.newDistance = this.distance;
+      if (this.edited) {
+        this.$emit("primitivesUpdated", this._zincObject);
+        this.edited = false;
+      }
     },
     setObject: function (object) {
-      if (object.isLines) {
+      this.currentIndex = -1;
+      this.distance = 0;
+      if (object.isLines2) {
         this._zincObject = object;
         this.width = this._zincObject.getMorph().material.linewidth;
+        if (object.isEditable) {
+          this.currentIndex = 0;
+          this.distance = getLineDistance(object, this.currentIndex);
+        }
       } else {
         this._zincObject = undefined;
         this.linewidth = 10;

package/src/components/PointsControls.vue

@@ -49,13 +49,86 @@
           </el-select>
         </el-col>
       </el-row>
+      <template v-if="currentIndex > -1">
+        <el-row>
+          <el-col :offset="0" :span="4">
+            <el-button
+              size='small'
+              :disabled="currentIndex === 0"
+              :icon="ElIconArrowLeft"
+              @click="changeIndex(false)"
+            />
+          </el-col>
+          <el-col :offset="4" :span="9">
+            Editing Point {{ currentIndex + 1}}
+          </el-col>
+          <el-col :offset="2" :span="2">
+            <el-button
+              size='small'
+              :icon="ElIconArrowRight"
+              @click="changeIndex(true)"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            x:
+          </el-col>
+          <el-col :offset="0" :span="16">
+            <el-slider
+              v-model="translation[0]"
+              :step="0.01"
+              :min="min[0]"
+              :max="max[0]"
+              :show-tooltip="false"
+              @input="onMoveSliding()"
+              @change="reset()"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            y:
+          </el-col>
+          <el-col :offset="0" :span="16">
+            <el-slider
+              v-model="translation[1]"
+              :step="0.01"
+              :min="min[1]"
+              :max="max[1]"
+              :show-tooltip="false"
+              @input="onMoveSliding()"
+              @change="reset()"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            z:
+          </el-col>
+          <el-col :offset="0" :span="16">
+            <el-slider
+              v-model="translation[2]"
+              :step="0.01"
+              :min="min[2]"
+              :max="max[2]"
+              :show-tooltip="false"
+              @input="onMoveSliding()"
+              @change="reset()"
+            />
+          </el-col>
+        </el-row>
+      </template>
     </el-main>
   </el-container>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-
+import { shallowRef } from 'vue';
+import {
+  movePoint,
+} from "../scripts/Utilities.js";
 import {
   ElCol as Col,
   ElContainer as Container,
@@ -65,6 +138,10 @@ import {
   ElSlider as Slider,
   ElOption as Option,
 } from "element-plus";
+import{
+  ArrowLeft as ElIconArrowLeft,
+  ArrowRight as ElIconArrowRight,
+} from '@element-plus/icons-vue';
 
 /**
  * A component to control the opacity of the target object.
@@ -79,7 +156,10 @@ export default {
     Select,
     Slider,
     Option,
+    ElIconArrowLeft,
+    ElIconArrowRight,
   },
+  inject: ['boundingDims'],
   data: function () {
     return {
       attenuation: false,
@@ -94,17 +174,80 @@ export default {
           label: "off",
         },
       ],
+      min: [0, 0, 0],
+      max: [1, 1, 1],
+      translation: [0, 0, 0],
+      pTranslation: [0, 0, 0],
+      currentIndex: -1,
+      ElIconArrowLeft: shallowRef(ElIconArrowLeft),
+      ElIconArrowRight: shallowRef(ElIconArrowRight),
+      edited: false,
     };
   },
   mounted: function () {
     this._zincObject = undefined;
   },
+  watch: {
+    boundingDims: {
+      handler: function (value) {
+        const size = value.size;
+        this.min = [
+          -size[0] / 2,
+          -size[1] / 2,
+          -size[2] / 2,
+        ];
+        this.max = [
+          size[0] / 2,
+          size[1] / 2,
+          size[2] / 2,
+        ];
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   methods: {
+    changeIndex: function(increment) {
+      if (increment) {
+        if (this._zincObject.drawRange > this.currentIndex + 1) {
+          this.currentIndex++;
+          this.reset();
+        }
+      } else {
+        this.currentIndex--;
+        this.reset();
+      }
+    },
+    onMoveSliding: function() {
+      const diff = [
+        this.translation[0] - this.pTranslation[0],
+        this.translation[1] - this.pTranslation[1],
+        this.translation[2] - this.pTranslation[2],
+      ];
+      this.edited = movePoint(this._zincObject, this.currentIndex, diff) || this.edited;
+      for (let i = 0; i < 3; i++) {
+        this.pTranslation[i] = this.translation[i];
+      }
+    },
+    reset: function() {
+      this.translation = [0, 0, 0];
+      this.pTranslation = [0, 0, 0];
+      if (this.edited) {
+        this.$emit("primitivesUpdated", this._zincObject);
+        this.edited = false;
+      }
+    },
     setObject: function (object) {
+      this.currentIndex = -1;
       if (object.isPointset) {
         this._zincObject = object;
         this.size = this._zincObject.morph.material.size;
-        this.attenuation = this._zincObject.morph.material.sizeAttenuation
+        this.attenuation = this._zincObject.morph.material.sizeAttenuation;
+        if (object.isEditable) {
+          if (this._zincObject.drawRange > 0) {
+            this.currentIndex = 0;
+          }
+        }
       } else {
         this._zincObject = undefined;
         this.size = 10;

package/src/components/PrimitiveControls.vue

@@ -12,7 +12,7 @@
             :zincObject="zincObject"
             ref="opacityControls" />
         </el-collapse-item>
-        <el-collapse-item title="Transformation" name="trControls">
+        <el-collapse-item v-show="!isEditable" title="Transformation" name="trControls">
           <transformation-controls
             class="transformation-controls"
             ref="transformationControls" />
@@ -25,13 +25,17 @@
         <el-collapse-item v-show="isPointset" title="Points" name="pControls">
           <points-controls
             class="pointset-controls"
-            ref="pointsetControls" />
+            ref="pointsetControls"
+            @primitivesUpdated="$emit('primitivesUpdated', $event)"
+          />
         </el-collapse-item>
         <el-collapse-item v-show="isLines" title="Lines" name="lControls">
           <lines-controls
             class="lines-controls"
             ref="linesControls"
-            :createData="createData" />
+            :createData="createData"
+            @primitivesUpdated="$emit('primitivesUpdated', $event)"
+          />
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -91,6 +95,7 @@ export default {
       isLines: false,
       drawerOpen: true,
       zincObject: undefined,
+      isEditable: false,
     };
   },
   methods: {
@@ -107,10 +112,11 @@ export default {
       } else {
         this.zincObject = undefined;
       }
+      this.isEditable = this.zincObject?.isEditable ? true : false;
       this.isPointset = false;
       this.isTextureSlides = false;
       this.isLines = false;
-      this.activeName  = "oControls";
+      this.activeName  = "trControls";
       if (object) {
         if (object.isTextureSlides) {
           this.isTextureSlides = true;

package/src/components/ScaffoldTooltip.vue

@@ -19,7 +19,7 @@
           :createData="createData"
           @confirm-create="$emit('confirm-create', $event)"
           @cancel-create="$emit('cancel-create')"
-        /> 
+        />
         <Tooltip
           class="p-tooltip"
           v-show="annotationDisplay && !createData.toBeConfirmed"
@@ -27,19 +27,50 @@
           :annotationDisplay="true"
           :annotationEntry="annotationEntry"
         />
+        <div v-if="createData.toBeDeleted" class="delete-container">
+          <el-row>
+            <el-col :span="10">Delete this feature?</el-col>
+            <el-col :span="7">
+              <el-button
+                class="delete-button"
+                :icon="ElIconDelete"
+                @click="$emit('confirm-delete')"
+                >
+                  Delete
+              </el-button>
+            </el-col>
+            <el-col :span="6">
+              <el-button
+                class="delete-button"
+                @click="$emit('cancel-create')"
+                >
+                  Dismiss
+              </el-button>
+            </el-col>
+          </el-row>
+        </div>
       </template>
     </el-popover>
   </div>
 </template>
 
 <script>
+import { shallowRef } from 'vue';
 /* eslint-disable no-alert, no-console */
-import { ElPopover as Popover } from "element-plus";
+import {
+  ElCol as Col,
+  ElIcon as Icon,
+  ElPopover as Popover,
+  ElRow as Row,
+} from "element-plus";
+import {
+  Delete as ElIconDelete,
+} from '@element-plus/icons-vue'
 import CreateTooltiipContent from "./CreateTooltipContent.vue";
-import { Tooltip } from "@abi-software/flatmapvuer";
-import "@abi-software/flatmapvuer/dist/style.css";
 import { mapState } from 'pinia';
 import { useMainStore } from "@/store/index";
+import { Tooltip } from '@abi-software/map-utilities'
+import '@abi-software/map-utilities/dist/style.css'
 
 /**
  * A component to control the opacity of the target object.
@@ -47,8 +78,12 @@ import { useMainStore } from "@/store/index";
 export default {
   name: "ScaffoldTooltip",
   components: {
+    Col,
     CreateTooltiipContent,
+    ElIconDelete,
+    Icon,
     Popover,
+    Row,
     Tooltip,
   },
   props: {
@@ -96,7 +131,8 @@ export default {
   data: function () {
     return {
       display: false,
-      annotationEntry: { }
+      annotationEntry: { },
+      ElIconDelete: shallowRef(ElIconDelete),
     };
   },
   computed: {
@@ -206,5 +242,23 @@ export default {
       display:none;
     }
   }
+
+  .delete-container {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    font-size: 14px;
+    .delete-button {
+      pointer-events: auto;
+      cursor: pointer;
+      margin-left:8px;
+      padding-left: 8px;
+      padding-right: 8px;
+      height: 24px !important;
+      color: $app-primary-color;
+      &:hover {
+        background-color: var(--el-color-primary-light-9);
+      }
+    }
+  }
 }
 </style>