60cc0dcce3
This PR: - adds the export all menu items to the main menu - removes the export all menu items from the dotcom menus - removes the shape menu and reverts several changes from https://github.com/tldraw/tldraw/pull/2782. This was not properly reviewed (I thought it was a PR about hiding / showing menu items). - fixes a bug with exporting (exporting JSON was not working when the user had no selected shapes) - fixes a bug that would prevent "flip shapes" from appearing in the menu - prevents export / copy actions from running if there are no shapes on the page - allows export / copy actions to default to all shapes on the page if no shapes are selected These changes have not been released in the dotcom yet. There's will be some thrash in the APIs. # Menu philosophy In the menu, the **edit** submenu relates to undo/redo, plus the user's current selection. Menu items that relate to specific to certain shapes are hidden when not available. Menu items that relate to all shapes are disabled when not available. <img width="640" alt="image" src="https://github.com/tldraw/tldraw/assets/23072548/e467e6bb-d958-4a9a-ac19-1dada52dcfa6"> ### Change Type - [x] `major` — Bug fix ### Test - Select no shapes (arrange / flip should not be visible) - Select one geo shape (arrange / flip should not be visible) - Select two geo shapes (arrange / flip should be visible) - Select one draw shape (arrange / flip should not be visible) ### Release Notes - Revert some changes in the menu.
393 lines
11 KiB
TypeScript
393 lines
11 KiB
TypeScript
import test, { Page, expect } from '@playwright/test'
|
|
import { setupPage, setupPageWithShapes } from '../shared-e2e'
|
|
|
|
declare const __tldraw_ui_event: { name: string }
|
|
|
|
// We're just testing the events, not the actual results.
|
|
|
|
let page: Page
|
|
|
|
test.describe('Keyboard Shortcuts', () => {
|
|
test.beforeAll(async ({ browser }) => {
|
|
page = await browser.newPage()
|
|
await setupPage(page)
|
|
})
|
|
|
|
test('tools', async ({ isMobile }) => {
|
|
const geoToolKds = [
|
|
['r', 'rectangle'],
|
|
['o', 'ellipse'],
|
|
]
|
|
|
|
for (const [key, geo] of geoToolKds) {
|
|
await page.keyboard.press('v') // set back to select
|
|
await page.keyboard.press(key)
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'select-tool',
|
|
data: { id: `geo-${geo}`, source: 'kbd' },
|
|
})
|
|
}
|
|
|
|
const simpleToolKbds = [
|
|
['v', 'select'],
|
|
['h', 'hand'],
|
|
]
|
|
|
|
for (const [key, tool] of simpleToolKbds) {
|
|
await page.keyboard.press('v') // set back to select
|
|
await page.keyboard.press(key)
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'select-tool',
|
|
data: { id: tool, source: 'kbd' },
|
|
})
|
|
}
|
|
|
|
const shapeToolKbds = [
|
|
['d', 'draw'],
|
|
['x', 'draw'],
|
|
['a', 'arrow'],
|
|
['l', 'line'],
|
|
['f', 'frame'],
|
|
['n', 'note'],
|
|
['f', 'frame'],
|
|
['e', 'eraser'],
|
|
['k', 'laser'],
|
|
['t', 'text'],
|
|
]
|
|
|
|
for (const [key, tool] of shapeToolKbds) {
|
|
await page.keyboard.press('v') // set back to select
|
|
await page.keyboard.press(key)
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'select-tool',
|
|
data: { id: tool, source: 'kbd' },
|
|
})
|
|
}
|
|
|
|
// make sure that the first dropdown item is rectangle
|
|
await page.keyboard.press('r')
|
|
|
|
const positionalToolKbds = [
|
|
['1', 'select'],
|
|
['2', 'hand'],
|
|
['3', 'draw'],
|
|
['4', 'eraser'],
|
|
['5', 'arrow'],
|
|
['6', 'text'],
|
|
]
|
|
|
|
if (isMobile) {
|
|
// on mobile, the last item (first from the dropdown) is 7
|
|
positionalToolKbds.push(['7', 'geo-rectangle'])
|
|
} else {
|
|
// on desktop, the last item (first from the dropdown) is 9. 8 is the image tool which
|
|
// we skip here because it opens a browser dialog
|
|
positionalToolKbds.push(['9', 'geo-rectangle'])
|
|
}
|
|
for (const [key, tool] of positionalToolKbds) {
|
|
await page.keyboard.press('v') // set back to select
|
|
await page.keyboard.press(key)
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'select-tool',
|
|
data: { id: tool, source: 'kbd' },
|
|
})
|
|
}
|
|
})
|
|
})
|
|
|
|
test.describe('Keyboard Shortcuts', () => {
|
|
test.beforeAll(async ({ browser }) => {
|
|
page = await browser.newPage()
|
|
await setupPage(page)
|
|
|
|
// Make some shapes
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(100, 100)
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(250, 250)
|
|
await page.keyboard.press('v')
|
|
})
|
|
|
|
test('Zoom in', async () => {
|
|
await page.keyboard.press('Control+=')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'zoom-in',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
|
|
test('Zoom out', async () => {
|
|
await page.keyboard.press('Control+-')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'zoom-out',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
|
|
test('Zoom to fit', async () => {
|
|
await page.keyboard.press('Shift+1')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'zoom-to-fit',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
|
|
test('Zoom to selection', async () => {
|
|
await page.keyboard.press('Shift+2')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'zoom-to-selection',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
|
|
test('Zoom to 100', async () => {
|
|
await page.keyboard.press('Shift+0')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'reset-zoom',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
|
|
/* ---------------------- Files --------------------- */
|
|
|
|
// new-project — Cmd+N
|
|
// open — Cmd+O
|
|
// save — Cmd+S
|
|
// save-as — Cmd+Shift+S
|
|
// upload-media — Cmd+I
|
|
|
|
/* -------------------- Clipboard ------------------- */
|
|
|
|
// await page.keyboard.press('Control+c')
|
|
// expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
// name: 'copy',
|
|
// data: { source: 'kbd' },
|
|
// })
|
|
|
|
// await page.keyboard.press('Control+v')
|
|
// expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
// name: 'paste',
|
|
// data: { source: 'kbd' },
|
|
// })
|
|
|
|
// await page.keyboard.press('Control+x')
|
|
// expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
// name: 'cut',
|
|
// data: { source: 'kbd' },
|
|
// })
|
|
|
|
test('Toggle grid mode', async () => {
|
|
await page.keyboard.press("Control+'")
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'toggle-grid-mode',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
|
|
test('Toggle dark mode', async () => {
|
|
await page.keyboard.press('Control+/')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'toggle-dark-mode',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
|
|
test('Toggle tool lock', async () => {
|
|
await page.keyboard.press('q')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'toggle-tool-lock',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
})
|
|
|
|
test.describe('Actions on shapes', () => {
|
|
test.beforeAll(async ({ browser }) => {
|
|
page = await browser.newPage()
|
|
await setupPage(page)
|
|
})
|
|
|
|
/* -------------- Operations on Shapes -------------- */
|
|
|
|
test('Operations on shapes', async () => {
|
|
await setupPageWithShapes(page)
|
|
|
|
// needs shapes on the canvas
|
|
await page.keyboard.press('Control+Shift+c')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'copy-as',
|
|
data: { format: 'svg', source: 'kbd' },
|
|
})
|
|
|
|
// select-all — Cmd+A
|
|
await page.keyboard.press('Control+a')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'select-all-shapes',
|
|
data: { source: 'kbd' },
|
|
})
|
|
|
|
// flip-h — Shift+H
|
|
await page.keyboard.press('Shift+h')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'flip-shapes',
|
|
data: { operation: 'horizontal', source: 'kbd' },
|
|
})
|
|
|
|
// flip-v — Shift+V
|
|
await page.keyboard.press('Shift+v')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'flip-shapes',
|
|
data: { operation: 'vertical', source: 'kbd' },
|
|
})
|
|
|
|
// move-to-front — ]
|
|
await page.keyboard.press(']')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'reorder-shapes',
|
|
data: { operation: 'toFront', source: 'kbd' },
|
|
})
|
|
|
|
// move-forward — Alt+]
|
|
await page.keyboard.press('Alt+]')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'reorder-shapes',
|
|
data: { operation: 'forward', source: 'kbd' },
|
|
})
|
|
|
|
// move-to-back — [
|
|
await page.keyboard.press('[')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'reorder-shapes',
|
|
data: { operation: 'toBack', source: 'kbd' },
|
|
})
|
|
|
|
// move-backward — Alt+[
|
|
await page.keyboard.press('Alt+[')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'reorder-shapes',
|
|
data: { operation: 'backward', source: 'kbd' },
|
|
})
|
|
|
|
// group — Cmd+G
|
|
await page.keyboard.press('Control+g')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'group-shapes',
|
|
data: { source: 'kbd' },
|
|
})
|
|
|
|
// ungroup — Cmd+Shift+G
|
|
await page.keyboard.press('Control+Shift+g')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'ungroup-shapes',
|
|
data: { source: 'kbd' },
|
|
})
|
|
|
|
// duplicate — Cmd+D
|
|
await page.keyboard.press('Control+d')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'duplicate-shapes',
|
|
data: { source: 'kbd' },
|
|
})
|
|
|
|
// align left — Alt+A
|
|
await page.keyboard.press('Alt+a')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'align-shapes',
|
|
data: { operation: 'left', source: 'kbd' },
|
|
})
|
|
|
|
// align right — Alt+D
|
|
await page.keyboard.press('Alt+d')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'align-shapes',
|
|
data: { operation: 'right', source: 'kbd' },
|
|
})
|
|
|
|
// align top — Alt+W
|
|
await page.keyboard.press('Alt+w')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'align-shapes',
|
|
data: { operation: 'top', source: 'kbd' },
|
|
})
|
|
|
|
// align bottom — Alt+W'
|
|
await page.keyboard.press('Alt+s')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'align-shapes',
|
|
data: { operation: 'bottom', source: 'kbd' },
|
|
})
|
|
|
|
// delete — backspace
|
|
await page.keyboard.press('Control+a') // selected
|
|
await page.keyboard.press('Backspace')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'delete-shapes',
|
|
data: { source: 'kbd' },
|
|
})
|
|
|
|
// delete — ⌫
|
|
|
|
// Make some shapes and select them
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(100, 100)
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(250, 250)
|
|
await page.keyboard.press('v')
|
|
await page.keyboard.press('Control+a')
|
|
|
|
await page.keyboard.press('Delete')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'delete-shapes',
|
|
data: { source: 'kbd' },
|
|
})
|
|
|
|
/* ---------------------- Misc ---------------------- */
|
|
|
|
// toggle lock
|
|
await page.keyboard.press('Shift+l')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'toggle-lock',
|
|
})
|
|
|
|
// await page.keyboard.press('Control+i')
|
|
// expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
// name: 'open-menu',
|
|
// data: { source: 'dialog' },
|
|
// })
|
|
|
|
// await page.keyboard.press('Control+u')
|
|
// expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
// name: 'open-menu',
|
|
// data: { source: 'dialog' },
|
|
// })
|
|
})
|
|
})
|
|
|
|
test.describe('Delete bug', () => {
|
|
test.beforeEach(async ({ browser }) => {
|
|
page = await browser.newPage()
|
|
await setupPage(page)
|
|
})
|
|
|
|
test('delete bug without drag', async () => {
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(100, 100)
|
|
await page.keyboard.press('Backspace')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'delete-shapes',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
|
|
test('delete bug with drag', async () => {
|
|
await page.keyboard.press('r')
|
|
await page.mouse.down()
|
|
await page.mouse.move(100, 100)
|
|
await page.mouse.up()
|
|
await page.keyboard.press('Backspace')
|
|
expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
|
|
name: 'delete-shapes',
|
|
data: { source: 'kbd' },
|
|
})
|
|
})
|
|
})
|