@abi-software/map-utilities 1.7.8-beta.1 → 1.7.8-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.7.8-beta.1",
+  "version": "1.7.8-beta.3",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/Tooltip/CreateTooltipContent.vue

@@ -4,7 +4,8 @@
       <div>{{ dialogTitle }}</div>
     </el-header>
     <el-main class="slides-block">
-      <span class="create-text" v-if="createData.editingIndex === -1 && targetRegion">
+      <span class="create-text"
+        v-if="creating && targetRegion">
         {{ `Primitives will be created in the ${targetRegion} region` }}
       </span>
       <el-row class="row" v-show="showPoint">
@@ -46,6 +47,7 @@
         <el-col :offset="0" :span="16">
           <el-autocomplete
             class="autocomplete-box"
+            :disabled="createData.editingIndex > -1 || createData.toBeDeleted"
             :fit-input-width="true"
             v-model="group"
             :placeholder="createData.shape"
@@ -61,12 +63,18 @@
           </el-autocomplete>
         </el-col>
       </el-row>
+      <el-row v-if="!canBeConfirmed" class="row">
+        <div class="warning-message">
+          Group must be enterd before this action can be confirmed.
+        </div>
+      </el-row>
       <el-row>
         <el-col :offset="0" :span="12">
           <el-button
             type="primary"
             plain
             @click="confirm"
+            :disabled="!canBeConfirmed"
           >
             {{ confirmText }}
           </el-button>
@@ -115,12 +123,26 @@ export default {
   props: {
     createData: {
       type: Object,
+      default:{
+        drawingBox: false,
+        renaming: false,
+        toBeConfirmed: false,
+        points: [],
+        tempGroupName: undefined,
+        shape: "",
+        x: 0,
+        y: 0,
+        editingIndex: -1,
+        faceIndex: -1,
+        toBeDeleted: false,
+        regionPrefix: "__annotation"
+      },
     },
   },
   watch: {
     "createData.shape": {
       handler: function (newValue, oldValue) {
-        this.group = this.createData.tempGroupName ? this.createData.tempGroupName : newValue;
+        this.group = (this.createData.tempGroupName) ? this.createData.tempGroupName : "";
         if (oldValue !== undefined) {
           this.$emit("cancel-create");
         }
@@ -128,25 +150,49 @@ export default {
       immediate: true,
     },
     "createData.tempGroupName": {
-      handler: function (newValue, oldValue) {
-        this.group = newValue ? newValue : this.createData.shape;
+      handler: function (newValue) {
+        this.group = newValue ? newValue : "";
       },
       immediate: true,
     },
   },
   computed: {
+    canBeConfirmed: function() {
+      if (this.createData.editingIndex > -1) {
+        return true;
+      } else if (this.group) {
+        if (!this.renaming) {
+          return true;
+        } else if (this.group !== this.createData.tempGroupName) {
+          return true;
+        }
+      }
+      return false;
+    },
     confirmText: function () {
       if (this.createData.editingIndex > -1) {
         return "Edit";
+      } else if (this.createData.renaming) {
+        return "Rename";
+      } else if (this.createData.toBeDeleted) {
+        return "Delete";
       }
       return "Confirm";
     },
+    creating: function() {
+      if (this.createData.editingIndex > -1 ||
+        this.createData.renaming ||
+        this.createData.toBeDeleted) {
+        return false;
+      }
+      return true;
+    },
     dialogTitle: function() {
-      if (this.createData.editingIndex > -1) {
-        return `Edit ${this.createData.shape}`;
-      } else {
-        return `Create ${this.createData.shape}`;
+      const mode = this.confirmText;
+      if (this.createData.toBeDeleted || this.createData.renaming) {
+        return mode;
       }
+      return `${mode} ${this.createData.shape}`;
     },
     targetRegion: function() {
       if ('regionPrefix' in this.createData) {
@@ -171,6 +217,8 @@ export default {
           group: this.group,
           shape: this.createData.shape,
           editingIndex: this.createData.editingIndex,
+          renaming: this.createData.renaming,
+          deleting: this.createData.toBeDeleted,
         }
       );
       this.group = this.createData.shape;
@@ -253,6 +301,11 @@ export default {
   }
 }
 
+.warning-message {
+  font-size: 10px;
+  color: #FF8400;
+}
+
 .value {
   font-size: 12px;
 }