From 0406d1b261a46a8bd2deaaa05e943618513c7fc4 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 24 May 2020 03:05:37 -0700
Subject: [PATCH 1/9] Draw gridlines

---
 src/scripts/draw.js | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index a732efc..e2f1ae5 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -1,5 +1,5 @@
 const commands = require('commands')
-const { Color, Rectangle } = require('scenegraph')
+const { Color, Line, Rectangle } = require('scenegraph')
 const { editDocument } = require('application')
 
 /**
@@ -19,14 +19,13 @@ const draw = (calcState) => {
       topMargin,
       leftMargin,
     } = calcState
-    const color = new Color('#00ffff', 0.5)
     const newItems = []
 
     const canvas = new Rectangle()
     canvas.name = 'Canvas'
     canvas.width = canvasWidth
     canvas.height = canvasHeight
-    canvas.fill = color
+    canvas.fill = new Color('#00ff00', 0.25)
     newItems.push(canvas)
     selection.insertionParent.addChild(canvas)
 
@@ -36,11 +35,29 @@ const draw = (calcState) => {
       const col = new Rectangle()
       col.width = colWidth
       col.height = gridHeight
-      col.fill = color
+      col.fill = new Color('#00ffff', 0.5)
       col.name = `Column ${i + 1}`
       newItems.push(col)
       selection.insertionParent.addChild(col)
 
+      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'
+      newItems.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'
+      newItems.push(gridlineB)
+      selection.insertionParent.addChild(gridlineB)
+
       if (pos.x > 0 || pos.y > 0) {
         col.moveInParentCoordinates(pos.x, pos.y)
       }
@@ -66,21 +83,6 @@ const draw = (calcState) => {
     }
 
     canvas.visible = false
-
-    // commands.alignHorizontalCenter()
-    // commands.alignVerticalCenter()
-
-    // const newLine = new Line()
-    // newLine.setStartEnd(0, 0, 500, 500)
-    // newLine.strokeEnabled = true
-    // newLine.stroke = new Color('#ff00ff')
-    // newLine.strokeWidth = 3
-    // // console.log(selection.items[0])
-    // console.log(selection.editContext)
-    // console.log(selection.editContext.children)
-    // selection.insertionParent.addChild(newLine)
-    // // selection.editContext.addChild(newLine)
-    // selection.items = [newLine]
   })
 }
 

From 68b8fd011b9b792f71962697a528d7c93b2e5277 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 24 May 2020 03:34:09 -0700
Subject: [PATCH 2/9] Add draw options

---
 src/components/Panel.jsx |  29 ++++++++++-
 src/scripts/draw.js      | 105 ++++++++++++++++++++++-----------------
 2 files changed, 87 insertions(+), 47 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 06e9f1a..8907025 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -38,6 +38,9 @@ const Panel = ({ selectionAmount, validSelection }) => {
   const [topBottomMarginsSum, setTopBottomMarginsSum] = useState(0)
   const [rightLeftMarginsSum, setRightLeftMarginsSum] = useState(0)
 
+  const [drawFields, setDrawFields] = useState(true)
+  const [drawGridlines, setDrawGridlines] = useState(true)
+
   const [isCalcReady, setIsCalcReady] = useState(false)
 
   const calcState = {
@@ -79,6 +82,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setRightMargin(0)
     setBottomMargin(0)
     setLeftMargin(0)
+    setDrawFields(true)
+    setDrawGridlines(true)
     resetStats()
   }
 
@@ -460,13 +465,35 @@ const Panel = ({ selectionAmount, validSelection }) => {
           </div>
           <hr />
         </div>
+        <label className="text-input-combo">
+          <span>Draw Fields</span>
+          <input
+            type="checkbox"
+            checked={drawFields}
+            onChange={(evt) => {
+              setDrawFields(evt.target.checked)
+            }}
+            uxp-quiet="true"
+          />
+        </label>
+        <label className="text-input-combo">
+          <span>Draw Gridlines</span>
+          <input
+            type="checkbox"
+            checked={drawGridlines}
+            onChange={(evt) => {
+              setDrawGridlines(evt.target.checked)
+            }}
+            uxp-quiet="true"
+          />
+        </label>
         <footer>
           <button onClick={() => resetForm()} uxp-variant="secondary">
             Reset
           </button>
           <button
             id="create"
-            onClick={() => draw(calcState)}
+            onClick={() => draw(calcState, { drawFields, drawGridlines })}
             disabled={!isCalcReady}
             uxp-variant="cta"
           >
diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index e2f1ae5..2f0320b 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -6,7 +6,7 @@ const { editDocument } = require('application')
  * Draw grid.
  * @param {Object} calcState  State for calculations. Should be validated beforehand.
  */
