From 0d760f23fb26356bdea822ada95ce6bb18623b1f Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 25 May 2020 14:58:28 -0700
Subject: [PATCH 01/29] Separate calcState and statsState

---
 src/components/Panel.jsx | 7 +++----
 src/scripts/calc.js      | 1 -
 src/scripts/draw.js      | 4 ++--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 5229c53..e351702 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -50,7 +50,6 @@ const Panel = ({ selectionAmount, validSelection }) => {
     cols,
     colWidth,
     floorVals,
-    gridHeight,
     gutterWidth,
     topMargin,
     rightMargin,
@@ -144,7 +143,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
       // Calculate grid height
       const calcGridHeightResult = calcGridHeight(calcState)
-      setGridHeight(calcState.gridHeight)
+      setGridHeight(calcGridHeightResult.gridHeight)
       setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
       setIsCalcReady(true)
     }
@@ -198,7 +197,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
       // Calculate grid height
       const calcGridHeightResult = calcGridHeight(calcState)
-      setGridHeight(calcState.gridHeight)
+      setGridHeight(calcGridHeightResult.gridHeight)
       setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
       setIsCalcReady(true)
     }
@@ -540,7 +539,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             id="create"
             onClick={() => {
               if (isCalcReady) {
-                draw(calcState, { drawFields, drawGridlines })
+                draw(calcState, { gridHeight }, { drawFields, drawGridlines })
               }
             }}
             disabled={!isCalcReady || (!drawFields && !drawGridlines)}
diff --git a/src/scripts/calc.js b/src/scripts/calc.js
index 656f532..1f313b9 100644
--- a/src/scripts/calc.js
+++ b/src/scripts/calc.js
@@ -261,7 +261,6 @@ const calcGridHeight = (calcState, currResult = { errs: [] }) => {
 
   currResult.topBottomMarginsSum = calcState.topMargin + calcState.bottomMargin
   currResult.gridHeight = canvasHeight - currResult.topBottomMarginsSum
-  calcState.gridHeight = currResult.gridHeight
 
   return currResult
 }
diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index edd96b5..87c85d5 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -7,7 +7,7 @@ const { group } = require('commands')
  * @param {Object} calcState State for calculations. Should be validated beforehand.
  * @param {Object} drawOptions Options to control what should be drawn
  */
