tldraw 4.1.1 → 4.2.0-canary.118fb314f728
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 +35 -14
- package/dist-cjs/index.js +3 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/defaultEmbedDefinitions.js +2 -25
- package/dist-cjs/lib/defaultEmbedDefinitions.js.map +2 -2
- package/dist-cjs/lib/defaultExternalContentHandlers.js +8 -31
- package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
- package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js +31 -101
- package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/bookmark/bookmarks.js +138 -0
- package/dist-cjs/lib/shapes/bookmark/bookmarks.js.map +7 -0
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +25 -3
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/Cropping.js +20 -4
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/Cropping.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.js +23 -11
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +18 -5
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingArrowLabel.js +21 -9
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingArrowLabel.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingResizeHandle.js +24 -8
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingResizeHandle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingRotateHandle.js +21 -9
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingRotateHandle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js +23 -8
- package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js +21 -9
- package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js +26 -11
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map +2 -2
- package/dist-cjs/lib/ui/components/DebugMenu/DefaultDebugMenuContent.js +12 -9
- package/dist-cjs/lib/ui/components/DebugMenu/DefaultDebugMenuContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/DefaultDebugPanel.js +1 -1
- package/dist-cjs/lib/ui/components/DefaultDebugPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultRichTextToolbar.js +6 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultRichTextToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +1 -1
- package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
- package/dist-cjs/lib/ui/components/menu-items.js +2 -2
- package/dist-cjs/lib/ui/components/menu-items.js.map +1 -1
- package/dist-cjs/lib/ui/context/actions.js +23 -29
- package/dist-cjs/lib/ui/context/actions.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useEditorEvents.js +1 -1
- package/dist-cjs/lib/ui/hooks/useEditorEvents.js.map +1 -1
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +4 -4
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +1 -1
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-cjs/lib/utils/text/richText.js +5 -6
- package/dist-cjs/lib/utils/text/richText.js.map +3 -3
- package/dist-esm/index.d.mts +35 -14
- package/dist-esm/index.mjs +3 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/defaultEmbedDefinitions.mjs +2 -25
- package/dist-esm/lib/defaultEmbedDefinitions.mjs.map +2 -2
- package/dist-esm/lib/defaultExternalContentHandlers.mjs +8 -31
- package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
- package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs +34 -101
- package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/bookmark/bookmarks.mjs +124 -0
- package/dist-esm/lib/shapes/bookmark/bookmarks.mjs.map +7 -0
- package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs +26 -3
- package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/Cropping.mjs +20 -4
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/Cropping.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.mjs +23 -11
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +18 -5
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/PointingArrowLabel.mjs +21 -9
- package/dist-esm/lib/tools/SelectTool/childStates/PointingArrowLabel.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/PointingResizeHandle.mjs +24 -8
- package/dist-esm/lib/tools/SelectTool/childStates/PointingResizeHandle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/PointingRotateHandle.mjs +21 -9
- package/dist-esm/lib/tools/SelectTool/childStates/PointingRotateHandle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs +23 -8
- package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs +21 -9
- package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs +26 -11
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
- package/dist-esm/lib/ui/components/DebugMenu/DefaultDebugMenuContent.mjs +12 -9
- package/dist-esm/lib/ui/components/DebugMenu/DefaultDebugMenuContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/DefaultDebugPanel.mjs +1 -1
- package/dist-esm/lib/ui/components/DefaultDebugPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultRichTextToolbar.mjs +6 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultRichTextToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +1 -1
- package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
- package/dist-esm/lib/ui/components/menu-items.mjs +2 -2
- package/dist-esm/lib/ui/components/menu-items.mjs.map +1 -1
- package/dist-esm/lib/ui/context/actions.mjs +23 -29
- package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useEditorEvents.mjs +1 -1
- package/dist-esm/lib/ui/hooks/useEditorEvents.mjs.map +1 -1
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +4 -4
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +1 -1
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/dist-esm/lib/utils/text/richText.mjs +5 -6
- package/dist-esm/lib/utils/text/richText.mjs.map +2 -2
- package/package.json +10 -10
- package/src/index.ts +4 -0
- package/src/lib/defaultEmbedDefinitions.ts +2 -25
- package/src/lib/defaultExternalContentHandlers.ts +10 -35
- package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +39 -133
- package/src/lib/shapes/bookmark/bookmarks.ts +170 -0
- package/src/lib/shapes/embed/EmbedShapeUtil.tsx +28 -2
- package/src/lib/tools/SelectTool/childStates/Crop/children/Cropping.ts +23 -6
- package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.ts +24 -12
- package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +21 -10
- package/src/lib/tools/SelectTool/childStates/PointingArrowLabel.ts +23 -11
- package/src/lib/tools/SelectTool/childStates/PointingResizeHandle.ts +26 -9
- package/src/lib/tools/SelectTool/childStates/PointingRotateHandle.ts +23 -10
- package/src/lib/tools/SelectTool/childStates/Resizing.ts +24 -9
- package/src/lib/tools/SelectTool/childStates/Rotating.ts +27 -11
- package/src/lib/tools/SelectTool/childStates/Translating.ts +28 -12
- package/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx +29 -9
- package/src/lib/ui/components/DefaultDebugPanel.tsx +1 -1
- package/src/lib/ui/components/Toolbar/DefaultRichTextToolbar.tsx +6 -2
- package/src/lib/ui/components/Toolbar/LinkEditor.tsx +1 -1
- package/src/lib/ui/components/menu-items.tsx +2 -2
- package/src/lib/ui/context/actions.tsx +27 -31
- package/src/lib/ui/hooks/useEditorEvents.ts +1 -1
- package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +4 -4
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/utils/embeds/embeds.test.ts +16 -34
- package/src/lib/utils/text/richText.ts +5 -5
- package/src/test/SelectTool.test.ts +251 -0
- package/src/test/bookmark-shapes.test.ts +129 -7
|
@@ -23,7 +23,7 @@ export class PointingArrowLabel extends StateNode {
|
|
|
23
23
|
|
|
24
24
|
private info = {} as TLPointerEventInfo & {
|
|
25
25
|
shape: TLArrowShape
|
|
26
|
-
onInteractionEnd?: string
|
|
26
|
+
onInteractionEnd?: string | (() => void)
|
|
27
27
|
isCreating: boolean
|
|
28
28
|
}
|
|
29
29
|
|
|
@@ -34,12 +34,14 @@ export class PointingArrowLabel extends StateNode {
|
|
|
34
34
|
override onEnter(
|
|
35
35
|
info: TLPointerEventInfo & {
|
|
36
36
|
shape: TLArrowShape
|
|
37
|
-
onInteractionEnd?: string
|
|
37
|
+
onInteractionEnd?: string | (() => void)
|
|
38
38
|
isCreating: boolean
|
|
39
39
|
}
|
|
40
40
|
) {
|
|
41
41
|
const { shape } = info
|
|
42
|
-
|
|
42
|
+
if (typeof info.onInteractionEnd === 'string') {
|
|
43
|
+
this.parent.setCurrentToolIdMask(info.onInteractionEnd)
|
|
44
|
+
}
|
|
43
45
|
this.info = info
|
|
44
46
|
this.shapeId = shape.id
|
|
45
47
|
this.didDrag = false
|
|
@@ -155,20 +157,30 @@ export class PointingArrowLabel extends StateNode {
|
|
|
155
157
|
}
|
|
156
158
|
|
|
157
159
|
private complete() {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
160
|
+
const { onInteractionEnd } = this.info
|
|
161
|
+
if (onInteractionEnd) {
|
|
162
|
+
if (typeof onInteractionEnd === 'string') {
|
|
163
|
+
this.editor.setCurrentTool(onInteractionEnd, {})
|
|
164
|
+
} else {
|
|
165
|
+
onInteractionEnd()
|
|
166
|
+
}
|
|
167
|
+
return
|
|
162
168
|
}
|
|
169
|
+
this.parent.transition('idle')
|
|
163
170
|
}
|
|
164
171
|
|
|
165
172
|
private cancel() {
|
|
166
173
|
this.editor.bailToMark(this.markId)
|
|
167
174
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
175
|
+
const { onInteractionEnd } = this.info
|
|
176
|
+
if (onInteractionEnd) {
|
|
177
|
+
if (typeof onInteractionEnd === 'string') {
|
|
178
|
+
this.editor.setCurrentTool(onInteractionEnd, {})
|
|
179
|
+
} else {
|
|
180
|
+
onInteractionEnd()
|
|
181
|
+
}
|
|
182
|
+
return
|
|
172
183
|
}
|
|
184
|
+
this.parent.transition('idle')
|
|
173
185
|
}
|
|
174
186
|
}
|
|
@@ -17,7 +17,7 @@ export const CursorTypeMap: Record<TLSelectionHandle, TLCursorType> = {
|
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
type PointingResizeHandleInfo = Extract<TLPointerEventInfo, { target: 'selection' }> & {
|
|
20
|
-
onInteractionEnd?: string
|
|
20
|
+
onInteractionEnd?: string | (() => void)
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
export class PointingResizeHandle extends StateNode {
|
|
@@ -36,9 +36,16 @@ export class PointingResizeHandle extends StateNode {
|
|
|
36
36
|
|
|
37
37
|
override onEnter(info: PointingResizeHandleInfo) {
|
|
38
38
|
this.info = info
|
|
39
|
+
if (typeof info.onInteractionEnd === 'string') {
|
|
40
|
+
this.parent.setCurrentToolIdMask(info.onInteractionEnd)
|
|
41
|
+
}
|
|
39
42
|
this.updateCursor()
|
|
40
43
|
}
|
|
41
44
|
|
|
45
|
+
override onExit() {
|
|
46
|
+
this.parent.setCurrentToolIdMask(undefined)
|
|
47
|
+
}
|
|
48
|
+
|
|
42
49
|
override onPointerMove() {
|
|
43
50
|
if (this.editor.inputs.isDragging) {
|
|
44
51
|
this.startResizing()
|
|
@@ -71,18 +78,28 @@ export class PointingResizeHandle extends StateNode {
|
|
|
71
78
|
}
|
|
72
79
|
|
|
73
80
|
private complete() {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
81
|
+
const { onInteractionEnd } = this.info
|
|
82
|
+
if (onInteractionEnd) {
|
|
83
|
+
if (typeof onInteractionEnd === 'string') {
|
|
84
|
+
this.editor.setCurrentTool(onInteractionEnd, {})
|
|
85
|
+
} else {
|
|
86
|
+
onInteractionEnd()
|
|
87
|
+
}
|
|
88
|
+
return
|
|
78
89
|
}
|
|
90
|
+
this.parent.transition('idle')
|
|
79
91
|
}
|
|
80
92
|
|
|
81
93
|
private cancel() {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
94
|
+
const { onInteractionEnd } = this.info
|
|
95
|
+
if (onInteractionEnd) {
|
|
96
|
+
if (typeof onInteractionEnd === 'string') {
|
|
97
|
+
this.editor.setCurrentTool(onInteractionEnd, {})
|
|
98
|
+
} else {
|
|
99
|
+
onInteractionEnd()
|
|
100
|
+
}
|
|
101
|
+
return
|
|
86
102
|
}
|
|
103
|
+
this.parent.transition('idle')
|
|
87
104
|
}
|
|
88
105
|
}
|
|
@@ -2,7 +2,7 @@ import { RotateCorner, StateNode, TLPointerEventInfo } from '@tldraw/editor'
|
|
|
2
2
|
import { CursorTypeMap } from './PointingResizeHandle'
|
|
3
3
|
|
|
4
4
|
type PointingRotateHandleInfo = Extract<TLPointerEventInfo, { target: 'selection' }> & {
|
|
5
|
-
onInteractionEnd?: string
|
|
5
|
+
onInteractionEnd?: string | (() => void)
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
export class PointingRotateHandle extends StateNode {
|
|
@@ -18,8 +18,10 @@ export class PointingRotateHandle extends StateNode {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
override onEnter(info: PointingRotateHandleInfo) {
|
|
21
|
-
this.parent.setCurrentToolIdMask(info.onInteractionEnd)
|
|
22
21
|
this.info = info
|
|
22
|
+
if (typeof info.onInteractionEnd === 'string') {
|
|
23
|
+
this.parent.setCurrentToolIdMask(info.onInteractionEnd)
|
|
24
|
+
}
|
|
23
25
|
this.updateCursor()
|
|
24
26
|
}
|
|
25
27
|
|
|
@@ -60,18 +62,29 @@ export class PointingRotateHandle extends StateNode {
|
|
|
60
62
|
}
|
|
61
63
|
|
|
62
64
|
private complete() {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
const { onInteractionEnd } = this.info
|
|
66
|
+
if (onInteractionEnd) {
|
|
67
|
+
if (typeof onInteractionEnd === 'string') {
|
|
68
|
+
// Return to the tool that was active before this one, whether tool lock is turned on or not!
|
|
69
|
+
this.editor.setCurrentTool(onInteractionEnd, {})
|
|
70
|
+
} else {
|
|
71
|
+
onInteractionEnd?.()
|
|
72
|
+
}
|
|
73
|
+
return
|
|
67
74
|
}
|
|
75
|
+
this.parent.transition('idle')
|
|
68
76
|
}
|
|
69
77
|
|
|
70
78
|
private cancel() {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
79
|
+
const { onInteractionEnd } = this.info
|
|
80
|
+
if (onInteractionEnd) {
|
|
81
|
+
if (typeof onInteractionEnd === 'string') {
|
|
82
|
+
this.editor.setCurrentTool(onInteractionEnd, {})
|
|
83
|
+
} else {
|
|
84
|
+
onInteractionEnd()
|
|
85
|
+
}
|
|
86
|
+
return
|
|
75
87
|
}
|
|
88
|
+
this.parent.transition('idle')
|
|
76
89
|
}
|
|
77
90
|
}
|
|
@@ -29,7 +29,7 @@ export type ResizingInfo = TLPointerEventInfo & {
|
|
|
29
29
|
creatingMarkId?: string
|
|
30
30
|
onCreate?(shape: TLShape | null): void
|
|
31
31
|
creationCursorOffset?: VecLike
|
|
32
|
-
onInteractionEnd?: string
|
|
32
|
+
onInteractionEnd?: string | (() => void)
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
export class Resizing extends StateNode {
|
|
@@ -55,7 +55,9 @@ export class Resizing extends StateNode {
|
|
|
55
55
|
this.info = info
|
|
56
56
|
this.didHoldCommand = false
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
if (typeof info.onInteractionEnd === 'string') {
|
|
59
|
+
this.parent.setCurrentToolIdMask(info.onInteractionEnd)
|
|
60
|
+
}
|
|
59
61
|
this.creationCursorOffset = creationCursorOffset
|
|
60
62
|
|
|
61
63
|
try {
|
|
@@ -135,11 +137,16 @@ export class Resizing extends StateNode {
|
|
|
135
137
|
|
|
136
138
|
this.editor.bailToMark(this.markId)
|
|
137
139
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
const { onInteractionEnd } = this.info
|
|
141
|
+
if (onInteractionEnd) {
|
|
142
|
+
if (typeof onInteractionEnd === 'string') {
|
|
143
|
+
this.editor.setCurrentTool(onInteractionEnd, {})
|
|
144
|
+
} else {
|
|
145
|
+
onInteractionEnd()
|
|
146
|
+
}
|
|
147
|
+
return
|
|
142
148
|
}
|
|
149
|
+
this.parent.transition('idle')
|
|
143
150
|
}
|
|
144
151
|
|
|
145
152
|
private complete() {
|
|
@@ -152,9 +159,17 @@ export class Resizing extends StateNode {
|
|
|
152
159
|
return
|
|
153
160
|
}
|
|
154
161
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
162
|
+
const { onInteractionEnd } = this.info
|
|
163
|
+
if (onInteractionEnd) {
|
|
164
|
+
if (typeof onInteractionEnd === 'string') {
|
|
165
|
+
if (this.editor.getInstanceState().isToolLocked) {
|
|
166
|
+
this.editor.setCurrentTool(onInteractionEnd, {})
|
|
167
|
+
return
|
|
168
|
+
}
|
|
169
|
+
} else {
|
|
170
|
+
onInteractionEnd()
|
|
171
|
+
return
|
|
172
|
+
}
|
|
158
173
|
}
|
|
159
174
|
|
|
160
175
|
this.parent.transition('idle')
|
|
@@ -19,14 +19,20 @@ export class Rotating extends StateNode {
|
|
|
19
19
|
|
|
20
20
|
snapshot = {} as TLRotationSnapshot
|
|
21
21
|
|
|
22
|
-
info = {} as Extract<TLPointerEventInfo, { target: 'selection' }> & {
|
|
22
|
+
info = {} as Extract<TLPointerEventInfo, { target: 'selection' }> & {
|
|
23
|
+
onInteractionEnd?: string | (() => void)
|
|
24
|
+
}
|
|
23
25
|
|
|
24
26
|
markId = ''
|
|
25
27
|
|
|
26
|
-
override onEnter(
|
|
28
|
+
override onEnter(
|
|
29
|
+
info: TLPointerEventInfo & { target: 'selection'; onInteractionEnd?: string | (() => void) }
|
|
30
|
+
) {
|
|
27
31
|
// Store the event information
|
|
28
32
|
this.info = info
|
|
29
|
-
|
|
33
|
+
if (typeof info.onInteractionEnd === 'string') {
|
|
34
|
+
this.parent.setCurrentToolIdMask(info.onInteractionEnd)
|
|
35
|
+
}
|
|
30
36
|
|
|
31
37
|
this.markId = this.editor.markHistoryStoppingPoint('rotate start')
|
|
32
38
|
|
|
@@ -121,11 +127,16 @@ export class Rotating extends StateNode {
|
|
|
121
127
|
})
|
|
122
128
|
|
|
123
129
|
this.editor.bailToMark(this.markId)
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
130
|
+
const { onInteractionEnd } = this.info
|
|
131
|
+
if (onInteractionEnd) {
|
|
132
|
+
if (typeof onInteractionEnd === 'string') {
|
|
133
|
+
this.editor.setCurrentTool(onInteractionEnd, this.info)
|
|
134
|
+
} else {
|
|
135
|
+
onInteractionEnd()
|
|
136
|
+
}
|
|
137
|
+
return
|
|
128
138
|
}
|
|
139
|
+
this.parent.transition('idle', this.info)
|
|
129
140
|
}
|
|
130
141
|
|
|
131
142
|
private complete() {
|
|
@@ -139,11 +150,16 @@ export class Rotating extends StateNode {
|
|
|
139
150
|
this.editor,
|
|
140
151
|
this.snapshot.shapeSnapshots.map((s) => s.shape.id)
|
|
141
152
|
)
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
153
|
+
const { onInteractionEnd } = this.info
|
|
154
|
+
if (onInteractionEnd) {
|
|
155
|
+
if (typeof onInteractionEnd === 'string') {
|
|
156
|
+
this.editor.setCurrentTool(onInteractionEnd, this.info)
|
|
157
|
+
} else {
|
|
158
|
+
onInteractionEnd()
|
|
159
|
+
}
|
|
160
|
+
return
|
|
146
161
|
}
|
|
162
|
+
this.parent.transition('idle', this.info)
|
|
147
163
|
}
|
|
148
164
|
|
|
149
165
|
_getRotationFromPointerPosition({ snapToNearestDegree }: { snapToNearestDegree: boolean }) {
|
|
@@ -28,7 +28,7 @@ export type TranslatingInfo = TLPointerEventInfo & {
|
|
|
28
28
|
isCreating?: boolean
|
|
29
29
|
creatingMarkId?: string
|
|
30
30
|
onCreate?(): void
|
|
31
|
-
onInteractionEnd?: string
|
|
31
|
+
onInteractionEnd?: string | (() => void)
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
export class Translating extends StateNode {
|
|
@@ -59,7 +59,9 @@ export class Translating extends StateNode {
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
this.info = info
|
|
62
|
-
|
|
62
|
+
if (typeof info.onInteractionEnd === 'string') {
|
|
63
|
+
this.parent.setCurrentToolIdMask(info.onInteractionEnd)
|
|
64
|
+
}
|
|
63
65
|
this.isCreating = isCreating
|
|
64
66
|
|
|
65
67
|
this.markId = ''
|
|
@@ -190,15 +192,24 @@ export class Translating extends StateNode {
|
|
|
190
192
|
this.snapshot.movingShapes.map((s) => s.id)
|
|
191
193
|
)
|
|
192
194
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
195
|
+
const { onInteractionEnd } = this.info
|
|
196
|
+
if (onInteractionEnd) {
|
|
197
|
+
if (typeof onInteractionEnd === 'string') {
|
|
198
|
+
if (this.editor.getInstanceState().isToolLocked) {
|
|
199
|
+
this.editor.setCurrentTool(onInteractionEnd)
|
|
200
|
+
return
|
|
201
|
+
}
|
|
198
202
|
} else {
|
|
199
|
-
|
|
203
|
+
onInteractionEnd()
|
|
204
|
+
return
|
|
200
205
|
}
|
|
201
206
|
}
|
|
207
|
+
|
|
208
|
+
if (this.isCreating) {
|
|
209
|
+
this.onCreate?.(this.editor.getOnlySelectedShape())
|
|
210
|
+
} else {
|
|
211
|
+
this.parent.transition('idle')
|
|
212
|
+
}
|
|
202
213
|
}
|
|
203
214
|
|
|
204
215
|
private cancel() {
|
|
@@ -214,11 +225,16 @@ export class Translating extends StateNode {
|
|
|
214
225
|
})
|
|
215
226
|
|
|
216
227
|
this.reset()
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
228
|
+
const { onInteractionEnd } = this.info
|
|
229
|
+
if (onInteractionEnd) {
|
|
230
|
+
if (typeof onInteractionEnd === 'string') {
|
|
231
|
+
this.editor.setCurrentTool(onInteractionEnd)
|
|
232
|
+
} else {
|
|
233
|
+
onInteractionEnd()
|
|
234
|
+
}
|
|
235
|
+
return
|
|
221
236
|
}
|
|
237
|
+
this.parent.transition('idle', this.info)
|
|
222
238
|
}
|
|
223
239
|
|
|
224
240
|
protected handleStart() {
|
|
@@ -29,8 +29,17 @@ import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
|
|
|
29
29
|
import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
|
|
30
30
|
import { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu'
|
|
31
31
|
|
|
32
|
+
/** @public */
|
|
33
|
+
export interface CustomDebugFlags {
|
|
34
|
+
customDebugFlags?: Record<string, DebugFlag<boolean>>
|
|
35
|
+
customFeatureFlags?: Record<string, DebugFlag<boolean>>
|
|
36
|
+
}
|
|
37
|
+
|
|
32
38
|
/** @public @react */
|
|
33
|
-
export function DefaultDebugMenuContent(
|
|
39
|
+
export function DefaultDebugMenuContent({
|
|
40
|
+
customDebugFlags,
|
|
41
|
+
customFeatureFlags,
|
|
42
|
+
}: CustomDebugFlags) {
|
|
34
43
|
const editor = useEditor()
|
|
35
44
|
const { addToast } = useToasts()
|
|
36
45
|
const { addDialog } = useDialogs()
|
|
@@ -161,18 +170,24 @@ export function DefaultDebugMenuContent() {
|
|
|
161
170
|
<TldrawUiMenuItem id="throw-error" onSelect={() => setError(true)} label={'Throw error'} />
|
|
162
171
|
</TldrawUiMenuGroup>
|
|
163
172
|
<TldrawUiMenuGroup id="flags">
|
|
164
|
-
<DebugFlags />
|
|
165
|
-
<FeatureFlags />
|
|
173
|
+
<DebugFlags customDebugFlags={customDebugFlags} />
|
|
174
|
+
<FeatureFlags customFeatureFlags={customFeatureFlags} />
|
|
166
175
|
</TldrawUiMenuGroup>
|
|
167
176
|
</>
|
|
168
177
|
)
|
|
169
178
|
}
|
|
179
|
+
|
|
180
|
+
/** @public */
|
|
181
|
+
export interface DebugFlagsProps {
|
|
182
|
+
customDebugFlags?: Record<string, DebugFlag<boolean>> | undefined
|
|
183
|
+
}
|
|
184
|
+
|
|
170
185
|
/** @public @react */
|
|
171
|
-
export function DebugFlags() {
|
|
172
|
-
const items = Object.values(debugFlags)
|
|
186
|
+
export function DebugFlags(props: DebugFlagsProps) {
|
|
187
|
+
const items = Object.values(props.customDebugFlags ?? debugFlags)
|
|
173
188
|
if (!items.length) return null
|
|
174
189
|
return (
|
|
175
|
-
<TldrawUiMenuSubmenu id="debug flags" label="Debug
|
|
190
|
+
<TldrawUiMenuSubmenu id="debug flags" label="Debug flags">
|
|
176
191
|
<TldrawUiMenuGroup id="debug flags">
|
|
177
192
|
{items.map((flag) => (
|
|
178
193
|
<DebugFlagToggle key={flag.name} flag={flag} />
|
|
@@ -181,12 +196,17 @@ export function DebugFlags() {
|
|
|
181
196
|
</TldrawUiMenuSubmenu>
|
|
182
197
|
)
|
|
183
198
|
}
|
|
199
|
+
/** @public */
|
|
200
|
+
export interface FeatureFlagsProps {
|
|
201
|
+
customFeatureFlags?: Record<string, DebugFlag<boolean>> | undefined
|
|
202
|
+
}
|
|
203
|
+
|
|
184
204
|
/** @public @react */
|
|
185
|
-
export function FeatureFlags() {
|
|
186
|
-
const items = Object.values(featureFlags)
|
|
205
|
+
export function FeatureFlags(props: FeatureFlagsProps) {
|
|
206
|
+
const items = Object.values(props.customFeatureFlags ?? featureFlags)
|
|
187
207
|
if (!items.length) return null
|
|
188
208
|
return (
|
|
189
|
-
<TldrawUiMenuSubmenu id="feature flags" label="Feature
|
|
209
|
+
<TldrawUiMenuSubmenu id="feature flags" label="Feature flags">
|
|
190
210
|
<TldrawUiMenuGroup id="feature flags">
|
|
191
211
|
{items.map((flag) => (
|
|
192
212
|
<DebugFlagToggle key={flag.name} flag={flag} />
|
|
@@ -110,7 +110,7 @@ function FPS() {
|
|
|
110
110
|
isSlow = !isSlow
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
fpsRef.current!.innerHTML = `FPS ${fps.toString()}`
|
|
113
|
+
fpsRef.current!.innerHTML = `FPS ${fps.toString()} (max: ${maxKnownFps})`
|
|
114
114
|
fpsRef.current!.className =
|
|
115
115
|
`tlui-debug-panel__fps` + (isSlow ? ` tlui-debug-panel__fps__slow` : ``)
|
|
116
116
|
|
|
@@ -117,7 +117,9 @@ function useEditingLinkBehavior(textEditor?: TiptapEditor) {
|
|
|
117
117
|
|
|
118
118
|
textEditor.view.dom.addEventListener('click', handleClick)
|
|
119
119
|
return () => {
|
|
120
|
-
textEditor.
|
|
120
|
+
if (textEditor.isInitialized) {
|
|
121
|
+
textEditor.view.dom.removeEventListener('click', handleClick)
|
|
122
|
+
}
|
|
121
123
|
}
|
|
122
124
|
}, [textEditor, isEditingLink])
|
|
123
125
|
|
|
@@ -193,7 +195,9 @@ function useIsMousingDownOnTextEditor(textEditor: TiptapEditor) {
|
|
|
193
195
|
})
|
|
194
196
|
return () => {
|
|
195
197
|
touchDownEvents.forEach((eventName: string) => {
|
|
196
|
-
textEditor.
|
|
198
|
+
if (textEditor.isInitialized) {
|
|
199
|
+
textEditor.view.dom.removeEventListener(eventName, handlePointingDown)
|
|
200
|
+
}
|
|
197
201
|
})
|
|
198
202
|
touchUpEvents.forEach((eventName: string) => {
|
|
199
203
|
document.body.removeEventListener(eventName, handlePointingUp)
|
|
@@ -31,7 +31,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
|
|
|
31
31
|
link = `https://${link}`
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
textEditor.
|
|
34
|
+
textEditor.chain().setLink({ href: link }).run()
|
|
35
35
|
// N.B. We shouldn't focus() on mobile because it causes the
|
|
36
36
|
// Return key to replace the link with a newline :facepalm:
|
|
37
37
|
if (editor.getInstanceState().isCoarsePointer) {
|
|
@@ -482,11 +482,11 @@ export function MoveToPageMenu() {
|
|
|
482
482
|
|
|
483
483
|
if (toPage) {
|
|
484
484
|
addToast({
|
|
485
|
-
title: 'Changed
|
|
485
|
+
title: 'Changed page',
|
|
486
486
|
description: `Moved to ${toPage.name}.`,
|
|
487
487
|
actions: [
|
|
488
488
|
{
|
|
489
|
-
label: 'Go
|
|
489
|
+
label: 'Go back',
|
|
490
490
|
type: 'primary',
|
|
491
491
|
onClick: () => {
|
|
492
492
|
editor.markHistoryStoppingPoint('change-page')
|
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
Editor,
|
|
6
6
|
HALF_PI,
|
|
7
7
|
PageRecordType,
|
|
8
|
+
Result,
|
|
8
9
|
TLBookmarkShape,
|
|
9
10
|
TLEmbedShape,
|
|
10
11
|
TLFrameShape,
|
|
@@ -24,6 +25,7 @@ import {
|
|
|
24
25
|
useMaybeEditor,
|
|
25
26
|
} from '@tldraw/editor'
|
|
26
27
|
import * as React from 'react'
|
|
28
|
+
import { createBookmarkFromUrl } from '../../shapes/bookmark/bookmarks'
|
|
27
29
|
import { fitFrameToContent, removeFrame } from '../../utils/frames/frames'
|
|
28
30
|
import { generateShapeAnnouncementMessage } from '../components/A11y'
|
|
29
31
|
import { EditLinkDialog } from '../components/EditLinkDialog'
|
|
@@ -387,45 +389,39 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|
|
387
389
|
{
|
|
388
390
|
id: 'convert-to-bookmark',
|
|
389
391
|
label: 'action.convert-to-bookmark',
|
|
390
|
-
onSelect(source) {
|
|
392
|
+
async onSelect(source) {
|
|
391
393
|
if (!canApplySelectionAction()) return
|
|
392
394
|
if (mustGoBackToSelectToolFirst()) return
|
|
393
395
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
const shapes = editor.getSelectedShapes()
|
|
396
|
+
trackEvent('convert-to-bookmark', { source })
|
|
397
|
+
const shapes = editor.getSelectedShapes()
|
|
397
398
|
|
|
398
|
-
|
|
399
|
-
const deleteList: TLShapeId[] = []
|
|
400
|
-
for (const shape of shapes) {
|
|
401
|
-
if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
|
|
402
|
-
continue
|
|
399
|
+
const markId = editor.markHistoryStoppingPoint('convert shapes to bookmark')
|
|
403
400
|
|
|
404
|
-
|
|
405
|
-
newPos.rot(-shape.rotation)
|
|
406
|
-
newPos.add(new Vec(shape.props.w / 2 - 300 / 2, shape.props.h / 2 - 320 / 2)) // see bookmark shape util
|
|
407
|
-
newPos.rot(shape.rotation)
|
|
408
|
-
const partial: TLShapePartial<TLBookmarkShape> = {
|
|
409
|
-
id: createShapeId(),
|
|
410
|
-
type: 'bookmark',
|
|
411
|
-
rotation: shape.rotation,
|
|
412
|
-
x: newPos.x,
|
|
413
|
-
y: newPos.y,
|
|
414
|
-
opacity: 1,
|
|
415
|
-
props: {
|
|
416
|
-
url: shape.props.url,
|
|
417
|
-
},
|
|
418
|
-
}
|
|
401
|
+
const creationPromises: Promise<Result<any, any>>[] = []
|
|
419
402
|
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
403
|
+
for (const shape of shapes) {
|
|
404
|
+
if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
|
|
405
|
+
continue
|
|
423
406
|
|
|
424
|
-
editor.
|
|
407
|
+
const center = editor.getShapePageBounds(shape)?.center
|
|
425
408
|
|
|
426
|
-
|
|
427
|
-
editor.deleteShapes(
|
|
428
|
-
|
|
409
|
+
if (!center) continue
|
|
410
|
+
editor.deleteShapes([shape.id])
|
|
411
|
+
|
|
412
|
+
creationPromises.push(
|
|
413
|
+
createBookmarkFromUrl(editor, { url: shape.props.url, center }).then((res) => {
|
|
414
|
+
if (!res.ok) {
|
|
415
|
+
throw new Error(res.error)
|
|
416
|
+
}
|
|
417
|
+
return res
|
|
418
|
+
})
|
|
419
|
+
)
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
await Promise.all(creationPromises).catch((error) => {
|
|
423
|
+
editor.bailToMark(markId)
|
|
424
|
+
console.error(error)
|
|
429
425
|
})
|
|
430
426
|
},
|
|
431
427
|
},
|
|
@@ -10,7 +10,7 @@ export function useEditorEvents() {
|
|
|
10
10
|
useEffect(() => {
|
|
11
11
|
function handleMaxShapes({ name, count }: { name: string; pageId: string; count: number }) {
|
|
12
12
|
addToast({
|
|
13
|
-
title: 'Maximum
|
|
13
|
+
title: 'Maximum shapes reached',
|
|
14
14
|
description: `You've reached the maximum number of shapes allowed on ${name} (${count}). Please delete some shapes or move to a different page to continue.`,
|
|
15
15
|
severity: 'warning',
|
|
16
16
|
})
|
|
@@ -8,8 +8,8 @@ export const DEFAULT_TRANSLATION = {
|
|
|
8
8
|
'action.toggle-auto-none': 'Auto',
|
|
9
9
|
'action.toggle-mouse': 'Mouse',
|
|
10
10
|
'action.toggle-trackpad': 'Trackpad',
|
|
11
|
-
'action.convert-to-bookmark': 'Convert to
|
|
12
|
-
'action.convert-to-embed': 'Convert to
|
|
11
|
+
'action.convert-to-bookmark': 'Convert to bookmark',
|
|
12
|
+
'action.convert-to-embed': 'Convert to embed',
|
|
13
13
|
'action.open-embed-link': 'Open link',
|
|
14
14
|
'action.align-bottom': 'Align bottom',
|
|
15
15
|
'action.align-center-horizontal': 'Align horizontally',
|
|
@@ -94,7 +94,7 @@ export const DEFAULT_TRANSLATION = {
|
|
|
94
94
|
'action.toggle-paste-at-cursor.menu': 'Paste at cursor',
|
|
95
95
|
'action.toggle-paste-at-cursor': 'Toggle paste at cursor',
|
|
96
96
|
'action.toggle-wrap-mode.menu': 'Select on wrap',
|
|
97
|
-
'action.toggle-wrap-mode': 'Toggle
|
|
97
|
+
'action.toggle-wrap-mode': 'Toggle select on wrap',
|
|
98
98
|
'action.toggle-reduce-motion.menu': 'Reduce motion',
|
|
99
99
|
'action.toggle-reduce-motion': 'Toggle reduce motion',
|
|
100
100
|
'action.toggle-keyboard-shortcuts.menu': 'Enable keyboard shortcuts',
|
|
@@ -364,7 +364,7 @@ export const DEFAULT_TRANSLATION = {
|
|
|
364
364
|
'people-menu.change-color': 'Change color',
|
|
365
365
|
'people-menu.follow': 'Following',
|
|
366
366
|
'people-menu.following': 'Following',
|
|
367
|
-
'people-menu.leading': 'Following
|
|
367
|
+
'people-menu.leading': 'Following you',
|
|
368
368
|
'people-menu.user': '(You)',
|
|
369
369
|
'people-menu.invite': 'Invite others',
|
|
370
370
|
'people-menu.anonymous-user': 'New user',
|
package/src/lib/ui/version.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// This file is automatically generated by internal/scripts/refresh-assets.ts.
|
|
2
2
|
// Do not edit manually. Or do, I'm a comment, not a cop.
|
|
3
3
|
|
|
4
|
-
export const version = '4.
|
|
4
|
+
export const version = '4.2.0-canary.118fb314f728'
|
|
5
5
|
export const publishDates = {
|
|
6
6
|
major: '2025-09-18T14:39:22.803Z',
|
|
7
|
-
minor: '2025-10-
|
|
8
|
-
patch: '2025-10-
|
|
7
|
+
minor: '2025-10-20T11:36:10.682Z',
|
|
8
|
+
patch: '2025-10-20T11:36:10.682Z',
|
|
9
9
|
}
|