diff --git a/.gitignore b/.gitignore index 948e3a7..0c1dd97 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ dist node_modules - +.eslintcache main.js yarn-error.log \ No newline at end of file diff --git a/README.md b/README.md index 9ebb235..1a0dec7 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ -# Gridnik (Alpha) +# Gridnik ## About +**THIS PLUGIN IS CURRENTLY IN ALPHA!** + Gridnik is a plugin for an [Adobe XD](https://www.adobe.com/products/xd.html) that extends the program's ability to create grids. The plugin's name is based on Dutch graphic designer [Wim Crouwel](https://en.wikipedia.org/wiki/Wim_Crouwel) who was known by his friends as Mr. Gridnik, a nickname given to him due to his obsession with grids. @@ -10,4 +12,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-grid calculations to make sure your grids hold your desired structure while still being valid +- 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 diff --git a/package.json b/package.json index 8e394f2..601903c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gridnik", - "version": "0.1.0", + "version": "0.2.0", "main": "dist/main.js", "repository": "https://github.com/mattlean/gridnik.git", "author": "Matthew Lean ", @@ -8,6 +8,7 @@ "scripts": { "build": "webpack --mode development", "dev": "DEV=true yarn watch", + "lint": "eslint --cache \"src/**/*.{js,jsx}\"", "test": "jest", "watch": "nodemon -w src -e js,jsx,css -w webpack.config.js -x yarn build" }, diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx index e340ff4..06e9f1a 100644 --- a/src/components/Panel.jsx +++ b/src/components/Panel.jsx @@ -18,6 +18,7 @@ const { * Adobe XD panel used for plugin UI. */ const Panel = ({ selectionAmount, validSelection }) => { + const [floorVals, setFloorVals] = useState(true) const [canvasType, setCanvasType] = useState('auto') const [boundType, setBoundType] = useState('path') const [canvasWidth, setCanvasWidth] = useState('') @@ -44,6 +45,7 @@ const Panel = ({ selectionAmount, validSelection }) => { canvasWidth, cols, colWidth, + floorVals, gridHeight, gutterWidth, topMargin, @@ -69,6 +71,7 @@ const Panel = ({ selectionAmount, validSelection }) => { * Reset form & stats on panel UI. */ const resetForm = () => { + setFloorVals(true) setCols('') setGutterWidth(0) setColWidth('') @@ -86,8 +89,9 @@ const Panel = ({ selectionAmount, validSelection }) => { setCanvasWidth(calcState.canvasWidth) setCanvasHeight(calcState.canvasHeight) setCols(calcState.cols) - setGutterWidth(calcState.gutterWidth) setColWidth(calcState.colWidth) + setFloorVals(calcState.floorVals) + setGutterWidth(calcState.gutterWidth) setTopMargin(calcState.topMargin) setRightMargin(calcState.rightMargin) setBottomMargin(calcState.bottomMargin) @@ -283,6 +287,17 @@ const Panel = ({ selectionAmount, validSelection }) => { if (selectionAmount === 1) { content = (
+ +