From 4167943e2914143a01545a7a7acea69f221a2c40 Mon Sep 17 00:00:00 2001
From: leandroercoli <leandroercoli@gmail.com>
Date: Fri, 14 May 2021 17:12:20 -0300
Subject: [PATCH 1/2] feat: add shortcut for row and column insert on hovered
 area

---
 src/components/area/AreaEditor.vue | 12 +++++++++++-
 src/components/grid/GridCell.vue   |  5 +++--
 src/store.js                       | 30 ++++++++++++++++++++++++------
 src/utils/keyMonitor.js            | 10 ++++------
 4 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/components/area/AreaEditor.vue b/src/components/area/AreaEditor.vue
index 1413a14..ca69f9d 100644
--- a/src/components/area/AreaEditor.vue
+++ b/src/components/area/AreaEditor.vue
@@ -39,7 +39,8 @@
         :grayed="!isActive"
         :focused="isFocused(section)"
         @pointerdown="selectionEl.cellDown($event)"
-        @overcell="onOverCell"
+        @overgridcell="onOverGridCell"
+        @leavegridcell="onLeaveGridCell"
       />
       <GridTrack
         v-for="track in gridTracks"
@@ -354,6 +355,15 @@ function onOverCell({ row, col }) {
   overArea.value = props.area
 }
 
+function onOverGridCell({ row, col }) {
+  onOverCell({ row, col })
+  if (overArea.value.display === 'grid') overArea.value.grid.hover = { row, col }
+}
+
+function onLeaveGridCell() {
+  if (overArea.value.display === 'grid') overArea.value.grid.hover = null
+}
+
 function isFocused(section) {
   const c = currentHover.value
   return c && c.on === 'cell' && c.grid === grid.value && c.row === section.row.start && c.col === section.col.start
diff --git a/src/components/grid/GridCell.vue b/src/components/grid/GridCell.vue
index 826abf9..81b18d2 100644
--- a/src/components/grid/GridCell.vue
+++ b/src/components/grid/GridCell.vue
@@ -18,7 +18,8 @@
     }"
     class="grid-section"
     @pointerdown="$emit('pointerdown', $event)"
-    @mouseover="$emit('overcell', { col: section.col.start, row: section.row.start })"
+    @mouseover="$emit('overgridcell', { col: section.col.start, row: section.row.start })"
+    @mouseleave="$emit('leavegridcell')"
   />
 </template>
 
@@ -71,7 +72,7 @@ const props = defineProps({
   grayed: { type: Boolean, default: false },
   focused: { type: Boolean, default: false },
 })
-defineEmit(['pointerdown', 'overcell'])
+defineEmit(['pointerdown', 'overgridcell', 'overgridcell'])
 
 import { computed } from 'vue'
 
diff --git a/src/store.js b/src/store.js
index 0ff0177..b99f887 100644
--- a/src/store.js
+++ b/src/store.js
@@ -129,17 +129,35 @@ export const isValidGapSize = isValidTrackSize
 
 // This should go in grid.js, we need to check again if we can use sync:pre in the history management before
 
