tldraw 3.16.0-next.282b7be564ae → 3.16.0-next.6611943ca24a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +71 -0
- package/dist-cjs/index.js +5 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
- package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js +25 -1
- package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
- package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js +12 -0
- package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map +2 -2
- package/dist-cjs/lib/ui/assetUrls.js +13 -10
- package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +1 -1
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +1 -1
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +2 -1
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js +16 -2
- package/dist-cjs/lib/ui/context/actions.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-esm/index.d.mts +71 -0
- package/dist-esm/index.mjs +5 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map +2 -2
- package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs +26 -1
- package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
- package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
- package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
- package/dist-esm/lib/ui/assetUrls.mjs +13 -10
- package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +1 -1
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
- package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +1 -1
- package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +2 -1
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs +16 -2
- package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/package.json +11 -34
- package/src/index.ts +3 -0
- package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
- package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
- package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
- package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
- package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
- package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
- package/src/lib/shapes/shared/freehand/svg.ts +2 -0
- package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
- package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
- package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
- package/src/lib/ui/assetUrls.ts +13 -10
- package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +1 -1
- package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +1 -1
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +3 -2
- package/src/lib/ui/context/actions.tsx +16 -2
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +3 -0
- package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
- package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
- package/src/test/A11y.test.tsx +3 -2
- package/src/test/ClickManager.test.ts +7 -6
- package/src/test/Editor.test.tsx +20 -19
- package/src/test/EraserTool.test.ts +184 -13
- package/src/test/HandTool.test.ts +10 -9
- package/src/test/HighlightShape.test.ts +2 -1
- package/src/test/SelectTool.test.ts +3 -2
- package/src/test/TLUserPreferences.test.ts +4 -3
- package/src/test/TestEditor.ts +13 -15
- package/src/test/TldrawEditor.test.tsx +11 -10
- package/src/test/ZoomTool.test.ts +7 -6
- package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
- package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
- package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
- package/src/test/arrows-megabus.test.tsx +5 -4
- package/src/test/bindings.test.tsx +24 -37
- package/src/test/bookmark-shapes.test.ts +1 -8
- package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
- package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
- package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
- package/src/test/commands/alignShapes.test.tsx +25 -24
- package/src/test/commands/animationSpeed.test.ts +2 -1
- package/src/test/commands/centerOnPoint.test.ts +3 -2
- package/src/test/commands/clipboard.test.ts +3 -2
- package/src/test/commands/createShapes.test.ts +2 -1
- package/src/test/commands/deleteShapes.test.ts +2 -1
- package/src/test/commands/distributeShapes.test.tsx +11 -10
- package/src/test/commands/getSvgString.test.ts +2 -1
- package/src/test/commands/packShapes.test.ts +5 -4
- package/src/test/commands/resizeShape.test.ts +2 -1
- package/src/test/commands/rotateShapes.test.ts +7 -6
- package/src/test/commands/setCamera.test.ts +4 -3
- package/src/test/commands/setCurrentPage.test.ts +3 -2
- package/src/test/commands/stackShapes.test.ts +11 -10
- package/src/test/commands/stretch.test.tsx +13 -12
- package/src/test/createDeepLink.test.tsx +2 -1
- package/src/test/cropping.test.ts +3 -2
- package/src/test/drawing.test.ts +2 -1
- package/src/test/flipShapes.test.ts +4 -3
- package/src/test/frames.test.ts +25 -24
- package/src/test/getCulledShapes.test.tsx +3 -2
- package/src/test/groups.test.tsx +1 -1
- package/src/test/handleDeepLink.test.tsx +2 -1
- package/src/test/maxShapes.test.ts +3 -2
- package/src/test/modifiers.test.ts +5 -4
- package/src/test/navigation.test.ts +12 -11
- package/src/test/panning.test.ts +2 -1
- package/src/test/perf/perf.test.ts +2 -1
- package/src/test/registerDeepLinkListener.test.tsx +10 -9
- package/src/test/resizing.test.ts +39 -38
- package/src/test/select.test.tsx +4 -3
- package/src/test/selection-omnibus.test.ts +11 -10
- package/src/test/shapeutils.test.ts +4 -3
- package/src/test/translating.test.ts +9 -8
- package/tldraw.css +3 -0
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createBindingId, createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { getArrowBindings } from '../../lib/shapes/arrow/shared'
|
|
3
4
|
import { TestEditor } from '../TestEditor'
|
|
4
5
|
|
|
@@ -12,7 +13,7 @@ const ids = {
|
|
|
12
13
|
arrow1: createShapeId('arrow1'),
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
vi.useFakeTimers()
|
|
16
17
|
|
|
17
18
|
beforeEach(() => {
|
|
18
19
|
editor = new TestEditor()
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { PI, TLShapeId, createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../TestEditor'
|
|
3
4
|
import { TL } from '../test-jsx'
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
vi.useFakeTimers()
|
|
6
7
|
|
|
7
8
|
let editor: TestEditor
|
|
8
9
|
|
|
@@ -46,10 +47,10 @@ describe('distributeShapes command', () => {
|
|
|
46
47
|
describe('when less than three shapes are selected', () => {
|
|
47
48
|
it('does nothing', () => {
|
|
48
49
|
editor.setSelectedShapes([ids.boxA, ids.boxB])
|
|
49
|
-
const fn =
|
|
50
|
+
const fn = vi.fn()
|
|
50
51
|
editor.store.listen(fn)
|
|
51
52
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
52
|
-
|
|
53
|
+
vi.advanceTimersByTime(1000)
|
|
53
54
|
expect(fn).not.toHaveBeenCalled()
|
|
54
55
|
})
|
|
55
56
|
})
|
|
@@ -58,7 +59,7 @@ describe('distributeShapes command', () => {
|
|
|
58
59
|
it('distributeShapes horizontally', () => {
|
|
59
60
|
editor.selectAll()
|
|
60
61
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
61
|
-
|
|
62
|
+
vi.advanceTimersByTime(1000)
|
|
62
63
|
editor.expectShapeToMatch(
|
|
63
64
|
{ id: ids.boxA, x: 0 },
|
|
64
65
|
{ id: ids.boxB, x: 200 },
|
|
@@ -70,7 +71,7 @@ describe('distributeShapes command', () => {
|
|
|
70
71
|
editor.updateShapes([{ id: ids.boxC, type: 'geo', x: 25 }])
|
|
71
72
|
editor.selectAll()
|
|
72
73
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
73
|
-
|
|
74
|
+
vi.advanceTimersByTime(1000)
|
|
74
75
|
editor.expectShapeToMatch(
|
|
75
76
|
{ id: ids.boxA, x: 0 },
|
|
76
77
|
{ id: ids.boxB, x: 100 },
|
|
@@ -81,7 +82,7 @@ describe('distributeShapes command', () => {
|
|
|
81
82
|
it('distributeShapes vertically', () => {
|
|
82
83
|
editor.selectAll()
|
|
83
84
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
|
|
84
|
-
|
|
85
|
+
vi.advanceTimersByTime(1000)
|
|
85
86
|
editor.expectShapeToMatch(
|
|
86
87
|
{ id: ids.boxA, y: 0 },
|
|
87
88
|
{ id: ids.boxB, y: 200 },
|
|
@@ -93,7 +94,7 @@ describe('distributeShapes command', () => {
|
|
|
93
94
|
editor.updateShapes([{ id: ids.boxC, type: 'geo', y: 25 }])
|
|
94
95
|
editor.selectAll()
|
|
95
96
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
|
|
96
|
-
|
|
97
|
+
vi.advanceTimersByTime(1000)
|
|
97
98
|
editor.expectShapeToMatch(
|
|
98
99
|
{ id: ids.boxA, y: 0 },
|
|
99
100
|
{ id: ids.boxB, y: 100 },
|
|
@@ -135,7 +136,7 @@ describe('distributeShapes command', () => {
|
|
|
135
136
|
editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
|
|
136
137
|
|
|
137
138
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
138
|
-
|
|
139
|
+
vi.advanceTimersByTime(1000)
|
|
139
140
|
|
|
140
141
|
editor.expectShapeToMatch(
|
|
141
142
|
{ id: ids.boxB, x: 100 },
|
|
@@ -177,7 +178,7 @@ describe('distributeShapes command', () => {
|
|
|
177
178
|
editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
|
|
178
179
|
|
|
179
180
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
180
|
-
|
|
181
|
+
vi.advanceTimersByTime(1000)
|
|
181
182
|
|
|
182
183
|
editor.expectShapeToMatch(
|
|
183
184
|
{ id: ids.boxB, x: 100 },
|
|
@@ -222,7 +223,7 @@ describe('distributeShapes command', () => {
|
|
|
222
223
|
editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
|
|
223
224
|
|
|
224
225
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
225
|
-
|
|
226
|
+
vi.advanceTimersByTime(1000)
|
|
226
227
|
|
|
227
228
|
editor.expectShapeToMatch(
|
|
228
229
|
{ id: ids.boxB, x: 100 },
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { DefaultDashStyle, TLGeoShape, createShapeId, toRichText } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../TestEditor'
|
|
3
4
|
|
|
4
5
|
let editor: TestEditor
|
|
@@ -14,7 +15,7 @@ function parseSvg({ svg }: { svg: string } = { svg: '' }) {
|
|
|
14
15
|
return parser.parseFromString(svg, 'image/svg+xml').firstElementChild as SVGSVGElement
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
vi.useRealTimers()
|
|
18
19
|
|
|
19
20
|
beforeEach(() => {
|
|
20
21
|
editor = new TestEditor()
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../TestEditor'
|
|
3
4
|
|
|
4
5
|
let editor: TestEditor
|
|
@@ -10,7 +11,7 @@ const ids = {
|
|
|
10
11
|
boxD: createShapeId('boxD'),
|
|
11
12
|
}
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
vi.useFakeTimers()
|
|
14
15
|
|
|
15
16
|
beforeEach(() => {
|
|
16
17
|
editor = new TestEditor()
|
|
@@ -45,7 +46,7 @@ describe('editor.packShapes', () => {
|
|
|
45
46
|
editor.selectAll()
|
|
46
47
|
const centerBefore = editor.getSelectionRotatedPageBounds()!.center.clone()
|
|
47
48
|
editor.packShapes(editor.getSelectedShapeIds())
|
|
48
|
-
|
|
49
|
+
vi.advanceTimersByTime(1000)
|
|
49
50
|
expect(
|
|
50
51
|
editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
|
|
51
52
|
).toMatchSnapshot('packed shapes')
|
|
@@ -57,7 +58,7 @@ describe('editor.packShapes', () => {
|
|
|
57
58
|
editor.selectAll()
|
|
58
59
|
const centerBefore = editor.getSelectionRotatedPageBounds()!.center.clone()
|
|
59
60
|
editor.packShapes(editor.getSelectedShapeIds(), 16)
|
|
60
|
-
|
|
61
|
+
vi.advanceTimersByTime(1000)
|
|
61
62
|
expect(
|
|
62
63
|
editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
|
|
63
64
|
).toMatchSnapshot('packed shapes')
|
|
@@ -68,7 +69,7 @@ describe('editor.packShapes', () => {
|
|
|
68
69
|
it('packs rotated shapes', () => {
|
|
69
70
|
editor.updateShapes([{ id: ids.boxA, type: 'geo', rotation: Math.PI }])
|
|
70
71
|
editor.selectAll().packShapes(editor.getSelectedShapeIds(), 16)
|
|
71
|
-
|
|
72
|
+
vi.advanceTimersByTime(1000)
|
|
72
73
|
expect(
|
|
73
74
|
editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
|
|
74
75
|
).toMatchSnapshot('packed shapes')
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../TestEditor'
|
|
3
4
|
|
|
4
5
|
let editor: TestEditor
|
|
@@ -40,20 +41,20 @@ beforeEach(() => {
|
|
|
40
41
|
})
|
|
41
42
|
|
|
42
43
|
describe('editor.rotateShapesBy', () => {
|
|
43
|
-
let fnStart =
|
|
44
|
-
let fnChange =
|
|
45
|
-
let fnEnd =
|
|
44
|
+
let fnStart = vi.fn()
|
|
45
|
+
let fnChange = vi.fn()
|
|
46
|
+
let fnEnd = vi.fn()
|
|
46
47
|
|
|
47
48
|
beforeEach(() => {
|
|
48
49
|
// Set start / change / end events on only the geo shape
|
|
49
50
|
const util = editor.getShapeUtil('geo')
|
|
50
51
|
|
|
51
52
|
// Bad! who did this (did I do this)
|
|
52
|
-
util.onRotateStart = fnStart =
|
|
53
|
+
util.onRotateStart = fnStart = vi.fn()
|
|
53
54
|
|
|
54
|
-
util.onRotate = fnChange =
|
|
55
|
+
util.onRotate = fnChange = vi.fn()
|
|
55
56
|
|
|
56
|
-
util.onRotateEnd = fnEnd =
|
|
57
|
+
util.onRotateEnd = fnEnd = vi.fn()
|
|
57
58
|
})
|
|
58
59
|
it('Rotates shapes and fires events', () => {
|
|
59
60
|
// Select the shape...
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Box, DEFAULT_CAMERA_OPTIONS, Vec, createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../TestEditor'
|
|
3
4
|
|
|
4
5
|
let editor: TestEditor
|
|
@@ -366,14 +367,14 @@ describe('CameraOptions.zoomSpeed', () => {
|
|
|
366
367
|
editor.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS, zoomSpeed: 2 })
|
|
367
368
|
expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
|
|
368
369
|
editor.setCurrentTool('zoom').click()
|
|
369
|
-
|
|
370
|
+
vi.advanceTimersByTime(300)
|
|
370
371
|
expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 2 })
|
|
371
372
|
})
|
|
372
373
|
it('Does not affect zoom tool zooming (0.5x)', () => {
|
|
373
374
|
editor.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS, zoomSpeed: 0.5 })
|
|
374
375
|
expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
|
|
375
376
|
editor.setCurrentTool('zoom').click()
|
|
376
|
-
|
|
377
|
+
vi.advanceTimersByTime(300)
|
|
377
378
|
expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 2 })
|
|
378
379
|
})
|
|
379
380
|
it('Does not affect editor zoom method (2x)', () => {
|
|
@@ -1028,7 +1029,7 @@ describe('Allows mixed values for x and y', () => {
|
|
|
1028
1029
|
|
|
1029
1030
|
test('it animated towards the constrained viewport rather than the given viewport', () => {
|
|
1030
1031
|
// @ts-expect-error
|
|
1031
|
-
const mockAnimateToViewport = (editor._animateToViewport =
|
|
1032
|
+
const mockAnimateToViewport = (editor._animateToViewport = vi.fn())
|
|
1032
1033
|
editor.setCameraOptions({
|
|
1033
1034
|
...DEFAULT_CAMERA_OPTIONS,
|
|
1034
1035
|
constraints: {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { IndexKey, PageRecordType, TLPageId, createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../TestEditor'
|
|
3
4
|
|
|
4
5
|
let editor: TestEditor
|
|
@@ -76,7 +77,7 @@ describe('setCurrentPage', () => {
|
|
|
76
77
|
it('logs an error when trying to navigate to a page that does not exist', () => {
|
|
77
78
|
const initialPageId = editor.getCurrentPageId()
|
|
78
79
|
expect(editor.getCurrentPageId()).toBe(initialPageId)
|
|
79
|
-
console.error =
|
|
80
|
+
console.error = vi.fn()
|
|
80
81
|
|
|
81
82
|
expect(() => {
|
|
82
83
|
editor.setCurrentPage('page:does-not-exist' as TLPageId)
|
|
@@ -105,7 +106,7 @@ describe('setCurrentPage', () => {
|
|
|
105
106
|
})
|
|
106
107
|
|
|
107
108
|
it('applies camera constraints', () => {
|
|
108
|
-
const spy =
|
|
109
|
+
const spy = vi.spyOn(editor, 'setCamera')
|
|
109
110
|
|
|
110
111
|
let currentPageId = editor.getCurrentPageId()
|
|
111
112
|
expect(currentPageId).toMatchInlineSnapshot(`"page:page"`)
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../TestEditor'
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
vi.useFakeTimers()
|
|
5
6
|
|
|
6
7
|
let editor: TestEditor
|
|
7
8
|
|
|
@@ -51,10 +52,10 @@ describe('distributeShapes command', () => {
|
|
|
51
52
|
describe('when less than three shapes are selected', () => {
|
|
52
53
|
it('does nothing', () => {
|
|
53
54
|
editor.setSelectedShapes([ids.boxA, ids.boxB])
|
|
54
|
-
const fn =
|
|
55
|
+
const fn = vi.fn()
|
|
55
56
|
editor.store.listen(fn)
|
|
56
57
|
editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 0)
|
|
57
|
-
|
|
58
|
+
vi.advanceTimersByTime(1000)
|
|
58
59
|
expect(fn).not.toHaveBeenCalled()
|
|
59
60
|
})
|
|
60
61
|
})
|
|
@@ -65,7 +66,7 @@ describe('distributeShapes command', () => {
|
|
|
65
66
|
// @ts-expect-error
|
|
66
67
|
editor.options.adjacentShapeMargin = 1
|
|
67
68
|
editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
68
|
-
|
|
69
|
+
vi.advanceTimersByTime(1000)
|
|
69
70
|
// 200 distance gap between c and d
|
|
70
71
|
editor.expectShapeToMatch({
|
|
71
72
|
id: ids.boxA,
|
|
@@ -92,7 +93,7 @@ describe('distributeShapes command', () => {
|
|
|
92
93
|
it('stacks the shapes based on a given value', () => {
|
|
93
94
|
editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
|
|
94
95
|
editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 10)
|
|
95
|
-
|
|
96
|
+
vi.advanceTimersByTime(1000)
|
|
96
97
|
// 200 distance gap between c and d
|
|
97
98
|
editor.expectShapeToMatch({
|
|
98
99
|
id: ids.boxA,
|
|
@@ -119,7 +120,7 @@ describe('distributeShapes command', () => {
|
|
|
119
120
|
it('stacks the shapes based on the most common gap', () => {
|
|
120
121
|
editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
|
|
121
122
|
editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 0)
|
|
122
|
-
|
|
123
|
+
vi.advanceTimersByTime(1000)
|
|
123
124
|
// 200 distance gap between c and d
|
|
124
125
|
editor.expectShapeToMatch({
|
|
125
126
|
id: ids.boxA,
|
|
@@ -147,7 +148,7 @@ describe('distributeShapes command', () => {
|
|
|
147
148
|
editor.updateShapes([{ id: ids.boxD, type: 'geo', x: 540, y: 700 }])
|
|
148
149
|
editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
|
|
149
150
|
editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 0)
|
|
150
|
-
|
|
151
|
+
vi.advanceTimersByTime(1000)
|
|
151
152
|
editor.expectShapeToMatch({
|
|
152
153
|
id: ids.boxA,
|
|
153
154
|
x: 0,
|
|
@@ -175,7 +176,7 @@ describe('distributeShapes command', () => {
|
|
|
175
176
|
it('stacks the shapes based on a given value', () => {
|
|
176
177
|
editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
|
|
177
178
|
editor.stackShapes(editor.getSelectedShapeIds(), 'vertical', 10)
|
|
178
|
-
|
|
179
|
+
vi.advanceTimersByTime(1000)
|
|
179
180
|
// 200 distance gap between c and d
|
|
180
181
|
editor.expectShapeToMatch({
|
|
181
182
|
id: ids.boxA,
|
|
@@ -202,7 +203,7 @@ describe('distributeShapes command', () => {
|
|
|
202
203
|
it('stacks the shapes based on the most common gap', () => {
|
|
203
204
|
editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
|
|
204
205
|
editor.stackShapes(editor.getSelectedShapeIds(), 'vertical', 0)
|
|
205
|
-
|
|
206
|
+
vi.advanceTimersByTime(1000)
|
|
206
207
|
// 200 distance gap between c and d
|
|
207
208
|
editor.expectShapeToMatch({
|
|
208
209
|
id: ids.boxA,
|
|
@@ -230,7 +231,7 @@ describe('distributeShapes command', () => {
|
|
|
230
231
|
editor.updateShapes([{ id: ids.boxD, type: 'geo', x: 700, y: 540 }])
|
|
231
232
|
editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
|
|
232
233
|
editor.stackShapes(editor.getSelectedShapeIds(), 'vertical', 0)
|
|
233
|
-
|
|
234
|
+
vi.advanceTimersByTime(1000)
|
|
234
235
|
editor.expectShapeToMatch({
|
|
235
236
|
id: ids.boxA,
|
|
236
237
|
x: 0,
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { PI, TLShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../TestEditor'
|
|
3
4
|
import { TL } from '../test-jsx'
|
|
4
5
|
|
|
5
6
|
let editor: TestEditor
|
|
6
7
|
let ids: Record<string, TLShapeId>
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
vi.useFakeTimers()
|
|
9
10
|
|
|
10
11
|
function createVideoShape() {
|
|
11
12
|
return editor.createShapesFromJsx(<TL.video ref="video1" x={0} y={0} w={160} h={90} />).video1
|
|
@@ -26,10 +27,10 @@ beforeEach(() => {
|
|
|
26
27
|
describe('when less than two shapes are selected', () => {
|
|
27
28
|
it('does nothing', () => {
|
|
28
29
|
editor.setSelectedShapes([ids.boxB])
|
|
29
|
-
const fn =
|
|
30
|
+
const fn = vi.fn()
|
|
30
31
|
editor.store.listen(fn)
|
|
31
32
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
32
|
-
|
|
33
|
+
vi.advanceTimersByTime(1000)
|
|
33
34
|
|
|
34
35
|
expect(fn).not.toHaveBeenCalled()
|
|
35
36
|
})
|
|
@@ -39,7 +40,7 @@ describe('when multiple shapes are selected', () => {
|
|
|
39
40
|
it('stretches horizontally', () => {
|
|
40
41
|
editor.selectAll()
|
|
41
42
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
42
|
-
|
|
43
|
+
vi.advanceTimersByTime(1000)
|
|
43
44
|
editor.expectShapeToMatch(
|
|
44
45
|
{ id: ids.boxA, x: 0, y: 0, props: { w: 500 } },
|
|
45
46
|
{ id: ids.boxB, x: 0, y: 100, props: { w: 500 } },
|
|
@@ -52,7 +53,7 @@ describe('when multiple shapes are selected', () => {
|
|
|
52
53
|
editor.selectAll()
|
|
53
54
|
expect(editor.getSelectedShapes().length).toBe(4)
|
|
54
55
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
55
|
-
|
|
56
|
+
vi.advanceTimersByTime(1000)
|
|
56
57
|
const newHeight = (500 * 9) / 16
|
|
57
58
|
editor.expectShapeToMatch(
|
|
58
59
|
{ id: ids.boxA, x: 0, y: 0, props: { w: 500 } },
|
|
@@ -65,7 +66,7 @@ describe('when multiple shapes are selected', () => {
|
|
|
65
66
|
it('stretches vertically', () => {
|
|
66
67
|
editor.selectAll()
|
|
67
68
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'vertical')
|
|
68
|
-
|
|
69
|
+
vi.advanceTimersByTime(1000)
|
|
69
70
|
editor.expectShapeToMatch(
|
|
70
71
|
{ id: ids.boxA, x: 0, y: 0, props: { h: 500 } },
|
|
71
72
|
{ id: ids.boxB, x: 100, y: 0, props: { h: 500 } },
|
|
@@ -78,7 +79,7 @@ describe('when multiple shapes are selected', () => {
|
|
|
78
79
|
editor.selectAll()
|
|
79
80
|
expect(editor.getSelectedShapes().length).toBe(4)
|
|
80
81
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'vertical')
|
|
81
|
-
|
|
82
|
+
vi.advanceTimersByTime(1000)
|
|
82
83
|
const newWidth = (500 * 16) / 9
|
|
83
84
|
editor.expectShapeToMatch(
|
|
84
85
|
{ id: ids.boxA, x: 0, y: 0, props: { h: 500 } },
|
|
@@ -91,7 +92,7 @@ describe('when multiple shapes are selected', () => {
|
|
|
91
92
|
it('does, undoes and redoes command', () => {
|
|
92
93
|
editor.markHistoryStoppingPoint('stretch')
|
|
93
94
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
94
|
-
|
|
95
|
+
vi.advanceTimersByTime(1000)
|
|
95
96
|
|
|
96
97
|
editor.expectShapeToMatch({ id: ids.boxB, x: 0, props: { w: 500 } })
|
|
97
98
|
editor.undo()
|
|
@@ -106,7 +107,7 @@ describe('When shapes are the child of another shape.', () => {
|
|
|
106
107
|
editor.reparentShapes([ids.boxB], ids.boxA)
|
|
107
108
|
editor.select(ids.boxB, ids.boxC)
|
|
108
109
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
109
|
-
|
|
110
|
+
vi.advanceTimersByTime(1000)
|
|
110
111
|
editor.expectShapeToMatch(
|
|
111
112
|
{ id: ids.boxB, x: 100, y: 100, props: { w: 400 } },
|
|
112
113
|
{ id: ids.boxC, x: 100, y: 400, props: { w: 400 } }
|
|
@@ -117,7 +118,7 @@ describe('When shapes are the child of another shape.', () => {
|
|
|
117
118
|
editor.reparentShapes([ids.boxB], ids.boxA)
|
|
118
119
|
editor.select(ids.boxB, ids.boxC)
|
|
119
120
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'vertical')
|
|
120
|
-
|
|
121
|
+
vi.advanceTimersByTime(1000)
|
|
121
122
|
editor.expectShapeToMatch(
|
|
122
123
|
{ id: ids.boxB, x: 100, y: 100, props: { h: 400 } },
|
|
123
124
|
{ id: ids.boxC, x: 400, y: 100, props: { h: 400 } }
|
|
@@ -140,7 +141,7 @@ describe('When shapes are the child of a rotated shape.', () => {
|
|
|
140
141
|
|
|
141
142
|
editor.select(ids.boxA, ids.boxC)
|
|
142
143
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
143
|
-
|
|
144
|
+
vi.advanceTimersByTime(1000)
|
|
144
145
|
editor.expectShapeToMatch(
|
|
145
146
|
{
|
|
146
147
|
id: ids.boxA,
|
|
@@ -184,7 +185,7 @@ describe('When shapes are the child of a rotated shape.', () => {
|
|
|
184
185
|
editor.selectAll()
|
|
185
186
|
|
|
186
187
|
editor.stretchShapes(editor.getSelectedShapeIds(), 'vertical')
|
|
187
|
-
|
|
188
|
+
vi.advanceTimersByTime(1000)
|
|
188
189
|
editor.expectShapeToMatch(
|
|
189
190
|
{
|
|
190
191
|
id: ids.boxA,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { createShapeId, TLImageShape } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { MIN_CROP_SIZE } from '../lib/shapes/shared/crop'
|
|
3
4
|
import { TestEditor } from './TestEditor'
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
vi.useFakeTimers()
|
|
6
7
|
|
|
7
8
|
let editor: TestEditor
|
|
8
9
|
|
|
@@ -495,7 +496,7 @@ describe('When in the select.crop.translating_crop state', () => {
|
|
|
495
496
|
})
|
|
496
497
|
|
|
497
498
|
editor.keyUp('Shift')
|
|
498
|
-
|
|
499
|
+
vi.advanceTimersByTime(500)
|
|
499
500
|
|
|
500
501
|
const afterShiftUp = editor.getShape<TLImageShape>(ids.imageB)!.props.crop!
|
|
501
502
|
|
package/src/test/drawing.test.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { TLDrawShape, TLHighlightShape, last } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from './TestEditor'
|
|
3
4
|
import { TEST_DRAW_SHAPE_SCREEN_POINTS } from './drawing.data'
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
vi.useFakeTimers()
|
|
6
7
|
|
|
7
8
|
let editor: TestEditor
|
|
8
9
|
|
|
@@ -10,12 +10,13 @@ import {
|
|
|
10
10
|
createBindingId,
|
|
11
11
|
createShapeId,
|
|
12
12
|
} from '@tldraw/editor'
|
|
13
|
+
import { vi } from 'vitest'
|
|
13
14
|
import { getArrowBindings } from '../lib/shapes/arrow/shared'
|
|
14
15
|
import { TestEditor } from './TestEditor'
|
|
15
16
|
|
|
16
17
|
let editor: TestEditor
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
vi.useFakeTimers()
|
|
19
20
|
|
|
20
21
|
const ids = {
|
|
21
22
|
boxA: createShapeId('boxA'),
|
|
@@ -297,7 +298,7 @@ describe('When one shape is selected', () => {
|
|
|
297
298
|
})
|
|
298
299
|
|
|
299
300
|
it('Flips the direct child shape positions if the shape is a group', async () => {
|
|
300
|
-
const fn =
|
|
301
|
+
const fn = vi.fn()
|
|
301
302
|
|
|
302
303
|
editor.selectAll()
|
|
303
304
|
editor.groupShapes(editor.getSelectedShapeIds()) // this will also select the new group
|
|
@@ -306,7 +307,7 @@ describe('When one shape is selected', () => {
|
|
|
306
307
|
editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
307
308
|
|
|
308
309
|
// The change event should have been called
|
|
309
|
-
|
|
310
|
+
vi.runOnlyPendingTimers()
|
|
310
311
|
expect(fn).toHaveBeenCalled()
|
|
311
312
|
|
|
312
313
|
editor.expectShapeToMatch(
|