Skip to content

Commit

Permalink
Add experimental minified left-hand area
Browse files Browse the repository at this point in the history
  • Loading branch information
kettek committed Nov 21, 2024
1 parent 84d73f5 commit 74d1fd2
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 10 deletions.
43 changes: 33 additions & 10 deletions frontend/src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@
import ReplacePixelIndicesModal from './components/ReplacePixelIndicesModal.svelte'
import ResizeSlicesModal from './components/ResizeSlicesModal.svelte'
import Render from './sections/Render.svelte'
import PalettePicker from './components/PalettePicker.svelte'
import PalettePopup from './components/PalettePopup.svelte'
let is3D: boolean = true
Expand Down Expand Up @@ -137,6 +139,9 @@
let orthographicCamera: boolean = false
let minifiedLeft: boolean = false
let showSwatchChanger: boolean = false
function selectFile(file: LoadedFile, index: number, id: number) {
if (index < 0 || index >= fileStates.length()) return
Expand Down Expand Up @@ -578,6 +583,9 @@
<Checkbox on:click={(e) => e.stopPropagation()} bind:checked={$generalSettings.useRichPresence} labelText="Rich Presence" />
</OverflowMenuItem>
<OverflowMenuItem hasDivider on:click={() => (showRender = true)}>Render...</OverflowMenuItem>
<OverflowMenuItem hasDivider>
<Checkbox on:click={(e) => e.stopPropagation()} bind:checked={minifiedLeft} labelText="Minified Left" />
</OverflowMenuItem>
</OverflowMenu>
<OverflowMenu size="sm">
<div slot="menu">Help</div>
Expand All @@ -587,17 +595,19 @@
</OverflowMenuItem>
</OverflowMenu>
</menu>
<section class="content">
<section class="content" class:minifiedLeft>
<section class="left">
<Dropdown size="sm" bind:selectedId={selectedPaletteID} items={[{ id: 0, text: '<image>' }].concat($palettesStore.map((p, i) => ({ id: i + 1, text: p.name })))} />
<section class="palette">
<PaletteOptionsToolbar palette={fakePalette} file={$fileStates.focused} />
</section>
<PaletteSection refresh={refreshPalette} file={$fileStates.focused} {fakePalette} on:select={handlePaletteSelect} />
<article>
<ColorSelector bind:red bind:green bind:blue bind:alpha />
<ColorIndex bind:red bind:green bind:blue bind:alpha file={$fileStates.focused} palette={fakePalette} on:refresh={() => (refreshPalette = {})} />
</article>
{#if !minifiedLeft}
<Dropdown size="sm" bind:selectedId={selectedPaletteID} items={[{ id: 0, text: '<image>' }].concat($palettesStore.map((p, i) => ({ id: i + 1, text: p.name })))} />
<section class="palette">
<PaletteOptionsToolbar palette={fakePalette} file={$fileStates.focused} />
</section>
<PaletteSection refresh={refreshPalette} file={$fileStates.focused} {fakePalette} on:select={handlePaletteSelect} />
<article>
<ColorSelector bind:red bind:green bind:blue bind:alpha />
<ColorIndex bind:red bind:green bind:blue bind:alpha file={$fileStates.focused} palette={fakePalette} on:refresh={() => (refreshPalette = {})} />
</article>
{/if}
</section>
<menu class="toolbar">
{#if is3D}
Expand Down Expand Up @@ -725,6 +735,9 @@
<ShortcutTooltip slot="tooltip" group="editor2D" cmd="rotate counter clockwise" />
</Button>
{/if}
{#if minifiedLeft}
<PalettePicker {fakePalette} file={$fileStates.focused} on:selectPrimarySwatch={() => (showSwatchChanger = true)} on:selectSecondarySwatch={() => (showSwatchChanger = true)} />
{/if}
</menu>
<section class="middle">
<menu class="toolsettings">
Expand Down Expand Up @@ -846,6 +859,13 @@
{#if showResizeSlices && $fileStates.focused}
<ResizeSlicesModal bind:open={showResizeSlices} onsubmit={engageResizeSlices} />
{/if}

{#if showSwatchChanger && $fileStates.focused}
<FloatingPanel label="Change Swatch" bind:open={showSwatchChanger} noPadding id="swatch-changer">
<PalettePopup file={$fileStates.focused} {fakePalette} />
</FloatingPanel>
{/if}

{#if showUpdater && $fileStates.focused}
<VioUpdater bind:open={showUpdater} file={$fileStates.focused} />
{/if}
Expand Down Expand Up @@ -879,6 +899,9 @@
grid-template-columns: 1fr auto 4fr 1fr;
grid-template-rows: minmax(0, 1fr);
}
.content.minifiedLeft {
grid-template-columns: 0 auto 4fr 1fr;
}
.left {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
Expand Down
103 changes: 103 additions & 0 deletions frontend/src/components/PalettePicker.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<script lang="ts">
import type { Palette } from '../types/palette'
import { brushSettings } from '../stores/brush'
import type { LoadedFile } from '../types/file'
import { createEventDispatcher } from 'svelte'
export let file: LoadedFile | undefined
export let fakePalette: Palette | undefined
let palette: Uint32Array | undefined = undefined
$: {
if ($fakePalette) {
palette = $fakePalette.swatches
} else {
palette = $file ? $file.canvas.palette : undefined
}
}
let primarySwatch: string = ''
let secondarySwatch: string = ''
const dispatch = createEventDispatcher()
$: {
if (palette) {
let primaryIndex = $brushSettings.primaryIndex
if (primaryIndex >= 0 && primaryIndex < palette.length) {
primarySwatch = `rgba(${palette[primaryIndex] & 0xff},${(palette[primaryIndex] >> 8) & 0xff},${(palette[primaryIndex] >> 16) & 0xff},${((palette[primaryIndex] >> 24) & 0xff) / 255})`
}
let secondaryIndex = $brushSettings.secondaryIndex
if (secondaryIndex >= 0 && secondaryIndex < palette.length) {
secondarySwatch = `rgba(${palette[secondaryIndex] & 0xff},${(palette[secondaryIndex] >> 8) & 0xff},${(palette[secondaryIndex] >> 16) & 0xff},${((palette[secondaryIndex] >> 24) & 0xff) / 255})`
}
}
}
function swapEm() {
let temp = $brushSettings.primaryIndex
$brushSettings.primaryIndex = $brushSettings.secondaryIndex
$brushSettings.secondaryIndex = temp
}
function selectPrimary() {
dispatch('selectPrimarySwatch', { index: $brushSettings.primaryIndex })
}
function selectSecondary() {
dispatch('selectSecondarySwatch', { index: $brushSettings.secondaryIndex })
}
</script>

<main>
<section>
<div class="secondary" style="background: {secondarySwatch}" on:click={selectSecondary}></div>
<div class="primary" style="background: {primarySwatch}" on:click={selectPrimary}></div>
<div class="swapper" on:click={swapEm}></div>
</section>
</main>

<style>
main {
display: flex;
align-items: flex-end;
height: 100%;
padding: 0.25rem;
}
section {
position: relative;
width: 1.5rem;
height: 1.5rem;
}
.primary {
position: absolute;
top: 0;
left: 0;
width: 1rem;
height: 1rem;
}
.secondary {
position: absolute;
bottom: 0;
right: 0;
width: 1rem;
height: 1rem;
}
.swapper {
position: absolute;
top: 0;
right: 0;
width: 0.5rem;
height: 0.5rem;
}
.swapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
border: 1px solid white;
border-radius: 50%;
pointer-events: none;
width: 0.25rem;
height: 0.25rem;
pointer-events: none;
}
</style>
42 changes: 42 additions & 0 deletions frontend/src/components/PalettePopup.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<script lang="ts">
import ColorIndex from './ColorIndex.svelte'
import ColorSelector from './ColorSelector.svelte'
import PaletteOptionsToolbar from './PaletteOptionsToolbar.svelte'
import PaletteSection from '../sections/Palette.svelte'
import type { Palette } from '../types/palette'
import type { LoadedFile } from '../types/file'
export let file: LoadedFile
export let fakePalette: Palette | undefined = undefined
let refreshPalette = {}
let red: number = 0
let green: number = 0
let blue: number = 0
let alpha: number = 255
function handlePaletteSelect(event) {
console.log(event.detail)
}
</script>

<section class="palette">
<PaletteOptionsToolbar palette={fakePalette} {file} />
<PaletteSection refresh={refreshPalette} {file} {fakePalette} on:select={handlePaletteSelect} />
<article>
<ColorSelector bind:red bind:green bind:blue bind:alpha />
<ColorIndex bind:red bind:green bind:blue bind:alpha {file} palette={fakePalette} on:refresh={() => (refreshPalette = {})} />
</article>
</section>

<style>
.palette {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
grid-template-columns: minmax(0, 1fr);
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

0 comments on commit 74d1fd2

Please sign in to comment.