partials/GridEditor.vue

@@ -75,7 +75,7 @@
           @dragstart="event => {handleCellDragStart(event, annotation)}",
           @dragend="event => {handleCellDragEnd(event, annotation)}",
           @contextmenu="handleCellContextMenu",
-          :style="getAnnotationStyle(annotation)",
+          :style="getCellStyle(annotation)",
           :class="getAnnotationClasses(annotation._uuid, 'cell-item')",
           :key="`cell-${index}`")
 
@@ -125,12 +125,12 @@
         //----------------------------------------------------------------------------------------------- temporary cell
         //------------------------------------------------------------------------------------------------------ desktop
         template(v-for="(tmpCell, index) in tmpObjects")
-          .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
+          .cell-item.cell-item-tmp(:style="getCellStyle(tmpCell)", :key="`cell-tmp-${index}`")
             cell(:cell="tmpCell")
 
         //------------------------------------------------------------------------------------------------------- mobile
         template(v-if="mobileTempCell.show && cachedNewCell")
-          .cell-item.cell-item-tmp-mobile(:style="mobileTempCellStyle(mobileTempCell)")
+          .cell-item.cell-item-tmp-mobile(:style="getCellStyle(mobileTempCell)")
 
         //------------------------------------------------------------------------------------------------------ handler
         //--------------------------------------------------------------------------------------------------------- move
@@ -174,7 +174,7 @@
 
       // ---------------------------------------------------------------------------------------------------------------
       template(v-else)
-        .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
+        .cell-item(:style="getCellStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
           div.cell-item-resize-handle(
           draggable="true",
           @dragstart="event => {handleGridResizerDragStart(event)}",
@@ -1046,21 +1046,29 @@
           }
         }
       },
-      mobileTempCellStyle (obj) {
-        return {
-          'grid-column-start': obj.x,
-          'grid-column-end': `span ${obj.width}`,
-          'grid-row-start': obj.y,
-          'grid-row-end': `span ${obj.height}`
+      getCellStyle (obj) {
+        let x, y, w, h
+
+        // ----- existing cell
+        if (obj.id) {
+          const parsed = obj.target.selector.parse()
+          x = parsed.xywh[0]
+          y = parsed.xywh[1]
+          w = parsed.xywh[2]
+          h = parsed.xywh[3]
+        }
+        // ----- temp cell
+        else {
+          x = obj.x
+          y = obj.y
+          w = obj.width
+          h = obj.height
         }
-      },
-      getAnnotationStyle (annotation) {
-        const parsed = annotation.target.selector.parse()
         return {
-          'grid-column-start': parsed.xywh[0],
-          'grid-column-end': `span ${parsed.xywh[2]}`,
-          'grid-row-start': parsed.xywh[1],
-          'grid-row-end': `span ${parsed.xywh[3]}`
+          'grid-column-start': x,
+          'grid-column-end': `span ${w}`,
+          'grid-row-start': y,
+          'grid-row-end': `span ${h}`
         }
       },
       getAnnotationClasses (uuid, which) {