-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add experimental minified left-hand area
- Loading branch information
Showing
3 changed files
with
178 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |