@tldraw/editor 3.14.0-canary.db789786fb06 → 3.14.0-canary.dd6c729c17b0
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 +13 -98
- package/dist-cjs/index.js +1 -4
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +23 -56
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js +1 -3
- package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +2 -3
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +10 -0
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/tools/BaseBoxShapeTool/children/Pointing.js +6 -10
- package/dist-cjs/lib/editor/tools/BaseBoxShapeTool/children/Pointing.js.map +3 -3
- package/dist-cjs/lib/editor/types/emit-types.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js +2 -6
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +2 -2
- package/dist-cjs/version.js +3 -3
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.d.mts +13 -98
- package/dist-esm/index.mjs +1 -4
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +23 -56
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs +1 -3
- package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +2 -3
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +10 -0
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/tools/BaseBoxShapeTool/children/Pointing.mjs +6 -10
- package/dist-esm/lib/editor/tools/BaseBoxShapeTool/children/Pointing.mjs.map +3 -3
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +2 -6
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +2 -2
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +11 -10
- package/package.json +7 -7
- package/src/index.ts +0 -5
- package/src/lib/editor/Editor.ts +33 -73
- package/src/lib/editor/managers/HistoryManager/HistoryManager.ts +1 -3
- package/src/lib/editor/managers/TextManager/TextManager.ts +2 -4
- package/src/lib/editor/shapes/ShapeUtil.ts +15 -47
- package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts +17 -22
- package/src/lib/editor/types/emit-types.ts +0 -4
- package/src/lib/primitives/geometry/Geometry2d.ts +2 -7
- package/src/version.ts +3 -3
- package/dist-cjs/lib/utils/reparenting.js +0 -232
- package/dist-cjs/lib/utils/reparenting.js.map +0 -7
- package/dist-esm/lib/utils/reparenting.mjs +0 -216
- package/dist-esm/lib/utils/reparenting.mjs.map +0 -7
- package/src/lib/utils/reparenting.ts +0 -383
package/dist-esm/version.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const version = "3.14.0-canary.
|
|
1
|
+
const version = "3.14.0-canary.dd6c729c17b0";
|
|
2
2
|
const publishDates = {
|
|
3
3
|
major: "2024-09-13T14:36:29.063Z",
|
|
4
|
-
minor: "2025-06-
|
|
5
|
-
patch: "2025-06-
|
|
4
|
+
minor: "2025-06-18T13:33:44.333Z",
|
|
5
|
+
patch: "2025-06-18T13:33:44.333Z"
|
|
6
6
|
};
|
|
7
7
|
export {
|
|
8
8
|
publishDates,
|
package/dist-esm/version.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/version.ts"],
|
|
4
|
-
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.14.0-canary.
|
|
4
|
+
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.14.0-canary.dd6c729c17b0'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-06-18T13:33:44.333Z',\n\tpatch: '2025-06-18T13:33:44.333Z',\n}\n"],
|
|
5
5
|
"mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/editor.css
CHANGED
|
@@ -176,7 +176,8 @@
|
|
|
176
176
|
--color-success: hsl(123, 46%, 34%);
|
|
177
177
|
--color-info: hsl(201, 98%, 41%);
|
|
178
178
|
--color-warning: hsl(27, 98%, 47%);
|
|
179
|
-
--color-
|
|
179
|
+
--color-error: hsl(0, 65%, 51%);
|
|
180
|
+
--color-warn: hsl(0, 90%, 43%);
|
|
180
181
|
--color-laser: hsl(0, 100%, 50%);
|
|
181
182
|
/* Shadows */
|
|
182
183
|
--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
@@ -231,7 +232,8 @@
|
|
|
231
232
|
--color-success: hsl(123, 38%, 57%);
|
|
232
233
|
--color-info: hsl(199, 92%, 56%);
|
|
233
234
|
--color-warning: hsl(36, 100%, 57%);
|
|
234
|
-
--color-
|
|
235
|
+
--color-error: hsl(4, 90%, 58%);
|
|
236
|
+
--color-warn: hsl(0, 81%, 66%);
|
|
235
237
|
--color-laser: hsl(0, 100%, 50%);
|
|
236
238
|
/* Shadows */
|
|
237
239
|
--shadow-1:
|
|
@@ -1055,8 +1057,8 @@ input,
|
|
|
1055
1057
|
}
|
|
1056
1058
|
|
|
1057
1059
|
.tl-hyperlink__icon {
|
|
1058
|
-
width:
|
|
1059
|
-
height:
|
|
1060
|
+
width: 16px;
|
|
1061
|
+
height: 16px;
|
|
1060
1062
|
background-color: currentColor;
|
|
1061
1063
|
pointer-events: none;
|
|
1062
1064
|
}
|
|
@@ -1155,7 +1157,7 @@ input,
|
|
|
1155
1157
|
stroke-linejoin: round;
|
|
1156
1158
|
/* content-visibility: auto; */
|
|
1157
1159
|
transform-origin: top left;
|
|
1158
|
-
color:
|
|
1160
|
+
color: inherit;
|
|
1159
1161
|
}
|
|
1160
1162
|
|
|
1161
1163
|
/* -------------------- Group shape ------------------ */
|
|
@@ -1270,7 +1272,6 @@ input,
|
|
|
1270
1272
|
display: flex;
|
|
1271
1273
|
justify-content: flex-end;
|
|
1272
1274
|
align-items: flex-start;
|
|
1273
|
-
box-shadow: inset 0px 0px 0px 1px var(--color-divider);
|
|
1274
1275
|
}
|
|
1275
1276
|
|
|
1276
1277
|
.tl-bookmark__image_container > .tl-hyperlink-button::after {
|
|
@@ -1293,7 +1294,7 @@ input,
|
|
|
1293
1294
|
}
|
|
1294
1295
|
|
|
1295
1296
|
.tl-bookmark__copy_container {
|
|
1296
|
-
background-color: var(--color-muted
|
|
1297
|
+
background-color: var(--color-muted);
|
|
1297
1298
|
padding: var(--space-4);
|
|
1298
1299
|
pointer-events: all;
|
|
1299
1300
|
display: flex;
|
|
@@ -1312,11 +1313,11 @@ input,
|
|
|
1312
1313
|
|
|
1313
1314
|
.tl-bookmark__heading {
|
|
1314
1315
|
font-size: 16px;
|
|
1315
|
-
line-height: 1.
|
|
1316
|
+
line-height: 1.5;
|
|
1316
1317
|
font-weight: bold;
|
|
1317
1318
|
padding-bottom: var(--space-2);
|
|
1318
1319
|
overflow: hidden;
|
|
1319
|
-
max-height: calc((16px * 1.
|
|
1320
|
+
max-height: calc((16px * 1.5) * 2);
|
|
1320
1321
|
-webkit-box-orient: vertical;
|
|
1321
1322
|
-webkit-line-clamp: 2;
|
|
1322
1323
|
line-clamp: 2;
|
|
@@ -1705,7 +1706,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1705
1706
|
gap: var(--space-4);
|
|
1706
1707
|
}
|
|
1707
1708
|
.tl-error-boundary__content .tl-error-boundary__reset {
|
|
1708
|
-
color: var(--color-
|
|
1709
|
+
color: var(--color-warn);
|
|
1709
1710
|
}
|
|
1710
1711
|
.tl-error-boundary__content .tl-error-boundary__refresh {
|
|
1711
1712
|
background-color: var(--color-primary);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tldraw/editor",
|
|
3
3
|
"description": "A tiny little drawing app (editor).",
|
|
4
|
-
"version": "3.14.0-canary.
|
|
4
|
+
"version": "3.14.0-canary.dd6c729c17b0",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -48,12 +48,12 @@
|
|
|
48
48
|
"@tiptap/core": "^2.9.1",
|
|
49
49
|
"@tiptap/pm": "^2.9.1",
|
|
50
50
|
"@tiptap/react": "^2.9.1",
|
|
51
|
-
"@tldraw/state": "3.14.0-canary.
|
|
52
|
-
"@tldraw/state-react": "3.14.0-canary.
|
|
53
|
-
"@tldraw/store": "3.14.0-canary.
|
|
54
|
-
"@tldraw/tlschema": "3.14.0-canary.
|
|
55
|
-
"@tldraw/utils": "3.14.0-canary.
|
|
56
|
-
"@tldraw/validate": "3.14.0-canary.
|
|
51
|
+
"@tldraw/state": "3.14.0-canary.dd6c729c17b0",
|
|
52
|
+
"@tldraw/state-react": "3.14.0-canary.dd6c729c17b0",
|
|
53
|
+
"@tldraw/store": "3.14.0-canary.dd6c729c17b0",
|
|
54
|
+
"@tldraw/tlschema": "3.14.0-canary.dd6c729c17b0",
|
|
55
|
+
"@tldraw/utils": "3.14.0-canary.dd6c729c17b0",
|
|
56
|
+
"@tldraw/validate": "3.14.0-canary.dd6c729c17b0",
|
|
57
57
|
"@types/core-js": "^2.5.8",
|
|
58
58
|
"@use-gesture/react": "^10.3.1",
|
|
59
59
|
"classnames": "^2.5.1",
|
package/src/index.ts
CHANGED
|
@@ -182,10 +182,6 @@ export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseB
|
|
|
182
182
|
export {
|
|
183
183
|
ShapeUtil,
|
|
184
184
|
type TLCropInfo,
|
|
185
|
-
type TLDragShapesInInfo,
|
|
186
|
-
type TLDragShapesOutInfo,
|
|
187
|
-
type TLDragShapesOverInfo,
|
|
188
|
-
type TLDropShapesOverInfo,
|
|
189
185
|
type TLGeometryOpts,
|
|
190
186
|
type TLHandleDragInfo,
|
|
191
187
|
type TLResizeInfo,
|
|
@@ -450,7 +446,6 @@ export { hardResetEditor } from './lib/utils/hardResetEditor'
|
|
|
450
446
|
export { isAccelKey } from './lib/utils/keyboard'
|
|
451
447
|
export { normalizeWheel } from './lib/utils/normalizeWheel'
|
|
452
448
|
export { refreshPage } from './lib/utils/refreshPage'
|
|
453
|
-
export { getDroppedShapesToNewParents, kickoutOccludedShapes } from './lib/utils/reparenting'
|
|
454
449
|
export {
|
|
455
450
|
getFontsFromRichText,
|
|
456
451
|
type RichTextFontVisitor,
|
package/src/lib/editor/Editor.ts
CHANGED
|
@@ -5528,7 +5528,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
5528
5528
|
if (!id) return undefined
|
|
5529
5529
|
const freshShape = this.getShape(id)
|
|
5530
5530
|
if (freshShape === undefined || !isShapeId(freshShape.parentId)) return undefined
|
|
5531
|
-
return this.
|
|
5531
|
+
return this.store.get(freshShape.parentId)
|
|
5532
5532
|
}
|
|
5533
5533
|
|
|
5534
5534
|
/**
|
|
@@ -5711,10 +5711,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
5711
5711
|
const newPoint = invertedParentTransform.applyToPoint(pagePoint)
|
|
5712
5712
|
const newRotation = pageTransform.rotation() - parentPageRotation
|
|
5713
5713
|
|
|
5714
|
-
if (shape.id === parentId) {
|
|
5715
|
-
throw Error('Attempted to reparent a shape to itself!')
|
|
5716
|
-
}
|
|
5717
|
-
|
|
5718
5714
|
changes.push({
|
|
5719
5715
|
id: shape.id,
|
|
5720
5716
|
type: shape.type,
|
|
@@ -5818,11 +5814,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
5818
5814
|
return shapeIds
|
|
5819
5815
|
}
|
|
5820
5816
|
|
|
5821
|
-
/** @deprecated Use {@link Editor.getDraggingOverShape} instead */
|
|
5822
|
-
getDroppingOverShape(point: Vec, droppingShapes: TLShape[]): TLShape | undefined {
|
|
5823
|
-
return this.getDraggingOverShape(point, droppingShapes)
|
|
5824
|
-
}
|
|
5825
|
-
|
|
5826
5817
|
/**
|
|
5827
5818
|
* Get the shape that some shapes should be dropped on at a given point.
|
|
5828
5819
|
*
|
|
@@ -5833,33 +5824,35 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
5833
5824
|
*
|
|
5834
5825
|
* @public
|
|
5835
5826
|
*/
|
|
5836
|
-
|
|
5837
|
-
//
|
|
5838
|
-
const
|
|
5839
|
-
|
|
5840
|
-
|
|
5827
|
+
getDroppingOverShape(point: VecLike, droppingShapes: TLShape[] = []) {
|
|
5828
|
+
// starting from the top...
|
|
5829
|
+
const currentPageShapesSorted = this.getCurrentPageShapesSorted()
|
|
5830
|
+
for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
|
|
5831
|
+
const shape = currentPageShapesSorted[i]
|
|
5841
5832
|
|
|
5842
|
-
|
|
5843
|
-
|
|
5844
|
-
|
|
5845
|
-
|
|
5846
|
-
|
|
5847
|
-
|
|
5848
|
-
!
|
|
5849
|
-
|
|
5850
|
-
|
|
5851
|
-
|
|
5833
|
+
if (
|
|
5834
|
+
// ignore hidden shapes
|
|
5835
|
+
this.isShapeHidden(shape) ||
|
|
5836
|
+
// don't allow dropping on selected shapes
|
|
5837
|
+
this.getSelectedShapeIds().includes(shape.id) ||
|
|
5838
|
+
// only allow shapes that can receive children
|
|
5839
|
+
!this.getShapeUtil(shape).canDropShapes(shape, droppingShapes) ||
|
|
5840
|
+
// don't allow dropping a shape on itself or one of it's children
|
|
5841
|
+
droppingShapes.find((s) => s.id === shape.id || this.hasAncestor(shape, s.id))
|
|
5842
|
+
) {
|
|
5843
|
+
continue
|
|
5844
|
+
}
|
|
5845
|
+
|
|
5846
|
+
// Only allow dropping into the masked page bounds of the shape, e.g. when a frame is
|
|
5847
|
+
// partially clipped by its own parent frame
|
|
5848
|
+
const maskedPageBounds = this.getShapeMaskedPageBounds(shape.id)
|
|
5852
5849
|
|
|
5853
|
-
for (const maybeDraggingOverShape of maybeDraggingOverShapes) {
|
|
5854
|
-
const shapeUtil = this.getShapeUtil(maybeDraggingOverShape)
|
|
5855
|
-
// Any shape that can handle any dragging interactions is a valid target
|
|
5856
5850
|
if (
|
|
5857
|
-
|
|
5858
|
-
|
|
5859
|
-
|
|
5860
|
-
shapeUtil.onDropShapesOver
|
|
5851
|
+
maskedPageBounds &&
|
|
5852
|
+
maskedPageBounds.containsPoint(point) &&
|
|
5853
|
+
this.getShapeGeometry(shape).hitTestPoint(this.getPointInShapeSpace(shape, point), 0, true)
|
|
5861
5854
|
) {
|
|
5862
|
-
return
|
|
5855
|
+
return shape
|
|
5863
5856
|
}
|
|
5864
5857
|
}
|
|
5865
5858
|
}
|
|
@@ -6303,7 +6296,10 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
6303
6296
|
})
|
|
6304
6297
|
const shapesToCreate = shapesToCreateWithOriginals.map(({ shape }) => shape)
|
|
6305
6298
|
|
|
6306
|
-
|
|
6299
|
+
const maxShapesReached =
|
|
6300
|
+
shapesToCreate.length + this.getCurrentPageShapeIds().size > this.options.maxShapesPerPage
|
|
6301
|
+
|
|
6302
|
+
if (maxShapesReached) {
|
|
6307
6303
|
alertMaxShapes(this)
|
|
6308
6304
|
return
|
|
6309
6305
|
}
|
|
@@ -7732,32 +7728,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
7732
7728
|
return {}
|
|
7733
7729
|
}
|
|
7734
7730
|
|
|
7735
|
-
/**
|
|
7736
|
-
* Get whether the provided shape can be created.
|
|
7737
|
-
*
|
|
7738
|
-
* @param shape - The shape or shape IDs to check.
|
|
7739
|
-
*
|
|
7740
|
-
* @public
|
|
7741
|
-
*/
|
|
7742
|
-
canCreateShape<T extends TLUnknownShape>(
|
|
7743
|
-
shape: OptionalKeys<TLShapePartial<T>, 'id'> | T['id']
|
|
7744
|
-
): boolean {
|
|
7745
|
-
return this.canCreateShapes([shape])
|
|
7746
|
-
}
|
|
7747
|
-
|
|
7748
|
-
/**
|
|
7749
|
-
* Get whether the provided shapes can be created.
|
|
7750
|
-
*
|
|
7751
|
-
* @param shapes - The shapes or shape IDs to create.
|
|
7752
|
-
*
|
|
7753
|
-
* @public
|
|
7754
|
-
*/
|
|
7755
|
-
canCreateShapes<T extends TLUnknownShape>(
|
|
7756
|
-
shapes: (T['id'] | OptionalKeys<TLShapePartial<T>, 'id'>)[]
|
|
7757
|
-
): boolean {
|
|
7758
|
-
return shapes.length + this.getCurrentPageShapeIds().size <= this.options.maxShapesPerPage
|
|
7759
|
-
}
|
|
7760
|
-
|
|
7761
7731
|
/**
|
|
7762
7732
|
* Create a single shape.
|
|
7763
7733
|
*
|
|
@@ -7804,7 +7774,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
7804
7774
|
if (maxShapesReached) {
|
|
7805
7775
|
// can't create more shapes than fit on the page
|
|
7806
7776
|
alertMaxShapes(this)
|
|
7807
|
-
// todo: throw an error here? Otherwise we'll need to check every time whether the shapes were actually created
|
|
7808
7777
|
return this
|
|
7809
7778
|
}
|
|
7810
7779
|
|
|
@@ -7837,10 +7806,9 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
7837
7806
|
|
|
7838
7807
|
for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
|
|
7839
7808
|
const parent = currentPageShapesSorted[i]
|
|
7840
|
-
const util = this.getShapeUtil(parent)
|
|
7841
7809
|
if (
|
|
7842
|
-
util.canReceiveNewChildrenOfType(parent, partial.type) &&
|
|
7843
7810
|
!this.isShapeHidden(parent) &&
|
|
7811
|
+
this.getShapeUtil(parent).canReceiveNewChildrenOfType(parent, partial.type) &&
|
|
7844
7812
|
this.isPointInShape(
|
|
7845
7813
|
parent,
|
|
7846
7814
|
// If no parent is provided, then we can treat the
|
|
@@ -7969,8 +7937,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
7969
7937
|
}
|
|
7970
7938
|
})
|
|
7971
7939
|
|
|
7972
|
-
this.emit('created-shapes', shapeRecordsToCreate)
|
|
7973
|
-
this.emit('edit')
|
|
7974
7940
|
this.store.put(shapeRecordsToCreate)
|
|
7975
7941
|
})
|
|
7976
7942
|
|
|
@@ -8365,8 +8331,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
8365
8331
|
updates.push(updated)
|
|
8366
8332
|
}
|
|
8367
8333
|
|
|
8368
|
-
this.emit('edited-shapes', updates)
|
|
8369
|
-
this.emit('edit')
|
|
8370
8334
|
this.store.put(updates)
|
|
8371
8335
|
})
|
|
8372
8336
|
}
|
|
@@ -8416,8 +8380,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
8416
8380
|
})
|
|
8417
8381
|
}
|
|
8418
8382
|
|
|
8419
|
-
this.emit('deleted-shapes', [...allShapeIdsToDelete])
|
|
8420
|
-
this.emit('edit')
|
|
8421
8383
|
return this.run(() => this.store.remove([...allShapeIdsToDelete]))
|
|
8422
8384
|
}
|
|
8423
8385
|
|
|
@@ -9544,8 +9506,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
9544
9506
|
previousPagePoint,
|
|
9545
9507
|
currentScreenPoint,
|
|
9546
9508
|
currentPagePoint,
|
|
9547
|
-
originScreenPoint,
|
|
9548
|
-
originPagePoint,
|
|
9549
9509
|
} = this.inputs
|
|
9550
9510
|
|
|
9551
9511
|
const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
|
|
@@ -9574,8 +9534,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
9574
9534
|
// Reset velocity on pointer down, or when a pinch starts or ends
|
|
9575
9535
|
if (info.name === 'pointer_down' || this.inputs.isPinching) {
|
|
9576
9536
|
pointerVelocity.set(0, 0)
|
|
9577
|
-
originScreenPoint.setTo(currentScreenPoint)
|
|
9578
|
-
originPagePoint.setTo(currentPagePoint)
|
|
9537
|
+
this.inputs.originScreenPoint.setTo(currentScreenPoint)
|
|
9538
|
+
this.inputs.originPagePoint.setTo(currentPagePoint)
|
|
9579
9539
|
}
|
|
9580
9540
|
|
|
9581
9541
|
// todo: We only have to do this if there are multiple users in the document
|
|
@@ -241,9 +241,7 @@ export class HistoryManager<R extends UnknownRecord> {
|
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
bailToMark(id: string) {
|
|
244
|
-
|
|
245
|
-
this._undo({ pushToRedoStack: false, toMark: id })
|
|
246
|
-
}
|
|
244
|
+
this._undo({ pushToRedoStack: false, toMark: id })
|
|
247
245
|
|
|
248
246
|
return this
|
|
249
247
|
}
|
|
@@ -26,7 +26,6 @@ export interface TLMeasureTextOpts {
|
|
|
26
26
|
fontWeight: string
|
|
27
27
|
fontFamily: string
|
|
28
28
|
fontSize: number
|
|
29
|
-
/** This must be a number, e.g. 1.35, not a pixel value. */
|
|
30
29
|
lineHeight: number
|
|
31
30
|
/**
|
|
32
31
|
* When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth
|
|
@@ -76,7 +75,6 @@ export class TextManager {
|
|
|
76
75
|
// we need to save the default styles so that we can restore them when we're done
|
|
77
76
|
// these must be the css names, not the js names for the styles
|
|
78
77
|
this.defaultStyles = {
|
|
79
|
-
'overflow-wrap': 'break-word',
|
|
80
78
|
'word-break': 'auto',
|
|
81
79
|
width: null,
|
|
82
80
|
height: null,
|
|
@@ -125,7 +123,7 @@ export class TextManager {
|
|
|
125
123
|
elm.style.setProperty('font-style', opts.fontStyle)
|
|
126
124
|
elm.style.setProperty('font-weight', opts.fontWeight)
|
|
127
125
|
elm.style.setProperty('font-size', opts.fontSize + 'px')
|
|
128
|
-
elm.style.setProperty('line-height', opts.lineHeight.
|
|
126
|
+
elm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
|
|
129
127
|
elm.style.setProperty('padding', opts.padding)
|
|
130
128
|
|
|
131
129
|
if (opts.maxWidth) {
|
|
@@ -289,7 +287,7 @@ export class TextManager {
|
|
|
289
287
|
elm.style.setProperty('font-style', opts.fontStyle)
|
|
290
288
|
elm.style.setProperty('font-weight', opts.fontWeight)
|
|
291
289
|
elm.style.setProperty('font-size', opts.fontSize + 'px')
|
|
292
|
-
elm.style.setProperty('line-height', opts.lineHeight.
|
|
290
|
+
elm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
|
|
293
291
|
|
|
294
292
|
const elementWidth = Math.ceil(opts.width - opts.padding * 2)
|
|
295
293
|
elm.style.setProperty('width', `${elementWidth}px`)
|
|
@@ -4,15 +4,12 @@ import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
|
|
|
4
4
|
import {
|
|
5
5
|
RecordProps,
|
|
6
6
|
TLHandle,
|
|
7
|
-
TLParentId,
|
|
8
7
|
TLPropsMigrations,
|
|
9
8
|
TLShape,
|
|
10
9
|
TLShapeCrop,
|
|
11
|
-
TLShapeId,
|
|
12
10
|
TLShapePartial,
|
|
13
11
|
TLUnknownShape,
|
|
14
12
|
} from '@tldraw/tlschema'
|
|
15
|
-
import { IndexKey } from '@tldraw/utils'
|
|
16
13
|
import { ReactElement } from 'react'
|
|
17
14
|
import { Box, SelectionHandle } from '../../primitives/Box'
|
|
18
15
|
import { Vec } from '../../primitives/Vec'
|
|
@@ -390,6 +387,17 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
|
|
390
387
|
return false
|
|
391
388
|
}
|
|
392
389
|
|
|
390
|
+
/**
|
|
391
|
+
* Get whether the shape can receive children of a given type.
|
|
392
|
+
*
|
|
393
|
+
* @param shape - The shape type.
|
|
394
|
+
* @param shapes - The shapes that are being dropped.
|
|
395
|
+
* @public
|
|
396
|
+
*/
|
|
397
|
+
canDropShapes(_shape: Shape, _shapes: TLShape[]) {
|
|
398
|
+
return false
|
|
399
|
+
}
|
|
400
|
+
|
|
393
401
|
/**
|
|
394
402
|
* Get the shape as an SVG object.
|
|
395
403
|
*
|
|
@@ -509,16 +517,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
|
|
509
517
|
): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void
|
|
510
518
|
|
|
511
519
|
/**
|
|
512
|
-
* A callback called when some other shapes are dragged
|
|
513
|
-
*
|
|
514
|
-
* @param shape - The shape.
|
|
515
|
-
* @param shapes - The shapes that are being dragged in.
|
|
516
|
-
* @public
|
|
517
|
-
*/
|
|
518
|
-
onDragShapesIn?(shape: Shape, shapes: TLShape[], info: TLDragShapesInInfo): void
|
|
519
|
-
|
|
520
|
-
/**
|
|
521
|
-
* A callback called when some other shapes are dragged over this one. This fires when the shapes are dragged over the shape for the first time (after the onDragShapesIn callback), and again on every update while the shapes are being dragged.
|
|
520
|
+
* A callback called when some other shapes are dragged over this one.
|
|
522
521
|
*
|
|
523
522
|
* @example
|
|
524
523
|
*
|
|
@@ -532,7 +531,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
|
|
532
531
|
* @param shapes - The shapes that are being dragged over this one.
|
|
533
532
|
* @public
|
|
534
533
|
*/
|
|
535
|
-
onDragShapesOver?(shape: Shape, shapes: TLShape[]
|
|
534
|
+
onDragShapesOver?(shape: Shape, shapes: TLShape[]): void
|
|
536
535
|
|
|
537
536
|
/**
|
|
538
537
|
* A callback called when some other shapes are dragged out of this one.
|
|
@@ -541,7 +540,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
|
|
541
540
|
* @param shapes - The shapes that are being dragged out.
|
|
542
541
|
* @public
|
|
543
542
|
*/
|
|
544
|
-
onDragShapesOut?(shape: Shape, shapes: TLShape[]
|
|
543
|
+
onDragShapesOut?(shape: Shape, shapes: TLShape[]): void
|
|
545
544
|
|
|
546
545
|
/**
|
|
547
546
|
* A callback called when some other shapes are dropped over this one.
|
|
@@ -550,7 +549,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
|
|
550
549
|
* @param shapes - The shapes that are being dropped over this one.
|
|
551
550
|
* @public
|
|
552
551
|
*/
|
|
553
|
-
onDropShapesOver?(shape: Shape, shapes: TLShape[]
|
|
552
|
+
onDropShapesOver?(shape: Shape, shapes: TLShape[]): void
|
|
554
553
|
|
|
555
554
|
/**
|
|
556
555
|
* A callback called when a shape starts being resized.
|
|
@@ -746,37 +745,6 @@ export interface TLCropInfo<T extends TLShape> {
|
|
|
746
745
|
crop: TLShapeCrop
|
|
747
746
|
uncroppedSize: { w: number; h: number }
|
|
748
747
|
initialShape: T
|
|
749
|
-
aspectRatioLocked?: boolean
|
|
750
|
-
}
|
|
751
|
-
|
|
752
|
-
/** @public */
|
|
753
|
-
export interface TLDragShapesInInfo {
|
|
754
|
-
initialDraggingOverShapeId: TLShapeId | null
|
|
755
|
-
prevDraggingOverShapeId: TLShapeId | null
|
|
756
|
-
initialParentIds: Map<TLShapeId, TLParentId>
|
|
757
|
-
initialIndices: Map<TLShapeId, IndexKey>
|
|
758
|
-
}
|
|
759
|
-
|
|
760
|
-
/** @public */
|
|
761
|
-
export interface TLDragShapesOverInfo {
|
|
762
|
-
initialDraggingOverShapeId: TLShapeId | null
|
|
763
|
-
initialParentIds: Map<TLShapeId, TLParentId>
|
|
764
|
-
initialIndices: Map<TLShapeId, IndexKey>
|
|
765
|
-
}
|
|
766
|
-
|
|
767
|
-
/** @public */
|
|
768
|
-
export interface TLDragShapesOutInfo {
|
|
769
|
-
nextDraggingOverShapeId: TLShapeId | null
|
|
770
|
-
initialDraggingOverShapeId: TLShapeId | null
|
|
771
|
-
initialParentIds: Map<TLShapeId, TLParentId>
|
|
772
|
-
initialIndices: Map<TLShapeId, IndexKey>
|
|
773
|
-
}
|
|
774
|
-
|
|
775
|
-
/** @public */
|
|
776
|
-
export interface TLDropShapesOverInfo {
|
|
777
|
-
initialDraggingOverShapeId: TLShapeId | null
|
|
778
|
-
initialParentIds: Map<TLShapeId, TLParentId>
|
|
779
|
-
initialIndices: Map<TLShapeId, IndexKey>
|
|
780
748
|
}
|
|
781
749
|
|
|
782
750
|
/**
|
|
@@ -11,33 +11,29 @@ export class Pointing extends StateNode {
|
|
|
11
11
|
static override id = 'pointing'
|
|
12
12
|
|
|
13
13
|
override onPointerMove(info: TLPointerEventInfo) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const { originPagePoint } = editor.inputs
|
|
14
|
+
if (this.editor.inputs.isDragging) {
|
|
15
|
+
const { originPagePoint } = this.editor.inputs
|
|
17
16
|
|
|
18
17
|
const shapeType = (this.parent as BaseBoxShapeTool)!.shapeType
|
|
19
18
|
|
|
20
19
|
const id = createShapeId()
|
|
21
20
|
|
|
22
|
-
const creatingMarkId = editor.markHistoryStoppingPoint(`creating_box:${id}`)
|
|
23
|
-
const newPoint = maybeSnapToGrid(originPagePoint, editor)
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
21
|
+
const creatingMarkId = this.editor.markHistoryStoppingPoint(`creating_box:${id}`)
|
|
22
|
+
const newPoint = maybeSnapToGrid(originPagePoint, this.editor)
|
|
23
|
+
this.editor
|
|
24
|
+
.createShapes<TLBaseBoxShape>([
|
|
25
|
+
{
|
|
26
|
+
id,
|
|
27
|
+
type: shapeType,
|
|
28
|
+
x: newPoint.x,
|
|
29
|
+
y: newPoint.y,
|
|
30
|
+
props: {
|
|
31
|
+
w: 1,
|
|
32
|
+
h: 1,
|
|
33
|
+
},
|
|
35
34
|
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const shape = editor.getShape(id)
|
|
39
|
-
if (!shape) this.cancel()
|
|
40
|
-
editor.select(id)
|
|
35
|
+
])
|
|
36
|
+
.select(id)
|
|
41
37
|
|
|
42
38
|
const parent = this.parent as BaseBoxShapeTool
|
|
43
39
|
this.editor.setCurrentTool(
|
|
@@ -83,7 +79,6 @@ export class Pointing extends StateNode {
|
|
|
83
79
|
|
|
84
80
|
this.editor.markHistoryStoppingPoint(`creating_box:${id}`)
|
|
85
81
|
|
|
86
|
-
// Allow this to trigger the max shapes reached alert
|
|
87
82
|
// todo: add scale here when dynamic size is enabled (is this still needed?)
|
|
88
83
|
this.editor.createShapes<TLBaseBoxShape>([
|
|
89
84
|
{
|
|
@@ -18,10 +18,6 @@ export interface TLEventMap {
|
|
|
18
18
|
frame: [number]
|
|
19
19
|
'select-all-text': [{ shapeId: TLShapeId }]
|
|
20
20
|
'place-caret': [{ shapeId: TLShapeId; point: { x: number; y: number } }]
|
|
21
|
-
'created-shapes': [TLRecord[]]
|
|
22
|
-
'edited-shapes': [TLRecord[]]
|
|
23
|
-
'deleted-shapes': [TLShapeId[]]
|
|
24
|
-
edit: []
|
|
25
21
|
}
|
|
26
22
|
|
|
27
23
|
/** @public */
|
|
@@ -44,7 +44,6 @@ export const Geometry2dFilters: {
|
|
|
44
44
|
/** @public */
|
|
45
45
|
export interface TransformedGeometry2dOptions {
|
|
46
46
|
isLabel?: boolean
|
|
47
|
-
isEmptyLabel?: boolean
|
|
48
47
|
isInternal?: boolean
|
|
49
48
|
debugColor?: string
|
|
50
49
|
ignore?: boolean
|
|
@@ -58,24 +57,20 @@ export interface Geometry2dOptions extends TransformedGeometry2dOptions {
|
|
|
58
57
|
|
|
59
58
|
/** @public */
|
|
60
59
|
export abstract class Geometry2d {
|
|
61
|
-
// todo: consider making accessors for these too, so that they can be overridden in subclasses by geometries with more complex logic
|
|
62
60
|
isFilled = false
|
|
63
61
|
isClosed = true
|
|
64
62
|
isLabel = false
|
|
65
|
-
isEmptyLabel = false
|
|
66
63
|
isInternal = false
|
|
67
64
|
debugColor?: string
|
|
68
65
|
ignore?: boolean
|
|
69
66
|
|
|
70
67
|
constructor(opts: Geometry2dOptions) {
|
|
71
|
-
const { isLabel = false, isEmptyLabel = false, isInternal = false } = opts
|
|
72
68
|
this.isFilled = opts.isFilled
|
|
73
69
|
this.isClosed = opts.isClosed
|
|
70
|
+
this.isLabel = opts.isLabel ?? false
|
|
71
|
+
this.isInternal = opts.isInternal ?? false
|
|
74
72
|
this.debugColor = opts.debugColor
|
|
75
73
|
this.ignore = opts.ignore
|
|
76
|
-
this.isLabel = isLabel
|
|
77
|
-
this.isEmptyLabel = isEmptyLabel
|
|
78
|
-
this.isInternal = isInternal
|
|
79
74
|
}
|
|
80
75
|
|
|
81
76
|
isExcludedByFilter(filters?: Geometry2dFilters) {
|
package/src/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 = '3.14.0-canary.
|
|
4
|
+
export const version = '3.14.0-canary.dd6c729c17b0'
|
|
5
5
|
export const publishDates = {
|
|
6
6
|
major: '2024-09-13T14:36:29.063Z',
|
|
7
|
-
minor: '2025-06-
|
|
8
|
-
patch: '2025-06-
|
|
7
|
+
minor: '2025-06-18T13:33:44.333Z',
|
|
8
|
+
patch: '2025-06-18T13:33:44.333Z',
|
|
9
9
|
}
|