From ad7ed98c867a215421d1b8e8cf8bfd96793f94ed Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 11 Jul 2026 18:18:35 +0200 Subject: [PATCH 1/8] fix: serialize autosaves per project context (#339) --- src/services/auto-save.ts | 61 +++++++++++--- tests/services/auto-save.test.ts | 131 +++++++++++++++++++++++++++++++ 2 files changed, 180 insertions(+), 12 deletions(-) diff --git a/src/services/auto-save.ts b/src/services/auto-save.ts index bd14676..f9e0ebb 100644 --- a/src/services/auto-save.ts +++ b/src/services/auto-save.ts @@ -9,7 +9,10 @@ const AUTO_SAVE_DEBOUNCE_MS = 2000; interface AutoSaveContextState { isDirty: boolean; + changeRevision: number; + persistedRevision: number; saveTimeout: ReturnType | null; + saveQueue: Promise; dispose: (() => void) | null; suppressSaveCount: number; } @@ -69,8 +72,8 @@ class AutoSaveService { const state = this.getState(context); if (state.suppressSaveCount > 0) return; - state.isDirty = true; - this.setDirtyContext(context, true); + state.changeRevision++; + this.updateDirtyState(context, state); this.clearSaveTimeout(state); state.saveTimeout = setTimeout(() => { @@ -103,8 +106,8 @@ class AutoSaveService { clearPendingSave(context: ProjectContext = defaultProjectContext) { const state = this.getState(context); this.clearSaveTimeout(state); - state.isDirty = false; - this.setDirtyContext(context, false); + state.persistedRevision = state.changeRevision; + this.updateDirtyState(context, state); } /** Run project load/reset work without treating reset signals as user edits. */ @@ -132,24 +135,50 @@ class AutoSaveService { private async performSave( context: ProjectContext, options: { force?: boolean; rethrow?: boolean } = {} - ) { + ): Promise { const state = this.getState(context); if (!state.isDirty && !options.force) return; - const wasDirty = state.isDirty; - state.isDirty = false; - this.setDirtyContext(context, false); + if (options.force) { + // Some direct project mutations do not create history entries. A forced + // save is itself a request to persist the current state. + state.changeRevision++; + this.updateDirtyState(context, state); + } + + const projectId = context.project.id.value; + const requestedRevision = state.changeRevision; + const save = state.saveQueue.then(() => + this.writeProject(context, state, projectId, requestedRevision, options) + ); + + // A failed save must not prevent the next queued request from running. + state.saveQueue = save.catch(() => {}); + await save; + } + + private async writeProject( + context: ProjectContext, + state: AutoSaveContextState, + projectId: string, + requestedRevision: number, + options: { force?: boolean; rethrow?: boolean } + ): Promise { + if (requestedRevision <= state.persistedRevision) return; try { const projectData = await context.project.saveProject(); const thumbnail = await createThumbnailSafely(context); - await projectRepository.save(context.project.id.value, projectData, { + await projectRepository.save(projectId, projectData, { thumbnail, }); - context.project.lastSaved.value = Date.now(); + if (context.project.id.value === projectId) { + context.project.lastSaved.value = Date.now(); + } + state.persistedRevision = Math.max(state.persistedRevision, requestedRevision); + this.updateDirtyState(context, state); } catch (error) { - state.isDirty = wasDirty || state.isDirty; - this.setDirtyContext(context, state.isDirty); + this.updateDirtyState(context, state); log.error('Auto-save failed:', error); if (options.rethrow) throw error; } @@ -161,7 +190,10 @@ class AutoSaveService { const state: AutoSaveContextState = { isDirty: false, + changeRevision: 0, + persistedRevision: 0, saveTimeout: null, + saveQueue: Promise.resolve(), dispose: null, suppressSaveCount: 0, }; @@ -219,6 +251,11 @@ class AutoSaveService { this.dirtyContexts.value = new Set(this.dirtyContextSet); } + + private updateDirtyState(context: ProjectContext, state: AutoSaveContextState) { + state.isDirty = state.persistedRevision < state.changeRevision; + this.setDirtyContext(context, state.isDirty); + } } export const autoSaveService = new AutoSaveService(); diff --git a/tests/services/auto-save.test.ts b/tests/services/auto-save.test.ts index a44aba4..a443270 100644 --- a/tests/services/auto-save.test.ts +++ b/tests/services/auto-save.test.ts @@ -43,6 +43,22 @@ import { const createdContexts: ProjectContext[] = []; +function deferred() { + let resolve!: (value: T | PromiseLike) => void; + let reject!: (reason?: unknown) => void; + const promise = new Promise((resolvePromise, rejectPromise) => { + resolve = resolvePromise; + reject = rejectPromise; + }); + return { promise, resolve, reject }; +} + +async function settleSaveQueue() { + for (let index = 0; index < 20; index++) { + await Promise.resolve(); + } +} + function makeCommand(run?: () => void): Command { return { id: 'test-cmd', @@ -170,4 +186,119 @@ describe('AutoSaveService', () => { expect(savedProjects.size).toBe(2); expect(createProjectThumbnail).toHaveBeenCalledTimes(2); }); + + it('serializes saves for one context and writes an edit made during a save afterwards', async () => { + const context = createContext('ordered-project', 'First state'); + const firstWrite = deferred(); + const secondWrite = deferred(); + + vi.mocked(projectRepository.save) + .mockImplementationOnce(() => firstWrite.promise) + .mockImplementationOnce(() => secondWrite.promise); + + autoSaveService.start(context); + await context.history.execute(makeCommand()); + await Promise.resolve(); + await vi.advanceTimersByTimeAsync(2000); + await settleSaveQueue(); + + expect(projectRepository.save).toHaveBeenCalledTimes(1); + + await context.history.execute( + makeCommand(() => { + context.project.name.value = 'Second state'; + }) + ); + await Promise.resolve(); + const forcedSave = autoSaveService.saveNow(context); + await settleSaveQueue(); + + expect(projectRepository.save).toHaveBeenCalledTimes(1); + + firstWrite.resolve(); + await settleSaveQueue(); + + expect(projectRepository.save).toHaveBeenCalledTimes(2); + expect(vi.mocked(projectRepository.save).mock.calls[1][1].name).toBe('Second state'); + expect(autoSaveService.isDirty(context)).toBe(true); + + secondWrite.resolve(); + await forcedSave; + expect(autoSaveService.isDirty(context)).toBe(false); + }); + + it('captures the project identity before asynchronous serialization', async () => { + const context = createContext('original-project', 'Original project'); + const serializedProject = await context.project.saveProject(); + const serialization = deferred(); + vi.spyOn(context.project, 'saveProject').mockReturnValueOnce(serialization.promise); + + const save = autoSaveService.saveNow(context); + await settleSaveQueue(); + context.project.id.value = 'replacement-project'; + serialization.resolve(serializedProject); + await save; + + expect(projectRepository.save).toHaveBeenCalledWith( + 'original-project', + serializedProject, + expect.any(Object) + ); + }); + + it('keeps a failed forced save dirty and allows a later retry', async () => { + const context = createContext('retry-project', 'Retry project'); + vi.mocked(projectRepository.save) + .mockRejectedValueOnce(new Error('write failed')) + .mockResolvedValueOnce(); + + await expect(autoSaveService.saveNow(context)).rejects.toThrow('write failed'); + expect(autoSaveService.isDirty(context)).toBe(true); + + await autoSaveService.saveNow(context); + + expect(projectRepository.save).toHaveBeenCalledTimes(2); + expect(autoSaveService.isDirty(context)).toBe(false); + }); + + it('lets a newer queued save clear dirty state after an older save fails', async () => { + const context = createContext('failure-order-project', 'Older state'); + const firstWrite = deferred(); + vi.mocked(projectRepository.save) + .mockImplementationOnce(() => firstWrite.promise) + .mockResolvedValueOnce(); + + const olderSave = autoSaveService.saveNow(context); + await settleSaveQueue(); + + context.project.name.value = 'Newer state'; + const newerSave = autoSaveService.saveNow(context); + firstWrite.reject(new Error('older write failed')); + + await expect(olderSave).rejects.toThrow('older write failed'); + await newerSave; + + expect(projectRepository.save).toHaveBeenCalledTimes(2); + expect(vi.mocked(projectRepository.save).mock.calls[1][1].name).toBe('Newer state'); + expect(autoSaveService.isDirty(context)).toBe(false); + }); + + it('allows separate contexts to save independently', async () => { + const contextA = createContext('parallel-a', 'Parallel A'); + const contextB = createContext('parallel-b', 'Parallel B'); + const writeA = deferred(); + + vi.mocked(projectRepository.save).mockImplementation((id) => { + return id === 'parallel-a' ? writeA.promise : Promise.resolve(); + }); + + const saveA = autoSaveService.saveNow(contextA); + const saveB = autoSaveService.saveNow(contextB); + await saveB; + + expect(projectRepository.save).toHaveBeenCalledTimes(2); + + writeA.resolve(); + await saveA; + }); }); From 1096be896ab39f58b4ceb37d2cf5effa6838f3aa Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 11 Jul 2026 18:24:51 +0200 Subject: [PATCH 2/8] fix: wait for active saves before deleting projects (#339) --- src/services/auto-save.ts | 8 ++++-- src/services/project-library.ts | 2 +- tests/services/project-library.test.ts | 34 ++++++++++++++++++++++++++ 3 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src/services/auto-save.ts b/src/services/auto-save.ts index f9e0ebb..3217b08 100644 --- a/src/services/auto-save.ts +++ b/src/services/auto-save.ts @@ -102,12 +102,16 @@ class AutoSaveService { return this.dirtyContexts.value.has(context); } - /** Drop a pending debounce without writing. Used when the open project is deleted. */ - clearPendingSave(context: ProjectContext = defaultProjectContext) { + /** + * Drop queued work and wait for a write that has already started. + * Deletion can then run after every older write that could recreate the record. + */ + async clearPendingSave(context: ProjectContext = defaultProjectContext): Promise { const state = this.getState(context); this.clearSaveTimeout(state); state.persistedRevision = state.changeRevision; this.updateDirtyState(context, state); + await state.saveQueue; } /** Run project load/reset work without treating reset signals as user edits. */ diff --git a/src/services/project-library.ts b/src/services/project-library.ts index c36219e..c20af81 100644 --- a/src/services/project-library.ts +++ b/src/services/project-library.ts @@ -127,7 +127,7 @@ export class ProjectLibraryService { async deleteProject(id: string, settings: DeleteProjectSettings = {}): Promise { const context = settings.context ?? defaultProjectContext; if (id === context.project.id.value) { - autoSaveService.clearPendingSave(context); + await autoSaveService.clearPendingSave(context); } await this.repository.delete(id); diff --git a/tests/services/project-library.test.ts b/tests/services/project-library.test.ts index 5c00c6e..a5b82d3 100644 --- a/tests/services/project-library.test.ts +++ b/tests/services/project-library.test.ts @@ -337,6 +337,40 @@ describe('ProjectLibraryService', () => { expect(projects.has('open')).toBe(false); }); + it('waits for an in-flight auto-save before deleting the project', async () => { + projects.set('open', makeProject('Open')); + await openProjectInStore('open', makeProject('Open')); + autoSaveService.start(); + + let finishWrite!: () => void; + const writeGate = new Promise((resolve) => { + finishWrite = resolve; + }); + repository.save.mockImplementationOnce(async (id: string, project: ProjectFile) => { + await writeGate; + projects.set(id, cloneProject(project)); + }); + + await historyStore.execute( + makeCommand(() => { + projectStore.name.value = 'Saving project'; + }) + ); + await Promise.resolve(); + await vi.advanceTimersByTimeAsync(2000); + + const deletion = service.deleteProject('open'); + await Promise.resolve(); + + expect(repository.delete).not.toHaveBeenCalled(); + + finishWrite(); + await deletion; + + expect(projects.has('open')).toBe(false); + expect(repository.delete).toHaveBeenCalledWith('open'); + }); + it('does not let an old auto-save timer write the previous project under the new id', async () => { projects.set('a', makeProject('Project A')); projects.set('b', makeProject('Project B')); From 1123307c20471124c24826758dd8ef81ca0ad48a Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 11 Jul 2026 18:30:53 +0200 Subject: [PATCH 3/8] fix: bind file actions and exports to active projects (#342) --- src/components/app/pf-project-browser.ts | 10 ++- src/components/app/pf-pwa-update-toast.ts | 4 +- src/components/app/pixel-forge-app.ts | 43 +++++++--- src/components/dialogs/pf-export-dialog.ts | 50 +++++++----- src/components/menu/pf-menu-bar.ts | 14 +++- src/services/aseprite-writer.ts | 45 ++++++++--- .../components/app/pf-project-browser.test.ts | 45 +++++++++++ .../app/pf-pwa-update-toast.test.ts | 30 +++++++ tests/components/app/pixel-forge-app.test.ts | 81 +++++++++++++++++++ .../dialogs/pf-export-dialog.test.ts | 47 ++++++++++- tests/components/menu/pf-menu-bar.test.ts | 27 +++++++ tests/services/aseprite-writer.test.ts | 29 ++++++- 12 files changed, 367 insertions(+), 58 deletions(-) diff --git a/src/components/app/pf-project-browser.ts b/src/components/app/pf-project-browser.ts index 26f3de9..8a1af88 100644 --- a/src/components/app/pf-project-browser.ts +++ b/src/components/app/pf-project-browser.ts @@ -599,9 +599,9 @@ export class PFProjectBrowser extends BaseComponent { this.errorMessage = ''; try { - const activeContext = getActiveProjectContext(); - if (id === activeContext.project.id.value) { - await autoSaveService.saveNow(activeContext); + const openItem = workspaceStore.getProjectItem(id); + if (openItem) { + await autoSaveService.saveNow(openItem.context); } await projectLibrary.duplicateProject(id); await this.loadProjects(); @@ -620,7 +620,9 @@ export class PFProjectBrowser extends BaseComponent { try { const activeContext = getActiveProjectContext(); const deletedOpenProject = project.id === activeContext.project.id.value; - await projectLibrary.deleteProject(project.id, { context: activeContext }); + const projectContext = + workspaceStore.getProjectItem(project.id)?.context ?? activeContext; + await projectLibrary.deleteProject(project.id, { context: projectContext }); await this.loadProjects(); if (deletedOpenProject) { diff --git a/src/components/app/pf-pwa-update-toast.ts b/src/components/app/pf-pwa-update-toast.ts index d1ae121..f5fad4f 100644 --- a/src/components/app/pf-pwa-update-toast.ts +++ b/src/components/app/pf-pwa-update-toast.ts @@ -2,6 +2,7 @@ import { css, html, nothing } from 'lit'; import { customElement } from 'lit/decorators.js'; import { BaseComponent } from '../../core/base-component'; import { autoSaveService } from '../../services/auto-save'; +import { getActiveProjectContext } from '../../stores/project-context'; import { pwaStore } from '../../stores/pwa'; @customElement('pf-pwa-update-toast') @@ -107,7 +108,8 @@ export class PFPwaUpdateToast extends BaseComponent { }; private restart = () => { - void pwaStore.restartWithUpdate(() => autoSaveService.saveNow()); + const context = getActiveProjectContext(); + void pwaStore.restartWithUpdate(() => autoSaveService.saveNow(context)); }; render() { diff --git a/src/components/app/pixel-forge-app.ts b/src/components/app/pixel-forge-app.ts index 93233f7..59c3587 100644 --- a/src/components/app/pixel-forge-app.ts +++ b/src/components/app/pixel-forge-app.ts @@ -30,6 +30,7 @@ import "./pf-pwa-update-toast"; import { activeProjectContext, getActiveProjectContext, + type ProjectContext, } from "../../stores/project-context"; import { workspaceStore } from "../../stores/workspace"; import { viewportStore } from "../../stores/viewport"; @@ -313,6 +314,8 @@ export class PixelForgeApp extends BaseComponent { private warningTimer: number | null = null; private fileImportTimer: number | null = null; private fileDropHandlingStarted = false; + private deleteCurrentProjectContext: ProjectContext | null = null; + private exportProjectContext: ProjectContext | null = null; connectedCallback() { super.connectedCallback(); @@ -504,11 +507,10 @@ export class PixelForgeApp extends BaseComponent { }; private handleDuplicateCurrentProject = async () => { + const context = getActiveProjectContext(); try { - await autoSaveService.saveNow(); - await projectLibrary.duplicateProject( - getActiveProjectContext().project.id.value - ); + await autoSaveService.saveNow(context); + await projectLibrary.duplicateProject(context.project.id.value); this.showWarning("Project duplicated"); } catch (error) { log.error("Failed to duplicate project:", error); @@ -517,13 +519,25 @@ export class PixelForgeApp extends BaseComponent { }; private handleDeleteCurrentProject = () => { + this.deleteCurrentProjectContext = getActiveProjectContext(); this.showDeleteCurrentDialog = true; }; + private dismissDeleteCurrentProject = () => { + this.deleteCurrentProjectContext = null; + this.showDeleteCurrentDialog = false; + }; + private handleShowExportDialog = () => { + this.exportProjectContext = getActiveProjectContext(); this.showExportDialog = true; }; + private handleExportDialogClose = () => { + this.exportProjectContext = null; + this.showExportDialog = false; + }; + private handleProjectBrowserClose = () => { if (!this.projectSelectionRequired) { this.showProjectBrowser = false; @@ -551,12 +565,12 @@ export class PixelForgeApp extends BaseComponent { }; private confirmDeleteCurrentProject = async () => { - this.showDeleteCurrentDialog = false; + const context = + this.deleteCurrentProjectContext ?? getActiveProjectContext(); + this.dismissDeleteCurrentProject(); try { - await projectLibrary.deleteProject( - getActiveProjectContext().project.id.value - ); + await projectLibrary.deleteProject(context.project.id.value, { context }); this.handleCurrentProjectDeleted(); } catch (error) { log.error("Failed to delete project:", error); @@ -742,12 +756,14 @@ export class PixelForgeApp extends BaseComponent { const isTimelineCollapsed = panelStore.panelStates.value.timeline?.collapsed ?? false; const activeProject = activeProjectContext.value.project; + const deleteProject = + this.deleteCurrentProjectContext?.project ?? activeProject; return html`
(this.showResizeDialog = true)} - @show-export-dialog=${() => (this.showExportDialog = true)} + @show-export-dialog=${this.handleShowExportDialog} @show-new-project-dialog=${this.handleShowNewProjectDialog} @show-paint-by-number-dialog=${this.handleShowPaintByNumberDialog} @show-project-browser=${() => (this.showProjectBrowser = true)} @@ -818,7 +834,8 @@ export class PixelForgeApp extends BaseComponent { (this.showExportDialog = false)} + .context=${this.exportProjectContext} + @close=${this.handleExportDialogClose} > (this.showDeleteCurrentDialog = false)} + @pf-close=${this.dismissDeleteCurrentProject} > Delete Current Project -

Delete "${activeProject.name.value}" from this browser?

+

Delete "${deleteProject.name.value}" from this browser?