-const draw = (calcState) => {
+const draw = (calcState, drawOptions) => {
   editDocument((selection) => {
     const currSelection = selection.items[0]
     const {
@@ -19,6 +19,7 @@ const draw = (calcState) => {
       topMargin,
       leftMargin,
     } = calcState
+    const { drawFields, drawGridlines } = drawOptions
     const newItems = []
 
     const canvas = new Rectangle()
@@ -31,58 +32,70 @@ const draw = (calcState) => {
 
     const pos = { x: leftMargin, y: topMargin }
 
-    for (let i = 0; i < cols; i += 1) {
-      const col = new Rectangle()
-      col.width = colWidth
-      col.height = gridHeight
-      col.fill = new Color('#00ffff', 0.5)
-      col.name = `Column ${i + 1}`
-      newItems.push(col)
-      selection.insertionParent.addChild(col)
+    if (drawFields || drawGridlines) {
+      for (let i = 0; i < cols; i += 1) {
+        if (drawFields) {
+          const col = new Rectangle()
+          col.width = colWidth
+          col.height = gridHeight
+          col.fill = new Color('#00ffff', 0.5)
+          col.name = `Column ${i + 1}`
+          newItems.push(col)
+          selection.insertionParent.addChild(col)
 
-      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'
-      newItems.push(gridlineA)
-      selection.insertionParent.addChild(gridlineA)
+          if (pos.x > 0 || pos.y > 0) {
+            col.moveInParentCoordinates(pos.x, pos.y)
+          }
+        }
 
-      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'
-      newItems.push(gridlineB)
-      selection.insertionParent.addChild(gridlineB)
+        if (drawGridlines) {
+          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'
+          newItems.push(gridlineA)
+          selection.insertionParent.addChild(gridlineA)
 
-      if (pos.x > 0 || pos.y > 0) {
-        col.moveInParentCoordinates(pos.x, pos.y)
+          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'
+          newItems.push(gridlineB)
+          selection.insertionParent.addChild(gridlineB)
+        }
+
+        pos.x += colWidth + gutterWidth
       }
-      pos.x += colWidth + gutterWidth
-    }
 
-    selection.items = newItems
-    commands.group()
-    const group = selection.items[0]
-    group.name = 'Gridnik Grid'
-    const topLeftGroupPos = { x: group.localBounds.x, y: group.localBounds.y }
+      selection.items = newItems
+      commands.group()
+      const group = selection.items[0]
+      group.name = 'Gridnik Grid'
+      const topLeftGroupPos = { x: group.localBounds.x, y: group.localBounds.y }
 
-    if (currSelection.constructor.name === 'Artboard') {
-      selection.items[0].placeInParentCoordinates(topLeftGroupPos, {
-        x: 0,
-        y: 0,
-      })
-    } else {
-      selection.items[0].placeInParentCoordinates(
-        topLeftGroupPos,
-        currSelection.boundsInParent
-      )
-    }
+      if (currSelection.constructor.name === 'Artboard') {
+        selection.items[0].placeInParentCoordinates(topLeftGroupPos, {
+          x: 0,
+          y: 0,
+        })
+      } else {
+        selection.items[0].placeInParentCoordinates(
+          topLeftGroupPos,
+          currSelection.boundsInParent
+        )
+      }
 
-    canvas.visible = false
+      canvas.visible = false
+    }
   })
 }
 

From cca99db7476b93db3f38707c9665c405f3218520 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 24 May 2020 12:45:06 -0700
Subject: [PATCH 3/9] Group gridlines & cols

---
 src/scripts/draw.js | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index 2f0320b..08caa1f 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -1,6 +1,6 @@
-const commands = require('commands')
 const { Color, Line, Rectangle } = require('scenegraph')
 const { editDocument } = require('application')
+const { group } = require('commands')
 
 /**
  * Draw grid.
@@ -21,6 +21,8 @@ const draw = (calcState, drawOptions) => {
     } = calcState
     const { drawFields, drawGridlines } = drawOptions
     const newItems = []
+    const colFills = []
+    const gridlines = []
 
     const canvas = new Rectangle()
     canvas.name = 'Canvas'
@@ -40,7 +42,7 @@ const draw = (calcState, drawOptions) => {
           col.height = gridHeight
           col.fill = new Color('#00ffff', 0.5)
           col.name = `Column ${i + 1}`
-          newItems.push(col)
+          colFills.push(col)
           selection.insertionParent.addChild(col)
 
           if (pos.x > 0 || pos.y > 0) {
@@ -55,7 +57,7 @@ const draw = (calcState, drawOptions) => {
           gridlineA.strokeWidth = 1
           gridlineA.stroke = new Color('#ff4fff')
           gridlineA.name = 'Gridline'
-          newItems.push(gridlineA)
+          gridlines.push(gridlineA)
           selection.insertionParent.addChild(gridlineA)
 
           const gridlineB = new Line()
@@ -69,26 +71,41 @@ const draw = (calcState, drawOptions) => {
           gridlineB.strokeWidth = 1
           gridlineB.stroke = new Color('#ff4fff')
           gridlineB.name = 'Gridline'
-          newItems.push(gridlineB)
+          gridlines.push(gridlineB)
           selection.insertionParent.addChild(gridlineB)
         }
 
         pos.x += colWidth + gutterWidth
       }
 
+      selection.items = colFills
+      group()
+      const colGroup = selection.items[0]
+      colGroup.name = 'Columns'
+      newItems.push(colGroup)
+
+      selection.items = gridlines
+      group()
+      const gridlineGroup = selection.items[0]
+      gridlineGroup.name = 'Gridlines'
+      newItems.push(gridlineGroup)
+
       selection.items = newItems
-      commands.group()
-      const group = selection.items[0]
-      group.name = 'Gridnik Grid'
-      const topLeftGroupPos = { x: group.localBounds.x, y: group.localBounds.y }
+      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') {
-        selection.items[0].placeInParentCoordinates(topLeftGroupPos, {
+        gridGroup.placeInParentCoordinates(topLeftGroupPos, {
           x: 0,
           y: 0,
         })
       } else {
-        selection.items[0].placeInParentCoordinates(
+        gridGroup.placeInParentCoordinates(
           topLeftGroupPos,
           currSelection.boundsInParent
         )

From f7f0e4d90a1e5405841e63b7ccbeced29159594b Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 24 May 2020 14:51:25 -0700
Subject: [PATCH 4/9] Change when isCalcReady is updated - Add comments to draw
 & attemptGridHeightCalc - Reset isCalcReady when input is changed - Fix bug
 where after inputting top/bottom margin sometimes isCalcReady was maintaining
 incorrect false state

---
 src/components/Panel.jsx | 69 ++++++++++++++++++++++++++++++++++------
 src/scripts/draw.js      | 12 ++++++-
 src/scripts/validate.js  | 30 +++++++++++++++++
 3 files changed, 100 insertions(+), 11 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 8907025..ae0cfe6 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -12,6 +12,7 @@ const {
   validateColWidthCalc,
   validateGutterWidthCalc,
   validateInputs,
+  validateStats,
 } = require('../scripts/validate')
 
 /**
@@ -215,13 +216,30 @@ const Panel = ({ selectionAmount, validSelection }) => {
    * Attempt calculations for top bottom margins.
    */
   const attemptGridHeightCalc = () => {
+    // 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)
 
       setGridHeight(result.gridHeight)
       setTopBottomMarginsSum(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)
+      }
     }
 
     setForm(calcState)
@@ -330,7 +348,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="1"
               value={canvasWidth}
               onBlur={attemptColWidthCalc}
-              onChange={(evt) => setCanvasWidth(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setCanvasWidth(evt.target.value)
+              }}
               className="input-lg"
               placeholder="Width"
               disabled={canvasType === 'auto'}
@@ -341,7 +362,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="1"
               value={canvasHeight}
               onBlur={attemptGridHeightCalc}
-              onChange={(evt) => setCanvasHeight(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setCanvasHeight(evt.target.value)
+              }}
               className="input-lg"
               placeholder="Height"
               disabled={canvasType === 'auto'}
@@ -357,7 +381,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
             max={canvasWidth}
             value={cols}
             onBlur={attemptColWidthCalc}
-            onChange={(evt) => setCols(evt.target.value)}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setCols(evt.target.value)
+            }}
             className="input-lg"
             uxp-quiet="true"
           />
@@ -370,7 +397,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
             max={canvasWidth - 1}
             value={gutterWidth}
             onBlur={attemptColWidthCalc}
-            onChange={(evt) => setGutterWidth(evt.target.value)}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setGutterWidth(evt.target.value)
+            }}
             className="input-lg"
             uxp-quiet="true"
           />
