From 8450b64ba7de76e6e052956b75521d1ba138f62b Mon Sep 17 00:00:00 2001 From: Florian Date: Fri, 10 Jul 2026 12:07:06 +0200 Subject: [PATCH 1/4] Derive guided drawing progress (#311) --- .../paint-by-number/guided-progress.ts | 82 ++++++++++++++ .../paint-by-number/guided-progress.test.ts | 106 ++++++++++++++++++ 2 files changed, 188 insertions(+) create mode 100644 src/services/paint-by-number/guided-progress.ts create mode 100644 tests/services/paint-by-number/guided-progress.test.ts diff --git a/src/services/paint-by-number/guided-progress.ts b/src/services/paint-by-number/guided-progress.ts new file mode 100644 index 0000000..53434a3 --- /dev/null +++ b/src/services/paint-by-number/guided-progress.ts @@ -0,0 +1,82 @@ +import type { ProjectContext } from '../../stores/project-context'; +import type { GuidedDrawingSession } from '../../types/guided-drawing'; + +export interface GuidedDrawingSnapshot { + session: GuidedDrawingSession; + pixels: Uint8ClampedArray; +} + +export interface GuidedDrawingProgress { + total: number; + covered: number; + remaining: number; + percentage: number; + remainingByNumber: Uint32Array; +} + +export function analyzeGuidedDrawingProgress( + target: Uint8Array, + pixels: Uint8ClampedArray, +): GuidedDrawingProgress { + if (pixels.length !== target.length * 4) { + throw new RangeError('Guided drawing pixels do not match the target buffer'); + } + + const remainingByNumber = new Uint32Array(findHighestGuideNumber(target) + 1); + let total = 0; + let covered = 0; + + for (let index = 0; index < target.length; index += 1) { + const guideNumber = target[index]; + if (guideNumber === 0) continue; + + total += 1; + if (pixels[index * 4 + 3] > 0) { + covered += 1; + } else { + remainingByNumber[guideNumber] += 1; + } + } + + const remaining = total - covered; + return { + total, + covered, + remaining, + percentage: total === 0 ? 0 : Math.round((covered / total) * 100), + remainingByNumber, + }; +} + +export function getGuidedDrawingSnapshot( + context: ProjectContext, +): GuidedDrawingSnapshot | null { + const session = context.guidedDrawing.session.value; + if (!session) return null; + + const paintingLayer = context.layers.layers.value.find((layer) => layer.type === 'image'); + const canvas = paintingLayer?.canvas; + if (!canvas || canvas.width !== session.width || canvas.height !== session.height) { + return null; + } + + const drawingContext = canvas.getContext('2d', { willReadFrequently: true }); + if (!drawingContext) return null; + + try { + return { + session, + pixels: drawingContext.getImageData(0, 0, session.width, session.height).data, + }; + } catch { + return null; + } +} + +function findHighestGuideNumber(target: Uint8Array): number { + let highest = 0; + for (const guideNumber of target) { + highest = Math.max(highest, guideNumber); + } + return highest; +} diff --git a/tests/services/paint-by-number/guided-progress.test.ts b/tests/services/paint-by-number/guided-progress.test.ts new file mode 100644 index 0000000..9497bc9 --- /dev/null +++ b/tests/services/paint-by-number/guided-progress.test.ts @@ -0,0 +1,106 @@ +import { describe, expect, it } from 'vitest'; +import { + analyzeGuidedDrawingProgress, + getGuidedDrawingSnapshot, +} from '../../../src/services/paint-by-number/guided-progress'; +import { createProjectContext } from '../../../src/stores/project-context'; +import { GUIDED_DRAWING_VERSION } from '../../../src/types/guided-drawing'; + +describe('guided drawing progress', () => { + it('counts any visible painted color as creative coverage', () => { + const target = Uint8Array.from([1, 2, 0, 2]); + const pixels = new Uint8ClampedArray(target.length * 4); + pixels.set([18, 52, 86, 255], 0); + pixels.set([250, 10, 190, 128], 12); + + const progress = analyzeGuidedDrawingProgress(target, pixels); + + expect(progress).toMatchObject({ + total: 3, + covered: 2, + remaining: 1, + percentage: 67, + }); + expect([...progress.remainingByNumber]).toEqual([0, 0, 1]); + }); + + it('treats an erased cell as remaining again', () => { + const target = Uint8Array.from([1, 1]); + const painted = new Uint8ClampedArray([ + 255, 0, 0, 255, + 0, 0, 0, 0, + ]); + + expect(analyzeGuidedDrawingProgress(target, painted)).toMatchObject({ + covered: 1, + remaining: 1, + percentage: 50, + }); + + painted[3] = 0; + expect(analyzeGuidedDrawingProgress(target, painted)).toMatchObject({ + covered: 0, + remaining: 2, + percentage: 0, + }); + }); + + it('handles empty and fully covered targets without grading colors', () => { + const empty = analyzeGuidedDrawingProgress( + new Uint8Array(2), + new Uint8ClampedArray(8), + ); + expect(empty).toMatchObject({ total: 0, covered: 0, remaining: 0, percentage: 0 }); + + const full = analyzeGuidedDrawingProgress( + Uint8Array.from([1, 2]), + new Uint8ClampedArray([ + 1, 1, 1, 1, + 2, 2, 2, 255, + ]), + ); + expect(full).toMatchObject({ total: 2, covered: 2, remaining: 0, percentage: 100 }); + }); + + it('rejects pixel buffers that cannot align with the guide', () => { + expect(() => + analyzeGuidedDrawingProgress(Uint8Array.from([1]), new Uint8ClampedArray(3)), + ).toThrow('Guided drawing pixels do not match the target buffer'); + }); + + it('reads the fixed painting layer from a guided project context', () => { + const context = createProjectContext(); + context.guidedDrawing.start({ + version: GUIDED_DRAWING_VERSION, + width: 2, + height: 1, + target: Uint8Array.from([1, 2]), + settings: { + longSide: 2, + paletteSource: 'generated', + maxColors: 2, + mapping: 'color', + simplifyIsolatedPixels: false, + }, + createdAt: 1, + }); + + const layer = context.layers.layers.value.find((item) => item.type === 'image'); + const pixels = new Uint8ClampedArray([ + 0, 0, 0, 255, + 0, 0, 0, 0, + ]); + const canvas = { + width: 2, + height: 1, + getContext: () => ({ getImageData: () => ({ data: pixels }) }), + } as unknown as HTMLCanvasElement; + if (layer) context.layers.updateLayer(layer.id, { canvas }); + + const snapshot = getGuidedDrawingSnapshot(context); + expect(snapshot?.session.target).toEqual(Uint8Array.from([1, 2])); + expect(snapshot?.pixels[3]).toBe(255); + + context.dispose(); + }); +}); From 4437e3c04558f8f00558c57d37a09634f51a1b98 Mon Sep 17 00:00:00 2001 From: Florian Date: Fri, 10 Jul 2026 12:09:06 +0200 Subject: [PATCH 2/4] Render readable guided cell numbers (#312) --- src/components/canvas/pf-canvas-viewport.ts | 2 + .../canvas/pf-guided-number-overlay.ts | 217 ++++++++++++++++++ .../canvas/pf-guided-number-overlay.test.ts | 98 ++++++++ 3 files changed, 317 insertions(+) create mode 100644 src/components/canvas/pf-guided-number-overlay.ts create mode 100644 tests/components/canvas/pf-guided-number-overlay.test.ts diff --git a/src/components/canvas/pf-canvas-viewport.ts b/src/components/canvas/pf-canvas-viewport.ts index ef9e0eb..122c97a 100644 --- a/src/components/canvas/pf-canvas-viewport.ts +++ b/src/components/canvas/pf-canvas-viewport.ts @@ -5,6 +5,7 @@ import { defaultProjectContext, type ProjectContext } from '../../stores/project import './pf-selection-overlay'; import './pf-marching-ants-overlay'; import './pf-brush-cursor-overlay'; +import './pf-guided-number-overlay'; import './pf-transform-handles'; import './pf-reference-transform-handles'; import './pf-text-input'; @@ -181,6 +182,7 @@ export class PFCanvasViewport extends BaseComponent { + diff --git a/src/components/canvas/pf-guided-number-overlay.ts b/src/components/canvas/pf-guided-number-overlay.ts new file mode 100644 index 0000000..32b3282 --- /dev/null +++ b/src/components/canvas/pf-guided-number-overlay.ts @@ -0,0 +1,217 @@ +import { css, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { getGuidedDrawingSnapshot } from '../../services/paint-by-number/guided-progress'; +import { defaultProjectContext, type ProjectContext } from '../../stores/project-context'; +import { CanvasOverlay } from './canvas-overlay'; + +const NUMBER_ZOOM_THRESHOLD = 16; + +export interface GuidedNumberCell { + guideNumber: number; + screenX: number; + screenY: number; + size: number; +} + +export interface GuidedNumberViewport { + zoom: number; + panX: number; + panY: number; + viewportWidth: number; + viewportHeight: number; +} + +export function collectVisibleGuidedNumberCells( + target: Uint8Array, + pixels: Uint8ClampedArray, + width: number, + viewport: GuidedNumberViewport, +): GuidedNumberCell[] { + if (pixels.length !== target.length * 4) { + throw new RangeError('Guided drawing pixels do not match the target buffer'); + } + if (viewport.zoom < NUMBER_ZOOM_THRESHOLD) return []; + + const cells: GuidedNumberCell[] = []; + for (let index = 0; index < target.length; index += 1) { + const guideNumber = target[index]; + if (guideNumber === 0 || pixels[index * 4 + 3] > 0) continue; + + const x = index % width; + const y = Math.floor(index / width); + const screenX = x * viewport.zoom + viewport.panX; + const screenY = y * viewport.zoom + viewport.panY; + if (!isCellVisible(screenX, screenY, viewport)) continue; + + cells.push({ + guideNumber, + screenX, + screenY, + size: viewport.zoom, + }); + } + + return cells; +} + +@customElement('pf-guided-number-overlay') +export class PFGuidedNumberOverlay extends CanvasOverlay { + static styles = css` + :host { + position: absolute; + inset: 0; + z-index: 49; + pointer-events: none; + } + + canvas { + width: 100%; + height: 100%; + } + + .zoom-hint { + position: absolute; + inset-block-start: 34px; + inset-inline-start: 50%; + z-index: 3; + margin: 0; + padding: 6px 9px; + transform: translateX(-50%); + border: 1px solid var(--pf-color-border); + border-radius: var(--pf-radius-sm); + background: rgba(13, 16, 21, 0.9); + color: var(--pf-color-text-secondary); + box-shadow: var(--pf-shadow-md); + font-size: var(--pf-font-size-xs); + white-space: nowrap; + } + `; + + private context: ProjectContext = defaultProjectContext; + private animationFrameId = 0; + + connectedCallback() { + super.connectedCallback(); + this.subscribeToActiveProjectContext((context) => { + this.context = context; + this.requestUpdate(); + this.scheduleDraw(); + }); + } + + disconnectedCallback() { + super.disconnectedCallback(); + if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId); + this.animationFrameId = 0; + } + + firstUpdated() { + super.firstUpdated(); + this.scheduleDraw(); + } + + updated() { + this.scheduleDraw(); + } + + protected resizeCanvas() { + super.resizeCanvas(); + this.scheduleDraw(); + } + + render() { + const session = this.context.guidedDrawing.session.value; + const zoom = this.context.viewport.zoom.value; + void this.context.viewport.panX.value; + void this.context.viewport.panY.value; + void this.context.history.version.value; + void this.context.layers.layers.value; + + return html` + + ${session && zoom < NUMBER_ZOOM_THRESHOLD + ? html` +

+ Zoom in to see guide numbers +

+ ` + : ''} + `; + } + + private scheduleDraw() { + if (this.animationFrameId) return; + this.animationFrameId = requestAnimationFrame(() => { + this.animationFrameId = 0; + this.draw(); + }); + } + + private draw() { + const drawingContext = this.prepareFrame(); + if (!drawingContext) return; + + const snapshot = getGuidedDrawingSnapshot(this.context); + if (!snapshot) return; + + const { viewport } = this.context; + const cells = collectVisibleGuidedNumberCells( + snapshot.session.target, + snapshot.pixels, + snapshot.session.width, + { + zoom: viewport.zoom.value, + panX: viewport.panX.value, + panY: viewport.panY.value, + viewportWidth: this.clientWidth, + viewportHeight: this.clientHeight, + }, + ); + + this.drawCells(drawingContext, cells); + } + + private drawCells(context: CanvasRenderingContext2D, cells: GuidedNumberCell[]) { + const fontFamily = getComputedStyle(this).fontFamily || '"Departure Mono", monospace'; + context.textAlign = 'center'; + context.textBaseline = 'middle'; + + for (const cell of cells) { + const label = String(cell.guideNumber); + const fontSize = Math.min(14, cell.size * (label.length > 1 ? 0.5 : 0.58)); + const inset = Math.max(1, Math.round(cell.size * 0.1)); + const badgeWidth = cell.size - inset * 2; + const badgeHeight = cell.size - inset * 2; + const centerX = cell.screenX + cell.size / 2; + const centerY = cell.screenY + cell.size / 2; + + context.fillStyle = 'rgba(7, 9, 13, 0.78)'; + context.fillRect( + Math.round(cell.screenX + inset), + Math.round(cell.screenY + inset), + Math.max(1, Math.round(badgeWidth)), + Math.max(1, Math.round(badgeHeight)), + ); + context.font = `700 ${fontSize}px ${fontFamily}`; + context.fillStyle = '#f5f3ee'; + context.fillText(label, centerX, centerY + 0.5, badgeWidth); + } + } +} + +function isCellVisible( + screenX: number, + screenY: number, + viewport: GuidedNumberViewport, +): boolean { + return screenX + viewport.zoom >= 0 + && screenY + viewport.zoom >= 0 + && screenX <= viewport.viewportWidth + && screenY <= viewport.viewportHeight; +} + +declare global { + interface HTMLElementTagNameMap { + 'pf-guided-number-overlay': PFGuidedNumberOverlay; + } +} diff --git a/tests/components/canvas/pf-guided-number-overlay.test.ts b/tests/components/canvas/pf-guided-number-overlay.test.ts new file mode 100644 index 0000000..3793b15 --- /dev/null +++ b/tests/components/canvas/pf-guided-number-overlay.test.ts @@ -0,0 +1,98 @@ +import { afterEach, describe, expect, it } from 'vitest'; +import { + collectVisibleGuidedNumberCells, + type PFGuidedNumberOverlay, +} from '../../../src/components/canvas/pf-guided-number-overlay'; +import '../../../src/components/canvas/pf-canvas-viewport'; +import { createProjectContext, restoreDefaultProjectContext, setActiveProjectContext } from '../../../src/stores/project-context'; +import { GUIDED_DRAWING_VERSION } from '../../../src/types/guided-drawing'; + +describe('guided number overlay', () => { + afterEach(() => { + document.body.innerHTML = ''; + restoreDefaultProjectContext(); + }); + + it('plans every visible unpainted numbered cell at readable zoom', () => { + const cells = collectVisibleGuidedNumberCells( + Uint8Array.from([1, 2, 3, 4]), + new Uint8ClampedArray([ + 0, 0, 0, 0, + 20, 30, 40, 255, + 0, 0, 0, 0, + 0, 0, 0, 0, + ]), + 2, + { + zoom: 16, + panX: 0, + panY: 0, + viewportWidth: 32, + viewportHeight: 16, + }, + ); + + expect(cells.map((cell) => cell.guideNumber)).toEqual([1, 3, 4]); + }); + + it('does not plan illegible or off-screen numbers', () => { + const target = Uint8Array.from([1, 2]); + const pixels = new Uint8ClampedArray(8); + + expect(collectVisibleGuidedNumberCells(target, pixels, 2, { + zoom: 8, + panX: 0, + panY: 0, + viewportWidth: 100, + viewportHeight: 100, + })).toEqual([]); + + expect(collectVisibleGuidedNumberCells(target, pixels, 2, { + zoom: 16, + panX: -40, + panY: 0, + viewportWidth: 16, + viewportHeight: 16, + })).toEqual([]); + }); + + it('shows a DOM hint below the number threshold', async () => { + const context = createProjectContext(); + context.guidedDrawing.start({ + version: GUIDED_DRAWING_VERSION, + width: 1, + height: 1, + target: Uint8Array.from([1]), + settings: { + longSide: 1, + paletteSource: 'generated', + maxColors: 1, + mapping: 'color', + simplifyIsolatedPixels: false, + }, + createdAt: 1, + }); + context.viewport.setZoom(8); + setActiveProjectContext(context); + + const element = document.createElement('pf-guided-number-overlay') as PFGuidedNumberOverlay; + document.body.append(element); + await element.updateComplete; + + expect(element.shadowRoot?.textContent).toContain('Zoom in to see guide numbers'); + + context.viewport.setZoom(16); + await element.updateComplete; + expect(element.shadowRoot?.textContent).not.toContain('Zoom in to see guide numbers'); + + context.dispose(); + }); + + it('mounts the guidance layer inside the shared canvas viewport', async () => { + const viewport = document.createElement('pf-canvas-viewport'); + document.body.append(viewport); + await viewport.updateComplete; + + expect(viewport.shadowRoot?.querySelector('pf-guided-number-overlay')).not.toBeNull(); + }); +}); From f1eef21cf27a4385e1d8a0fbae204c3e63127c0e Mon Sep 17 00:00:00 2001 From: Florian Date: Fri, 10 Jul 2026 12:12:50 +0200 Subject: [PATCH 3/4] Add guided palette and creative progress (#313) --- .../color/palette-panel/pf-guided-palette.ts | 294 ++++++++++++++++++ src/components/color/pf-palette-panel.ts | 5 + .../paint-by-number/guided-project.ts | 1 + src/stores/guided-drawing-store.ts | 8 + src/types/guided-drawing.ts | 1 + .../color/pf-guided-palette.test.ts | 126 ++++++++ .../paint-by-number/guided-project.test.ts | 1 + 7 files changed, 436 insertions(+) create mode 100644 src/components/color/palette-panel/pf-guided-palette.ts create mode 100644 tests/components/color/pf-guided-palette.test.ts diff --git a/src/components/color/palette-panel/pf-guided-palette.ts b/src/components/color/palette-panel/pf-guided-palette.ts new file mode 100644 index 0000000..074a43d --- /dev/null +++ b/src/components/color/palette-panel/pf-guided-palette.ts @@ -0,0 +1,294 @@ +import { css, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { BaseComponent } from '../../../core/base-component'; +import { + analyzeGuidedDrawingProgress, + getGuidedDrawingSnapshot, + type GuidedDrawingProgress, +} from '../../../services/paint-by-number/guided-progress'; +import { defaultProjectContext, type ProjectContext } from '../../../stores/project-context'; + +const EMPTY_PROGRESS: GuidedDrawingProgress = { + total: 0, + covered: 0, + remaining: 0, + percentage: 0, + remainingByNumber: new Uint32Array(1), +}; + +@customElement('pf-guided-palette') +export class PFGuidedPalette extends BaseComponent { + static styles = css` + :host { + display: grid; + gap: 12px; + } + + h2, + h3, + p { + margin: 0; + } + + h2, + h3 { + color: var(--pf-color-text-secondary); + font-size: var(--pf-font-size-xs); + text-transform: uppercase; + } + + .progress-copy, + .remaining, + .artist-copy { + color: var(--pf-color-text-muted); + font-size: var(--pf-font-size-xs); + line-height: 1.4; + } + + progress { + width: 100%; + height: 6px; + overflow: hidden; + border: 0; + border-radius: 999px; + background: var(--pf-color-bg-input); + } + + progress::-webkit-progress-bar { + background: var(--pf-color-bg-input); + } + + progress::-webkit-progress-value { + background: var(--pf-color-accent); + } + + progress::-moz-progress-bar { + background: var(--pf-color-accent); + } + + .guide-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 5px; + } + + .guide-color { + display: grid; + grid-template-columns: 30px minmax(0, 1fr); + align-items: center; + gap: 7px; + min-width: 0; + padding: 5px; + border: 1px solid var(--pf-color-border); + border-radius: var(--pf-radius-sm); + background: var(--pf-color-bg-dark); + color: var(--pf-color-text-main); + cursor: pointer; + text-align: start; + } + + .guide-color:hover { + border-color: var(--pf-color-border-strong); + background: var(--pf-color-bg-hover); + } + + .guide-color[aria-pressed='true'] { + border-color: var(--pf-color-accent); + box-shadow: 0 0 0 1px var(--pf-color-primary-transparent); + } + + button:focus-visible { + outline: 2px solid var(--pf-color-accent); + outline-offset: 2px; + } + + .chip-wrap { + position: relative; + width: 30px; + height: 30px; + } + + .chip { + display: block; + width: 100%; + height: 100%; + border: 1px solid rgba(255, 255, 255, 0.24); + border-radius: 2px; + background: var(--guide-color); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38) inset; + } + + .number { + position: absolute; + inset-block-start: -3px; + inset-inline-start: -3px; + min-width: 16px; + padding: 1px 3px; + border: 1px solid rgba(255, 255, 255, 0.28); + border-radius: 2px; + background: rgba(7, 9, 13, 0.9); + color: #f5f3ee; + font-size: 9px; + font-weight: 700; + line-height: 12px; + text-align: center; + } + + .color-copy { + display: grid; + min-width: 0; + } + + .hex { + overflow: hidden; + color: var(--pf-color-text-secondary); + font-size: 10px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .remaining { + font-size: 9px; + white-space: nowrap; + } + + .artist-section { + display: grid; + gap: 7px; + padding-block-start: 2px; + border-block-start: 1px solid var(--pf-color-border); + } + + .artist-grid { + display: grid; + grid-template-columns: repeat(8, minmax(0, 1fr)); + gap: 2px; + } + + .artist-color { + aspect-ratio: 1; + min-width: 0; + padding: 0; + border: 1px solid var(--pf-color-border); + border-radius: 2px; + background: var(--artist-color); + cursor: pointer; + } + + .artist-color[aria-pressed='true'] { + outline: 2px solid var(--pf-color-accent); + outline-offset: 1px; + } + `; + + private context: ProjectContext = defaultProjectContext; + + connectedCallback() { + super.connectedCallback(); + this.subscribeToActiveProjectContext((context) => { + this.context = context; + this.requestUpdate(); + }); + } + + render() { + const session = this.context.guidedDrawing.session.value; + const palette = this.context.palette.mainColors.value; + const primaryColor = this.context.colors.primaryColor.value.toLowerCase(); + void this.context.history.version.value; + void this.context.layers.layers.value; + + if (!session) return html``; + + const progress = this.getProgress(); + const guideColorCount = session.guideColorCount ?? findHighestGuideNumber(session.target); + const guideColors = palette.slice(0, guideColorCount); + const artistColors = palette.slice(guideColorCount); + + return html` +
+

Guided palette

+

+ ${progress.covered} of ${progress.total} cells covered · + ${progress.remaining} remaining · ${progress.percentage}% +

+ +
+ +
+ ${guideColors.map((color, index) => { + const guideNumber = index + 1; + const remaining = progress.remainingByNumber[guideNumber] ?? 0; + const selected = color.toLowerCase() === primaryColor; + return html` + + `; + })} +
+ + ${artistColors.length > 0 + ? html` +
+

Artist colors

+

Colors you introduced while drawing off-guide.

+
+ ${artistColors.map((color) => html` + + `)} +
+
+ ` + : ''} + `; + } + + private getProgress(): GuidedDrawingProgress { + const snapshot = getGuidedDrawingSnapshot(this.context); + return snapshot + ? analyzeGuidedDrawingProgress(snapshot.session.target, snapshot.pixels) + : EMPTY_PROGRESS; + } + + private selectColor(color: string) { + this.context.colors.setPrimaryColor(color); + this.context.colors.updateLightnessVariations(color); + } +} + +function findHighestGuideNumber(target: Uint8Array): number { + let highest = 0; + for (const guideNumber of target) highest = Math.max(highest, guideNumber); + return highest; +} + +declare global { + interface HTMLElementTagNameMap { + 'pf-guided-palette': PFGuidedPalette; + } +} diff --git a/src/components/color/pf-palette-panel.ts b/src/components/color/pf-palette-panel.ts index 4edc67c..f93bfd0 100644 --- a/src/components/color/pf-palette-panel.ts +++ b/src/components/color/pf-palette-panel.ts @@ -10,6 +10,7 @@ import './pf-save-palette-dialog'; import './pf-unsaved-changes-dialog'; import './palette-panel/pf-palette-toolbar'; import './palette-panel/pf-palette-grid'; +import './palette-panel/pf-guided-palette'; import './palette-panel/pf-extraction-section'; @customElement('pf-palette-panel') @@ -247,6 +248,10 @@ export class PFPalettePanel extends BaseComponent { } render() { + if (this.context.guidedDrawing.active) { + return html``; + } + const hasNewMarks = this.palette.newColorFlags.value.size > 0; return html` diff --git a/src/services/paint-by-number/guided-project.ts b/src/services/paint-by-number/guided-project.ts index 2a9cc05..f675e3d 100644 --- a/src/services/paint-by-number/guided-project.ts +++ b/src/services/paint-by-number/guided-project.ts @@ -71,6 +71,7 @@ export function createGuidedProjectFile(input: GuidedProjectInput): ProjectFile width: guide.width, height: guide.height, target: Array.from(guide.target), + guideColorCount: guide.palette.length, settings: cloneSettings(input.settings), sourceName: input.sourceName, createdAt: input.createdAt ?? Date.now(), diff --git a/src/stores/guided-drawing-store.ts b/src/stores/guided-drawing-store.ts index 03f368a..d8b15ec 100644 --- a/src/stores/guided-drawing-store.ts +++ b/src/stores/guided-drawing-store.ts @@ -62,6 +62,14 @@ function validateSession(session: GuidedDrawingSession): void { if (session.target.length !== session.width * session.height) { throw new RangeError('Guided drawing target does not match its dimensions'); } + validateGuideColorCount(session.guideColorCount); +} + +function validateGuideColorCount(guideColorCount: number | undefined): void { + if (guideColorCount === undefined) return; + if (Number.isInteger(guideColorCount) && guideColorCount > 0) return; + + throw new RangeError('Guided drawing color count must be a positive integer'); } function cloneSession(session: GuidedDrawingSession): GuidedDrawingSession { diff --git a/src/types/guided-drawing.ts b/src/types/guided-drawing.ts index c35c3b2..4a75196 100644 --- a/src/types/guided-drawing.ts +++ b/src/types/guided-drawing.ts @@ -17,6 +17,7 @@ export interface GuidedDrawingSessionFile { width: number; height: number; target: number[]; + guideColorCount?: number; settings: GuidedDrawingSettings; sourceName?: string; createdAt: number; diff --git a/tests/components/color/pf-guided-palette.test.ts b/tests/components/color/pf-guided-palette.test.ts new file mode 100644 index 0000000..55db843 --- /dev/null +++ b/tests/components/color/pf-guided-palette.test.ts @@ -0,0 +1,126 @@ +import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest'; +import type { PFGuidedPalette } from '../../../src/components/color/palette-panel/pf-guided-palette'; +import '../../../src/components/color/palette-panel/pf-guided-palette'; +import '../../../src/components/color/pf-palette-panel'; +import { createProjectContext, restoreDefaultProjectContext, setActiveProjectContext } from '../../../src/stores/project-context'; +import { GUIDED_DRAWING_VERSION } from '../../../src/types/guided-drawing'; + +describe('guided palette', () => { + const originalHidePopover = HTMLElement.prototype.hidePopover; + + beforeAll(() => { + HTMLElement.prototype.hidePopover = () => {}; + }); + + afterAll(() => { + if (originalHidePopover) { + HTMLElement.prototype.hidePopover = originalHidePopover; + } else { + delete (HTMLElement.prototype as Partial).hidePopover; + } + }); + + afterEach(() => { + document.body.innerHTML = ''; + restoreDefaultProjectContext(); + }); + + it('shows numbered semantic colors and creative coverage', async () => { + const context = createGuidedContext(); + setActiveProjectContext(context); + const element = document.createElement('pf-guided-palette') as PFGuidedPalette; + document.body.append(element); + await element.updateComplete; + + const buttons = [...element.shadowRoot!.querySelectorAll('.guide-color')]; + expect(buttons).toHaveLength(2); + expect(buttons[0].getAttribute('aria-label')).toContain( + 'Guide color 1, #111111, 0 cells remaining', + ); + expect(buttons[1].getAttribute('aria-label')).toContain( + 'Guide color 2, #eeeeee, 1 cells remaining', + ); + expect(element.shadowRoot?.textContent).toContain('1 of 2 cells covered'); + expect(element.shadowRoot?.textContent).toContain('1 remaining · 50%'); + + buttons[1].click(); + await element.updateComplete; + expect(context.colors.primaryColor.value).toBe('#eeeeee'); + expect(buttons[1].getAttribute('aria-pressed')).toBe('true'); + + context.dispose(); + }); + + it('keeps off-guide artist colors selectable without numbering them', async () => { + const context = createGuidedContext(); + context.palette.mainColors.value = ['#111111', '#eeeeee', '#ff00ff']; + context.palette.rebuildColorMap(); + setActiveProjectContext(context); + + const element = document.createElement('pf-guided-palette') as PFGuidedPalette; + document.body.append(element); + await element.updateComplete; + + const artistColor = element.shadowRoot?.querySelector('.artist-color'); + expect(artistColor?.getAttribute('aria-label')).toBe('Artist color #ff00ff'); + artistColor?.click(); + await element.updateComplete; + expect(context.colors.primaryColor.value).toBe('#ff00ff'); + + context.dispose(); + }); + + it('replaces normal palette editing only for guided projects', async () => { + const guidedContext = createGuidedContext(); + setActiveProjectContext(guidedContext); + const panel = document.createElement('pf-palette-panel'); + document.body.append(panel); + await panel.updateComplete; + + expect(panel.shadowRoot?.querySelector('pf-guided-palette')).not.toBeNull(); + expect(panel.shadowRoot?.querySelector('pf-palette-toolbar')).toBeNull(); + + const normalContext = createProjectContext(); + setActiveProjectContext(normalContext); + await panel.updateComplete; + expect(panel.shadowRoot?.querySelector('pf-guided-palette')).toBeNull(); + expect(panel.shadowRoot?.querySelector('pf-palette-toolbar')).not.toBeNull(); + + guidedContext.dispose(); + normalContext.dispose(); + }); +}); + +function createGuidedContext() { + const context = createProjectContext(); + const layer = context.layers.layers.value.find((item) => item.type === 'image'); + const pixels = new Uint8ClampedArray([ + 12, 12, 12, 255, + 0, 0, 0, 0, + ]); + const canvas = { + width: 2, + height: 1, + getContext: () => ({ getImageData: () => ({ data: pixels }) }), + } as unknown as HTMLCanvasElement; + if (layer) context.layers.updateLayer(layer.id, { canvas }); + + context.palette.mainColors.value = ['#111111', '#eeeeee']; + context.palette.rebuildColorMap(); + context.guidedDrawing.start({ + version: GUIDED_DRAWING_VERSION, + width: 2, + height: 1, + target: Uint8Array.from([1, 2]), + guideColorCount: 2, + settings: { + longSide: 2, + paletteSource: 'generated', + maxColors: 2, + mapping: 'color', + simplifyIsolatedPixels: false, + }, + createdAt: 1, + }); + return context; +} diff --git a/tests/services/paint-by-number/guided-project.test.ts b/tests/services/paint-by-number/guided-project.test.ts index eb77edd..a5587a4 100644 --- a/tests/services/paint-by-number/guided-project.test.ts +++ b/tests/services/paint-by-number/guided-project.test.ts @@ -47,6 +47,7 @@ describe('createGuidedProjectFile', () => { expect(file.guidedDrawing).toMatchObject({ version: 1, target: [1, 2, 0, 1], + guideColorCount: 2, settings, sourceName: 'portrait.png', createdAt: 123, From adc43c470d03a6f7d68da7d1cae6ba3c81a5b1e0 Mon Sep 17 00:00:00 2001 From: Florian Date: Fri, 10 Jul 2026 12:18:12 +0200 Subject: [PATCH 4/4] Keep guided project structure aligned (#314) --- .../color/palette-panel/pf-guided-palette.ts | 14 +- src/components/dialogs/pf-resize-dialog.ts | 45 ++- src/components/menu/pf-menu-bar.ts | 169 ++++++-- .../timeline/pf-playback-controls.ts | 24 +- src/components/timeline/pf-timeline-layers.ts | 381 ++++++++---------- src/components/timeline/pf-timeline.ts | 30 +- .../color/pf-guided-palette.test.ts | 3 + .../dialogs/pf-resize-dialog.test.ts | 70 ++++ tests/components/menu/pf-menu-bar.test.ts | 35 ++ ...f-timeline-layers-reference-import.test.ts | 116 ------ .../timeline/timeline-active-context.test.ts | 61 ++- 11 files changed, 567 insertions(+), 381 deletions(-) create mode 100644 tests/components/dialogs/pf-resize-dialog.test.ts delete mode 100644 tests/components/timeline/pf-timeline-layers-reference-import.test.ts diff --git a/src/components/color/palette-panel/pf-guided-palette.ts b/src/components/color/palette-panel/pf-guided-palette.ts index 074a43d..290cedc 100644 --- a/src/components/color/palette-panel/pf-guided-palette.ts +++ b/src/components/color/palette-panel/pf-guided-palette.ts @@ -39,12 +39,19 @@ export class PFGuidedPalette extends BaseComponent { .progress-copy, .remaining, - .artist-copy { + .artist-copy, + .structure-note { color: var(--pf-color-text-muted); font-size: var(--pf-font-size-xs); line-height: 1.4; } + .structure-note { + padding: 7px 8px; + border-inline-start: 2px solid var(--pf-color-accent); + background: var(--pf-color-primary-transparent); + } + progress { width: 100%; height: 6px; @@ -245,6 +252,11 @@ export class PFGuidedPalette extends BaseComponent { })} +

+ Canvas, palette, layers, and frames stay fixed so the numbered guide remains aligned. + Drawing colors and tools are still yours. +

+ ${artistColors.length > 0 ? html`
diff --git a/src/components/dialogs/pf-resize-dialog.ts b/src/components/dialogs/pf-resize-dialog.ts index a20a502..49225f1 100644 --- a/src/components/dialogs/pf-resize-dialog.ts +++ b/src/components/dialogs/pf-resize-dialog.ts @@ -1,7 +1,7 @@ import { html, css } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { BaseComponent } from '../../core/base-component'; -import { projectStore } from '../../stores/project'; +import { defaultProjectContext, type ProjectContext } from '../../stores/project-context'; import '../ui/pf-dialog'; @customElement('pf-resize-dialog') @@ -13,6 +13,13 @@ export class PFResizeDialog extends BaseComponent { gap: 4px; } + .restriction { + margin: 0; + color: var(--pf-color-text-muted); + font-size: var(--pf-font-size-xs); + line-height: 1.45; + } + label { font-size: 12px; color: var(--pf-color-text-muted); @@ -49,16 +56,27 @@ export class PFResizeDialog extends BaseComponent { @property({ type: Boolean }) open = false; @state() width = 64; @state() height = 64; + private context: ProjectContext = defaultProjectContext; + + connectedCallback() { + super.connectedCallback(); + this.subscribeToActiveProjectContext((context) => { + this.context = context; + if (this.open) this.readProjectSize(); + this.requestUpdate(); + }); + } willUpdate(changedProperties: Map) { // Update dimensions when dialog opens if (changedProperties.has('open') && this.open) { - this.width = projectStore.width.value; - this.height = projectStore.height.value; + this.readProjectSize(); } } render() { + const guidedProject = this.context.guidedDrawing.active; + return html` Resize Canvas + ${guidedProject + ? html` +

+ Guided projects keep their canvas size fixed so every number stays aligned. +

+ ` + : ''} +
this.width = parseInt((e.target as HTMLInputElement).value)} > @@ -83,6 +110,7 @@ export class PFResizeDialog extends BaseComponent { type="number" min="1" max="2048" + ?disabled=${guidedProject} .value=${this.height} @input=${(e: Event) => this.height = parseInt((e.target as HTMLInputElement).value)} > @@ -90,7 +118,7 @@ export class PFResizeDialog extends BaseComponent {
- +
`; @@ -102,9 +130,16 @@ export class PFResizeDialog extends BaseComponent { } apply() { + if (this.context.guidedDrawing.active) return; + const width = Math.max(1, Math.min(2048, this.width)); const height = Math.max(1, Math.min(2048, this.height)); - projectStore.resizeCanvas(width, height); + this.context.project.resizeCanvas(width, height); this.close(); } + + private readProjectSize() { + this.width = this.context.project.width.value; + this.height = this.context.project.height.value; + } } diff --git a/src/components/menu/pf-menu-bar.ts b/src/components/menu/pf-menu-bar.ts index 6deeede..c1a0bf7 100644 --- a/src/components/menu/pf-menu-bar.ts +++ b/src/components/menu/pf-menu-bar.ts @@ -1,12 +1,7 @@ import { html, css } from "lit"; import { customElement, state } from "lit/decorators.js"; import { BaseComponent } from "../../core/base-component"; -import { historyStore } from "../../stores/history"; -import { layerStore } from "../../stores/layers"; -import { projectStore } from "../../stores/project"; import { getActiveProjectContext } from "../../stores/project-context"; -import { gridStore } from "../../stores/grid"; -import { viewportStore } from "../../stores/viewport"; import { FlipLayerCommand, RotateLayerCommand, @@ -244,11 +239,16 @@ export class PFMenuBar extends BaseComponent { width: 100%; } - .menu-item:hover { + .menu-item:hover:not(:disabled) { background-color: var(--pf-color-primary-transparent); color: var(--pf-color-text-main); } + button.menu-item:disabled { + cursor: not-allowed; + opacity: 0.45; + } + .menu-item.danger { color: #f0aaa2; } @@ -478,6 +478,14 @@ export class PFMenuBar extends BaseComponent { return Math.max(MENU_MARGIN, Math.min(value, maxValue)); } + private guidedActionTitle( + guidedProject: boolean, + regularTitle: string, + guidedTitle: string, + ): string { + return guidedProject ? guidedTitle : regularTitle; + } + private getMenuButton(menuId: MenuId) { return this.shadowRoot?.querySelector(`#btn-${menuId}`) ?? null; } @@ -487,16 +495,22 @@ export class PFMenuBar extends BaseComponent { } flipLayer(direction: "horizontal" | "vertical") { - const activeLayerId = layerStore.activeLayerId.value; + const context = getActiveProjectContext(); + if (context.guidedDrawing.active) return; + + const activeLayerId = context.layers.activeLayerId.value; if (activeLayerId) { - historyStore.execute(new FlipLayerCommand(activeLayerId, direction)); + void context.history.execute(new FlipLayerCommand(activeLayerId, direction, context)); } } rotateLayer(angle: number) { - const activeLayerId = layerStore.activeLayerId.value; + const context = getActiveProjectContext(); + if (context.guidedDrawing.active) return; + + const activeLayerId = context.layers.activeLayerId.value; if (activeLayerId) { - historyStore.execute(new RotateLayerCommand(activeLayerId, angle)); + void context.history.execute(new RotateLayerCommand(activeLayerId, angle, context)); } } @@ -544,12 +558,12 @@ export class PFMenuBar extends BaseComponent { const pako = await import("pako"); const decompressed = pako.default.inflate(new Uint8Array(buffer), { to: "string" }); const project = JSON.parse(decompressed) as ProjectFileInput; - await projectStore.loadProject(project); + await getActiveProjectContext().project.loadProject(project); } else { // JSON format (uncompressed) const text = await file.text(); const project = JSON.parse(text) as ProjectFileInput; - await projectStore.loadProject(project); + await getActiveProjectContext().project.loadProject(project); } } catch (error) { log.error("Failed to open file:", error); @@ -560,11 +574,25 @@ export class PFMenuBar extends BaseComponent { } importReferenceImage() { - openReferenceImagePicker(getActiveProjectContext(), (error) => { + const context = getActiveProjectContext(); + if (context.guidedDrawing.active) return; + + openReferenceImagePicker(context, (error) => { log.error("Failed to import reference image:", error); }); } + showResizeDialog() { + if (getActiveProjectContext().guidedDrawing.active) return; + + this.dispatchEvent( + new CustomEvent("resize-canvas", { + bubbles: true, + composed: true, + }) + ); + } + showExportDialog() { this.dispatchEvent( new CustomEvent("show-export-dialog", { bubbles: true, composed: true }) @@ -659,13 +687,15 @@ export class PFMenuBar extends BaseComponent { private async commitNameEdit(e: Event) { const input = e.target as HTMLInputElement; const newName = input.value.trim() || "Untitled"; - projectStore.name.value = newName; + getActiveProjectContext().project.name.value = newName; this.isEditingName = false; await autoSaveService.saveNow(); } render() { - const projectName = projectStore.name.value; + const context = getActiveProjectContext(); + const projectName = context.project.name.value; + const guidedProject = context.guidedDrawing.active; const activeCrtPreset = this.getActiveCrtPreset(); return html` @@ -742,9 +772,19 @@ export class PFMenuBar extends BaseComponent {
Import File...
-
+
+
Export... ${formatShortcut(menuShortcuts.export)}
@@ -767,10 +807,10 @@ export class PFMenuBar extends BaseComponent { @click=${this.handleMenuPanelClick} @toggle=${(event: Event) => this.handlePopoverToggle(event, "edit")} > -
historyStore.undo()}> +
context.history.undo()}> Undo ${formatShortcut(menuShortcuts.undo)}
-
historyStore.redo()}> +
context.history.redo()}> Redo ${formatShortcut(menuShortcuts.redo)}
Cut ${formatShortcut(menuShortcuts.cut)}
@@ -797,24 +837,24 @@ export class PFMenuBar extends BaseComponent { @click=${this.handleMenuPanelClick} @toggle=${(event: Event) => this.handlePopoverToggle(event, "view")} > -
viewportStore.zoomIn()}> +
context.viewport.zoomIn()}> Zoom In ${formatShortcut(menuShortcuts.zoomIn)}
-
viewportStore.zoomOut()}> +
context.viewport.zoomOut()}> Zoom Out ${formatShortcut(menuShortcuts.zoomOut)}
-
viewportStore.zoomToLevel(1)}> +
context.viewport.zoomToLevel(1)}> Zoom 100% ${formatShortcut(menuShortcuts.zoom100)}
-
viewportStore.resetView()}> +
context.viewport.resetView()}> Fit to Viewport 0
-
gridStore.togglePixelGrid()}> - ${gridStore.pixelGridEnabled.value ? "✓ " : " "}Pixel Grid +
context.grid.togglePixelGrid()}> + ${context.grid.pixelGridEnabled.value ? "✓ " : " "}Pixel Grid ${formatShortcut("mod+g")}
-
gridStore.toggleTileGrid()}> - ${gridStore.tileGridEnabled.value ? "✓ " : " "}Tile Grid +
context.grid.toggleTileGrid()}> + ${context.grid.tileGridEnabled.value ? "✓ " : " "}Tile Grid ${formatShortcut("mod+shift+g")}
@@ -852,30 +892,71 @@ export class PFMenuBar extends BaseComponent { @click=${this.handleMenuPanelClick} @toggle=${(event: Event) => this.handlePopoverToggle(event, "image")} > -
- this.dispatchEvent( - new CustomEvent("resize-canvas", { - bubbles: true, - composed: true, - }) - )} + type="button" + ?disabled=${guidedProject} + title=${this.guidedActionTitle( + guidedProject, + "Resize Canvas", + "Guided projects keep the canvas size fixed", + )} + @click=${this.showResizeDialog} > Resize Canvas... -
-
this.flipLayer("horizontal")}> + +
-
this.flipLayer("vertical")}> + +
-
this.rotateLayer(90)}> + +
-
this.rotateLayer(-90)}> + +
+
Effect
${CRT_PRESET_OPTIONS.map( diff --git a/src/components/timeline/pf-playback-controls.ts b/src/components/timeline/pf-playback-controls.ts index 453b82e..d7d7841 100644 --- a/src/components/timeline/pf-playback-controls.ts +++ b/src/components/timeline/pf-playback-controls.ts @@ -27,12 +27,17 @@ export class PFPlaybackControls extends BaseComponent { letter-spacing: 0; } - button:hover { + button:hover:not(:disabled) { background-color: var(--pf-color-bg-hover); border-color: var(--pf-color-border-strong); color: var(--pf-color-text-main); } + button:disabled { + cursor: not-allowed; + opacity: 0.45; + } + button.active { background-color: var(--pf-color-primary-transparent); color: var(--pf-color-accent-hover); @@ -82,10 +87,12 @@ export class PFPlaybackControls extends BaseComponent { } addFrame() { + if (this.context.guidedDrawing.active) return; void this.context.history.execute(new AddFrameCommand(true, undefined, this.context)); } deleteFrame() { + if (this.context.guidedDrawing.active) return; const currentFrameId = this.context.animation.currentFrameId.value; if (currentFrameId) { void this.context.history.execute(new DeleteFrameCommand(currentFrameId, this.context)); @@ -136,6 +143,7 @@ export class PFPlaybackControls extends BaseComponent { const frameCount = animation.frames.value.length; const effectiveFPS = this.getEffectiveFPS(); const totalDuration = this.getTotalDuration(); + const guidedProject = this.context.guidedDrawing.active; return html` @@ -150,8 +158,18 @@ export class PFPlaybackControls extends BaseComponent { style="width: 1px; height: 16px; background: var(--pf-color-border); margin: 0 4px;" >
- - + diff --git a/src/components/timeline/pf-timeline-layers.ts b/src/components/timeline/pf-timeline-layers.ts index 7f0245e..8eb1cb3 100644 --- a/src/components/timeline/pf-timeline-layers.ts +++ b/src/components/timeline/pf-timeline-layers.ts @@ -1,17 +1,14 @@ import { html, css } from 'lit'; -import { customElement, property, state, query } from 'lit/decorators.js'; +import { customElement, state, query } from 'lit/decorators.js'; import { BaseComponent } from '../../core/base-component'; import { defaultProjectContext, type ProjectContext } from '../../stores/project-context'; import { - AddLayerCommand, DuplicateLayerCommand, RemoveLayerCommand, UpdateLayerCommand, } from '../../commands/layer-commands'; -import { openReferenceImagePicker } from '../../services/reference-image-picker'; import type { Layer } from '../../types/layer'; import type { ReferenceLayerData } from '../../types/reference'; -import { log } from '../../utils/log'; import './pf-timeline-tooltip'; import type { PFTimelineTooltip } from './pf-timeline-tooltip'; import '../ui/pf-context-menu'; @@ -24,40 +21,6 @@ export class PFTimelineLayers extends BaseComponent { display: block; } - .toolbar { - display: flex; - gap: 2px; - padding: 4px; - border-bottom: 1px solid var(--pf-color-border); - background: rgba(255, 255, 255, 0.018); - } - - .toolbar button { - background: var(--pf-color-bg-input); - border: 1px solid var(--pf-color-border); - border-radius: var(--pf-radius-sm); - color: var(--pf-color-text-muted); - font-size: 12px; - width: 24px; - height: 24px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - } - - .toolbar button:hover { - background: var(--pf-color-bg-hover); - color: var(--pf-color-text-main); - border-color: var(--pf-color-border-strong); - } - - .toolbar button:disabled { - opacity: 0.4; - cursor: not-allowed; - } - .layer-list { /* Renders at natural height - parent scroll container handles overflow */ } @@ -114,6 +77,11 @@ export class PFTimelineLayers extends BaseComponent { color: var(--pf-color-text-main); } + .icon-btn:disabled { + cursor: not-allowed; + opacity: 0.3; + } + .icon-btn.active { opacity: 1; color: var(--pf-color-accent); @@ -251,8 +219,6 @@ export class PFTimelineLayers extends BaseComponent { } `; - @property({ type: Boolean, attribute: 'no-toolbar' }) noToolbar = false; - @state() private editingLayerId: string | null = null; @state() private editingName: string = ''; @state() private draggedLayerId: string | null = null; @@ -330,32 +296,27 @@ export class PFTimelineLayers extends BaseComponent { } } - private addLayer() { - void this.context.history.execute(new AddLayerCommand(this.context)); + private layerDragTitle(guidedProject: boolean): string { + return guidedProject + ? 'Guided projects keep the painting layer fixed' + : 'Drag to reorder'; } - private importReferenceImage() { - openReferenceImagePicker( - this.context, - (error) => { - log.error('Failed to import reference image:', error); - }, - () => this.requestUpdate() - ); + private layerVisibilityTitle(layer: Layer, guidedProject: boolean): string { + if (guidedProject) return 'Guided projects keep the painting layer visible'; + return `${layer.visible ? 'Hide' : 'Show'} layer`; } - private deleteLayer() { - const activeId = this.context.layers.activeLayerId.value; - if (activeId && this.context.layers.layers.value.length > 1) { - void this.context.history.execute(new RemoveLayerCommand(activeId, this.context)); - } + private layerLockTitle(layer: Layer, guidedProject: boolean): string { + if (guidedProject) return 'Guided projects keep the painting layer drawable'; + return `${layer.locked ? 'Unlock' : 'Lock'} layer`; } - private moveLayer(direction: 'up' | 'down') { - const activeId = this.context.layers.activeLayerId.value; - if (activeId) { - this.context.layers.reorderLayer(activeId, direction); - } + private layerContinuityTitle(layer: Layer, guidedProject: boolean): string { + if (guidedProject) return 'Guided projects keep one fixed frame'; + return layer.continuous + ? 'Continuous (linked new cels)' + : 'Non-continuous (empty new cels)'; } private selectLayer(id: string) { @@ -364,16 +325,19 @@ export class PFTimelineLayers extends BaseComponent { private toggleVisibility(id: string, e: Event) { e.stopPropagation(); + if (this.context.guidedDrawing.active) return; this.context.layers.toggleVisibility(id); } private toggleLock(id: string, e: Event) { e.stopPropagation(); + if (this.context.guidedDrawing.active) return; this.context.layers.toggleLock(id); } private toggleContinuous(id: string, e: Event) { e.stopPropagation(); + if (this.context.guidedDrawing.active) return; this.context.layers.toggleContinuous(id); } @@ -490,6 +454,8 @@ export class PFTimelineLayers extends BaseComponent { e.stopPropagation(); const context = this.context; + if (context.guidedDrawing.active) return; + const layerStore = context.layers; const layer = layerStore.layers.value.find((l) => l.id === layerId); if (!layer) return; @@ -559,6 +525,11 @@ export class PFTimelineLayers extends BaseComponent { // Drag and drop handlers private handleDragStart(id: string, e: DragEvent) { + if (this.context.guidedDrawing.active) { + e.preventDefault(); + return; + } + this.draggedLayerId = id; this.draggedLayerContext = this.context; if (e.dataTransfer) { @@ -574,6 +545,7 @@ export class PFTimelineLayers extends BaseComponent { } private handleDragOver(id: string, e: DragEvent) { + if (this.context.guidedDrawing.active) return; e.preventDefault(); if (this.draggedLayerId && this.draggedLayerId !== id) { this.dragOverLayerId = id; @@ -585,6 +557,7 @@ export class PFTimelineLayers extends BaseComponent { } private handleDrop(targetId: string, e: DragEvent) { + if (this.context.guidedDrawing.active) return; e.preventDefault(); if (!this.draggedLayerId || this.draggedLayerId === targetId) return; @@ -697,156 +670,160 @@ export class PFTimelineLayers extends BaseComponent { window.removeEventListener('mouseup', this.handleOpacityScrubEnd); } + private renderLayerRow( + layer: Layer, + activeLayerId: string | null, + guidedProject: boolean, + ) { + const classes = [ + 'layer-row', + layer.id === activeLayerId ? 'active' : '', + this.draggedLayerId === layer.id ? 'dragging' : '', + this.dragOverLayerId === layer.id ? 'drag-over' : '', + ].filter(Boolean).join(' '); + + return html` +
this.selectLayer(layer.id)} + @contextmenu=${(event: MouseEvent) => this.handleLayerContextMenu(event, layer.id)} + @mouseenter=${(event: MouseEvent) => + this.handleLayerMouseEnter(event, layer.id, layer.name)} + @mouseleave=${this.handleLayerMouseLeave} + .draggable=${!guidedProject} + @dragstart=${(event: DragEvent) => this.handleDragStart(layer.id, event)} + @dragend=${this.handleDragEnd} + @dragover=${(event: DragEvent) => this.handleDragOver(layer.id, event)} + @dragleave=${this.handleDragLeave} + @drop=${(event: DragEvent) => this.handleDrop(layer.id, event)} + > + ${this.renderLayerControls(layer, guidedProject)} + ${this.renderLayerName(layer)} + ${this.renderLayerOpacity(layer)} +
+ `; + } + + private renderLayerControls(layer: Layer, guidedProject: boolean) { + return html` + ⋮⋮ + + + + `; + } + + private renderLayerName(layer: Layer) { + if (this.editingLayerId === layer.id) { + return html` + event.stopPropagation()} + /> + `; + } + + return html` + this.startRename(layer.id, layer.name, event)} + > + ${this.renderLayerTypeBadge(layer)}${layer.name} + + `; + } + + private renderLayerTypeBadge(layer: Layer) { + if (layer.type === 'text') { + return html`T`; + } + if (layer.type !== 'reference') return ''; + + return html` + + + + + + `; + } + + private renderLayerOpacity(layer: Layer) { + return html` +
event.stopPropagation()}> + ${this.editingOpacityLayerId === layer.id + ? this.renderOpacityInput(layer) + : this.renderOpacityValue(layer)} +
+ `; + } + + private renderOpacityInput(layer: Layer) { + return html` + this.handleOpacityInputKeyDown(layer.id, event)} + @blur=${(event: FocusEvent) => this.handleOpacityInputBlur(layer.id, event)} + @click=${(event: Event) => event.stopPropagation()} + /> + `; + } + + private renderOpacityValue(layer: Layer) { + return html` + + this.handleOpacityScrubStart(layer.id, layer.opacity, event)} + @dblclick=${(event: MouseEvent) => this.handleOpacityDoubleClick(layer.id, event)} + title="Drag to adjust, double-click to edit" + > + ${Math.round((layer.opacity / 255) * 100)}% + + `; + } + render() { // Render layers in reverse order (top layer at top of list) const layerStore = this.context.layers; const layers = [...layerStore.layers.value].reverse(); const activeLayerId = layerStore.activeLayerId.value; - const canDelete = layerStore.layers.value.length > 1; - - // Check if we can move up/down - const activeIndex = layerStore.layers.value.findIndex((l) => l.id === activeLayerId); - const canMoveUp = activeIndex < layerStore.layers.value.length - 1; - const canMoveDown = activeIndex > 0; + const guidedProject = this.context.guidedDrawing.active; return html` - ${ - !this.noToolbar - ? html` -
- - - - - -
- ` - : '' - }
- ${layers.map( - (layer) => html` -
this.selectLayer(layer.id)} - @contextmenu=${(e: MouseEvent) => this.handleLayerContextMenu(e, layer.id)} - @mouseenter=${(e: MouseEvent) => this.handleLayerMouseEnter(e, layer.id, layer.name)} - @mouseleave=${this.handleLayerMouseLeave} - draggable="true" - @dragstart=${(e: DragEvent) => this.handleDragStart(layer.id, e)} - @dragend=${this.handleDragEnd} - @dragover=${(e: DragEvent) => this.handleDragOver(layer.id, e)} - @dragleave=${this.handleDragLeave} - @drop=${(e: DragEvent) => this.handleDrop(layer.id, e)} - > - ⋮⋮ - - - - ${ - this.editingLayerId === layer.id - ? html` - e.stopPropagation()} - /> - ` - : html` - this.startRename(layer.id, layer.name, e)} - > - ${layer.type === 'text' ? html`T` : ''} - ${ - layer.type === 'reference' - ? html` - - - - - - ` - : '' - }${layer.name} - - ` - } -
e.stopPropagation()}> - ${ - this.editingOpacityLayerId === layer.id - ? html` - this.handleOpacityInputKeyDown(layer.id, e)} - @blur=${(e: FocusEvent) => this.handleOpacityInputBlur(layer.id, e)} - @click=${(e: Event) => e.stopPropagation()} - /> - ` - : html` - this.handleOpacityScrubStart(layer.id, layer.opacity, e)} - @dblclick=${(e: MouseEvent) => this.handleOpacityDoubleClick(layer.id, e)} - title="Drag to adjust, double-click to edit" - > - ${Math.round((layer.opacity / 255) * 100)}% - - ` - } -
-
- ` - )} + ${layers.map((layer) => this.renderLayerRow(layer, activeLayerId, guidedProject))}
diff --git a/src/components/timeline/pf-timeline.ts b/src/components/timeline/pf-timeline.ts index 3697f28..78bc457 100644 --- a/src/components/timeline/pf-timeline.ts +++ b/src/components/timeline/pf-timeline.ts @@ -64,7 +64,7 @@ export class PFTimeline extends BaseComponent { padding: 0; } - .layers-toolbar button:hover { + .layers-toolbar button:hover:not(:disabled) { background: var(--pf-color-bg-hover); color: var(--pf-color-text-main); border-color: var(--pf-color-border-strong); @@ -249,10 +249,12 @@ export class PFTimeline extends BaseComponent { }; private addLayer() { + if (this.context.guidedDrawing.active) return; void this.context.history.execute(new AddLayerCommand(this.context)); } private deleteLayer() { + if (this.context.guidedDrawing.active) return; const activeId = this.context.layers.activeLayerId.value; if (activeId && this.context.layers.layers.value.length > 1) { void this.context.history.execute(new RemoveLayerCommand(activeId, this.context)); @@ -260,6 +262,7 @@ export class PFTimeline extends BaseComponent { } private moveLayer(direction: 'up' | 'down') { + if (this.context.guidedDrawing.active) return; const activeId = this.context.layers.activeLayerId.value; if (activeId) { this.context.layers.reorderLayer(activeId, direction); @@ -286,6 +289,7 @@ export class PFTimeline extends BaseComponent { const activeIndex = layers.findIndex((l) => l.id === activeLayerId); const canMoveUp = activeIndex < layers.length - 1; const canMoveDown = activeIndex > 0; + const guidedProject = this.context.guidedDrawing.active; return html`
@@ -294,15 +298,27 @@ export class PFTimeline extends BaseComponent {
- - - + + @@ -318,7 +334,7 @@ export class PFTimeline extends BaseComponent { @wheel=${this.handleWheel} >
- +
diff --git a/tests/components/color/pf-guided-palette.test.ts b/tests/components/color/pf-guided-palette.test.ts index 55db843..aa35cee 100644 --- a/tests/components/color/pf-guided-palette.test.ts +++ b/tests/components/color/pf-guided-palette.test.ts @@ -42,6 +42,9 @@ describe('guided palette', () => { ); expect(element.shadowRoot?.textContent).toContain('1 of 2 cells covered'); expect(element.shadowRoot?.textContent).toContain('1 remaining · 50%'); + expect(element.shadowRoot?.textContent).toContain( + 'Canvas, palette, layers, and frames stay fixed', + ); buttons[1].click(); await element.updateComplete; diff --git a/tests/components/dialogs/pf-resize-dialog.test.ts b/tests/components/dialogs/pf-resize-dialog.test.ts new file mode 100644 index 0000000..d6aba00 --- /dev/null +++ b/tests/components/dialogs/pf-resize-dialog.test.ts @@ -0,0 +1,70 @@ +import { afterEach, describe, expect, it } from 'vitest'; +import '../../../src/components/dialogs/pf-resize-dialog'; +import type { PFResizeDialog } from '../../../src/components/dialogs/pf-resize-dialog'; +import { + createProjectContext, + restoreDefaultProjectContext, + setActiveProjectContext, +} from '../../../src/stores/project-context'; + +describe('pf-resize-dialog guided restrictions', () => { + afterEach(() => { + document.body.innerHTML = ''; + restoreDefaultProjectContext(); + }); + + it('explains and defends the fixed guided canvas size', async () => { + const context = createProjectContext(); + context.guidedDrawing.start({ + version: 1, + width: 1, + height: 1, + target: Uint8Array.from([1]), + guideColorCount: 1, + settings: { + longSide: 1, + paletteSource: 'generated', + maxColors: 1, + mapping: 'color', + simplifyIsolatedPixels: false, + }, + createdAt: 1, + }); + setActiveProjectContext(context); + + const element = document.createElement('pf-resize-dialog') as PFResizeDialog; + element.open = true; + document.body.append(element); + await element.updateComplete; + + expect(element.shadowRoot?.textContent).toContain( + 'Guided projects keep their canvas size fixed', + ); + expect(element.shadowRoot?.querySelectorAll('input:disabled')).toHaveLength(2); + expect(element.shadowRoot?.querySelector('button.primary')?.disabled) + .toBe(true); + + const originalSize = [context.project.width.value, context.project.height.value]; + (element as unknown as { width: number; height: number; apply(): void }).width = 20; + (element as unknown as { width: number; height: number; apply(): void }).height = 20; + (element as unknown as { apply(): void }).apply(); + expect([context.project.width.value, context.project.height.value]).toEqual(originalSize); + + context.dispose(); + }); + + it('keeps resize controls available in a normal project', async () => { + const context = createProjectContext(); + setActiveProjectContext(context); + const element = document.createElement('pf-resize-dialog') as PFResizeDialog; + element.open = true; + document.body.append(element); + await element.updateComplete; + + expect(element.shadowRoot?.querySelectorAll('input:disabled')).toHaveLength(0); + expect(element.shadowRoot?.querySelector('button.primary')?.disabled) + .toBe(false); + + context.dispose(); + }); +}); diff --git a/tests/components/menu/pf-menu-bar.test.ts b/tests/components/menu/pf-menu-bar.test.ts index 7aa5ebe..7ed9548 100644 --- a/tests/components/menu/pf-menu-bar.test.ts +++ b/tests/components/menu/pf-menu-bar.test.ts @@ -134,6 +134,24 @@ function createContext(name: string) { return context; } +function startGuidedSession(context: ProjectContext) { + context.guidedDrawing.start({ + version: 1, + width: 1, + height: 1, + target: Uint8Array.from([1]), + guideColorCount: 1, + settings: { + longSide: 1, + paletteSource: "generated", + maxColors: 1, + mapping: "color", + simplifyIsolatedPixels: false, + }, + createdAt: 1, + }); +} + function useReferenceImageInput(files: File[], dispatchChangeOnClick = true) { const input = document.createElement("input"); Object.defineProperty(input, "files", { @@ -335,6 +353,23 @@ describe("pf-menu-bar popovers", () => { expect(fileButton?.getAttribute("aria-expanded")).toBe("false"); }); + it("keeps guided structure actions disabled while creative actions stay available", async () => { + const context = createContext("Portrait guide"); + startGuidedSession(context); + setActiveProjectContext(context); + const element = await createMenuBar(); + const fileMenu = menu(element, "file")!; + const imageMenu = menu(element, "image")!; + + expect(element.shadowRoot?.querySelector(".project-name-display")?.textContent) + .toContain("Portrait guide"); + expect((menuItem(fileMenu, "Import Reference Image") as HTMLButtonElement).disabled).toBe(true); + expect((menuItem(imageMenu, "Resize Canvas") as HTMLButtonElement).disabled).toBe(true); + expect((menuItem(imageMenu, "Flip Horizontal") as HTMLButtonElement).disabled).toBe(true); + expect((menuItem(imageMenu, "Rotate 90° CW") as HTMLButtonElement).disabled).toBe(true); + expect((menuItem(imageMenu, "Arcade Monitor") as HTMLButtonElement).disabled).toBe(false); + }); + it("imports a reference image from the File menu into the project active when the picker opened", async () => { const contextA = createContext("Context A"); const contextB = createContext("Context B"); diff --git a/tests/components/timeline/pf-timeline-layers-reference-import.test.ts b/tests/components/timeline/pf-timeline-layers-reference-import.test.ts deleted file mode 100644 index 711ee6a..0000000 --- a/tests/components/timeline/pf-timeline-layers-reference-import.test.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; - -const importReferenceImageFileMock = vi.hoisted(() => vi.fn(async () => null)); - -vi.mock('../../../src/services/reference-import-action', () => ({ - importReferenceImageFile: importReferenceImageFileMock, -})); - -import '../../../src/components/timeline/pf-timeline-layers'; -import type { PFTimelineLayers } from '../../../src/components/timeline/pf-timeline-layers'; -import { - createProjectContext, - restoreDefaultProjectContext, - setActiveProjectContext, - type ProjectContext, -} from '../../../src/stores/project-context'; - -const createdContexts: ProjectContext[] = []; - -function createContext(name: string) { - const context = createProjectContext(); - context.project.name.value = name; - createdContexts.push(context); - return context; -} - -async function createTimelineLayers() { - const element = document.createElement('pf-timeline-layers') as PFTimelineLayers; - document.body.append(element); - await element.updateComplete; - return element; -} - -function importReferenceButton(element: PFTimelineLayers) { - const button = element.shadowRoot?.querySelector( - 'button[title="Import Reference Image"]' - ); - expect(button).toBeTruthy(); - return button!; -} - -function useReferenceImageInput(files: File[], dispatchChangeOnClick = true) { - const input = document.createElement('input'); - Object.defineProperty(input, 'files', { - configurable: true, - value: files, - }); - - const click = vi.spyOn(input, 'click').mockImplementation(() => { - if (dispatchChangeOnClick) { - input.dispatchEvent(new Event('change')); - } - }); - - const originalCreateElement = document.createElement.bind(document); - const createElement = vi.spyOn(document, 'createElement'); - createElement.mockImplementation(((tagName: string, options?: ElementCreationOptions) => { - if (tagName === 'input') return input; - return originalCreateElement(tagName, options); - }) as typeof document.createElement); - - return { click, input }; -} - -async function flushImport() { - await Promise.resolve(); - await Promise.resolve(); -} - -describe('pf-timeline-layers reference import', () => { - beforeEach(() => { - document.body.replaceChildren(); - vi.clearAllMocks(); - }); - - afterEach(() => { - document.body.replaceChildren(); - vi.restoreAllMocks(); - restoreDefaultProjectContext(); - for (const context of createdContexts.splice(0)) { - context.dispose(); - } - }); - - it('imports the selected reference image into the project active when the picker opened', async () => { - const contextA = createContext('Context A'); - const contextB = createContext('Context B'); - const file = new File([Uint8Array.from([1, 2, 3])], 'guide.png', { type: 'image/png' }); - const { input } = useReferenceImageInput([file], false); - setActiveProjectContext(contextA); - const layers = await createTimelineLayers(); - - importReferenceButton(layers).click(); - setActiveProjectContext(contextB); - input.dispatchEvent(new Event('change')); - await flushImport(); - - expect(input.type).toBe('file'); - expect(input.accept).toBe('image/png,image/jpeg,image/webp'); - expect(importReferenceImageFileMock).toHaveBeenCalledTimes(1); - expect(importReferenceImageFileMock).toHaveBeenCalledWith(contextA, file); - }); - - it('does nothing when the reference image picker is canceled', async () => { - const context = createContext('Context A'); - const { click } = useReferenceImageInput([]); - setActiveProjectContext(context); - const layers = await createTimelineLayers(); - - importReferenceButton(layers).click(); - await flushImport(); - - expect(click).toHaveBeenCalledTimes(1); - expect(importReferenceImageFileMock).not.toHaveBeenCalled(); - }); -}); diff --git a/tests/components/timeline/timeline-active-context.test.ts b/tests/components/timeline/timeline-active-context.test.ts index 145bbea..588d300 100644 --- a/tests/components/timeline/timeline-active-context.test.ts +++ b/tests/components/timeline/timeline-active-context.test.ts @@ -1,9 +1,11 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'; import '../../../src/components/timeline/pf-playback-controls'; +import '../../../src/components/timeline/pf-timeline'; import '../../../src/components/timeline/pf-timeline-layers'; import '../../../src/components/timeline/timeline-header/pf-timeline-frame-cells'; import type { PFPlaybackControls } from '../../../src/components/timeline/pf-playback-controls'; +import type { PFTimeline } from '../../../src/components/timeline/pf-timeline'; import type { PFTimelineLayers } from '../../../src/components/timeline/pf-timeline-layers'; import type { PFTimelineFrameCells } from '../../../src/components/timeline/timeline-header/pf-timeline-frame-cells'; import { @@ -22,6 +24,24 @@ function createContext(name: string) { return context; } +function startGuidedSession(context: ProjectContext) { + context.guidedDrawing.start({ + version: 1, + width: 1, + height: 1, + target: Uint8Array.from([1]), + guideColorCount: 1, + settings: { + longSide: 1, + paletteSource: 'generated', + maxColors: 1, + mapping: 'color', + simplifyIsolatedPixels: false, + }, + createdAt: 1, + }); +} + function renameFirstLayer(context: ProjectContext, name: string) { const layer = context.layers.layers.value[0]; context.layers.updateLayer(layer.id, { name }); @@ -48,6 +68,13 @@ async function createPlaybackControls() { return element; } +async function createTimeline() { + const element = document.createElement('pf-timeline') as PFTimeline; + document.body.append(element); + await element.updateComplete; + return element; +} + async function createFrameCells() { const element = document.createElement('pf-timeline-frame-cells') as PFTimelineFrameCells; document.body.append(element); @@ -124,9 +151,9 @@ describe('timeline active project context binding', () => { const contextB = createContext('Context B'); setActiveProjectContext(contextA); - const layers = await createTimelineLayers(); - clickByTitle(layers.shadowRoot, 'Add Layer'); - await waitForContextRender(layers); + const timeline = await createTimeline(); + clickByTitle(timeline.shadowRoot, 'Add Layer'); + await waitForContextRender(timeline); expect(contextA.layers.layers.value).toHaveLength(2); expect(contextA.history.undoStack.value).toHaveLength(1); @@ -149,6 +176,34 @@ describe('timeline active project context binding', () => { expect(contextB.history.undoStack.value).toHaveLength(0); }); + it('keeps guided projects on one fixed layer and frame', async () => { + const context = createContext('Guide'); + startGuidedSession(context); + setActiveProjectContext(context); + + const layers = await createTimelineLayers(); + const controls = await createPlaybackControls(); + const timeline = await createTimeline(); + const layerRow = layers.shadowRoot?.querySelector('.layer-row'); + const frameButton = [...(controls.shadowRoot?.querySelectorAll('button') ?? [])] + .find((item) => item.textContent?.includes('+ Frame')); + const appLayerButtons = [ + ...(timeline.shadowRoot?.querySelectorAll('.layers-toolbar button') ?? []), + ]; + + expect(appLayerButtons.every((item) => item.disabled)).toBe(true); + expect(layerRow?.draggable).toBe(false); + expect(frameButton?.disabled).toBe(true); + + (timeline as unknown as { addLayer(): void }).addLayer(); + (controls as unknown as { addFrame(): void }).addFrame(); + await waitForContextRender(layers); + + expect(context.layers.layers.value).toHaveLength(1); + expect(context.animation.frames.value).toHaveLength(1); + expect(context.history.undoStack.value).toHaveLength(0); + }); + it('commits a layer rename to the context where editing started', async () => { const contextA = createContext('Context A'); const contextB = createContext('Context B');