test(e2e): cover live move repaint and component labels

tests/e2e/canvas/component-labels.spec.ts

@@ -0,0 +1,75 @@
+import { test, expect, type Page } from '@playwright/test'
+
+import { CanvasHelper } from '#tests/helpers/canvas'
+
+let page: Page
+let canvas: CanvasHelper
+
+test.describe.configure({ mode: 'serial' })
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage()
+  await page.goto('/?test&no-chrome&no-rulers')
+  canvas = new CanvasHelper(page)
+  await canvas.waitForInit()
+})
+
+test.afterAll(async () => {
+  await page.close()
+})
+
+test.beforeEach(async () => {
+  await canvas.clearCanvas()
+})
+
+test('component labels in component sets are hit-tested above the component bounds', async () => {
+  const componentId = await page.evaluate(() => {
+    const store = window.openPencil?.getStore?.()
+    if (!store) throw new Error('OpenPencil store not initialized')
+    const graph = store.graph
+    const pageId = graph.getPages()[0].id
+    const set = graph.createNode('COMPONENT_SET', pageId, {
+      name: 'Button',
+      x: 100,
+      y: 100,
+      width: 220,
+      height: 120,
+      fills: [],
+      strokes: []
+    })
+    const component = graph.createNode('COMPONENT', set.id, {
+      name: 'Primary',
+      x: 20,
+      y: 40,
+      width: 120,
+      height: 40,
+      cornerRadius: 8,
+      fills: [
+        { type: 'SOLID', color: { r: 0.25, g: 0.49, b: 0.95, a: 1 }, opacity: 1, visible: true }
+      ]
+    })
+    store.state.zoom = 2
+    store.state.panX = 80
+    store.state.panY = 80
+    store.clearSelection()
+    store.requestRender()
+    return component.id
+  })
+  await canvas.waitForRender()
+
+  const box = await page.getByTestId('canvas-element').boundingBox()
+  if (!box) throw new Error('No canvas')
+
+  const componentTopY = 80 + (100 + 40) * 2
+  const componentLeftX = 80 + (100 + 20) * 2
+  await page.mouse.click(box.x + componentLeftX + 24, box.y + componentTopY - 12)
+  await canvas.waitForRender()
+
+  const selected = await page.evaluate(() => {
+    const store = window.openPencil?.getStore?.()
+    if (!store) throw new Error('OpenPencil store not initialized')
+    return [...store.state.selectedIds]
+  })
+  expect(selected).toEqual([componentId])
+  canvas.assertNoErrors()
+})

tests/e2e/editor/move-live.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect, type Page } from '@playwright/test'
+
+import { CanvasHelper } from '#tests/helpers/canvas'
+
+let page: Page
+let canvas: CanvasHelper
+
+test.describe.configure({ mode: 'serial' })
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage()
+  await page.goto('/?test&no-chrome&no-rulers')
+  canvas = new CanvasHelper(page)
+  await canvas.waitForInit()
+})
+
+test.afterAll(async () => {
+  await page.close()
+})
+
+test.beforeEach(async () => {
+  await canvas.clearCanvas()
+})
+
+test('scene canvas repaints selected node during drag', async () => {
+  await page.evaluate(() => {
+    const store = window.openPencil?.getStore?.()
+    if (!store) throw new Error('OpenPencil store not initialized')
+    const id = store.createShape('RECTANGLE', 120, 120, 80, 80)
+    store.updateNode(id, {
+      fills: [{ type: 'SOLID', color: { r: 0.1, g: 0.45, b: 1, a: 1 }, opacity: 1, visible: true }]
+    })
+    store.select([id])
+  })
+  await canvas.waitForRender()
+
+  const sceneCanvas = page.getByTestId('scene-canvas-element')
+  const beforeDrag = await sceneCanvas.screenshot()
+  const box = await page.getByTestId('canvas-element').boundingBox()
+  if (!box) throw new Error('No canvas')
+
+  await page.mouse.move(box.x + 160, box.y + 160)
+  await page.mouse.down()
+  await page.mouse.move(box.x + 260, box.y + 160, { steps: 12 })
+  await canvas.waitForRender()
+  const duringDrag = await sceneCanvas.screenshot()
+  await page.mouse.up()
+
+  expect(Buffer.compare(beforeDrag, duringDrag)).not.toBe(0)
+  canvas.assertNoErrors()
+})