@@ -383,7 +413,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
             max={canvasWidth}
             value={colWidth}
             onBlur={attemptGutterWidthCalc}
-            onChange={(evt) => setColWidth(evt.target.value)}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setColWidth(evt.target.value)
+            }}
             className="input-lg"
             uxp-quiet="true"
           />
@@ -397,7 +430,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               max={canvasHeight - 1}
               value={topMargin}
               onBlur={attemptGridHeightCalc}
-              onChange={(evt) => setTopMargin(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setTopMargin(evt.target.value)
+              }}
               uxp-quiet="true"
             />
             <input
@@ -406,7 +442,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               max={canvasWidth - 1}
               value={rightMargin}
               onBlur={attemptColWidthCalc}
-              onChange={(evt) => setRightMargin(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setRightMargin(evt.target.value)
+              }}
               uxp-quiet="true"
             />
             <input
@@ -415,7 +454,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               max={canvasHeight - 1}
               value={bottomMargin}
               onBlur={attemptGridHeightCalc}
-              onChange={(evt) => setBottomMargin(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setBottomMargin(evt.target.value)
+              }}
               uxp-quiet="true"
             />
             <input
@@ -424,7 +466,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               max={canvasWidth - 1}
               value={leftMargin}
               onBlur={attemptColWidthCalc}
