e8bc114bf3
tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import { PlaywrightTestArgs, PlaywrightWorkerArgs } from '@playwright/test'
|
|
import { Editor } from '@tldraw/tldraw'
|
|
|
|
export function sleep(ms: number) {
|
|
return new Promise((resolve) => setTimeout(resolve, ms))
|
|
}
|
|
|
|
// export async function expectPathToBe(page: Page, path: string) {
|
|
// expect(await page.evaluate(() => editor.root.path.value)).toBe(path)
|
|
// }
|
|
|
|
// export async function expectToHaveNShapes(page: Page, numberOfShapes: number) {
|
|
// expect(await page.evaluate(() => editor.shapesArray.length)).toBe(numberOfShapes)
|
|
// }
|
|
|
|
// export async function expectToHaveNSelectedShapes(page: Page, numberOfSelectedShapes: number) {
|
|
// expect(await page.evaluate(() => editor.selectedIds.length)).toBe(numberOfSelectedShapes)
|
|
// }
|
|
|
|
declare const editor: Editor
|
|
|
|
export async function setup({ page }: PlaywrightTestArgs & PlaywrightWorkerArgs) {
|
|
await setupPage(page)
|
|
}
|
|
|
|
export async function setupWithShapes({ page }: PlaywrightTestArgs & PlaywrightWorkerArgs) {
|
|
await setupPage(page)
|
|
await setupPageWithShapes(page)
|
|
}
|
|
|
|
export async function cleanup({ page }: PlaywrightTestArgs) {
|
|
await cleanupPage(page)
|
|
}
|
|
|
|
export async function setupPage(page: PlaywrightTestArgs['page']) {
|
|
await page.goto('http://localhost:5420/end-to-end')
|
|
await page.waitForSelector('.tl-canvas')
|
|
await page.evaluate(() => {
|
|
editor.setAnimationSpeed(0)
|
|
})
|
|
}
|
|
|
|
export async function setupPageWithShapes(page: PlaywrightTestArgs['page']) {
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(200, 200)
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(200, 250)
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(250, 300)
|
|
await page.evaluate(() => {
|
|
editor.selectNone()
|
|
})
|
|
}
|
|
|
|
export async function cleanupPage(page: PlaywrightTestArgs['page']) {
|
|
await page.keyboard.press('Control+a')
|
|
await page.keyboard.press('Delete')
|
|
}
|
|
|
|
export async function getAllShapeLabels(page: PlaywrightTestArgs['page']) {
|
|
return await page
|
|
.locator('.tl-shapes')
|
|
.first()
|
|
.evaluate((e) => {
|
|
const labels: { index: string; label: string }[] = []
|
|
for (const child of e.children) {
|
|
const index = (child as HTMLDivElement).style.zIndex
|
|
const label = child.querySelector('.tl-text-content') as HTMLDivElement
|
|
labels.push({ index, label: label.innerText })
|
|
}
|
|
labels.sort((a, b) => (a.index > b.index ? 1 : -1))
|
|
return labels.map((l) => l.label)
|
|
})
|
|
}
|
|
|
|
export async function getAllShapeTypes(page: PlaywrightTestArgs['page']) {
|
|
return await page
|
|
.locator('.tl-shape')
|
|
.elementHandles()
|
|
.then((handles) => Promise.all(handles.map((h) => h.getAttribute('data-shape-type'))))
|
|
}
|