kts
/
spriteStackist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add grid visuals

main
kts of kettek 2024-02-23 22:47:58 -08:00
parent badfddac6f
commit 3b7428e6df
2 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/App.svelte
View File

@ -312,7 +312,25 @@
<Shortcut global cmd={'swapFile'+index} keys={['F'+(index+1)]} on:trigger={()=>selectFile(file, index)} />
</Shortcuts>
<TabContent>
<Editor2D bind:file={file} refresh={refresh} bind:primaryColorIndex={primaryColorIndex} bind:secondaryColorIndex={secondaryColorIndex} bind:currentTool={currentTool} brushSize={brushSize} brushType={brushType} showCheckerboard={showCheckerboard} checkerboardSize={checkerboardSize} checkerboardColor1={checkerboardColor1} checkerboardColor2={checkerboardColor2} backgroundColor={backgroundColor} />
<Editor2D
bind:file={file}
refresh={refresh}
bind:primaryColorIndex={primaryColorIndex}
bind:secondaryColorIndex={secondaryColorIndex}
bind:currentTool={currentTool}
brushSize={brushSize}
brushType={brushType}
showCheckerboard={showCheckerboard}
checkerboardSize={checkerboardSize}
checkerboardColor1={checkerboardColor1}
checkerboardColor2={checkerboardColor2}
showGrid={showGrid}
backgroundColor={backgroundColor}
gridMajorColor={gridMajorColor}
gridMinorColor={gridMinorColor}
gridMajorSize={gridMajorSize}
gridMinorSize={gridMinorSize}
/>
</TabContent>
{/each}
</svelte:fragment>

36
frontend/src/sections/Editor2D.svelte
View File

@ -21,6 +21,12 @@
export let backgroundColor: string = '#111111'
export let showGrid: boolean = true
export let gridMajorSize: number = 16
export let gridMajorColor: string = '#333333'
export let gridMinorSize: number = 1
export let gridMinorColor: string = '#222222'
$: ((...args) => {
canvasDirty = true
})(showCheckerboard, checkerboardSize, checkerboardColor1, checkerboardColor2, backgroundColor)
@ -165,6 +171,36 @@
ctx.restore()
}
// Draw our grid.
if (showGrid) {
// Minor grid lines.
ctx.strokeStyle = gridMinorColor
ctx.lineWidth = 0.5
ctx.beginPath()
for (let x = gridMinorSize; x < file.canvas.width; x += gridMinorSize) {
ctx.moveTo(offsetX*zoom+x*zoom, offsetY*zoom)
ctx.lineTo(offsetX*zoom+x*zoom, offsetY*zoom+file.canvas.height*zoom)
}
for (let y = gridMinorSize; y < file.canvas.height; y += gridMinorSize) {
ctx.moveTo(offsetX*zoom, offsetY*zoom+y*zoom)
ctx.lineTo(offsetX*zoom+file.canvas.width*zoom, offsetY*zoom+y*zoom)
}
ctx.stroke()
// Major grid lines.
ctx.strokeStyle = gridMajorColor
ctx.lineWidth = 0.5
ctx.beginPath()
for (let x = gridMajorSize; x < file.canvas.width; x += gridMajorSize) {
ctx.moveTo(offsetX*zoom+x*zoom, offsetY*zoom)
ctx.lineTo(offsetX*zoom+x*zoom, offsetY*zoom+file.canvas.height*zoom)
}
for (let y = gridMajorSize; y < file.canvas.height; y += gridMajorSize) {
ctx.moveTo(offsetX*zoom, offsetY*zoom+y*zoom)
ctx.lineTo(offsetX*zoom+file.canvas.width*zoom, offsetY*zoom+y*zoom)
}
ctx.stroke()
}
// Draw our overlay with difference composition so visibility is better.
ctx.save()
ctx.globalCompositeOperation = 'difference'