-export function addToDimension(dimension, val) {
-  dimension.sizes.push(val)
+export function addToDimension(dimension, index, val) {
+  dimension.sizes.splice(index, 0, val)
   dimension.lineNames.push({ active: false, name: '' })
 }
 
-export function addCol(grid, colStr) {
-  addToDimension(grid.col, colStr)
+export function addCol(area, colStr) {
+  const colIndex = area.grid.hover?.col || -1
+  addToDimension(area.grid.col, colIndex, colStr)
+  if (colIndex > 0)
+    area.children.forEach((child) => {
+      const [startRow, startCol, endRow, endCol] = child.gridArea.split(' / ')
+      if (colIndex < Number(startCol))
+        child.gridArea = `${startRow} / ${Number(startCol) + 1} / ${endRow} / ${Number(endCol) + 1}`
+      else if (colIndex < Number(endCol))
+        child.gridArea = `${startRow} / ${startCol} / ${endRow} / ${Number(endCol) + 1}`
+    })
 }
 
-export function addRow(grid, rowStr) {
-  addToDimension(grid.row, rowStr)
+export function addRow(area, rowStr) {
+  const rowIndex = area.grid.hover?.row || -1
+  addToDimension(area.grid.row, rowIndex, rowStr)
+  if (rowIndex > 0)
+    area.children.forEach((child) => {
+      const [startRow, startCol, endRow, endCol] = child.gridArea.split(' / ')
+      if (rowIndex < Number(startRow))
+        child.gridArea = `${Number(startRow) + 1} / ${startCol} / ${Number(endRow) + 1} / ${endCol}`
+      else if (rowIndex < Number(endRow))
+        child.gridArea = `${startRow} / ${startCol} / ${Number(endRow) + 1} / ${endCol}`
+    })
 }
 
 function reduceLimit(l) {
diff --git a/src/utils/keyMonitor.js b/src/utils/keyMonitor.js
index 6b70083..9df5e89 100644
--- a/src/utils/keyMonitor.js
+++ b/src/utils/keyMonitor.js
@@ -4,6 +4,7 @@ import {
   canRedo,
   canUndo,
   currentArea,
+  overArea,
   deselectCurrentArea,
   mainArea,
   redo,
@@ -37,6 +38,7 @@ function ctrlMetaKeyHandler(event) {
 }
 
 function keyHandler(event) {
+  const targetArea = overArea?.value || currentArea.value
   switch (event.key.toLowerCase()) {
     case 'backspace':
     case 'delete':
@@ -50,14 +52,10 @@ function keyHandler(event) {
       }
       break
     case 'r':
-      if (currentArea?.value?.grid) {
-        addRow(currentArea.value.grid, '1fr')
-      }
+      if (targetArea.display === 'grid') addRow(targetArea, '1fr')
       break
     case 'c':
-      if (currentArea?.value?.grid) {
-        addCol(currentArea.value.grid, '1fr')
-      }
+      if (targetArea.display === 'grid') addCol(targetArea, '1fr')
       break
     case 'escape':
       if (currentArea.value !== mainArea.value) {

From 31a54e394915555406da67cd4d69e196fe5e614b Mon Sep 17 00:00:00 2001
From: leandroercoli <leandroercoli@gmail.com>
Date: Fri, 14 May 2021 18:30:17 -0300
Subject: [PATCH 2/2] fix: add rows and columns from sidebar

---
 src/components/props/AreaGridTemplateProps.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/props/AreaGridTemplateProps.vue b/src/components/props/AreaGridTemplateProps.vue
index f03ed10..90f358b 100644
--- a/src/components/props/AreaGridTemplateProps.vue
+++ b/src/components/props/AreaGridTemplateProps.vue
@@ -4,7 +4,7 @@
       <div class="items">
         <div class="items-header" title="Defines the track sizing functions of the grid columns.">
           <h2>grid-template-columns</h2>
-          <OptionsButton class="add-button" @click="addCol(grid, '1fr')">add<span>+</span></OptionsButton>
+          <OptionsButton class="add-button" @click="addCol(props.area, '1fr')">add<span>+</span></OptionsButton>
         </div>
         <div v-for="column in colsNumber" :key="column" class="area-size">
           <div
@@ -57,7 +57,7 @@
       <div class="items">
         <div class="items-header" title="Defines track sizing functions of the grid rows.">
           <h2>grid-template-rows</h2>
-          <OptionsButton class="add-button" @click="addRow(grid, '1fr')">add<span>+</span></OptionsButton>
+          <OptionsButton class="add-button" @click="addRow(props.area, '1fr')">add<span>+</span></OptionsButton>
         </div>
         <div v-for="row in rowsNumber" :key="row" class="area-size">
           <div