diff --git a/src/components/image-editor/ImageCanvasOverlayModel.test.ts b/src/components/image-editor/ImageCanvasOverlayModel.test.ts index ed0e2fd48..9c875b93d 100644 --- a/src/components/image-editor/ImageCanvasOverlayModel.test.ts +++ b/src/components/image-editor/ImageCanvasOverlayModel.test.ts @@ -113,14 +113,14 @@ describe('ImageCanvasOverlayModel', () => { ).toBeNull(); }); - it('keeps selected layer toolbar inside the canvas width', () => { + it('lets selected layer toolbar move past the horizontal canvas edges', () => { expect( resolveSelectedToolbarStyle({ selectedLayer: createLayer({ x: -500, y: -100 }), viewport: { x: 0, y: 0, scale: 1 }, canvasSize: { width: 900, height: 640 }, }), - ).toEqual({ left: 132, top: 10 }); + ).toEqual({ left: -380, top: 10 }); expect( resolveSelectedToolbarStyle({ @@ -128,7 +128,7 @@ describe('ImageCanvasOverlayModel', () => { viewport: { x: 0, y: 0, scale: 1 }, canvasSize: { width: 900, height: 640 }, }), - ).toEqual({ left: 768, top: 88 }); + ).toEqual({ left: 1320, top: 88 }); }); it('fits tall quick edit sources above the reserved bottom composer area', () => { diff --git a/src/components/image-editor/ImageCanvasOverlayModel.ts b/src/components/image-editor/ImageCanvasOverlayModel.ts index 2d6fa63fb..18dfbe524 100644 --- a/src/components/image-editor/ImageCanvasOverlayModel.ts +++ b/src/components/image-editor/ImageCanvasOverlayModel.ts @@ -1,7 +1,4 @@ -import { - clamp, - TOOLBAR_HALF_WIDTH, -} from './ImageCanvasEditorModel'; +import { clamp } from './ImageCanvasEditorModel'; import type { CanvasGenerationDialogMode, CanvasGenerationDialogState, @@ -154,7 +151,6 @@ export function resolveIconComposerStyle({ export function resolveSelectedToolbarStyle({ selectedLayer, viewport, - canvasSize, }: { selectedLayer: CanvasLayer | null; viewport: CanvasViewport; @@ -164,13 +160,10 @@ export function resolveSelectedToolbarStyle({ return null; } return { - left: clamp( + left: viewport.x + - selectedLayer.x * viewport.scale + - (selectedLayer.width * viewport.scale) / 2, - TOOLBAR_HALF_WIDTH, - Math.max(TOOLBAR_HALF_WIDTH, canvasSize.width - TOOLBAR_HALF_WIDTH), - ), + selectedLayer.x * viewport.scale + + (selectedLayer.width * viewport.scale) / 2, top: Math.max(10, viewport.y + selectedLayer.y * viewport.scale - 12), }; }