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

Implement color picker 

sadly not universal
main
kts of kettek 2024-02-14 19:25:45 -08:00
parent 383b4eedb0
commit acb305f437
3 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/App.svelte
View File

@ -14,10 +14,10 @@
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte"
import { Close, Erase, PaintBrushAlt, RainDrop, Redo, Select_01, Undo, Scale } from "carbon-icons-svelte"
import { Close, Erase, PaintBrushAlt, RainDrop, Redo, Select_01, Undo, Scale, Eyedropper } from "carbon-icons-svelte"
import StackPreview from './sections/StackPreview.svelte'
import type { Canvas } from './types/canvas'
import { BrushTool, EraserTool, FillTool, type Tool } from './types/tools';
import { BrushTool, EraserTool, FillTool, PickerTool, type Tool } from './types/tools';
import BrushSize from './components/BrushSize.svelte';
let theme: 'white'|'g10'|'g80'|'g90'|'g100' = 'g90'
@ -38,6 +38,7 @@
let toolFill = new FillTool()
let toolErase = new EraserTool()
let toolBrush = new BrushTool()
let toolPicker = new PickerTool()
let currentTool: Tool = toolBrush
let brushSize: number = 1
@ -103,6 +104,7 @@
<Button disabled kind="ghost" size="small" icon={Select_01} iconDescription="selection" tooltipPosition="right"></Button>
<Button isSelected={currentTool === toolFill} kind="ghost" size="small" icon={RainDrop} iconDescription="fill" tooltipPosition="right" on:click={()=>swapTool(toolFill)}></Button>
<Button isSelected={currentTool === toolBrush} kind="ghost" size="small" icon={PaintBrushAlt} iconDescription="paint" tooltipPosition="right" on:click={()=>swapTool(toolBrush)}></Button>
<Button isSelected={currentTool === toolPicker} kind="ghost" size="small" icon={Eyedropper} iconDescription="pick" tooltipPosition="right" on:click={()=>swapTool(toolPicker)}></Button>
<Button isSelected={currentTool === toolErase} kind="ghost" size="small" icon={Erase} iconDescription="erase" tooltipPosition="right" on:click={()=>swapTool(toolErase)}></Button>
</menu>
<section class='middle'>
@ -124,7 +126,7 @@
<svelte:fragment slot="content">
{#each files as file}
<TabContent>
<Editor2D bind:file={file} refresh={refresh} primaryColorIndex={primaryColorIndex} secondaryColorIndex={secondaryColorIndex} bind:currentTool={currentTool} brushSize={brushSize} />
<Editor2D bind:file={file} refresh={refresh} bind:primaryColorIndex={primaryColorIndex} bind:secondaryColorIndex={secondaryColorIndex} bind:currentTool={currentTool} brushSize={brushSize} />
</TabContent>
{/each}
</svelte:fragment>

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

@ -4,7 +4,7 @@
import type { data } from '../../wailsjs/go/models.ts'
import type { LoadedFile } from '../types/file'
import type { PixelPosition } from '../types/shapes'
import { BrushTool, EraserTool, FillTool, type Tool } from '../types/tools'
import { BrushTool, EraserTool, FillTool, PickerTool, type Tool } from '../types/tools'
import { Button, NumberInput, OverflowMenu, OverflowMenuItem, Slider } from 'carbon-components-svelte';
import { ZoomIn, ZoomOut } from 'carbon-icons-svelte';
@ -214,6 +214,8 @@
currentTool.pointerDown({file, brushSize}, {x: mousePixelX, y: mousePixelY, id: e.button })
} else if (currentTool instanceof FillTool) {
currentTool.pointerDown({file, colorIndex: primaryColorIndex}, {x: mousePixelX, y: mousePixelY, id: e.button })
} else if (currentTool instanceof PickerTool) {
currentTool.pointerDown({file, setColorIndex: index=>primaryColorIndex=index}, {x: mousePixelX, y: mousePixelY, id: e.button })
} else {
currentTool.pointerDown({file}, {x: mousePixelX, y: mousePixelY, id: e.button })
}
@ -274,6 +276,8 @@
currentTool.pointerMove({file, brushSize}, {x: mousePixelX, y: mousePixelY, id: 0 })
} else if (currentTool instanceof FillTool) {
currentTool.pointerMove({file, colorIndex: primaryColorIndex}, {x: mousePixelX, y: mousePixelY, id: 0 })
} else if (currentTool instanceof PickerTool) {
currentTool.pointerMove({file, setColorIndex: index=>primaryColorIndex=index}, {x: mousePixelX, y: mousePixelY, id: e.button })
} else {
currentTool.pointerMove({file}, {x: mousePixelX, y: mousePixelY, id: 0 })
}

28
frontend/src/types/tools.ts
View File

@ -31,6 +31,10 @@ export interface FloodToolContext {
colorIndex: number
}
export interface PickerToolContext {
setColorIndex(index: number): void
}
export class BrushTool implements Tool {
private active: boolean
isActive(): boolean {
@ -135,4 +139,28 @@ export class FillTool implements Tool {
ctx.file.push(new PixelsPlaceUndoable(this.pixels))
this.active = false
}
}
export class PickerTool implements Tool {
private active: boolean
isActive(): boolean {
return this.active
}
pointerDown(ctx: ToolContext & PickerToolContext, ptr: Pointer) {
this.active = true
let p = ctx.file.canvas.getPixel(ptr.x, ptr.y)
if (p !== -1) {
ctx.setColorIndex(p)
}
}
pointerMove(ctx: ToolContext & PickerToolContext, ptr: Pointer) {
let p = ctx.file.canvas.getPixel(ptr.x, ptr.y)
if (p !== -1) {
ctx.setColorIndex(p)
}
}
pointerUp(ctx: ToolContext & PickerToolContext, ptr: Pointer) {
this.active = false
}
}