-const draw = (calcState, drawOptions) => {
+const draw = (calcState, statsState, drawOptions) => {
   editDocument((selection) => {
     const currSelection = selection.items[0]
     const {
@@ -15,11 +15,11 @@ const draw = (calcState, drawOptions) => {
       canvasHeight,
       cols,
       colWidth,
-      gridHeight,
       gutterWidth,
       topMargin,
       leftMargin,
     } = calcState
+    const { gridHeight } = statsState
     const { drawFields, drawGridlines } = drawOptions
     const newItems = []
     const colFills = []

From 80899530a898ba6574011ce7ecc7bf1b7e091d50 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 25 May 2020 15:09:36 -0700
Subject: [PATCH 02/29] Add create columns flag

---
 src/components/Panel.jsx | 21 +++++++++++++++++----
 src/style.css            |  4 ++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index e351702..16b3805 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -24,6 +24,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
   const [boundType, setBoundType] = useState('path')
   const [canvasWidth, setCanvasWidth] = useState('')
   const [canvasHeight, setCanvasHeight] = useState('')
+
+  const [createCols, setCreateCols] = useState(true)
   const [cols, setCols] = useState('')
   const [gutterWidth, setGutterWidth] = useState(0)
   const [colWidth, setColWidth] = useState('')
@@ -338,7 +340,6 @@ const Panel = ({ selectionAmount, validSelection }) => {
             <option value="draw">Draw</option>
           </select>
         </label>
-        <hr />
         <label className="text-input-combo">
           <span>Canvas Size</span>
           <div className="multi-inputs">
@@ -372,7 +373,19 @@ const Panel = ({ selectionAmount, validSelection }) => {
             />
           </div>
         </label>
+        <hr />
         <label className="text-input-combo">
+          <span>Create Columns</span>
+          <input
+            type="checkbox"
+            checked={createCols}
+            onChange={(evt) => {
+              setCreateCols(evt.target.checked)
+            }}
+            uxp-quiet="true"
+          />
+        </label>
+        <label className={createCols ? 'text-input-combo' : 'hide'}>
           <span>Columns</span>
           <input
             type="number"
@@ -388,7 +401,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             uxp-quiet="true"
           />
         </label>
-        <label className="text-input-combo">
+        <label className={createCols ? 'text-input-combo' : 'hide'}>
           <span>Gutter Width</span>
           <input
             type="number"
@@ -404,7 +417,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             uxp-quiet="true"
           />
         </label>
-        <label className="text-input-combo">
+        <label className={createCols ? 'text-input-combo' : 'hide'}>
           <span>Column Width</span>
           <input
             type="number"
@@ -420,7 +433,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             uxp-quiet="true"
           />
         </label>
-        <label className="text-input-combo">
+        <label className={createCols ? 'text-input-combo' : 'hide'}>
           <span>Margins</span>
           <div className="multi-inputs">
             <input
diff --git a/src/style.css b/src/style.css
index 9454204..07e3c49 100644
--- a/src/style.css
+++ b/src/style.css
@@ -77,3 +77,7 @@ input.input-lg {
   flex-grow: 1;
   justify-content: flex-end;
 }
+
+.hide {
+  display: none;
+}

From 79763daa19f4e5a27d659c3a8a018840b6be9137 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 25 May 2020 17:40:52 -0700
Subject: [PATCH 03/29] Refactor column validation, UI update, and draw code to
 potentially support row operations

---
 src/components/Panel.jsx | 286 +++++++++++++++++++++++++++++++--------
 src/scripts/draw.js      |   4 +-
 2 files changed, 229 insertions(+), 61 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 16b3805..5390034 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -2,12 +2,12 @@ const PropTypes = require('prop-types')
 const React = require('react')
 const { useEffect, useRef, useState } = React
 const Alert = require('./Alert')
-const draw = require('../scripts/draw')
 const {
   calcColWidth,
   calcGridHeight,
   calcGutterWidth,
 } = require('../scripts/calc')
+const { drawCols } = require('../scripts/draw')
 const {
   validateColWidthCalc,
   validateGutterWidthCalc,
@@ -34,6 +34,15 @@ const Panel = ({ selectionAmount, validSelection }) => {
   const [bottomMargin, setBottomMargin] = useState(0)
   const [leftMargin, setLeftMargin] = useState(0)
 
+  const [createRows, setCreateRows] = useState(true)
+  const [rows, setRows] = useState('')
+  const [rowGutterHeight, setRowGutterHeight] = useState(0)
+  const [rowHeight, setRowHeight] = useState('')
+  const [rowTopMargin, setRowTopMargin] = useState(0)
+  const [rowRightMargin, setRowRightMargin] = useState(0)
+  const [rowBottomMargin, setRowBottomMargin] = useState(0)
+  const [rowLeftMargin, setRowLeftMargin] = useState(0)
+
   const [colWidthsSum, setColWidthsSum] = useState('N/A')
   const [gridHeight, setGridHeight] = useState('N/A')
   const [gridWidth, setGridWidth] = useState('N/A')
@@ -46,12 +55,12 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
   const [isCalcReady, setIsCalcReady] = useState(false)
 
-  const calcState = {
+  const colCalcState = {
+    floorVals,
     canvasHeight,
     canvasWidth,
     cols,
     colWidth,
-    floorVals,
     gutterWidth,
     topMargin,
     rightMargin,
@@ -59,6 +68,19 @@ const Panel = ({ selectionAmount, validSelection }) => {
     leftMargin,
   }
 
+  const rowCalcState = {
+    floorVals,
+    canvasHeight,
+    canvasWidth,
+    cols: rows,
+    colWidth: rowHeight,
+    gutterWidth: rowGutterHeight,
+    topMargin: rowTopMargin,
+    rightMargin: rowRightMargin,
+    bottomMargin: rowBottomMargin,
+    leftMargin: rowLeftMargin,
+  }
+
   /**
    * Reset stats on panel UI.
    */
@@ -106,9 +128,11 @@ const Panel = ({ selectionAmount, validSelection }) => {
   }
 
   /**
-   * Attempt calculations for column width.
+   * Validates calcState for calcColWidth. If validation is successful, calcColWidth is called.
+   * @param {Object} calcState State for calculations
+   * @returns {Object|null} If a final successful calculation occurred, it will be returned, otherwise it will return null
    */
-  const attemptColWidthCalc = () => {
+  const validateAndCalcColWidth = (calcState) => {
     let finalResult
     // Clean inputs to possible values
     // May not be enough inputs for calculations though
@@ -130,39 +154,25 @@ const Panel = ({ selectionAmount, validSelection }) => {
       if (Array.isArray(results) && results.length > 0) {
         finalResult = results[results.length - 1]
       }
-    }
 
-    if (
-      finalResult &&
-      Array.isArray(finalResult.errs) &&
-      finalResult.errs.length === 0
-    ) {
-      // Final result was successful
-      setColWidthsSum(finalResult.colWidthsSum)
-      setGridWidth(finalResult.gridWidth)
-      setGutterWidthsSum(finalResult.gutterWidthsSum)
-      setRightLeftMarginsSum(finalResult.rightLeftMarginsSum)
-
-      // Calculate grid height
-      const calcGridHeightResult = calcGridHeight(calcState)
-      setGridHeight(calcGridHeightResult.gridHeight)
-      setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
-      setIsCalcReady(true)
-    }
+      if (
+        finalResult &&
+        Array.isArray(finalResult.errs) &&
+        finalResult.errs.length === 0
+      ) {
+        return finalResult
+      }
 
-    if (!canCalcColWidth || !finalResult) {
-      // Not possible to run calcColWidth or final result failed
-      resetStats()
+      return null
     }
-
-    // Update form UI to reflect input value changes
-    setForm(calcState)
   }
 
   /**
-   * Attempt calculations for gutter width.
+   * Validates calcState for calcGutterWidth. If validation is successful, calcGutterWidth is called.
+   * @param {Object} calcState State for calculations
+   * @returns {Object|null} If a final successful calculation occurred, it will be returned, otherwise it will return null
    */
-  const attemptGutterWidthCalc = () => {
+  const validateAndCalcGutterWidth = (calcState) => {
     let finalResult
     // Clean inputs to possible values
     // May not be enough inputs for calculations though
@@ -191,21 +201,57 @@ const Panel = ({ selectionAmount, validSelection }) => {
       Array.isArray(finalResult.errs) &&
       finalResult.errs.length === 0
     ) {
+      return finalResult
+    }
+
+    return null
+  }
+
+  /**
+   * Attempt calculations for column width.
+   */
+  const attemptColWidthCalc = (calcState) => {
+    const result = validateAndCalcColWidth(calcState)
+
+    if (result) {
       // Final result was successful
-      setColWidthsSum(finalResult.colWidthsSum)
-      setGridWidth(finalResult.gridWidth)
-      setGutterWidthsSum(finalResult.gutterWidthsSum)
-      setRightLeftMarginsSum(finalResult.rightLeftMarginsSum)
+      setColWidthsSum(result.colWidthsSum)
+      setGridWidth(result.gridWidth)
+      setGutterWidthsSum(result.gutterWidthsSum)
+      setRightLeftMarginsSum(result.rightLeftMarginsSum)
 
       // Calculate grid height
       const calcGridHeightResult = calcGridHeight(calcState)
       setGridHeight(calcGridHeightResult.gridHeight)
       setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
       setIsCalcReady(true)
+    } else {
+      resetStats()
     }
 
-    if (!canCalcGutterWidth || !finalResult) {
-      // Not possible to run calcColWidth or final result failed
+    // Update form UI to reflect input value changes
+    setForm(calcState)
+  }
+
+  /**
+   * Attempt calculations for gutter width.
+   */
+  const attemptGutterWidthCalc = (calcState) => {
+    const result = validateAndCalcGutterWidth(calcState)
+
+    if (result) {
+      // Final result was successful
+      setColWidthsSum(result.colWidthsSum)
+      setGridWidth(result.gridWidth)
+      setGutterWidthsSum(result.gutterWidthsSum)
+      setRightLeftMarginsSum(result.rresultightLeftMarginsSum)
+
+      // Calculate grid height
+      const calcGridHeightResult = calcGridHeight(calcState)
+      setGridHeight(calcGridHeightResult.gridHeight)
+      setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
+      setIsCalcReady(true)
+    } else {
       resetStats()
     }
 
@@ -216,7 +262,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
   /**
    * Attempt calculations for top bottom margins.
    */
-  const attemptGridHeightCalc = () => {
+  const attemptGridHeightCalc = (calcState) => {
     // Clean inputs to possible values
     // May not be enough inputs for calculations though
     validateInputs(calcState)
@@ -286,25 +332,31 @@ const Panel = ({ selectionAmount, validSelection }) => {
   if (canvasType === 'auto' && validSelection && validSelection.guid) {
     if (boundType === 'draw') {
       // Bound type is "draw"
-      calcState.canvasWidth = validSelection.globalDrawBounds.width
-      calcState.canvasHeight = validSelection.globalDrawBounds.height
+      colCalcState.canvasWidth = validSelection.globalDrawBounds.width
+      colCalcState.canvasHeight = validSelection.globalDrawBounds.height
+      rowCalcState.canvasWidth = validSelection.globalDrawBounds.width
+      rowCalcState.canvasHeight = validSelection.globalDrawBounds.height
     } else {
       // Assume bound type is "path"
-      calcState.canvasWidth = validSelection.globalBounds.width
-      calcState.canvasHeight = validSelection.globalBounds.height
+      colCalcState.canvasWidth = validSelection.globalBounds.width
+      colCalcState.canvasHeight = validSelection.globalBounds.height
+      rowCalcState.canvasWidth = validSelection.globalBounds.width
+      rowCalcState.canvasHeight = validSelection.globalBounds.height
     }
 
-    if (calcState.canvasWidth !== canvasWidth) {
-      setCanvasWidth(calcState.canvasWidth)
+    if (colCalcState.canvasWidth !== canvasWidth) {
+      setCanvasWidth(colCalcState.canvasWidth)
     }
 
-    if (calcState.canvasHeight !== canvasHeight) {
-      setCanvasHeight(calcState.canvasHeight)
+    if (colCalcState.canvasHeight !== canvasHeight) {
+      setCanvasHeight(colCalcState.canvasHeight)
     }
   } else {
     // Use manual canvas values
-    calcState.canvasWidth = canvasWidth
-    calcState.canvasHeight = canvasHeight
+    colCalcState.canvasWidth = canvasWidth
+    colCalcState.canvasHeight = canvasHeight
+    rowCalcState.canvasWidth = canvasWidth
+    rowCalcState.canvasHeight = canvasHeight
   }
 
   let content
@@ -347,7 +399,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               type="number"
               min="1"
               value={canvasWidth}
-              onBlur={attemptColWidthCalc}
+              onBlur={() => attemptColWidthCalc(colCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setCanvasWidth(evt.target.value)
@@ -361,7 +413,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               type="number"
               min="1"
               value={canvasHeight}
-              onBlur={attemptGridHeightCalc}
+              onBlur={() => attemptGridHeightCalc(colCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setCanvasHeight(evt.target.value)
@@ -392,7 +444,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             min="1"
             max={canvasWidth}
             value={cols}
-            onBlur={attemptColWidthCalc}
+            onBlur={() => attemptColWidthCalc(colCalcState)}
             onChange={(evt) => {
               setIsCalcReady(false)
               setCols(evt.target.value)
@@ -408,7 +460,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             min="0"
             max={canvasWidth - 1}
             value={gutterWidth}
-            onBlur={attemptColWidthCalc}
+            onBlur={() => attemptColWidthCalc(colCalcState)}
             onChange={(evt) => {
               setIsCalcReady(false)
               setGutterWidth(evt.target.value)
@@ -424,7 +476,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             min="1"
             max={canvasWidth}
             value={colWidth}
-            onBlur={attemptGutterWidthCalc}
+            onBlur={() => attemptGutterWidthCalc(colCalcState)}
             onChange={(evt) => {
               setIsCalcReady(false)
               setColWidth(evt.target.value)
@@ -441,7 +493,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasHeight - 1}
               value={topMargin}
-              onBlur={attemptGridHeightCalc}
+              onBlur={() => attemptGutterWidthCalc(colCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setTopMargin(evt.target.value)
@@ -453,7 +505,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasWidth - 1}
               value={rightMargin}
-              onBlur={attemptColWidthCalc}
+              onBlur={() => attemptColWidthCalc(colCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setRightMargin(evt.target.value)
@@ -465,7 +517,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasHeight - 1}
               value={bottomMargin}
-              onBlur={attemptGridHeightCalc}
+              onBlur={() => attemptGutterWidthCalc(colCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setBottomMargin(evt.target.value)
@@ -477,7 +529,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasWidth - 1}
               value={leftMargin}
-              onBlur={attemptColWidthCalc}
+              onBlur={() => attemptColWidthCalc(colCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setLeftMargin(evt.target.value)
@@ -486,6 +538,112 @@ const Panel = ({ selectionAmount, validSelection }) => {
             />
           </div>
         </label>
+        <hr />
+        <label className="text-input-combo">
+          <span>Create Rows</span>
+          <input
+            type="checkbox"
+            checked={createRows}
+            onChange={(evt) => {
+              setCreateRows(evt.target.checked)
+            }}
+            uxp-quiet="true"
+          />
+        </label>
+        <label className={createRows ? 'text-input-combo' : 'hide'}>
+          <span>Rows</span>
+          <input
+            type="number"
+            min="1"
+            max={canvasHeight}
+            value={rows}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setRows(evt.target.value)
+            }}
+            className="input-lg"
+            uxp-quiet="true"
+          />
+        </label>
+        <label className={createRows ? 'text-input-combo' : 'hide'}>
+          <span>Gutter Height</span>
+          <input
+            type="number"
+            min="0"
+            max={canvasHeight - 1}
+            value={rowGutterHeight}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setRowGutterHeight(evt.target.value)
+            }}
+            className="input-lg"
+            uxp-quiet="true"
+          />
+        </label>
+        <label className={createRows ? 'text-input-combo' : 'hide'}>
+          <span>Row Height</span>
+          <input
+            type="number"
+            min="1"
+            max={canvasWidth}
+            value={rowHeight}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setRowHeight(evt.target.value)
+            }}
+            className="input-lg"
+            uxp-quiet="true"
+          />
+        </label>
+        <label className={createRows ? 'text-input-combo' : 'hide'}>
+          <span>Margins</span>
+          <div className="multi-inputs">
+            <input
+              type="number"
+              min="0"
+              max={canvasHeight - 1}
+              value={rowTopMargin}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setRowTopMargin(evt.target.value)
+              }}
+              uxp-quiet="true"
+            />
+            <input
+              type="number"
+              min="0"
+              max={canvasWidth - 1}
+              value={rowRightMargin}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setRowRightMargin(evt.target.value)
+              }}
+              uxp-quiet="true"
+            />
+            <input
+              type="number"
+              min="0"
+              max={canvasHeight - 1}
+              value={rowBottomMargin}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setRowBottomMargin(evt.target.value)
+              }}
+              uxp-quiet="true"
+            />
+            <input
+              type="number"
+              min="0"
+              max={canvasWidth - 1}
+              value={rowLeftMargin}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setRowLeftMargin(evt.target.value)
+              }}
+              uxp-quiet="true"
+            />
+          </div>
+        </label>
         <div id="info-section">
           <hr />
           <div>
@@ -552,10 +710,20 @@ const Panel = ({ selectionAmount, validSelection }) => {
             id="create"
             onClick={() => {
               if (isCalcReady) {
-                draw(calcState, { gridHeight }, { drawFields, drawGridlines })
+                if (createCols) {
+                  drawCols(
+                    colCalcState,
+                    { gridHeight },
+                    { drawFields, drawGridlines }
+                  )
+                }
               }
             }}
-            disabled={!isCalcReady || (!drawFields && !drawGridlines)}
+            disabled={
+              !isCalcReady ||
+              (!drawFields && !drawGridlines) ||
+              (!createCols && !createRows)
+            }
             uxp-variant="cta"
           >
             Create
diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index 87c85d5..e3669ae 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -7,7 +7,7 @@ const { group } = require('commands')
  * @param {Object} calcState State for calculations. Should be validated beforehand.
  * @param {Object} drawOptions Options to control what should be drawn
  */
-const draw = (calcState, statsState, drawOptions) => {
+const drawCols = (calcState, statsState, drawOptions) => {
   editDocument((selection) => {
     const currSelection = selection.items[0]
     const {
@@ -126,4 +126,4 @@ const draw = (calcState, statsState, drawOptions) => {
   })
 }
 
-module.exports = draw
+module.exports.drawCols = drawCols

From 5dec99c65dce54bb97189c2da976ca55ea4ef4aa Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 25 May 2020 22:04:35 -0700
Subject: [PATCH 04/29] Calculate row grid in panel UI

---
 src/components/Panel.jsx | 181 +++++++++++++++++++++++++++++++++++----
 1 file changed, 164 insertions(+), 17 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 5390034..10018cb 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -50,6 +50,13 @@ const Panel = ({ selectionAmount, validSelection }) => {
   const [topBottomMarginsSum, setTopBottomMarginsSum] = useState(0)
   const [rightLeftMarginsSum, setRightLeftMarginsSum] = useState(0)
 
+  const [rowHeightsSum, setRowHeightsSum] = useState('N/A')
+  const [rowGridHeight, setRowGridHeight] = useState('N/A')
+  const [rowGridWidth, setRowGridWidth] = useState('N/A')
+  const [rowGutterHeightsSum, setRowGutterHeightsSum] = useState('N/A')
+  const [rowTopBottomMarginsSum, setRowTopBottomMarginsSum] = useState(0)
+  const [rowRightLeftMarginsSum, setRowRightLeftMarginsSum] = useState(0)
+
   const [drawFields, setDrawFields] = useState(true)
   const [drawGridlines, setDrawGridlines] = useState(true)
 
@@ -112,14 +119,15 @@ const Panel = ({ selectionAmount, validSelection }) => {
   }
 
   /**
-   * Set form to calcState values.
+   * Set form to column calcState values.
+   * @param {Object} calcState State for calculations
    */
   const setForm = (calcState) => {
+    setFloorVals(calcState.floorVals)
     setCanvasWidth(calcState.canvasWidth)
     setCanvasHeight(calcState.canvasHeight)
     setCols(calcState.cols)
     setColWidth(calcState.colWidth)
-    setFloorVals(calcState.floorVals)
     setGutterWidth(calcState.gutterWidth)
     setTopMargin(calcState.topMargin)
     setRightMargin(calcState.rightMargin)
@@ -127,6 +135,23 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setLeftMargin(calcState.leftMargin)
   }
 
+  /**
+   * Set form to rowCalcState values.
+   * @param {Object} calcState State for calculations
+   */
+  const setRowForm = (calcState) => {
+    setFloorVals(calcState.floorVals)
+    setCanvasWidth(calcState.canvasWidth)
+    setCanvasHeight(calcState.canvasHeight)
+    setRows(calcState.cols)
+    setRowHeight(calcState.colWidth)
+    setRowGutterHeight(calcState.gutterWidth)
+    setRowTopMargin(calcState.topMargin)
+    setRowRightMargin(calcState.rightMargin)
+    setRowBottomMargin(calcState.bottomMargin)
+    setRowLeftMargin(calcState.leftMargin)
+  }
+
   /**
    * Validates calcState for calcColWidth. If validation is successful, calcColWidth is called.
    * @param {Object} calcState State for calculations
@@ -209,6 +234,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
   /**
    * Attempt calculations for column width.
+   * @param {Object} calcState State for calculations
    */
   const attemptColWidthCalc = (calcState) => {
     const result = validateAndCalcColWidth(calcState)
@@ -234,9 +260,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
   }
 
   /**
-   * Attempt calculations for gutter width.
+   * Attempt calculations for column gutter width.
+   * @param {Object} calcState State for calculations
    */
-  const attemptGutterWidthCalc = (calcState) => {
+  const attemptColGutterWidthCalc = (calcState) => {
     const result = validateAndCalcGutterWidth(calcState)
 
     if (result) {
@@ -244,7 +271,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       setColWidthsSum(result.colWidthsSum)
       setGridWidth(result.gridWidth)
       setGutterWidthsSum(result.gutterWidthsSum)
-      setRightLeftMarginsSum(result.rresultightLeftMarginsSum)
+      setRightLeftMarginsSum(result.rightLeftMarginsSum)
 
       // Calculate grid height
       const calcGridHeightResult = calcGridHeight(calcState)
@@ -260,7 +287,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
   }
 
   /**
-   * Attempt calculations for top bottom margins.
+   * Attempt calculations for column grid height.
+   * @param {Object} calcState State for calculations
    */
   const attemptGridHeightCalc = (calcState) => {
     // Clean inputs to possible values
@@ -292,6 +320,94 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setForm(calcState)
   }
 
+  /**
+   * Attempt calculations for row height.
+   * @param {Object} calcState State for calculations
+   */
+  const attemptRowHeightCalc = (calcState) => {
+    const result = validateAndCalcColWidth(calcState)
+
+    if (result) {
+      // Final result was successful
+      setRowHeightsSum(result.colWidthsSum)
+      setRowGridWidth(result.gridWidth)
+      setRowGutterHeightsSum(result.gutterWidthsSum)
+      setRowRightLeftMarginsSum(result.rightLeftMarginsSum)
+
+      // Calculate grid height
+      const calcGridHeightResult = calcGridHeight(calcState)
+      setRowGridHeight(calcGridHeightResult.gridHeight)
+      setRowTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
+      setIsCalcReady(true)
+    } else {
+      resetStats()
+    }
+
+    // Update form UI to reflect input value changes
+    setRowForm(calcState)
+  }
+
+  /**
+   * Attempt calculations for row gutter height.
+   * @param {Object} calcState State for calculations
+   */
+  const attemptRowGutterHeightCalc = (calcState) => {
+    const result = validateAndCalcGutterWidth(calcState)
+
+    if (result) {
+      // Final result was successful
+      setRowHeightsSum(result.colWidthsSum)
+      setRowGridWidth(result.gridWidth)
+      setRowGutterHeightsSum(result.gutterWidthsSum)
+      setRowRightLeftMarginsSum(result.rightLeftMarginsSum)
+
+      // Calculate grid height
+      const calcGridHeightResult = calcGridHeight(calcState)
+      setRowGridHeight(calcGridHeightResult.gridHeight)
+      setRowTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
+      setIsCalcReady(true)
+    } else {
+      resetStats()
+    }
+
+    // Update form UI to reflect input value changes
+    setRowForm(calcState)
+  }
+
+  /**
+   * Attempt calculations for row grid height.
+   * @param {Object} calcState State for calculations
+   */
+  const attemptRowGridHeightCalc = (calcState) => {
+    // Clean inputs to possible values
+    // May not be enough inputs for calculations though
+    validateInputs(calcState)
+
+    if (validateColWidthCalc(calcState) || validateGutterWidthCalc(calcState)) {
+      // If calcColWidth or calcGutterWidth is possible, run calcGridHeight
+      const result = calcGridHeight(calcState)
+
+      setRowGridHeight(result.gridHeight)
+      setRowTopBottomMarginsSum(result.topBottomMarginsSum)
+
+      if (
+        validateStats({
+          colWidthsSum,
+          gutterWidthsSum,
+          gridWidth,
+          gridHeight: result.gridHeight,
+          rightLeftMarginsSum,
+          topBottomMarginsSum: result.topBottomMarginsSum,
+        })
+      ) {
+        // Previous calculation was valid, so set isCalcReady to true
+        setIsCalcReady(true)
+      }
+    }
+
+    setRowForm(calcState)
+  }
+
   /**
    * Handle bound type change.
    * @param {*} evt
@@ -476,7 +592,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             min="1"
             max={canvasWidth}
             value={colWidth}
-            onBlur={() => attemptGutterWidthCalc(colCalcState)}
+            onBlur={() => attemptColGutterWidthCalc(colCalcState)}
             onChange={(evt) => {
               setIsCalcReady(false)
               setColWidth(evt.target.value)
@@ -486,14 +602,14 @@ const Panel = ({ selectionAmount, validSelection }) => {
           />
         </label>
         <label className={createCols ? 'text-input-combo' : 'hide'}>
-          <span>Margins</span>
+          <span>Column Margins</span>
           <div className="multi-inputs">
             <input
               type="number"
               min="0"
               max={canvasHeight - 1}
               value={topMargin}
-              onBlur={() => attemptGutterWidthCalc(colCalcState)}
+              onBlur={() => attemptColGutterWidthCalc(colCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setTopMargin(evt.target.value)
@@ -517,7 +633,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasHeight - 1}
               value={bottomMargin}
-              onBlur={() => attemptGutterWidthCalc(colCalcState)}
+              onBlur={() => attemptColGutterWidthCalc(colCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setBottomMargin(evt.target.value)
@@ -557,6 +673,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             min="1"
             max={canvasHeight}
             value={rows}
+            onBlur={() => attemptRowHeightCalc(rowCalcState)}
             onChange={(evt) => {
               setIsCalcReady(false)
               setRows(evt.target.value)
@@ -566,12 +683,13 @@ const Panel = ({ selectionAmount, validSelection }) => {
           />
         </label>
         <label className={createRows ? 'text-input-combo' : 'hide'}>
-          <span>Gutter Height</span>
+          <span>Row Gutter Height</span>
           <input
             type="number"
             min="0"
             max={canvasHeight - 1}
             value={rowGutterHeight}
+            onBlur={() => attemptRowHeightCalc(rowCalcState)}
             onChange={(evt) => {
               setIsCalcReady(false)
               setRowGutterHeight(evt.target.value)
@@ -587,6 +705,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             min="1"
             max={canvasWidth}
             value={rowHeight}
+            onBlur={() => attemptRowGutterHeightCalc(rowCalcState)}
             onChange={(evt) => {
               setIsCalcReady(false)
               setRowHeight(evt.target.value)
@@ -596,13 +715,14 @@ const Panel = ({ selectionAmount, validSelection }) => {
           />
         </label>
         <label className={createRows ? 'text-input-combo' : 'hide'}>
-          <span>Margins</span>
+          <span>Row Margins</span>
           <div className="multi-inputs">
             <input
               type="number"
               min="0"
               max={canvasHeight - 1}
               value={rowTopMargin}
+              onBlur={() => attemptRowGridHeightCalc(rowCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setRowTopMargin(evt.target.value)
@@ -614,6 +734,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasWidth - 1}
               value={rowRightMargin}
+              onBlur={() => attemptRowHeightCalc(rowCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setRowRightMargin(evt.target.value)
@@ -625,6 +746,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasHeight - 1}
               value={rowBottomMargin}
+              onBlur={() => attemptRowGridHeightCalc(rowCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setRowBottomMargin(evt.target.value)
@@ -636,6 +758,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasWidth - 1}
               value={rowLeftMargin}
+              onBlur={() => attemptRowHeightCalc(rowCalcState)}
               onChange={(evt) => {
                 setIsCalcReady(false)
                 setRowLeftMargin(evt.target.value)
@@ -659,25 +782,49 @@ const Panel = ({ selectionAmount, validSelection }) => {
             {colWidthsSum}
           </div>
           <div>
-            <span>Gutter Width Sum:</span>
+            <span>Column Gutter Width Sum:</span>
             {gutterWidthsSum}
           </div>
           <div>
-            <span>Grid Width:</span>
+            <span>Column Grid Width:</span>
             {gridWidth}
           </div>
           <div>
-            <span>Grid Height:</span>
+            <span>Column Grid Height:</span>
             {gridHeight}
           </div>
           <div>
-            <span>Right & Left Margin Sum:</span>
+            <span>Column Right & Left Margin Sum:</span>
             {rightLeftMarginsSum}
           </div>
           <div>
-            <span>Top & Bottom Margin Sum:</span>
+            <span>Column Top & Bottom Margin Sum:</span>
             {topBottomMarginsSum}
           </div>
+          <div>
+            <span>Row Height Sum:</span>
+            {rowHeightsSum}
+          </div>
+          <div>
+            <span>Row Gutter Height Sum:</span>
+            {rowGutterHeightsSum}
+          </div>
+          <div>
+            <span>Row Grid Width:</span>
+            {rowGridWidth}
+          </div>
+          <div>
+            <span>Row Grid Height:</span>
+            {rowGridHeight}
+          </div>
+          <div>
+            <span>Row Right & Left Margin Sum:</span>
+            {rowRightLeftMarginsSum}
+          </div>
+          <div>
+            <span>Row Top & Bottom Margin Sum:</span>
+            {rowTopBottomMarginsSum}
+          </div>
           <hr />
         </div>
         <label className="text-input-combo">

From d42afa8567caba41ae7a692e10d32956a1a782d2 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 25 May 2020 22:40:01 -0700
Subject: [PATCH 05/29] Update reset for cols & rows

---
 src/components/Panel.jsx | 76 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 67 insertions(+), 9 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 10018cb..dd186f2 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -89,9 +89,9 @@ const Panel = ({ selectionAmount, validSelection }) => {
   }
 
   /**
-   * Reset stats on panel UI.
+   * Reset column stats on panel UI.
    */
-  const resetStats = () => {
+  const resetColStats = () => {
     setColWidthsSum('N/A')
     setGridHeight('N/A')
     setGridWidth('N/A')
@@ -102,9 +102,9 @@ const Panel = ({ selectionAmount, validSelection }) => {
   }
 
   /**
-   * Reset form & stats on panel UI.
+   * Reset column form & stats on panel UI.
    */
-  const resetForm = () => {
+  const resetColForm = () => {
     setFloorVals(true)
     setCols('')
     setGutterWidth(0)
@@ -115,7 +115,65 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setLeftMargin(0)
     setDrawFields(true)
     setDrawGridlines(true)
-    resetStats()
+    resetColStats()
+  }
+
+  /**
+   * Reset row stats on panel UI.
+   */
+  const resetRowStats = () => {
+    setRowHeightsSum('N/A')
+    setRowGridHeight('N/A')
+    setRowGridWidth('N/A')
+    setRowGutterHeightsSum('N/A')
+    setRowTopBottomMarginsSum(0)
+    setRightLeftMarginsSum(0)
+    setIsCalcReady(false)
+  }
+
+  /**
+   * Reset row form & stats on panel UI.
+   */
+  const resetRowForm = () => {
+    setFloorVals(true)
+    setRows('')
+    setRowGutterHeight(0)
+    setRowHeight('')
+    setRowTopMargin(0)
+    setRowRightMargin(0)
+    setRowBottomMargin(0)
+    setRowLeftMargin(0)
+    setDrawFields(true)
+    setDrawGridlines(true)
+    resetRowStats()
+  }
+
+  /**
+   * Reset form & stats on panel UI.
+   */
+  const resetForm = () => {
+    setFloorVals(true)
+    setDrawFields(true)
+    setDrawGridlines(true)
+
+    setCols('')
+    setGutterWidth(0)
+    setColWidth('')
+    setTopMargin(0)
+    setRightMargin(0)
+    setBottomMargin(0)
+    setLeftMargin(0)
+
+    setRows('')
+    setRowGutterHeight(0)
+    setRowHeight('')
+    setRowTopMargin(0)
+    setRowRightMargin(0)
+    setRowBottomMargin(0)
+    setRowLeftMargin(0)
+
+    resetColStats()
+    resetRowStats()
   }
 
   /**
@@ -252,7 +310,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
       setIsCalcReady(true)
     } else {
-      resetStats()
+      resetColStats()
     }
 
     // Update form UI to reflect input value changes
@@ -279,7 +337,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
       setIsCalcReady(true)
     } else {
-      resetStats()
+      resetColStats()
     }
 
     // Update form UI to reflect input value changes
@@ -340,7 +398,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       setRowTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
       setIsCalcReady(true)
     } else {
-      resetStats()
+      resetRowStats()
     }
 
     // Update form UI to reflect input value changes
@@ -367,7 +425,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       setRowTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
       setIsCalcReady(true)
     } else {
-      resetStats()
+      resetRowStats()
     }
 
     // Update form UI to reflect input value changes

From 8fef9639d63ec95ccead47068d2b9596a00d2382 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 03:53:32 -0700
Subject: [PATCH 06/29] =?UTF-8?q?Progress=20on=20drawing=20rows=20-=20Spli?=
 =?UTF-8?q?t=20isCalcReady=20into=20two=20for=20col=20&=20row=20-=20Update?=
 =?UTF-8?q?=20UI=20labels=20-=20Reset=20form=20when=20hiding=20col=20or=20?=
 =?UTF-8?q?row=20-=20Update=20conditions=20for=20when=20=E2=80=9CCreate?=
 =?UTF-8?q?=E2=80=9D=20btn=20is=20disabled=20-=20Make=20draw=20fn=20handle?=
 =?UTF-8?q?=20both=20cols=20&=20rows?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Panel.jsx | 102 +++++++++++------
 src/scripts/draw.js      | 241 +++++++++++++++++++++------------------
 2 files changed, 196 insertions(+), 147 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index dd186f2..102be1e 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -2,12 +2,12 @@ const PropTypes = require('prop-types')
 const React = require('react')
 const { useEffect, useRef, useState } = React
 const Alert = require('./Alert')
+const draw = require('../scripts/draw')
 const {
   calcColWidth,
   calcGridHeight,
   calcGutterWidth,
 } = require('../scripts/calc')
-const { drawCols } = require('../scripts/draw')
 const {
   validateColWidthCalc,
   validateGutterWidthCalc,
@@ -60,7 +60,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
   const [drawFields, setDrawFields] = useState(true)
   const [drawGridlines, setDrawGridlines] = useState(true)
 
-  const [isCalcReady, setIsCalcReady] = useState(false)
+  const [isColCalcReady, setIsColCalcReady] = useState(false)
+  const [isRowCalcReady, setIsRowCalcReady] = useState(false)
 
   const colCalcState = {
     floorVals,
@@ -98,7 +99,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setGutterWidthsSum('N/A')
     setTopBottomMarginsSum(0)
     setRightLeftMarginsSum(0)
-    setIsCalcReady(false)
+    setIsColCalcReady(false)
   }
 
   /**
@@ -128,7 +129,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setRowGutterHeightsSum('N/A')
     setRowTopBottomMarginsSum(0)
     setRightLeftMarginsSum(0)
-    setIsCalcReady(false)
+    setIsRowCalcReady(false)
   }
 
   /**
@@ -308,7 +309,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       const calcGridHeightResult = calcGridHeight(calcState)
       setGridHeight(calcGridHeightResult.gridHeight)
       setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
-      setIsCalcReady(true)
+      setIsColCalcReady(true)
     } else {
       resetColStats()
     }
@@ -335,7 +336,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       const calcGridHeightResult = calcGridHeight(calcState)
       setGridHeight(calcGridHeightResult.gridHeight)
       setTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
-      setIsCalcReady(true)
+      setIsColCalcReady(true)
     } else {
       resetColStats()
     }
@@ -370,8 +371,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
           topBottomMarginsSum: result.topBottomMarginsSum,
         })
       ) {
-        // Previous calculation was valid, so set isCalcReady to true
-        setIsCalcReady(true)
+        // Previous calculation was valid, so set isColCalcReady to true
+        setIsColCalcReady(true)
       }
     }
 
@@ -396,7 +397,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       const calcGridHeightResult = calcGridHeight(calcState)
       setRowGridHeight(calcGridHeightResult.gridHeight)
       setRowTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
-      setIsCalcReady(true)
+      setIsColCalcReady(true)
     } else {
       resetRowStats()
     }
@@ -423,7 +424,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       const calcGridHeightResult = calcGridHeight(calcState)
       setRowGridHeight(calcGridHeightResult.gridHeight)
       setRowTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
-      setIsCalcReady(true)
+      setIsColCalcReady(true)
     } else {
       resetRowStats()
     }
@@ -458,8 +459,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
           topBottomMarginsSum: result.topBottomMarginsSum,
         })
       ) {
-        // Previous calculation was valid, so set isCalcReady to true
-        setIsCalcReady(true)
+        // Previous calculation was valid, so set isRowCalcReady to true
+        setIsRowCalcReady(true)
       }
     }
 
@@ -575,7 +576,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={canvasWidth}
               onBlur={() => attemptColWidthCalc(colCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsColCalcReady(false)
                 setCanvasWidth(evt.target.value)
               }}
               className="input-lg"
@@ -589,7 +590,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={canvasHeight}
               onBlur={() => attemptGridHeightCalc(colCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsColCalcReady(false)
                 setCanvasHeight(evt.target.value)
               }}
               className="input-lg"
@@ -607,6 +608,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
             checked={createCols}
             onChange={(evt) => {
               setCreateCols(evt.target.checked)
+
+              if (evt.target.checked === false) {
+                resetColForm()
+              }
             }}
             uxp-quiet="true"
           />
@@ -620,7 +625,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             value={cols}
             onBlur={() => attemptColWidthCalc(colCalcState)}
             onChange={(evt) => {
-              setIsCalcReady(false)
+              setIsColCalcReady(false)
               setCols(evt.target.value)
             }}
             className="input-lg"
@@ -628,7 +633,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
           />
         </label>
         <label className={createCols ? 'text-input-combo' : 'hide'}>
-          <span>Gutter Width</span>
+          <span>Column Gutter Width</span>
           <input
             type="number"
             min="0"
@@ -636,7 +641,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             value={gutterWidth}
             onBlur={() => attemptColWidthCalc(colCalcState)}
             onChange={(evt) => {
-              setIsCalcReady(false)
+              setIsColCalcReady(false)
               setGutterWidth(evt.target.value)
             }}
             className="input-lg"
@@ -652,7 +657,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             value={colWidth}
             onBlur={() => attemptColGutterWidthCalc(colCalcState)}
             onChange={(evt) => {
-              setIsCalcReady(false)
+              setIsColCalcReady(false)
               setColWidth(evt.target.value)
             }}
             className="input-lg"
@@ -669,7 +674,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={topMargin}
               onBlur={() => attemptColGutterWidthCalc(colCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsColCalcReady(false)
                 setTopMargin(evt.target.value)
               }}
               uxp-quiet="true"
@@ -681,7 +686,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={rightMargin}
               onBlur={() => attemptColWidthCalc(colCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsColCalcReady(false)
                 setRightMargin(evt.target.value)
               }}
               uxp-quiet="true"
@@ -693,7 +698,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={bottomMargin}
               onBlur={() => attemptColGutterWidthCalc(colCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsColCalcReady(false)
                 setBottomMargin(evt.target.value)
               }}
               uxp-quiet="true"
@@ -705,7 +710,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={leftMargin}
               onBlur={() => attemptColWidthCalc(colCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsColCalcReady(false)
                 setLeftMargin(evt.target.value)
               }}
               uxp-quiet="true"
@@ -720,6 +725,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
             checked={createRows}
             onChange={(evt) => {
               setCreateRows(evt.target.checked)
+
+              if (evt.target.checked === false) {
+                resetRowForm()
+              }
             }}
             uxp-quiet="true"
           />
@@ -733,7 +742,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             value={rows}
             onBlur={() => attemptRowHeightCalc(rowCalcState)}
             onChange={(evt) => {
-              setIsCalcReady(false)
+              setIsRowCalcReady(false)
               setRows(evt.target.value)
             }}
             className="input-lg"
@@ -749,7 +758,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             value={rowGutterHeight}
             onBlur={() => attemptRowHeightCalc(rowCalcState)}
             onChange={(evt) => {
-              setIsCalcReady(false)
+              setIsRowCalcReady(false)
               setRowGutterHeight(evt.target.value)
             }}
             className="input-lg"
@@ -765,7 +774,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             value={rowHeight}
             onBlur={() => attemptRowGutterHeightCalc(rowCalcState)}
             onChange={(evt) => {
-              setIsCalcReady(false)
+              setIsRowCalcReady(false)
               setRowHeight(evt.target.value)
             }}
             className="input-lg"
@@ -782,7 +791,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={rowTopMargin}
               onBlur={() => attemptRowGridHeightCalc(rowCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsRowCalcReady(false)
                 setRowTopMargin(evt.target.value)
               }}
               uxp-quiet="true"
@@ -794,7 +803,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={rowRightMargin}
               onBlur={() => attemptRowHeightCalc(rowCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsRowCalcReady(false)
                 setRowRightMargin(evt.target.value)
               }}
               uxp-quiet="true"
@@ -806,7 +815,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={rowBottomMargin}
               onBlur={() => attemptRowGridHeightCalc(rowCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsRowCalcReady(false)
                 setRowBottomMargin(evt.target.value)
               }}
               uxp-quiet="true"
@@ -818,7 +827,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               value={rowLeftMargin}
               onBlur={() => attemptRowHeightCalc(rowCalcState)}
               onChange={(evt) => {
-                setIsCalcReady(false)
+                setIsRowCalcReady(false)
                 setRowLeftMargin(evt.target.value)
               }}
               uxp-quiet="true"
@@ -914,20 +923,43 @@ const Panel = ({ selectionAmount, validSelection }) => {
           <button
             id="create"
             onClick={() => {
-              if (isCalcReady) {
-                if (createCols) {
-                  drawCols(
+              if (createCols && createRows) {
+                if (isColCalcReady && isRowCalcReady) {
+                  draw(
                     colCalcState,
                     { gridHeight },
+                    rowCalcState,
+                    { gridWidth },
+                    { drawFields, drawGridlines }
+                  )
+                }
+              } else if (createCols) {
+                if (isColCalcReady) {
+                  draw(colCalcState, { gridHeight }, null, null, {
+                    drawFields,
+                    drawGridlines,
+                  })
+                }
+              } else if (createRows) {
+                if (isRowCalcReady) {
+                  draw(
+                    null,
+                    null,
+                    rowCalcState,
+                    { gridWidth },
                     { drawFields, drawGridlines }
                   )
                 }
               }
             }}
             disabled={
-              !isCalcReady ||
-              (!drawFields && !drawGridlines) ||
-              (!createCols && !createRows)
+              (createCols && !isColCalcReady) ||
+              (createRows && !isRowCalcReady) ||
+              (createCols &&
+                createRows &&
+                (!isColCalcReady || !isRowCalcReady)) ||
+              (!createCols && !createRows) ||
+              (!drawFields && !drawGridlines)
             }
             uxp-variant="cta"
           >
diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index e3669ae..126c98d 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -4,126 +4,143 @@ const { group } = require('commands')
 
 /**
  * Draw grid.
- * @param {Object} calcState State for calculations. Should be validated beforehand.
+ * @param {Object} colCalcState State for calculations. Should be validated beforehand.
  * @param {Object} drawOptions Options to control what should be drawn
  */
-const drawCols = (calcState, statsState, drawOptions) => {
-  editDocument((selection) => {
-    const currSelection = selection.items[0]
-    const {
-      canvasWidth,
-      canvasHeight,
-      cols,
-      colWidth,
-      gutterWidth,
-      topMargin,
-      leftMargin,
-    } = calcState
-    const { gridHeight } = statsState
-    const { drawFields, drawGridlines } = drawOptions
-    const newItems = []
-    const colFills = []
-    const gridlines = []
-
-    // Draw canvas. Used for alignment.
-    const canvas = new Rectangle()
-    canvas.name = 'Canvas'
-    canvas.width = canvasWidth
-    canvas.height = canvasHeight
-    canvas.fill = new Color('#00ff00', 0.25)
-    newItems.push(canvas)
-    selection.insertionParent.addChild(canvas)
-
-    const pos = { x: leftMargin, y: topMargin }
-
-    if (drawFields || drawGridlines) {
-      for (let i = 0; i < cols; i += 1) {
-        if (drawFields) {
-          // Draw column
-          const col = new Rectangle()
-          col.width = colWidth
-          col.height = gridHeight
-          col.fill = new Color('#00ffff', 0.5)
-          col.name = `Column ${i + 1}`
-          colFills.push(col)
-          selection.insertionParent.addChild(col)
-
-          if (pos.x > 0 || pos.y > 0) {
-            col.moveInParentCoordinates(pos.x, pos.y)
+const draw = (
+  colCalcState,
+  colStatsState,
+  rowCalcState,
+  rowStatsState,
+  drawOptions
+) => {
+  if ((colCalcState && colStatsState) || (rowCalcState && rowStatsState)) {
+    editDocument((selection) => {
+      const currSelection = selection.items[0]
+      let canvasWidth
+      let canvasHeight
+      const newItems = []
+
+      if (colCalcState) {
+        canvasWidth = colCalcState.canvasWidth
+        canvasHeight = colCalcState.canvasHeight
+      } else if (rowCalcState) {
+        canvasWidth = rowCalcState.canvasWidth
+        canvasHeight = rowCalcState.canvasHeight
+      }
+
+      // Draw canvas. Used for alignment.
+      const canvas = new Rectangle()
+      canvas.name = 'Canvas'
+      canvas.width = canvasWidth
+      canvas.height = canvasHeight
+      canvas.fill = new Color('#00ff00', 0.25)
+      newItems.push(canvas)
+      selection.insertionParent.addChild(canvas)
+
+      if (colCalcState && colStatsState) {
+        const {
+          cols,
+          colWidth,
+          gutterWidth,
+          topMargin,
+          leftMargin,
+        } = colCalcState
+        const { gridHeight } = colStatsState
+        const { drawFields, drawGridlines } = drawOptions
+        const colFills = []
+        const gridlines = []
+
+        const pos = { x: leftMargin, y: topMargin }
+
+        for (let i = 0; i < cols; i += 1) {
+          if (drawFields) {
+            // Draw column
+            const col = new Rectangle()
+            col.width = colWidth
+            col.height = gridHeight
+            col.fill = new Color('#00ffff', 0.5)
+            col.name = `Column ${i + 1}`
+            colFills.push(col)
+            selection.insertionParent.addChild(col)
+
+            if (pos.x > 0 || pos.y > 0) {
+              col.moveInParentCoordinates(pos.x, pos.y)
+            }
+          }
+
+          if (drawGridlines) {
+            // Draw gridlines
+            const gridlineA = new Line()
+            gridlineA.setStartEnd(pos.x, 0, pos.x, canvasHeight)
+            gridlineA.strokeEnabled = true
+            gridlineA.strokeWidth = 1
+            gridlineA.stroke = new Color('#ff4fff')
+            gridlineA.name = 'Gridline'
+            gridlines.push(gridlineA)
+            selection.insertionParent.addChild(gridlineA)
+
+            const gridlineB = new Line()
+            gridlineB.setStartEnd(
+              pos.x + colWidth,
+              0,
+              pos.x + colWidth,
+              canvasHeight
+            )
+            gridlineB.strokeEnabled = true
+            gridlineB.strokeWidth = 1
+            gridlineB.stroke = new Color('#ff4fff')
+            gridlineB.name = 'Gridline'
+            gridlines.push(gridlineB)
+            selection.insertionParent.addChild(gridlineB)
           }
+
+          pos.x += colWidth + gutterWidth
         }
 
-        if (drawGridlines) {
-          // Draw gridlines
-          const gridlineA = new Line()
-          gridlineA.setStartEnd(pos.x, 0, pos.x, canvasHeight)
-          gridlineA.strokeEnabled = true
-          gridlineA.strokeWidth = 1
-          gridlineA.stroke = new Color('#ff4fff')
-          gridlineA.name = 'Gridline'
-          gridlines.push(gridlineA)
-          selection.insertionParent.addChild(gridlineA)
-
-          const gridlineB = new Line()
-          gridlineB.setStartEnd(
-            pos.x + colWidth,
-            0,
-            pos.x + colWidth,
-            canvasHeight
+        // Group columns
+        selection.items = colFills
+        group()
+        const colGroup = selection.items[0]
+        colGroup.name = 'Columns'
+        newItems.push(colGroup)
+
+        // Group gridlines
+        selection.items = gridlines
+        group()
+        const gridlineGroup = selection.items[0]
+        gridlineGroup.name = 'Gridlines'
+        newItems.push(gridlineGroup)
+
+        // Group canvas, columns group, and gridlines group
+        selection.items = newItems
+        group()
+        const gridGroup = selection.items[0]
+        gridGroup.name = 'Gridnik Grid'
+
+        const topLeftGroupPos = {
+          x: gridGroup.localBounds.x,
+          y: gridGroup.localBounds.y,
+        }
+        if (currSelection.constructor.name === 'Artboard') {
+          // Draw at (0,0) because the current selection is an artboard
+          gridGroup.placeInParentCoordinates(topLeftGroupPos, {
+            x: 0,
+            y: 0,
+          })
+        } else {
+          // Draw over the current selection since the current seleciton isn't an artboard
+          gridGroup.placeInParentCoordinates(
+            topLeftGroupPos,
+            currSelection.boundsInParent
           )
-          gridlineB.strokeEnabled = true
-          gridlineB.strokeWidth = 1
-          gridlineB.stroke = new Color('#ff4fff')
-          gridlineB.name = 'Gridline'
-          gridlines.push(gridlineB)
-          selection.insertionParent.addChild(gridlineB)
         }
 
-        pos.x += colWidth + gutterWidth
+        // Canvas no longer needs to be visible
+        canvas.visible = false
       }
-
-      // Group columns
-      selection.items = colFills
-      group()
-      const colGroup = selection.items[0]
-      colGroup.name = 'Columns'
-      newItems.push(colGroup)
-
-      // Group gridlines
-      selection.items = gridlines
-      group()
-      const gridlineGroup = selection.items[0]
-      gridlineGroup.name = 'Gridlines'
-      newItems.push(gridlineGroup)
-
-      // Group canvas, columns group, and gridlines group
-      selection.items = newItems
-      group()
-      const gridGroup = selection.items[0]
-      gridGroup.name = 'Gridnik Grid'
-
-      const topLeftGroupPos = {
-        x: gridGroup.localBounds.x,
-        y: gridGroup.localBounds.y,
-      }
-      if (currSelection.constructor.name === 'Artboard') {
-        // Draw at (0,0) because the current selection is an artboard
-        gridGroup.placeInParentCoordinates(topLeftGroupPos, {
-          x: 0,
-          y: 0,
-        })
-      } else {
-        // Draw over the current selection since the current seleciton isn't an artboard
-        gridGroup.placeInParentCoordinates(
-          topLeftGroupPos,
-          currSelection.boundsInParent
-        )
-      }
-
-      // Canvas no longer needs to be visible
-      canvas.visible = false
-    }
-  })
+    })
+  }
 }
 
-module.exports.drawCols = drawCols
+module.exports = draw

From 565889237e5886e09a1106bbc41514a6031bb0e0 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 15:57:48 -0700
Subject: [PATCH 07/29] Progress on drawing rows

---
 src/components/Panel.jsx |  44 +++++------
 src/scripts/draw.js      | 164 ++++++++++++++++++++++++++++++++-------
 2 files changed, 159 insertions(+), 49 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 102be1e..9767bdc 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -128,7 +128,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setRowGridWidth('N/A')
     setRowGutterHeightsSum('N/A')
     setRowTopBottomMarginsSum(0)
-    setRightLeftMarginsSum(0)
+    setRowRightLeftMarginsSum(0)
     setIsRowCalcReady(false)
   }
 
@@ -397,7 +397,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       const calcGridHeightResult = calcGridHeight(calcState)
       setRowGridHeight(calcGridHeightResult.gridHeight)
       setRowTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
-      setIsColCalcReady(true)
+      setIsRowCalcReady(true)
     } else {
       resetRowStats()
     }
@@ -424,7 +424,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       const calcGridHeightResult = calcGridHeight(calcState)
       setRowGridHeight(calcGridHeightResult.gridHeight)
       setRowTopBottomMarginsSum(calcGridHeightResult.topBottomMarginsSum)
-      setIsColCalcReady(true)
+      setIsRowCalcReady(true)
     } else {
       resetRowStats()
     }
@@ -451,12 +451,12 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
       if (
         validateStats({
-          colWidthsSum,
-          gutterWidthsSum,
-          gridWidth,
-          gridHeight: result.gridHeight,
-          rightLeftMarginsSum,
-          topBottomMarginsSum: result.topBottomMarginsSum,
+          rowHeightsSum,
+          rowGutterHeightsSum,
+          rowGridWidth,
+          rowGridHeight: result.gridHeight,
+          rowRightLeftMarginsSum,
+          rowTopBottomMarginsSum: result.topBottomMarginsSum,
         })
       ) {
         // Previous calculation was valid, so set isRowCalcReady to true
@@ -509,14 +509,14 @@ const Panel = ({ selectionAmount, validSelection }) => {
       // Bound type is "draw"
       colCalcState.canvasWidth = validSelection.globalDrawBounds.width
       colCalcState.canvasHeight = validSelection.globalDrawBounds.height
-      rowCalcState.canvasWidth = validSelection.globalDrawBounds.width
-      rowCalcState.canvasHeight = validSelection.globalDrawBounds.height
+      rowCalcState.canvasWidth = validSelection.globalDrawBounds.height
+      rowCalcState.canvasHeight = validSelection.globalDrawBounds.width
     } else {
       // Assume bound type is "path"
       colCalcState.canvasWidth = validSelection.globalBounds.width
       colCalcState.canvasHeight = validSelection.globalBounds.height
-      rowCalcState.canvasWidth = validSelection.globalBounds.width
-      rowCalcState.canvasHeight = validSelection.globalBounds.height
+      rowCalcState.canvasWidth = validSelection.globalBounds.height
+      rowCalcState.canvasHeight = validSelection.globalBounds.width
     }
 
     if (colCalcState.canvasWidth !== canvasWidth) {
@@ -530,8 +530,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
     // Use manual canvas values
     colCalcState.canvasWidth = canvasWidth
     colCalcState.canvasHeight = canvasHeight
-    rowCalcState.canvasWidth = canvasWidth
-    rowCalcState.canvasHeight = canvasHeight
+    rowCalcState.canvasWidth = canvasHeight
+    rowCalcState.canvasHeight = canvasWidth
   }
 
   let content
@@ -770,7 +770,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
           <input
             type="number"
             min="1"
-            max={canvasWidth}
+            max={canvasHeight}
             value={rowHeight}
             onBlur={() => attemptRowGutterHeightCalc(rowCalcState)}
             onChange={(evt) => {
@@ -787,7 +787,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             <input
               type="number"
               min="0"
-              max={canvasHeight - 1}
+              max={canvasWidth - 1}
               value={rowTopMargin}
               onBlur={() => attemptRowGridHeightCalc(rowCalcState)}
               onChange={(evt) => {
@@ -799,7 +799,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             <input
               type="number"
               min="0"
-              max={canvasWidth - 1}
+              max={canvasHeight - 1}
               value={rowRightMargin}
               onBlur={() => attemptRowHeightCalc(rowCalcState)}
               onChange={(evt) => {
@@ -811,7 +811,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             <input
               type="number"
               min="0"
-              max={canvasHeight - 1}
+              max={canvasWidth - 1}
               value={rowBottomMargin}
               onBlur={() => attemptRowGridHeightCalc(rowCalcState)}
               onChange={(evt) => {
@@ -823,7 +823,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             <input
               type="number"
               min="0"
-              max={canvasWidth - 1}
+              max={canvasHeight - 1}
               value={rowLeftMargin}
               onBlur={() => attemptRowHeightCalc(rowCalcState)}
               onChange={(evt) => {
@@ -929,7 +929,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
                     colCalcState,
                     { gridHeight },
                     rowCalcState,
-                    { gridWidth },
+                    { rowGridHeight },
                     { drawFields, drawGridlines }
                   )
                 }
@@ -946,7 +946,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
                     null,
                     null,
                     rowCalcState,
-                    { gridWidth },
+                    { rowGridHeight },
                     { drawFields, drawGridlines }
                   )
                 }
diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index 126c98d..5661696 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -17,28 +17,11 @@ const draw = (
   if ((colCalcState && colStatsState) || (rowCalcState && rowStatsState)) {
     editDocument((selection) => {
       const currSelection = selection.items[0]
-      let canvasWidth
-      let canvasHeight
+      const { drawFields, drawGridlines } = drawOptions
       const newItems = []
 
-      if (colCalcState) {
-        canvasWidth = colCalcState.canvasWidth
-        canvasHeight = colCalcState.canvasHeight
-      } else if (rowCalcState) {
-        canvasWidth = rowCalcState.canvasWidth
-        canvasHeight = rowCalcState.canvasHeight
-      }
-
-      // Draw canvas. Used for alignment.
-      const canvas = new Rectangle()
-      canvas.name = 'Canvas'
-      canvas.width = canvasWidth
-      canvas.height = canvasHeight
-      canvas.fill = new Color('#00ff00', 0.25)
-      newItems.push(canvas)
-      selection.insertionParent.addChild(canvas)
-
       if (colCalcState && colStatsState) {
+        // Draw columns
         const {
           cols,
           colWidth,
@@ -47,12 +30,18 @@ const draw = (
           leftMargin,
         } = colCalcState
         const { gridHeight } = colStatsState
-        const { drawFields, drawGridlines } = drawOptions
         const colFills = []
         const gridlines = []
-
         const pos = { x: leftMargin, y: topMargin }
 
+        // Draw canvas. Used for alignment.
+        const canvas = new Rectangle()
+        canvas.name = 'Canvas'
+        canvas.width = colCalcState.canvasWidth
+        canvas.height = colCalcState.canvasHeight
+        canvas.fill = new Color('#00ff00', 0.25)
+        selection.insertionParent.addChild(canvas)
+
         for (let i = 0; i < cols; i += 1) {
           if (drawFields) {
             // Draw column
@@ -72,7 +61,7 @@ const draw = (
           if (drawGridlines) {
             // Draw gridlines
             const gridlineA = new Line()
-            gridlineA.setStartEnd(pos.x, 0, pos.x, canvasHeight)
+            gridlineA.setStartEnd(pos.x, 0, pos.x, canvas.height)
             gridlineA.strokeEnabled = true
             gridlineA.strokeWidth = 1
             gridlineA.stroke = new Color('#ff4fff')
@@ -85,7 +74,7 @@ const draw = (
               pos.x + colWidth,
               0,
               pos.x + colWidth,
-              canvasHeight
+              canvas.height
             )
             gridlineB.strokeEnabled = true
             gridlineB.strokeWidth = 1
@@ -103,20 +92,23 @@ const draw = (
         group()
         const colGroup = selection.items[0]
         colGroup.name = 'Columns'
-        newItems.push(colGroup)
 
         // Group gridlines
         selection.items = gridlines
         group()
         const gridlineGroup = selection.items[0]
         gridlineGroup.name = 'Gridlines'
-        newItems.push(gridlineGroup)
 
         // Group canvas, columns group, and gridlines group
-        selection.items = newItems
+        selection.items = [colGroup, gridlineGroup, canvas]
         group()
         const gridGroup = selection.items[0]
-        gridGroup.name = 'Gridnik Grid'
+        if (!rowCalcState || !rowStatsState) {
+          gridGroup.name = 'Gridnik Grid'
+        } else {
+          gridGroup.name = 'Column Grid'
+          newItems.push(gridGroup)
+        }
 
         const topLeftGroupPos = {
           x: gridGroup.localBounds.x,
@@ -139,6 +131,124 @@ const draw = (
         // Canvas no longer needs to be visible
         canvas.visible = false
       }
+
+      if (rowCalcState && rowStatsState) {
+        // Draw rows
+        const {
+          cols: rows,
+          colWidth: rowHeight,
+          gutterWidth: gutterHeight,
+          topMargin,
+          leftMargin,
+        } = rowCalcState
+        const { rowGridHeight: gridWidth } = rowStatsState
+        const rowFills = []
+        const gridlines = []
+        const pos = { x: leftMargin, y: topMargin }
+
+        // Draw canvas. Used for alignment.
+        const canvas = new Rectangle()
+        canvas.name = 'Canvas'
+        canvas.width = rowCalcState.canvasHeight
+        canvas.height = rowCalcState.canvasWidth
+        canvas.fill = new Color('#00ff00', 0.25)
+        selection.insertionParent.addChild(canvas)
+
+        for (let i = 0; i < rows; i += 1) {
+          if (drawFields) {
+            // Draw row
+            const row = new Rectangle()
+            row.width = gridWidth
+            row.height = rowHeight
+            row.fill = new Color('#00ffff', 0.5)
+            row.name = `Row ${i + 1}`
+            rowFills.push(row)
+            selection.insertionParent.addChild(row)
+
+            if (pos.x > 0 || pos.y > 0) {
+              row.moveInParentCoordinates(pos.x, pos.y)
+            }
+          }
+
+          // if (drawGridlines) {
+          //   // Draw gridlines
+          //   const gridlineA = new Line()
+          //   gridlineA.setStartEnd(pos.x, 0, pos.x, canvasHeight)
+          //   gridlineA.strokeEnabled = true
+          //   gridlineA.strokeWidth = 1
+          //   gridlineA.stroke = new Color('#ff4fff')
+          //   gridlineA.name = 'Gridline'
+          //   gridlines.push(gridlineA)
+          //   selection.insertionParent.addChild(gridlineA)
+
+          //   const gridlineB = new Line()
+          //   gridlineB.setStartEnd(
+          //     pos.x + colWidth,
+          //     0,
+          //     pos.x + colWidth,
+          //     canvasHeight
+          //   )
+          //   gridlineB.strokeEnabled = true
+          //   gridlineB.strokeWidth = 1
+          //   gridlineB.stroke = new Color('#ff4fff')
+          //   gridlineB.name = 'Gridline'
+          //   gridlines.push(gridlineB)
+          //   selection.insertionParent.addChild(gridlineB)
+          // }
+
+          pos.y += rowHeight + gutterHeight
+        }
+
+        // Group columns
+        selection.items = rowFills
+        group()
+        const rowGroup = selection.items[0]
+        rowGroup.name = 'Rows'
+
+        // Group gridlines
+        // selection.items = gridlines
+        // group()
+        // const gridlineGroup = selection.items[0]
+        // gridlineGroup.name = 'Gridlines'
+        // newItems.push(gridlineGroup)
+
+        // Group canvas, columns group, and gridlines group
+        selection.items = [rowGroup, canvas]
+        group()
+        const gridGroup = selection.items[0]
+        if (!colCalcState || !colStatsState) {
+          gridGroup.name = 'Row Grid'
+        } else {
+          gridGroup.name = 'Column Grid'
+          newItems.push(gridGroup)
+        }
+
+        const topLeftGroupPos = {
+          x: gridGroup.localBounds.x,
+          y: gridGroup.localBounds.y,
+        }
+        if (currSelection.constructor.name === 'Artboard') {
+          // Draw at (0,0) because the current selection is an artboard
+          gridGroup.placeInParentCoordinates(topLeftGroupPos, {
+            x: 0,
+            y: 0,
+          })
+        } else {
+          // Draw over the current selection since the current seleciton isn't an artboard
+          gridGroup.placeInParentCoordinates(
+            topLeftGroupPos,
+            currSelection.boundsInParent
+          )
+        }
+
+        canvas.visible = false
+      }
+
+      if (newItems.length > 1) {
+        selection.items = newItems
+        group()
+        selection.items[0].name = 'Gridnik Group'
+      }
     })
   }
 }

From b6e2dedf36552f34c30f27ad6365c066bebcf6a5 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 16:04:05 -0700
Subject: [PATCH 08/29] Properly name row groups

---
 src/scripts/draw.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index 5661696..eef6a71 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -212,14 +212,14 @@ const draw = (
         // gridlineGroup.name = 'Gridlines'
         // newItems.push(gridlineGroup)
 
-        // Group canvas, columns group, and gridlines group
+        // Group canvas, rows group, and gridlines group
         selection.items = [rowGroup, canvas]
         group()
         const gridGroup = selection.items[0]
         if (!colCalcState || !colStatsState) {
-          gridGroup.name = 'Row Grid'
+          gridGroup.name = 'Gridnik Grid'
         } else {
-          gridGroup.name = 'Column Grid'
+          gridGroup.name = 'Row Grid'
           newItems.push(gridGroup)
         }
 

From 6a5b71cdfac2f15124bab47dd400cf585892ec78 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 16:11:45 -0700
Subject: [PATCH 09/29] Fix bug where attemptRowGridHeightCalc does not
 validate correctly

---
 src/components/Panel.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 9767bdc..674b32f 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -451,12 +451,12 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
       if (
         validateStats({
-          rowHeightsSum,
-          rowGutterHeightsSum,
-          rowGridWidth,
-          rowGridHeight: result.gridHeight,
-          rowRightLeftMarginsSum,
-          rowTopBottomMarginsSum: result.topBottomMarginsSum,
+          colWidthsSum: rowHeightsSum,
+          gutterWidthsSum: rowGutterHeightsSum,
+          gridWidth: rowGridWidth,
+          gridHeight: result.gridHeight,
+          rightLeftMarginsSum: rowRightLeftMarginsSum,
+          topBottomMarginsSum: result.topBottomMarginsSum,
         })
       ) {
         // Previous calculation was valid, so set isRowCalcReady to true

From d18473dd203bacfd01bb213d2df91edd9fd7b993 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 17:52:35 -0700
Subject: [PATCH 10/29] Draw row fields

---
 src/components/Panel.jsx | 28 ++++++++++++++--------------
 src/scripts/draw.js      | 13 +++++++------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 674b32f..438c203 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -78,8 +78,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
   const rowCalcState = {
     floorVals,
-    canvasHeight,
-    canvasWidth,
+    canvasHeight: canvasWidth,
+    canvasWidth: canvasHeight,
     cols: rows,
     colWidth: rowHeight,
     gutterWidth: rowGutterHeight,
@@ -784,18 +784,6 @@ const Panel = ({ selectionAmount, validSelection }) => {
         <label className={createRows ? 'text-input-combo' : 'hide'}>
           <span>Row Margins</span>
           <div className="multi-inputs">
-            <input
-              type="number"
-              min="0"
-              max={canvasWidth - 1}
-              value={rowTopMargin}
-              onBlur={() => attemptRowGridHeightCalc(rowCalcState)}
-              onChange={(evt) => {
-                setIsRowCalcReady(false)
-                setRowTopMargin(evt.target.value)
-              }}
-              uxp-quiet="true"
-            />
             <input
               type="number"
               min="0"
@@ -832,6 +820,18 @@ const Panel = ({ selectionAmount, validSelection }) => {
               }}
               uxp-quiet="true"
             />
+            <input
+              type="number"
+              min="0"
+              max={canvasWidth - 1}
+              value={rowTopMargin}
+              onBlur={() => attemptRowGridHeightCalc(rowCalcState)}
+              onChange={(evt) => {
+                setIsRowCalcReady(false)
+                setRowTopMargin(evt.target.value)
+              }}
+              uxp-quiet="true"
+            />
           </div>
         </label>
         <div id="info-section">
diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index eef6a71..311ed63 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -138,19 +138,20 @@ const draw = (
           cols: rows,
           colWidth: rowHeight,
           gutterWidth: gutterHeight,
-          topMargin,
-          leftMargin,
+          topMargin: leftMargin,
+          rightMargin: topMargin,
         } = rowCalcState
-        const { rowGridHeight: gridWidth } = rowStatsState
+        const { rowGridHeight } = rowStatsState
         const rowFills = []
         const gridlines = []
         const pos = { x: leftMargin, y: topMargin }
+        console.log(rowCalcState)
 
         // Draw canvas. Used for alignment.
         const canvas = new Rectangle()
         canvas.name = 'Canvas'
-        canvas.width = rowCalcState.canvasHeight
-        canvas.height = rowCalcState.canvasWidth
+        canvas.width = rowCalcState.canvasWidth
+        canvas.height = rowCalcState.canvasHeight
         canvas.fill = new Color('#00ff00', 0.25)
         selection.insertionParent.addChild(canvas)
 
@@ -158,7 +159,7 @@ const draw = (
           if (drawFields) {
             // Draw row
             const row = new Rectangle()
-            row.width = gridWidth
+            row.width = rowGridHeight
             row.height = rowHeight
             row.fill = new Color('#00ffff', 0.5)
             row.name = `Row ${i + 1}`

From 4624627c8a507f6e50c5eca271004e425d939e41 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 18:05:02 -0700
Subject: [PATCH 11/29] Draw row gridlines

---
 src/scripts/draw.js | 64 ++++++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index 311ed63..fc7e29b 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -145,13 +145,12 @@ const draw = (
         const rowFills = []
         const gridlines = []
         const pos = { x: leftMargin, y: topMargin }
-        console.log(rowCalcState)
 
         // Draw canvas. Used for alignment.
         const canvas = new Rectangle()
         canvas.name = 'Canvas'
-        canvas.width = rowCalcState.canvasWidth
-        canvas.height = rowCalcState.canvasHeight
+        canvas.width = rowCalcState.canvasHeight
+        canvas.height = rowCalcState.canvasWidth
         canvas.fill = new Color('#00ff00', 0.25)
         selection.insertionParent.addChild(canvas)
 
@@ -171,31 +170,31 @@ const draw = (
             }
           }
 
-          // if (drawGridlines) {
-          //   // Draw gridlines
-          //   const gridlineA = new Line()
-          //   gridlineA.setStartEnd(pos.x, 0, pos.x, canvasHeight)
-          //   gridlineA.strokeEnabled = true
-          //   gridlineA.strokeWidth = 1
-          //   gridlineA.stroke = new Color('#ff4fff')
-          //   gridlineA.name = 'Gridline'
-          //   gridlines.push(gridlineA)
-          //   selection.insertionParent.addChild(gridlineA)
+          if (drawGridlines) {
+            // Draw gridlines
+            const gridlineA = new Line()
+            gridlineA.setStartEnd(0, pos.y, canvas.width, pos.y)
+            gridlineA.strokeEnabled = true
+            gridlineA.strokeWidth = 1
+            gridlineA.stroke = new Color('#ff4fff')
+            gridlineA.name = 'Gridline'
+            gridlines.push(gridlineA)
+            selection.insertionParent.addChild(gridlineA)
 
-          //   const gridlineB = new Line()
-          //   gridlineB.setStartEnd(
-          //     pos.x + colWidth,
-          //     0,
-          //     pos.x + colWidth,
-          //     canvasHeight
-          //   )
-          //   gridlineB.strokeEnabled = true
-          //   gridlineB.strokeWidth = 1
-          //   gridlineB.stroke = new Color('#ff4fff')
-          //   gridlineB.name = 'Gridline'
-          //   gridlines.push(gridlineB)
-          //   selection.insertionParent.addChild(gridlineB)
-          // }
+            const gridlineB = new Line()
+            gridlineB.setStartEnd(
+              0,
+              pos.y + rowHeight,
+              canvas.width,
+              pos.y + rowHeight
+            )
+            gridlineB.strokeEnabled = true
+            gridlineB.strokeWidth = 1
+            gridlineB.stroke = new Color('#ff4fff')
+            gridlineB.name = 'Gridline'
+            gridlines.push(gridlineB)
+            selection.insertionParent.addChild(gridlineB)
+          }
 
           pos.y += rowHeight + gutterHeight
         }
@@ -207,14 +206,13 @@ const draw = (
         rowGroup.name = 'Rows'
 
         // Group gridlines
-        // selection.items = gridlines
-        // group()
-        // const gridlineGroup = selection.items[0]
-        // gridlineGroup.name = 'Gridlines'
-        // newItems.push(gridlineGroup)
+        selection.items = gridlines
+        group()
+        const gridlineGroup = selection.items[0]
+        gridlineGroup.name = 'Gridlines'
 
         // Group canvas, rows group, and gridlines group
-        selection.items = [rowGroup, canvas]
+        selection.items = [rowGroup, gridlineGroup, canvas]
         group()
         const gridGroup = selection.items[0]
         if (!colCalcState || !colStatsState) {

From 8582c641ecadd17268220a1da2592e3f899d1303 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 18:06:31 -0700
Subject: [PATCH 12/29] Remove deprecated ESLint config property

---
 .eslintrc.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 2060b64..45baed2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -4,9 +4,6 @@
     "plugin:react/recommended",
     "plugin:prettier/recommended"
   ],
-  "ecmaFeatures": {
-    "experimentalObjectRestSpread": true
-  },
   "env": {
     "browser": true,
     "es6": true,

From a815f55e6b7a9e16185a4dab505752471cd96448 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 18:13:53 -0700
Subject: [PATCH 13/29] Fix bug where some row stats are swapped

---
 src/components/Panel.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 438c203..cf4750b 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -878,19 +878,19 @@ const Panel = ({ selectionAmount, validSelection }) => {
           </div>
           <div>
             <span>Row Grid Width:</span>
-            {rowGridWidth}
+            {rowGridHeight}
           </div>
           <div>
             <span>Row Grid Height:</span>
-            {rowGridHeight}
+            {rowGridWidth}
           </div>
           <div>
             <span>Row Right & Left Margin Sum:</span>
-            {rowRightLeftMarginsSum}
+            {rowTopBottomMarginsSum}
           </div>
           <div>
             <span>Row Top & Bottom Margin Sum:</span>
-            {rowTopBottomMarginsSum}
+            {rowRightLeftMarginsSum}
           </div>
           <hr />
         </div>

From c7b3861f3e99d4808753ce8fd07325712eac5a42 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 19:03:56 -0700
Subject: [PATCH 14/29] Update features in README

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cbb9c5f..59c2c61 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,8 @@ The plugin's name is based on Dutch graphic designer [Wim Crouwel](https://en.wi
 ## Features
 
 - Create an unlimited amount of layout grids with varying dimensions, columns, gutters, and margins
-- Build grids and overlay them upon any object: artboards, rectangles, polygons, text, etc.
+- Construct grids with columns or rows or both
+- Produce grids as rectangle fills or gridlines or both
+- Build grids that fit into any object: artboards, rectangles, polygons, text, etc.
 - Use auto-calculations to make sure your grids hold your desired structure while still being valid
 - Support for grid construction using decimals
-- Produce grids as rectangle fills or gridlines or both

From 957208ec12e271f41331be18930bd47a291364d5 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 19:03:56 -0700
Subject: [PATCH 15/29] Update features in README

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cbb9c5f..59c2c61 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,8 @@ The plugin's name is based on Dutch graphic designer [Wim Crouwel](https://en.wi
 ## Features
 
 - Create an unlimited amount of layout grids with varying dimensions, columns, gutters, and margins
-- Build grids and overlay them upon any object: artboards, rectangles, polygons, text, etc.
+- Construct grids with columns or rows or both
+- Produce grids as rectangle fills or gridlines or both
+- Build grids that fit into any object: artboards, rectangles, polygons, text, etc.
 - Use auto-calculations to make sure your grids hold your desired structure while still being valid
 - Support for grid construction using decimals
-- Produce grids as rectangle fills or gridlines or both

From 14575f42c9d20aa52b77438c1389f216116e208e Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Fri, 29 May 2020 17:49:52 -0700
Subject: [PATCH 16/29] Fix bug where canvas width and height values swap when
 updating manual row values

---
 src/components/Panel.jsx | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index cf4750b..9ed63de 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -200,8 +200,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
    */
   const setRowForm = (calcState) => {
     setFloorVals(calcState.floorVals)
-    setCanvasWidth(calcState.canvasWidth)
-    setCanvasHeight(calcState.canvasHeight)
+    setCanvasWidth(calcState.canvasHeight)
+    setCanvasHeight(calcState.canvasWidth)
     setRows(calcState.cols)
     setRowHeight(calcState.colWidth)
     setRowGutterHeight(calcState.gutterWidth)
@@ -933,23 +933,19 @@ const Panel = ({ selectionAmount, validSelection }) => {
                     { drawFields, drawGridlines }
                   )
                 }
-              } else if (createCols) {
-                if (isColCalcReady) {
-                  draw(colCalcState, { gridHeight }, null, null, {
-                    drawFields,
-                    drawGridlines,
-                  })
-                }
-              } else if (createRows) {
-                if (isRowCalcReady) {
-                  draw(
-                    null,
-                    null,
-                    rowCalcState,
-                    { rowGridHeight },
-                    { drawFields, drawGridlines }
-                  )
-                }
+              } else if (createCols && isColCalcReady) {
+                draw(colCalcState, { gridHeight }, null, null, {
+                  drawFields,
+                  drawGridlines,
+                })
+              } else if (createRows && isRowCalcReady) {
+                draw(
+                  null,
+                  null,
+                  rowCalcState,
+                  { rowGridHeight },
+                  { drawFields, drawGridlines }
+                )
               }
             }}
             disabled={

From 0018237ef38d96b95324ec49d59a38e8f54ebae2 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Fri, 29 May 2020 18:37:55 -0700
Subject: [PATCH 17/29] Fix bug where top & bottom margins blur event running
 attemptColGutterWidthCalc instead of attemptGridHeightCalc

---
 src/components/Panel.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 9ed63de..7073f07 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -672,7 +672,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasHeight - 1}
               value={topMargin}
-              onBlur={() => attemptColGutterWidthCalc(colCalcState)}
+              onBlur={() => attemptGridHeightCalc(colCalcState)}
               onChange={(evt) => {
                 setIsColCalcReady(false)
                 setTopMargin(evt.target.value)
@@ -696,7 +696,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasHeight - 1}
               value={bottomMargin}
-              onBlur={() => attemptColGutterWidthCalc(colCalcState)}
+              onBlur={() => attemptGridHeightCalc(colCalcState)}
               onChange={(evt) => {
                 setIsColCalcReady(false)
                 setBottomMargin(evt.target.value)

From 0e6e68d206ed32ef6cc3e356bce6631fe3b1fad5 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 2 Jun 2020 21:00:45 -0700
Subject: [PATCH 18/29] Fix bug where col draw errs if draw fields & gridlines
 aren't both selected

---
 src/scripts/draw.js | 57 +++++++++++++++++++++++++++++++--------------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index fc7e29b..df973f2 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -87,27 +87,48 @@ const draw = (
           pos.x += colWidth + gutterWidth
         }
 
-        // Group columns
-        selection.items = colFills
-        group()
-        const colGroup = selection.items[0]
-        colGroup.name = 'Columns'
+        let colGroup
+        let gridlineGroup
 
-        // Group gridlines
-        selection.items = gridlines
-        group()
-        const gridlineGroup = selection.items[0]
-        gridlineGroup.name = 'Gridlines'
+        if (drawFields) {
+          // Group columns
+          selection.items = colFills
+          group()
+          colGroup = selection.items[0]
+          colGroup.name = 'Column Fields'
+        }
 
-        // Group canvas, columns group, and gridlines group
-        selection.items = [colGroup, gridlineGroup, canvas]
-        group()
-        const gridGroup = selection.items[0]
-        if (!rowCalcState || !rowStatsState) {
+        if (drawGridlines) {
+          // Group gridlines
+          selection.items = gridlines
+          group()
+          gridlineGroup = selection.items[0]
+          gridlineGroup.name = 'Column Gridlines'
+        }
+
+        let gridGroup
+        if (drawFields && drawGridlines) {
+          // Group canvas, columns group, and gridlines group
+          selection.items = [colGroup, gridlineGroup, canvas]
+          group()
+          gridGroup = selection.items[0]
+
+          if (!rowCalcState || !rowStatsState) {
+            gridGroup.name = 'Gridnik Grid'
+          } else {
+            gridGroup.name = 'Column Grid'
+            newItems.push(gridGroup)
+          }
+        } else if (drawFields) {
+          selection.items = [colGroup, canvas]
+          group()
+          gridGroup = selection.items[0]
+          gridGroup.name = 'Gridnik Grid'
+        } else if (drawGridlines) {
+          selection.items = [gridlineGroup, canvas]
+          group()
+          gridGroup = selection.items[0]
           gridGroup.name = 'Gridnik Grid'
-        } else {
-          gridGroup.name = 'Column Grid'
-          newItems.push(gridGroup)
         }
 
         const topLeftGroupPos = {

From 5a5147d485a043900bbebbc2459a3b56e2f3671a Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 2 Jun 2020 21:08:53 -0700
Subject: [PATCH 19/29] Fix bug where row draw errs if draw fields & gridlines
 aren't both selected

---
 src/scripts/draw.js | 59 ++++++++++++++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index df973f2..82b3fb1 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -88,8 +88,6 @@ const draw = (
         }
 
         let colGroup
-        let gridlineGroup
-
         if (drawFields) {
           // Group columns
           selection.items = colFills
@@ -98,6 +96,7 @@ const draw = (
           colGroup.name = 'Column Fields'
         }
 
+        let gridlineGroup
         if (drawGridlines) {
           // Group gridlines
           selection.items = gridlines
@@ -220,27 +219,47 @@ const draw = (
           pos.y += rowHeight + gutterHeight
         }
 
-        // Group columns
-        selection.items = rowFills
-        group()
-        const rowGroup = selection.items[0]
-        rowGroup.name = 'Rows'
+        let rowGroup
+        if (drawFields) {
+          // Group columns
+          selection.items = rowFills
+          group()
+          rowGroup = selection.items[0]
+          rowGroup.name = 'Row Fields'
+        }
 
-        // Group gridlines
-        selection.items = gridlines
-        group()
-        const gridlineGroup = selection.items[0]
-        gridlineGroup.name = 'Gridlines'
+        let gridlineGroup
+        if (drawGridlines) {
+          // Group gridlines
+          selection.items = gridlines
+          group()
+          gridlineGroup = selection.items[0]
+          gridlineGroup.name = 'Row Gridlines'
+        }
 
-        // Group canvas, rows group, and gridlines group
-        selection.items = [rowGroup, gridlineGroup, canvas]
-        group()
-        const gridGroup = selection.items[0]
-        if (!colCalcState || !colStatsState) {
+        let gridGroup
+        if (drawFields && drawGridlines) {
+          // Group canvas, rows group, and gridlines group
+          selection.items = [rowGroup, gridlineGroup, canvas]
+          group()
+          gridGroup = selection.items[0]
+
+          if (!colCalcState || !colStatsState) {
+            gridGroup.name = 'Gridnik Grid'
+          } else {
+            gridGroup.name = 'Row Grid'
+            newItems.push(gridGroup)
+          }
+        } else if (drawFields) {
+          selection.items = [rowGroup, canvas]
+          group()
+          gridGroup = selection.items[0]
+          gridGroup.name = 'Gridnik Grid'
+        } else if (drawGridlines) {
+          selection.items = [gridlineGroup, canvas]
+          group()
+          gridGroup = selection.items[0]
           gridGroup.name = 'Gridnik Grid'
-        } else {
-          gridGroup.name = 'Row Grid'
-          newItems.push(gridGroup)
         }
 
         const topLeftGroupPos = {

From 1395f4c822f73cc2839c116cc61db358020c5447 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 2 Jun 2020 21:15:14 -0700
Subject: [PATCH 20/29] Fix bug where draw fields & gridlines checkboxes are
 changed when create cols & rows checkboxes are disabled

---
 src/components/Panel.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 7073f07..55c8e9e 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -114,8 +114,6 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setRightMargin(0)
     setBottomMargin(0)
     setLeftMargin(0)
-    setDrawFields(true)
-    setDrawGridlines(true)
     resetColStats()
   }
 
@@ -144,8 +142,6 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setRowRightMargin(0)
     setRowBottomMargin(0)
     setRowLeftMargin(0)
-    setDrawFields(true)
-    setDrawGridlines(true)
     resetRowStats()
   }
 

From 586836daa46828415c73f1f7366b198d11101e5a Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 7 Jun 2020 16:37:20 -0700
Subject: [PATCH 21/29] Update UI, update devDependencies - Rename col gutter
 width to gutter width & row gutter height to gutter height - Hide col & row
 info when their create flags are set to false - Move devDependencies that
 aren't supposed to be in dependencies - Update transform-react-jsx plugin
 (mainly to handle fragments)

---
 package.json             |  17 +-
 src/components/Panel.jsx | 144 +++++++--------
 webpack.config.js        |   2 +-
 yarn.lock                | 367 ++++++++-------------------------------
 4 files changed, 160 insertions(+), 370 deletions(-)

diff --git a/package.json b/package.json
index aa05b93..f759009 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,12 @@
     "watch": "nodemon -w src -e js,jsx,css -w webpack.config.js -x yarn build"
   },
   "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-transform-react-jsx": "^7.10.1",
+    "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.0.0",
+    "css-loader": "^3.5.3",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-jest": "^23.13.1",
@@ -24,19 +28,14 @@
     "jest": "^26.0.1",
     "nodemon": "^2.0.4",
     "prettier": "^2.0.5",
+    "style-loader": "^1.2.1",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "yarn": "^1.22.4"
   },
   "dependencies": {
-    "@babel/core": "^7.9.6",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "css-loader": "^3.5.3",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "style-loader": "^1.2.1",
-    "yarn": "^1.22.4"
+    "react-dom": "^16.13.1"
   }
 }
diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 55c8e9e..d61615e 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -36,7 +36,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
   const [createRows, setCreateRows] = useState(true)
   const [rows, setRows] = useState('')
-  const [rowGutterHeight, setRowGutterHeight] = useState(0)
+  const [gutterHeight, setGutterHeight] = useState(0)
   const [rowHeight, setRowHeight] = useState('')
   const [rowTopMargin, setRowTopMargin] = useState(0)
   const [rowRightMargin, setRowRightMargin] = useState(0)
@@ -53,7 +53,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
   const [rowHeightsSum, setRowHeightsSum] = useState('N/A')
   const [rowGridHeight, setRowGridHeight] = useState('N/A')
   const [rowGridWidth, setRowGridWidth] = useState('N/A')
-  const [rowGutterHeightsSum, setRowGutterHeightsSum] = useState('N/A')
+  const [gutterHeightsSum, setGutterHeightsSum] = useState('N/A')
   const [rowTopBottomMarginsSum, setRowTopBottomMarginsSum] = useState(0)
   const [rowRightLeftMarginsSum, setRowRightLeftMarginsSum] = useState(0)
 
@@ -82,7 +82,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
     canvasWidth: canvasHeight,
     cols: rows,
     colWidth: rowHeight,
-    gutterWidth: rowGutterHeight,
+    gutterWidth: gutterHeight,
     topMargin: rowTopMargin,
     rightMargin: rowRightMargin,
     bottomMargin: rowBottomMargin,
@@ -124,7 +124,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setRowHeightsSum('N/A')
     setRowGridHeight('N/A')
     setRowGridWidth('N/A')
-    setRowGutterHeightsSum('N/A')
+    setGutterHeightsSum('N/A')
     setRowTopBottomMarginsSum(0)
     setRowRightLeftMarginsSum(0)
     setIsRowCalcReady(false)
@@ -136,7 +136,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
   const resetRowForm = () => {
     setFloorVals(true)
     setRows('')
-    setRowGutterHeight(0)
+    setGutterHeight(0)
     setRowHeight('')
     setRowTopMargin(0)
     setRowRightMargin(0)
@@ -162,7 +162,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setLeftMargin(0)
 
     setRows('')
-    setRowGutterHeight(0)
+    setGutterHeight(0)
     setRowHeight('')
     setRowTopMargin(0)
     setRowRightMargin(0)
@@ -200,7 +200,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setCanvasHeight(calcState.canvasWidth)
     setRows(calcState.cols)
     setRowHeight(calcState.colWidth)
-    setRowGutterHeight(calcState.gutterWidth)
+    setGutterHeight(calcState.gutterWidth)
     setRowTopMargin(calcState.topMargin)
     setRowRightMargin(calcState.rightMargin)
     setRowBottomMargin(calcState.bottomMargin)
@@ -315,10 +315,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
   }
 
   /**
-   * Attempt calculations for column gutter width.
+   * Attempt calculations for gutter width.
    * @param {Object} calcState State for calculations
    */
-  const attemptColGutterWidthCalc = (calcState) => {
+  const attemptGutterWidthCalc = (calcState) => {
     const result = validateAndCalcGutterWidth(calcState)
 
     if (result) {
@@ -386,7 +386,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       // Final result was successful
       setRowHeightsSum(result.colWidthsSum)
       setRowGridWidth(result.gridWidth)
-      setRowGutterHeightsSum(result.gutterWidthsSum)
+      setGutterHeightsSum(result.gutterWidthsSum)
       setRowRightLeftMarginsSum(result.rightLeftMarginsSum)
 
       // Calculate grid height
@@ -403,17 +403,17 @@ const Panel = ({ selectionAmount, validSelection }) => {
   }
 
   /**
-   * Attempt calculations for row gutter height.
+   * Attempt calculations for gutter height.
    * @param {Object} calcState State for calculations
    */
-  const attemptRowGutterHeightCalc = (calcState) => {
+  const attemptGutterHeightCalc = (calcState) => {
     const result = validateAndCalcGutterWidth(calcState)
 
     if (result) {
       // Final result was successful
       setRowHeightsSum(result.colWidthsSum)
       setRowGridWidth(result.gridWidth)
-      setRowGutterHeightsSum(result.gutterWidthsSum)
+      setGutterHeightsSum(result.gutterWidthsSum)
       setRowRightLeftMarginsSum(result.rightLeftMarginsSum)
 
       // Calculate grid height
@@ -448,7 +448,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
       if (
         validateStats({
           colWidthsSum: rowHeightsSum,
-          gutterWidthsSum: rowGutterHeightsSum,
+          gutterWidthsSum: gutterHeightsSum,
           gridWidth: rowGridWidth,
           gridHeight: result.gridHeight,
           rightLeftMarginsSum: rowRightLeftMarginsSum,
@@ -629,7 +629,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
           />
         </label>
         <label className={createCols ? 'text-input-combo' : 'hide'}>
-          <span>Column Gutter Width</span>
+          <span>Gutter Width</span>
           <input
             type="number"
             min="0"
@@ -651,7 +651,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             min="1"
             max={canvasWidth}
             value={colWidth}
-            onBlur={() => attemptColGutterWidthCalc(colCalcState)}
+            onBlur={() => attemptGutterWidthCalc(colCalcState)}
             onChange={(evt) => {
               setIsColCalcReady(false)
               setColWidth(evt.target.value)
@@ -746,16 +746,16 @@ const Panel = ({ selectionAmount, validSelection }) => {
           />
         </label>
         <label className={createRows ? 'text-input-combo' : 'hide'}>
-          <span>Row Gutter Height</span>
+          <span>Gutter Height</span>
           <input
             type="number"
             min="0"
             max={canvasHeight - 1}
-            value={rowGutterHeight}
+            value={gutterHeight}
             onBlur={() => attemptRowHeightCalc(rowCalcState)}
             onChange={(evt) => {
               setIsRowCalcReady(false)
-              setRowGutterHeight(evt.target.value)
+              setGutterHeight(evt.target.value)
             }}
             className="input-lg"
             uxp-quiet="true"
@@ -768,7 +768,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
             min="1"
             max={canvasHeight}
             value={rowHeight}
-            onBlur={() => attemptRowGutterHeightCalc(rowCalcState)}
+            onBlur={() => attemptGutterHeightCalc(rowCalcState)}
             onChange={(evt) => {
               setIsRowCalcReady(false)
               setRowHeight(evt.target.value)
@@ -840,54 +840,62 @@ const Panel = ({ selectionAmount, validSelection }) => {
             <span>Selected Type:</span>
             {validSelection.constructor.name}
           </div>
-          <div>
-            <span>Column Width Sum:</span>
-            {colWidthsSum}
-          </div>
-          <div>
-            <span>Column Gutter Width Sum:</span>
-            {gutterWidthsSum}
-          </div>
-          <div>
-            <span>Column Grid Width:</span>
-            {gridWidth}
-          </div>
-          <div>
-            <span>Column Grid Height:</span>
-            {gridHeight}
-          </div>
-          <div>
-            <span>Column Right & Left Margin Sum:</span>
-            {rightLeftMarginsSum}
-          </div>
-          <div>
-            <span>Column Top & Bottom Margin Sum:</span>
-            {topBottomMarginsSum}
-          </div>
-          <div>
-            <span>Row Height Sum:</span>
-            {rowHeightsSum}
-          </div>
-          <div>
-            <span>Row Gutter Height Sum:</span>
-            {rowGutterHeightsSum}
-          </div>
-          <div>
-            <span>Row Grid Width:</span>
-            {rowGridHeight}
-          </div>
-          <div>
-            <span>Row Grid Height:</span>
-            {rowGridWidth}
-          </div>
-          <div>
-            <span>Row Right & Left Margin Sum:</span>
-            {rowTopBottomMarginsSum}
-          </div>
-          <div>
-            <span>Row Top & Bottom Margin Sum:</span>
-            {rowRightLeftMarginsSum}
-          </div>
+          {createCols && (
+            <>
+              <div>
+                <span>Column Width Sum:</span>
+                {colWidthsSum}
+              </div>
+              <div>
+                <span>Gutter Width Sum:</span>
+                {gutterWidthsSum}
+              </div>
+              <div>
+                <span>Column Grid Width:</span>
+                {gridWidth}
+              </div>
+              <div>
+                <span>Column Grid Height:</span>
+                {gridHeight}
+              </div>
+              <div>
+                <span>Column Right & Left Margin Sum:</span>
+                {rightLeftMarginsSum}
+              </div>
+              <div>
+                <span>Column Top & Bottom Margin Sum:</span>
+                {topBottomMarginsSum}
+              </div>
+            </>
+          )}
+          {createRows && (
+            <>
+              <div>
+                <span>Row Height Sum:</span>
+                {rowHeightsSum}
+              </div>
+              <div>
+                <span>Gutter Height Sum:</span>
+                {gutterHeightsSum}
+              </div>
+              <div>
+                <span>Row Grid Width:</span>
+                {rowGridHeight}
+              </div>
+              <div>
+                <span>Row Grid Height:</span>
+                {rowGridWidth}
+              </div>
+              <div>
+                <span>Row Right & Left Margin Sum:</span>
+                {rowTopBottomMarginsSum}
+              </div>
+              <div>
+                <span>Row Top & Bottom Margin Sum:</span>
+                {rowRightLeftMarginsSum}
+              </div>
+            </>
+          )}
           <hr />
         </div>
         <label className="text-input-combo">
diff --git a/webpack.config.js b/webpack.config.js
index 28fe24c..f13a400 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -16,7 +16,7 @@ const config = {
         exclude: /node_modules/,
         loader: 'babel-loader',
         options: {
-          plugins: ['transform-react-jsx'],
+          plugins: ['@babel/plugin-transform-react-jsx'],
         },
       },
       {
diff --git a/yarn.lock b/yarn.lock
index 2dc00f4..dd944ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,6 +41,30 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/helper-annotate-as-pure@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz#f6d08acc6f70bbd59b436262553fb2e259a1a268"
+  integrity sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw==
+  dependencies:
+    "@babel/types" "^7.10.1"
+
+"@babel/helper-builder-react-jsx-experimental@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.1.tgz#9a7d58ad184d3ac3bafb1a452cec2bad7e4a0bc8"
+  integrity sha512-irQJ8kpQUV3JasXPSFQ+LCCtJSc5ceZrPFVj6TElR6XCHssi3jV8ch3odIrNtjJFRZZVbrOEfJMI79TPU/h1pQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.1"
+    "@babel/helper-module-imports" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
+"@babel/helper-builder-react-jsx@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.1.tgz#a327f0cf983af5554701b1215de54a019f09b532"
+  integrity sha512-KXzzpyWhXgzjXIlJU1ZjIXzUPdej1suE6vzqgImZ/cpAsR/CC8gUcX4EWRmDfWz/cs6HOCPMBIJ3nKoXt3BFuw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-function-name@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz#2b53820d35275120e1874a82e5aabe1376920a5c"
@@ -64,6 +88,13 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-module-imports@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz#dd331bd45bccc566ce77004e9d05fe17add13876"
+  integrity sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==
+  dependencies:
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-module-imports@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
@@ -96,6 +127,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
   integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
+"@babel/helper-plugin-utils@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz#ec5a5cf0eec925b66c60580328b122c01230a127"
+  integrity sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==
+
 "@babel/helper-replace-supers@^7.8.6":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.9.6.tgz#03149d7e6a5586ab6764996cd31d6981a17e1444"
@@ -121,6 +157,11 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-validator-identifier@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz#5770b0c1a826c4f53f5ede5e153163e0318e94b5"
+  integrity sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==
+
 "@babel/helper-validator-identifier@^7.9.0", "@babel/helper-validator-identifier@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
@@ -177,6 +218,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.1.tgz#0ae371134a42b91d5418feb3c8c8d43e1565d2da"
+  integrity sha512-+OxyOArpVFXQeXKLO9o+r2I4dIoVoy6+Uu0vKELrlweDM3QJADZj+Z+5ERansZqIZBcLj42vHnDI8Rz9BnRIuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.8.3.tgz#3995d7d7ffff432f6ddc742b47e730c054599897"
@@ -219,6 +267,16 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-transform-react-jsx@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.1.tgz#91f544248ba131486decb5d9806da6a6e19a2896"
+  integrity sha512-MBVworWiSRBap3Vs39eHt+6pJuLUAaK4oxGc8g+wY+vuSJvLiEQjW1LSTqKb8OUPtDvHCkdPhk7d6sjC19xyFw==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.1"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.1"
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-jsx" "^7.10.1"
+
 "@babel/runtime-corejs3@^7.8.3":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.9.6.tgz#67aded13fffbbc2cb93247388cf84d77a4be9a71"
@@ -260,6 +318,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.10.1":
+  version "7.10.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.2.tgz#30283be31cad0dbf6fb00bd40641ca0ea675172d"
+  integrity sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.1"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -923,11 +990,6 @@ ansi-escapes@^4.2.1:
   dependencies:
     type-fest "^0.11.0"
 
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
 ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
@@ -938,11 +1000,6 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1096,71 +1153,6 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
 
-babel-code-frame@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
-  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
-  dependencies:
-    chalk "^1.1.3"
-    esutils "^2.0.2"
-    js-tokens "^3.0.2"
-
-babel-core@^6.26.0, babel-core@^6.26.3:
-  version "6.26.3"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
-  integrity sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-generator "^6.26.0"
-    babel-helpers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-register "^6.26.0"
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    convert-source-map "^1.5.1"
-    debug "^2.6.9"
-    json5 "^0.5.1"
-    lodash "^4.17.4"
-    minimatch "^3.0.4"
-    path-is-absolute "^1.0.1"
-    private "^0.1.8"
-    slash "^1.0.0"
-    source-map "^0.5.7"
-
-babel-generator@^6.26.0:
-  version "6.26.1"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
-  integrity sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==
-  dependencies:
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    detect-indent "^4.0.0"
-    jsesc "^1.3.0"
-    lodash "^4.17.4"
-    source-map "^0.5.7"
-    trim-right "^1.0.1"
-
-babel-helper-builder-react-jsx@^6.24.1:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
-  integrity sha1-Of+DE7dci2Xc7/HzHTg+D/KkCKA=
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    esutils "^2.0.2"
-
-babel-helpers@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
-  integrity sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
 babel-jest@^26.0.1:
   version "26.0.1"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.0.1.tgz#450139ce4b6c17174b136425bda91885c397bc46"
@@ -1186,13 +1178,6 @@ babel-loader@^8.1.0:
     pify "^4.0.1"
     schema-utils "^2.6.5"
 
-babel-messages@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
-  integrity sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=
-  dependencies:
-    babel-runtime "^6.22.0"
-
 babel-plugin-istanbul@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
@@ -1213,20 +1198,6 @@ babel-plugin-jest-hoist@^26.0.0:
     "@babel/types" "^7.3.3"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-syntax-jsx@^6.8.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
-babel-plugin-transform-react-jsx@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
-  integrity sha1-hAoCjn30YN/DotKfDA2R9jduZqM=
-  dependencies:
-    babel-helper-builder-react-jsx "^6.24.1"
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
 babel-preset-current-node-syntax@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.2.tgz#fb4a4c51fe38ca60fede1dc74ab35eb843cb41d6"
@@ -1251,68 +1222,6 @@ babel-preset-jest@^26.0.0:
     babel-plugin-jest-hoist "^26.0.0"
     babel-preset-current-node-syntax "^0.1.2"
 
-babel-register@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
-  integrity sha1-btAhFz4vy0htestFxgCahW9kcHE=
-  dependencies:
-    babel-core "^6.26.0"
-    babel-runtime "^6.26.0"
-    core-js "^2.5.0"
-    home-or-tmp "^2.0.0"
-    lodash "^4.17.4"
-    mkdirp "^0.5.1"
-    source-map-support "^0.4.15"
-
-babel-runtime@^6.22.0, babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babel-template@^6.24.1, babel-template@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
-  integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    lodash "^4.17.4"
-
-babel-traverse@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
-  integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    debug "^2.6.8"
-    globals "^9.18.0"
-    invariant "^2.2.2"
-    lodash "^4.17.4"
-
-babel-types@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
-  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
-  dependencies:
-    babel-runtime "^6.26.0"
-    esutils "^2.0.2"
-    lodash "^4.17.4"
-    to-fast-properties "^1.0.3"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -1634,17 +1543,6 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
 chalk@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
@@ -1901,7 +1799,7 @@ constants-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -1946,11 +1844,6 @@ core-js-pure@^3.0.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
   integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
 
-core-js@^2.4.0, core-js@^2.5.0:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
-  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2091,7 +1984,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -2214,13 +2107,6 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-indent@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
-  integrity sha1-920GQ1LN9Docts5hnE7jqUdd4gg=
-  dependencies:
-    repeating "^2.0.0"
-
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -2406,7 +2292,7 @@ escape-goat@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
   integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -3074,11 +2960,6 @@ globals@^12.1.0:
   dependencies:
     type-fest "^0.8.1"
 
-globals@^9.18.0:
-  version "9.18.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
-  integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
-
 globby@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.0.tgz#56fd0e9f0d4f8fb0c456f1ab0dee96e1380bc154"
@@ -3142,13 +3023,6 @@ har-validator@~5.1.3:
     ajv "^6.5.5"
     har-schema "^2.0.0"
 
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
-  dependencies:
-    ansi-regex "^2.0.0"
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -3233,14 +3107,6 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-home-or-tmp@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
-  integrity sha1-42w/LSyufXRqhX440Y1fMqeILbg=
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.1"
-
 homedir-polyfill@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -3438,13 +3304,6 @@ interpret@1.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
-invariant@^2.2.2:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 invert-kv@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
@@ -3564,11 +3423,6 @@ is-extglob@^2.1.0, is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
-is-finite@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
-  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
-
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
@@ -4153,11 +4007,6 @@ jest@^26.0.1:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-tokens@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
-
 js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
@@ -4203,11 +4052,6 @@ jsdom@^16.2.2:
     ws "^7.2.3"
     xml-name-validator "^3.0.0"
 
-jsesc@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
-  integrity sha1-RsP+yMGJKxKwgz25vHYiF226s0s=
-
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -4243,11 +4087,6 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json5@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
-  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
-
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -4408,12 +4247,12 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4:
+lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4990,11 +4829,6 @@ os-browserify@^0.3.0:
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
 os-locale@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
@@ -5004,7 +4838,7 @@ os-locale@^3.1.0:
     lcid "^2.0.0"
     mem "^4.0.0"
 
-os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
+os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
@@ -5160,7 +4994,7 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
+path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
@@ -5352,11 +5186,6 @@ pretty-format@^26.0.1:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
-private@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
-  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -5589,11 +5418,6 @@ readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
@@ -5649,13 +5473,6 @@ repeat-string@^1.6.1:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
-repeating@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
-  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
-  dependencies:
-    is-finite "^1.0.0"
-
 request-promise-core@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
@@ -6016,11 +5833,6 @@ sisteransi@^1.0.4:
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
-slash@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
-  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
-
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -6081,13 +5893,6 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@^0.4.15:
-  version "0.4.18"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
-  integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
-  dependencies:
-    source-map "^0.5.6"
-
 source-map-support@^0.5.6, source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -6101,7 +5906,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
-source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
+source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -6321,13 +6126,6 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-strip-ansi@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
 strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
@@ -6382,11 +6180,6 @@ supports-color@6.1.0, supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -6534,11 +6327,6 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-fast-properties@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
-  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -6612,11 +6400,6 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
-trim-right@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
-  integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
-
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"

From 148b5b776ac5fead6251f2eb741b7e302b457039 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 7 Jun 2020 17:31:29 -0700
Subject: [PATCH 22/29] Recalculate col width or row height when floorVals or
 canvas size is changed

---
 src/components/Panel.jsx | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index d61615e..371a3db 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -541,6 +541,16 @@ const Panel = ({ selectionAmount, validSelection }) => {
             checked={floorVals}
             onChange={(evt) => {
               setFloorVals(evt.target.checked)
+              colCalcState.floorVals = evt.target.checked
+              rowCalcState.floorVals = evt.target.checked
+
+              if (createCols) {
+                attemptColWidthCalc(colCalcState)
+              }
+
+              if (createRows) {
+                attemptRowHeightCalc(rowCalcState)
+              }
             }}
             uxp-quiet="true"
           />
@@ -570,7 +580,15 @@ const Panel = ({ selectionAmount, validSelection }) => {
               type="number"
               min="1"
               value={canvasWidth}
-              onBlur={() => attemptColWidthCalc(colCalcState)}
+              onBlur={() => {
+                if (createCols) {
+                  attemptColWidthCalc(colCalcState)
+                }
+
+                if (createRows) {
+                  attemptRowGridHeightCalc(rowCalcState)
+                }
+              }}
               onChange={(evt) => {
                 setIsColCalcReady(false)
                 setCanvasWidth(evt.target.value)
@@ -584,7 +602,15 @@ const Panel = ({ selectionAmount, validSelection }) => {
               type="number"
               min="1"
               value={canvasHeight}
-              onBlur={() => attemptGridHeightCalc(colCalcState)}
+              onBlur={() => {
+                if (createCols) {
+                  attemptGridHeightCalc(colCalcState)
+                }
+
+                if (createRows) {
+                  attemptRowHeightCalc(rowCalcState)
+                }
+              }}
               onChange={(evt) => {
                 setIsColCalcReady(false)
                 setCanvasHeight(evt.target.value)

From de9e4a70a36cb53f8bc3a0ca6328aad5d0db249e Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 8 Jun 2020 15:20:46 -0700
Subject: [PATCH 23/29] Progress on fixing margin calc bug

---
 src/components/Panel.jsx | 12 ++++++------
 src/scripts/calc.js      | 32 ++++++++++++++++++++++++--------
 src/scripts/calc.test.js |  6 +++---
 3 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 371a3db..623d5b2 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -212,7 +212,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
    * @param {Object} calcState State for calculations
    * @returns {Object|null} If a final successful calculation occurred, it will be returned, otherwise it will return null
    */
-  const validateAndCalcColWidth = (calcState) => {
+  const validateAndCalcColWidth = (calcState, setLeft = false) => {
     let finalResult
     // Clean inputs to possible values
     // May not be enough inputs for calculations though
@@ -223,7 +223,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
     if (canCalcColWidth) {
       // calcColWidth is possible
-      const results = calcColWidth(calcState, [
+      const results = calcColWidth(calcState, setLeft, [
         'rightLeftMargins',
         'cols',
         'gutterWidth',
@@ -263,7 +263,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
     if (canCalcGutterWidth) {
       // calcGutterWidth is possible
-      const results = calcGutterWidth(calcState, [
+      const results = calcGutterWidth(calcState, false, [
         'rightLeftMargins',
         'cols',
         'colWidth',
@@ -291,8 +291,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
    * Attempt calculations for column width.
    * @param {Object} calcState State for calculations
    */
-  const attemptColWidthCalc = (calcState) => {
-    const result = validateAndCalcColWidth(calcState)
+  const attemptColWidthCalc = (calcState, setLeft = false) => {
+    const result = validateAndCalcColWidth(calcState, setLeft)
 
     if (result) {
       // Final result was successful
@@ -706,7 +706,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasWidth - 1}
               value={rightMargin}
-              onBlur={() => attemptColWidthCalc(colCalcState)}
+              onBlur={() => attemptColWidthCalc(colCalcState, true)}
               onChange={(evt) => {
                 setIsColCalcReady(false)
                 setRightMargin(evt.target.value)
diff --git a/src/scripts/calc.js b/src/scripts/calc.js
index 1f313b9..df3cc72 100644
--- a/src/scripts/calc.js
+++ b/src/scripts/calc.js
@@ -58,6 +58,7 @@ module.exports.calcRightLeftMargins = calcRightLeftMargins
  */
 const calcColWidth = (
   calcState,
+  setLeft = false,
   orderOfCorrections = [],
   results = [],
   correctedData
@@ -98,6 +99,16 @@ const calcColWidth = (
   if (validateCalcResult(currResult)) {
     // Valid calculation reached
     calcState.colWidth = colWidth
+
+    // Adjust margins
+    if (setLeft) {
+      calcState.leftMargin =
+        calcState.canvasWidth - currResult.gridWidth - calcState.rightMargin
+    } else {
+      calcState.rightMargin =
+        calcState.canvasWidth - currResult.gridWidth - calcState.leftMargin
+    }
+
     return results
   }
 
@@ -105,24 +116,26 @@ const calcColWidth = (
   const correction = orderOfCorrections.pop()
 
   if (correction === 'colWidth') {
-    return calcGutterWidth(calcState, orderOfCorrections, results, {
+    return calcGutterWidth(calcState, setLeft, orderOfCorrections, results, {
       colWidth: 1,
     })
   }
 
   if (correction === 'gutterWidth') {
-    return calcColWidth(calcState, orderOfCorrections, results, {
+    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
       gutterWidth: 0,
     })
   }
 
   if (correction === 'cols') {
     calcState.cols = 1
-    return calcColWidth(calcState, orderOfCorrections, results, { col: 1 })
+    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
+      col: 1,
+    })
   }
 
   if (correction === 'rightLeftMargins') {
-    return calcColWidth(calcState, orderOfCorrections, results, {
+    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
       leftMargin: 0,
       bottomMargin: 0,
     })
@@ -145,6 +158,7 @@ module.exports.calcColWidth = calcColWidth
  */
 const calcGutterWidth = (
   calcState,
+  setLeft = false,
   orderOfCorrections = [],
   results = [],
   correctedData
@@ -193,24 +207,26 @@ const calcGutterWidth = (
   const correction = orderOfCorrections.pop()
 
   if (correction === 'colWidth') {
-    return calcGutterWidth(calcState, orderOfCorrections, results, {
+    return calcGutterWidth(calcState, setLeft, orderOfCorrections, results, {
       colWidth: 1,
     })
   }
 
   if (correction === 'gutterWidth') {
-    return calcColWidth(calcState, orderOfCorrections, results, {
+    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
       gutterWidth: 0,
     })
   }
 
   if (correction === 'cols') {
     calcState.cols = 1
-    return calcColWidth(calcState, orderOfCorrections, results, { col: 1 })
+    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
+      col: 1,
+    })
   }
 
   if (correction === 'rightLeftMargins') {
-    return calcColWidth(calcState, orderOfCorrections, results, {
+    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
       leftMargin: 0,
       bottomMargin: 0,
     })
diff --git a/src/scripts/calc.test.js b/src/scripts/calc.test.js
index 63fbc66..28064a5 100644
--- a/src/scripts/calc.test.js
+++ b/src/scripts/calc.test.js
@@ -107,7 +107,7 @@ describe('calcColWidth', () => {
       rightMargin: 390,
       leftMargin: 390,
     }
-    const results = calcColWidth(calcData, [
+    const results = calcColWidth(calcData, false, [
       'rightLeftMargins',
       'cols',
       'gutterWidth',
@@ -156,7 +156,7 @@ describe('calcColWidth', () => {
       rightMargin: 390,
       leftMargin: 390,
     }
-    const results = calcColWidth(calcData, [
+    const results = calcColWidth(calcData, false, [
       'rightLeftMargins',
       'cols',
       'gutterWidth',
@@ -266,7 +266,7 @@ describe('calcGutterWidth', () => {
       rightMargin: 390,
       leftMargin: 390,
     }
-    const results = calcGutterWidth(calcData, [
+    const results = calcGutterWidth(calcData, false, [
       'rightLeftMargins',
       'cols',
       'colWidth',

From 81c7f7d63a7b89a5d387a0687c9b0905f1411e34 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 8 Jun 2020 15:39:09 -0700
Subject: [PATCH 24/29] Fix margin bug on rows

---
 src/components/Panel.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 623d5b2..bf87f49 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -379,8 +379,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
    * Attempt calculations for row height.
    * @param {Object} calcState State for calculations
    */
-  const attemptRowHeightCalc = (calcState) => {
-    const result = validateAndCalcColWidth(calcState)
+  const attemptRowHeightCalc = (calcState, setLeft = true) => {
+    const result = validateAndCalcColWidth(calcState, setLeft)
 
     if (result) {
       // Final result was successful
@@ -835,7 +835,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="0"
               max={canvasHeight - 1}
               value={rowLeftMargin}
-              onBlur={() => attemptRowHeightCalc(rowCalcState)}
+              onBlur={() => attemptRowHeightCalc(rowCalcState, false)}
               onChange={(evt) => {
                 setIsRowCalcReady(false)
                 setRowLeftMargin(evt.target.value)

From 8848420cade08386cce6e59b84acce935feea0c7 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 8 Jun 2020 15:56:26 -0700
Subject: [PATCH 25/29] Minor updates - Rename setLeft flag to updateLeftMargin
 - Update JSDocs to doc updateLeftMargin

---
 src/components/Panel.jsx |  15 +++---
 src/scripts/calc.js      | 109 ++++++++++++++++++++++++++++-----------
 2 files changed, 88 insertions(+), 36 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index bf87f49..5093778 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -210,9 +210,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
   /**
    * Validates calcState for calcColWidth. If validation is successful, calcColWidth is called.
    * @param {Object} calcState State for calculations
+   * @param {boolean} [updateLeftMargin=false] Flag to control update for left margin. By default it is set to false, so the right margin will be updated.
    * @returns {Object|null} If a final successful calculation occurred, it will be returned, otherwise it will return null
    */
-  const validateAndCalcColWidth = (calcState, setLeft = false) => {
+  const validateAndCalcColWidth = (calcState, updateLeftMargin = false) => {
     let finalResult
     // Clean inputs to possible values
     // May not be enough inputs for calculations though
@@ -223,7 +224,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
 
     if (canCalcColWidth) {
       // calcColWidth is possible
-      const results = calcColWidth(calcState, setLeft, [
+      const results = calcColWidth(calcState, updateLeftMargin, [
         'rightLeftMargins',
         'cols',
         'gutterWidth',
@@ -290,9 +291,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
   /**
    * Attempt calculations for column width.
    * @param {Object} calcState State for calculations
+   * @param {boolean} [updateLeftMargin=false] Flag to control update for left margin. By default it is set to false, so the right margin will be updated.
    */
-  const attemptColWidthCalc = (calcState, setLeft = false) => {
-    const result = validateAndCalcColWidth(calcState, setLeft)
+  const attemptColWidthCalc = (calcState, updateLeftMargin = false) => {
+    const result = validateAndCalcColWidth(calcState, updateLeftMargin)
 
     if (result) {
       // Final result was successful
@@ -378,9 +380,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
   /**
    * Attempt calculations for row height.
    * @param {Object} calcState State for calculations
+   * @param {boolean} [updateLeftMargin=true] Flag to control update for left margin. By default it is set to true, so the left margin will be updated.
    */
-  const attemptRowHeightCalc = (calcState, setLeft = true) => {
-    const result = validateAndCalcColWidth(calcState, setLeft)
+  const attemptRowHeightCalc = (calcState, updateLeftMargin = true) => {
+    const result = validateAndCalcColWidth(calcState, updateLeftMargin)
 
     if (result) {
       // Final result was successful
diff --git a/src/scripts/calc.js b/src/scripts/calc.js
index df3cc72..4a424e7 100644
--- a/src/scripts/calc.js
+++ b/src/scripts/calc.js
@@ -51,6 +51,7 @@ module.exports.calcRightLeftMargins = calcRightLeftMargins
  * Calculate column width.
  * Can mutate calcState.
  * @param {Object} calcState State for calculations. Should be validated beforehand.
+ * @param {boolean} [updateLeftMargin=false] Flag to control update for left margin. By default it is set to false, so the right margin will be updated.
  * @param {Array} [orderOfCorrections=[]] Array of corrections in order they should be resolved in
  * @param {Array} [results=[]] Array of results from chain of calculations
  * @param {Object} [correctedData] Object of key/value pairs to be corrected in calcState for next calculation
@@ -58,7 +59,7 @@ module.exports.calcRightLeftMargins = calcRightLeftMargins
  */
 const calcColWidth = (
   calcState,
-  setLeft = false,
+  updateLeftMargin = false,
   orderOfCorrections = [],
   results = [],
   correctedData
@@ -100,8 +101,8 @@ const calcColWidth = (
     // Valid calculation reached
     calcState.colWidth = colWidth
 
-    // Adjust margins
-    if (setLeft) {
+    // Adjust margins with new grid width
+    if (updateLeftMargin) {
       calcState.leftMargin =
         calcState.canvasWidth - currResult.gridWidth - calcState.rightMargin
     } else {
@@ -116,29 +117,53 @@ const calcColWidth = (
   const correction = orderOfCorrections.pop()
 
   if (correction === 'colWidth') {
-    return calcGutterWidth(calcState, setLeft, orderOfCorrections, results, {
-      colWidth: 1,
-    })
+    return calcGutterWidth(
+      calcState,
+      updateLeftMargin,
+      orderOfCorrections,
+      results,
+      {
+        colWidth: 1,
+      }
+    )
   }
 
   if (correction === 'gutterWidth') {
-    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
-      gutterWidth: 0,
-    })
+    return calcColWidth(
+      calcState,
+      updateLeftMargin,
+      orderOfCorrections,
+      results,
+      {
+        gutterWidth: 0,
+      }
+    )
   }
 
   if (correction === 'cols') {
     calcState.cols = 1
-    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
-      col: 1,
-    })
+    return calcColWidth(
+      calcState,
+      updateLeftMargin,
+      orderOfCorrections,
+      results,
+      {
+        col: 1,
+      }
+    )
   }
 
   if (correction === 'rightLeftMargins') {
-    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
-      leftMargin: 0,
-      bottomMargin: 0,
-    })
+    return calcColWidth(
+      calcState,
+      updateLeftMargin,
+      orderOfCorrections,
+      results,
+      {
+        leftMargin: 0,
+        bottomMargin: 0,
+      }
+    )
   }
 
   // No more corrections remain & no valid calculation was reached
@@ -158,7 +183,7 @@ module.exports.calcColWidth = calcColWidth
  */
 const calcGutterWidth = (
   calcState,
-  setLeft = false,
+  updateLeftMargin = false,
   orderOfCorrections = [],
   results = [],
   correctedData
@@ -207,29 +232,53 @@ const calcGutterWidth = (
   const correction = orderOfCorrections.pop()
 
   if (correction === 'colWidth') {
-    return calcGutterWidth(calcState, setLeft, orderOfCorrections, results, {
-      colWidth: 1,
-    })
+    return calcGutterWidth(
+      calcState,
+      updateLeftMargin,
+      orderOfCorrections,
+      results,
+      {
+        colWidth: 1,
+      }
+    )
   }
 
   if (correction === 'gutterWidth') {
-    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
-      gutterWidth: 0,
-    })
+    return calcColWidth(
+      calcState,
+      updateLeftMargin,
+      orderOfCorrections,
+      results,
+      {
+        gutterWidth: 0,
+      }
+    )
   }
 
   if (correction === 'cols') {
     calcState.cols = 1
-    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
-      col: 1,
-    })
+    return calcColWidth(
+      calcState,
+      updateLeftMargin,
+      orderOfCorrections,
+      results,
+      {
+        col: 1,
+      }
+    )
   }
 
   if (correction === 'rightLeftMargins') {
-    return calcColWidth(calcState, setLeft, orderOfCorrections, results, {
-      leftMargin: 0,
-      bottomMargin: 0,
-    })
+    return calcColWidth(
+      calcState,
+      updateLeftMargin,
+      orderOfCorrections,
+      results,
+      {
+        leftMargin: 0,
+        bottomMargin: 0,
+      }
+    )
   }
 
   // No more corrections remain & no valid calculation was reached

From be1868f94b670c2b91513960df66f047aa8dba00 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 8 Jun 2020 16:29:04 -0700
Subject: [PATCH 26/29] Fix bug with calc & update calc tests - Fix bug where
 right & left margin sums were not being recalculated after being adjusted
 during calc - Update Bootstrap grid tests to use accurate Bootstrap grid
 sizes

---
 src/scripts/calc.js      |  4 ++++
 src/scripts/calc.test.js | 51 ++++++++++++++++++++--------------------
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/scripts/calc.js b/src/scripts/calc.js
index 4a424e7..086c028 100644
--- a/src/scripts/calc.js
+++ b/src/scripts/calc.js
@@ -105,9 +105,13 @@ const calcColWidth = (
     if (updateLeftMargin) {
       calcState.leftMargin =
         calcState.canvasWidth - currResult.gridWidth - calcState.rightMargin
+      currResult.rightLeftMarginsSum =
+        calcState.leftMargin + calcState.rightMargin
     } else {
       calcState.rightMargin =
         calcState.canvasWidth - currResult.gridWidth - calcState.leftMargin
+      currResult.rightLeftMarginsSum =
+        calcState.leftMargin + calcState.rightMargin
     }
 
     return results
diff --git a/src/scripts/calc.test.js b/src/scripts/calc.test.js
index 28064a5..b695826 100644
--- a/src/scripts/calc.test.js
+++ b/src/scripts/calc.test.js
@@ -39,33 +39,33 @@ describe('calcRightLeftMargins', () => {
 })
 
 describe('calcColWidth', () => {
-  test('Successfully calculate with parameters similar to Bootstrap 1920x1080 grid', () => {
+  test('Successfully calculate with parameters for Bootstrap 1920x1080 grid', () => {
     const calcData = {
       canvasWidth: 1920,
       cols: 12,
-      gutterWidth: 15,
-      rightMargin: 390,
-      leftMargin: 390,
+      gutterWidth: 30,
+      rightMargin: 405,
+      leftMargin: 405,
     }
     const results = calcColWidth(calcData)
 
     expect(results[0]).toMatchObject({
       type: 'calcColWidth',
-      rightLeftMarginsSum: 780,
-      colWidth: 81.25,
-      colWidthsSum: 975,
-      gridWidth: 1140,
-      gutterWidthsSum: 165,
+      rightLeftMarginsSum: 810,
+      colWidth: 65,
+      colWidthsSum: 780,
+      gridWidth: 1110,
+      gutterWidthsSum: 330,
     })
     expect(results[0].errs.length).toBe(0)
 
     expect(calcData).toMatchObject({
       canvasWidth: 1920,
       cols: 12,
-      colWidth: 81.25,
-      gutterWidth: 15,
-      rightMargin: 390,
-      leftMargin: 390,
+      colWidth: 65,
+      gutterWidth: 30,
+      rightMargin: 405,
+      leftMargin: 405,
     })
   })
 
@@ -199,32 +199,33 @@ describe('calcColWidth', () => {
 })
 
 describe('calcGutterWidth', () => {
-  test('Successfully calculate with parameters similar to Bootstrap 1920x1080 grid', () => {
+  test('Successfully calculate with parameters for Bootstrap 1920x1080 grid', () => {
     const calcData = {
       canvasWidth: 1920,
       cols: 12,
-      colWidth: 81.25,
-      rightMargin: 390,
-      leftMargin: 390,
+      colWidth: 65,
+      rightMargin: 405,
+      leftMargin: 405,
     }
     const results = calcGutterWidth(calcData)
 
     expect(results[0]).toMatchObject({
       type: 'calcGutterWidth',
-      rightLeftMarginsSum: 780,
-      colWidthsSum: 975,
-      gridWidth: 1140,
-      gutterWidth: 15,
-      gutterWidthsSum: 165,
+      rightLeftMarginsSum: 810,
+      colWidthsSum: 780,
+      gridWidth: 1110,
+      gutterWidth: 30,
+      gutterWidthsSum: 330,
     })
     expect(results[0].errs.length).toBe(0)
 
     expect(calcData).toMatchObject({
       canvasWidth: 1920,
       cols: 12,
-      gutterWidth: 15,
-      rightMargin: 390,
-      leftMargin: 390,
+      colWidth: 65,
+      gutterWidth: 30,
+      rightMargin: 405,
+      leftMargin: 405,
     })
   })
 

From d46d5a3827dfe8f456a3ee10966728fc6007620e Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 8 Jun 2020 16:57:41 -0700
Subject: [PATCH 27/29] Test margin recalculation for calcColWidth

---
 src/scripts/calc.js      |  8 +++--
 src/scripts/calc.test.js | 66 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/src/scripts/calc.js b/src/scripts/calc.js
index 086c028..24b2aa7 100644
--- a/src/scripts/calc.js
+++ b/src/scripts/calc.js
@@ -103,13 +103,17 @@ const calcColWidth = (
 
     // Adjust margins with new grid width
     if (updateLeftMargin) {
-      calcState.leftMargin =
+      currResult.leftMargin =
         calcState.canvasWidth - currResult.gridWidth - calcState.rightMargin
+      calcState.leftMargin = currResult.leftMargin
+
       currResult.rightLeftMarginsSum =
         calcState.leftMargin + calcState.rightMargin
     } else {
-      calcState.rightMargin =
+      currResult.rightMargin =
         calcState.canvasWidth - currResult.gridWidth - calcState.leftMargin
+      calcState.rightMargin = currResult.rightMargin
+
       currResult.rightLeftMarginsSum =
         calcState.leftMargin + calcState.rightMargin
     }
diff --git a/src/scripts/calc.test.js b/src/scripts/calc.test.js
index b695826..6fe92f4 100644
--- a/src/scripts/calc.test.js
+++ b/src/scripts/calc.test.js
@@ -196,6 +196,72 @@ describe('calcColWidth', () => {
       colWidth: 1,
     })
   })
+
+  test('Recalculate right margin when right and left margins and grid width do not fit perfectly on canvas', () => {
+    const calcData = {
+      floorVals: true,
+      canvasWidth: 1920,
+      cols: 6,
+      colWidth: 171,
+      gutterWidth: 27,
+      rightMargin: 377,
+      leftMargin: 377,
+    }
+    const results = calcColWidth(calcData)
+
+    expect(results[0]).toMatchObject({
+      type: 'calcColWidth',
+      rightLeftMarginsSum: 759,
+      colWidth: 171,
+      colWidthsSum: 1026,
+      gridWidth: 1161,
+      gutterWidthsSum: 135,
+      rightMargin: 382,
+    })
+    expect(results[0].errs.length).toBe(0)
+
+    expect(calcData).toMatchObject({
+      canvasWidth: 1920,
+      cols: 6,
+      colWidth: 171,
+      gutterWidth: 27,
+      rightMargin: 382,
+      leftMargin: 377,
+    })
+  })
+
+  test('Recalculate left margin when right and left margins and grid width do not fit perfectly on canvas', () => {
+    const calcData = {
+      floorVals: true,
+      canvasWidth: 1920,
+      cols: 6,
+      colWidth: 171,
+      gutterWidth: 27,
+      rightMargin: 377,
+      leftMargin: 377,
+    }
+    const results = calcColWidth(calcData, true)
+
+    expect(results[0]).toMatchObject({
+      type: 'calcColWidth',
+      rightLeftMarginsSum: 759,
+      colWidth: 171,
+      colWidthsSum: 1026,
+      gridWidth: 1161,
+      gutterWidthsSum: 135,
+      leftMargin: 382,
+    })
+    expect(results[0].errs.length).toBe(0)
+
+    expect(calcData).toMatchObject({
+      canvasWidth: 1920,
+      cols: 6,
+      colWidth: 171,
+      gutterWidth: 27,
+      rightMargin: 377,
+      leftMargin: 382,
+    })
+  })
 })
 
 describe('calcGutterWidth', () => {

From 6a5c2d66727643142dc6e89e75853e5a643b17e9 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 8 Jun 2020 17:15:38 -0700
Subject: [PATCH 28/29] Update comments, adjust margins if necessary when
 calcing gutter

---
 src/scripts/calc.js      | 19 +++++++++++++++++++
 src/scripts/calc.test.js |  2 ++
 2 files changed, 21 insertions(+)

diff --git a/src/scripts/calc.js b/src/scripts/calc.js
index 24b2aa7..b78760c 100644
--- a/src/scripts/calc.js
+++ b/src/scripts/calc.js
@@ -184,6 +184,7 @@ module.exports.calcColWidth = calcColWidth
  * Calculate gutter width.
  * Can mutate calcState.
  * @param {Object} calcState State for calculations. Should be validated beforehand.
+ * @param {boolean} [updateLeftMargin=false] Flag to control update for left margin. By default it is set to false, so the right margin will be updated.
  * @param {Array} [orderOfCorrections=[]] Array of corrections in order they should be resolved in
  * @param {Array} [results=[]] Array of results from chain of calculations
  * @param {Object} [correctedData] Object of key/value pairs to be corrected in calcState for next calculation
@@ -233,6 +234,24 @@ const calcGutterWidth = (
   if (validateCalcResult(currResult)) {
     // Valid calculation reached
     calcState.gutterWidth = gutterWidth
+
+    // Adjust margins with new grid width
+    if (updateLeftMargin) {
+      currResult.leftMargin =
+        calcState.canvasWidth - currResult.gridWidth - calcState.rightMargin
+      calcState.leftMargin = currResult.leftMargin
+
+      currResult.rightLeftMarginsSum =
+        calcState.leftMargin + calcState.rightMargin
+    } else {
+      currResult.rightMargin =
+        calcState.canvasWidth - currResult.gridWidth - calcState.leftMargin
+      calcState.rightMargin = currResult.rightMargin
+
+      currResult.rightLeftMarginsSum =
+        calcState.leftMargin + calcState.rightMargin
+    }
+
     return results
   }
 
diff --git a/src/scripts/calc.test.js b/src/scripts/calc.test.js
index 6fe92f4..d17adc9 100644
--- a/src/scripts/calc.test.js
+++ b/src/scripts/calc.test.js
@@ -372,6 +372,8 @@ describe('calcGutterWidth', () => {
       gutterWidth: 0,
     })
   })
+
+  // TODO: test margin recalculations when right and left margins and grid width do not fit perfectly on canvas
 })
 
 describe('calcGridHeight', () => {

From aac686d39794cac9a230f0e7fdcee45b121d09b5 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Mon, 15 Jun 2020 16:12:46 -0700
Subject: [PATCH 29/29] Fix bugs that occur when cols or rows is 1 - Set
 gutterWidth to 0 when cols or rows is 1

---
 src/scripts/calc.js     | 11 +++++++----
 src/scripts/validate.js |  4 ++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/scripts/calc.js b/src/scripts/calc.js
index b78760c..f309cd7 100644
--- a/src/scripts/calc.js
+++ b/src/scripts/calc.js
@@ -216,10 +216,13 @@ const calcGutterWidth = (
   const rightLeftMarginsSum = currResult.rightLeftMarginsSum
 
   // Perform main calculations
-  const gutterWidth = floorVal(
-    floorVals,
-    (canvasWidth - rightLeftMarginsSum - colWidth * cols) / (cols - 1)
-  )
+  const gutterWidth =
+    cols === 1
+      ? 0
+      : floorVal(
+          floorVals,
+          (canvasWidth - rightLeftMarginsSum - colWidth * cols) / (cols - 1)
+        )
   const gutterWidthsSum = floorVal(floorVals, gutterWidth * (cols - 1))
   const colWidthsSum = floorVal(floorVals, colWidth * cols)
   const gridWidth = colWidthsSum + gutterWidthsSum
diff --git a/src/scripts/validate.js b/src/scripts/validate.js
index 4bae74f..52f15e5 100644
--- a/src/scripts/validate.js
+++ b/src/scripts/validate.js
@@ -125,6 +125,10 @@ const validateInputs = (calcState) => {
   if (typeof leftMargin === 'number' && leftMargin > canvasWidth - 1) {
     calcState.leftMargin = canvasWidth - 1
   }
+
+  if (calcState.cols === 1) {
+    calcState.gutterWidth = 0
+  }
 }
 
 module.exports.validateInputs = validateInputs