bb8c5c18d9
* fix(editor): commit vector drags on pointer release - Commit vertex and Bézier handle edits immediately on release\n- Rebase active vector-edit state after graph commits\n- Use vector-specific input paths and cover Pen-created Bézier drags * test: reduce visual snapshot scope - Replace behavior screenshots with scene assertions\n- Capture renderer fixtures from bounded canvas regions\n- Remove obsolete full-viewport snapshots * fix(vector): harden edit cancellation and endpoint remapping - Restore temporary vector geometry on cancelled pointer drags\n- Commit Bézier handle releases consistently and guard stale handle state\n- Preserve valid endpoint indices when connecting vector vertices * fix(vector): cancel bend drags and satisfy formatting * fix(vector): guard stale handle references * fix(vector): guard stale overlay handle indices * fix(vector): validate overlay handle keys * refactor(vector): use typed handle selection ids * test(vector): align typed handle selection coverage
81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { expect, test, useEditorSetupWithClear } from '#tests/e2e/fixtures'
|
|
|
|
const editor = useEditorSetupWithClear('/?test&no-chrome&no-rulers')
|
|
|
|
test('stroke caps joins and miter limits', async () => {
|
|
await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const pageId = store.state.currentPageId
|
|
const color = { r: 0.23, g: 0.51, b: 0.96, a: 1 }
|
|
const caps = ['NONE', 'ROUND', 'SQUARE'] as const
|
|
for (const [index, cap] of caps.entries()) {
|
|
store.graph.createNode('VECTOR', pageId, {
|
|
name: `${cap} cap visual`,
|
|
x: 92 + index * 190,
|
|
y: 72,
|
|
width: 120,
|
|
height: 41,
|
|
vectorNetwork: {
|
|
vertices: [
|
|
{ x: 0, y: 0 },
|
|
{ x: 120, y: 40 }
|
|
],
|
|
segments: [
|
|
{ start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }
|
|
],
|
|
regions: []
|
|
},
|
|
strokeCap: cap,
|
|
strokes: [
|
|
{
|
|
color,
|
|
weight: 20,
|
|
visible: true,
|
|
opacity: 1,
|
|
align: 'CENTER',
|
|
cap
|
|
}
|
|
]
|
|
})
|
|
}
|
|
|
|
const joins = [
|
|
{ join: 'MITER' as const, limit: 1 },
|
|
{ join: 'MITER' as const, limit: 12 },
|
|
{ join: 'BEVEL' as const, limit: 4 },
|
|
{ join: 'ROUND' as const, limit: 4 }
|
|
]
|
|
for (const [index, { join, limit }] of joins.entries()) {
|
|
store.graph.createNode('STAR', pageId, {
|
|
name: `${join} ${limit} join visual`,
|
|
x: 72 + index * 150,
|
|
y: 170,
|
|
width: 110,
|
|
height: 110,
|
|
pointCount: 5,
|
|
starInnerRadius: 0.18,
|
|
strokeJoin: join,
|
|
strokeMiterLimit: limit,
|
|
strokes: [
|
|
{
|
|
color: { r: 0.96, g: 0.35, b: 0.12, a: 1 },
|
|
weight: 10,
|
|
visible: true,
|
|
opacity: 1,
|
|
align: 'CENTER',
|
|
join
|
|
}
|
|
]
|
|
})
|
|
}
|
|
|
|
store.clearSelection()
|
|
store.requestRender()
|
|
})
|
|
await editor.canvas.waitForRender()
|
|
editor.canvas.assertNoErrors()
|
|
const buffer = await editor.canvas.screenshotCanvasRegion()
|
|
expect(buffer).toMatchSnapshot('stroke-caps-joins-miter-limits.png')
|
|
})
|