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

Implement stack preview settings and outlines

main
kts of kettek 2024-04-10 23:11:25 -07:00
parent 9bc7704705
commit 11a18bbb24
3 changed files with 119 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/App.svelte
View File

@ -30,6 +30,7 @@
import ThemeSettingsModal from './components/ThemeSettingsModal.svelte';
import BackgroundSettingsModal from './components/BackgroundSettingsModal.svelte';
import New from './sections/New.svelte';
import PreviewSettingsModal from './components/PreviewSettingsModal.svelte';
let theme: 'white'|'g10'|'g80'|'g90'|'g100' = 'g90'
@ -88,6 +89,7 @@
let importCanvas: Canvas = null
let showPreview: boolean = false
let showPreviewSettings: boolean = false
let showGridSettings: boolean = false
let showCheckerboardSettings: boolean = false
let showThemeSettings: boolean = false
@ -104,6 +106,11 @@
let checkerboardSize: number = 8
let checkerboardColor1: string = '#888888'
let checkerboardColor2: string = '#444444'
let previewShowBaseSizeOutline: boolean = true
let previewBaseSizeOutlineColor: string = '#00FFFF77'
let previewShowSizeOutline: boolean = true
let previewSizeOutlineColor: string = '#FFFF0077'
let backgroundColor: string = '#111111'
@ -257,6 +264,7 @@
<OverflowMenu size="sm">
<div slot="menu">Windows</div>
<OverflowMenuItem text="Preview" on:click={() => showPreview = true}/>
<OverflowMenuItem text="Preview Settings..." on:click={() => showPreviewSettings = true}/>
</OverflowMenu>
</menu>
<section class='content'>
@ -370,9 +378,24 @@
noPadding
bind:open={showPreview}
>
<StackPreview files={files} />
<StackPreview
files={files}
showBaseSizeOutline={previewShowBaseSizeOutline}
baseSizeOutlineColor={previewBaseSizeOutlineColor}
showSizeOutline={previewShowSizeOutline}
sizeOutlineColor={previewSizeOutlineColor}
/>
</FloatingPanel>
{/if}
{#if showPreviewSettings}
<PreviewSettingsModal
bind:open={showPreviewSettings}
bind:showBaseSizeOutline={previewShowBaseSizeOutline}
bind:baseSizeOutlineColor={previewBaseSizeOutlineColor}
bind:showSizeOutline={previewShowSizeOutline}
bind:sizeOutlineColor={previewSizeOutlineColor}
/>
{/if}
{#if showGridSettings}
<GridSettingsModal bind:open={showGridSettings} bind:majorSize={gridMajorSize} bind:minorSize={gridMinorSize} bind:majorColor={gridMajorColor} bind:minorColor={gridMinorColor} />
{/if}

67
frontend/src/components/PreviewSettingsModal.svelte 100644
View File

@ -0,0 +1,67 @@
<!--
@component
This component is a modal that provides UI for changing the stack preview settings.
-->
<script lang='ts'>
import { Checkbox, Column, Grid, Modal, NumberInput, Row, TextInput } from "carbon-components-svelte";
export let showBaseSizeOutline: boolean = true
export let baseSizeOutlineColor: string = '#00FFFF77'
export let showSizeOutline: boolean = true
export let sizeOutlineColor: string = '#FFFF0077'
let pendingShowBaseSizeOutline: boolean = showBaseSizeOutline
let pendingBaseSizeOutlineColor: string = baseSizeOutlineColor
let pendingShowSizeOutline: boolean = showSizeOutline
let pendingSizeOutlineColor: string = sizeOutlineColor
$: {
pendingShowBaseSizeOutline = showBaseSizeOutline
pendingBaseSizeOutlineColor = baseSizeOutlineColor
pendingShowSizeOutline = showSizeOutline
pendingSizeOutlineColor = sizeOutlineColor
}
let changed: boolean = false
$: {
changed = showBaseSizeOutline !== pendingShowBaseSizeOutline || baseSizeOutlineColor !== pendingBaseSizeOutlineColor || showSizeOutline !== pendingShowSizeOutline || sizeOutlineColor !== pendingSizeOutlineColor
}
export let open: boolean = false
</script>
<Modal
preventCloseOnClickOutside
bind:open
modalHeading="Stack Preview Settings"
primaryButtonText="Apply"
secondaryButtonText="Cancel"
on:close={() => open = false}
on:click:button--secondary={() => open = false}
on:submit={() => {
showBaseSizeOutline = pendingShowBaseSizeOutline
baseSizeOutlineColor = pendingBaseSizeOutlineColor
showSizeOutline = pendingShowSizeOutline
sizeOutlineColor = pendingSizeOutlineColor
open = false
}}
primaryButtonDisabled={!changed}
>
<Grid narrow condensed fullWidth>
<Column>
<Row>
<Checkbox id="showBaseSizeOutline" bind:checked={pendingShowBaseSizeOutline}>Show Base Size Outline</Checkbox>
</Row>
<Row>
<TextInput id="baseSizeOutlineColor" labelText="Base Size Outline Color" bind:value={pendingBaseSizeOutlineColor}/>
</Row>
<Row>
<Checkbox id="showSizeOutline" bind:checked={pendingShowSizeOutline}>Show Size Outline</Checkbox>
</Row>
<Row>
<TextInput id="sizeOutlineColor" labelText="Size Outline Color" bind:value={pendingSizeOutlineColor}/>
</Row>
</Column>
</Grid>
</Modal>

29
frontend/src/sections/StackPreview.svelte
View File

@ -15,6 +15,11 @@
let zoom: number = 1
let layerDistance: number = 1
export let baseSizeOutlineColor: string = '#00FFFF77'
export let showBaseSizeOutline: boolean = true
export let sizeOutlineColor: string = '#FFFF0077'
export let showSizeOutline: boolean = true
let canvas: HTMLCanvasElement
function draw() {
if (!canvas) return
@ -42,7 +47,29 @@
for (let [groupName, group] of Object.entries(file.data.groups)) {
for (let [animationName, animation] of Object.entries(group.animations)) {
for (let frame of animation.frames) {
for (let layer of frame.layers) {
for (let layerIndex = 0; layerIndex < frame.layers.length; layerIndex++) {
let layer = frame.layers[layerIndex]
if (layerIndex === 0) {
if (showBaseSizeOutline) {
ctx.save()
ctx.translate(x, y)
ctx.scale(zoom, zoom)
ctx.strokeStyle = baseSizeOutlineColor
ctx.lineWidth = 1
ctx.strokeRect(-file.data.width/2, -file.data.height/2, file.data.width, file.data.height)
ctx.restore()
}
if (showSizeOutline) {
ctx.save()
ctx.translate(x, y)
ctx.scale(zoom, zoom)
ctx.rotate(rotation * Math.PI / 180)
ctx.strokeStyle = sizeOutlineColor
ctx.lineWidth = 1
ctx.strokeRect(-file.data.width/2, -file.data.height/2, file.data.width, file.data.height)
ctx.restore()
}
}
ctx.save()
ctx.translate(x, y)
ctx.scale(zoom, zoom)