@tldraw/editor 3.16.0-next.f9f54ec051f3 → 3.16.0-next.fe14f1b4181f
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 +110 -9
- package/dist-cjs/index.js +3 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/TldrawEditor.js +8 -2
- package/dist-cjs/lib/TldrawEditor.js.map +2 -2
- package/dist-cjs/lib/components/MenuClickCapture.js +0 -5
- package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
- package/dist-cjs/lib/components/Shape.js +7 -10
- package/dist-cjs/lib/components/Shape.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js +4 -23
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +1 -1
- package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultScribble.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +9 -1
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +2 -2
- package/dist-cjs/lib/config/TLUserPreferences.js +9 -3
- package/dist-cjs/lib/config/TLUserPreferences.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +63 -24
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +9 -4
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +13 -0
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/types/misc-types.js.map +1 -1
- package/dist-cjs/lib/exports/getSvgJsx.js +35 -16
- package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
- package/dist-cjs/lib/hooks/useCanvasEvents.js +31 -25
- package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
- package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js +4 -1
- package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map +2 -2
- package/dist-cjs/lib/{utils/nearestMultiple.js → hooks/useStateAttribute.js} +15 -14
- package/dist-cjs/lib/hooks/useStateAttribute.js.map +7 -0
- package/dist-cjs/lib/license/Watermark.js +6 -6
- package/dist-cjs/lib/license/Watermark.js.map +1 -1
- package/dist-cjs/lib/options.js +7 -0
- package/dist-cjs/lib/options.js.map +2 -2
- package/dist-cjs/lib/primitives/Box.js +3 -0
- package/dist-cjs/lib/primitives/Box.js.map +2 -2
- package/dist-cjs/lib/utils/EditorAtom.js +45 -0
- package/dist-cjs/lib/utils/EditorAtom.js.map +7 -0
- package/dist-cjs/version.js +3 -3
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.d.mts +110 -9
- package/dist-esm/index.mjs +3 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +8 -2
- package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
- package/dist-esm/lib/components/MenuClickCapture.mjs +0 -5
- package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
- package/dist-esm/lib/components/Shape.mjs +7 -10
- package/dist-esm/lib/components/Shape.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +4 -23
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +1 -1
- package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +9 -1
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +2 -2
- package/dist-esm/lib/config/TLUserPreferences.mjs +9 -3
- package/dist-esm/lib/config/TLUserPreferences.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +63 -24
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +9 -4
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +13 -0
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/exports/getSvgJsx.mjs +36 -16
- package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs +32 -26
- package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
- package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs +4 -1
- package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map +2 -2
- package/dist-esm/lib/hooks/useStateAttribute.mjs +15 -0
- package/dist-esm/lib/hooks/useStateAttribute.mjs.map +7 -0
- package/dist-esm/lib/license/Watermark.mjs +6 -6
- package/dist-esm/lib/license/Watermark.mjs.map +1 -1
- package/dist-esm/lib/options.mjs +7 -0
- package/dist-esm/lib/options.mjs.map +2 -2
- package/dist-esm/lib/primitives/Box.mjs +4 -1
- package/dist-esm/lib/primitives/Box.mjs.map +2 -2
- package/dist-esm/lib/utils/EditorAtom.mjs +25 -0
- package/dist-esm/lib/utils/EditorAtom.mjs.map +7 -0
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +301 -288
- package/package.json +14 -37
- package/src/index.ts +2 -0
- package/src/lib/TldrawEditor.tsx +13 -6
- package/src/lib/components/MenuClickCapture.tsx +0 -8
- package/src/lib/components/Shape.tsx +6 -12
- package/src/lib/components/default-components/DefaultCanvas.tsx +5 -22
- package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +1 -1
- package/src/lib/components/default-components/DefaultErrorFallback.tsx +1 -1
- package/src/lib/components/default-components/DefaultScribble.tsx +1 -1
- package/src/lib/components/default-components/DefaultShapeIndicator.tsx +5 -1
- package/src/lib/config/TLUserPreferences.ts +8 -1
- package/src/lib/editor/Editor.test.ts +12 -11
- package/src/lib/editor/Editor.ts +88 -47
- package/src/lib/editor/managers/ClickManager/ClickManager.test.ts +15 -14
- package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.test.ts +16 -15
- package/src/lib/editor/managers/FocusManager/FocusManager.test.ts +49 -48
- package/src/lib/editor/managers/FontManager/FontManager.test.ts +24 -23
- package/src/lib/editor/managers/HistoryManager/HistoryManager.test.ts +7 -6
- package/src/lib/editor/managers/ScribbleManager/ScribbleManager.test.ts +12 -11
- package/src/lib/editor/managers/SnapManager/SnapManager.test.ts +57 -50
- package/src/lib/editor/managers/TextManager/TextManager.test.ts +51 -26
- package/src/lib/editor/managers/TickManager/TickManager.test.ts +14 -13
- package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts +34 -26
- package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +6 -1
- package/src/lib/editor/shapes/ShapeUtil.ts +14 -0
- package/src/lib/editor/types/misc-types.ts +54 -1
- package/src/lib/exports/getSvgJsx.test.ts +868 -0
- package/src/lib/exports/getSvgJsx.tsx +78 -21
- package/src/lib/hooks/useCanvasEvents.ts +45 -38
- package/src/lib/hooks/usePassThroughWheelEvents.ts +6 -1
- package/src/lib/hooks/useStateAttribute.ts +15 -0
- package/src/lib/license/LicenseManager.test.ts +3 -1
- package/src/lib/license/Watermark.test.tsx +2 -1
- package/src/lib/license/Watermark.tsx +6 -6
- package/src/lib/options.ts +8 -0
- package/src/lib/primitives/Box.test.ts +126 -0
- package/src/lib/primitives/Box.ts +10 -1
- package/src/lib/utils/EditorAtom.ts +37 -0
- package/src/lib/utils/sync/LocalIndexedDb.test.ts +2 -1
- package/src/lib/utils/sync/TLLocalSyncClient.test.ts +15 -15
- package/src/version.ts +3 -3
- package/dist-cjs/lib/utils/nearestMultiple.js.map +0 -7
- package/dist-esm/lib/utils/nearestMultiple.mjs +0 -14
- package/dist-esm/lib/utils/nearestMultiple.mjs.map +0 -7
- package/src/lib/utils/nearestMultiple.ts +0 -13
|
@@ -1,30 +1,31 @@
|
|
|
1
1
|
import { TLShape, TLShapeId, createShapeId } from '@tldraw/tlschema'
|
|
2
|
+
import { Mock, Mocked, vi } from 'vitest'
|
|
2
3
|
import { Editor } from '../../Editor'
|
|
3
4
|
import { FontManager, TLFontFace } from './FontManager'
|
|
4
5
|
|
|
5
6
|
// Mock the Editor class
|
|
6
|
-
|
|
7
|
+
vi.mock('../../Editor')
|
|
7
8
|
|
|
8
9
|
// Mock globals
|
|
9
|
-
global.FontFace =
|
|
10
|
+
global.FontFace = vi.fn().mockImplementation((family, src, descriptors) => ({
|
|
10
11
|
family,
|
|
11
12
|
src,
|
|
12
13
|
...descriptors,
|
|
13
|
-
load:
|
|
14
|
+
load: vi.fn(() => Promise.resolve()),
|
|
14
15
|
}))
|
|
15
16
|
|
|
16
17
|
Object.defineProperty(global.document, 'fonts', {
|
|
17
18
|
value: {
|
|
18
|
-
add:
|
|
19
|
-
[Symbol.iterator]:
|
|
19
|
+
add: vi.fn(),
|
|
20
|
+
[Symbol.iterator]: vi.fn(() => [].values()),
|
|
20
21
|
},
|
|
21
22
|
configurable: true,
|
|
22
23
|
})
|
|
23
24
|
|
|
24
|
-
global.queueMicrotask =
|
|
25
|
+
global.queueMicrotask = vi.fn((fn) => Promise.resolve().then(fn))
|
|
25
26
|
|
|
26
27
|
describe('FontManager', () => {
|
|
27
|
-
let editor:
|
|
28
|
+
let editor: Mocked<Editor>
|
|
28
29
|
let fontManager: FontManager
|
|
29
30
|
let mockAssetUrls: { [key: string]: string }
|
|
30
31
|
|
|
@@ -50,30 +51,30 @@ describe('FontManager', () => {
|
|
|
50
51
|
})
|
|
51
52
|
|
|
52
53
|
beforeEach(() => {
|
|
53
|
-
|
|
54
|
+
vi.clearAllMocks()
|
|
54
55
|
|
|
55
56
|
mockAssetUrls = {
|
|
56
57
|
'test-font.woff2': 'https://example.com/fonts/test-font.woff2',
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
const mockShapeUtil = {
|
|
60
|
-
getFontFaces:
|
|
61
|
+
getFontFaces: vi.fn(() => []),
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
const mockStore = {
|
|
64
|
-
createComputedCache:
|
|
65
|
-
get:
|
|
65
|
+
createComputedCache: vi.fn(() => ({
|
|
66
|
+
get: vi.fn(() => []),
|
|
66
67
|
})),
|
|
67
|
-
createCache:
|
|
68
|
-
get:
|
|
68
|
+
createCache: vi.fn(() => ({
|
|
69
|
+
get: vi.fn(() => ({ get: vi.fn(() => []) })),
|
|
69
70
|
})),
|
|
70
71
|
}
|
|
71
72
|
|
|
72
73
|
editor = {
|
|
73
74
|
store: mockStore,
|
|
74
|
-
getShapeUtil:
|
|
75
|
-
getCurrentPageShapeIds:
|
|
76
|
-
getShape:
|
|
75
|
+
getShapeUtil: vi.fn(() => mockShapeUtil),
|
|
76
|
+
getCurrentPageShapeIds: vi.fn(() => new Set()),
|
|
77
|
+
getShape: vi.fn(),
|
|
77
78
|
isDisposed: false,
|
|
78
79
|
} as any
|
|
79
80
|
|
|
@@ -127,7 +128,7 @@ describe('FontManager', () => {
|
|
|
127
128
|
const shapes = shapeIds.map(createMockShape)
|
|
128
129
|
|
|
129
130
|
editor.getCurrentPageShapeIds.mockReturnValue(new Set(shapeIds))
|
|
130
|
-
editor.getShape.mockImplementation((id) => shapes.find((s) => s.id === id))
|
|
131
|
+
editor.getShape.mockImplementation((id: any) => shapes.find((s) => s.id === id))
|
|
131
132
|
|
|
132
133
|
await expect(fontManager.loadRequiredFontsForCurrentPage(3)).resolves.toBeUndefined()
|
|
133
134
|
})
|
|
@@ -150,12 +151,12 @@ describe('FontManager', () => {
|
|
|
150
151
|
const font = createMockFont()
|
|
151
152
|
const error = new Error('Font load failed')
|
|
152
153
|
|
|
153
|
-
;(global.FontFace as
|
|
154
|
+
;(global.FontFace as Mock).mockReturnValue({
|
|
154
155
|
family: font.family,
|
|
155
|
-
load:
|
|
156
|
+
load: vi.fn(() => Promise.reject(error)),
|
|
156
157
|
})
|
|
157
158
|
|
|
158
|
-
const consoleSpy =
|
|
159
|
+
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
|
|
159
160
|
|
|
160
161
|
await fontManager.ensureFontIsLoaded(font)
|
|
161
162
|
|
|
@@ -198,7 +199,7 @@ describe('FontManager', () => {
|
|
|
198
199
|
|
|
199
200
|
fontManager.requestFonts(fonts)
|
|
200
201
|
|
|
201
|
-
const callback = (queueMicrotask as
|
|
202
|
+
const callback = (queueMicrotask as Mock).mock.calls[0][0]
|
|
202
203
|
expect(() => callback()).not.toThrow()
|
|
203
204
|
})
|
|
204
205
|
})
|
|
@@ -213,7 +214,7 @@ describe('FontManager', () => {
|
|
|
213
214
|
src: url("mock-data-url");
|
|
214
215
|
}`
|
|
215
216
|
|
|
216
|
-
|
|
217
|
+
vi.spyOn(fontManager, 'toEmbeddedCssDeclaration').mockResolvedValue(mockCssDeclaration)
|
|
217
218
|
|
|
218
219
|
const result = await fontManager.toEmbeddedCssDeclaration(font)
|
|
219
220
|
|
|
@@ -227,7 +228,7 @@ describe('FontManager', () => {
|
|
|
227
228
|
const font = createMockFont()
|
|
228
229
|
|
|
229
230
|
// Simple spy to verify the method is called
|
|
230
|
-
const spy =
|
|
231
|
+
const spy = vi.spyOn(fontManager, 'toEmbeddedCssDeclaration').mockResolvedValue('mock-css')
|
|
231
232
|
|
|
232
233
|
await fontManager.toEmbeddedCssDeclaration(font)
|
|
233
234
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { BaseRecord, RecordId, Store, StoreSchema, createRecordType } from '@tldraw/store'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TLHistoryBatchOptions } from '../../types/history-types'
|
|
3
4
|
import { HistoryManager } from './HistoryManager'
|
|
4
5
|
|
|
@@ -489,7 +490,7 @@ describe('HistoryManager constructor and lifecycle', () => {
|
|
|
489
490
|
})
|
|
490
491
|
|
|
491
492
|
it('should initialize with optional annotateError callback', () => {
|
|
492
|
-
const mockAnnotateError =
|
|
493
|
+
const mockAnnotateError = vi.fn()
|
|
493
494
|
const manager = new HistoryManager({ store, annotateError: mockAnnotateError })
|
|
494
495
|
expect(manager).toBeDefined()
|
|
495
496
|
})
|
|
@@ -503,7 +504,7 @@ describe('HistoryManager constructor and lifecycle', () => {
|
|
|
503
504
|
})
|
|
504
505
|
|
|
505
506
|
it('should handle errors in batch operations with annotateError', () => {
|
|
506
|
-
const mockAnnotateError =
|
|
507
|
+
const mockAnnotateError = vi.fn()
|
|
507
508
|
const manager = new HistoryManager({ store, annotateError: mockAnnotateError })
|
|
508
509
|
|
|
509
510
|
const errorFn = () => {
|
|
@@ -515,7 +516,7 @@ describe('HistoryManager constructor and lifecycle', () => {
|
|
|
515
516
|
})
|
|
516
517
|
|
|
517
518
|
it('should handle nested batch error scenarios', () => {
|
|
518
|
-
const mockAnnotateError =
|
|
519
|
+
const mockAnnotateError = vi.fn()
|
|
519
520
|
const manager = new HistoryManager({ store, annotateError: mockAnnotateError })
|
|
520
521
|
|
|
521
522
|
const nestedErrorFn = () => {
|
|
@@ -695,7 +696,7 @@ describe('HistoryManager error scenarios and edge cases', () => {
|
|
|
695
696
|
describe('squashToMark error handling', () => {
|
|
696
697
|
it('should handle non-existent mark gracefully', () => {
|
|
697
698
|
store.update(ids.a, (s) => ({ ...s, value: 1 }))
|
|
698
|
-
const consoleSpy =
|
|
699
|
+
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
|
|
699
700
|
|
|
700
701
|
manager.squashToMark('non-existent-mark')
|
|
701
702
|
|
|
@@ -707,7 +708,7 @@ describe('HistoryManager error scenarios and edge cases', () => {
|
|
|
707
708
|
})
|
|
708
709
|
|
|
709
710
|
it('should handle empty stack when squashing', () => {
|
|
710
|
-
const consoleSpy =
|
|
711
|
+
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
|
|
711
712
|
|
|
712
713
|
manager.squashToMark('non-existent')
|
|
713
714
|
|
|
@@ -780,7 +781,7 @@ describe('HistoryManager error scenarios and edge cases', () => {
|
|
|
780
781
|
})
|
|
781
782
|
|
|
782
783
|
it('should maintain batch state correctly during errors', () => {
|
|
783
|
-
const mockAnnotateError =
|
|
784
|
+
const mockAnnotateError = vi.fn()
|
|
784
785
|
const errorManager = new HistoryManager({ store, annotateError: mockAnnotateError })
|
|
785
786
|
|
|
786
787
|
try {
|
|
@@ -1,33 +1,34 @@
|
|
|
1
1
|
import { TLScribble } from '@tldraw/tlschema'
|
|
2
|
+
import { Mock, Mocked, vi } from 'vitest'
|
|
2
3
|
import { Editor } from '../../Editor'
|
|
3
4
|
import { ScribbleItem, ScribbleManager } from './ScribbleManager'
|
|
4
5
|
|
|
5
6
|
// Mock the Editor class
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
uniqueId:
|
|
7
|
+
vi.mock('../../Editor')
|
|
8
|
+
vi.mock('@tldraw/utils', () => ({
|
|
9
|
+
uniqueId: vi.fn(() => 'test-id'),
|
|
9
10
|
}))
|
|
10
11
|
|
|
11
12
|
describe('ScribbleManager', () => {
|
|
12
|
-
let editor:
|
|
13
|
+
let editor: Mocked<Editor>
|
|
13
14
|
let scribbleManager: ScribbleManager
|
|
14
|
-
let mockUniqueId:
|
|
15
|
+
let mockUniqueId: Mock
|
|
15
16
|
|
|
16
|
-
beforeEach(() => {
|
|
17
|
+
beforeEach(async () => {
|
|
17
18
|
editor = {
|
|
18
|
-
updateInstanceState:
|
|
19
|
-
run:
|
|
19
|
+
updateInstanceState: vi.fn(),
|
|
20
|
+
run: vi.fn((fn) => fn()),
|
|
20
21
|
} as any
|
|
21
22
|
|
|
22
|
-
const { uniqueId } =
|
|
23
|
-
mockUniqueId = uniqueId
|
|
23
|
+
const { uniqueId } = await vi.importMock('@tldraw/utils')
|
|
24
|
+
mockUniqueId = uniqueId as Mock
|
|
24
25
|
mockUniqueId.mockReturnValue('test-id')
|
|
25
26
|
|
|
26
27
|
scribbleManager = new ScribbleManager(editor)
|
|
27
28
|
})
|
|
28
29
|
|
|
29
30
|
afterEach(() => {
|
|
30
|
-
|
|
31
|
+
vi.clearAllMocks()
|
|
31
32
|
})
|
|
32
33
|
|
|
33
34
|
describe('constructor and initialization', () => {
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
TLFrameShape,
|
|
3
|
+
TLGroupShape,
|
|
4
|
+
TLPageId,
|
|
5
|
+
TLShape,
|
|
6
|
+
TLShapeId,
|
|
7
|
+
createShapeId,
|
|
8
|
+
} from '@tldraw/tlschema'
|
|
9
|
+
import { Mocked, vi } from 'vitest'
|
|
2
10
|
import { Box } from '../../../primitives/Box'
|
|
3
11
|
import { Vec } from '../../../primitives/Vec'
|
|
4
12
|
import { Editor } from '../../Editor'
|
|
@@ -7,32 +15,33 @@ import { HandleSnaps } from './HandleSnaps'
|
|
|
7
15
|
import { GapsSnapIndicator, PointsSnapIndicator, SnapManager } from './SnapManager'
|
|
8
16
|
|
|
9
17
|
// Mock the Editor class
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
18
|
+
vi.mock('../../Editor')
|
|
19
|
+
vi.mock('./BoundsSnaps')
|
|
20
|
+
vi.mock('./HandleSnaps')
|
|
13
21
|
|
|
14
22
|
describe('SnapManager', () => {
|
|
15
|
-
let editor:
|
|
23
|
+
let editor: Mocked<Editor>
|
|
16
24
|
let snapManager: SnapManager
|
|
17
25
|
|
|
18
26
|
const createMockShape = (
|
|
19
27
|
id: TLShapeId,
|
|
20
28
|
type: string = 'geo',
|
|
21
29
|
parentId: TLShapeId | string = 'page:page'
|
|
22
|
-
) =>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
30
|
+
) =>
|
|
31
|
+
({
|
|
32
|
+
id,
|
|
33
|
+
type,
|
|
34
|
+
parentId,
|
|
35
|
+
x: 0,
|
|
36
|
+
y: 0,
|
|
37
|
+
rotation: 0,
|
|
38
|
+
index: 'a1' as const,
|
|
39
|
+
opacity: 1,
|
|
40
|
+
isLocked: false,
|
|
41
|
+
meta: {},
|
|
42
|
+
props: {},
|
|
43
|
+
typeName: 'shape' as const,
|
|
44
|
+
}) as TLShape
|
|
36
45
|
|
|
37
46
|
const createMockFrameShape = (id: TLShapeId): TLFrameShape =>
|
|
38
47
|
({
|
|
@@ -54,26 +63,26 @@ describe('SnapManager', () => {
|
|
|
54
63
|
|
|
55
64
|
beforeEach(() => {
|
|
56
65
|
editor = {
|
|
57
|
-
getZoomLevel:
|
|
58
|
-
getViewportPageBounds:
|
|
59
|
-
getSelectedShapeIds:
|
|
60
|
-
getSelectedShapes:
|
|
61
|
-
findCommonAncestor:
|
|
62
|
-
getCurrentPageId:
|
|
63
|
-
getSortedChildIdsForParent:
|
|
64
|
-
getShape:
|
|
65
|
-
getShapeUtil:
|
|
66
|
-
canSnap:
|
|
66
|
+
getZoomLevel: vi.fn(() => 1),
|
|
67
|
+
getViewportPageBounds: vi.fn(() => new Box(0, 0, 1000, 1000)),
|
|
68
|
+
getSelectedShapeIds: vi.fn(() => []),
|
|
69
|
+
getSelectedShapes: vi.fn(() => []),
|
|
70
|
+
findCommonAncestor: vi.fn(() => createShapeId('page')),
|
|
71
|
+
getCurrentPageId: vi.fn(() => 'page:page' as TLPageId),
|
|
72
|
+
getSortedChildIdsForParent: vi.fn(() => []),
|
|
73
|
+
getShape: vi.fn(),
|
|
74
|
+
getShapeUtil: vi.fn(() => ({
|
|
75
|
+
canSnap: vi.fn(() => true),
|
|
67
76
|
})),
|
|
68
|
-
getShapePageBounds:
|
|
69
|
-
isShapeOfType:
|
|
77
|
+
getShapePageBounds: vi.fn(),
|
|
78
|
+
isShapeOfType: vi.fn(),
|
|
70
79
|
} as any
|
|
71
80
|
|
|
72
81
|
snapManager = new SnapManager(editor)
|
|
73
82
|
})
|
|
74
83
|
|
|
75
84
|
afterEach(() => {
|
|
76
|
-
|
|
85
|
+
vi.clearAllMocks()
|
|
77
86
|
})
|
|
78
87
|
|
|
79
88
|
describe('constructor and initialization', () => {
|
|
@@ -304,7 +313,7 @@ describe('SnapManager', () => {
|
|
|
304
313
|
editor.getSortedChildIdsForParent.mockReturnValue([shapeId])
|
|
305
314
|
editor.getShape.mockReturnValue(shape as any)
|
|
306
315
|
editor.getShapeUtil.mockReturnValue({
|
|
307
|
-
canSnap:
|
|
316
|
+
canSnap: vi.fn(() => false),
|
|
308
317
|
} as any)
|
|
309
318
|
|
|
310
319
|
const result = snapManager.getSnappableShapes()
|
|
@@ -329,7 +338,7 @@ describe('SnapManager', () => {
|
|
|
329
338
|
const frameShape = createMockFrameShape(frameId)
|
|
330
339
|
|
|
331
340
|
editor.getSortedChildIdsForParent.mockReturnValue([frameId])
|
|
332
|
-
editor.getShape.mockReturnValue(frameShape
|
|
341
|
+
editor.getShape.mockReturnValue(frameShape)
|
|
333
342
|
editor.isShapeOfType.mockImplementation((_shape, type) => type === 'frame')
|
|
334
343
|
editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
|
|
335
344
|
|
|
@@ -348,14 +357,12 @@ describe('SnapManager', () => {
|
|
|
348
357
|
.mockReturnValueOnce([childId]) // Inside group
|
|
349
358
|
|
|
350
359
|
editor.getShape.mockImplementation((id) => {
|
|
351
|
-
if (id === groupId) return groupShape
|
|
352
|
-
if (id === childId) return childShape
|
|
360
|
+
if (id === groupId) return groupShape
|
|
361
|
+
if (id === childId) return childShape
|
|
353
362
|
return undefined
|
|
354
363
|
})
|
|
355
364
|
|
|
356
|
-
editor.isShapeOfType.mockImplementation(
|
|
357
|
-
(shape, type) => shape && (shape as any).type === type
|
|
358
|
-
)
|
|
365
|
+
editor.isShapeOfType.mockImplementation((shape: any, type) => shape && shape.type === type)
|
|
359
366
|
|
|
360
367
|
editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
|
|
361
368
|
|
|
@@ -372,26 +379,26 @@ describe('SnapManager', () => {
|
|
|
372
379
|
|
|
373
380
|
// Override the getCurrentCommonAncestor mock for this specific test
|
|
374
381
|
const originalGetCurrentCommonAncestor = snapManager.getCurrentCommonAncestor
|
|
375
|
-
|
|
382
|
+
vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(parentFrameId)
|
|
376
383
|
|
|
377
384
|
editor.getSortedChildIdsForParent.mockReturnValueOnce([childFrameId]) // Children of parent frame
|
|
378
385
|
|
|
379
|
-
editor.getShape.mockImplementation((id) => {
|
|
386
|
+
editor.getShape.mockImplementation((id: any) => {
|
|
380
387
|
if (id === parentFrameId) return parentFrame as any
|
|
381
388
|
if (id === childFrameId) return childFrame as any
|
|
382
389
|
return undefined
|
|
383
390
|
})
|
|
384
391
|
|
|
385
|
-
editor.isShapeOfType.mockImplementation((shape, type) => type === 'frame')
|
|
392
|
+
editor.isShapeOfType.mockImplementation((shape: any, type: any) => type === 'frame')
|
|
386
393
|
editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
|
|
387
394
|
|
|
388
395
|
const result = snapManager.getSnappableShapes()
|
|
389
396
|
expect(result.has(childFrameId)).toBe(true)
|
|
390
397
|
|
|
391
398
|
// Restore original method
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
399
|
+
vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockImplementation(
|
|
400
|
+
originalGetCurrentCommonAncestor
|
|
401
|
+
)
|
|
395
402
|
})
|
|
396
403
|
|
|
397
404
|
it('should handle missing shape bounds gracefully', () => {
|
|
@@ -422,7 +429,7 @@ describe('SnapManager', () => {
|
|
|
422
429
|
|
|
423
430
|
// Override the getCurrentCommonAncestor mock for this specific test
|
|
424
431
|
const originalGetCurrentCommonAncestor = snapManager.getCurrentCommonAncestor
|
|
425
|
-
|
|
432
|
+
vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(undefined)
|
|
426
433
|
|
|
427
434
|
editor.getCurrentPageId.mockReturnValue('page:current' as TLPageId)
|
|
428
435
|
editor.getSortedChildIdsForParent.mockReturnValue([shapeId])
|
|
@@ -433,9 +440,9 @@ describe('SnapManager', () => {
|
|
|
433
440
|
expect(editor.getSortedChildIdsForParent).toHaveBeenCalledWith('page:current')
|
|
434
441
|
|
|
435
442
|
// Restore original method
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
443
|
+
vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockImplementation(
|
|
444
|
+
originalGetCurrentCommonAncestor
|
|
445
|
+
)
|
|
439
446
|
})
|
|
440
447
|
})
|
|
441
448
|
|
|
@@ -470,7 +477,7 @@ describe('SnapManager', () => {
|
|
|
470
477
|
|
|
471
478
|
// Test with second set of shapes
|
|
472
479
|
editor.getSortedChildIdsForParent.mockReturnValue([shapeId1, shapeId2])
|
|
473
|
-
editor.getShape.mockImplementation((id) => {
|
|
480
|
+
editor.getShape.mockImplementation((id: any) => {
|
|
474
481
|
if (id === shapeId1) return createMockShape(shapeId1) as any
|
|
475
482
|
if (id === shapeId2) return createMockShape(shapeId2) as any
|
|
476
483
|
return undefined
|
|
@@ -1,17 +1,21 @@
|
|
|
1
|
+
import { vi } from 'vitest'
|
|
1
2
|
import { Editor } from '../../Editor'
|
|
2
3
|
import { TextManager, TLMeasureTextSpanOpts } from './TextManager'
|
|
3
4
|
|
|
4
5
|
// Create a simple mock DOM environment
|
|
5
6
|
const mockElement = {
|
|
6
|
-
classList: { add:
|
|
7
|
+
classList: { add: vi.fn() },
|
|
7
8
|
tabIndex: -1,
|
|
8
|
-
cloneNode:
|
|
9
|
+
cloneNode: vi.fn(),
|
|
9
10
|
innerHTML: '',
|
|
10
11
|
textContent: '',
|
|
11
|
-
setAttribute:
|
|
12
|
-
style: {
|
|
12
|
+
setAttribute: vi.fn(),
|
|
13
|
+
style: {
|
|
14
|
+
setProperty: vi.fn(),
|
|
15
|
+
getPropertyValue: vi.fn(() => ''),
|
|
16
|
+
},
|
|
13
17
|
scrollWidth: 100,
|
|
14
|
-
getBoundingClientRect:
|
|
18
|
+
getBoundingClientRect: vi.fn(() => ({
|
|
15
19
|
width: 100,
|
|
16
20
|
height: 20,
|
|
17
21
|
left: 0,
|
|
@@ -19,22 +23,44 @@ const mockElement = {
|
|
|
19
23
|
right: 100,
|
|
20
24
|
bottom: 20,
|
|
21
25
|
})),
|
|
22
|
-
remove:
|
|
23
|
-
insertAdjacentElement:
|
|
26
|
+
remove: vi.fn(),
|
|
27
|
+
insertAdjacentElement: vi.fn(),
|
|
24
28
|
childNodes: [],
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
// Mock document.createElement to return our mock element
|
|
28
|
-
const mockCreateElement =
|
|
32
|
+
const mockCreateElement = vi.fn(() => {
|
|
29
33
|
const element = { ...mockElement }
|
|
30
|
-
element.cloneNode =
|
|
34
|
+
element.cloneNode = vi.fn(() => ({ ...element }))
|
|
35
|
+
|
|
36
|
+
// Make textContent and innerHTML reactive like real DOM elements
|
|
37
|
+
let _textContent = ''
|
|
38
|
+
let _innerHTML = ''
|
|
39
|
+
|
|
40
|
+
Object.defineProperty(element, 'textContent', {
|
|
41
|
+
get: () => _textContent,
|
|
42
|
+
set: (value) => {
|
|
43
|
+
_textContent = value || ''
|
|
44
|
+
// When textContent is set, innerHTML should be the escaped version
|
|
45
|
+
_innerHTML = _textContent
|
|
46
|
+
},
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
Object.defineProperty(element, 'innerHTML', {
|
|
50
|
+
get: () => _innerHTML,
|
|
51
|
+
set: (value) => {
|
|
52
|
+
_innerHTML = value || ''
|
|
53
|
+
_textContent = _innerHTML // Simple approximation
|
|
54
|
+
},
|
|
55
|
+
})
|
|
56
|
+
|
|
31
57
|
return element
|
|
32
58
|
})
|
|
33
59
|
|
|
34
60
|
// Mock editor
|
|
35
61
|
const mockEditor = {
|
|
36
|
-
getContainer:
|
|
37
|
-
appendChild:
|
|
62
|
+
getContainer: vi.fn(() => ({
|
|
63
|
+
appendChild: vi.fn(),
|
|
38
64
|
})),
|
|
39
65
|
} as unknown as Editor
|
|
40
66
|
|
|
@@ -43,10 +69,10 @@ global.document = {
|
|
|
43
69
|
createElement: mockCreateElement,
|
|
44
70
|
} as any
|
|
45
71
|
|
|
46
|
-
global.Range =
|
|
47
|
-
setStart:
|
|
48
|
-
setEnd:
|
|
49
|
-
getClientRects:
|
|
72
|
+
global.Range = vi.fn(() => ({
|
|
73
|
+
setStart: vi.fn(),
|
|
74
|
+
setEnd: vi.fn(),
|
|
75
|
+
getClientRects: vi.fn(() => [
|
|
50
76
|
{
|
|
51
77
|
width: 10,
|
|
52
78
|
height: 16,
|
|
@@ -62,7 +88,7 @@ describe('TextManager', () => {
|
|
|
62
88
|
let textManager: TextManager
|
|
63
89
|
|
|
64
90
|
beforeEach(() => {
|
|
65
|
-
|
|
91
|
+
vi.clearAllMocks()
|
|
66
92
|
textManager = new TextManager(mockEditor)
|
|
67
93
|
})
|
|
68
94
|
|
|
@@ -86,13 +112,13 @@ describe('TextManager', () => {
|
|
|
86
112
|
}
|
|
87
113
|
|
|
88
114
|
it('should call measureHtml with normalized text', () => {
|
|
89
|
-
const spy =
|
|
115
|
+
const spy = vi.spyOn(textManager, 'measureHtml')
|
|
90
116
|
textManager.measureText('Hello World', defaultOpts)
|
|
91
117
|
expect(spy).toHaveBeenCalledWith('Hello World', defaultOpts)
|
|
92
118
|
})
|
|
93
119
|
|
|
94
120
|
it('should normalize line breaks', () => {
|
|
95
|
-
const spy =
|
|
121
|
+
const spy = vi.spyOn(textManager, 'measureHtml')
|
|
96
122
|
textManager.measureText('Hello\nWorld\r\nTest', defaultOpts)
|
|
97
123
|
// The text should be normalized to use consistent line breaks
|
|
98
124
|
expect(spy).toHaveBeenCalled()
|
|
@@ -247,7 +273,7 @@ describe('TextManager', () => {
|
|
|
247
273
|
|
|
248
274
|
it('should return array of text spans for non-empty text', () => {
|
|
249
275
|
// Mock measureElementTextNodeSpans to return some spans
|
|
250
|
-
|
|
276
|
+
vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
|
|
251
277
|
spans: [
|
|
252
278
|
{
|
|
253
279
|
text: 'Hello World',
|
|
@@ -266,7 +292,7 @@ describe('TextManager', () => {
|
|
|
266
292
|
})
|
|
267
293
|
|
|
268
294
|
it('should handle wrap overflow', () => {
|
|
269
|
-
|
|
295
|
+
vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
|
|
270
296
|
spans: [
|
|
271
297
|
{
|
|
272
298
|
text: 'Hello World',
|
|
@@ -284,8 +310,7 @@ describe('TextManager', () => {
|
|
|
284
310
|
|
|
285
311
|
it('should handle truncate-ellipsis overflow', () => {
|
|
286
312
|
// Mock the calls for ellipsis handling
|
|
287
|
-
|
|
288
|
-
.spyOn(textManager, 'measureElementTextNodeSpans')
|
|
313
|
+
vi.spyOn(textManager, 'measureElementTextNodeSpans')
|
|
289
314
|
.mockReturnValueOnce({
|
|
290
315
|
spans: [
|
|
291
316
|
{
|
|
@@ -321,7 +346,7 @@ describe('TextManager', () => {
|
|
|
321
346
|
})
|
|
322
347
|
|
|
323
348
|
it('should handle truncate-clip overflow', () => {
|
|
324
|
-
|
|
349
|
+
vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
|
|
325
350
|
spans: [
|
|
326
351
|
{
|
|
327
352
|
text: 'Hello Wo',
|
|
@@ -338,7 +363,7 @@ describe('TextManager', () => {
|
|
|
338
363
|
})
|
|
339
364
|
|
|
340
365
|
it('should handle different text alignments', () => {
|
|
341
|
-
|
|
366
|
+
vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
|
|
342
367
|
spans: [
|
|
343
368
|
{
|
|
344
369
|
text: 'Test',
|
|
@@ -358,7 +383,7 @@ describe('TextManager', () => {
|
|
|
358
383
|
})
|
|
359
384
|
|
|
360
385
|
it('should handle custom font properties', () => {
|
|
361
|
-
|
|
386
|
+
vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
|
|
362
387
|
spans: [
|
|
363
388
|
{
|
|
364
389
|
text: 'Test',
|
|
@@ -382,7 +407,7 @@ describe('TextManager', () => {
|
|
|
382
407
|
})
|
|
383
408
|
|
|
384
409
|
it('should handle other styles', () => {
|
|
385
|
-
|
|
410
|
+
vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
|
|
386
411
|
spans: [
|
|
387
412
|
{
|
|
388
413
|
text: 'Test',
|