diff --git a/src/components/dialogs/pf-export-dialog.ts b/src/components/dialogs/pf-export-dialog.ts index 67e23a8..9603247 100644 --- a/src/components/dialogs/pf-export-dialog.ts +++ b/src/components/dialogs/pf-export-dialog.ts @@ -1,9 +1,11 @@ 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 { layerStore } from "../../stores/layers"; -import { animationStore } from "../../stores/animation"; +import { + defaultProjectContext, + getActiveProjectContext, + type ProjectContext, +} from "../../stores/project-context"; import { settingsStore } from "../../stores/settings"; import { FileService } from "../../services/file-service"; import { composeExportFrame } from "../../services/export-composition"; @@ -190,6 +192,7 @@ export class PFExportDialog extends BaseComponent { `; @property({ type: Boolean }) open = false; + @property({ attribute: false }) context: ProjectContext | null = null; @state() private format: ExportFormat = "pixelforge"; @state() private scale: number = 1; @@ -204,17 +207,20 @@ export class PFExportDialog extends BaseComponent { @state() private spritesheetColumns: number = 4; @state() private applyViewEffect: boolean = false; @state() private exportError: string = ""; + private exportContext: ProjectContext = defaultProjectContext; connectedCallback() { super.connectedCallback(); - this.frameEnd = animationStore.frames.value.length; + this.exportContext = this.context ?? getActiveProjectContext(); + this.frameEnd = this.exportContext.animation.frames.value.length; } willUpdate(changedProperties: Map) { // Set filename to project name when dialog opens if (changedProperties.has("open") && this.open) { - this.filename = projectStore.name.value || "export"; - this.frameEnd = animationStore.frames.value.length; + this.exportContext = this.context ?? getActiveProjectContext(); + this.filename = this.exportContext.project.name.value || "export"; + this.frameEnd = this.exportContext.animation.frames.value.length; this.applyViewEffect = false; this.exportError = ""; } @@ -247,8 +253,8 @@ export class PFExportDialog extends BaseComponent { } private get outputSize() { - const baseWidth = projectStore.width.value; - const baseHeight = projectStore.height.value; + const baseWidth = this.exportContext.project.width.value; + const baseHeight = this.exportContext.project.height.value; const frameCount = this.getFrameCount(); if (this.format === "spritesheet") { @@ -266,7 +272,7 @@ export class PFExportDialog extends BaseComponent { } private getFrameCount(): number { - const totalFrames = animationStore.frames.value.length; + const totalFrames = this.exportContext.animation.frames.value.length; if (this.frameSelection === "current") return 1; if (this.frameSelection === "all") return totalFrames; return Math.max(1, this.frameEnd - this.frameStart + 1); @@ -310,20 +316,20 @@ export class PFExportDialog extends BaseComponent { return composeExportFrame({ frameId, scale, - width: projectStore.width.value, - height: projectStore.height.value, - layers: layerStore.layers.value, + width: this.exportContext.project.width.value, + height: this.exportContext.project.height.value, + layers: this.exportContext.layers.layers.value, getCelCanvas: (currentFrameId, layerId) => - animationStore.getCelCanvas(currentFrameId, layerId), + this.exportContext.animation.getCelCanvas(currentFrameId, layerId), useBackground: this.useBackground, backgroundColor: this.backgroundColor, }); } private getSelectedFrameIds(): string[] { - const frames = animationStore.frames.value; + const frames = this.exportContext.animation.frames.value; if (this.frameSelection === "current") { - return [animationStore.currentFrameId.value]; + return [this.exportContext.animation.currentFrameId.value]; } if (this.frameSelection === "all") { return frames.map((f) => f.id); @@ -389,11 +395,11 @@ export class PFExportDialog extends BaseComponent { private async exportAsAseprite() { const { exportAseFile } = await import("../../services/aseprite-service"); - exportAseFile(`${this.filename}.ase`); + exportAseFile(`${this.filename}.ase`, this.exportContext); } private async exportAsPixelForge() { - const project = await projectStore.saveProject(); + const project = await this.exportContext.project.saveProject(); FileService.saveCompressed(project, `${this.filename}.pf`); } @@ -443,7 +449,7 @@ export class PFExportDialog extends BaseComponent { frameIds: string[], pipeline: ViewEffectPipeline | null ) { - const frames = animationStore.frames.value; + const frames = this.exportContext.animation.frames.value; const frameData = frameIds.map((id) => { const frame = frames.find((f) => f.id === id); return { @@ -462,8 +468,8 @@ export class PFExportDialog extends BaseComponent { pipeline: ViewEffectPipeline | null ) { // Build custom spritesheet with selected frames and scale - const width = projectStore.width.value * this.scale; - const height = projectStore.height.value * this.scale; + const width = this.exportContext.project.width.value * this.scale; + const height = this.exportContext.project.height.value * this.scale; const frameCount = frameIds.length; const { cols, rows } = this.getSpritesheetGrid(frameCount); @@ -484,7 +490,7 @@ export class PFExportDialog extends BaseComponent { }, }; - const frames = animationStore.frames.value; + const frames = this.exportContext.animation.frames.value; frameIds.forEach((frameId, index) => { const col = index % cols; const row = Math.floor(index / cols); @@ -555,7 +561,7 @@ export class PFExportDialog extends BaseComponent { } render() { - const totalFrames = animationStore.frames.value.length; + const totalFrames = this.exportContext.animation.frames.value.length; const { width, height } = this.outputSize; const frameCount = this.getFrameCount(); diff --git a/src/components/menu/pf-menu-bar.ts b/src/components/menu/pf-menu-bar.ts index dff6fc0..4504311 100644 --- a/src/components/menu/pf-menu-bar.ts +++ b/src/components/menu/pf-menu-bar.ts @@ -1,7 +1,10 @@ import { html, css } from "lit"; import { customElement, state } from "lit/decorators.js"; import { BaseComponent } from "../../core/base-component"; -import { getActiveProjectContext } from "../../stores/project-context"; +import { + getActiveProjectContext, + type ProjectContext, +} from "../../stores/project-context"; import { FlipLayerCommand, RotateLayerCommand, @@ -36,6 +39,7 @@ export class PFMenuBar extends BaseComponent { @state() private shortcutsVisible = false; @state() private isEditingName = false; @state() private activeMenu: MenuId | null = null; + private editingProjectContext: ProjectContext | null = null; static styles = css` :host { @@ -646,6 +650,7 @@ export class PFMenuBar extends BaseComponent { } private startEditingName() { + this.editingProjectContext = getActiveProjectContext(); this.isEditingName = true; // Focus the input after render this.updateComplete.then(() => { @@ -661,16 +666,19 @@ export class PFMenuBar extends BaseComponent { if (e.key === "Enter") { this.commitNameEdit(e); } else if (e.key === "Escape") { + this.editingProjectContext = null; this.isEditingName = false; } } private async commitNameEdit(e: Event) { + const context = this.editingProjectContext ?? getActiveProjectContext(); const input = e.target as HTMLInputElement; const newName = input.value.trim() || "Untitled"; - getActiveProjectContext().project.name.value = newName; + this.editingProjectContext = null; + context.project.name.value = newName; this.isEditingName = false; - await autoSaveService.saveNow(); + await autoSaveService.saveNow(context); } render() { diff --git a/src/services/aseprite-writer.ts b/src/services/aseprite-writer.ts index bdd0a00..4825d38 100644 --- a/src/services/aseprite-writer.ts +++ b/src/services/aseprite-writer.ts @@ -1,7 +1,8 @@ import pako from 'pako'; -import { animationStore } from '../stores/animation'; -import { layerStore } from '../stores/layers'; -import { projectStore } from '../stores/project'; +import { + getActiveProjectContext, + type ProjectContext, +} from '../stores/project-context'; import { getExportableArtworkLayers } from './export-composition'; import type { Layer } from '../types/layer'; @@ -159,13 +160,14 @@ function createCelChunk( } function createCelChunkForLayer( + context: ProjectContext, layer: Layer, layerIndex: number, frameId: string, width: number, height: number ): Uint8Array | null { - const celCanvas = animationStore.getCelCanvas(frameId, layer.id); + const celCanvas = context.animation.getCelCanvas(frameId, layer.id); if (!celCanvas) return null; const ctx = celCanvas.getContext('2d'); @@ -188,11 +190,11 @@ function hasVisiblePixels(pixels: Uint8ClampedArray): boolean { /** * Export current project as Aseprite file. */ -function writeAseFile(): ArrayBuffer { - const layers = getExportableArtworkLayers(layerStore.layers.value); - const frames = animationStore.frames.value; - const width = projectStore.width.value; - const height = projectStore.height.value; +function writeAseFile(context: ProjectContext): ArrayBuffer { + const layers = getExportableArtworkLayers(context.layers.layers.value); + const frames = context.animation.frames.value; + const width = context.project.width.value; + const height = context.project.height.value; // Collect all chunks first to calculate exact size const frameData: Array<{ @@ -222,7 +224,14 @@ function writeAseFile(): ArrayBuffer { // Cel chunks layers.forEach((layer, layerIdx) => { - const chunk = createCelChunkForLayer(layer, layerIdx, frame.id, width, height); + const chunk = createCelChunkForLayer( + context, + layer, + layerIdx, + frame.id, + width, + height + ); if (chunk) chunks.push(chunk); }); @@ -293,11 +302,23 @@ function writeAseFile(): ArrayBuffer { return buffer; } +/** + * Serialize one project context as an Aseprite file. + */ +export function createAseFile( + context: ProjectContext = getActiveProjectContext() +): ArrayBuffer { + return writeAseFile(context); +} + /** * Export and download as .ase file. */ -export function exportAseFile(filename: string) { - const buffer = writeAseFile(); +export function exportAseFile( + filename: string, + context: ProjectContext = getActiveProjectContext() +) { + const buffer = createAseFile(context); const blob = new Blob([buffer], { type: 'application/octet-stream' }); const url = URL.createObjectURL(blob); diff --git a/tests/components/app/pf-project-browser.test.ts b/tests/components/app/pf-project-browser.test.ts index 9aa6e74..199ca38 100644 --- a/tests/components/app/pf-project-browser.test.ts +++ b/tests/components/app/pf-project-browser.test.ts @@ -422,6 +422,27 @@ describe('pf-project-browser', () => { expect(projectLibraryMock.listProjects).toHaveBeenCalledTimes(2); }); + it('saves a targeted inactive open project before duplicating it', async () => { + const inactiveProjectContext = { + project: { + id: { value: 'second-project' }, + name: { value: 'Second Project' }, + }, + }; + workspaceStoreMock.getProjectItem.mockImplementation((projectId: string) => { + if (projectId === 'open-project') return { context: activeProjectContextMock }; + if (projectId === 'second-project') return { context: inactiveProjectContext }; + return undefined; + }); + const element = await createBrowser(); + + projectAction(element.shadowRoot!, 'Second Project', 'Duplicate')?.click(); + await settle(element); + + expect(autoSaveServiceMock.saveNow).toHaveBeenCalledWith(inactiveProjectContext); + expect(projectLibraryMock.duplicateProject).toHaveBeenCalledWith('second-project'); + }); + it('confirms deletion before deleting a project', async () => { activeProjectContextMock.project.id.value = 'different-project'; const element = await createBrowser(); @@ -439,6 +460,30 @@ describe('pf-project-browser', () => { }); }); + it('clears pending saves through the targeted inactive open context when deleting', async () => { + const inactiveProjectContext = { + project: { + id: { value: 'second-project' }, + name: { value: 'Second Project' }, + }, + }; + workspaceStoreMock.getProjectItem.mockImplementation((projectId: string) => { + if (projectId === 'open-project') return { context: activeProjectContextMock }; + if (projectId === 'second-project') return { context: inactiveProjectContext }; + return undefined; + }); + const element = await createBrowser(); + + projectAction(element.shadowRoot!, 'Second Project', 'Delete')?.click(); + await element.updateComplete; + confirmDeleteButton(element.shadowRoot!)?.click(); + await settle(element); + + expect(projectLibraryMock.deleteProject).toHaveBeenCalledWith('second-project', { + context: inactiveProjectContext, + }); + }); + it('emits current-project-deleted when the open project is deleted', async () => { const element = await createBrowser(); let deletedCurrent = false; diff --git a/tests/components/app/pf-pwa-update-toast.test.ts b/tests/components/app/pf-pwa-update-toast.test.ts index 7e6be20..20a1125 100644 --- a/tests/components/app/pf-pwa-update-toast.test.ts +++ b/tests/components/app/pf-pwa-update-toast.test.ts @@ -11,6 +11,14 @@ vi.mock('../../../src/services/auto-save', () => ({ import '../../../src/components/app/pf-pwa-update-toast'; import type { PFPwaUpdateToast } from '../../../src/components/app/pf-pwa-update-toast'; import { pwaStore } from '../../../src/stores/pwa'; +import { + createProjectContext, + restoreDefaultProjectContext, + setActiveProjectContext, + type ProjectContext, +} from '../../../src/stores/project-context'; + +const createdContexts: ProjectContext[] = []; async function createToast() { const element = document.createElement('pf-pwa-update-toast') as PFPwaUpdateToast; @@ -36,6 +44,10 @@ describe('pf-pwa-update-toast', () => { afterEach(() => { document.body.replaceChildren(); pwaStore.stop(); + restoreDefaultProjectContext(); + for (const context of createdContexts.splice(0)) { + context.dispose(); + } }); it('stays hidden until an update is waiting', async () => { @@ -81,6 +93,24 @@ describe('pf-pwa-update-toast', () => { ); }); + it('saves the project active when restart is requested', async () => { + const contextA = createProjectContext(); + const contextB = createProjectContext(); + createdContexts.push(contextA, contextB); + setActiveProjectContext(contextB); + const update = vi.fn().mockResolvedValue(undefined); + pwaStore.setUpdateHandler(update); + pwaStore.showUpdate(); + const element = await createToast(); + + element.shadowRoot?.querySelector('.restart')?.click(); + setActiveProjectContext(contextA); + await flushUpdate(element); + + expect(autoSaveServiceMock.saveNow).toHaveBeenCalledWith(contextB); + expect(update).toHaveBeenCalledWith(true); + }); + it('explains a save failure and does not restart', async () => { const update = vi.fn().mockResolvedValue(undefined); autoSaveServiceMock.saveNow.mockRejectedValue(new Error('storage full')); diff --git a/tests/components/app/pixel-forge-app.test.ts b/tests/components/app/pixel-forge-app.test.ts index aac1275..d29f04d 100644 --- a/tests/components/app/pixel-forge-app.test.ts +++ b/tests/components/app/pixel-forge-app.test.ts @@ -6,6 +6,8 @@ import { setActiveProjectContext, type ProjectContext, } from '../../../src/stores/project-context'; +import { autoSaveService } from '../../../src/services/auto-save'; +import { projectLibrary } from '../../../src/services/project-library'; const projectRepositoryMock = vi.hoisted(() => ({ getLastOpenedProjectId: vi.fn(), @@ -102,12 +104,91 @@ describe('pixel-forge-app project dialogs', () => { }); afterEach(() => { + vi.restoreAllMocks(); restoreDefaultProjectContext(); for (const context of createdContexts.splice(0)) { context.dispose(); } }); + it('duplicates the project active when the action starts', async () => { + await import('../../../src/components/app/pixel-forge-app'); + const contextA = createProjectContext(); + const contextB = createProjectContext(); + contextA.project.id.value = 'project-a'; + contextB.project.id.value = 'project-b'; + createdContexts.push(contextA, contextB); + setActiveProjectContext(contextB); + const saveNow = vi.spyOn(autoSaveService, 'saveNow').mockResolvedValue(); + const duplicateProject = vi + .spyOn(projectLibrary, 'duplicateProject') + .mockResolvedValue('project-b-copy'); + const element = document.createElement('pixel-forge-app') as HTMLElement; + document.body.append(element); + + window.dispatchEvent(new CustomEvent('duplicate-current-project')); + await vi.waitFor(() => { + expect(duplicateProject).toHaveBeenCalled(); + }); + + expect(saveNow).toHaveBeenCalledWith(contextB); + expect(duplicateProject).toHaveBeenCalledWith('project-b'); + }); + + it('deletes the project active when confirmation opened', async () => { + await import('../../../src/components/app/pixel-forge-app'); + const contextA = createProjectContext(); + const contextB = createProjectContext(); + contextA.project.id.value = 'project-a'; + contextB.project.id.value = 'project-b'; + createdContexts.push(contextA, contextB); + setActiveProjectContext(contextB); + const deleteProject = vi + .spyOn(projectLibrary, 'deleteProject') + .mockResolvedValue(); + const element = document.createElement('pixel-forge-app') as HTMLElement & { + updateComplete: Promise; + }; + document.body.append(element); + + window.dispatchEvent(new CustomEvent('delete-current-project')); + await element.updateComplete; + setActiveProjectContext(contextA); + element.shadowRoot + ?.querySelector('pf-dialog button.primary') + ?.click(); + await vi.waitFor(() => { + expect(deleteProject).toHaveBeenCalled(); + }); + + expect(deleteProject).toHaveBeenCalledWith('project-b', { + context: contextB, + }); + }); + + it('opens export with the project active when the action starts', async () => { + await import('../../../src/components/app/pixel-forge-app'); + const contextA = createProjectContext(); + const contextB = createProjectContext(); + createdContexts.push(contextA, contextB); + setActiveProjectContext(contextB); + const element = document.createElement('pixel-forge-app') as HTMLElement & { + updateComplete: Promise; + }; + document.body.append(element); + + window.dispatchEvent(new CustomEvent('show-export-dialog')); + setActiveProjectContext(contextA); + await element.updateComplete; + + const dialog = element.shadowRoot?.querySelector('pf-export-dialog'); + expect(dialog?.open).toBe(true); + expect(dialog?.context).toBe(contextB); + }); + it('restores saved workspace state during startup', async () => { await import('../../../src/components/app/pixel-forge-app'); const workspaceState = { diff --git a/tests/components/dialogs/pf-export-dialog.test.ts b/tests/components/dialogs/pf-export-dialog.test.ts index b12dc60..bb5a48b 100644 --- a/tests/components/dialogs/pf-export-dialog.test.ts +++ b/tests/components/dialogs/pf-export-dialog.test.ts @@ -1,12 +1,25 @@ -import { afterEach, beforeEach, describe, expect, it } from 'vitest'; +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import '../../../src/components/dialogs/pf-export-dialog'; import type { PFExportDialog } from '../../../src/components/dialogs/pf-export-dialog'; import { CRT_PRESETS } from '../../../src/services/view-effects'; +import { FileService } from '../../../src/services/file-service'; +import { + createProjectContext, + defaultProjectContext, + restoreDefaultProjectContext, + setActiveProjectContext, + type ProjectContext, +} from '../../../src/stores/project-context'; import { settingsStore } from '../../../src/stores/settings'; -function createDialog(): PFExportDialog { +const createdContexts: ProjectContext[] = []; + +function createDialog(context?: ProjectContext): PFExportDialog { const dialog = document.createElement('pf-export-dialog') as PFExportDialog; + if (context) { + (dialog as PFExportDialog & { context: ProjectContext }).context = context; + } document.body.append(dialog); dialog.open = true; return dialog; @@ -20,6 +33,36 @@ describe('pf-export-dialog view-effect export', () => { afterEach(() => { document.body.innerHTML = ''; + vi.restoreAllMocks(); + restoreDefaultProjectContext(); + for (const context of createdContexts.splice(0)) { + context.dispose(); + } + }); + + it('exports the project context that opened the dialog', async () => { + const contextB = createProjectContext(); + contextB.project.name.value = 'Tab B'; + createdContexts.push(contextB); + setActiveProjectContext(contextB); + const projectA = { name: 'Tab A' }; + const projectB = { name: 'Tab B' }; + vi.spyOn(defaultProjectContext.project, 'saveProject').mockResolvedValue( + projectA as never + ); + vi.spyOn(contextB.project, 'saveProject').mockResolvedValue(projectB as never); + const saveCompressed = vi + .spyOn(FileService, 'saveCompressed') + .mockImplementation(() => {}); + const dialog = createDialog(contextB); + await dialog.updateComplete; + + dialog.shadowRoot?.querySelector('.btn-export')?.click(); + await vi.waitFor(() => { + expect(saveCompressed).toHaveBeenCalled(); + }); + + expect(saveCompressed).toHaveBeenCalledWith(projectB, 'Tab B.pf'); }); it('keeps the opt-in control hidden without an active view effect', async () => { diff --git a/tests/components/menu/pf-menu-bar.test.ts b/tests/components/menu/pf-menu-bar.test.ts index 70154af..b1e24b4 100644 --- a/tests/components/menu/pf-menu-bar.test.ts +++ b/tests/components/menu/pf-menu-bar.test.ts @@ -346,6 +346,33 @@ describe("pf-menu-bar popovers", () => { expect(fileButton?.getAttribute("aria-expanded")).toBe("false"); }); + it("renames the project where name editing started", async () => { + const contextA = createContext("Context A"); + const contextB = createContext("Context B"); + setActiveProjectContext(contextA); + const element = await createMenuBar(); + + element.shadowRoot + ?.querySelector(".project-name-display") + ?.click(); + await element.updateComplete; + + setActiveProjectContext(contextB); + const input = element.shadowRoot?.querySelector( + ".project-name-input" + ); + expect(input).toBeTruthy(); + input!.value = "Renamed A"; + input!.dispatchEvent(new FocusEvent("blur")); + await vi.waitFor(() => { + expect(autoSaveServiceMock.saveNow).toHaveBeenCalled(); + }); + + expect(contextA.project.name.value).toBe("Renamed A"); + expect(contextB.project.name.value).toBe("Context B"); + expect(autoSaveServiceMock.saveNow).toHaveBeenCalledWith(contextA); + }); + it("only shows the install action while the browser offers installation", async () => { const element = await createMenuBar(); const fileMenu = menu(element, "file")!; diff --git a/tests/services/aseprite-writer.test.ts b/tests/services/aseprite-writer.test.ts index e9e116e..bf5db0c 100644 --- a/tests/services/aseprite-writer.test.ts +++ b/tests/services/aseprite-writer.test.ts @@ -1,9 +1,14 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { exportAseFile } from '../../src/services/aseprite-writer'; +import { createAseFile, exportAseFile } from '../../src/services/aseprite-writer'; import { animationStore } from '../../src/stores/animation'; import { layerStore } from '../../src/stores/layers'; import { projectStore } from '../../src/stores/project'; +import { + createProjectContext, + restoreDefaultProjectContext, + setActiveProjectContext, +} from '../../src/stores/project-context'; import type { Frame } from '../../src/types/animation'; import type { Layer } from '../../src/types/layer'; @@ -92,3 +97,25 @@ describe('Aseprite writer reference exclusion', () => { expect(URL.createObjectURL).toHaveBeenCalledOnce(); }); }); + +describe('Aseprite writer project context', () => { + afterEach(() => { + restoreDefaultProjectContext(); + }); + + it('encodes the explicitly initiated project after the active tab changes', () => { + const contextA = createProjectContext(); + const contextB = createProjectContext(); + contextA.project.setSize(1, 1); + contextB.project.setSize(2, 3); + setActiveProjectContext(contextA); + + const file = createAseFile(contextB); + const header = new DataView(file); + + expect(header.getUint16(8, true)).toBe(2); + expect(header.getUint16(10, true)).toBe(3); + contextA.dispose(); + contextB.dispose(); + }); +}); From b3e62475377a5deb6c524e05e4ebf503a23f86d3 Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 11 Jul 2026 18:34:05 +0200 Subject: [PATCH 4/8] fix: isolate frame-explicit cel mutations (#341) --- src/commands/layer-commands.ts | 42 ++++---- src/commands/optimized-drawing-command.ts | 17 ++-- .../selection/delete-fill-commands.ts | 26 +++-- src/commands/selection/float-commands.ts | 33 ++++--- src/commands/selection/transform-commands.ts | 29 ++++-- src/components/canvas/pf-drawing-canvas.ts | 2 +- .../canvas/viewport/transform-handlers.ts | 8 +- src/components/toolbar/pf-context-bar.ts | 6 +- src/stores/animation/store.ts | 6 ++ src/tools/selection/base-selection-tool.ts | 6 +- src/tools/transform-tool.ts | 5 +- tests/commands/indexed-float-command.test.ts | 1 - tests/commands/layer-commands.test.ts | 23 ++++- .../optimized-drawing-command.test.ts | 54 ++++++++++ tests/commands/selection-commands.test.ts | 98 ++++++++++++++++++- tests/stores/project-context.test.ts | 63 +++++++++++- 16 files changed, 347 insertions(+), 72 deletions(-) diff --git a/src/commands/layer-commands.ts b/src/commands/layer-commands.ts index 728dc47..466cf87 100644 --- a/src/commands/layer-commands.ts +++ b/src/commands/layer-commands.ts @@ -246,6 +246,7 @@ export class FlipLayerCommand implements Command { name = 'Flip Layer'; private layerId: string; private direction: 'horizontal' | 'vertical'; + private frameId: string; private readonly context: LayerCommandContext; constructor( @@ -256,6 +257,7 @@ export class FlipLayerCommand implements Command { this.layerId = layerId; this.direction = direction; this.context = context; + this.frameId = context.animation.currentFrameId.value; this.name = `Flip Layer ${direction}`; } @@ -268,14 +270,13 @@ export class FlipLayerCommand implements Command { } private flip() { - const layer = this.context.layers.layers.value.find((l) => l.id === this.layerId); - if (!layer || !layer.canvas) return; - - const ctx = layer.canvas.getContext('2d'); + const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); + if (!canvas) return; + const ctx = canvas.getContext('2d'); if (!ctx) return; - const width = layer.canvas.width; - const height = layer.canvas.height; + const width = canvas.width; + const height = canvas.height; // Create temp canvas to draw flipped const tempCanvas = document.createElement('canvas'); @@ -286,10 +287,10 @@ export class FlipLayerCommand implements Command { tempCtx.save(); if (this.direction === 'horizontal') { tempCtx.scale(-1, 1); - tempCtx.drawImage(layer.canvas, -width, 0); + tempCtx.drawImage(canvas, -width, 0); } else { tempCtx.scale(1, -1); - tempCtx.drawImage(layer.canvas, 0, -height); + tempCtx.drawImage(canvas, 0, -height); } tempCtx.restore(); @@ -298,7 +299,10 @@ export class FlipLayerCommand implements Command { ctx.drawImage(tempCanvas, 0, 0); // Trigger update - this.context.layers.updateLayer(this.layerId, {}); + const visibleLayer = this.context.layers.layers.value.find((layer) => layer.id === this.layerId); + if (visibleLayer?.canvas === canvas) { + this.context.layers.updateLayer(this.layerId, {}); + } } } @@ -307,6 +311,7 @@ export class RotateLayerCommand implements Command { name = 'Rotate Layer'; private layerId: string; private angle: number; // 90, 180, -90 + private frameId: string; private readonly context: LayerCommandContext; constructor( @@ -317,6 +322,7 @@ export class RotateLayerCommand implements Command { this.layerId = layerId; this.angle = angle; this.context = context; + this.frameId = context.animation.currentFrameId.value; this.name = `Rotate Layer ${angle}°`; } @@ -329,14 +335,13 @@ export class RotateLayerCommand implements Command { } private rotate(angle: number) { - const layer = this.context.layers.layers.value.find((l) => l.id === this.layerId); - if (!layer || !layer.canvas) return; - - const ctx = layer.canvas.getContext('2d'); + const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); + if (!canvas) return; + const ctx = canvas.getContext('2d'); if (!ctx) return; - const width = layer.canvas.width; - const height = layer.canvas.height; + const width = canvas.width; + const height = canvas.height; // Create temp canvas const tempCanvas = document.createElement('canvas'); @@ -348,7 +353,7 @@ export class RotateLayerCommand implements Command { tempCtx.translate(width / 2, height / 2); tempCtx.rotate((angle * Math.PI) / 180); tempCtx.translate(-width / 2, -height / 2); - tempCtx.drawImage(layer.canvas, 0, 0); + tempCtx.drawImage(canvas, 0, 0); tempCtx.restore(); // Update layer canvas @@ -356,7 +361,10 @@ export class RotateLayerCommand implements Command { ctx.drawImage(tempCanvas, 0, 0); // Trigger update - this.context.layers.updateLayer(this.layerId, {}); + const visibleLayer = this.context.layers.layers.value.find((layer) => layer.id === this.layerId); + if (visibleLayer?.canvas === canvas) { + this.context.layers.updateLayer(this.layerId, {}); + } } } diff --git a/src/commands/optimized-drawing-command.ts b/src/commands/optimized-drawing-command.ts index 3a77d87..023c9d4 100644 --- a/src/commands/optimized-drawing-command.ts +++ b/src/commands/optimized-drawing-command.ts @@ -3,7 +3,7 @@ import type { Rect } from '../types/geometry'; import { getActiveProjectContext, type ProjectContext } from '../stores/project-context'; import { writeIndexRegion } from '../utils/buffer-region'; -type DrawingCommandContext = Pick; +type DrawingCommandContext = Pick; /** * Memory-efficient drawing command that stores only the dirty region. @@ -44,6 +44,9 @@ export class OptimizedDrawingCommand implements Command { get drawLayerId(): string { return this.layerId; } + get drawFrameId(): string { + return this.frameId; + } constructor( layerId: string, @@ -85,10 +88,8 @@ export class OptimizedDrawingCommand implements Command { } execute(): void { - const layer = this.context.layers.layers.value.find((l) => l.id === this.layerId); - if (!layer?.canvas) return; - - const ctx = layer.canvas.getContext('2d'); + const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); + const ctx = canvas?.getContext('2d'); if (!ctx) return; // Create ImageData from stored array @@ -109,10 +110,8 @@ export class OptimizedDrawingCommand implements Command { } undo(): void { - const layer = this.context.layers.layers.value.find((l) => l.id === this.layerId); - if (!layer?.canvas) return; - - const ctx = layer.canvas.getContext('2d'); + const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); + const ctx = canvas?.getContext('2d'); if (!ctx) return; // Create ImageData from stored array diff --git a/src/commands/selection/delete-fill-commands.ts b/src/commands/selection/delete-fill-commands.ts index 50f92d1..248f061 100644 --- a/src/commands/selection/delete-fill-commands.ts +++ b/src/commands/selection/delete-fill-commands.ts @@ -4,7 +4,17 @@ import { type Rect } from '../../types/geometry'; import { type SelectionShape } from '../../types/selection'; import { clearCanvasSelection, fillCanvasSelection } from './pixels'; -type SelectionCommandContext = Pick; +type SelectionCommandContext = Pick; + +function getEditableCanvas( + context: SelectionCommandContext, + layerId: string, + frameId: string +): HTMLCanvasElement { + const canvas = context.animation.getEditableCelCanvas(layerId, frameId); + if (!canvas) throw new Error('Editable cel canvas not found'); + return canvas; +} /** * Command for deleting selected pixels (without moving). @@ -24,7 +34,8 @@ export class DeleteSelectionCommand implements Command { private readonly context: SelectionCommandContext; constructor( - canvas: HTMLCanvasElement, + layerId: string, + frameId: string, bounds: Rect, shape: SelectionShape, mask?: Uint8Array, @@ -32,14 +43,14 @@ export class DeleteSelectionCommand implements Command { ) { this.id = crypto.randomUUID(); this.timestamp = Date.now(); - this.canvas = canvas; this.context = context; + this.canvas = getEditableCanvas(context, layerId, frameId); this.bounds = { ...bounds }; this.shape = shape; this.mask = mask; // Capture pixels before deleting - const ctx = canvas.getContext('2d')!; + const ctx = this.canvas.getContext('2d')!; this.deletedImageData = ctx.getImageData(bounds.x, bounds.y, bounds.width, bounds.height); } @@ -78,7 +89,8 @@ export class FillSelectionCommand implements Command { private readonly context: SelectionCommandContext; constructor( - canvas: HTMLCanvasElement, + layerId: string, + frameId: string, bounds: Rect, shape: SelectionShape, fillColor: string, @@ -87,15 +99,15 @@ export class FillSelectionCommand implements Command { ) { this.id = crypto.randomUUID(); this.timestamp = Date.now(); - this.canvas = canvas; this.context = context; + this.canvas = getEditableCanvas(context, layerId, frameId); this.bounds = { ...bounds }; this.shape = shape; this.fillColor = fillColor; this.mask = mask; // Capture pixels before filling - const ctx = canvas.getContext('2d')!; + const ctx = this.canvas.getContext('2d')!; this.previousImageData = ctx.getImageData(bounds.x, bounds.y, bounds.width, bounds.height); } diff --git a/src/commands/selection/float-commands.ts b/src/commands/selection/float-commands.ts index 55813b6..52cdee4 100644 --- a/src/commands/selection/float-commands.ts +++ b/src/commands/selection/float-commands.ts @@ -11,9 +11,19 @@ import { pasteImageDataWithAlpha, } from './pixels'; -type SelectionCommandContext = Pick; +type SelectionCommandContext = Pick; type IndexedSelectionCommandContext = Pick; +function getEditableCanvas( + context: Pick, + layerId: string, + frameId: string +): HTMLCanvasElement { + const canvas = context.animation.getEditableCelCanvas(layerId, frameId); + if (!canvas) throw new Error('Editable cel canvas not found'); + return canvas; +} + export interface IndexedFloatPaletteState { colors: string[]; newColorFlags: Set; @@ -123,8 +133,8 @@ export class CutToFloatCommand implements Command { private readonly context: SelectionCommandContext; constructor( - canvas: HTMLCanvasElement, - _layerId: string, + layerId: string, + frameId: string, bounds: Rect, shape: SelectionShape, mask?: Uint8Array, @@ -132,14 +142,14 @@ export class CutToFloatCommand implements Command { ) { this.id = crypto.randomUUID(); this.timestamp = Date.now(); - this.canvas = canvas; this.context = context; + this.canvas = getEditableCanvas(context, layerId, frameId); this.originalBounds = { ...bounds }; this.shape = shape; this.originalMask = mask; // Capture the pixels we're about to cut - const ctx = canvas.getContext('2d')!; + const ctx = this.canvas.getContext('2d')!; this.fullImageData = ctx.getImageData(bounds.x, bounds.y, bounds.width, bounds.height); // Create a working copy for masking and trimming @@ -214,8 +224,8 @@ export class CommitFloatCommand implements Command { private readonly context: SelectionCommandContext; constructor( - canvas: HTMLCanvasElement, - _layerId: string, + layerId: string, + frameId: string, floatingImageData: ImageData, originalBounds: Rect, offset: { x: number; y: number }, @@ -225,8 +235,8 @@ export class CommitFloatCommand implements Command { ) { this.id = crypto.randomUUID(); this.timestamp = Date.now(); - this.canvas = canvas; this.context = context; + this.canvas = getEditableCanvas(context, layerId, frameId); this.floatingImageData = floatingImageData; this.shape = shape; this.mask = mask; @@ -234,7 +244,7 @@ export class CommitFloatCommand implements Command { this.destinationBounds = getDestinationBounds(originalBounds, offset); // Capture what's currently at the destination (for undo) - const ctx = canvas.getContext('2d')!; + const ctx = this.canvas.getContext('2d')!; this.overwrittenImageData = ctx.getImageData( this.destinationBounds.x, this.destinationBounds.y, @@ -301,7 +311,6 @@ export class CommitIndexedFloatCommand implements Command { private readonly context: IndexedSelectionCommandContext; constructor( - canvas: HTMLCanvasElement, floatingImageData: ImageData, originalBounds: Rect, offset: { x: number; y: number }, @@ -311,8 +320,8 @@ export class CommitIndexedFloatCommand implements Command { ) { this.id = crypto.randomUUID(); this.timestamp = Date.now(); - this.canvas = canvas; this.context = context; + this.canvas = getEditableCanvas(context, options.layerId, options.frameId); this.floatingImageData = floatingImageData; this.destinationBounds = getDestinationBounds(originalBounds, offset); this.shape = shape; @@ -333,7 +342,7 @@ export class CommitIndexedFloatCommand implements Command { : undefined; this.mask = options.mask; - const ctx = canvas.getContext('2d')!; + const ctx = this.canvas.getContext('2d')!; this.overwrittenImageData = ctx.getImageData( this.destinationBounds.x, this.destinationBounds.y, diff --git a/src/commands/selection/transform-commands.ts b/src/commands/selection/transform-commands.ts index 1aabba0..359108f 100644 --- a/src/commands/selection/transform-commands.ts +++ b/src/commands/selection/transform-commands.ts @@ -4,7 +4,17 @@ import { type Rect } from '../../types/geometry'; import { type SelectionShape } from '../../types/selection'; import { flipSelectedPixels, pasteImageDataWithAlpha } from './pixels'; -type SelectionCommandContext = Pick; +type SelectionCommandContext = Pick; + +function getEditableCanvas( + context: SelectionCommandContext, + layerId: string, + frameId: string +): HTMLCanvasElement { + const canvas = context.animation.getEditableCelCanvas(layerId, frameId); + if (!canvas) throw new Error('Editable cel canvas not found'); + return canvas; +} /** * Command for applying a transform (scale and/or rotation) to a selection. @@ -42,7 +52,8 @@ export class TransformSelectionCommand implements Command { private readonly context: SelectionCommandContext; constructor( - canvas: HTMLCanvasElement, + layerId: string, + frameId: string, originalImageData: ImageData, originalBounds: Rect, transformedImageData: ImageData, @@ -56,8 +67,8 @@ export class TransformSelectionCommand implements Command { ) { this.id = crypto.randomUUID(); this.timestamp = Date.now(); - this.canvas = canvas; this.context = context; + this.canvas = getEditableCanvas(context, layerId, frameId); // Generate descriptive name based on what changed const hasScale = scale.x !== 1 || scale.y !== 1; @@ -93,7 +104,7 @@ export class TransformSelectionCommand implements Command { this.actualDestY = Math.round(originalCenterY - transformedImageData.height / 2); // Capture what's at the actual destination before we paste - const ctx = canvas.getContext('2d')!; + const ctx = this.canvas.getContext('2d')!; this.overwrittenAtDestination = ctx.getImageData( this.actualDestX, this.actualDestY, @@ -157,23 +168,25 @@ export class FlipSelectionCommand implements Command { private originalImageData: ImageData; constructor( - canvas: HTMLCanvasElement, + layerId: string, + frameId: string, bounds: Rect, shape: SelectionShape, direction: 'horizontal' | 'vertical', - mask?: Uint8Array + mask?: Uint8Array, + context: SelectionCommandContext = getActiveProjectContext() ) { this.id = crypto.randomUUID(); this.timestamp = Date.now(); this.name = `Flip Selection ${direction === 'horizontal' ? 'Horizontal' : 'Vertical'}`; - this.canvas = canvas; + this.canvas = getEditableCanvas(context, layerId, frameId); this.bounds = { ...bounds }; this.shape = shape; this.direction = direction; this.mask = mask; // Capture original pixels - const ctx = canvas.getContext('2d')!; + const ctx = this.canvas.getContext('2d')!; this.originalImageData = ctx.getImageData(bounds.x, bounds.y, bounds.width, bounds.height); } diff --git a/src/components/canvas/pf-drawing-canvas.ts b/src/components/canvas/pf-drawing-canvas.ts index cab96e4..21de482 100644 --- a/src/components/canvas/pf-drawing-canvas.ts +++ b/src/components/canvas/pf-drawing-canvas.ts @@ -209,8 +209,8 @@ export class PFDrawingCanvas extends BaseComponent { if (!activeLayer?.canvas) return null; return new CommitFloatCommand( - activeLayer.canvas, activeLayer.id, + context.animation.currentFrameId.value, state.imageData, state.originalBounds, state.currentOffset, diff --git a/src/components/canvas/viewport/transform-handlers.ts b/src/components/canvas/viewport/transform-handlers.ts index 0bd1f91..eb33b41 100644 --- a/src/components/canvas/viewport/transform-handlers.ts +++ b/src/components/canvas/viewport/transform-handlers.ts @@ -8,7 +8,7 @@ import { getActiveProjectContext, type ProjectContext } from '../../../stores/pr import { CutToFloatCommand, TransformSelectionCommand } from '../../../commands/selection-commands'; import { log } from '../../../utils/log'; -type TransformContext = Pick; +type TransformContext = Pick; /** * Transition selection to transforming state if needed. @@ -37,15 +37,14 @@ function ensureTransformState(context: TransformContext): void { const activeLayer = layers.layers.value.find((l) => l.id === activeLayerId); if (!activeLayer?.canvas) return; - const canvas = activeLayer.canvas; const bounds = state.bounds; const shape = state.shape; const mask = state.shape === 'freeform' ? state.mask : undefined; // Cut to float from the active layer const cutCommand = new CutToFloatCommand( - canvas, activeLayerId || '', + context.animation.currentFrameId.value, bounds, shape, mask, @@ -129,7 +128,8 @@ export function commitTransform(context: TransformContext = getActiveProjectCont // Create and execute the transform command on the active layer const command = new TransformSelectionCommand( - activeLayer.canvas, + activeLayerId ?? '', + context.animation.currentFrameId.value, imageData, originalBounds, transformedImageData, diff --git a/src/components/toolbar/pf-context-bar.ts b/src/components/toolbar/pf-context-bar.ts index 64643a1..54910bc 100644 --- a/src/components/toolbar/pf-context-bar.ts +++ b/src/components/toolbar/pf-context-bar.ts @@ -510,11 +510,13 @@ export class PFContextBar extends BaseComponent { if (!selected) return; const command = new FlipSelectionCommand( - selected.canvas, + selected.layer.id, + context.animation.currentFrameId.value, selected.bounds, selected.shape, direction, - selected.mask + selected.mask, + context ); context.history.execute(command); } diff --git a/src/stores/animation/store.ts b/src/stores/animation/store.ts index e904354..b64f257 100644 --- a/src/stores/animation/store.ts +++ b/src/stores/animation/store.ts @@ -161,6 +161,11 @@ class AnimationStore { return this.cels.value.get(key)?.canvas; } + getEditableCelCanvas(layerId: string, frameId: string): HTMLCanvasElement | undefined { + this.ensureUnlinkedForEdit(layerId, frameId); + return this.cels.value.get(getCelKey(layerId, frameId))?.canvas; + } + // ===== Frame Management ===== private initializeCelsForFrame(frameId: string) { @@ -354,6 +359,7 @@ class AnimationStore { } ensureCelIndexBuffer(layerId: string, frameId: string): Uint8Array { + this.getEditableCelCanvas(layerId, frameId); const result = indexBuffer.ensureCelIndexBuffer( this.cels.value, layerId, diff --git a/src/tools/selection/base-selection-tool.ts b/src/tools/selection/base-selection-tool.ts index 4200fff..98092ef 100644 --- a/src/tools/selection/base-selection-tool.ts +++ b/src/tools/selection/base-selection-tool.ts @@ -178,8 +178,8 @@ export abstract class BaseSelectionTool extends BaseTool { if (!selected) return; const command = new CutToFloatCommand( - selected.canvas, selected.layer.id, + this.projectContext.animation.currentFrameId.value, selected.bounds, selected.shape, selected.mask, @@ -199,7 +199,7 @@ export abstract class BaseSelectionTool extends BaseTool { } protected commitIfFloating(): boolean { - const { history, layers, selection } = this.projectContext; + const { animation, history, layers, selection } = this.projectContext; const state = selection.state.value; if (state.type !== 'floating') return false; @@ -208,8 +208,8 @@ export abstract class BaseSelectionTool extends BaseTool { if (!isPaintableLayer(layer)) return false; const command = new CommitFloatCommand( - layer.canvas, layer.id, + animation.currentFrameId.value, state.imageData, state.originalBounds, state.currentOffset, diff --git a/src/tools/transform-tool.ts b/src/tools/transform-tool.ts index d8ee778..9587776 100644 --- a/src/tools/transform-tool.ts +++ b/src/tools/transform-tool.ts @@ -187,11 +187,10 @@ export class TransformTool extends BaseTool { return; } - const canvas = activeLayer.canvas; - // Create and execute the transform command (with offset for movement during transform) const command = new TransformSelectionCommand( - canvas, + activeLayer.id, + this.projectContext.animation.currentFrameId.value, imageData, originalBounds, transformedImageData, diff --git a/tests/commands/indexed-float-command.test.ts b/tests/commands/indexed-float-command.test.ts index 8eae338..a8f5e1e 100644 --- a/tests/commands/indexed-float-command.test.ts +++ b/tests/commands/indexed-float-command.test.ts @@ -226,7 +226,6 @@ function makeCommand(target: IndexedContext) { ]); const command = new CommitIndexedFloatCommand( - target.canvas.canvas, imageData, destinationBounds, { x: 0, y: 0 }, diff --git a/tests/commands/layer-commands.test.ts b/tests/commands/layer-commands.test.ts index 2cfb25e..5588208 100644 --- a/tests/commands/layer-commands.test.ts +++ b/tests/commands/layer-commands.test.ts @@ -1,6 +1,6 @@ import { afterEach, describe, expect, it } from 'vitest'; -import { DuplicateLayerCommand } from '../../src/commands/layer-commands'; +import { DuplicateLayerCommand, FlipLayerCommand } from '../../src/commands/layer-commands'; import { createProjectContext, type ProjectContext } from '../../src/stores/project-context'; import type { Cel } from '../../src/types/animation'; import type { ReferenceLayerData } from '../../src/types/reference'; @@ -134,4 +134,25 @@ describe('layer commands', () => { expect(layerIds(context)).not.toContain(duplicate!.id); expect(context.animation.cels.value.has(duplicateKey)).toBe(false); }); + + it('keeps a layer transform on the frame captured by the command', () => { + const context = createContext(); + const layer = context.layers.layers.value[0]; + const firstFrameId = context.animation.currentFrameId.value; + context.animation.addFrame(false); + const secondFrameId = context.animation.currentFrameId.value; + const firstKey = context.animation.getCelKey(layer.id, firstFrameId); + const secondKey = context.animation.getCelKey(layer.id, secondFrameId); + const sharedCanvas = context.animation.cels.value.get(firstKey)?.canvas; + + context.animation.goToFrame(firstFrameId); + const command = new FlipLayerCommand(layer.id, 'horizontal', context); + context.animation.goToFrame(secondFrameId); + + command.execute(); + command.undo(); + + expect(context.animation.cels.value.get(firstKey)?.canvas).not.toBe(sharedCanvas); + expect(context.animation.cels.value.get(secondKey)?.canvas).toBe(sharedCanvas); + }); }); diff --git a/tests/commands/optimized-drawing-command.test.ts b/tests/commands/optimized-drawing-command.test.ts index f272d96..11afeec 100644 --- a/tests/commands/optimized-drawing-command.test.ts +++ b/tests/commands/optimized-drawing-command.test.ts @@ -254,4 +254,58 @@ describe('OptimizedDrawingCommand', () => { expect(sourceBuffer[bounds.y * W + bounds.x]).toBe(0); expect(otherBuffer[bounds.y * W + bounds.x]).toBe(3); }); + + it('executes and undoes against the frame captured at creation time', () => { + const context = createProjectContext(); + createdContexts.push(context); + const layer = context.layers.layers.value[0]; + const firstFrameId = context.animation.currentFrameId.value; + const first = makeFakeCanvas(); + + context.layers.updateLayer(layer.id, { canvas: first.canvas }); + context.animation.cels.value = new Map([ + [ + context.animation.getCelKey(layer.id, firstFrameId), + { + id: 'first-cel', + layerId: layer.id, + frameId: firstFrameId, + canvas: first.canvas, + }, + ], + ]); + + const command = new OptimizedDrawingCommand( + layer.id, + bounds, + new Uint8ClampedArray(bounds.width * bounds.height * 4), + new Uint8ClampedArray(bounds.width * bounds.height * 4).fill(255), + 'Captured frame', + undefined, + context + ); + + const second = makeFakeCanvas(); + const secondFrameId = 'second-frame'; + context.animation.cels.value = new Map([ + ...context.animation.cels.value, + [ + context.animation.getCelKey(layer.id, secondFrameId), + { + id: 'second-cel', + layerId: layer.id, + frameId: secondFrameId, + canvas: second.canvas, + }, + ], + ]); + context.animation.currentFrameId.value = secondFrameId; + context.layers.updateLayer(layer.id, { canvas: second.canvas }); + + command.execute(); + command.undo(); + + expect(first.putCalls).toHaveLength(2); + expect(second.putCalls).toHaveLength(0); + }); }); diff --git a/tests/commands/selection-commands.test.ts b/tests/commands/selection-commands.test.ts index 6b1bd10..6023339 100644 --- a/tests/commands/selection-commands.test.ts +++ b/tests/commands/selection-commands.test.ts @@ -34,6 +34,8 @@ import { import { trimTransparentPixels } from '../../src/commands/selection/image-data'; import { maskPixelsOutsideSelection } from '../../src/commands/selection/pixels'; import { selectionStore } from '../../src/stores/selection'; +import { EMPTY_CEL_LINK_ID } from '../../src/stores/animation'; +import { createProjectContext, type ProjectContext } from '../../src/stores/project-context'; import { type Rect } from '../../src/types/geometry'; class FakeImageData { @@ -158,6 +160,15 @@ function makeCanvas(width: number, height: number) { }; } +function commandContext(canvas: HTMLCanvasElement): ProjectContext { + return { + animation: { + getEditableCelCanvas: () => canvas, + }, + selection: selectionStore, + } as unknown as ProjectContext; +} + describe('selection image helpers', () => { it('trims transparent image data and carries the matching mask region', () => { const imageData = new ImageData(4, 3); @@ -197,12 +208,71 @@ describe('selection image helpers', () => { }); describe('selection commands', () => { + const contexts: ProjectContext[] = []; + beforeEach(() => { selectionStore.clear(); }); afterEach(() => { selectionStore.clear(); + vi.restoreAllMocks(); + for (const context of contexts.splice(0)) { + context.dispose(); + } + }); + + it('fills one blank frame without changing another blank frame', () => { + const context = createProjectContext(); + contexts.push(context); + const layer = context.layers.layers.value[0]; + const firstFrameId = context.animation.currentFrameId.value; + context.animation.addFrame(false); + const secondFrameId = context.animation.currentFrameId.value; + const shared = makeCanvas(3, 2); + const firstKey = context.animation.getCelKey(layer.id, firstFrameId); + const secondKey = context.animation.getCelKey(layer.id, secondFrameId); + const cels = new Map(context.animation.cels.value); + + cels.set(firstKey, { + ...cels.get(firstKey)!, + canvas: shared.canvas, + linkedCelId: EMPTY_CEL_LINK_ID, + linkType: 'soft', + }); + cels.set(secondKey, { + ...cels.get(secondKey)!, + canvas: shared.canvas, + linkedCelId: EMPTY_CEL_LINK_ID, + linkType: 'soft', + }); + context.animation.cels.value = cels; + context.animation.goToFrame(firstFrameId); + + const editable = makeCanvas(3, 2); + const createElement = document.createElement.bind(document); + vi.spyOn(document, 'createElement').mockImplementation((tagName, options) => { + if (tagName === 'canvas') return editable.canvas; + return createElement(tagName, options); + }); + + const bounds: Rect = { x: 0, y: 0, width: 3, height: 2 }; + context.selection.setSelected(bounds, 'rectangle'); + const command = new FillSelectionCommand( + layer.id, + firstFrameId, + bounds, + 'rectangle', + '#336699', + undefined, + context + ); + + command.execute(); + + expect(readPixel(editable.getImageData(), 0, 0)).toEqual([51, 102, 153, 255]); + expect(readPixel(shared.getImageData(), 0, 0)).toEqual([0, 0, 0, 0]); + expect(context.animation.cels.value.get(secondKey)?.canvas).toBe(shared.canvas); }); it('fills only freeform-mask pixels and restores them on undo', () => { @@ -212,7 +282,15 @@ describe('selection commands', () => { setCanvasPixel(1, 0, [9, 9, 9, 255]); selectionStore.setSelected(bounds, 'freeform', mask); - const command = new FillSelectionCommand(canvas, bounds, 'freeform', '#336699', mask); + const command = new FillSelectionCommand( + 'layer-1', + 'frame-1', + bounds, + 'freeform', + '#336699', + mask, + commandContext(canvas) + ); command.execute(); let imageData = getImageData(); @@ -242,7 +320,14 @@ describe('selection commands', () => { } selectionStore.setSelected(bounds, 'ellipse'); - const command = new DeleteSelectionCommand(canvas, bounds, 'ellipse'); + const command = new DeleteSelectionCommand( + 'layer-1', + 'frame-1', + bounds, + 'ellipse', + undefined, + commandContext(canvas) + ); command.execute(); let imageData = getImageData(); @@ -264,7 +349,14 @@ describe('selection commands', () => { const mask = Uint8Array.from([0, 255, 0, 0, 0, 255]); setCanvasPixel(3, 2, [90, 80, 70, 255]); - const command = new CutToFloatCommand(canvas, 'layer-1', bounds, 'freeform', mask); + const command = new CutToFloatCommand( + 'layer-1', + 'frame-1', + bounds, + 'freeform', + mask, + commandContext(canvas) + ); command.execute(); diff --git a/tests/stores/project-context.test.ts b/tests/stores/project-context.test.ts index 2303040..27b56d3 100644 --- a/tests/stores/project-context.test.ts +++ b/tests/stores/project-context.test.ts @@ -1,6 +1,6 @@ import { afterEach, describe, expect, it, vi } from "vitest"; import "fake-indexeddb/auto"; -import { animationStore } from "../../src/stores/animation"; +import { animationStore, EMPTY_CEL_LINK_ID } from "../../src/stores/animation"; import { colorStore } from "../../src/stores/colors"; import { dirtyRectStore } from "../../src/stores/dirty-rect"; import { gridStore } from "../../src/stores/grid"; @@ -320,4 +320,65 @@ describe("ProjectContext", () => { expect(rebuild).toHaveBeenCalledTimes(1); }); + + it("prepares an empty cel for editing without changing another blank frame", () => { + const context = createTestContext(8, 8); + const layerId = context.layers.layers.value[0].id; + const firstFrameId = context.animation.currentFrameId.value; + + context.animation.addFrame(false); + const secondFrameId = context.animation.currentFrameId.value; + + const firstKey = context.animation.getCelKey(layerId, firstFrameId); + const secondKey = context.animation.getCelKey(layerId, secondFrameId); + const sharedCanvas = context.animation.cels.value.get(firstKey)?.canvas; + + expect(sharedCanvas).toBe(context.animation.cels.value.get(secondKey)?.canvas); + + const editableCanvas = context.animation.getEditableCelCanvas(layerId, firstFrameId); + const firstCel = context.animation.cels.value.get(firstKey); + const secondCel = context.animation.cels.value.get(secondKey); + + expect(editableCanvas).toBe(firstCel?.canvas); + expect(firstCel?.canvas).not.toBe(sharedCanvas); + expect(firstCel?.linkedCelId).toBeUndefined(); + expect(secondCel?.canvas).toBe(sharedCanvas); + expect(secondCel?.linkedCelId).toBe(EMPTY_CEL_LINK_ID); + }); + + it("keeps explicitly hard-linked cels shared when preparing one for editing", () => { + const context = createTestContext(8, 8); + const layerId = context.layers.layers.value[0].id; + const firstFrameId = context.animation.currentFrameId.value; + context.animation.addFrame(false); + const secondFrameId = context.animation.currentFrameId.value; + const keys = [ + context.animation.getCelKey(layerId, firstFrameId), + context.animation.getCelKey(layerId, secondFrameId), + ]; + + context.animation.linkCels(keys, "hard"); + const sharedCanvas = context.animation.cels.value.get(keys[0])?.canvas; + + expect(context.animation.getEditableCelCanvas(layerId, firstFrameId)).toBe(sharedCanvas); + expect(context.animation.cels.value.get(keys[1])?.canvas).toBe(sharedCanvas); + expect(context.animation.cels.value.get(keys[0])?.linkType).toBe("hard"); + expect(context.animation.cels.value.get(keys[1])?.linkType).toBe("hard"); + }); + + it("creates an index buffer only for the blank frame being edited", () => { + const context = createTestContext(8, 8); + const layerId = context.layers.layers.value[0].id; + const firstFrameId = context.animation.currentFrameId.value; + context.animation.addFrame(false); + const secondFrameId = context.animation.currentFrameId.value; + + context.animation.ensureCelIndexBuffer(layerId, firstFrameId); + + expect(context.animation.getCelIndexBuffer(layerId, firstFrameId)).toBeDefined(); + expect(context.animation.getCelIndexBuffer(layerId, secondFrameId)).toBeUndefined(); + expect(context.animation.getCelCanvas(firstFrameId, layerId)).not.toBe( + context.animation.getCelCanvas(secondFrameId, layerId) + ); + }); }); From 6adba754468554431be452718384c7b33cefc690 Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 11 Jul 2026 18:34:14 +0200 Subject: [PATCH 5/8] fix: route shortcuts through active project context (#338) --- src/services/brush-capture.ts | 48 ++-- src/services/keyboard/register-shortcuts.ts | 216 ++++++++++-------- src/stores/tools.ts | 22 +- tests/services/active-context-actions.test.ts | 104 +++++++++ .../keyboard/register-shortcuts.test.ts | 110 +++++++++ 5 files changed, 378 insertions(+), 122 deletions(-) create mode 100644 tests/services/active-context-actions.test.ts diff --git a/src/services/brush-capture.ts b/src/services/brush-capture.ts index 06ce72b..64a2991 100644 --- a/src/services/brush-capture.ts +++ b/src/services/brush-capture.ts @@ -1,7 +1,8 @@ -import { selectionStore } from "../stores/selection"; -import { layerStore } from "../stores/layers"; -import { animationStore } from "../stores/animation"; import { brushStore } from "../stores/brush"; +import { + getActiveProjectContext, + type ProjectContext, +} from "../stores/project-context"; import type { Brush, BrushImageData } from "../types/brush"; import { BRUSH_SIZE_LIMITS } from "../types/brush"; import { log } from "../utils/log"; @@ -10,20 +11,24 @@ import { isReferenceLayer } from "../utils/layer-capabilities"; /** * Check if a brush can be captured from the current selection */ -export function canCaptureBrush(): boolean { - const state = selectionStore.state.value; +type BrushCaptureContext = Pick; + +export function canCaptureBrush( + context: BrushCaptureContext = getActiveProjectContext() +): boolean { + const state = context.selection.state.value; return state.type === "selected" || state.type === "floating"; } /** * Get the current selection bounds and content info */ -function getSelectionInfo(): { +function getSelectionInfo(context: BrushCaptureContext): { bounds: { x: number; y: number; width: number; height: number }; mask?: Uint8Array; imageData?: ImageData; } | null { - const state = selectionStore.state.value; + const state = context.selection.state.value; if (state.type === "selected") { return { @@ -57,8 +62,11 @@ function getSelectionInfo(): { * @param name Optional name for the brush (defaults to dimensions) * @returns The captured brush or null if capture failed */ -function captureBrushFromSelection(name?: string): Brush | null { - const info = getSelectionInfo(); +function captureBrushFromSelection( + name: string | undefined, + context: BrushCaptureContext +): Brush | null { + const info = getSelectionInfo(context); if (!info) { log.warn("No selection to capture brush from"); return null; @@ -68,7 +76,7 @@ function captureBrushFromSelection(name?: string): Brush | null { if (!isValidBrushSize(bounds)) return null; - const pixelData = readSelectionPixels(info); + const pixelData = readSelectionPixels(info, context); if (!pixelData) return null; // Apply mask if freeform selection @@ -131,26 +139,29 @@ function isValidBrushSize(bounds: { width: number; height: number }): boolean { return true; } -function readSelectionPixels(info: NonNullable>): ImageData | null { +function readSelectionPixels( + info: NonNullable>, + context: BrushCaptureContext +): ImageData | null { if (info.imageData) { return info.imageData; } - const activeLayerId = layerStore.activeLayerId.value; - const currentFrame = animationStore.currentFrameId.value; + const activeLayerId = context.layers.activeLayerId.value; + const currentFrame = context.animation.currentFrameId.value; if (!activeLayerId) { log.warn("No active layer"); return null; } - const activeLayer = layerStore.layers.value.find((layer) => layer.id === activeLayerId); + const activeLayer = context.layers.layers.value.find((layer) => layer.id === activeLayerId); if (isReferenceLayer(activeLayer)) { log.warn("Reference layers cannot be captured as brushes"); return null; } - const canvas = animationStore.getCelCanvas(currentFrame, activeLayerId); + const canvas = context.animation.getCelCanvas(currentFrame, activeLayerId); if (!canvas) { log.warn("No canvas available to capture brush from"); return null; @@ -199,8 +210,11 @@ function hasVisiblePixels(imageData: ImageData): boolean { * Capture brush from selection and add to brush store * Returns the captured brush or null if capture failed */ -export async function captureBrushAndAdd(name?: string): Promise { - const brush = captureBrushFromSelection(name); +export async function captureBrushAndAdd( + name?: string, + context: BrushCaptureContext = getActiveProjectContext() +): Promise { + const brush = captureBrushFromSelection(name, context); if (!brush) return null; await brushStore.addCustomBrush(brush); diff --git a/src/services/keyboard/register-shortcuts.ts b/src/services/keyboard/register-shortcuts.ts index 72c77b1..61b5b52 100644 --- a/src/services/keyboard/register-shortcuts.ts +++ b/src/services/keyboard/register-shortcuts.ts @@ -1,10 +1,6 @@ import { keyboardService } from './shortcuts'; import { toolStore, type ToolType } from '../../stores/tools'; -import { historyStore } from '../../stores/history'; import { brushStore } from '../../stores/brush'; -import { selectionStore } from '../../stores/selection'; -import { layerStore } from '../../stores/layers'; -import { projectStore } from '../../stores/project'; import { DeleteSelectionCommand, CommitFloatCommand, @@ -12,12 +8,8 @@ import { CutToFloatCommand, FillSelectionCommand, } from '../../commands/selection-commands'; -import { colorStore } from '../../stores/colors'; -import { animationStore } from '../../stores/animation'; -import { viewportStore } from '../../stores/viewport'; import { panelStore } from '../../stores/panels'; import { shapeSettings } from '../../stores/tool-settings'; -import { guidesStore } from '../../stores/guides'; import { workspaceStore } from '../../stores/workspace'; import { getActiveProjectContext, type ProjectContext } from '../../stores/project-context'; import { AddFrameCommand } from '../../commands/animation-commands'; @@ -89,16 +81,6 @@ function dispatchAppEvent(name: string) { window.dispatchEvent(new CustomEvent(name)); } -function activeLayer(): Layer | undefined { - const activeLayerId = layerStore.activeLayerId.value; - return layerStore.layers.value.find((layer) => layer.id === activeLayerId); -} - -function activeLayerWithCanvas(): Layer | undefined { - const layer = activeLayer(); - return isPaintableLayer(layer) ? layer : undefined; -} - function activeLayerInContext(context: ProjectContext): Layer | undefined { const activeLayerId = context.layers.activeLayerId.value; return context.layers.layers.value.find((layer) => layer.id === activeLayerId); @@ -154,7 +136,6 @@ function commitFloatingSelectionInContext( context.history.execute( new CommitIndexedFloatCommand( - layer.canvas, state.imageData, state.originalBounds, state.currentOffset, @@ -176,53 +157,66 @@ function commitFloatingSelectionInContext( context.history.execute( new CommitFloatCommand( - layer.canvas, layer.id, + context.animation.currentFrameId.value, state.imageData, state.originalBounds, state.currentOffset, state.shape, - state.mask + state.mask, + context ) ); } -function commitFloatingSelection(state: Extract) { - commitFloatingSelectionInContext(getActiveProjectContext(), state); -} - -function moveSelectionByArrow(dx: number, dy: number) { - const state = selectionStore.state.value; +function moveSelectionByArrow( + dx: number, + dy: number, + context: ProjectContext = getActiveProjectContext() +) { + const state = context.selection.state.value; if (state.type === 'selected') { - const layer = activeLayerWithCanvas(); + const layer = activeLayerWithCanvasInContext(context); if (!layer?.canvas) return; - historyStore.execute( - new CutToFloatCommand(layer.canvas, layer.id, state.bounds, state.shape, freeformMask(state)) + context.history.execute( + new CutToFloatCommand( + layer.id, + context.animation.currentFrameId.value, + state.bounds, + state.shape, + freeformMask(state), + context + ) ); - selectionStore.moveFloat(dx, dy); + context.selection.moveFloat(dx, dy); return; } if (state.type === 'floating') { - selectionStore.moveFloat(dx, dy); + context.selection.moveFloat(dx, dy); return; } if (state.type === 'transforming') { - selectionStore.moveTransform(dx, dy); + context.selection.moveTransform(dx, dy); } } -function moveSelectionOrFrame(dx: number, dy: number, frameAction?: ShortcutAction) { - if (selectionStore.isActive) { - moveSelectionByArrow(dx, dy); +function moveSelectionOrFrame( + dx: number, + dy: number, + frameAction?: (context: ProjectContext) => void +) { + const context = getActiveProjectContext(); + if (context.selection.isActive) { + moveSelectionByArrow(dx, dy, context); return; } - frameAction?.(); + frameAction?.(context); } function toggleFillOrFillSelection() { @@ -231,19 +225,22 @@ function toggleFillOrFillSelection() { return; } - const state = selectionStore.state.value; + const context = getActiveProjectContext(); + const state = context.selection.state.value; if (state.type !== 'selected') return; - const layer = activeLayerWithCanvas(); + const layer = activeLayerWithCanvasInContext(context); if (!layer?.canvas) return; - historyStore.execute( + context.history.execute( new FillSelectionCommand( - layer.canvas, + layer.id, + context.animation.currentFrameId.value, state.bounds, state.shape, - colorStore.primaryColor.value, - freeformMask(state) + context.colors.primaryColor.value, + freeformMask(state), + context ) ); } @@ -257,72 +254,86 @@ function commitSelectionShortcut() { } function cancelSelection() { - const state = selectionStore.state.value; + const context = getActiveProjectContext(); + const state = context.selection.state.value; if (state.type === 'floating') { - historyStore.undo(); + context.history.undo(); return; } if (state.type === 'selected' || state.type === 'selecting') { - selectionStore.clear(); + context.selection.clear(); } } function deleteSelection() { - const state = selectionStore.state.value; + const context = getActiveProjectContext(); + const state = context.selection.state.value; if (state.type === 'selected') { - const layer = activeLayerWithCanvas(); + const layer = activeLayerWithCanvasInContext(context); if (!layer?.canvas) return; - historyStore.execute( - new DeleteSelectionCommand(layer.canvas, state.bounds, state.shape, freeformMask(state)) + context.history.execute( + new DeleteSelectionCommand( + layer.id, + context.animation.currentFrameId.value, + state.bounds, + state.shape, + freeformMask(state), + context + ) ); return; } if (state.type === 'floating' || state.type === 'transforming') { - selectionStore.clear(); + context.selection.clear(); } } function deselect() { - const state = selectionStore.state.value; + const context = getActiveProjectContext(); + const state = context.selection.state.value; if (state.type === 'floating') { - commitFloatingSelection(state); + commitFloatingSelectionInContext(context, state); return; } - selectionStore.clear(); + context.selection.clear(); } function selectAll() { - selectionStore.state.value = { + const context = getActiveProjectContext(); + context.selection.state.value = { type: 'selected', shape: 'rectangle', bounds: { x: 0, y: 0, - width: projectStore.width.value, - height: projectStore.height.value, + width: context.project.width.value, + height: context.project.height.value, }, }; } function selectCelBounds() { - const activeLayerId = layerStore.activeLayerId.value; + const context = getActiveProjectContext(); + const activeLayerId = context.layers.activeLayerId.value; if (!activeLayerId) return; - const canvas = animationStore.getCelCanvas(animationStore.currentFrameId.value, activeLayerId); + const canvas = context.animation.getCelCanvas( + context.animation.currentFrameId.value, + activeLayerId + ); if (!canvas) return; - if (!selectionStore.selectLayerContent(canvas)) { - selectionStore.clear(); + if (!context.selection.selectLayerContent(canvas)) { + context.selection.clear(); } } -function copySelection() { - const context = getActiveProjectContext(); +function copySelection(context: ProjectContext = getActiveProjectContext()) { const state = context.selection.state.value; if (state.type !== 'selected') return; @@ -369,16 +380,24 @@ function copySelection() { } function cutSelection() { - const state = selectionStore.state.value; + const context = getActiveProjectContext(); + const state = context.selection.state.value; if (state.type !== 'selected') return; - copySelection(); + copySelection(context); - const layer = activeLayerWithCanvas(); + const layer = activeLayerWithCanvasInContext(context); if (!layer?.canvas) return; - historyStore.execute( - new DeleteSelectionCommand(layer.canvas, state.bounds, state.shape, freeformMask(state)) + context.history.execute( + new DeleteSelectionCommand( + layer.id, + context.animation.currentFrameId.value, + state.bounds, + state.shape, + freeformMask(state), + context + ) ); } @@ -470,45 +489,51 @@ function pasteSelection() { } function invertSelection() { - if (selectionStore.state.value.type !== 'selected') return; + const context = getActiveProjectContext(); + if (context.selection.state.value.type !== 'selected') return; - selectionStore.invertSelection(projectStore.width.value, projectStore.height.value); + context.selection.invertSelection(context.project.width.value, context.project.height.value); } async function captureBrush() { - if (!canCaptureBrush()) { + const context = getActiveProjectContext(); + if (!canCaptureBrush(context)) { log.debug('No selection to capture as brush'); return; } - await captureBrushAndAdd(); + await captureBrushAndAdd(undefined, context); } function groupLayers() { - const activeLayerId = layerStore.activeLayerId.value; - const layer = activeLayer(); + const context = getActiveProjectContext(); + const activeLayerId = context.layers.activeLayerId.value; + const layer = activeLayerInContext(context); if (!activeLayerId || !layer) return; if (layer.type === 'group') return; - historyStore.execute(new GroupLayersCommand([activeLayerId])); + context.history.execute(new GroupLayersCommand([activeLayerId], context)); } function ungroupLayers() { - const activeLayerId = layerStore.activeLayerId.value; - const layer = activeLayer(); + const context = getActiveProjectContext(); + const activeLayerId = context.layers.activeLayerId.value; + const layer = activeLayerInContext(context); if (!activeLayerId || !layer) return; if (layer.type === 'group') { - historyStore.execute(new UngroupLayersCommand(activeLayerId)); + context.history.execute(new UngroupLayersCommand(activeLayerId, context)); return; } if (!layer.parentId) return; - const parentGroup = layerStore.layers.value.find((candidate) => candidate.id === layer.parentId); + const parentGroup = context.layers.layers.value.find( + (candidate) => candidate.id === layer.parentId + ); if (parentGroup?.type === 'group') { - historyStore.execute(new UngroupLayersCommand(parentGroup.id)); + context.history.execute(new UngroupLayersCommand(parentGroup.id, context)); } } @@ -557,7 +582,7 @@ const colorShortcuts: ShortcutGroup = [ { key: 'x', modifiers: [], - action: () => colorStore.swapColors(), + action: () => getActiveProjectContext().colors.swapColors(), description: 'Swap colors', }, ]; @@ -566,13 +591,13 @@ const viewShortcuts: ShortcutGroup = [ { key: '0', modifiers: [], - action: () => viewportStore.resetView(), + action: () => getActiveProjectContext().viewport.resetView(), description: 'Fit to window', }, ...([1, 2, 3, 4, 5, 6] as const).map((level) => ({ key: String(level), modifiers: [], - action: () => viewportStore.zoomToLevel(level), + action: () => getActiveProjectContext().viewport.zoomToLevel(level), description: `Zoom ${[100, 200, 400, 800, 1600, 3200][level - 1]}%`, })), ]; @@ -617,7 +642,7 @@ const brushSizeAndPanelShortcuts: ShortcutGroup = [ { key: 'g', modifiers: ['shift'], - action: () => guidesStore.toggleVisibility(), + action: () => getActiveProjectContext().guides.toggleVisibility(), description: 'Toggle guides', }, ]; @@ -626,13 +651,13 @@ const animationShortcuts: ShortcutGroup = [ { key: 'ArrowLeft', modifiers: [], - action: () => moveSelectionOrFrame(-1, 0, () => animationStore.prevFrame()), + action: () => moveSelectionOrFrame(-1, 0, (context) => context.animation.prevFrame()), description: 'Move selection left / Previous frame', }, { key: 'ArrowRight', modifiers: [], - action: () => moveSelectionOrFrame(1, 0, () => animationStore.nextFrame()), + action: () => moveSelectionOrFrame(1, 0, (context) => context.animation.nextFrame()), description: 'Move selection right / Next frame', }, { @@ -674,25 +699,28 @@ const animationShortcuts: ShortcutGroup = [ { key: 'Home', modifiers: [], - action: () => animationStore.goToFirstFrame(), + action: () => getActiveProjectContext().animation.goToFirstFrame(), description: 'First frame', }, { key: 'End', modifiers: [], - action: () => animationStore.goToLastFrame(), + action: () => getActiveProjectContext().animation.goToLastFrame(), description: 'Last frame', }, { key: 'Enter', modifiers: [], - action: () => animationStore.togglePlayback(), + action: () => getActiveProjectContext().animation.togglePlayback(), description: 'Play/Stop', }, { key: 'n', modifiers: ['alt'], - action: () => historyStore.execute(new AddFrameCommand(true)), + action: () => { + const context = getActiveProjectContext(); + context.history.execute(new AddFrameCommand(true, undefined, context)); + }, description: 'New frame', }, ]; @@ -707,19 +735,19 @@ const fillAndEditShortcuts: ShortcutGroup = [ { key: 'z', modifiers: [MOD_PRIMARY], - action: () => historyStore.undo(), + action: () => getActiveProjectContext().history.undo(), description: 'Undo', }, { key: 'z', modifiers: [MOD_PRIMARY, 'shift'], - action: () => historyStore.redo(), + action: () => getActiveProjectContext().history.redo(), description: 'Redo', }, { key: 'y', modifiers: ['ctrl'], - action: () => historyStore.redo(), + action: () => getActiveProjectContext().history.redo(), description: 'Redo', }, ]; @@ -764,7 +792,7 @@ const selectionShortcuts: ShortcutGroup = [ { key: 'd', modifiers: [MOD_PRIMARY, 'shift'], - action: () => selectionStore.reselect(), + action: () => getActiveProjectContext().selection.reselect(), description: 'Reselect', }, { diff --git a/src/stores/tools.ts b/src/stores/tools.ts index 7ab1538..3cd9f26 100644 --- a/src/stores/tools.ts +++ b/src/stores/tools.ts @@ -1,7 +1,5 @@ import { signal } from '../core/signal'; -import { selectionStore } from './selection'; -import { layerStore } from './layers'; -import { animationStore } from './animation'; +import { getActiveProjectContext, type ProjectContext } from './project-context'; export type ToolType = | 'pencil' @@ -61,12 +59,12 @@ class ToolStore { return this.overrideCanvas.value !== null; } - setActiveTool(tool: ToolType) { + setActiveTool(tool: ToolType, context: ProjectContext = getActiveProjectContext()) { this.activeTool.value = tool; // Auto-select layer content when switching to transform tool if (tool === 'transform') { - this.autoSelectForTransform(); + this.autoSelectForTransform(context); } } @@ -74,18 +72,20 @@ class ToolStore { * Auto-select layer content when switching to transform tool. * Only activates if there's no current selection. */ - private autoSelectForTransform() { + private autoSelectForTransform(context: ProjectContext) { + const { animation, layers, selection } = context; + // Skip if there's already an active selection - if (selectionStore.isActive) return; + if (selection.isActive) return; - const activeLayerId = layerStore.activeLayerId.value; + const activeLayerId = layers.activeLayerId.value; if (!activeLayerId) return; - const currentFrameId = animationStore.currentFrameId.value; - const canvas = animationStore.getCelCanvas(currentFrameId, activeLayerId); + const currentFrameId = animation.currentFrameId.value; + const canvas = animation.getCelCanvas(currentFrameId, activeLayerId); if (!canvas) return; - selectionStore.selectLayerContent(canvas); + selection.selectLayerContent(canvas); } /** diff --git a/tests/services/active-context-actions.test.ts b/tests/services/active-context-actions.test.ts new file mode 100644 index 0000000..993a731 --- /dev/null +++ b/tests/services/active-context-actions.test.ts @@ -0,0 +1,104 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; + +import { brushStore } from '../../src/stores/brush'; +import { defaultProjectContext } from '../../src/stores/project-context'; +import { + createProjectContext, + restoreDefaultProjectContext, + setActiveProjectContext, + type ProjectContext, +} from '../../src/stores/project-context'; +import { toolStore } from '../../src/stores/tools'; +import { canCaptureBrush, captureBrushAndAdd } from '../../src/services/brush-capture'; + +const createdContexts: ProjectContext[] = []; + +function installCanvas(context: ProjectContext, rgba: number[]) { + const layerId = crypto.randomUUID(); + const frameId = crypto.randomUUID(); + const imageData = { + width: 1, + height: 1, + data: Uint8ClampedArray.from(rgba), + } as ImageData; + const canvas = { + width: 1, + height: 1, + getContext: () => ({ + getImageData: () => ({ + width: 1, + height: 1, + data: new Uint8ClampedArray(imageData.data), + }), + }), + } as unknown as HTMLCanvasElement; + + context.layers.layers.value = [ + { + id: layerId, + name: 'Active layer', + type: 'image', + visible: true, + locked: false, + opacity: 255, + blendMode: 'normal', + parentId: null, + canvas, + }, + ]; + context.layers.activeLayerId.value = layerId; + context.animation.frames.value = [{ id: frameId, duration: 100 }]; + context.animation.currentFrameId.value = frameId; + context.animation.cels.value = new Map([ + [ + context.animation.getCelKey(layerId, frameId), + { id: crypto.randomUUID(), layerId, frameId, canvas }, + ], + ]); +} + +function createContext(rgba: number[]): ProjectContext { + const context = createProjectContext(); + installCanvas(context, rgba); + createdContexts.push(context); + return context; +} + +describe('active-context tool and brush actions', () => { + beforeEach(() => { + defaultProjectContext.selection.clear(); + toolStore.setActiveTool('pencil'); + }); + + afterEach(() => { + restoreDefaultProjectContext(); + defaultProjectContext.selection.clear(); + for (const context of createdContexts.splice(0)) { + context.dispose(); + } + vi.restoreAllMocks(); + }); + + it('auto-selects transform pixels from the active project', () => { + const activeContext = createContext([12, 34, 56, 255]); + setActiveProjectContext(activeContext); + + toolStore.setActiveTool('transform'); + + expect(activeContext.selection.state.value.type).toBe('selected'); + expect(defaultProjectContext.selection.state.value.type).toBe('none'); + }); + + it('captures a brush from the active project selection', async () => { + const activeContext = createContext([12, 34, 56, 255]); + activeContext.selection.setSelected({ x: 0, y: 0, width: 1, height: 1 }, 'rectangle'); + setActiveProjectContext(activeContext); + vi.spyOn(brushStore, 'addCustomBrush').mockResolvedValue(); + vi.spyOn(brushStore, 'setActiveBrush').mockImplementation(() => {}); + + expect(canCaptureBrush()).toBe(true); + const brush = await captureBrushAndAdd(); + + expect(brush?.imageData?.data).toEqual([12, 34, 56, 255]); + }); +}); diff --git a/tests/services/keyboard/register-shortcuts.test.ts b/tests/services/keyboard/register-shortcuts.test.ts index a36773d..825a1a1 100644 --- a/tests/services/keyboard/register-shortcuts.test.ts +++ b/tests/services/keyboard/register-shortcuts.test.ts @@ -3,8 +3,10 @@ import 'fake-indexeddb/auto'; import { MOD_PRIMARY } from '../../../src/utils/platform'; import { toolRegistry } from '../../../src/tools/tool-registry'; import { clipboardStore } from '../../../src/stores/clipboard'; +import { toolStore } from '../../../src/stores/tools'; import { createProjectContext, + defaultProjectContext, restoreDefaultProjectContext, setActiveProjectContext, } from '../../../src/stores/project-context'; @@ -340,6 +342,114 @@ describe('registerShortcuts', () => { expect(workspaceStoreMock.activatePrevious).toHaveBeenCalledTimes(1); }); + it('routes project-scoped view, color, guide, history, and selection shortcuts to the active context', async () => { + const context = createProjectContext(); + setActiveProjectContext(context); + context.project.width.value = 17; + context.project.height.value = 9; + + const activeReset = vi.spyOn(context.viewport, 'resetView'); + const defaultReset = vi.spyOn(defaultProjectContext.viewport, 'resetView'); + const activeSwap = vi.spyOn(context.colors, 'swapColors'); + const defaultSwap = vi.spyOn(defaultProjectContext.colors, 'swapColors'); + const activeGuides = vi.spyOn(context.guides, 'toggleVisibility'); + const defaultGuides = vi.spyOn(defaultProjectContext.guides, 'toggleVisibility'); + const activeUndo = vi.spyOn(context.history, 'undo'); + const defaultUndo = vi.spyOn(defaultProjectContext.history, 'undo'); + + try { + registerShortcuts(); + + shortcutAction('0')?.(); + shortcutAction('x')?.(); + shortcutActionByDescription('shift+g', 'Toggle guides')?.(); + shortcutAction(`${MOD_PRIMARY}+z`)?.(); + shortcutAction(`${MOD_PRIMARY}+a`)?.(); + await Promise.resolve(); + + expect(activeReset).toHaveBeenCalledOnce(); + expect(activeSwap).toHaveBeenCalledOnce(); + expect(activeGuides).toHaveBeenCalledOnce(); + expect(activeUndo).toHaveBeenCalledOnce(); + expect(context.selection.state.value).toMatchObject({ + type: 'selected', + bounds: { x: 0, y: 0, width: 17, height: 9 }, + }); + + expect(defaultReset).not.toHaveBeenCalled(); + expect(defaultSwap).not.toHaveBeenCalled(); + expect(defaultGuides).not.toHaveBeenCalled(); + expect(defaultUndo).not.toHaveBeenCalled(); + expect(defaultProjectContext.selection.state.value.type).toBe('none'); + } finally { + restoreDefaultProjectContext(); + context.dispose(); + } + }); + + it('records selection edits in the active context history', () => { + const context = createProjectContext(); + const canvas = makeEditableCanvas(4, 4); + installActiveIndexedCanvasLayer(context, 4, 4, new Uint8Array(16), canvas.canvas); + context.selection.setSelected({ x: 0, y: 0, width: 1, height: 1 }, 'rectangle'); + setActiveProjectContext(context); + toolStore.setActiveTool('pencil'); + + const activeExecute = vi.spyOn(context.history, 'execute').mockResolvedValue(); + const defaultExecute = vi.spyOn(defaultProjectContext.history, 'execute').mockResolvedValue(); + + try { + registerShortcuts(); + shortcutAction('f')?.(); + + expect(activeExecute).toHaveBeenCalledOnce(); + expect(defaultExecute).not.toHaveBeenCalled(); + } finally { + restoreDefaultProjectContext(); + context.dispose(); + } + }); + + it('keeps selection, frame, and layer shortcut actions inside the active context', () => { + const context = createProjectContext(); + const canvas = makeEditableCanvas(4, 4); + installActiveIndexedCanvasLayer(context, 4, 4, new Uint8Array(16), canvas.canvas); + context.selection.setSelected({ x: 0, y: 0, width: 1, height: 1 }, 'rectangle'); + setActiveProjectContext(context); + toolStore.setActiveTool('pencil'); + + const activeExecute = vi.spyOn(context.history, 'execute').mockResolvedValue(); + const defaultExecute = vi.spyOn(defaultProjectContext.history, 'execute').mockResolvedValue(); + + try { + registerShortcuts(); + + shortcutAction('f')?.(); + shortcutAction('Delete')?.(); + shortcutAction('alt+n')?.(); + shortcutAction(`${MOD_PRIMARY}+g`)?.(); + + expect(activeExecute.mock.calls.map(([command]) => command.name)).toEqual([ + 'Fill Selection', + 'Delete Selection', + 'Add Frame', + 'Group Layers', + ]); + expect(defaultExecute).not.toHaveBeenCalled(); + + context.selection.clear(); + const activeNextFrame = vi.spyOn(context.animation, 'nextFrame'); + const defaultNextFrame = vi.spyOn(defaultProjectContext.animation, 'nextFrame'); + shortcutAction('ArrowRight')?.(); + + expect(activeNextFrame).toHaveBeenCalledOnce(); + expect(defaultNextFrame).not.toHaveBeenCalled(); + } finally { + restoreDefaultProjectContext(); + context.dispose(); + } + }); + it('copies indexed selection metadata from the active project context', () => { const context = createProjectContext(); setActiveProjectContext(context); From ed7ad559dae747820ad112df6886e9fd0482330b Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 11 Jul 2026 18:34:39 +0200 Subject: [PATCH 6/8] fix: bind history patching to active project context (#340) --- src/commands/index.ts | 4 +- src/commands/patch-command.ts | 14 +- src/components/ui/pf-undo-history.ts | 93 ++++--- src/services/patch-service.ts | 30 ++- tests/commands/context-capture.test.ts | 22 +- tests/components/ui/pf-undo-history.test.ts | 263 ++++++++++++++++++++ 6 files changed, 369 insertions(+), 57 deletions(-) create mode 100644 tests/components/ui/pf-undo-history.test.ts diff --git a/src/commands/index.ts b/src/commands/index.ts index 94074a4..92a8e7b 100644 --- a/src/commands/index.ts +++ b/src/commands/index.ts @@ -14,11 +14,13 @@ export interface DrawableCommand extends Command { drawPreviousData: Uint8ClampedArray; drawNewData: Uint8ClampedArray; drawLayerId: string; + drawFrameId: string; } /** * Type guard to check if a command has drawable pixel data. */ export function isDrawableCommand(cmd: Command): cmd is DrawableCommand { - return 'drawBounds' in cmd && 'drawPreviousData' in cmd && 'drawNewData' in cmd && 'drawLayerId' in cmd; + return 'drawBounds' in cmd && 'drawPreviousData' in cmd && 'drawNewData' in cmd && + 'drawLayerId' in cmd && 'drawFrameId' in cmd; } diff --git a/src/commands/patch-command.ts b/src/commands/patch-command.ts index 358c20c..83d75fc 100644 --- a/src/commands/patch-command.ts +++ b/src/commands/patch-command.ts @@ -2,7 +2,7 @@ import type { Command } from './index'; import type { Rect } from '../types/geometry'; import { getActiveProjectContext, type ProjectContext } from '../stores/project-context'; -type PatchCommandContext = Pick; +type PatchCommandContext = Pick; /** * Command for selective undo (patching out a specific change). @@ -16,6 +16,7 @@ export class PatchCommand implements Command { timestamp?: number; private layerId: string; + private frameId: string; private bounds: Rect; private beforeData: Uint8ClampedArray; // Canvas state before patch private afterData: Uint8ClampedArray; // Canvas state after patch (with pixels restored) @@ -37,9 +38,13 @@ export class PatchCommand implements Command { get drawLayerId(): string { return this.layerId; } + get drawFrameId(): string { + return this.frameId; + } constructor( layerId: string, + frameId: string, bounds: Rect, beforeData: Uint8ClampedArray, afterData: Uint8ClampedArray, @@ -50,6 +55,7 @@ export class PatchCommand implements Command { this.name = `Patch out: ${originalCommandName}`; this.context = context; this.layerId = layerId; + this.frameId = frameId; this.bounds = { ...bounds }; this.beforeData = beforeData; this.afterData = afterData; @@ -68,10 +74,8 @@ export class PatchCommand implements Command { } private applyData(data: Uint8ClampedArray): void { - const layer = this.context.layers.layers.value.find((l) => l.id === this.layerId); - if (!layer?.canvas) return; - - const ctx = layer.canvas.getContext('2d'); + const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); + const ctx = canvas?.getContext('2d'); if (!ctx) return; // Rebuild ImageData from the stored array before writing it back. diff --git a/src/components/ui/pf-undo-history.ts b/src/components/ui/pf-undo-history.ts index 5ce2780..55cc69c 100644 --- a/src/components/ui/pf-undo-history.ts +++ b/src/components/ui/pf-undo-history.ts @@ -1,11 +1,9 @@ import { html, css, nothing } from 'lit'; import { customElement, state, query } from 'lit/decorators.js'; import { BaseComponent } from '../../core/base-component'; -import { historyStore, type Command } from '../../stores/history'; -import { historyHighlightStore } from '../../stores/history-highlight'; +import type { Command } from '../../stores/history'; import { isDrawableCommand } from '../../commands/index'; -import { layerStore } from '../../stores/layers'; -import { projectStore } from '../../stores/project'; +import { defaultProjectContext, type ProjectContext } from '../../stores/project-context'; import './pf-history-diff-tooltip'; import './pf-button'; @@ -132,9 +130,20 @@ export class PFUndoHistory extends BaseComponent { @state() private allPixelsOverwritten = false; @query('.tooltip-anchor') tooltipAnchor!: HTMLElement; + private context: ProjectContext = defaultProjectContext; connectedCallback() { super.connectedCallback(); + this.subscribeToActiveProjectContext((context) => { + if (this.hoverTimeout !== null) { + clearTimeout(this.hoverTimeout); + this.hoverTimeout = null; + } + this.context = context; + this.tooltipAnchorRect = null; + this.allPixelsOverwritten = false; + this.requestUpdate(); + }); document.addEventListener('keydown', this.handleKeyDown); } @@ -148,7 +157,7 @@ export class PFUndoHistory extends BaseComponent { private handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') { - historyHighlightStore.clear(); + this.context.historyHighlight.clear(); } }; @@ -159,14 +168,15 @@ export class PFUndoHistory extends BaseComponent { } // Debounce hover by 100ms + const historyHighlight = this.context.historyHighlight; + const target = event.currentTarget as HTMLElement; this.hoverTimeout = window.setTimeout(() => { // Don't update highlight if we have an expanded item - if (historyHighlightStore.expandedCommandId.value === null) { - historyHighlightStore.setHighlight(cmd); + if (historyHighlight.expandedCommandId.value === null) { + historyHighlight.setHighlight(cmd); } // Get anchor rect for tooltip - const target = event.currentTarget as HTMLElement; this.tooltipAnchorRect = target.getBoundingClientRect(); }, 100); } @@ -178,15 +188,15 @@ export class PFUndoHistory extends BaseComponent { } // Only clear highlight if not expanded - if (historyHighlightStore.expandedCommandId.value === null) { - historyHighlightStore.setHighlight(null); + if (this.context.historyHighlight.expandedCommandId.value === null) { + this.context.historyHighlight.setHighlight(null); this.tooltipAnchorRect = null; } } private handleClick(cmd: Command, index: number, type: 'undo' | 'redo') { // Toggle expanded state - historyHighlightStore.toggleExpanded(cmd); + this.context.historyHighlight.toggleExpanded(cmd); // Check if all pixels are overwritten (for patch button state) if (isDrawableCommand(cmd)) { @@ -202,69 +212,84 @@ export class PFUndoHistory extends BaseComponent { } private async revertToHere(index: number, type: 'undo' | 'redo') { + const context = this.context; + const history = context.history; + if (type === 'undo') { - const undoStack = historyStore.undoStack.value; + const undoStack = history.undoStack.value; const stepsToUndo = undoStack.length - 1 - index; for (let i = 0; i < stepsToUndo; i++) { - await historyStore.undo(); + await history.undo(); } } else { const stepsToRedo = index + 1; for (let i = 0; i < stepsToRedo; i++) { - await historyStore.redo(); + await history.redo(); } } // Clear expanded state - historyHighlightStore.clear(); + context.historyHighlight.clear(); } private async patchThisOut(cmd: Command, index: number) { if (!isDrawableCommand(cmd)) return; + const context = this.context; + const history = context.history; + const historyHighlight = context.historyHighlight; + const frameId = cmd.drawFrameId; + const undoStack = history.undoStack.value; + const subsequentCommands = undoStack.slice(index + 1); + const canvasWidth = context.project.width.value; + // Import patch service dynamically to avoid circular dependency - const { computeSafePixels, applyPatch } = await import('../../services/patch-service'); + const { computeSafePixels, createPatchData } = await import('../../services/patch-service'); const { PatchCommand } = await import('../../commands/patch-command'); - const undoStack = historyStore.undoStack.value; - const subsequentCommands = undoStack.slice(index + 1); - const canvasWidth = projectStore.width.value; - // Compute safe pixels const safePixels = computeSafePixels(cmd, subsequentCommands, canvasWidth); if (safePixels.size === 0) { - this.allPixelsOverwritten = true; + if (this.context === context) this.allPixelsOverwritten = true; return; } - // Apply patch - const patchData = applyPatch(cmd.drawLayerId, cmd, safePixels, canvasWidth); + const patchData = createPatchData( + context, + cmd.drawLayerId, + frameId, + cmd, + safePixels, + canvasWidth + ); if (!patchData) { - this.allPixelsOverwritten = true; + if (this.context === context) this.allPixelsOverwritten = true; return; } // Create and execute patch command const patchCommand = new PatchCommand( cmd.drawLayerId, + frameId, patchData.bounds, patchData.beforeData, patchData.afterData, - cmd.name + cmd.name, + context ); - await historyStore.execute(patchCommand); + await history.execute(patchCommand); // Clear expanded state - historyHighlightStore.clear(); + historyHighlight.clear(); } private isLayerDeleted(cmd: Command): boolean { if (!isDrawableCommand(cmd)) return false; const layerId = cmd.drawLayerId; - const layer = layerStore.layers.value.find(l => l.id === layerId); + const layer = this.context.layers.layers.value.find(l => l.id === layerId); return !layer; } @@ -333,7 +358,7 @@ export class PFUndoHistory extends BaseComponent { updated() { // Render diff canvases after DOM update - const expandedCmd = historyHighlightStore.expandedCommand.value; + const expandedCmd = this.context.historyHighlight.expandedCommand.value; if (expandedCmd && isDrawableCommand(expandedCmd)) { this.renderDiffCanvas(expandedCmd, 'before'); this.renderDiffCanvas(expandedCmd, 'after'); @@ -365,11 +390,11 @@ export class PFUndoHistory extends BaseComponent { } render() { - const undoStack = historyStore.undoStack.value; - const redoStack = historyStore.redoStack.value; - const highlightedId = historyHighlightStore.highlightedCommandId.value; - const expandedId = historyHighlightStore.expandedCommandId.value; - const highlightedCmd = historyHighlightStore.highlightedCommand.value; + const undoStack = this.context.history.undoStack.value; + const redoStack = this.context.history.redoStack.value; + const highlightedId = this.context.historyHighlight.highlightedCommandId.value; + const expandedId = this.context.historyHighlight.expandedCommandId.value; + const highlightedCmd = this.context.historyHighlight.highlightedCommand.value; // Show tooltip only when hovering (not expanded) and have an anchor const showTooltip = highlightedId !== null && diff --git a/src/services/patch-service.ts b/src/services/patch-service.ts index cbd5330..39aa770 100644 --- a/src/services/patch-service.ts +++ b/src/services/patch-service.ts @@ -1,7 +1,9 @@ import type { Command } from '../stores/history'; import type { Rect } from '../types/geometry'; import { isDrawableCommand, type DrawableCommand } from '../commands/index'; -import { layerStore } from '../stores/layers'; +import type { ProjectContext } from '../stores/project-context'; + +type PatchContext = Pick; /** * Check if two pixel values are equal (RGBA comparison). @@ -109,6 +111,9 @@ export function computeSafePixels( for (const cmd of subsequentCommands) { if (!isDrawableCommand(cmd)) continue; + if (cmd.drawLayerId !== targetCmd.drawLayerId || cmd.drawFrameId !== targetCmd.drawFrameId) { + continue; + } const subBounds = cmd.drawBounds; @@ -149,27 +154,28 @@ export function computeSafePixels( } /** - * Apply a selective patch, restoring only safe pixels. + * Prepare a selective patch without mutating the canvas. * + * @param context - Project context that owns the target cel * @param layerId - The layer to patch + * @param frameId - The frame to patch * @param targetCmd - The command being patched out * @param safePixels - Set of global pixel indices that are safe to restore * @param canvasWidth - Width of the canvas * @returns Data needed for a PatchCommand, or null if no pixels could be restored */ -export function applyPatch( +export function createPatchData( + context: PatchContext, layerId: string, + frameId: string, targetCmd: DrawableCommand, safePixels: Set, canvasWidth: number ): { bounds: Rect; beforeData: Uint8ClampedArray; afterData: Uint8ClampedArray } | null { if (safePixels.size === 0) return null; - // Get the layer canvas - const layer = layerStore.layers.value.find(l => l.id === layerId); - if (!layer?.canvas) return null; - - const ctx = layer.canvas.getContext('2d'); + const canvas = context.animation.getCelCanvas(frameId, layerId); + const ctx = canvas?.getContext('2d'); if (!ctx) return null; const targetBounds = targetCmd.drawBounds; @@ -230,14 +236,6 @@ export function applyPatch( afterData[patchOffset + 3] = targetPrevData[targetOffset + 3]; } - // Apply the patch to the canvas - const afterImageData = new ImageData( - new Uint8ClampedArray(afterData), - patchBounds.width, - patchBounds.height - ); - ctx.putImageData(afterImageData, patchBounds.x, patchBounds.y); - return { bounds: patchBounds, beforeData, diff --git a/tests/commands/context-capture.test.ts b/tests/commands/context-capture.test.ts index 4e6b92d..119ceef 100644 --- a/tests/commands/context-capture.test.ts +++ b/tests/commands/context-capture.test.ts @@ -78,6 +78,7 @@ function makeFakeCanvas() { function useLayerCanvas(context: ProjectContext, layerId: string) { const { canvas, putCalls } = makeFakeCanvas(); const layer = context.layers.layers.value[0]; + const frameId = context.animation.currentFrameId.value; context.layers.layers.value = [ { @@ -87,6 +88,17 @@ function useLayerCanvas(context: ProjectContext, layerId: string) { }, ]; context.layers.activeLayerId.value = layerId; + context.animation.cels.value = new Map([ + [ + context.animation.getCelKey(layerId, frameId), + { + id: crypto.randomUUID(), + layerId, + frameId, + canvas, + }, + ], + ]); return putCalls; } @@ -136,6 +148,7 @@ describe('command context capture', () => { const source = createTestContext(); const other = createTestContext(); const layerId = 'shared-image-layer'; + const frameId = source.animation.currentFrameId.value; const bounds: Rect = { x: 1, y: 1, width: 2, height: 2 }; const beforeData = new Uint8ClampedArray(bounds.width * bounds.height * 4).fill(7); const afterData = new Uint8ClampedArray(bounds.width * bounds.height * 4).fill(9); @@ -143,7 +156,14 @@ describe('command context capture', () => { const otherPutCalls = useLayerCanvas(other, layerId); setActiveProjectContext(source); - const command = new PatchCommand(layerId, bounds, beforeData, afterData, 'Delayed stroke'); + const command = new PatchCommand( + layerId, + frameId, + bounds, + beforeData, + afterData, + 'Delayed stroke' + ); setActiveProjectContext(other); command.execute(); diff --git a/tests/components/ui/pf-undo-history.test.ts b/tests/components/ui/pf-undo-history.test.ts new file mode 100644 index 0000000..45bde7b --- /dev/null +++ b/tests/components/ui/pf-undo-history.test.ts @@ -0,0 +1,263 @@ +import { afterEach, describe, expect, it, vi } from 'vitest'; + +vi.mock('../../../src/services/persistence/indexed-db', () => ({ + projectRepository: { + list: vi.fn(async () => []), + load: vi.fn(async () => null), + save: vi.fn(async () => {}), + delete: vi.fn(async () => {}), + getLastOpenedProjectId: vi.fn(async () => null), + setLastOpenedProjectId: vi.fn(async () => {}), + getWorkspaceState: vi.fn(async () => null), + setWorkspaceState: vi.fn(async () => {}), + }, +})); + +vi.mock('../../../src/services/persistence/palette-persistence', () => ({ + palettePersistence: { + savePalette: vi.fn(async () => {}), + getAllPalettes: vi.fn(async () => []), + deletePalette: vi.fn(async () => {}), + }, +})); + +vi.mock('../../../src/utils/canvas-binary', () => ({ + canvasToPngBytes: vi.fn(async () => new Uint8Array([1])), + loadImageDataToCanvas: vi.fn(async () => {}), +})); + +import '../../../src/components/ui/pf-undo-history'; +import type { PFUndoHistory } from '../../../src/components/ui/pf-undo-history'; +import type { DrawableCommand } from '../../../src/commands'; +import type { Command } from '../../../src/stores/history-store'; +import { + createProjectContext, + restoreDefaultProjectContext, + setActiveProjectContext, + type ProjectContext, +} from '../../../src/stores/project-context'; + +const createdContexts: ProjectContext[] = []; + +class FakeImageData { + constructor( + public data: Uint8ClampedArray, + public width: number, + public height: number + ) {} +} + +vi.stubGlobal('ImageData', FakeImageData); + +function createTestContext(): ProjectContext { + const context = createProjectContext(); + createdContexts.push(context); + return context; +} + +function trackedCommand(id: string, name: string, state: { value: number }): Command { + return { + id, + name, + execute() { + state.value++; + }, + undo() { + state.value--; + }, + }; +} + +function drawableCommand( + layerId: string, + frameId: string, + before: Uint8ClampedArray, + after: Uint8ClampedArray +): DrawableCommand { + return { + id: 'target-drawing', + name: 'Target drawing', + drawBounds: { x: 0, y: 0, width: 1, height: 1 }, + drawLayerId: layerId, + drawFrameId: frameId, + drawPreviousData: before, + drawNewData: after, + execute() {}, + undo() {}, + }; +} + +function pixelCanvas(initialPixel: Uint8ClampedArray) { + let pixel = new Uint8ClampedArray(initialPixel); + let writeCount = 0; + const context = { + getImageData: () => ({ data: new Uint8ClampedArray(pixel) }), + putImageData: (imageData: { data: Uint8ClampedArray }) => { + pixel = new Uint8ClampedArray(imageData.data); + writeCount++; + }, + }; + const canvas = { + width: 1, + height: 1, + getContext: () => context, + } as unknown as HTMLCanvasElement; + + return { + canvas, + pixel: () => [...pixel], + writeCount: () => writeCount, + }; +} + +function useTwoFrames( + context: ProjectContext, + layerId: string, + firstFrameId: string, + firstCanvas: HTMLCanvasElement, + secondFrameId: string, + secondCanvas: HTMLCanvasElement +) { + const layer = context.layers.layers.value[0]; + context.layers.layers.value = [{ ...layer, id: layerId, canvas: firstCanvas }]; + context.layers.activeLayerId.value = layerId; + context.animation.frames.value = [ + { id: firstFrameId, order: 0, duration: 100 }, + { id: secondFrameId, order: 1, duration: 100 }, + ]; + context.animation.cels.value = new Map([ + [ + context.animation.getCelKey(layerId, firstFrameId), + { + id: `${context.project.id.value}-first-cel`, + layerId, + frameId: firstFrameId, + canvas: firstCanvas, + }, + ], + [ + context.animation.getCelKey(layerId, secondFrameId), + { + id: `${context.project.id.value}-second-cel`, + layerId, + frameId: secondFrameId, + canvas: secondCanvas, + }, + ], + ]); + context.animation.goToFrame(firstFrameId); +} + +async function createHistoryPanel(context: ProjectContext): Promise { + setActiveProjectContext(context); + const panel = document.createElement('pf-undo-history') as PFUndoHistory; + document.body.append(panel); + await Promise.resolve(); + await panel.updateComplete; + return panel; +} + +async function switchHistoryPanel(panel: PFUndoHistory, context: ProjectContext) { + setActiveProjectContext(context); + await Promise.resolve(); + await panel.updateComplete; +} + +function buttonWithText(panel: PFUndoHistory, text: string): HTMLElement | undefined { + return [...(panel.shadowRoot?.querySelectorAll('pf-button') ?? [])].find( + (button) => button.textContent?.trim() === text + ); +} + +describe('pf-undo-history active project context', () => { + afterEach(() => { + document.body.replaceChildren(); + restoreDefaultProjectContext(); + for (const context of createdContexts.splice(0)) { + context.dispose(); + } + vi.restoreAllMocks(); + }); + + it('shows and reverts only the active project history', async () => { + const contextA = createTestContext(); + const contextB = createTestContext(); + const stateA = { value: 0 }; + const stateB = { value: 0 }; + + await contextA.history.execute(trackedCommand('a-1', 'Project A action', stateA)); + await contextB.history.execute(trackedCommand('b-1', 'Project B first', stateB)); + await contextB.history.execute(trackedCommand('b-2', 'Project B second', stateB)); + + const panel = await createHistoryPanel(contextA); + expect(panel.shadowRoot?.textContent).toContain('Project A action'); + expect(panel.shadowRoot?.textContent).not.toContain('Project B first'); + + await switchHistoryPanel(panel, contextB); + expect(panel.shadowRoot?.textContent).toContain('Project B first'); + expect(panel.shadowRoot?.textContent).not.toContain('Project A action'); + + panel.shadowRoot?.querySelector('.item.active')?.click(); + await panel.updateComplete; + buttonWithText(panel, 'Revert to here')?.click(); + + await vi.waitFor(() => expect(stateB.value).toBe(1)); + expect(stateA.value).toBe(1); + expect(contextA.history.undoStack.value.map((command) => command.id)).toEqual(['a-1']); + expect(contextB.history.undoStack.value.map((command) => command.id)).toEqual(['b-1']); + + await panel.updateComplete; + panel.shadowRoot?.querySelector('.item.future')?.click(); + await panel.updateComplete; + buttonWithText(panel, 'Revert to here')?.click(); + + await vi.waitFor(() => expect(stateB.value).toBe(2)); + expect(stateA.value).toBe(1); + expect(contextB.history.undoStack.value.map((command) => command.id)).toEqual(['b-1', 'b-2']); + }); + + it('patches the initiating project and frame once, then keeps undo and redo on that frame', async () => { + const contextA = createTestContext(); + const contextB = createTestContext(); + const layerId = 'shared-layer'; + const firstFrameId = 'shared-frame-1'; + const secondFrameId = 'shared-frame-2'; + const transparent = new Uint8ClampedArray([0, 0, 0, 0]); + const drawn = new Uint8ClampedArray([40, 80, 120, 255]); + const untouched = new Uint8ClampedArray([5, 10, 15, 255]); + const aFirst = pixelCanvas(untouched); + const aSecond = pixelCanvas(untouched); + const bFirst = pixelCanvas(drawn); + const bSecond = pixelCanvas(untouched); + + useTwoFrames(contextA, layerId, firstFrameId, aFirst.canvas, secondFrameId, aSecond.canvas); + useTwoFrames(contextB, layerId, firstFrameId, bFirst.canvas, secondFrameId, bSecond.canvas); + await contextB.history.execute( + drawableCommand(layerId, firstFrameId, transparent, drawn) + ); + + const panel = await createHistoryPanel(contextB); + panel.shadowRoot?.querySelector('.item.active')?.click(); + await panel.updateComplete; + buttonWithText(panel, 'Patch this out')?.click(); + + contextB.animation.goToFrame(secondFrameId); + setActiveProjectContext(contextA); + + await vi.waitFor(() => expect(contextB.history.undoStack.value).toHaveLength(2)); + expect(bFirst.pixel()).toEqual([...transparent]); + expect(bFirst.writeCount()).toBe(1); + expect(bSecond.pixel()).toEqual([...untouched]); + expect(aFirst.pixel()).toEqual([...untouched]); + expect(aSecond.pixel()).toEqual([...untouched]); + + await contextB.history.undo(); + expect(bFirst.pixel()).toEqual([...drawn]); + expect(bSecond.pixel()).toEqual([...untouched]); + + await contextB.history.redo(); + expect(bFirst.pixel()).toEqual([...transparent]); + expect(bFirst.writeCount()).toBe(3); + expect(bSecond.pixel()).toEqual([...untouched]); + }); +}); From 6f98ef761b35c6171e89250453e32b5097798a68 Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 11 Jul 2026 18:48:37 +0200 Subject: [PATCH 7/8] test: cover export context across reopen (#342) --- tests/components/app/pixel-forge-app.test.ts | 39 ++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/tests/components/app/pixel-forge-app.test.ts b/tests/components/app/pixel-forge-app.test.ts index d29f04d..7bccba0 100644 --- a/tests/components/app/pixel-forge-app.test.ts +++ b/tests/components/app/pixel-forge-app.test.ts @@ -189,6 +189,45 @@ describe('pixel-forge-app project dialogs', () => { expect(dialog?.context).toBe(contextB); }); + it('captures a fresh project context each time export is reopened', async () => { + await import('../../../src/components/app/pixel-forge-app'); + const contextA = createProjectContext(); + const contextB = createProjectContext(); + contextA.project.name.value = 'Tab A'; + contextB.project.name.value = 'Tab B'; + createdContexts.push(contextA, contextB); + setActiveProjectContext(contextB); + const element = document.createElement('pixel-forge-app') as HTMLElement & { + updateComplete: Promise; + }; + document.body.append(element); + + window.dispatchEvent(new CustomEvent('show-export-dialog')); + await element.updateComplete; + + const dialog = element.shadowRoot?.querySelector; + }>('pf-export-dialog'); + expect(dialog?.context).toBe(contextB); + + dialog?.shadowRoot?.querySelector('.btn-cancel')?.click(); + await dialog?.updateComplete; + await element.updateComplete; + + setActiveProjectContext(contextA); + window.dispatchEvent(new CustomEvent('show-export-dialog')); + await element.updateComplete; + await dialog?.updateComplete; + + expect(dialog?.open).toBe(true); + expect(dialog?.context).toBe(contextA); + expect(dialog?.shadowRoot?.querySelector('#export-filename')?.value).toBe( + 'Tab A' + ); + }); + it('restores saved workspace state during startup', async () => { await import('../../../src/components/app/pixel-forge-app'); const workspaceState = { From 7567c48507bd65ab27479ef52cc4634667573c78 Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 11 Jul 2026 19:01:35 +0200 Subject: [PATCH 8/8] refactor: share project integrity command paths (#337) --- src/commands/layer-commands.ts | 116 ++++++++---------- src/commands/optimized-drawing-command.ts | 33 ++--- .../selection/delete-fill-commands.ts | 53 ++------ .../selection/editable-cel-command.ts | 43 +++++++ src/commands/selection/float-commands.ts | 77 ++++-------- src/commands/selection/transform-commands.ts | 41 ++----- src/components/app/pixel-forge-app.ts | 10 +- .../canvas/viewport/transform-handlers.ts | 55 +-------- src/services/keyboard/register-shortcuts.ts | 48 ++++---- src/services/selection-transform-commit.ts | 57 +++++++++ src/tools/transform-tool.ts | 53 +------- 11 files changed, 231 insertions(+), 355 deletions(-) create mode 100644 src/commands/selection/editable-cel-command.ts create mode 100644 src/services/selection-transform-commit.ts diff --git a/src/commands/layer-commands.ts b/src/commands/layer-commands.ts index 466cf87..c8ac9aa 100644 --- a/src/commands/layer-commands.ts +++ b/src/commands/layer-commands.ts @@ -11,6 +11,44 @@ function layerCanOwnCels(layer: Layer): boolean { return layer.type !== 'reference'; } +type LayerCanvasTransform = ( + context: CanvasRenderingContext2D, + source: HTMLCanvasElement, + width: number, + height: number +) => void; + +function transformLayerCel( + context: LayerCommandContext, + layerId: string, + frameId: string, + transform: LayerCanvasTransform +): void { + const canvas = context.animation.getEditableCelCanvas(layerId, frameId); + if (!canvas) return; + + const targetContext = canvas.getContext('2d'); + if (!targetContext) return; + + const transformedCanvas = document.createElement('canvas'); + transformedCanvas.width = canvas.width; + transformedCanvas.height = canvas.height; + const transformedContext = transformedCanvas.getContext('2d'); + if (!transformedContext) return; + + transformedContext.save(); + transform(transformedContext, canvas, canvas.width, canvas.height); + transformedContext.restore(); + + targetContext.clearRect(0, 0, canvas.width, canvas.height); + targetContext.drawImage(transformedCanvas, 0, 0); + + const visibleLayer = context.layers.layers.value.find((layer) => layer.id === layerId); + if (visibleLayer?.canvas === canvas) { + context.layers.updateLayer(layerId, {}); + } +} + export class AddLayerCommand implements Command { id = crypto.randomUUID(); name = 'Add Layer'; @@ -270,39 +308,15 @@ export class FlipLayerCommand implements Command { } private flip() { - const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); - if (!canvas) return; - const ctx = canvas.getContext('2d'); - if (!ctx) return; - - const width = canvas.width; - const height = canvas.height; - - // Create temp canvas to draw flipped - const tempCanvas = document.createElement('canvas'); - tempCanvas.width = width; - tempCanvas.height = height; - const tempCtx = tempCanvas.getContext('2d')!; - - tempCtx.save(); - if (this.direction === 'horizontal') { - tempCtx.scale(-1, 1); - tempCtx.drawImage(canvas, -width, 0); - } else { - tempCtx.scale(1, -1); - tempCtx.drawImage(canvas, 0, -height); - } - tempCtx.restore(); - - // Update layer canvas - ctx.clearRect(0, 0, width, height); - ctx.drawImage(tempCanvas, 0, 0); - - // Trigger update - const visibleLayer = this.context.layers.layers.value.find((layer) => layer.id === this.layerId); - if (visibleLayer?.canvas === canvas) { - this.context.layers.updateLayer(this.layerId, {}); - } + transformLayerCel(this.context, this.layerId, this.frameId, (context, canvas, width, height) => { + if (this.direction === 'horizontal') { + context.scale(-1, 1); + context.drawImage(canvas, -width, 0); + } else { + context.scale(1, -1); + context.drawImage(canvas, 0, -height); + } + }); } } @@ -335,36 +349,12 @@ export class RotateLayerCommand implements Command { } private rotate(angle: number) { - const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); - if (!canvas) return; - const ctx = canvas.getContext('2d'); - if (!ctx) return; - - const width = canvas.width; - const height = canvas.height; - - // Create temp canvas - const tempCanvas = document.createElement('canvas'); - tempCanvas.width = width; - tempCanvas.height = height; - const tempCtx = tempCanvas.getContext('2d')!; - - tempCtx.save(); - tempCtx.translate(width / 2, height / 2); - tempCtx.rotate((angle * Math.PI) / 180); - tempCtx.translate(-width / 2, -height / 2); - tempCtx.drawImage(canvas, 0, 0); - tempCtx.restore(); - - // Update layer canvas - ctx.clearRect(0, 0, width, height); - ctx.drawImage(tempCanvas, 0, 0); - - // Trigger update - const visibleLayer = this.context.layers.layers.value.find((layer) => layer.id === this.layerId); - if (visibleLayer?.canvas === canvas) { - this.context.layers.updateLayer(this.layerId, {}); - } + transformLayerCel(this.context, this.layerId, this.frameId, (context, canvas, width, height) => { + context.translate(width / 2, height / 2); + context.rotate((angle * Math.PI) / 180); + context.translate(-width / 2, -height / 2); + context.drawImage(canvas, 0, 0); + }); } } diff --git a/src/commands/optimized-drawing-command.ts b/src/commands/optimized-drawing-command.ts index 023c9d4..333fb49 100644 --- a/src/commands/optimized-drawing-command.ts +++ b/src/commands/optimized-drawing-command.ts @@ -88,46 +88,29 @@ export class OptimizedDrawingCommand implements Command { } execute(): void { - const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); - const ctx = canvas?.getContext('2d'); - if (!ctx) return; - - // Create ImageData from stored array - const imageData = new ImageData( - new Uint8ClampedArray(this.newData), // Clone to create valid ImageData - this.bounds.width, - this.bounds.height - ); - ctx.putImageData(imageData, this.bounds.x, this.bounds.y); - - // Restore index buffer data if present - if (this.newIndexData) { - this.restoreIndexBufferRegion(this.newIndexData); - } - - // Mark dirty for re-render - this.context.dirtyRect.markDirty(this.bounds); + this.applyData(this.newData, this.newIndexData); } undo(): void { + this.applyData(this.previousData, this.previousIndexData); + } + + private applyData(pixelData: Uint8ClampedArray, indexData: Uint8Array | null): void { const canvas = this.context.animation.getEditableCelCanvas(this.layerId, this.frameId); const ctx = canvas?.getContext('2d'); if (!ctx) return; - // Create ImageData from stored array const imageData = new ImageData( - new Uint8ClampedArray(this.previousData), // Clone to create valid ImageData + new Uint8ClampedArray(pixelData), this.bounds.width, this.bounds.height ); ctx.putImageData(imageData, this.bounds.x, this.bounds.y); - // Restore index buffer data if present - if (this.previousIndexData) { - this.restoreIndexBufferRegion(this.previousIndexData); + if (indexData) { + this.restoreIndexBufferRegion(indexData); } - // Mark dirty for re-render this.context.dirtyRect.markDirty(this.bounds); } diff --git a/src/commands/selection/delete-fill-commands.ts b/src/commands/selection/delete-fill-commands.ts index 248f061..46c9ce0 100644 --- a/src/commands/selection/delete-fill-commands.ts +++ b/src/commands/selection/delete-fill-commands.ts @@ -1,37 +1,19 @@ import { type Command } from '../../stores/history'; -import { getActiveProjectContext, type ProjectContext } from '../../stores/project-context'; +import { getActiveProjectContext } from '../../stores/project-context'; import { type Rect } from '../../types/geometry'; import { type SelectionShape } from '../../types/selection'; import { clearCanvasSelection, fillCanvasSelection } from './pixels'; - -type SelectionCommandContext = Pick; - -function getEditableCanvas( - context: SelectionCommandContext, - layerId: string, - frameId: string -): HTMLCanvasElement { - const canvas = context.animation.getEditableCelCanvas(layerId, frameId); - if (!canvas) throw new Error('Editable cel canvas not found'); - return canvas; -} +import { SelectionRegionCommand, type EditableCelCommandContext } from './editable-cel-command'; /** * Command for deleting selected pixels (without moving). * Execute: clears selected pixels * Undo: restores cleared pixels */ -export class DeleteSelectionCommand implements Command { - id: string; +export class DeleteSelectionCommand extends SelectionRegionCommand implements Command { name = 'Delete Selection'; - timestamp: number; - private canvas: HTMLCanvasElement; - private bounds: Rect; - private shape: SelectionShape; private deletedImageData: ImageData; - private mask?: Uint8Array; - private readonly context: SelectionCommandContext; constructor( layerId: string, @@ -39,15 +21,9 @@ export class DeleteSelectionCommand implements Command { bounds: Rect, shape: SelectionShape, mask?: Uint8Array, - context: SelectionCommandContext = getActiveProjectContext() + context: EditableCelCommandContext = getActiveProjectContext() ) { - this.id = crypto.randomUUID(); - this.timestamp = Date.now(); - this.context = context; - this.canvas = getEditableCanvas(context, layerId, frameId); - this.bounds = { ...bounds }; - this.shape = shape; - this.mask = mask; + super(layerId, frameId, bounds, shape, mask, context); // Capture pixels before deleting const ctx = this.canvas.getContext('2d')!; @@ -75,18 +51,11 @@ export class DeleteSelectionCommand implements Command { * Execute: fills selected pixels with the specified color * Undo: restores original pixels */ -export class FillSelectionCommand implements Command { - id: string; +export class FillSelectionCommand extends SelectionRegionCommand implements Command { name = 'Fill Selection'; - timestamp: number; - private canvas: HTMLCanvasElement; - private bounds: Rect; - private shape: SelectionShape; private fillColor: string; private previousImageData: ImageData; - private mask?: Uint8Array; - private readonly context: SelectionCommandContext; constructor( layerId: string, @@ -95,16 +64,10 @@ export class FillSelectionCommand implements Command { shape: SelectionShape, fillColor: string, mask?: Uint8Array, - context: SelectionCommandContext = getActiveProjectContext() + context: EditableCelCommandContext = getActiveProjectContext() ) { - this.id = crypto.randomUUID(); - this.timestamp = Date.now(); - this.context = context; - this.canvas = getEditableCanvas(context, layerId, frameId); - this.bounds = { ...bounds }; - this.shape = shape; + super(layerId, frameId, bounds, shape, mask, context); this.fillColor = fillColor; - this.mask = mask; // Capture pixels before filling const ctx = this.canvas.getContext('2d')!; diff --git a/src/commands/selection/editable-cel-command.ts b/src/commands/selection/editable-cel-command.ts new file mode 100644 index 0000000..9edfc7d --- /dev/null +++ b/src/commands/selection/editable-cel-command.ts @@ -0,0 +1,43 @@ +import type { ProjectContext } from '../../stores/project-context'; +import type { Rect } from '../../types/geometry'; +import type { SelectionShape } from '../../types/selection'; + +export type EditableCelCommandContext = Pick; + +export abstract class EditableCelCommand< + Context extends EditableCelCommandContext = EditableCelCommandContext, +> { + readonly id = crypto.randomUUID(); + readonly timestamp = Date.now(); + + protected readonly canvas: HTMLCanvasElement; + protected readonly context: Context; + + protected constructor(layerId: string, frameId: string, context: Context) { + const canvas = context.animation.getEditableCelCanvas(layerId, frameId); + if (!canvas) throw new Error('Editable cel canvas not found'); + + this.canvas = canvas; + this.context = context; + } +} + +export abstract class SelectionRegionCommand extends EditableCelCommand { + protected readonly bounds: Rect; + protected readonly shape: SelectionShape; + protected readonly mask?: Uint8Array; + + protected constructor( + layerId: string, + frameId: string, + bounds: Rect, + shape: SelectionShape, + mask: Uint8Array | undefined, + context: EditableCelCommandContext + ) { + super(layerId, frameId, context); + this.bounds = { ...bounds }; + this.shape = shape; + this.mask = mask; + } +} diff --git a/src/commands/selection/float-commands.ts b/src/commands/selection/float-commands.ts index 52cdee4..89f6675 100644 --- a/src/commands/selection/float-commands.ts +++ b/src/commands/selection/float-commands.ts @@ -10,19 +10,13 @@ import { maskPixelsOutsideSelection, pasteImageDataWithAlpha, } from './pixels'; +import { + EditableCelCommand, + SelectionRegionCommand, + type EditableCelCommandContext, +} from './editable-cel-command'; -type SelectionCommandContext = Pick; -type IndexedSelectionCommandContext = Pick; - -function getEditableCanvas( - context: Pick, - layerId: string, - frameId: string -): HTMLCanvasElement { - const canvas = context.animation.getEditableCelCanvas(layerId, frameId); - if (!canvas) throw new Error('Editable cel canvas not found'); - return canvas; -} +type IndexedSelectionCommandContext = EditableCelCommandContext & Pick; export interface IndexedFloatPaletteState { colors: string[]; @@ -70,7 +64,7 @@ function getPasteShape(shape: SelectionShape): SelectionShape { } function restoreFloatingSelection( - context: SelectionCommandContext, + context: EditableCelCommandContext, imageData: ImageData, bounds: Rect, shape: SelectionShape, @@ -94,7 +88,7 @@ function restoreFloatingSelection( function restoreCommittedFloat( canvas: HTMLCanvasElement, overwrittenImageData: ImageData, - context: SelectionCommandContext, + context: EditableCelCommandContext, floatingImageData: ImageData, destinationBounds: Rect, shape: SelectionShape, @@ -111,17 +105,8 @@ function restoreCommittedFloat( * Execute: cuts pixels from layer, stores in floating state * Undo: restores pixels to layer, returns to selected state */ -export class CutToFloatCommand implements Command { - id: string; +export class CutToFloatCommand extends SelectionRegionCommand implements Command { name = 'Move Selection'; - timestamp: number; - - private canvas: HTMLCanvasElement; - private shape: SelectionShape; - - // Original selection bounds (for clearing and undo) - private originalBounds: Rect; - private originalMask?: Uint8Array; // Full captured image data (for undo - restores the full original area) private fullImageData: ImageData; @@ -130,7 +115,6 @@ export class CutToFloatCommand implements Command { private trimmedImageData: ImageData; private trimmedBounds: Rect; private trimmedMask?: Uint8Array; - private readonly context: SelectionCommandContext; constructor( layerId: string, @@ -138,15 +122,9 @@ export class CutToFloatCommand implements Command { bounds: Rect, shape: SelectionShape, mask?: Uint8Array, - context: SelectionCommandContext = getActiveProjectContext() + context: EditableCelCommandContext = getActiveProjectContext() ) { - this.id = crypto.randomUUID(); - this.timestamp = Date.now(); - this.context = context; - this.canvas = getEditableCanvas(context, layerId, frameId); - this.originalBounds = { ...bounds }; - this.shape = shape; - this.originalMask = mask; + super(layerId, frameId, bounds, shape, mask, context); // Capture the pixels we're about to cut const ctx = this.canvas.getContext('2d')!; @@ -183,7 +161,7 @@ export class CutToFloatCommand implements Command { execute() { const ctx = this.canvas.getContext('2d')!; - clearCanvasSelection(ctx, this.originalBounds, this.shape, this.originalMask); + clearCanvasSelection(ctx, this.bounds, this.shape, this.mask); // Set selection store to floating state with TRIMMED pixels this.context.selection.setFloating( @@ -198,10 +176,10 @@ export class CutToFloatCommand implements Command { const ctx = this.canvas.getContext('2d')!; // Restore the full original pixels - ctx.putImageData(this.fullImageData, this.originalBounds.x, this.originalBounds.y); + ctx.putImageData(this.fullImageData, this.bounds.x, this.bounds.y); // Return to selected state with original bounds - this.context.selection.setSelected(this.originalBounds, this.shape, this.originalMask); + this.context.selection.setSelected(this.bounds, this.shape, this.mask); } } @@ -210,18 +188,13 @@ export class CutToFloatCommand implements Command { * Execute: pastes floating pixels at destination, clears selection * Undo: removes pasted pixels, restores floating state at destination */ -export class CommitFloatCommand implements Command { - id: string; +export class CommitFloatCommand extends EditableCelCommand implements Command { name = 'Commit Selection'; - timestamp: number; - - private canvas: HTMLCanvasElement; private floatingImageData: ImageData; private destinationBounds: Rect; private overwrittenImageData: ImageData; private shape: SelectionShape; private mask?: Uint8Array; - private readonly context: SelectionCommandContext; constructor( layerId: string, @@ -231,12 +204,9 @@ export class CommitFloatCommand implements Command { offset: { x: number; y: number }, shape: SelectionShape, mask?: Uint8Array, - context: SelectionCommandContext = getActiveProjectContext() + context: EditableCelCommandContext = getActiveProjectContext() ) { - this.id = crypto.randomUUID(); - this.timestamp = Date.now(); - this.context = context; - this.canvas = getEditableCanvas(context, layerId, frameId); + super(layerId, frameId, context); this.floatingImageData = floatingImageData; this.shape = shape; this.mask = mask; @@ -289,13 +259,12 @@ export class CommitFloatCommand implements Command { * pasted index-buffer region, pastes pixels, and clears the floating selection. * Undo restores the previous palette, index-buffer region, pixels, and float. */ -export class CommitIndexedFloatCommand implements Command { - id: string; +export class CommitIndexedFloatCommand + extends EditableCelCommand + implements Command { name = 'Commit Selection'; - timestamp: number; memorySize: number; - private canvas: HTMLCanvasElement; private floatingImageData: ImageData; private destinationBounds: Rect; private overwrittenImageData: ImageData; @@ -308,7 +277,6 @@ export class CommitIndexedFloatCommand implements Command { private paletteAfterCommit: IndexedFloatPaletteState; private indexedPaste?: FloatingIndexedPaste; private mask?: Uint8Array; - private readonly context: IndexedSelectionCommandContext; constructor( floatingImageData: ImageData, @@ -318,10 +286,7 @@ export class CommitIndexedFloatCommand implements Command { options: CommitIndexedFloatCommandOptions, context: IndexedSelectionCommandContext = getActiveProjectContext() ) { - this.id = crypto.randomUUID(); - this.timestamp = Date.now(); - this.context = context; - this.canvas = getEditableCanvas(context, options.layerId, options.frameId); + super(options.layerId, options.frameId, context); this.floatingImageData = floatingImageData; this.destinationBounds = getDestinationBounds(originalBounds, offset); this.shape = shape; diff --git a/src/commands/selection/transform-commands.ts b/src/commands/selection/transform-commands.ts index 359108f..cb97aae 100644 --- a/src/commands/selection/transform-commands.ts +++ b/src/commands/selection/transform-commands.ts @@ -1,20 +1,9 @@ import { type Command } from '../../stores/history'; -import { getActiveProjectContext, type ProjectContext } from '../../stores/project-context'; +import { getActiveProjectContext } from '../../stores/project-context'; import { type Rect } from '../../types/geometry'; import { type SelectionShape } from '../../types/selection'; import { flipSelectedPixels, pasteImageDataWithAlpha } from './pixels'; - -type SelectionCommandContext = Pick; - -function getEditableCanvas( - context: SelectionCommandContext, - layerId: string, - frameId: string -): HTMLCanvasElement { - const canvas = context.animation.getEditableCelCanvas(layerId, frameId); - if (!canvas) throw new Error('Editable cel canvas not found'); - return canvas; -} +import { EditableCelCommand, type EditableCelCommandContext } from './editable-cel-command'; /** * Command for applying a transform (scale and/or rotation) to a selection. @@ -25,12 +14,8 @@ function getEditableCanvas( * selection store. The transform calculation happens before the command * is created (to support async web worker processing). */ -export class TransformSelectionCommand implements Command { - id: string; +export class TransformSelectionCommand extends EditableCelCommand implements Command { name: string; - timestamp: number; - - private canvas: HTMLCanvasElement; // Original state (for undo) private originalImageData: ImageData; @@ -49,7 +34,6 @@ export class TransformSelectionCommand implements Command { // For proper undo/redo: what was at the destination before pasting private overwrittenAtDestination: ImageData; - private readonly context: SelectionCommandContext; constructor( layerId: string, @@ -63,12 +47,9 @@ export class TransformSelectionCommand implements Command { shape: SelectionShape, originalMask?: Uint8Array, offset: { x: number; y: number } = { x: 0, y: 0 }, - context: SelectionCommandContext = getActiveProjectContext() + context: EditableCelCommandContext = getActiveProjectContext() ) { - this.id = crypto.randomUUID(); - this.timestamp = Date.now(); - this.context = context; - this.canvas = getEditableCanvas(context, layerId, frameId); + super(layerId, frameId, context); // Generate descriptive name based on what changed const hasScale = scale.x !== 1 || scale.y !== 1; @@ -153,12 +134,8 @@ export class TransformSelectionCommand implements Command { * Command for flipping selected pixels horizontally or vertically. * Works on "selected" state only - flips pixels in-place on the canvas. */ -export class FlipSelectionCommand implements Command { - id: string; +export class FlipSelectionCommand extends EditableCelCommand implements Command { name: string; - timestamp: number; - - private canvas: HTMLCanvasElement; private bounds: Rect; private shape: SelectionShape; private mask?: Uint8Array; @@ -174,12 +151,10 @@ export class FlipSelectionCommand implements Command { shape: SelectionShape, direction: 'horizontal' | 'vertical', mask?: Uint8Array, - context: SelectionCommandContext = getActiveProjectContext() + context: EditableCelCommandContext = getActiveProjectContext() ) { - this.id = crypto.randomUUID(); - this.timestamp = Date.now(); + super(layerId, frameId, context); this.name = `Flip Selection ${direction === 'horizontal' ? 'Horizontal' : 'Vertical'}`; - this.canvas = getEditableCanvas(context, layerId, frameId); this.bounds = { ...bounds }; this.shape = shape; this.direction = direction; diff --git a/src/components/app/pixel-forge-app.ts b/src/components/app/pixel-forge-app.ts index 59c3587..abd14f6 100644 --- a/src/components/app/pixel-forge-app.ts +++ b/src/components/app/pixel-forge-app.ts @@ -751,13 +751,17 @@ export class PixelForgeApp extends BaseComponent { `; } + private getDeleteProjectName(activeProject: ProjectContext["project"]) { + const project = this.deleteCurrentProjectContext?.project ?? activeProject; + return project.name.value; + } + render() { // Access panel states signal to ensure reactive updates when timeline visibility changes const isTimelineCollapsed = panelStore.panelStates.value.timeline?.collapsed ?? false; const activeProject = activeProjectContext.value.project; - const deleteProject = - this.deleteCurrentProjectContext?.project ?? activeProject; + const deleteProjectName = this.getDeleteProjectName(activeProject); return html`
@@ -870,7 +874,7 @@ export class PixelForgeApp extends BaseComponent { @pf-close=${this.dismissDeleteCurrentProject} > Delete Current Project -

Delete "${deleteProject.name.value}" from this browser?

+

Delete "${deleteProjectName}" from this browser?