@abi-software/map-utilities 1.2.0-beta.3 → 1.2.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.2.0-beta.3",
+  "version": "1.2.0-beta.6",
   "files": [
     "dist/*",
     "src/*",

package/src/App.vue

@@ -244,12 +244,42 @@ function changeActive(value) {
 function changeHover(value) {
   console.log("🚀 ~ changeHover ~ value:", value);
 }
+
+/**
+ * CreatTooltipContent
+ */
+const createData = ref({
+  drawingBox: false,
+  toBeConfirmed: true,
+  points: [[1.0, 1.0, 1.0]],
+  shape: "Lines",
+  x: 0,
+  y: 0,
+  editingIndex: -1,
+  faceIndex: -1,
+  toBeDeleted: false,
+})
+function cancelCreate() {
+  console.log("🚀 ~ CreateTooltipContent : cancelCreate");
+}
+function confirmCreate(value) {
+  console.log("🚀 ~ CreateTooltipContent : confirmCreate", value);
+}
 </script>
 
 <template>
   <div ref="appRef">
     <div class="maplibregl-canvas"></div>
     <el-row>
+      <el-col>
+        <div class="annotation-popup">
+          <CreateTooltipContent
+            :createData="createData"
+            @cancel-create="cancelCreate"
+            @confirm-create="confirmCreate"
+          />
+        </div>
+      </el-col>
       <el-col>
         <h3>DrawToolbar</h3>
       </el-col>
@@ -491,6 +521,7 @@ function changeHover(value) {
       @setColour="setColour"
       @checkChanged="checkChanged"
     />
+
   </div>
 </template>
 
@@ -508,4 +539,12 @@ function changeHover(value) {
   top: calc(50% - 100px);
   left: calc(50% - 200px);
 }
+.annotation-popup{
+  margin-top: 8px;
+  width:400px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: black;
+  
+}
 </style>

package/src/components/Tooltip/CreateTooltipContent.vue

@@ -5,9 +5,7 @@
     </el-header>
     <el-main class="slides-block">
       <span class="create-text">
-        Primitives will be created in the
-        <br>
-        __annotation region
+        Primitives will be created in the __annotation region
       </span>
       <el-row class="row" v-show="showPoint">
         <el-col :offset="0" :span="8">
@@ -100,9 +98,11 @@ export default {
   },
   watch: {
     "createData.shape": {
-      handler: function (value) {
-        this.group = value;
-        this.$emit("cancel-create");
+      handler: function (newValue, oldValue) {
+        this.group = newValue;
+        if (oldValue !== undefined) {
+          this.$emit("cancel-create");
+        }
       },
       immediate: true,
     },
@@ -165,7 +165,7 @@ export default {
 
 
 .create-container {
-  width: 250px;
+  width: 100%;
   height: auto;
   border-radius: 4px;
   border: solid 1px #d8dce6;