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

Add index labels

main
kts of kettek 2024-02-22 00:44:01 -08:00
parent bd4a88f1db
commit 48bf5299c1
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/sections/Palette.svelte
View File

@ -81,7 +81,7 @@
} }
function stop(e: MouseEvent) { function stop(e: MouseEvent) {
if (hoveringIndex !== -1 && hoveringIndex !== draggingIndex) { if (hoveringIndex !== -1 && hoveringIndex !== draggingIndex) {
file.push(new MoveSwatchUndoable(draggingIndex, hoveringIndex)) file.push(new MoveSwatchUndoable(draggingIndex, hoveringIndex<draggingIndex?hoveringIndex:hoveringIndex-1))
file = file file = file
} }
@ -119,16 +119,18 @@
<main on:wheel={handleWheel}> <main on:wheel={handleWheel}>
{#if file} {#if file}
{#each file.canvas.palette as palette, paletteIndex} {#each file.canvas.palette as palette, paletteIndex}
{#if paletteIndex === hoveringIndex || (paletteIndex === hoveringIndex-1 && paletteIndex === file.canvas.palette.length-2)} {#if draggingIndex !== -1 && (paletteIndex === hoveringIndex || (paletteIndex === hoveringIndex-1 && paletteIndex === file.canvas.palette.length-2))}
<span class="entry primary"> <span class="entry primary">
<span class="checkerboard"></span> <span class="checkerboard"></span>
<span style="background-color: rgba({file.canvas.palette[draggingIndex]&0xFF},{(file.canvas.palette[draggingIndex]>>8)&0xFF},{(file.canvas.palette[draggingIndex]>>16)&0xFF},{((file.canvas.palette[draggingIndex]>>24)&0xFF)/255})" class="color"></span> <span style="background-color: rgba({file.canvas.palette[draggingIndex]&0xFF},{(file.canvas.palette[draggingIndex]>>8)&0xFF},{(file.canvas.palette[draggingIndex]>>16)&0xFF},{((file.canvas.palette[draggingIndex]>>24)&0xFF)/255})" class="color"></span>
<span class='label'>{draggingIndex}</span>
</span> </span>
{/if} {/if}
{#if paletteIndex !== draggingIndex} {#if paletteIndex !== draggingIndex}
<span on:click={paletteClick} x-index={paletteIndex} class='entry{paletteIndex===primaryColorIndex?' primary':''}{paletteIndex===secondaryColorIndex?' secondary':''}{paletteIndex===draggingIndex?' hide':''}' use:swatchDrag> <span on:click={paletteClick} x-index={paletteIndex} class='entry{paletteIndex===primaryColorIndex?' primary':''}{paletteIndex===secondaryColorIndex?' secondary':''}{paletteIndex===draggingIndex?' hide':''}' use:swatchDrag>
<span class="checkerboard"></span> <span class="checkerboard"></span>
<span style="background-color: rgba({palette&0xFF},{(palette>>8)&0xFF},{(palette>>16)&0xFF},{((palette>>24)&0xFF)/255})" class="color"></span> <span style="background-color: rgba({palette&0xFF},{(palette>>8)&0xFF},{(palette>>16)&0xFF},{((palette>>24)&0xFF)/255})" class="color"></span>
<span class='label'>{paletteIndex}</span>
</span> </span>
{/if} {/if}
{/each} {/each}
@ -146,8 +148,6 @@
display: inline-block; display: inline-block;
width: 2em; width: 2em;
height: 2em; height: 2em;
margin: 2px;
padding: 2px;
border: 2px solid transparent; border: 2px solid transparent;
} }
.entry.hide { .entry.hide {
@ -179,4 +179,17 @@
background-size: 10px 10px; background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
} }
.label {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.6rem;
mix-blend-mode: difference;
}
</style> </style>