Merge pull request #2 from mattlean/gridlines

Add support for gridlines and draw options
mattlean · May 27, 2020 · 94e6fca · 94e6fca
2 parents 39a60e8 + 80fff31
commit 94e6fca
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 61 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -0,0 +1,28 @@
+# 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: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn test
diff --git a/README.md b/README.md
@@ -13,4 +13,5 @@ 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
+- Produce grids as rectangle fills or gridlines or both
diff --git 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>",

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
@@ -12,6 +12,7 @@ const {
   validateColWidthCalc,
   validateGutterWidthCalc,
   validateInputs,
+  validateStats,
 } = require('../scripts/validate')
 
 /**
@@ -38,6 +39,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 +83,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setRightMargin(0)
     setBottomMargin(0)
     setLeftMargin(0)
+    setDrawFields(true)
+    setDrawGridlines(true)
     resetStats()
   }
 
@@ -210,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)
@@ -325,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'}
@@ -336,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'}
@@ -352,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"
           />
@@ -365,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"
           />
@@ -378,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"
           />
@@ -392,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
@@ -401,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
@@ -410,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
@@ -419,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>
@@ -460,14 +510,40 @@ 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)}
-            disabled={!isCalcReady}
+            onClick={() => {
+              if (isCalcReady) {
+                draw(calcState, { drawFields, drawGridlines })
+              }
+            }}
+            disabled={!isCalcReady || (!drawFields && !drawGridlines)}
             uxp-variant="cta"
           >
             Create