@tldraw/editor 3.14.0-canary.f907ed7d9ee5 → 3.14.0-canary.faba3f64c07f
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 +133 -50
- package/dist-cjs/index.js +4 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +60 -22
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +73 -42
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +0 -10
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/tools/StateNode.js +3 -3
- package/dist-cjs/lib/editor/tools/StateNode.js.map +2 -2
- package/dist-cjs/lib/editor/types/emit-types.js.map +1 -1
- package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
- package/dist-cjs/lib/hooks/useCanvasEvents.js +1 -2
- package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js +6 -2
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +2 -2
- package/dist-cjs/lib/utils/reparenting.js +232 -0
- package/dist-cjs/lib/utils/reparenting.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 +133 -50
- package/dist-esm/index.mjs +4 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +60 -22
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +73 -42
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +0 -10
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/tools/StateNode.mjs +3 -3
- package/dist-esm/lib/editor/tools/StateNode.mjs.map +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs +1 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +6 -2
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +2 -2
- package/dist-esm/lib/utils/reparenting.mjs +216 -0
- package/dist-esm/lib/utils/reparenting.mjs.map +7 -0
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +442 -492
- package/package.json +7 -7
- package/src/index.ts +7 -0
- package/src/lib/editor/Editor.ts +73 -30
- package/src/lib/editor/managers/TextManager/TextManager.test.ts +1 -5
- package/src/lib/editor/managers/TextManager/TextManager.ts +118 -86
- package/src/lib/editor/shapes/ShapeUtil.ts +47 -15
- package/src/lib/editor/tools/StateNode.ts +3 -3
- package/src/lib/editor/types/emit-types.ts +4 -0
- package/src/lib/editor/types/external-content.ts +11 -2
- package/src/lib/hooks/useCanvasEvents.ts +0 -1
- package/src/lib/primitives/geometry/Geometry2d.ts +7 -2
- package/src/lib/utils/reparenting.ts +383 -0
- package/src/version.ts +3 -3
|
@@ -323,6 +323,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
323
323
|
__publicField(this, "externalContentHandlers", {
|
|
324
324
|
text: null,
|
|
325
325
|
files: null,
|
|
326
|
+
"file-replace": null,
|
|
326
327
|
embed: null,
|
|
327
328
|
"svg-text": null,
|
|
328
329
|
url: null,
|
|
@@ -439,6 +440,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
439
440
|
this.disposables.add(() => this.user.dispose());
|
|
440
441
|
this.getContainer = getContainer;
|
|
441
442
|
this.textMeasure = new import_TextManager.TextManager(this);
|
|
443
|
+
this.disposables.add(() => this.textMeasure.dispose());
|
|
442
444
|
this.fonts = new import_FontManager.FontManager(this, fontAssetUrls);
|
|
443
445
|
this._tickManager = new import_TickManager.TickManager(this);
|
|
444
446
|
class NewRoot extends import_RootState.RootState {
|
|
@@ -1640,6 +1642,19 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
1640
1642
|
getSelectionPageBounds() {
|
|
1641
1643
|
return this.getShapesPageBounds(this.getSelectedShapeIds());
|
|
1642
1644
|
}
|
|
1645
|
+
/**
|
|
1646
|
+
* The bounds of the selection bounding box in the current page space.
|
|
1647
|
+
*
|
|
1648
|
+
* @readonly
|
|
1649
|
+
* @public
|
|
1650
|
+
*/
|
|
1651
|
+
getSelectionScreenBounds() {
|
|
1652
|
+
const bounds = this.getSelectionPageBounds();
|
|
1653
|
+
if (!bounds) return void 0;
|
|
1654
|
+
const { x, y } = this.pageToScreen(bounds.point);
|
|
1655
|
+
const zoom = this.getZoomLevel();
|
|
1656
|
+
return new import_Box.Box(x, y, bounds.width * zoom, bounds.height * zoom);
|
|
1657
|
+
}
|
|
1643
1658
|
/**
|
|
1644
1659
|
* @internal
|
|
1645
1660
|
*/
|
|
@@ -4116,7 +4131,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
4116
4131
|
if (!id) return void 0;
|
|
4117
4132
|
const freshShape = this.getShape(id);
|
|
4118
4133
|
if (freshShape === void 0 || !(0, import_tlschema.isShapeId)(freshShape.parentId)) return void 0;
|
|
4119
|
-
return this.
|
|
4134
|
+
return this.getShape(freshShape.parentId);
|
|
4120
4135
|
}
|
|
4121
4136
|
/**
|
|
4122
4137
|
* If siblingShape and targetShape are siblings, this returns targetShape. If targetShape has an
|
|
@@ -4248,6 +4263,9 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
4248
4263
|
if (!pagePoint) continue;
|
|
4249
4264
|
const newPoint = invertedParentTransform.applyToPoint(pagePoint);
|
|
4250
4265
|
const newRotation = pageTransform.rotation() - parentPageRotation;
|
|
4266
|
+
if (shape.id === parentId) {
|
|
4267
|
+
throw Error("Attempted to reparent a shape to itself!");
|
|
4268
|
+
}
|
|
4251
4269
|
changes.push({
|
|
4252
4270
|
id: shape.id,
|
|
4253
4271
|
type: shape.type,
|
|
@@ -4340,6 +4358,10 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
4340
4358
|
}
|
|
4341
4359
|
return shapeIds;
|
|
4342
4360
|
}
|
|
4361
|
+
/** @deprecated Use {@link Editor.getDraggingOverShape} instead */
|
|
4362
|
+
getDroppingOverShape(point, droppingShapes) {
|
|
4363
|
+
return this.getDraggingOverShape(point, droppingShapes);
|
|
4364
|
+
}
|
|
4343
4365
|
/**
|
|
4344
4366
|
* Get the shape that some shapes should be dropped on at a given point.
|
|
4345
4367
|
*
|
|
@@ -4350,22 +4372,20 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
4350
4372
|
*
|
|
4351
4373
|
* @public
|
|
4352
4374
|
*/
|
|
4353
|
-
|
|
4354
|
-
const
|
|
4355
|
-
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
|
|
4359
|
-
|
|
4360
|
-
|
|
4361
|
-
|
|
4362
|
-
|
|
4363
|
-
|
|
4364
|
-
|
|
4365
|
-
|
|
4366
|
-
|
|
4367
|
-
if (maskedPageBounds && maskedPageBounds.containsPoint(point) && this.getShapeGeometry(shape).hitTestPoint(this.getPointInShapeSpace(shape, point), 0, true)) {
|
|
4368
|
-
return shape;
|
|
4375
|
+
getDraggingOverShape(point, droppingShapes) {
|
|
4376
|
+
const draggingShapes = (0, import_utils.compact)(droppingShapes.map((s) => this.getShape(s))).filter(
|
|
4377
|
+
(s) => !s.isLocked && !this.isShapeHidden(s)
|
|
4378
|
+
);
|
|
4379
|
+
const maybeDraggingOverShapes = this.getShapesAtPoint(point, {
|
|
4380
|
+
hitInside: true,
|
|
4381
|
+
margin: 0
|
|
4382
|
+
}).filter(
|
|
4383
|
+
(s) => !droppingShapes.includes(s) && !s.isLocked && !this.isShapeHidden(s) && !draggingShapes.includes(s)
|
|
4384
|
+
);
|
|
4385
|
+
for (const maybeDraggingOverShape of maybeDraggingOverShapes) {
|
|
4386
|
+
const shapeUtil = this.getShapeUtil(maybeDraggingOverShape);
|
|
4387
|
+
if (shapeUtil.onDragShapesOver || shapeUtil.onDragShapesIn || shapeUtil.onDragShapesOut || shapeUtil.onDropShapesOver) {
|
|
4388
|
+
return maybeDraggingOverShape;
|
|
4369
4389
|
}
|
|
4370
4390
|
}
|
|
4371
4391
|
}
|
|
@@ -4642,7 +4662,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
4642
4662
|
*/
|
|
4643
4663
|
duplicateShapes(shapes, offset) {
|
|
4644
4664
|
this.run(() => {
|
|
4645
|
-
const
|
|
4665
|
+
const _ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
|
|
4666
|
+
const ids = this._shouldIgnoreShapeLock ? _ids : this._getUnlockedShapeIds(_ids);
|
|
4646
4667
|
if (ids.length <= 0) return this;
|
|
4647
4668
|
const initialIds = new Set(ids);
|
|
4648
4669
|
const shapeIdSet = this.getShapeAndDescendantIds(ids);
|
|
@@ -5775,7 +5796,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
5775
5796
|
let parentId = this.getFocusedGroupId();
|
|
5776
5797
|
for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
|
|
5777
5798
|
const parent = currentPageShapesSorted[i];
|
|
5778
|
-
|
|
5799
|
+
const util = this.getShapeUtil(parent);
|
|
5800
|
+
if (util.canReceiveNewChildrenOfType(parent, partial.type) && !this.isShapeHidden(parent) && this.isPointInShape(
|
|
5779
5801
|
parent,
|
|
5780
5802
|
// If no parent is provided, then we can treat the
|
|
5781
5803
|
// shape's provided x/y as being in the page's space.
|
|
@@ -5850,6 +5872,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
5850
5872
|
...shape.meta
|
|
5851
5873
|
};
|
|
5852
5874
|
});
|
|
5875
|
+
this.emit("created-shapes", shapeRecordsToCreate);
|
|
5876
|
+
this.emit("edit");
|
|
5853
5877
|
this.store.put(shapeRecordsToCreate);
|
|
5854
5878
|
});
|
|
5855
5879
|
return this;
|
|
@@ -6091,6 +6115,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
6091
6115
|
updated = this.getShapeUtil(shape).onBeforeUpdate?.(shape, updated) ?? updated;
|
|
6092
6116
|
updates.push(updated);
|
|
6093
6117
|
}
|
|
6118
|
+
this.emit("edited-shapes", updates);
|
|
6119
|
+
this.emit("edit");
|
|
6094
6120
|
this.store.put(updates);
|
|
6095
6121
|
});
|
|
6096
6122
|
}
|
|
@@ -6112,6 +6138,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
6112
6138
|
allShapeIdsToDelete.add(childId);
|
|
6113
6139
|
});
|
|
6114
6140
|
}
|
|
6141
|
+
this.emit("deleted-shapes", [...allShapeIdsToDelete]);
|
|
6142
|
+
this.emit("edit");
|
|
6115
6143
|
return this.run(() => this.store.remove([...allShapeIdsToDelete]));
|
|
6116
6144
|
}
|
|
6117
6145
|
deleteShape(_id) {
|
|
@@ -6455,6 +6483,14 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
6455
6483
|
async putExternalContent(info) {
|
|
6456
6484
|
return this.externalContentHandlers[info.type]?.(info);
|
|
6457
6485
|
}
|
|
6486
|
+
/**
|
|
6487
|
+
* Handle replacing external content.
|
|
6488
|
+
*
|
|
6489
|
+
* @param info - Info about the external content.
|
|
6490
|
+
*/
|
|
6491
|
+
async replaceExternalContent(info) {
|
|
6492
|
+
return this.externalContentHandlers[info.type]?.(info);
|
|
6493
|
+
}
|
|
6458
6494
|
/**
|
|
6459
6495
|
* Get content that can be exported for the given shape ids.
|
|
6460
6496
|
*
|
|
@@ -6872,7 +6908,9 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
6872
6908
|
previousScreenPoint,
|
|
6873
6909
|
previousPagePoint,
|
|
6874
6910
|
currentScreenPoint,
|
|
6875
|
-
currentPagePoint
|
|
6911
|
+
currentPagePoint,
|
|
6912
|
+
originScreenPoint,
|
|
6913
|
+
originPagePoint
|
|
6876
6914
|
} = this.inputs;
|
|
6877
6915
|
const { screenBounds } = this.store.unsafeGetWithoutCapture(import_tlschema.TLINSTANCE_ID);
|
|
6878
6916
|
const { x: cx, y: cy, z: cz } = (0, import_state.unsafe__withoutCapture)(() => this.getCamera());
|
|
@@ -6890,8 +6928,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
6890
6928
|
this.inputs.isPen = info.type === "pointer" && info.isPen;
|
|
6891
6929
|
if (info.name === "pointer_down" || this.inputs.isPinching) {
|
|
6892
6930
|
pointerVelocity.set(0, 0);
|
|
6893
|
-
|
|
6894
|
-
|
|
6931
|
+
originScreenPoint.setTo(currentScreenPoint);
|
|
6932
|
+
originPagePoint.setTo(currentPagePoint);
|
|
6895
6933
|
}
|
|
6896
6934
|
this.run(
|
|
6897
6935
|
() => {
|