Skip to content

Commit 2bd426f

Browse files
velutvelut
committed
feat: add invisible grid type replacing none which now completely disables grid
1 parent 9bc4c1b commit 2bd426f

File tree

3 files changed

+124
-108
lines changed

3 files changed

+124
-108
lines changed

‎src/lib/components/GridOpts.svelte‎

Lines changed: 114 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -23,124 +23,134 @@
2323
</label>
2424
<select id="grid-type" class="w-full" bind:value={grid.type}>
2525
<option value="none">No grid</option>
26-
<option value="full">Full grid (Grid lines and outer border)</option>
27-
<option value="lines">Grid lines only</option>
28-
<option value="border">Outer border only</option>
26+
<option value="full">Full grid (Border and grid lines)</option>
27+
<option value="lines">Only grid lines</option>
28+
<option value="border">Only outer border</option>
29+
<option value="invisible">Invisible grid</option>
2930
</select>
3031
</FormField>
3132

32-
<FormField>
33-
<label for="grid-color">
34-
<MaterialSymbolsColorsRounded class="size-4" />
35-
Grid color
36-
</label>
37-
<div
38-
class="dark:bg-input/30 border-input grid place-items-center rounded-md border bg-transparent p-1"
39-
>
40-
<input id="grid-color" class="w-full" type="color" bind:value={grid.color} />
41-
</div>
42-
</FormField>
43-
44-
<FormField>
45-
<label for="grid-lines-size">
46-
<MaterialSymbolsLineWeightRounded class="size-4" />
47-
Grid lines size
48-
</label>
49-
<InputWithUnit unit="px" disabled={grid.type === 'none'}>
50-
<input
51-
id="grid-lines-size"
52-
type="text"
53-
inputMode="numeric"
54-
pattern="[0-9]*"
55-
title="Use 1 or a bigger integer number of pixels"
56-
bind:value={grid.lines.size}
57-
disabled={grid.type === 'none'}
58-
/>
59-
</InputWithUnit>
60-
</FormField>
33+
{#if grid.type !== 'none'}
34+
<FormField>
35+
<label for="grid-color">
36+
<MaterialSymbolsColorsRounded class="size-4" />
37+
Grid color
38+
</label>
39+
<div
40+
class="dark:bg-input/30 border-input grid place-items-center rounded-md border bg-transparent p-1"
41+
>
42+
<input id="grid-color" class="w-full" type="color" bind:value={grid.color} />
43+
</div>
44+
</FormField>
6145

62-
<FormField>
63-
<label for="grid-cell-shape">
64-
<MaterialSymbolsCropRounded class="size-4" />
65-
Grid cell shape
66-
</label>
67-
<select id="grid-cell-shape" class="w-full" bind:value={grid.cell.shape}>
68-
<option value="square">Square (Same width and height)</option>
69-
<option value="rectangle">Rectangle (Different width and height)</option>
70-
</select>
71-
</FormField>
46+
{#if grid.type !== 'invisible'}
47+
<FormField>
48+
<label for="grid-lines-size">
49+
<MaterialSymbolsLineWeightRounded class="size-4" />
50+
{#if grid.type === 'full'}
51+
Grid border and lines size
52+
{:else if grid.type === 'lines'}
53+
Grid lines size
54+
{:else if grid.type === 'border'}
55+
Grid border size
56+
{/if}
57+
</label>
58+
<InputWithUnit unit="px">
59+
<input
60+
id="grid-lines-size"
61+
type="text"
62+
inputMode="numeric"
63+
pattern="[0-9]*"
64+
title="Use 1 or a bigger integer number of pixels"
65+
bind:value={grid.lines.size}
66+
/>
67+
</InputWithUnit>
68+
</FormField>
69+
{/if}
7270

73-
<FormField>
74-
<label for="grid-cell-width">
75-
<MaterialSymbolsExpandRounded class="size-4 rotate-90" />
76-
Grid cell width
77-
</label>
78-
<InputWithUnit unit="px">
79-
<input
80-
id="grid-cell-width"
81-
type="text"
82-
inputMode="numeric"
83-
pattern="[0-9]*"
84-
title="Use 1 or a bigger integer number of pixels"
85-
bind:value={grid.cell.width}
86-
/>
87-
</InputWithUnit>
88-
</FormField>
71+
<FormField>
72+
<label for="grid-cell-shape">
73+
<MaterialSymbolsCropRounded class="size-4" />
74+
Grid cell shape
75+
</label>
76+
<select id="grid-cell-shape" class="w-full" bind:value={grid.cell.shape}>
77+
<option value="square">Square (Same width and height)</option>
78+
<option value="rectangle">Rectangle (Different width and height)</option>
79+
</select>
80+
</FormField>
8981

90-
<FormField>
91-
<label for="grid-cell-height">
92-
<MaterialSymbolsExpandRounded class="size-4" />
93-
Grid cell height
94-
</label>
95-
{#if grid.cell.shape === 'rectangle'}
82+
<FormField>
83+
<label for="grid-cell-width">
84+
<MaterialSymbolsExpandRounded class="size-4 rotate-90" />
85+
Grid cell width
86+
</label>
9687
<InputWithUnit unit="px">
9788
<input
98-
id="grid-cell-height"
89+
id="grid-cell-width"
9990
type="text"
10091
inputMode="numeric"
10192
pattern="[0-9]*"
10293
title="Use 1 or a bigger integer number of pixels"
103-
bind:value={grid.cell.height}
94+
bind:value={grid.cell.width}
10495
/>
10596
</InputWithUnit>
106-
{:else}
107-
<InputWithUnit unit="px" disabled>
108-
<input id="grid-cell-height" type="text" value={grid.cell.width} disabled />
109-
</InputWithUnit>
110-
{/if}
111-
</FormField>
97+
</FormField>
11298

113-
<FormField>
114-
<label for="grid-cell-scale">
115-
<MaterialSymbolsBackToTabRounded class="size-4 -scale-x-100" />
116-
Grid cell scale
117-
</label>
118-
<InputWithUnit unit="x">
119-
<input
120-
id="grid-cell-scale"
121-
type="text"
122-
inputMode="numeric"
123-
pattern="[0-9]*"
124-
title="Use 1 or a bigger integer number for scaling"
125-
bind:value={grid.cell.scale}
126-
/>
127-
</InputWithUnit>
128-
</FormField>
99+
<FormField>
100+
<label for="grid-cell-height">
101+
<MaterialSymbolsExpandRounded class="size-4" />
102+
Grid cell height
103+
</label>
104+
{#if grid.cell.shape === 'rectangle'}
105+
<InputWithUnit unit="px">
106+
<input
107+
id="grid-cell-height"
108+
type="text"
109+
inputMode="numeric"
110+
pattern="[0-9]*"
111+
title="Use 1 or a bigger integer number of pixels"
112+
bind:value={grid.cell.height}
113+
/>
114+
</InputWithUnit>
115+
{:else}
116+
<InputWithUnit unit="px" disabled>
117+
<input id="grid-cell-height" type="text" value={grid.cell.width} disabled />
118+
</InputWithUnit>
119+
{/if}
120+
</FormField>
129121

130-
<FormField>
131-
<label for="grid-cell-corner-radius">
132-
<MaterialSymbolsRoundedCornerRounded class="size-4" />
133-
Grid cell corner radius
134-
</label>
135-
<InputWithUnit unit="px">
136-
<input
137-
id="grid-cell-corner-radius"
138-
type="text"
139-
inputMode="numeric"
140-
pattern="[0-9]*"
141-
title="Use 0 or a bigger integer number of pixels"
142-
bind:value={grid.cell.cornerRadius}
143-
/>
144-
</InputWithUnit>
145-
</FormField>
122+
<FormField>
123+
<label for="grid-cell-scale">
124+
<MaterialSymbolsBackToTabRounded class="size-4 -scale-x-100" />
125+
Grid cell scale
126+
</label>
127+
<InputWithUnit unit="x">
128+
<input
129+
id="grid-cell-scale"
130+
type="text"
131+
inputMode="numeric"
132+
pattern="[0-9]*"
133+
title="Use 1 or a bigger integer number for scaling"
134+
bind:value={grid.cell.scale}
135+
/>
136+
</InputWithUnit>
137+
</FormField>
138+
139+
<FormField>
140+
<label for="grid-cell-corner-radius">
141+
<MaterialSymbolsRoundedCornerRounded class="size-4" />
142+
Grid cell corner radius
143+
</label>
144+
<InputWithUnit unit="px">
145+
<input
146+
id="grid-cell-corner-radius"
147+
type="text"
148+
inputMode="numeric"
149+
pattern="[0-9]*"
150+
title="Use 0 or a bigger integer number of pixels"
151+
bind:value={grid.cell.cornerRadius}
152+
/>
153+
</InputWithUnit>
154+
</FormField>
155+
{/if}
146156
</OptsCard>

‎src/lib/render/apply-grid.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import type { Dimensions, GridOpts } from '$lib/types';
22

33
export function applyGrid(canvas: OffscreenCanvas, grid: GridOpts): OffscreenCanvas {
44
// Nothing to do.
5-
if (grid.type === 'none' && grid.cell.scale === 1 && grid.cell.cornerRadius === 0) {
5+
if (grid.type === 'none') return canvas;
6+
if (grid.type === 'invisible' && grid.cell.scale === 1 && grid.cell.cornerRadius === 0) {
67
return canvas;
78
}
89

910
// Use faster canvas scaling since other grid features are not enabled.
10-
if (grid.type === 'none' && grid.cell.scale > 1 && grid.cell.cornerRadius === 0) {
11+
if (grid.type === 'invisible' && grid.cell.scale > 1 && grid.cell.cornerRadius === 0) {
1112
return applyScale(canvas, grid.cell.scale);
1213
}
1314

@@ -91,6 +92,7 @@ function gridBorderDimensions(grid: GridOpts): Dimensions {
9192
switch (grid.type) {
9293
case 'none':
9394
case 'lines':
95+
case 'invisible':
9496
return [0, 0];
9597
case 'border':
9698
case 'full':
@@ -104,6 +106,7 @@ function gridLinesDimensions(canvas: OffscreenCanvas, grid: GridOpts): Dimension
104106
switch (grid.type) {
105107
case 'none':
106108
case 'border':
109+
case 'invisible':
107110
return [0, 0];
108111
case 'lines':
109112
case 'full':
@@ -132,7 +135,9 @@ function srcCellDimensions(canvas: OffscreenCanvas, grid: GridOpts): Dimensions
132135
switch (grid.type) {
133136
case 'none':
134137
case 'border':
135-
// No need to create source cells as there are no grid lines; just use one cell for the canvas.
138+
case 'invisible':
139+
// No need to create source cells as there are no grid lines.
140+
// Just use one cell for the whole canvas.
136141
return [canvas.width, canvas.height];
137142
case 'lines':
138143
case 'full':
@@ -150,6 +155,7 @@ function gridLineAndBorderSizes(grid: GridOpts): Dimensions {
150155
// Tuple is [line, border] stroke sizes.
151156
switch (grid.type) {
152157
case 'none':
158+
case 'invisible':
153159
return [0, 0];
154160
case 'border':
155161
return [0, grid.lines.size];

‎src/lib/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const PaletteOpts = z.object({
6565
export type PaletteOpts = z.infer<typeof PaletteOpts>;
6666

6767
export const GridOpts = z.object({
68-
type: z.literal(['none', 'full', 'lines', 'border']).catch('none'),
68+
type: z.literal(['none', 'full', 'lines', 'border', 'invisible']).catch('none'),
6969
color: z
7070
.string()
7171
.regex(/^#(?:[0-9a-f]{3}){1,2}$/i)

0 commit comments

Comments
 (0)