Add grid color customization and choice to display as dots (#1743)

* dot grid

* fix warning: unreachable pattern

* grid color select

* add color for all grid types

* Dot grid checkbox and remove prefixed Color functions

* Display dot grid as grid aligned pixels

* Dashed line comment

* Code review and UI design widget placement updates

* Isometric dotted grid

* Early return when cos = 0

* Add spacing, x offset, and color to dot grids

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
adamgerhant
2024-05-08 21:36:15 +00:00
committed by GitHub
co-authored by Keavon Chambers
parent 1bfbe306be
commit bc33eabc3c
9 changed files with 255 additions and 33 deletions
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<rect width="2" height="2" x="1" y="1" />
<rect width="2" height="2" x="5" y="1" />
<rect width="2" height="2" x="9" y="1" />
<rect width="2" height="2" x="1" y="5" />
<rect width="2" height="2" x="5" y="5" />
<rect width="2" height="2" x="9" y="5" />
<rect width="2" height="2" x="1" y="9" />
<rect width="2" height="2" x="5" y="9" />
<rect width="2" height="2" x="9" y="9" />
</svg>

After

Width:  |  Height:  |  Size: 455 B

+2
View File
@@ -18,6 +18,7 @@ import Empty12px from "@graphite-frontend/assets/icon-12px-solid/empty-12px.svg"
import Failure from "@graphite-frontend/assets/icon-12px-solid/failure.svg";
import FullscreenEnter from "@graphite-frontend/assets/icon-12px-solid/fullscreen-enter.svg";
import FullscreenExit from "@graphite-frontend/assets/icon-12px-solid/fullscreen-exit.svg";
import GridDotted from "@graphite-frontend/assets/icon-12px-solid/grid-dotted.svg";
import Grid from "@graphite-frontend/assets/icon-12px-solid/grid.svg";
import Info from "@graphite-frontend/assets/icon-12px-solid/info.svg";
import KeyboardArrowDown from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-down.svg";
@@ -58,6 +59,7 @@ const SOLID_12PX = {
FullscreenEnter: { svg: FullscreenEnter, size: 12 },
FullscreenExit: { svg: FullscreenExit, size: 12 },
Grid: { svg: Grid, size: 12 },
GridDotted: { svg: GridDotted, size: 12 },
Info: { svg: Info, size: 12 },
KeyboardArrowDown: { svg: KeyboardArrowDown, size: 12 },
KeyboardArrowLeft: { svg: KeyboardArrowLeft, size: 12 },