3a736007e5
This diff mostly adds an image annotator example, but also has a couple of drive-by changes: - Added a 'use-cases' category to the examples app for this style of mini-app - Add `editor.pageToViewport`, which is like `editor.pageToScreen` but works with viewport coordinates (better for `InFrontOfTheCanvas` stuff) - Prevent the chrome side-swipe-to-go-back thing in the examples app Some cool features of the image annotator: - The image cannot be unlocked, and cannot have shapes places behind it - I still need to work out a way of removing the context menu though - Anything you place outside the bounds of the image (and therefore outside the bounds of the export) will be greyed out - You can't change pages - unless you find the "move to page" action... need to fix that - The camera is constrained! It'll keep the image roughly centered on the screen. If you pick a very long thin image, you can only scroll vertically. If you pick a very big one, it'll default it to a reasonable size. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `sdk` — Changes the tldraw SDK - [x] `docs` — Changes to the documentation, examples, or templates. <!-- ❗ Please select a 'Type' label ❗️ --> - [x] `feature` — New feature
24 lines
756 B
TypeScript
24 lines
756 B
TypeScript
import test from '@playwright/test'
|
|
import * as fs from 'fs'
|
|
import path from 'path'
|
|
|
|
// get all routes from examples/src/examples folder
|
|
const examplesFolderList = fs.readdirSync(path.join(__dirname, '../../src/examples'))
|
|
const examplesWithoutCanvas = [
|
|
// only shows an image, not the canvas
|
|
'image-component',
|
|
// links out to a different repo
|
|
'yjs',
|
|
// starts by asking the user to select an image
|
|
'image-annotator',
|
|
]
|
|
const exampelsToTest = examplesFolderList.filter((route) => !examplesWithoutCanvas.includes(route))
|
|
|
|
test.describe('Routes', () => {
|
|
for (const example of exampelsToTest) {
|
|
test(example, async ({ page }) => {
|
|
await page.goto(`http://localhost:5420/${example}/full`)
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
}
|
|
})
|