diff --git a/.github/workflows/test-ui.yaml b/.github/workflows/build-and-test.yaml
similarity index 52%
rename from .github/workflows/test-ui.yaml
rename to .github/workflows/build-and-test.yaml
index bbc9470..8e2c5f8 100644
--- a/.github/workflows/test-ui.yaml
+++ b/.github/workflows/build-and-test.yaml
@@ -1,4 +1,4 @@
-name: UI Tests
+name: Build and Test
on:
pull_request:
@@ -6,6 +6,29 @@ on:
- main
jobs:
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+
+ - name: Setup pnpm
+ uses: pnpm/action-setup@v4
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "24.x"
+
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Run build
+ run: pnpm build
+
+ - name: Run tsc check
+ run: pnpm tsc --project tsconfig.json
+
test:
runs-on: ubuntu-latest
container:
@@ -27,5 +50,8 @@ jobs:
- name: Install dependencies
run: pnpm install
- - name: Run tests
+ - name: Run unit tests
+ run: pnpm test
+
+ - name: Run UI tests
run: pnpm test-storybook
diff --git a/.github/workflows/build-build.yaml b/.github/workflows/build-build.yaml
deleted file mode 100644
index 35ecb6e..0000000
--- a/.github/workflows/build-build.yaml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Run build
-
-on:
- pull_request:
- branches:
- - main
-
-jobs:
- build:
- runs-on: ubuntu-latest
-
- steps:
- - name: Checkout code
- uses: actions/checkout@v4
-
- - name: Setup pnpm
- uses: pnpm/action-setup@v4
-
- - name: Set up Node.js
- uses: actions/setup-node@v4
- with:
- node-version: "24.x"
-
- - name: Install dependencies
- run: pnpm install
-
- - name: Run build
- run: pnpm build
diff --git a/.github/workflows/build-tests.yaml b/.github/workflows/build-tests.yaml
deleted file mode 100644
index 457500b..0000000
--- a/.github/workflows/build-tests.yaml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Run unit tests
-
-on:
- pull_request:
- branches:
- - main
-
-jobs:
- build:
- runs-on: ubuntu-latest
-
- steps:
- - name: Checkout code
- uses: actions/checkout@v4
-
- - name: Setup pnpm
- uses: pnpm/action-setup@v4
-
- - name: Set up Node.js
- uses: actions/setup-node@v4
- with:
- node-version: "24.x"
-
- - name: Install dependencies
- run: pnpm install
-
- - name: Run tests
- run: pnpm test
diff --git a/.github/workflows/build-tsc.yaml b/.github/workflows/build-tsc.yaml
deleted file mode 100644
index a4779fd..0000000
--- a/.github/workflows/build-tsc.yaml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Run tsc check
-
-on:
- pull_request:
- branches:
- - main
-
-jobs:
- build:
- runs-on: ubuntu-latest
-
- steps:
- - name: Checkout code
- uses: actions/checkout@v4
-
- - name: Setup pnpm
- uses: pnpm/action-setup@v4
-
- - name: Set up Node.js
- uses: actions/setup-node@v4
- with:
- node-version: "24.x"
-
- - name: Install dependencies
- run: pnpm install
-
- - name: Run tests
- run: pnpm tsc --project tsconfig.json
diff --git a/README.md b/README.md
index 738da69..fdaf894 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,9 @@
# React Paint
+[](https://www.npmjs.com/package/@yorab/react-paint)
+[](https://github.com/YoRab/react-paint-editor/blob/main/LICENSE.txt)
+[](https://github.com/YoRab/react-paint-editor/actions/workflows/build-and-test.yaml)
+
An open-source canvas-based library for React used for image annotation or as a digital whiteboard.
## Features
diff --git a/src/canvas/utils/shapes/line.ts b/src/canvas/utils/shapes/line.ts
index 026906e..eb1f290 100644
--- a/src/canvas/utils/shapes/line.ts
+++ b/src/canvas/utils/shapes/line.ts
@@ -118,7 +118,7 @@ export const buildTriangleOnLine = (center: Point, rotation: number, lineStyle:
export const drawLine = (ctx: CanvasRenderingContext2D, shape: ShapeEntity<'line'>): void => {
drawPathWithFillAndStroke(ctx, shape.path, shape.style)
for (const arrow of shape.arrows ?? []) {
- updateCanvasContext(ctx, arrow.style)
+ updateCanvasContext(ctx, { ...arrow.style, opacity: 100 })
drawTriangle(ctx, arrow)
}
}
diff --git a/src/canvas/utils/shapes/picture.ts b/src/canvas/utils/shapes/picture.ts
index 155d063..8e9909d 100644
--- a/src/canvas/utils/shapes/picture.ts
+++ b/src/canvas/utils/shapes/picture.ts
@@ -42,7 +42,10 @@ const createPictureShape = (
height,
ratio: height === 0 ? 1 : width / height,
src: storedSrc,
- img
+ img,
+ style: {
+ opacity: 100
+ }
},
settings
)
diff --git a/src/editor/components/settings/SettingsBar.tsx b/src/editor/components/settings/SettingsBar.tsx
index 9df7479..db382b3 100644
--- a/src/editor/components/settings/SettingsBar.tsx
+++ b/src/editor/components/settings/SettingsBar.tsx
@@ -142,6 +142,7 @@ const SettingsItems = ({
disabled={disabled}
field='fontBold'
icon={boldIcon}
+ title='Gras'
valueChanged={handleShapeFontFamilyChange}
values={selectedShapeTool.settings.fontBold.values}
value={selectedShape.style?.fontBold}
@@ -154,6 +155,7 @@ const SettingsItems = ({
disabled={disabled}
field='fontItalic'
icon={italicIcon}
+ title='Italique'
valueChanged={handleShapeFontFamilyChange}
values={selectedShapeTool.settings.fontItalic.values}
value={selectedShape.style?.fontItalic}
@@ -275,6 +277,7 @@ const SettingsItems = ({
disabled={disabled}
field='fontBold'
icon={boldIcon}
+ title='Gras'
valueChanged={handleShapeFontFamilyChange}
values={activeTool.settings.fontBold.values}
value={activeTool.settings.fontBold.default}
@@ -287,6 +290,7 @@ const SettingsItems = ({
disabled={disabled}
field='fontItalic'
icon={italicIcon}
+ title='Italique'
valueChanged={handleShapeFontFamilyChange}
values={activeTool.settings.fontItalic.values}
value={activeTool.settings.fontItalic.default}
diff --git a/src/editor/components/settings/ToggleField.tsx b/src/editor/components/settings/ToggleField.tsx
index 73d79f9..4189830 100644
--- a/src/editor/components/settings/ToggleField.tsx
+++ b/src/editor/components/settings/ToggleField.tsx
@@ -8,12 +8,13 @@ type ShapeStyleSelectType = {
disabled?: boolean | undefined
field: string
icon: string
+ title?: string
values: boolean[]
value?: boolean | undefined
valueChanged: (field: string, value: boolean) => void
}
-const ToggleField = ({ setSelectedSettings, disabled = false, field, icon, values, value = false, valueChanged }: ShapeStyleSelectType) => {
+const ToggleField = ({ setSelectedSettings, disabled = false, field, icon, title, values, value = false, valueChanged }: ShapeStyleSelectType) => {
const [customKey] = useState(uniqueId('settings_'))
const handleClick = () => {
@@ -25,7 +26,7 @@ const ToggleField = ({ setSelectedSettings, disabled = false, field, icon, value
if (values.length !== 2) return null
- return
+ return
}
export default ToggleField
diff --git a/stories/tests/Canvas.stories.tsx b/stories/tests/Canvas.stories.tsx
deleted file mode 100644
index 631dc60..0000000
--- a/stories/tests/Canvas.stories.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { expect, userEvent, within } from 'storybook/test'
-import { Canvas, Editor, type StateData, useReactPaint } from '../../src/index'
-
-const getCurrentDataRef = { current: null as null | (() => StateData) }
-
-const ReactPaintWrapper = (args: Parameters[0]) => {
- const { editorProps, canvasProps, getCurrentData } = useReactPaint(args)
- getCurrentDataRef.current = getCurrentData
-
- return (
-
-
-
- )
-}
-
-const meta = {
- title: 'Tests/Canvas',
- component: ReactPaintWrapper,
- parameters: {
- layout: 'centered'
- }
-} satisfies Meta
-
-export default meta
-type Story = StoryObj
-
-export const DrawBrushShape: Story = {
- args: {},
- play: async ({ canvasElement }) => {
- const view = within(canvasElement)
-
- // 1. Sélectionner la brosse (gestion bouton direct ou sous-menu)
- let brushButton = view.queryByTestId('tool-brush')
- if (!brushButton) {
- const toggleBtn = await view.findByRole('button', { name: 'Toggle tools' })
- await userEvent.click(toggleBtn)
- brushButton = await view.findByTestId('tool-brush')
- }
- await userEvent.click(brushButton)
-
- // 2. Localiser le draw canvas
- const drawCanvas = await view.findByTestId('draw-canvas')
-
- // Coordonnées relatives à la position du canvas dans le viewport
- const rect = drawCanvas.getBoundingClientRect()
- const cx = rect.left + rect.width / 2
- const cy = rect.top + rect.height / 2
- const r = Math.min(rect.width, rect.height) * 0.2
- const STEPS = 16
-
- // 3. Mousedown sur le canvas (déclenche focusin → isInsideCanvas = true)
- const user = userEvent.setup()
- await user.pointer({
- target: drawCanvas,
- keys: '[MouseLeft>]',
- coords: { x: cx + r, y: cy }
- })
-
- // Laisser React traiter focusin et enregistrer le listener mouseup sur document
- await new Promise(res => setTimeout(res, 50))
-
- // 4. Tracé du cercle
- for (let i = 1; i <= STEPS; i++) {
- const angle = (i / STEPS) * 2 * Math.PI
- await user.pointer({
- target: drawCanvas,
- coords: { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }
- })
- }
-
- // 5. Mouseup → sauvegarde du tracé
- await user.pointer({
- target: drawCanvas,
- keys: '[/MouseLeft]',
- coords: { x: cx + r, y: cy }
- })
- await new Promise(res => setTimeout(res, 100))
-
- // 6. Comparer les données exportées
- expect(getCurrentDataRef.current).not.toBeNull()
- const data = getCurrentDataRef.current!()
-
- expect(data.shapes).toHaveLength(1)
- expect(data.shapes![0]).toMatchObject({
- type: 'brush',
- style: {
- strokeColor: 'black',
- opacity: 100,
- lineWidth: 10,
- lineDash: 0
- }
- })
- expect(data.shapes![0]).not.toHaveProperty('id')
- expect(data.shapes![0]).not.toHaveProperty('path')
- expect(data.shapes![0]).not.toHaveProperty('computed')
- expect(data.shapes![0]).not.toHaveProperty('selection')
- const brushShape = data.shapes![0] as { points: [number, number][][] }
- expect(brushShape.points).toHaveLength(1)
- expect(brushShape.points[0]!.length).toBeGreaterThan(STEPS * 0.5)
- }
-}
diff --git a/stories/tests/draw/DrawBrushShape.stories.tsx b/stories/tests/draw/DrawBrushShape.stories.tsx
new file mode 100644
index 0000000..636422f
--- /dev/null
+++ b/stories/tests/draw/DrawBrushShape.stories.tsx
@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ setRangeSetting,
+ setSelectSetting
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawBrushShape: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'brush')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setRangeSetting(view, 'Epaisseur du trait', 14)
+ await setSelectSetting(view, 'Type de traits', '1')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+ const r = Math.min(rect.width, rect.height) * 0.15
+ const STEPS = 16
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (centered at cx - OFFSET) ---
+ const cx1 = cx - OFFSET
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx1 + r, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ for (let i = 1; i <= STEPS; i++) {
+ const angle = (i / STEPS) * 2 * Math.PI
+ await user.pointer({ target: drawCanvas, coords: { x: cx1 + r * Math.cos(angle), y: cy + r * Math.sin(angle) } })
+ }
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx1 + r, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (centered at cx + OFFSET, inherits shape 1's tool settings) ---
+ const cx2 = cx + OFFSET
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx2 + r, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ for (let i = 1; i <= STEPS; i++) {
+ const angle = (i / STEPS) * 2 * Math.PI
+ await user.pointer({ target: drawCanvas, coords: { x: cx2 + r * Math.cos(angle), y: cy + r * Math.sin(angle) } })
+ }
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx2 + r, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Select shape 2 (brush does not auto-select, switch to selection tool and click on the stroke) ---
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx2 + r, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Shape 2 settings (shape 2 is now selected) ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setRangeSetting(view, 'Epaisseur du trait', 8)
+ await setSelectSetting(view, 'Type de traits', '2')
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({ type: 'brush', style: { strokeColor: 'red', opacity: 50, lineWidth: 14, lineDash: 1 } })
+ assertNoInternalFields(data.shapes![1])
+ const brush1 = data.shapes![1] as { points: [number, number][][] }
+ expect(brush1.points).toHaveLength(1)
+ expect(brush1.points[0]!.length).toBeGreaterThan(STEPS * 0.5)
+
+ expect(data.shapes![0]).toMatchObject({ type: 'brush', style: { strokeColor: 'green', opacity: 75, lineWidth: 8, lineDash: 2 } })
+ assertNoInternalFields(data.shapes![0])
+ const brush2 = data.shapes![0] as { points: [number, number][][] }
+ expect(brush2.points).toHaveLength(1)
+ expect(brush2.points[0]!.length).toBeGreaterThan(STEPS * 0.5)
+ }
+}
diff --git a/stories/tests/draw/DrawCircle.stories.tsx b/stories/tests/draw/DrawCircle.stories.tsx
new file mode 100644
index 0000000..3169ddf
--- /dev/null
+++ b/stories/tests/draw/DrawCircle.stories.tsx
@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ setRangeSetting,
+ setSelectSetting
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawCircle: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'circle')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setColorSetting(view, 'Couleur de fond', 'blue')
+ await setRangeSetting(view, 'Epaisseur du trait', 5)
+ await setSelectSetting(view, 'Type de traits', '1')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (centered at cx - OFFSET) ---
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx - OFFSET - 50, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx - OFFSET + 50, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx - OFFSET + 50, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (centered at cx + OFFSET, with shape 1's settings) ---
+ await selectTool(view, 'circle')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx + OFFSET - 50, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx + OFFSET + 50, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx + OFFSET + 50, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Shape 2 settings (shape 2 is now selected) ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setColorSetting(view, 'Couleur de fond', 'yellow')
+ await setRangeSetting(view, 'Epaisseur du trait', 10)
+ await setSelectSetting(view, 'Type de traits', '2')
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({
+ type: 'circle',
+ style: { strokeColor: 'red', fillColor: 'blue', opacity: 50, lineWidth: 5, lineDash: 1 }
+ })
+ assertNoInternalFields(data.shapes![1])
+ expect((data.shapes![1] as { radius: number }).radius).toBeGreaterThan(0)
+
+ expect(data.shapes![0]).toMatchObject({
+ type: 'circle',
+ style: { strokeColor: 'green', fillColor: 'yellow', opacity: 75, lineWidth: 10, lineDash: 2 }
+ })
+ assertNoInternalFields(data.shapes![0])
+ expect((data.shapes![0] as { radius: number }).radius).toBeGreaterThan(0)
+ }
+}
diff --git a/stories/tests/draw/DrawCurve.stories.tsx b/stories/tests/draw/DrawCurve.stories.tsx
new file mode 100644
index 0000000..4b342e3
--- /dev/null
+++ b/stories/tests/draw/DrawCurve.stories.tsx
@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ setRangeSetting,
+ setSelectSetting,
+ openContextMenuAndClick
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawCurve: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'curve')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setColorSetting(view, 'Couleur de fond', 'blue')
+ await setRangeSetting(view, 'Epaisseur du trait', 5)
+ await setSelectSetting(view, 'Type de traits', '1')
+ await setSelectSetting(view, 'Fermer les points', 'Oui')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (centered at cx - OFFSET) ---
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx - OFFSET - 60, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx - OFFSET, y: cy - 60 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx - OFFSET + 60, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (centered at cx + OFFSET, with shape 1's settings) ---
+ await selectTool(view, 'curve')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET - 60, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET, y: cy - 60 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET + 60, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+ // Exit drawing mode, then click the shape to select it
+ await user.pointer({ target: drawCanvas, keys: '[MouseRight]', coords: { x: cx + OFFSET + 60, y: cy } })
+ await new Promise(res => setTimeout(res, 200))
+
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET, y: cy - 20 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Shape 2 settings (shape 2 is now selected) ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setColorSetting(view, 'Couleur de fond', 'yellow')
+ await setRangeSetting(view, 'Epaisseur du trait', 10)
+ await setSelectSetting(view, 'Type de traits', '2')
+ await setSelectSetting(view, 'Fermer les points', 'Non')
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Add a point to shape 2 by double-clicking between P0 (cx+OFFSET-60, cy) and P1 (cx+OFFSET, cy-60) ---
+ // Midpoint: (cx + OFFSET - 30, cy - 30) — well inside the 50-unit hit radius of the segment.
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft][MouseLeft]', coords: { x: cx + OFFSET - 30, y: cy - 30 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assert shape 2 now has 4 points ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ expect((getCurrentDataRef.current!().shapes![0] as { points: unknown[] }).points.length).toBe(4)
+
+ // --- Delete the added point via context menu ---
+ // Right-click on the newly added point (index 1, same client coords as the double-click above).
+ // selectShape detects the vertex anchor → context menu shows "Delete point".
+ await openContextMenuAndClick(user, drawCanvas, view, cx + OFFSET - 30, cy - 30, 'Delete point')
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({
+ type: 'curve',
+ style: { strokeColor: 'red', fillColor: 'blue', opacity: 50, lineWidth: 5, lineDash: 1, closedPoints: 1 }
+ })
+ assertNoInternalFields(data.shapes![1])
+ expect((data.shapes![1] as { points: unknown[] }).points.length).toBeGreaterThanOrEqual(3)
+
+ expect(data.shapes![0]).toMatchObject({
+ type: 'curve',
+ style: { strokeColor: 'green', fillColor: 'yellow', opacity: 75, lineWidth: 10, lineDash: 2, closedPoints: 0 }
+ })
+ assertNoInternalFields(data.shapes![0])
+ // Point added then deleted → back to 3 points.
+ expect((data.shapes![0] as { points: unknown[] }).points.length).toBe(3)
+ }
+}
diff --git a/stories/tests/draw/DrawEllipse.stories.tsx b/stories/tests/draw/DrawEllipse.stories.tsx
new file mode 100644
index 0000000..2d24c93
--- /dev/null
+++ b/stories/tests/draw/DrawEllipse.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ setRangeSetting,
+ setSelectSetting
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawEllipse: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'ellipse')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setColorSetting(view, 'Couleur de fond', 'blue')
+ await setRangeSetting(view, 'Epaisseur du trait', 5)
+ await setSelectSetting(view, 'Type de traits', '1')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (centered at cx - OFFSET) ---
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx - OFFSET - 60, y: cy - 30 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx - OFFSET + 60, y: cy + 30 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx - OFFSET + 60, y: cy + 30 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (centered at cx + OFFSET, with shape 1's settings) ---
+ await selectTool(view, 'ellipse')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx + OFFSET - 60, y: cy - 30 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx + OFFSET + 60, y: cy + 30 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx + OFFSET + 60, y: cy + 30 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Shape 2 settings (shape 2 is now selected) ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setColorSetting(view, 'Couleur de fond', 'yellow')
+ await setRangeSetting(view, 'Epaisseur du trait', 10)
+ await setSelectSetting(view, 'Type de traits', '2')
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({
+ type: 'ellipse',
+ style: { strokeColor: 'red', fillColor: 'blue', opacity: 50, lineWidth: 5, lineDash: 1 }
+ })
+ assertNoInternalFields(data.shapes![1])
+ const el1 = data.shapes![1] as { radiusX: number; radiusY: number }
+ expect(el1.radiusX).toBeGreaterThan(0)
+ expect(el1.radiusY).toBeGreaterThan(0)
+
+ expect(data.shapes![0]).toMatchObject({
+ type: 'ellipse',
+ style: { strokeColor: 'green', fillColor: 'yellow', opacity: 75, lineWidth: 10, lineDash: 2 }
+ })
+ assertNoInternalFields(data.shapes![0])
+ const el2 = data.shapes![0] as { radiusX: number; radiusY: number }
+ expect(el2.radiusX).toBeGreaterThan(0)
+ expect(el2.radiusY).toBeGreaterThan(0)
+ }
+}
diff --git a/stories/tests/draw/DrawLine.stories.tsx b/stories/tests/draw/DrawLine.stories.tsx
new file mode 100644
index 0000000..e91de43
--- /dev/null
+++ b/stories/tests/draw/DrawLine.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ setRangeSetting,
+ setSelectSetting
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawLine: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'line')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setRangeSetting(view, 'Epaisseur du trait', 5)
+ await setSelectSetting(view, 'Type de traits', '1')
+ await setSelectSetting(view, 'Flèches', '1')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (centered at cx - OFFSET) ---
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx - OFFSET - 60, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx - OFFSET + 60, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx - OFFSET + 60, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (centered at cx + OFFSET, with shape 1's settings) ---
+ await selectTool(view, 'line')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx + OFFSET - 60, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx + OFFSET + 60, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx + OFFSET + 60, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Shape 2 settings (shape 2 is now selected) ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setRangeSetting(view, 'Epaisseur du trait', 10)
+ await setSelectSetting(view, 'Type de traits', '2')
+ await setSelectSetting(view, 'Flèches', '2')
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({ type: 'line', style: { strokeColor: 'red', opacity: 50, lineWidth: 5, lineDash: 1, lineArrow: 1 } })
+ assertNoInternalFields(data.shapes![1])
+ expect((data.shapes![1] as { points: unknown[] }).points).toHaveLength(2)
+
+ expect(data.shapes![0]).toMatchObject({ type: 'line', style: { strokeColor: 'green', opacity: 75, lineWidth: 10, lineDash: 2, lineArrow: 2 } })
+ assertNoInternalFields(data.shapes![0])
+ expect((data.shapes![0] as { points: unknown[] }).points).toHaveLength(2)
+ }
+}
diff --git a/stories/tests/draw/DrawPictureFromUpload.stories.tsx b/stories/tests/draw/DrawPictureFromUpload.stories.tsx
new file mode 100644
index 0000000..e13947b
--- /dev/null
+++ b/stories/tests/draw/DrawPictureFromUpload.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ assertNoInternalFields,
+ setRangeSetting
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// SVG content used for the file-upload test.
+const SVG_CONTENT = ""
+
+export const DrawPictureFromUpload: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+
+ const file = new File([SVG_CONTENT], 'test.svg', { type: 'image/svg+xml' })
+
+ // Open the menu
+ await userEvent.click(await view.findByTitle('Menu'))
+
+ // Upload the file via the hidden file input inside the "Upload picture" label
+ const uploadLabel = await view.findByTitle('Upload picture')
+ await userEvent.upload(uploadLabel, file)
+
+ // Wait for the image to load and the shape to be added (auto-selected)
+ await new Promise(res => setTimeout(res, 500))
+
+ // --- Change opacity on the selected picture ---
+ await setRangeSetting(view, 'Opacité', 40)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(1)
+ expect(data.shapes![0]).toMatchObject({ type: 'picture', style: { opacity: 40 } })
+ assertNoInternalFields(data.shapes![0])
+ const pic = data.shapes![0] as { width: number; height: number; src: string }
+ expect(pic.width).toBeGreaterThan(0)
+ expect(pic.height).toBeGreaterThan(0)
+ expect(pic.src).toContain('
+
+export default meta
+type Story = StoryObj
+
+// A small inline SVG used as a data-URI for the URL picture test.
+// isSvg() checks for '.svg' in the string — this URL doesn't match, so the
+// non-SVG fetch path is taken. The original URL is stored as shape.src, and
+// since it contains '"
+
+export const DrawPictureFromUrl: Story = {
+ args: { options: { withUrlPicture: true } },
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+
+ // Open the menu
+ await userEvent.click(await view.findByTitle('Menu'))
+
+ // Click "Add picture from URL" — opens the URL modal
+ await userEvent.click(await view.findByRole('button', { name: 'Add picture from URL' }))
+
+ // Fill in the URL input and submit
+ const urlInput = await view.findByRole('textbox')
+ await userEvent.clear(urlInput)
+ await userEvent.type(urlInput, SVG_DATA_URI)
+ await userEvent.click(await view.findByRole('button', { name: 'Ajouter' }))
+
+ // Wait for the image to load and the shape to be added (auto-selected)
+ await new Promise(res => setTimeout(res, 500))
+
+ // --- Change opacity on the selected picture ---
+ await setRangeSetting(view, 'Opacité', 60)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(1)
+ expect(data.shapes![0]).toMatchObject({ type: 'picture', style: { opacity: 60 } })
+ assertNoInternalFields(data.shapes![0])
+ const pic = data.shapes![0] as { width: number; height: number; src: string }
+ expect(pic.width).toBeGreaterThan(0)
+ expect(pic.height).toBeGreaterThan(0)
+ expect(pic.src).toContain('
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawPolygon: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'polygon')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setColorSetting(view, 'Couleur de fond', 'blue')
+ await setRangeSetting(view, 'Epaisseur du trait', 5)
+ await setSelectSetting(view, 'Type de traits', '1')
+ await setSelectSetting(view, 'Fermer les points', 'Oui')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (triangle centered at cx - OFFSET) ---
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx - OFFSET, y: cy - 60 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx - OFFSET + 60, y: cy + 40 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx - OFFSET - 60, y: cy + 40 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (triangle centered at cx + OFFSET, with shape 1's settings) ---
+ await selectTool(view, 'polygon')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET, y: cy - 60 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET + 60, y: cy + 40 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET - 60, y: cy + 40 } })
+ await new Promise(res => setTimeout(res, 100))
+ // Exit drawing mode, then click the shape to select it
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET, y: cy + 7 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Shape 2 settings (shape 2 is now selected) ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setColorSetting(view, 'Couleur de fond', 'yellow')
+ await setRangeSetting(view, 'Epaisseur du trait', 10)
+ await setSelectSetting(view, 'Type de traits', '2')
+ await setSelectSetting(view, 'Fermer les points', 'Non')
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Add a point to shape 2 by double-clicking between P0 (cx+OFFSET, cy-60) and P1 (cx+OFFSET+60, cy+40) ---
+ // Midpoint: (cx + OFFSET + 30, cy - 10) — well inside the 50-unit hit radius of the segment.
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft][MouseLeft]', coords: { x: cx + OFFSET + 30, y: cy - 10 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assert shape 2 now has 4 points ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ expect((getCurrentDataRef.current!().shapes![0] as { points: unknown[] }).points.length).toBe(4)
+
+ // --- Delete the added point via context menu ---
+ // Right-click on the newly added point (index 1, same client coords as the double-click above).
+ // selectShape detects the vertex anchor → context menu shows "Delete point".
+ await openContextMenuAndClick(user, drawCanvas, view, cx + OFFSET + 30, cy - 10, 'Delete point')
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({
+ type: 'polygon',
+ style: { strokeColor: 'red', fillColor: 'blue', opacity: 50, lineWidth: 5, lineDash: 1, closedPoints: 1 }
+ })
+ assertNoInternalFields(data.shapes![1])
+ expect((data.shapes![1] as { points: unknown[] }).points.length).toBeGreaterThanOrEqual(3)
+
+ expect(data.shapes![0]).toMatchObject({
+ type: 'polygon',
+ style: { strokeColor: 'green', fillColor: 'yellow', opacity: 75, lineWidth: 10, lineDash: 2, closedPoints: 0 }
+ })
+ assertNoInternalFields(data.shapes![0])
+ // Point added then deleted → back to 3 points.
+ expect((data.shapes![0] as { points: unknown[] }).points.length).toBe(3)
+ }
+}
diff --git a/stories/tests/draw/DrawRect.stories.tsx b/stories/tests/draw/DrawRect.stories.tsx
new file mode 100644
index 0000000..c7644f9
--- /dev/null
+++ b/stories/tests/draw/DrawRect.stories.tsx
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ setRangeSetting,
+ setSelectSetting
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawRect: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'rect')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setColorSetting(view, 'Couleur de fond', 'blue')
+ await setRangeSetting(view, 'Epaisseur du trait', 5)
+ await setSelectSetting(view, 'Type de traits', '1')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (centered at cx - OFFSET) ---
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx - OFFSET - 60, y: cy - 40 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx - OFFSET + 60, y: cy + 40 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx - OFFSET + 60, y: cy + 40 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (centered at cx + OFFSET, with shape 1's settings) ---
+ await selectTool(view, 'rect')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx + OFFSET - 60, y: cy - 40 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx + OFFSET + 60, y: cy + 40 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx + OFFSET + 60, y: cy + 40 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Shape 2 settings (shape 2 is now selected) ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setColorSetting(view, 'Couleur de fond', 'yellow')
+ await setRangeSetting(view, 'Epaisseur du trait', 10)
+ await setSelectSetting(view, 'Type de traits', '2')
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({ type: 'rect', style: { strokeColor: 'red', fillColor: 'blue', opacity: 50, lineWidth: 5, lineDash: 1 } })
+ assertNoInternalFields(data.shapes![1])
+ expect((data.shapes![1] as { width: number; height: number }).width).toBeGreaterThan(0)
+ expect((data.shapes![1] as { width: number; height: number }).height).toBeGreaterThan(0)
+
+ expect(data.shapes![0]).toMatchObject({
+ type: 'rect',
+ style: { strokeColor: 'green', fillColor: 'yellow', opacity: 75, lineWidth: 10, lineDash: 2 }
+ })
+ assertNoInternalFields(data.shapes![0])
+ expect((data.shapes![0] as { width: number; height: number }).width).toBeGreaterThan(0)
+ expect((data.shapes![0] as { width: number; height: number }).height).toBeGreaterThan(0)
+ }
+}
diff --git a/stories/tests/draw/DrawSquare.stories.tsx b/stories/tests/draw/DrawSquare.stories.tsx
new file mode 100644
index 0000000..2fef3bf
--- /dev/null
+++ b/stories/tests/draw/DrawSquare.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ setRangeSetting,
+ setSelectSetting
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawSquare: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'square')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setColorSetting(view, 'Couleur de fond', 'blue')
+ await setRangeSetting(view, 'Epaisseur du trait', 5)
+ await setSelectSetting(view, 'Type de traits', '1')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (centered at cx - OFFSET) ---
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx - OFFSET - 50, y: cy - 50 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx - OFFSET + 50, y: cy + 50 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx - OFFSET + 50, y: cy + 50 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (centered at cx + OFFSET, with shape 1's settings) ---
+ await selectTool(view, 'square')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: cx + OFFSET - 50, y: cy - 50 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: cx + OFFSET + 50, y: cy + 50 } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: cx + OFFSET + 50, y: cy + 50 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Shape 2 settings (shape 2 is now selected) ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setColorSetting(view, 'Couleur de fond', 'yellow')
+ await setRangeSetting(view, 'Epaisseur du trait', 10)
+ await setSelectSetting(view, 'Type de traits', '2')
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({
+ type: 'square',
+ style: { strokeColor: 'red', fillColor: 'blue', opacity: 50, lineWidth: 5, lineDash: 1 }
+ })
+ assertNoInternalFields(data.shapes![1])
+ const sq1 = data.shapes![1] as { width: number; height: number }
+ expect(sq1.width).toBeGreaterThan(0)
+ expect(sq1.width).toBe(sq1.height)
+
+ expect(data.shapes![0]).toMatchObject({
+ type: 'square',
+ style: { strokeColor: 'green', fillColor: 'yellow', opacity: 75, lineWidth: 10, lineDash: 2 }
+ })
+ assertNoInternalFields(data.shapes![0])
+ const sq2 = data.shapes![0] as { width: number; height: number }
+ expect(sq2.width).toBeGreaterThan(0)
+ expect(sq2.width).toBe(sq2.height)
+ }
+}
diff --git a/stories/tests/draw/DrawText.stories.tsx b/stories/tests/draw/DrawText.stories.tsx
new file mode 100644
index 0000000..ee57f22
--- /dev/null
+++ b/stories/tests/draw/DrawText.stories.tsx
@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ setRangeSetting,
+ setSelectSetting,
+ setToggleSetting
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Draw',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const OFFSET = 120
+
+export const DrawText: Story = {
+ args: {},
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ await selectTool(view, 'text')
+
+ // --- Shape 1 settings ---
+ await setColorSetting(view, 'Couleur du trait', 'red')
+ await setSelectSetting(view, 'Police', 'monospace')
+ await setToggleSetting(view, 'Gras')
+ await setToggleSetting(view, 'Italique')
+ await setRangeSetting(view, 'Opacité', 50)
+
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const cx = rect.left + rect.width / 2
+ const cy = rect.top + rect.height / 2
+
+ const user = userEvent.setup()
+
+ // --- Draw shape 1 (at cx - OFFSET) ---
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx - OFFSET, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx - OFFSET, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+ const textbox1 = await view.findByRole('textbox')
+ await userEvent.clear(textbox1)
+ await userEvent.type(textbox1, 'Hello')
+ await new Promise(res => setTimeout(res, 50))
+ // Click away to finalize shape 1
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx, y: cy - 150 } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Draw shape 2 (at cx + OFFSET, with shape 1's settings) ---
+ await selectTool(view, 'text')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET, y: cy } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: cx + OFFSET, y: cy } })
+ await new Promise(res => setTimeout(res, 100))
+ const textbox2 = await view.findByRole('textbox')
+ await userEvent.clear(textbox2)
+ await userEvent.type(textbox2, 'World')
+ await new Promise(res => setTimeout(res, 50))
+
+ // --- Shape 2 settings (clicking settings blurs the textbox, saving "World") ---
+ await setColorSetting(view, 'Couleur du trait', 'green')
+ await setSelectSetting(view, 'Police', 'arial')
+ await setToggleSetting(view, 'Gras') // toggle back to false
+ await setToggleSetting(view, 'Italique') // toggle back to false
+ await setRangeSetting(view, 'Opacité', 75)
+
+ // --- Assertions ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(2)
+
+ expect(data.shapes![1]).toMatchObject({
+ type: 'text',
+ style: { strokeColor: 'red', opacity: 50, fontFamily: 'monospace', fontBold: true, fontItalic: true }
+ })
+ assertNoInternalFields(data.shapes![1])
+ expect((data.shapes![1] as { value: string[] }).value).toEqual(['Hello'])
+
+ expect(data.shapes![0]).toMatchObject({
+ type: 'text',
+ style: { strokeColor: 'green', opacity: 75, fontFamily: 'arial', fontBold: false, fontItalic: false }
+ })
+ assertNoInternalFields(data.shapes![0])
+ expect((data.shapes![0] as { value: string[] }).value).toEqual(['World'])
+ }
+}
diff --git a/stories/tests/helpers.tsx b/stories/tests/helpers.tsx
new file mode 100644
index 0000000..a6d5c37
--- /dev/null
+++ b/stories/tests/helpers.tsx
@@ -0,0 +1,138 @@
+import { expect, userEvent, within } from 'storybook/test'
+import { Canvas, Editor, type StateData, useReactPaint } from '../../src/index'
+
+// ─── Component wrapper ─────────────────────────────────────────────────────────
+
+export const getCurrentDataRef = { current: null as null | (() => StateData) }
+
+export const ReactPaintWrapper = (args: Parameters[0]) => {
+ const { editorProps, canvasProps, getCurrentData } = useReactPaint(args)
+ getCurrentDataRef.current = getCurrentData
+
+ return (
+
+
+
+ )
+}
+
+// ─── Canvas coordinate converters ─────────────────────────────────────────────
+
+/** Creates toClientX / toClientY converters from a canvas DOMRect (logical size 1000×600).
+ * Accounts for CSS scaling so that logical canvas coordinates map to correct client pixels. */
+export function makeCoordConverters(rect: DOMRect) {
+ return {
+ toClientX: (canvasX: number) => rect.left + (canvasX * rect.width) / 1000,
+ toClientY: (canvasY: number) => rect.top + (canvasY * rect.height) / 600
+ }
+}
+
+// ─── Tool selection ────────────────────────────────────────────────────────────
+
+// Some tools are grouped inside ToolbarGroup panels.
+const TOOL_GROUPS: Record = {
+ line: 'lines',
+ curve: 'lines',
+ polygon: 'lines',
+ rect: 'shapes',
+ square: 'shapes',
+ circle: 'shapes',
+ ellipse: 'shapes'
+}
+
+export async function selectTool(view: ReturnType, toolId: string) {
+ let toolButton = view.queryByTestId(`tool-${toolId}`)
+
+ if (!toolButton) {
+ // Case 1: toolbar too narrow — "Toggle tools" button is shown
+ const toggleBtn = view.queryByRole('button', { name: 'Toggle tools' })
+ if (toggleBtn) {
+ await userEvent.click(toggleBtn)
+ } else {
+ // Case 2: tool is inside a group panel — open the group first
+ const groupTitle = TOOL_GROUPS[toolId]
+ if (groupTitle) {
+ const groupBtn = await view.findByRole('button', { name: groupTitle })
+ await userEvent.click(groupBtn)
+ }
+ }
+ toolButton = await view.findByTestId(`tool-${toolId}`)
+ }
+
+ await userEvent.click(toolButton)
+}
+
+// ─── Assertion helpers ─────────────────────────────────────────────────────────
+
+export function assertNoInternalFields(shape: unknown) {
+ expect(shape).not.toHaveProperty('id')
+ expect(shape).not.toHaveProperty('path')
+ expect(shape).not.toHaveProperty('computed')
+ expect(shape).not.toHaveProperty('selection')
+}
+
+// ─── Settings panel helpers ────────────────────────────────────────────────────
+
+async function openSettingPanel(view: ReturnType, title: string) {
+ await userEvent.click(await view.findByRole('button', { name: title }))
+}
+
+async function closeSettingPanel(view: ReturnType, title: string) {
+ await userEvent.click(await view.findByRole('button', { name: title }))
+}
+
+/** Selects a color in a ColorField panel. */
+export async function setColorSetting(view: ReturnType, title: string, color: string) {
+ await openSettingPanel(view, title)
+ await userEvent.click(await view.findByRole('button', { name: color }))
+ await closeSettingPanel(view, title)
+}
+
+/** Changes a range slider value via native setter (Playwright-safe). */
+export async function setRangeSetting(view: ReturnType, title: string, targetValue: number) {
+ await openSettingPanel(view, title)
+ const slider = (await view.findByRole('slider')) as HTMLInputElement
+ const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')!.set!
+ nativeSetter.call(slider, String(targetValue))
+ slider.dispatchEvent(new Event('input', { bubbles: true }))
+ await new Promise(res => setTimeout(res, 0))
+ await closeSettingPanel(view, title)
+}
+
+/** Selects an option in a SelectField panel (pass the option's accessible name). */
+export async function setSelectSetting(view: ReturnType, title: string, optionName: string) {
+ await openSettingPanel(view, title)
+ await userEvent.click(await view.findByRole('button', { name: optionName }))
+ await closeSettingPanel(view, title)
+}
+
+/** Toggles a ToggleField button (e.g. fontBold / fontItalic). */
+export async function setToggleSetting(view: ReturnType, title: string) {
+ await userEvent.click(await view.findByRole('button', { name: title }))
+}
+
+// ─── Context menu helper ────────────────────────────────────────────────────────
+
+/**
+ * Right-clicks at (clientX, clientY) on the draw canvas to open the context menu,
+ * retrying once if it did not appear (canvas may have lost focus after settings
+ * interactions), then clicks the named menu item.
+ */
+export async function openContextMenuAndClick(
+ user: ReturnType,
+ drawCanvas: HTMLElement,
+ view: ReturnType,
+ clientX: number,
+ clientY: number,
+ itemName: string
+) {
+ await user.pointer({ target: drawCanvas, keys: '[MouseRight]', coords: { x: clientX, y: clientY } })
+ await new Promise(res => setTimeout(res, 100))
+ if (!view.queryByRole('button', { name: itemName })) {
+ // isInsideCanvas may have been false (canvas lost focus during settings); retry once.
+ await user.pointer({ target: drawCanvas, keys: '[MouseRight]', coords: { x: clientX, y: clientY } })
+ await new Promise(res => setTimeout(res, 100))
+ }
+ await userEvent.click(await view.findByRole('button', { name: itemName }))
+ await new Promise(res => setTimeout(res, 100))
+}
diff --git a/stories/tests/layout/CanvasResize.stories.tsx b/stories/tests/layout/CanvasResize.stories.tsx
new file mode 100644
index 0000000..a2e821b
--- /dev/null
+++ b/stories/tests/layout/CanvasResize.stories.tsx
@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+import { ReactPaintWrapper } from './../helpers'
+
+const meta = {
+ title: 'Tests/Layout',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const CanvasResizeCanShrinkFalse: Story = {
+ args: { options: { canShrink: false } },
+ decorators: [
+ Story => (
+
+
+
+ )
+ ],
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const wrapper = canvasElement.querySelector('[data-testid="resize-wrapper"]') as HTMLElement
+
+ // =====================================================================
+ // Step 1: Assert initial canvas size (full layout)
+ // =====================================================================
+ const initialWidth = drawCanvas.getBoundingClientRect().width
+ const initialHeight = drawCanvas.getBoundingClientRect().height
+ expect(initialWidth).toBeGreaterThan(280)
+
+ // =====================================================================
+ // Step 2: Shrink wrapper to 260px
+ // =====================================================================
+ wrapper.style.width = '260px'
+ await new Promise(res => setTimeout(res, 200))
+
+ // =====================================================================
+ // Step 3: Assert canvas size has NOT shrunk (canShrink: false)
+ // =====================================================================
+ expect(drawCanvas.getBoundingClientRect().width).toBeGreaterThanOrEqual(initialWidth)
+ expect(drawCanvas.getBoundingClientRect().height).toBeGreaterThanOrEqual(initialHeight)
+
+ // =====================================================================
+ // Step 4: Restore original wrapper width
+ // =====================================================================
+ wrapper.style.width = ''
+ await new Promise(res => setTimeout(res, 200))
+ }
+}
+
+export const CanvasResizeCanGrowFalse: Story = {
+ args: { options: { canGrow: false } },
+ decorators: [
+ Story => (
+
+
+
+ )
+ ],
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const wrapper = canvasElement.querySelector('[data-testid="resize-wrapper"]') as HTMLElement
+
+ // =====================================================================
+ // Step 1: Assert initial canvas size (full layout)
+ // =====================================================================
+ const initialWidth = drawCanvas.getBoundingClientRect().width
+ const initialHeight = drawCanvas.getBoundingClientRect().height
+
+ // =====================================================================
+ // Step 2: Expand wrapper to 2000px
+ // =====================================================================
+ wrapper.style.width = '2000px'
+ await new Promise(res => setTimeout(res, 200))
+
+ // =====================================================================
+ // Step 3: Assert canvas size has NOT grown (canGrow: false)
+ // =====================================================================
+ expect(drawCanvas.getBoundingClientRect().width).toBeCloseTo(initialWidth, 0)
+ expect(drawCanvas.getBoundingClientRect().height).toBeCloseTo(initialHeight, 0)
+
+ // =====================================================================
+ // Step 4: Restore original wrapper width
+ // =====================================================================
+ wrapper.style.width = ''
+ await new Promise(res => setTimeout(res, 200))
+ }
+}
+
+export const CanvasResize: Story = {
+ args: {},
+ decorators: [
+ Story => (
+
+
+
+ )
+ ],
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const wrapper = canvasElement.querySelector('[data-testid="resize-wrapper"]') as HTMLElement
+
+ // =====================================================================
+ // Step 1: Assert initial canvas size (full layout)
+ // =====================================================================
+ const initialWidth = drawCanvas.getBoundingClientRect().width
+ const initialHeight = drawCanvas.getBoundingClientRect().height
+ expect(initialWidth).toBeGreaterThan(280)
+
+ // =====================================================================
+ // Step 2: Shrink wrapper to 260px — triggers ResizeObserver
+ // =====================================================================
+ wrapper.style.width = '260px'
+ await new Promise(res => setTimeout(res, 200))
+
+ // =====================================================================
+ // Step 3: Assert canvas size is now narrow (< 280)
+ // =====================================================================
+ expect(drawCanvas.getBoundingClientRect().width).toBeLessThan(280)
+ expect(drawCanvas.getBoundingClientRect().height).toBeLessThan(initialHeight)
+
+ // =====================================================================
+ // Step 4: Restore original wrapper width
+ // =====================================================================
+ wrapper.style.width = ''
+ await new Promise(res => setTimeout(res, 200))
+
+ // =====================================================================
+ // Step 5: Assert canvas size is restored to its initial value
+ // =====================================================================
+ expect(drawCanvas.getBoundingClientRect().width).toBeCloseTo(initialWidth, 0)
+ expect(drawCanvas.getBoundingClientRect().height).toBeCloseTo(initialHeight, 0)
+ }
+}
diff --git a/stories/tests/layout/Responsive.stories.tsx b/stories/tests/layout/Responsive.stories.tsx
new file mode 100644
index 0000000..690621b
--- /dev/null
+++ b/stories/tests/layout/Responsive.stories.tsx
@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import type { DrawableShape } from '../../../src/index'
+import { ReactPaintWrapper, makeCoordConverters, selectTool } from './../helpers'
+
+const meta = {
+ title: 'Tests/Layout',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// Text shape centered on canvas (logical size 1000×600).
+// x=400, y=250, width=200, height=40 → click center at (500, 270).
+const INITIAL_TEXT: DrawableShape = {
+ type: 'text',
+ x: 400,
+ y: 250,
+ width: 200,
+ height: 40,
+ fontSize: 40,
+ value: ['Hello'],
+ rotation: 0,
+ style: {
+ strokeColor: '#000000',
+ opacity: 100
+ }
+}
+
+export const Responsive: Story = {
+ args: {
+ shapes: [INITIAL_TEXT]
+ },
+ decorators: [
+ Story => (
+
+
+
+ )
+ ],
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const { toClientX, toClientY } = makeCoordConverters(rect)
+ const user = userEvent.setup()
+
+ // =====================================================================
+ // Step 1: Select the text shape (center at canvas (500, 270))
+ // =====================================================================
+ await selectTool(view, 'selection')
+ await user.pointer({
+ target: drawCanvas,
+ keys: '[MouseLeft]',
+ coords: { x: toClientX(500), y: toClientY(270) }
+ })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Step 2: Default viewport — toolbar
+ // selection + brush + text + undo + redo + clear = 6 [data-testid^="tool-"] buttons
+ // =====================================================================
+ const defaultToolButtons = canvasElement.querySelectorAll('[data-testid^="tool-"]')
+ expect(defaultToolButtons.length).toBe(6)
+
+ // =====================================================================
+ // Step 3: Default viewport — settings bar
+ // 5 settings (strokeColor, opacity, fontFamily, fontBold, fontItalic) + 1 delete = 6
+ // =====================================================================
+ const defaultSettingsButtons = canvasElement.querySelectorAll(
+ '.react-paint-editor-settings-shrinkable button'
+ )
+ expect(defaultSettingsButtons.length).toBe(6)
+
+ // =====================================================================
+ // Step 4: Shrink the wrapper to 260px — triggers ResizeObserver
+ // canvasSize.width drops below 280 → toolsInMenu=true, settingsInMenu=true
+ // =====================================================================
+ const wrapper = canvasElement.querySelector('[data-testid="resize-wrapper"]') as HTMLElement
+ wrapper.style.width = '260px'
+ await new Promise(res => setTimeout(res, 200))
+
+ // =====================================================================
+ // Step 5: Narrow layout — toolbar changed
+ // toolsInMenu=true: only selection has data-testid; "Toggle tools" is visible
+ // =====================================================================
+ const narrowToolButtons = canvasElement.querySelectorAll('[data-testid^="tool-"]')
+ expect(narrowToolButtons.length).toBe(1)
+
+ await view.findByRole('button', { name: 'Toggle tools' })
+
+ // =====================================================================
+ // Step 6: Open tools modal — assert 9 tool buttons (all except picture)
+ // =====================================================================
+ await userEvent.click(await view.findByRole('button', { name: 'Toggle tools' }))
+ await new Promise(res => setTimeout(res, 100))
+
+ const toolsModal = canvasElement.querySelector('.react-paint-editor-toolbar-modal')
+ expect(toolsModal).not.toBeNull()
+ expect(toolsModal!.querySelectorAll('button').length).toBe(9)
+
+ // =====================================================================
+ // Step 7: Close tools modal by clicking the mask
+ // =====================================================================
+ await userEvent.click(canvasElement.querySelector('.react-paint-editor-modal-mask') as HTMLElement)
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Step 8: Narrow layout — settings bar
+ // settingsInMenu=true: "Toggle settings" button + delete button = 2
+ // =====================================================================
+ const narrowSettingsButtons = canvasElement.querySelectorAll(
+ '.react-paint-editor-settings-shrinkable button'
+ )
+ expect(narrowSettingsButtons.length).toBe(2)
+
+ // =====================================================================
+ // Step 9: Open settings modal — assert 5 settings buttons
+ // (strokeColor, opacity, fontFamily, fontBold, fontItalic)
+ // =====================================================================
+ await userEvent.click(await view.findByRole('button', { name: 'Toggle settings' }))
+ await new Promise(res => setTimeout(res, 100))
+
+ const settingsModal = canvasElement.querySelector('.react-paint-editor-settings-modal')
+ expect(settingsModal).not.toBeNull()
+ expect(settingsModal!.querySelectorAll('button').length).toBe(5)
+
+ // =====================================================================
+ // Step 10: Close settings modal by clicking the mask
+ // =====================================================================
+ const masks = canvasElement.querySelectorAll('.react-paint-editor-modal-mask')
+ await userEvent.click(masks[masks.length - 1] as HTMLElement)
+ await new Promise(res => setTimeout(res, 100))
+ }
+}
diff --git a/stories/tests/manipulation/Commands.stories.tsx b/stories/tests/manipulation/Commands.stories.tsx
new file mode 100644
index 0000000..890bf0d
--- /dev/null
+++ b/stories/tests/manipulation/Commands.stories.tsx
@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import type { DrawableShape } from '../../../src/index'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ makeCoordConverters,
+ selectTool,
+ assertNoInternalFields,
+ setColorSetting,
+ openContextMenuAndClick
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Manipulation',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// 100×100 filled square on the left side of the canvas, center at canvas (300, 300).
+const INITIAL_SQUARE: DrawableShape = {
+ type: 'square',
+ x: 250,
+ y: 250,
+ width: 100,
+ height: 100,
+ rotation: 0,
+ style: {
+ strokeColor: '#000000',
+ fillColor: '#4a90d9',
+ opacity: 100,
+ lineWidth: 2
+ }
+}
+
+export const Commands: Story = {
+ args: {
+ shapes: [INITIAL_SQUARE]
+ },
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+
+ const { toClientX, toClientY } = makeCoordConverters(rect)
+
+ const user = userEvent.setup()
+
+ // =====================================================================
+ // Cut (CTRL+X) + Paste (CTRL+V)
+ // INITIAL_SQUARE center: canvas (300, 300).
+ // copyShapes translates by +20 → after paste: center (320, 320).
+ // =====================================================================
+
+ // --- Select the square ---
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(300), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Cut (CTRL+X): clipboard event dispatched on document ---
+ document.dispatchEvent(new ClipboardEvent('cut'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assert shape is removed ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ expect(getCurrentDataRef.current!().shapes).toHaveLength(0)
+
+ // --- Paste (CTRL+V): restored with +20 offset, new shape is selected ---
+ document.dispatchEvent(new ClipboardEvent('paste'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assert shape is pasted ---
+ expect(getCurrentDataRef.current!().shapes).toHaveLength(1)
+
+ // =====================================================================
+ // Change pasted shape color to red, then Copy (CTRL+C) + Paste (CTRL+V)
+ // After 2nd paste: center (340, 340).
+ // =====================================================================
+
+ // --- Change fill color to red (pasted shape is selected) ---
+ await setColorSetting(view, 'Couleur de fond', 'red')
+
+ // --- Copy (CTRL+C) ---
+ document.dispatchEvent(new ClipboardEvent('copy'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Paste (CTRL+V): new copy at +20 offset, selected ---
+ document.dispatchEvent(new ClipboardEvent('paste'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assert 2 shapes ---
+ expect(getCurrentDataRef.current!().shapes).toHaveLength(2)
+
+ // =====================================================================
+ // Change 2nd pasted shape color to yellow, then Duplicate via context menu
+ // =====================================================================
+
+ // --- Change fill color to yellow (2nd pasted shape is selected) ---
+ await setColorSetting(view, 'Couleur de fond', 'yellow')
+
+ // --- Right-click on the yellow shape (center at canvas (340, 340)) ---
+ await openContextMenuAndClick(user, drawCanvas, view, toClientX(340), toClientY(340), 'Duplicate')
+
+ // =====================================================================
+ // Assertions: 3 squares total
+ // =====================================================================
+
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(3)
+ for (const shape of data.shapes!) {
+ assertNoInternalFields(shape)
+ expect((shape as { type: string }).type).toBe('square')
+ }
+ }
+}
diff --git a/stories/tests/manipulation/Grid.stories.tsx b/stories/tests/manipulation/Grid.stories.tsx
new file mode 100644
index 0000000..8078cdd
--- /dev/null
+++ b/stories/tests/manipulation/Grid.stories.tsx
@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import type { DrawableShape } from '../../../src/index'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ makeCoordConverters,
+ selectTool,
+ assertNoInternalFields
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Manipulation',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// Rect at x=120, y=100, width=200, height=200 → center=(220,200).
+// Center is a multiple of all grid sizes (10, 20, 40), so snapping is predictable.
+const INITIAL_RECT_GRID: DrawableShape = {
+ type: 'rect',
+ x: 120,
+ y: 100,
+ width: 200,
+ height: 200,
+ rotation: 0,
+ style: {
+ strokeColor: '#000000',
+ fillColor: '#4a90d9',
+ opacity: 100,
+ lineWidth: 2
+ }
+}
+
+export const Grid: Story = {
+ args: {
+ shapes: [INITIAL_RECT_GRID]
+ },
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const { toClientX, toClientY } = makeCoordConverters(rect)
+ const user = userEvent.setup()
+
+ // Opens the layers panel, clicks the grid button, then closes the panel.
+ const setGrid = async (label: 'S' | 'M' | 'L') => {
+ await userEvent.click(await view.findByRole('button', { name: 'Toggle layers panel' }))
+ await new Promise(res => setTimeout(res, 50))
+ await userEvent.click(await view.findByRole('button', { name: label }))
+ await new Promise(res => setTimeout(res, 50))
+ await userEvent.click(await view.findByRole('button', { name: 'Toggle layers panel' }))
+ await new Promise(res => setTimeout(res, 50))
+ }
+
+ // Selects the rect by clicking its center (200, 200).
+ const selectRect = async () => {
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(200), y: toClientY(200) } })
+ await new Promise(res => setTimeout(res, 100))
+ }
+
+ // Drags from center (200,200) to (228,200): a +28px horizontal translation.
+ const translateRect = async () => {
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(200), y: toClientY(200) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(228), y: toClientY(200) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(228), y: toClientY(200) } })
+ await new Promise(res => setTimeout(res, 100))
+ }
+
+ // =====================================================================
+ // Test 1: No grid
+ // roundForGrid(228, 0)=228, roundForGrid(200, 0)=200 → delta=28, new x=148
+ // =====================================================================
+ await selectRect()
+ await translateRect()
+
+ let data = getCurrentDataRef.current!()
+ let shape = data.shapes![0] as { type: string; x: number; y: number }
+ assertNoInternalFields(data.shapes![0])
+ expect(shape.type).toBe('rect')
+ expect(shape.x).toBeCloseTo(148, 0)
+ expect(shape.y).toBeCloseTo(100, 0)
+
+ await userEvent.click(await view.findByTestId('tool-undo'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Test 2: Small grid (10px)
+ // roundForGrid(228, 10)=230, roundForGrid(200, 10)=200 → delta=30, new x=150
+ // =====================================================================
+ await setGrid('S')
+ await selectRect()
+ await translateRect()
+
+ data = getCurrentDataRef.current!()
+ shape = data.shapes![0] as { type: string; x: number; y: number }
+ assertNoInternalFields(data.shapes![0])
+ expect(shape.type).toBe('rect')
+ expect(shape.x).toBeCloseTo(150, 0)
+ expect(shape.y).toBeCloseTo(100, 0)
+
+ await userEvent.click(await view.findByTestId('tool-undo'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Test 3: Medium grid (20px)
+ // roundForGrid(228, 20)=220, roundForGrid(200, 20)=200 → delta=20, new x=140
+ // =====================================================================
+ await setGrid('M')
+ await selectRect()
+ await translateRect()
+
+ data = getCurrentDataRef.current!()
+ shape = data.shapes![0] as { type: string; x: number; y: number }
+ assertNoInternalFields(data.shapes![0])
+ expect(shape.type).toBe('rect')
+ expect(shape.x).toBeCloseTo(140, 0)
+ expect(shape.y).toBeCloseTo(100, 0)
+
+ await userEvent.click(await view.findByTestId('tool-undo'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Test 4: Large grid (40px)
+ // roundForGrid(228, 40)=240, roundForGrid(200, 40)=200 → delta=40, new x=160
+ // =====================================================================
+ await setGrid('L')
+ await selectRect()
+ await translateRect()
+
+ data = getCurrentDataRef.current!()
+ shape = data.shapes![0] as { type: string; x: number; y: number }
+ assertNoInternalFields(data.shapes![0])
+ expect(shape.type).toBe('rect')
+ expect(shape.x).toBeCloseTo(160, 0)
+ expect(shape.y).toBeCloseTo(100, 0)
+ }
+}
diff --git a/stories/tests/manipulation/Layers.stories.tsx b/stories/tests/manipulation/Layers.stories.tsx
new file mode 100644
index 0000000..b7de6f4
--- /dev/null
+++ b/stories/tests/manipulation/Layers.stories.tsx
@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import type { DrawableShape } from '../../../src/index'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ makeCoordConverters,
+ selectTool,
+ assertNoInternalFields
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Manipulation',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// Blue rectangle, left side of canvas. Fill required so that clicks inside select it.
+const INITIAL_RECT_LAYER: DrawableShape = {
+ type: 'rect',
+ x: 150,
+ y: 200,
+ width: 200,
+ height: 150,
+ rotation: 0,
+ style: {
+ strokeColor: '#000000',
+ fillColor: 'blue',
+ opacity: 100,
+ lineWidth: 2
+ }
+}
+
+// Yellow circle, right side of canvas. x/y is the center.
+const INITIAL_CIRCLE_LAYER: DrawableShape = {
+ type: 'circle',
+ x: 700,
+ y: 300,
+ radius: 80,
+ rotation: 0,
+ style: {
+ strokeColor: '#000000',
+ fillColor: 'yellow',
+ opacity: 100,
+ lineWidth: 2
+ }
+}
+
+export const Layers: Story = {
+ args: {
+ // shapes[0] = rect (drawn first = below), shapes[1] = circle (drawn last = on top)
+ shapes: [INITIAL_RECT_LAYER, INITIAL_CIRCLE_LAYER]
+ },
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+ const { toClientX, toClientY } = makeCoordConverters(rect)
+ const user = userEvent.setup()
+
+ // =====================================================================
+ // Step 1: Open the layers panel
+ // =====================================================================
+ await userEvent.click(await view.findByRole('button', { name: 'Toggle layers panel' }))
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Step 2: Swap layers — drag rect (index 0) onto circle (index 1)
+ // moveItemPosition(shapes, 0, 1) → [circle, rect]
+ // =====================================================================
+ const layerItems = canvasElement.querySelectorAll('.react-paint-editor-layout')
+ const rectLayerItem = layerItems[0] as HTMLElement
+ const circleLayerItem = layerItems[1] as HTMLElement
+
+ // Simulate HTML5 drag-and-drop.
+ // Passing a plain object as dataTransfer in the DragEvent constructor fails browser
+ // validation. Instead, create each DragEvent without dataTransfer, then shadow the
+ // (prototype getter) property with Object.defineProperty on the instance.
+ const dt = {
+ data: {} as Record,
+ effectAllowed: 'move' as string,
+ setData(type: string, val: string) {
+ this.data[type] = val
+ },
+ getData(type: string) {
+ return this.data[type] ?? ''
+ }
+ }
+ const dispatchDrag = (type: string, target: HTMLElement, withDt = true) => {
+ const event = new DragEvent(type, { bubbles: true, cancelable: true })
+ if (withDt) Object.defineProperty(event, 'dataTransfer', { value: dt, configurable: true })
+ target.dispatchEvent(event)
+ }
+ dispatchDrag('dragstart', rectLayerItem)
+ await new Promise(res => setTimeout(res, 50))
+ dispatchDrag('dragover', circleLayerItem)
+ dispatchDrag('drop', circleLayerItem)
+ dispatchDrag('dragend', rectLayerItem, false)
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Assert order changed: shapes[0]=circle, shapes[1]=rect
+ // =====================================================================
+ expect(getCurrentDataRef.current).not.toBeNull()
+ let data = getCurrentDataRef.current!()
+ expect(data.shapes).toHaveLength(2)
+ expect((data.shapes![0] as { type: string }).type).toBe('circle')
+ expect((data.shapes![1] as { type: string }).type).toBe('rect')
+
+ // =====================================================================
+ // Step 3: Toggle circle visibility (hide) and lock the rect
+ // Layer items have been re-rendered in new order: [0]=circle, [1]=rect.
+ // shape.visible is undefined by default → title='Show'; clicking sets visible=false.
+ // shape.locked is undefined by default → title='Unlocked'; clicking sets locked=true.
+ // =====================================================================
+ const updatedLayerItems = canvasElement.querySelectorAll('.react-paint-editor-layout')
+ const circleLayerItemUpdated = updatedLayerItems[0] as HTMLElement
+ const rectLayerItemUpdated = updatedLayerItems[1] as HTMLElement
+
+ const circleVisibilityBtn = circleLayerItemUpdated.querySelector('.react-paint-editor-layouts-visible-button') as HTMLElement
+ await userEvent.click(circleVisibilityBtn)
+ await new Promise(res => setTimeout(res, 100))
+
+ const rectLockBtn = rectLayerItemUpdated.querySelector('.react-paint-editor-layouts-locked-button') as HTMLElement
+ await userEvent.click(rectLockBtn)
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Assert visibility and lock state
+ // =====================================================================
+ data = getCurrentDataRef.current!()
+ const circleShape = data.shapes![0] as { type: string; visible?: boolean; x: number; y: number }
+ const rectShape = data.shapes![1] as { type: string; locked?: boolean; x: number; y: number }
+ assertNoInternalFields(data.shapes![0])
+ assertNoInternalFields(data.shapes![1])
+ expect(circleShape.type).toBe('circle')
+ expect(circleShape.visible).toBe(false)
+ expect(rectShape.type).toBe('rect')
+ expect(rectShape.locked).toBe(true)
+
+ // =====================================================================
+ // Step 4: Try to select and move the circle (hidden but not locked → succeeds)
+ // Circle center at canvas (700, 300). Drag 50px left to (650, 300).
+ // Hidden shapes are excluded from rendering but NOT from hit-testing.
+ // =====================================================================
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(700), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(700), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(650), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(650), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Step 5: Try to select and move the rect (visible but locked → fails)
+ // Locked shapes are excluded from hover detection — clicking has no effect.
+ // Rect center at canvas (250, 275). Attempted drag 50px right to (300, 275).
+ // =====================================================================
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(250), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 100))
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(250), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(300), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(300), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Final assertions: circle moved, rect did not
+ // =====================================================================
+ data = getCurrentDataRef.current!()
+ const finalCircle = data.shapes![0] as { type: string; x: number; y: number }
+ const finalRect = data.shapes![1] as { type: string; x: number; y: number }
+
+ expect(finalCircle.type).toBe('circle')
+ expect(finalCircle.x).toBeCloseTo(650, 0) // moved 50px left
+ expect(finalCircle.y).toBeCloseTo(300, 0)
+
+ expect(finalRect.type).toBe('rect')
+ expect(finalRect.x).toBeCloseTo(150, 0) // unchanged (locked)
+ expect(finalRect.y).toBeCloseTo(200, 0)
+ }
+}
diff --git a/stories/tests/manipulation/SelectRotateResizeTranslate.stories.tsx b/stories/tests/manipulation/SelectRotateResizeTranslate.stories.tsx
new file mode 100644
index 0000000..8d56672
--- /dev/null
+++ b/stories/tests/manipulation/SelectRotateResizeTranslate.stories.tsx
@@ -0,0 +1,471 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import type { DrawableShape } from '../../../src/index'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ makeCoordConverters,
+ selectTool,
+ assertNoInternalFields
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Manipulation',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// 100×100 filled square on the left side of the canvas, center at canvas (300, 300).
+// A non-transparent fill is required so that clicking anywhere inside the shape selects it
+// (otherwise only clicks on the stroke would register via isPointInStroke).
+const INITIAL_SQUARE: DrawableShape = {
+ type: 'square',
+ x: 250,
+ y: 250,
+ width: 100,
+ height: 100,
+ rotation: 0,
+ style: {
+ strokeColor: '#000000',
+ fillColor: '#4a90d9',
+ opacity: 100,
+ lineWidth: 2
+ }
+}
+
+// Two diagonal brush strokes forming an "X" on the right side of the canvas, spanning (650,250)→(750,350).
+// Center at canvas (700, 300). Both diagonals cross there, making it a reliable click target.
+const INITIAL_BRUSH: DrawableShape = {
+ type: 'brush',
+ points: [
+ [
+ [650, 250],
+ [670, 270],
+ [690, 290],
+ [710, 310],
+ [730, 330],
+ [750, 350]
+ ],
+ [
+ [750, 250],
+ [730, 270],
+ [710, 290],
+ [690, 310],
+ [670, 330],
+ [650, 350]
+ ]
+ ],
+ scaleX: 1,
+ scaleY: 1,
+ rotation: 0,
+ style: {
+ strokeColor: '#000000',
+ opacity: 100,
+ lineWidth: 4
+ }
+}
+
+// Diagonal line in the center of the canvas from (420,150) to (580,450).
+// Midpoint (500,300) lies between the square (left) and brush (right) — no overlap.
+// Used to test point move (anchor drag) + translation.
+const INITIAL_LINE: DrawableShape = {
+ type: 'line',
+ points: [
+ [420, 150],
+ [580, 450]
+ ],
+ rotation: 0,
+ style: {
+ strokeColor: '#e74c3c',
+ lineWidth: 3
+ }
+}
+
+// Upward-pointing triangle in the lower-left area, clear of all other shapes.
+// Fill required so that clicking inside (not just on the stroke) triggers selection.
+const INITIAL_POLYGON: DrawableShape = {
+ type: 'polygon',
+ points: [
+ [150, 420],
+ [250, 420],
+ [200, 330]
+ ],
+ rotation: 0,
+ style: {
+ strokeColor: '#27ae60',
+ fillColor: '#2ecc71',
+ opacity: 100,
+ lineWidth: 2
+ }
+}
+
+// Closed curve (3 control points) in the lower-right area, clear of all other shapes.
+// closedPoints closes the path so the fill area is well-defined for isPointInPath selection.
+const INITIAL_CURVE: DrawableShape = {
+ type: 'curve',
+ points: [
+ [750, 410],
+ [850, 440],
+ [800, 500]
+ ],
+ rotation: 0,
+ style: {
+ strokeColor: '#8e44ad',
+ fillColor: '#9b59b6',
+ opacity: 100,
+ lineWidth: 2,
+ closedPoints: 1
+ }
+}
+
+export const SelectRotateResizeTranslate: Story = {
+ args: {
+ shapes: [INITIAL_SQUARE, INITIAL_BRUSH, INITIAL_LINE, INITIAL_POLYGON, INITIAL_CURVE]
+ },
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+
+ // Helpers to convert logical canvas coordinates (1000×600) to client pixel coordinates.
+ // The canvas element may be scaled by CSS (max-width:100%), so we apply the scale factor.
+ const { toClientX, toClientY } = makeCoordConverters(rect)
+
+ const user = userEvent.setup()
+
+ // =====================================================================
+ // Square: select → rotate 45° → halve size → translate left
+ // Bounding box (250,250,100,100), center (300,300).
+ // =====================================================================
+
+ // --- Step 1: Select the square ---
+ // Filled square → click anywhere inside, e.g. its center at canvas (300, 300).
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(300), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 2: Rotate 45° (π/4 radians) ---
+ // Rotate handle center: (borders.x + w/2, borders.y - 14 - 16 + 7) = (300, 227).
+ // Drag to (352, 248): atan2(300-248, 300-352) - atan2(300-227, 300-300) = atan2(52,-52) - π/2 = π/4.
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(300), y: toClientY(227) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(352), y: toClientY(248) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(352), y: toClientY(248) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 3: Halve the size via the bottom-right resize handle ---
+ // Local handle (350, 350) visually at canvas (300, 371) after π/4 rotation:
+ // rotatePoint({origin:(300,300), point:(350,350), rotation:-π/4}) → (300, 371).
+ // Drag to (300, 300) = center → width=50, height=50.
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(300), y: toClientY(371) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(300), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(300), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 4: Translate ~30px to the left ---
+ // After resize: 50×50 at (250,250), center at (275, 275). Drag to (245, 275).
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(275), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(245), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(245), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Brush: select → rotate 45° → halve size → translate left
+ // Bounding box (650,250,100,100), center (700,300).
+ // =====================================================================
+
+ // --- Step 5: Select the brush ---
+ // Both diagonals cross at canvas (700, 300); isPointInStroke with effective lineWidth=19px hits there.
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(700), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 6: Rotate 45° ---
+ // Rotate handle center: (700, 227). Drag to (752, 248).
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(700), y: toClientY(227) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(752), y: toClientY(248) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(752), y: toClientY(248) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 7: Halve the size ---
+ // rotateShape for brush only updates the rotation field (points stay the same when center == selection center).
+ // Bounding box stays (650,250,100,100); local handle (750,350) visually at (700, 371) after π/4.
+ // Drag to (700, 300) = center → scaleX=0.5, scaleY=0.5.
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(700), y: toClientY(371) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(700), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(700), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 8: Translate ~30px to the left ---
+ // After resize: bounding box (650,250,50,50), center at (675, 275). Drag to (645, 275).
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(675), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(645), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(645), y: toClientY(275) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Line: select → move endpoint → translate
+ // From (420,150) to (580,450), midpoint (500,300) — between the two shapes.
+ // =====================================================================
+
+ // --- Step 9: Select the line ---
+ // The midpoint (500, 300) lies exactly on the stroke; isPointInStroke with effective lineWidth=18px hits it.
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(500), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 10: Move endpoint 0 from (420, 150) to (400, 130) ---
+ // Anchor 0 rect is centered at (420, 150) with size 14×14; clicking there enters resize mode for that point.
+ // resizeLine sets points[0] = roundForGrid(cursor) = (400, 130) (no grid, no rotation on this shape).
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(420), y: toClientY(150) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(400), y: toClientY(130) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(400), y: toClientY(130) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 11: Translate ~30px to the left ---
+ // After point move: points = [(400,130),(580,450)], midpoint = (490,290).
+ // (490,290) is on the stroke and clear of both anchors → triggers translate mode.
+ // Drag to (460,290): translationX = -30. Final points: [(370,130),(550,450)].
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(490), y: toClientY(290) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(460), y: toClientY(290) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(460), y: toClientY(290) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Polygon: select → move vertex → translate
+ // Triangle (150,420)-(250,420)-(200,330), lower-left area. No overlap with other shapes.
+ // =====================================================================
+
+ // --- Step 12: Select the polygon ---
+ // Filled triangle → click anywhere inside, e.g. centroid at canvas (200, 390).
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(200), y: toClientY(390) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 13: Move vertex 0 from (150, 420) to (130, 440) ---
+ // Anchor 0 rect centered at (150, 420); resizePolygon sets points[0] = roundForGrid(cursor) = (130, 440).
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(150), y: toClientY(420) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(130), y: toClientY(440) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(130), y: toClientY(440) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 14: Translate ~30px to the left ---
+ // After vertex move: points = [(130,440),(250,420),(200,330)], bounding box (130,330,120,110), center (190,385).
+ // (190,385) is inside the bounding box and clear of all anchors → triggers translate via isPartOfRect.
+ // Drag to (160,385): translationX = -30. Final points: [(100,440),(220,420),(170,330)].
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(190), y: toClientY(385) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(160), y: toClientY(385) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(160), y: toClientY(385) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Curve: select → move control point → translate
+ // Closed curve at (750,410)-(850,440)-(800,500), lower-right area. No overlap with other shapes.
+ // =====================================================================
+
+ // --- Step 15: Select the curve ---
+ // Closed filled curve → click at its centroid (800, 450); isPointInPath returns true inside the region.
+ await selectTool(view, 'selection')
+ await new Promise(res => setTimeout(res, 300))
+
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(800), y: toClientY(450) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 16: Move control point 0 from (750, 410) to (730, 390) ---
+ // resizeCurve is identical to resizePolygon: sets points[0] = roundForGrid(cursor) = (730, 390).
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(750), y: toClientY(410) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(730), y: toClientY(390) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(730), y: toClientY(390) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 17: Translate ~30px to the left ---
+ // After point move: points = [(730,390),(850,440),(800,500)], bounding box (730,390,120,110), center (790,445).
+ // (790,445) is inside the bounding box and clear of all anchors → isPartOfRect triggers translate.
+ // Drag to (760,445): translationX = -30. Final points: [(700,390),(820,440),(770,500)].
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(790), y: toClientY(445) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(760), y: toClientY(445) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(760), y: toClientY(445) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Assertions
+ // =====================================================================
+ expect(getCurrentDataRef.current).not.toBeNull()
+ const data = getCurrentDataRef.current!()
+
+ expect(data.shapes).toHaveLength(5)
+
+ // --- Square assertions (shapes[0]) ---
+ const square = data.shapes![0] as { type: string; x: number; y: number; width: number; height: number; rotation: number }
+ assertNoInternalFields(data.shapes![0])
+ expect(square.type).toBe('square')
+ expect(square.rotation).toBeCloseTo(Math.PI / 4, 1)
+ expect(square.width).toBeCloseTo(50, 0)
+ expect(square.height).toBeCloseTo(50, 0)
+ expect(square.x).toBeCloseTo(245, 0)
+
+ // --- Brush assertions (shapes[1]) ---
+ const brush = data.shapes![1] as { type: string; points: number[][][]; rotation: number; scaleX: number; scaleY: number }
+ assertNoInternalFields(data.shapes![1])
+ expect(brush.type).toBe('brush')
+ expect(brush.rotation).toBeCloseTo(Math.PI / 4, 1)
+ // Rendered bounding box mirrors getBrushBorder: scale points from minX/minY by scaleX/scaleY.
+ const pts = brush.points.flat() as number[][]
+ const rawMinX = Math.min(...pts.map(p => p[0]!))
+ const rawMinY = Math.min(...pts.map(p => p[1]!))
+ const renderedWidth = Math.max(...pts.map(p => rawMinX + (p[0]! - rawMinX) * brush.scaleX)) - rawMinX
+ const renderedHeight = Math.max(...pts.map(p => rawMinY + (p[1]! - rawMinY) * brush.scaleY)) - rawMinY
+ expect(renderedWidth).toBeCloseTo(50, 0)
+ expect(renderedHeight).toBeCloseTo(50, 0)
+ expect(rawMinX).toBeCloseTo(645, 0)
+
+ // --- Line assertions (shapes[2]) ---
+ // After step 10: points[0] moved to (400,130). After step 11: translated by -30 → [(370,130),(550,450)].
+ const line = data.shapes![2] as { type: string; points: number[][] }
+ assertNoInternalFields(data.shapes![2])
+ expect(line.type).toBe('line')
+ expect(line.points[0]![0]).toBeCloseTo(370, 0)
+ expect(line.points[0]![1]).toBeCloseTo(130, 0)
+ expect(line.points[1]![0]).toBeCloseTo(550, 0)
+ expect(line.points[1]![1]).toBeCloseTo(450, 0)
+
+ // --- Polygon assertions (shapes[3]) ---
+ // After step 13: points[0] moved to (130,440). After step 14: all points translated by -30 in x.
+ const polygon = data.shapes![3] as { type: string; points: number[][] }
+ assertNoInternalFields(data.shapes![3])
+ expect(polygon.type).toBe('polygon')
+ expect(polygon.points[0]![0]).toBeCloseTo(100, 0)
+ expect(polygon.points[0]![1]).toBeCloseTo(440, 0)
+ expect(polygon.points[1]![0]).toBeCloseTo(100, 0)
+ expect(polygon.points[1]![1]).toBeCloseTo(440, 0)
+ expect(polygon.points[2]![0]).toBeCloseTo(220, 0)
+ expect(polygon.points[2]![1]).toBeCloseTo(420, 0)
+
+ // --- Curve assertions (shapes[4]) ---
+ // After step 16: points[0] moved to (730,390). After step 17: all points translated by -30 in x.
+ const curve = data.shapes![4] as { type: string; points: number[][] }
+ assertNoInternalFields(data.shapes![4])
+ expect(curve.type).toBe('curve')
+ expect(curve.points[0]![0]).toBeCloseTo(700, 0)
+ expect(curve.points[0]![1]).toBeCloseTo(390, 0)
+ expect(curve.points[1]![0]).toBeCloseTo(760, 0)
+ expect(curve.points[1]![1]).toBeCloseTo(445, 0)
+ expect(curve.points[2]![0]).toBeCloseTo(820, 0)
+ expect(curve.points[2]![1]).toBeCloseTo(440, 0)
+
+ // =====================================================================
+ // Group: selection frame → resize ÷2 → rotate ~45° → translate (+100,+50)
+ // =====================================================================
+
+ // --- Step 18: Drag selection frame from (10,10) to (990,590) to select all 5 shapes ---
+ // Starting in the empty top-left corner ensures no shape is accidentally clicked.
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(10), y: toClientY(10) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(990), y: toClientY(590) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(990), y: toClientY(590) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 19: Halve the group — drag bottom-right anchor (820,500) to group center (460,315) ---
+ // Group bbox: (100,130,720,370), center (460,315). widthMultiplier = heightMultiplier = 0.5.
+ // keepRatio=true (group contains a square) but the drag is proportional so no distortion.
+ // New group bbox: (100,130,360,185), new center (280,222.5).
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(820), y: toClientY(500) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(460), y: toClientY(315) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(460), y: toClientY(315) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 20: Rotate group ~45° ---
+ // After resize: bbox (100,130,360,185), center (280,222.5).
+ // Rotate handle: top-center (280,130) minus (ANCHOR_SIZE/2 + ROTATED_ANCHOR_POSITION) = 23 → canvas (280,107).
+ // Drag to (362,141): atan2(222.5-141, 280-362) - atan2(222.5-107, 280-280) ≈ π/4.
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(280), y: toClientY(107) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(362), y: toClientY(141) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(362), y: toClientY(141) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Step 21: Translate group (+100, +50) ---
+ // After rotate, group center is near (280,222). Drag to (380,272).
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft>]', coords: { x: toClientX(280), y: toClientY(222) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, coords: { x: toClientX(380), y: toClientY(272) } })
+ await new Promise(res => setTimeout(res, 50))
+ await user.pointer({ target: drawCanvas, keys: '[/MouseLeft]', coords: { x: toClientX(380), y: toClientY(272) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // =====================================================================
+ // Group assertions
+ // =====================================================================
+ const groupData = getCurrentDataRef.current!()
+ expect(groupData.shapes).toHaveLength(5)
+
+ // Square: halved to 25×25, rotation stepped to ~π/2, translated by (+100,+50).
+ const squareGroup = groupData.shapes![0] as { type: string; x: number; y: number; width: number; height: number; rotation: number }
+ assertNoInternalFields(groupData.shapes![0])
+ expect(squareGroup.type).toBe('square')
+ expect(squareGroup.width).toBeCloseTo(25, 0)
+ expect(squareGroup.height).toBeCloseTo(25, 0)
+ expect(squareGroup.rotation).toBeCloseTo(Math.PI / 2, 1)
+ expect(squareGroup.x).toBeCloseTo(318, 0)
+ expect(squareGroup.y).toBeCloseTo(175, 0)
+
+ // Line: both endpoints scaled ×0.5 relative to group center, rotated ~π/4, then translated (+100,+50).
+ // Pre-group: [(370,130),(550,450)]. After resize→rotate→translate: [(414,175),(364,352)].
+ const lineGroup = groupData.shapes![2] as { type: string; points: number[][] }
+ assertNoInternalFields(groupData.shapes![2])
+ expect(lineGroup.type).toBe('line')
+ expect(lineGroup.points[0]![0]).toBeCloseTo(414, 0)
+ expect(lineGroup.points[0]![1]).toBeCloseTo(175, 0)
+ expect(lineGroup.points[1]![0]).toBeCloseTo(364, 0)
+ expect(lineGroup.points[1]![1]).toBeCloseTo(352, 0)
+
+ // Polygon: first vertex after all group operations.
+ // Pre-group: points[0]=(100,440). After resize→rotate→translate: ≈(209,189).
+ const polygonGroup = groupData.shapes![3] as { type: string; points: number[][] }
+ assertNoInternalFields(groupData.shapes![3])
+ expect(polygonGroup.type).toBe('polygon')
+ expect(polygonGroup.points[0]![0]).toBeCloseTo(209, 0)
+ expect(polygonGroup.points[0]![1]).toBeCloseTo(189, 0)
+
+ // Curve: first control point after all group operations.
+ // Pre-group: points[0]=(700,390). After resize→rotate→translate: ≈(438,384).
+ const curveGroup = groupData.shapes![4] as { type: string; points: number[][] }
+ assertNoInternalFields(groupData.shapes![4])
+ expect(curveGroup.type).toBe('curve')
+ expect(curveGroup.points[0]![0]).toBeCloseTo(438, 0)
+ expect(curveGroup.points[0]![1]).toBeCloseTo(384, 0)
+ }
+}
diff --git a/stories/tests/manipulation/StateManagement.stories.tsx b/stories/tests/manipulation/StateManagement.stories.tsx
new file mode 100644
index 0000000..b512f63
--- /dev/null
+++ b/stories/tests/manipulation/StateManagement.stories.tsx
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import type { DrawableShape } from '../../../src/index'
+import {
+ ReactPaintWrapper,
+ getCurrentDataRef,
+ makeCoordConverters,
+ selectTool,
+ assertNoInternalFields
+} from './../helpers'
+
+const meta = {
+ title: 'Tests/Manipulation',
+ component: ReactPaintWrapper,
+ parameters: {
+ layout: 'centered'
+ }
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// 100×100 filled square on the left side of the canvas, center at canvas (300, 300).
+const INITIAL_SQUARE: DrawableShape = {
+ type: 'square',
+ x: 250,
+ y: 250,
+ width: 100,
+ height: 100,
+ rotation: 0,
+ style: {
+ strokeColor: '#000000',
+ fillColor: '#4a90d9',
+ opacity: 100,
+ lineWidth: 2
+ }
+}
+
+export const StateManagement: Story = {
+ args: {
+ shapes: [INITIAL_SQUARE]
+ },
+ play: async ({ canvasElement }) => {
+ const view = within(canvasElement)
+ const drawCanvas = await view.findByTestId('draw-canvas')
+ const rect = drawCanvas.getBoundingClientRect()
+
+ const { toClientX, toClientY } = makeCoordConverters(rect)
+
+ const user = userEvent.setup()
+
+ // --- Select the square (filled, center at canvas (300, 300)) ---
+ await selectTool(view, 'selection')
+ await user.pointer({ target: drawCanvas, keys: '[MouseLeft]', coords: { x: toClientX(300), y: toClientY(300) } })
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Delete the shape with the Delete key ---
+ // The keyboard listener is registered on document when isInsideComponent is true.
+ await userEvent.keyboard('{Delete}')
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assert shape is deleted ---
+ expect(getCurrentDataRef.current).not.toBeNull()
+ expect(getCurrentDataRef.current!().shapes).toHaveLength(0)
+
+ // --- Undo ---
+ await userEvent.click(await view.findByTestId('tool-undo'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assert shape is restored ---
+ expect(getCurrentDataRef.current!().shapes).toHaveLength(1)
+ const restored = getCurrentDataRef.current!().shapes![0]
+ assertNoInternalFields(restored)
+ expect((restored as { type: string }).type).toBe('square')
+
+ // --- Redo ---
+ await userEvent.click(await view.findByTestId('tool-redo'))
+ await new Promise(res => setTimeout(res, 100))
+
+ // --- Assert shape is deleted again ---
+ expect(getCurrentDataRef.current!().shapes).toHaveLength(0)
+ }
+}