@tldraw/editor 3.15.0 → 3.16.0-canary.0e0fb8bde89d
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 +101 -0
- package/dist-cjs/index.js +3 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/TldrawEditor.js +3 -1
- 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 +4 -26
- package/dist-cjs/lib/components/Shape.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js +53 -0
- package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js.map +7 -0
- package/dist-cjs/lib/editor/Editor.js +64 -35
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- 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/hooks/useCanvasEvents.js +24 -20
- package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
- package/dist-cjs/lib/hooks/useEditorComponents.js +2 -0
- package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
- package/dist-cjs/lib/hooks/useStateAttribute.js +35 -0
- package/dist-cjs/lib/hooks/useStateAttribute.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 +101 -0
- package/dist-esm/index.mjs +5 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +3 -1
- 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 +4 -26
- package/dist-esm/lib/components/Shape.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultShapeWrapper.mjs +23 -0
- package/dist-esm/lib/components/default-components/DefaultShapeWrapper.mjs.map +7 -0
- package/dist-esm/lib/editor/Editor.mjs +64 -35
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs +25 -21
- package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
- package/dist-esm/lib/hooks/useEditorComponents.mjs +4 -0
- package/dist-esm/lib/hooks/useEditorComponents.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/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +4 -23
- package/package.json +7 -7
- package/src/index.ts +5 -0
- package/src/lib/TldrawEditor.tsx +7 -5
- package/src/lib/components/MenuClickCapture.tsx +0 -8
- package/src/lib/components/Shape.tsx +6 -21
- package/src/lib/components/default-components/DefaultShapeWrapper.tsx +35 -0
- package/src/lib/editor/Editor.ts +71 -35
- package/src/lib/editor/shapes/ShapeUtil.ts +57 -0
- package/src/lib/editor/types/misc-types.ts +19 -0
- package/src/lib/hooks/useCanvasEvents.ts +39 -32
- package/src/lib/hooks/useEditorComponents.tsx +7 -1
- package/src/lib/hooks/useStateAttribute.ts +15 -0
- package/src/version.ts +3 -3
|
@@ -2357,28 +2357,11 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
2357
2357
|
{ history: "ignore" }
|
|
2358
2358
|
);
|
|
2359
2359
|
const { currentScreenPoint, currentPagePoint } = this.inputs;
|
|
2360
|
-
const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID);
|
|
2361
2360
|
if (currentScreenPoint.x / z - x !== currentPagePoint.x || currentScreenPoint.y / z - y !== currentPagePoint.y) {
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
// weird but true: we need to put the screen point back into client space
|
|
2367
|
-
point: Vec.AddXY(currentScreenPoint, screenBounds.x, screenBounds.y),
|
|
2368
|
-
pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE,
|
|
2369
|
-
ctrlKey: this.inputs.ctrlKey,
|
|
2370
|
-
altKey: this.inputs.altKey,
|
|
2371
|
-
shiftKey: this.inputs.shiftKey,
|
|
2372
|
-
metaKey: this.inputs.metaKey,
|
|
2373
|
-
accelKey: isAccelKey(this.inputs),
|
|
2374
|
-
button: 0,
|
|
2375
|
-
isPen: this.getInstanceState().isPenMode ?? false
|
|
2376
|
-
};
|
|
2377
|
-
if (opts?.immediate) {
|
|
2378
|
-
this._flushEventForTick(event);
|
|
2379
|
-
} else {
|
|
2380
|
-
this.dispatch(event);
|
|
2381
|
-
}
|
|
2361
|
+
this.updatePointer({
|
|
2362
|
+
immediate: opts?.immediate,
|
|
2363
|
+
pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE
|
|
2364
|
+
});
|
|
2382
2365
|
}
|
|
2383
2366
|
this._tickCameraState();
|
|
2384
2367
|
});
|
|
@@ -3347,19 +3330,24 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
3347
3330
|
*/
|
|
3348
3331
|
deletePage(page) {
|
|
3349
3332
|
const id = typeof page === "string" ? page : page.id;
|
|
3350
|
-
this.run(
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3333
|
+
this.run(
|
|
3334
|
+
() => {
|
|
3335
|
+
if (this.getIsReadonly()) return;
|
|
3336
|
+
const pages = this.getPages();
|
|
3337
|
+
if (pages.length === 1) return;
|
|
3338
|
+
const deletedPage = this.getPage(id);
|
|
3339
|
+
if (!deletedPage) return;
|
|
3340
|
+
if (id === this.getCurrentPageId()) {
|
|
3341
|
+
const index = pages.findIndex((page2) => page2.id === id);
|
|
3342
|
+
const next = pages[index - 1] ?? pages[index + 1];
|
|
3343
|
+
this.setCurrentPage(next.id);
|
|
3344
|
+
}
|
|
3345
|
+
const shapes = this.getSortedChildIdsForParent(deletedPage.id);
|
|
3346
|
+
this.deleteShapes(shapes);
|
|
3347
|
+
this.store.remove([deletedPage.id]);
|
|
3348
|
+
},
|
|
3349
|
+
{ ignoreShapeLock: true }
|
|
3350
|
+
);
|
|
3363
3351
|
return this;
|
|
3364
3352
|
}
|
|
3365
3353
|
/**
|
|
@@ -3973,7 +3961,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
3973
3961
|
const geometry = this.getShapeGeometry(shape);
|
|
3974
3962
|
const isGroup = geometry instanceof Group2d;
|
|
3975
3963
|
const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
|
|
3976
|
-
if (this.isShapeOfType(shape, "frame") || this.isShapeOfType(shape, "
|
|
3964
|
+
if (this.isShapeOfType(shape, "frame") || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
|
|
3977
3965
|
for (const childGeometry of geometry.children) {
|
|
3978
3966
|
if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
|
|
3979
3967
|
return shape;
|
|
@@ -7062,6 +7050,47 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
7062
7050
|
this.dispatch({ type: "misc", name: "complete" });
|
|
7063
7051
|
return this;
|
|
7064
7052
|
}
|
|
7053
|
+
/**
|
|
7054
|
+
* Dispatch a pointer move event in the current position of the pointer. This is useful when
|
|
7055
|
+
* external circumstances have changed (e.g. the camera moved or a shape was moved) and you want
|
|
7056
|
+
* the current interaction to respond to that change.
|
|
7057
|
+
*
|
|
7058
|
+
* @example
|
|
7059
|
+
* ```ts
|
|
7060
|
+
* editor.updatePointer()
|
|
7061
|
+
* ```
|
|
7062
|
+
*
|
|
7063
|
+
* @param options - The options for updating the pointer.
|
|
7064
|
+
* @returns The editor instance.
|
|
7065
|
+
* @public
|
|
7066
|
+
*/
|
|
7067
|
+
updatePointer(options) {
|
|
7068
|
+
const event = {
|
|
7069
|
+
type: "pointer",
|
|
7070
|
+
target: "canvas",
|
|
7071
|
+
name: "pointer_move",
|
|
7072
|
+
point: options?.point ?? // weird but true: what `inputs` calls screen-space is actually viewport space. so
|
|
7073
|
+
// we need to convert back into true screen space first. we should fix this...
|
|
7074
|
+
Vec.Add(
|
|
7075
|
+
this.inputs.currentScreenPoint,
|
|
7076
|
+
this.store.unsafeGetWithoutCapture(TLINSTANCE_ID).screenBounds
|
|
7077
|
+
),
|
|
7078
|
+
pointerId: options?.pointerId ?? 0,
|
|
7079
|
+
button: options?.button ?? 0,
|
|
7080
|
+
isPen: options?.isPen ?? this.inputs.isPen,
|
|
7081
|
+
shiftKey: options?.shiftKey ?? this.inputs.shiftKey,
|
|
7082
|
+
altKey: options?.altKey ?? this.inputs.altKey,
|
|
7083
|
+
ctrlKey: options?.ctrlKey ?? this.inputs.ctrlKey,
|
|
7084
|
+
metaKey: options?.metaKey ?? this.inputs.metaKey,
|
|
7085
|
+
accelKey: options?.accelKey ?? isAccelKey(this.inputs)
|
|
7086
|
+
};
|
|
7087
|
+
if (options?.immediate) {
|
|
7088
|
+
this._flushEventForTick(event);
|
|
7089
|
+
} else {
|
|
7090
|
+
this.dispatch(event);
|
|
7091
|
+
}
|
|
7092
|
+
return this;
|
|
7093
|
+
}
|
|
7065
7094
|
/**
|
|
7066
7095
|
* Puts the editor into focused mode.
|
|
7067
7096
|
*
|