-              onChange={(evt) => setLeftMargin(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setLeftMargin(evt.target.value)
+              }}
               uxp-quiet="true"
             />
           </div>
@@ -493,7 +538,11 @@ const Panel = ({ selectionAmount, validSelection }) => {
           </button>
           <button
             id="create"
-            onClick={() => draw(calcState, { drawFields, drawGridlines })}
+            onClick={() => {
+              if (isCalcReady) {
+                draw(calcState, { drawFields, drawGridlines })
+              }
+            }}
             disabled={!isCalcReady}
             uxp-variant="cta"
           >
diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index 08caa1f..edd96b5 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -4,7 +4,8 @@ const { group } = require('commands')
 
 /**
  * Draw grid.
- * @param {Object} calcState  State for calculations. Should be validated beforehand.
+ * @param {Object} calcState State for calculations. Should be validated beforehand.
+ * @param {Object} drawOptions Options to control what should be drawn
  */
 const draw = (calcState, drawOptions) => {
   editDocument((selection) => {
@@ -24,6 +25,7 @@ const draw = (calcState, drawOptions) => {
     const colFills = []
     const gridlines = []
 
+    // Draw canvas. Used for alignment.
     const canvas = new Rectangle()
     canvas.name = 'Canvas'
     canvas.width = canvasWidth
@@ -37,6 +39,7 @@ const draw = (calcState, drawOptions) => {
     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
@@ -51,6 +54,7 @@ const draw = (calcState, drawOptions) => {
         }
 
         if (drawGridlines) {
+          // Draw gridlines
           const gridlineA = new Line()
           gridlineA.setStartEnd(pos.x, 0, pos.x, canvasHeight)
           gridlineA.strokeEnabled = true
@@ -78,18 +82,21 @@ const draw = (calcState, drawOptions) => {
         pos.x += colWidth + gutterWidth
       }
 
+      // 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]
@@ -100,17 +107,20 @@ const draw = (calcState, drawOptions) => {
         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
     }
   })
diff --git a/src/scripts/validate.js b/src/scripts/validate.js
index 4fd876d..1d9075a 100644
--- a/src/scripts/validate.js
+++ b/src/scripts/validate.js
@@ -196,3 +196,33 @@ const validateGutterWidthCalc = (calcState) => {
 }
 
 module.exports.validateGutterWidthCalc = validateGutterWidthCalc
+
+/**
+ * Check if stats exist. If they do, assume there is a current valid calculation.
+ * @param {*} calcStats Stats from calculations
+ * @returns {boolean} True if stats exist, false otherwise
+ */
+const validateStats = (calcStats) => {
+  const {
+    colWidthsSum,
+    gutterWidthsSum,
+    gridWidth,
+    gridHeight,
+    rightLeftMarginsSum,
+    topBottomMarginsSum,
+  } = calcStats
+
+  if (
+    typeof colWidthsSum === 'number' &&
+    typeof gutterWidthsSum === 'number' &&
+    typeof gridWidth === 'number' &&
+    typeof gridHeight === 'number' &&
+    typeof rightLeftMarginsSum === 'number' &&
+    typeof topBottomMarginsSum === 'number'
+  ) {
+    return true
+  }
+  return false
+}
+
+module.exports.validateStats = validateStats

From fea3800d7161d462827016b5ecaa7d1b7612d174 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 24 May 2020 14:59:31 -0700
Subject: [PATCH 5/9] Disable Create button when no draw options are selected

---
 src/components/Panel.jsx | 2 +-
 src/scripts/validate.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index ae0cfe6..5229c53 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -543,7 +543,7 @@ const Panel = ({ selectionAmount, validSelection }) => {
                 draw(calcState, { drawFields, drawGridlines })
               }
             }}
-            disabled={!isCalcReady}
+            disabled={!isCalcReady || (!drawFields && !drawGridlines)}
             uxp-variant="cta"
           >
             Create
diff --git a/src/scripts/validate.js b/src/scripts/validate.js
index 1d9075a..4bae74f 100644
--- a/src/scripts/validate.js
+++ b/src/scripts/validate.js
@@ -198,7 +198,7 @@ const validateGutterWidthCalc = (calcState) => {
 module.exports.validateGutterWidthCalc = validateGutterWidthCalc
 
 /**
- * Check if stats exist. If they do, assume there is a current valid calculation.
+ * Check if all calculation stats exist. If they do, assume there is a current valid calculation.
  * @param {*} calcStats Stats from calculations
  * @returns {boolean} True if stats exist, false otherwise
  */

From 2d80680c663602c97cc5842cb0e60078f0629b0a Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 24 May 2020 17:32:29 -0700
Subject: [PATCH 6/9] Create node.js.yml

---
 .github/workflows/node.js.yml | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 .github/workflows/node.js.yml

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 0000000..e772a1c
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,29 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

From 4268b631216ff41fba3bd063ad5402a464bbc9af Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 24 May 2020 17:37:23 -0700
Subject: [PATCH 7/9] Replace npm with yarn in GitHub workflow config

---
 .github/workflows/node.js.yml | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index e772a1c..9b392dc 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -19,11 +18,11 @@ jobs:
         node-version: [10.x, 12.x]
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn test

From 6b7d76ee4a63b7e598cf367c9bdc7cbbca5d34d2 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Sun, 24 May 2020 17:56:28 -0700
Subject: [PATCH 8/9] Update features on README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1a0dec7..e715fbe 100644
--- a/README.md
+++ b/README.md
@@ -13,4 +13,4 @@ The plugin's name is based on Dutch graphic designer [Wim Crouwel](https://en.wi
 - 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.
 - Use auto-calculations to make sure your grids hold your desired structure while still being valid
-- Construct grids in measurements of decimals or whole numbers
+- Support for grid construction using decimals

From 80fff317b832badc0bc81db44f9013360c712775 Mon Sep 17 00:00:00 2001
From: Matthew Lean <matt@mattlean.com>
Date: Tue, 26 May 2020 18:16:56 -0700
Subject: [PATCH 9/9] Update README, v0.3.0

---
 README.md    | 1 +
 package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e715fbe..cbb9c5f 100644
--- a/README.md
+++ b/README.md
@@ -14,3 +14,4 @@ The plugin's name is based on Dutch graphic designer [Wim Crouwel](https://en.wi
 - Build grids and overlay them upon 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
diff --git a/package.json b/package.json
index 601903c..aa05b93 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gridnik",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "dist/main.js",
   "repository": "https://github.com/mattlean/gridnik.git",
   "author": "Matthew Lean <matt@mattlean.com>",