@tldraw/editor 4.1.0-canary.54e71ea20e0d → 4.1.0-canary.55679d7781d6
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 +16 -1
- package/dist-cjs/index.js +1 -1
- package/dist-cjs/lib/components/MenuClickCapture.js +30 -15
- package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +4 -2
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/derivations/parentsToChildren.js +3 -7
- package/dist-cjs/lib/editor/derivations/parentsToChildren.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +67 -2
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/hooks/useCanvasEvents.js +2 -1
- package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
- package/dist-cjs/lib/license/LicenseManager.js +2 -0
- package/dist-cjs/lib/license/LicenseManager.js.map +2 -2
- package/dist-cjs/lib/license/Watermark.js +4 -4
- package/dist-cjs/lib/license/Watermark.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js +5 -0
- 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 +16 -1
- package/dist-esm/index.mjs +1 -1
- package/dist-esm/lib/components/MenuClickCapture.mjs +30 -15
- package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +5 -2
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/derivations/parentsToChildren.mjs +3 -7
- package/dist-esm/lib/editor/derivations/parentsToChildren.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +67 -2
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs +2 -1
- package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
- package/dist-esm/lib/license/LicenseManager.mjs +2 -0
- package/dist-esm/lib/license/LicenseManager.mjs.map +2 -2
- package/dist-esm/lib/license/Watermark.mjs +4 -4
- package/dist-esm/lib/license/Watermark.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +5 -0
- 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 +7 -2
- package/package.json +7 -7
- package/src/lib/components/MenuClickCapture.tsx +35 -17
- package/src/lib/editor/Editor.ts +5 -2
- package/src/lib/editor/derivations/parentsToChildren.ts +4 -10
- package/src/lib/editor/managers/SnapManager/HandleSnaps.ts +91 -4
- package/src/lib/editor/shapes/ShapeUtil.ts +10 -0
- package/src/lib/hooks/useCanvasEvents.ts +8 -1
- package/src/lib/license/LicenseManager.ts +8 -0
- package/src/lib/license/Watermark.tsx +4 -4
- package/src/lib/primitives/geometry/Geometry2d.ts +6 -0
- package/src/version.ts +3 -3
package/dist-cjs/index.d.ts
CHANGED
|
@@ -1564,7 +1564,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1564
1564
|
* @readonly
|
|
1565
1565
|
*/
|
|
1566
1566
|
getOnlySelectedShape(): null | TLShape;
|
|
1567
|
-
|
|
1567
|
+
/**
|
|
1568
|
+
* Get the page bounds of all the provided shapes.
|
|
1569
|
+
*
|
|
1570
|
+
* @public
|
|
1571
|
+
*/
|
|
1572
|
+
getShapesPageBounds(shapeIds: TLShapeId[]): Box | null;
|
|
1568
1573
|
/**
|
|
1569
1574
|
* The current page bounds of all the selected shapes. If the
|
|
1570
1575
|
* selection is rotated, then these bounds are the axis-aligned
|
|
@@ -4427,6 +4432,7 @@ export declare class HandleSnaps {
|
|
|
4427
4432
|
private iterateSnapPointsInPageSpace;
|
|
4428
4433
|
private iterateSnapOutlines;
|
|
4429
4434
|
private getHandleSnapPosition;
|
|
4435
|
+
private getHandleSnapData;
|
|
4430
4436
|
snapHandle({ currentShapeId, handle, }: {
|
|
4431
4437
|
currentShapeId: TLShapeId;
|
|
4432
4438
|
handle: TLHandle;
|
|
@@ -5243,6 +5249,15 @@ export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknown
|
|
|
5243
5249
|
* @public
|
|
5244
5250
|
*/
|
|
5245
5251
|
shouldClipChild?(child: TLShape): boolean;
|
|
5252
|
+
/**
|
|
5253
|
+
* Whether a specific shape should hide in the minimap.
|
|
5254
|
+
*
|
|
5255
|
+
* If not defined, the default behavior is to show all shapes in the minimap.
|
|
5256
|
+
*
|
|
5257
|
+
* @returns boolean indicating if this shape should hide in the minimap
|
|
5258
|
+
* @public
|
|
5259
|
+
*/
|
|
5260
|
+
hideInMinimap?(_shape: Shape): boolean;
|
|
5246
5261
|
/**
|
|
5247
5262
|
* Whether the shape should hide its resize handles when selected.
|
|
5248
5263
|
*
|
package/dist-cjs/index.js
CHANGED
|
@@ -369,7 +369,7 @@ var import_uniq = require("./lib/utils/uniq");
|
|
|
369
369
|
var import_window_open = require("./lib/utils/window-open");
|
|
370
370
|
(0, import_utils.registerTldrawLibraryVersion)(
|
|
371
371
|
"@tldraw/editor",
|
|
372
|
-
"4.1.0-canary.
|
|
372
|
+
"4.1.0-canary.55679d7781d6",
|
|
373
373
|
"cjs"
|
|
374
374
|
);
|
|
375
375
|
//# sourceMappingURL=index.js.map
|
|
@@ -27,6 +27,7 @@ var import_react = require("react");
|
|
|
27
27
|
var import_useCanvasEvents = require("../hooks/useCanvasEvents");
|
|
28
28
|
var import_useEditor = require("../hooks/useEditor");
|
|
29
29
|
var import_Vec = require("../primitives/Vec");
|
|
30
|
+
var import_getPointerInfo = require("../utils/getPointerInfo");
|
|
30
31
|
function MenuClickCapture() {
|
|
31
32
|
const editor = (0, import_useEditor.useEditor)();
|
|
32
33
|
const isMenuOpen = (0, import_state_react.useValue)("is menu open", () => editor.menus.hasAnyOpenMenus(), [editor]);
|
|
@@ -47,29 +48,42 @@ function MenuClickCapture() {
|
|
|
47
48
|
isDragging: false,
|
|
48
49
|
start: new import_Vec.Vec(e.clientX, e.clientY)
|
|
49
50
|
};
|
|
51
|
+
rDidAPointerDownAndDragWhileMenuWasOpen.current = false;
|
|
50
52
|
}
|
|
51
53
|
editor.menus.clearOpenMenus();
|
|
52
54
|
},
|
|
53
55
|
[editor]
|
|
54
56
|
);
|
|
57
|
+
const rDidAPointerDownAndDragWhileMenuWasOpen = (0, import_react.useRef)(false);
|
|
55
58
|
const handlePointerMove = (0, import_react.useCallback)(
|
|
56
59
|
(e) => {
|
|
57
60
|
if (!rPointerState.current.isDown) return;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
61
|
+
const { x, y } = rPointerState.current.start;
|
|
62
|
+
if (!rDidAPointerDownAndDragWhileMenuWasOpen.current) {
|
|
63
|
+
if (
|
|
64
|
+
// We're pointing, but are we dragging?
|
|
65
|
+
import_Vec.Vec.Dist2(rPointerState.current.start, new import_Vec.Vec(e.clientX, e.clientY)) > editor.options.dragDistanceSquared
|
|
66
|
+
) {
|
|
67
|
+
rDidAPointerDownAndDragWhileMenuWasOpen.current = true;
|
|
68
|
+
rPointerState.current = {
|
|
69
|
+
...rPointerState.current,
|
|
70
|
+
isDown: true,
|
|
71
|
+
isDragging: true
|
|
72
|
+
};
|
|
73
|
+
canvasEvents.onPointerDown?.({
|
|
74
|
+
...e,
|
|
75
|
+
clientX: x,
|
|
76
|
+
clientY: y,
|
|
77
|
+
button: 0
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
if (rDidAPointerDownAndDragWhileMenuWasOpen.current) {
|
|
82
|
+
editor.dispatch({
|
|
83
|
+
type: "pointer",
|
|
84
|
+
target: "canvas",
|
|
85
|
+
name: "pointer_move",
|
|
86
|
+
...(0, import_getPointerInfo.getPointerInfo)(editor, e)
|
|
73
87
|
});
|
|
74
88
|
}
|
|
75
89
|
},
|
|
@@ -84,6 +98,7 @@ function MenuClickCapture() {
|
|
|
84
98
|
isDragging: false,
|
|
85
99
|
start: new import_Vec.Vec(e.clientX, e.clientY)
|
|
86
100
|
};
|
|
101
|
+
rDidAPointerDownAndDragWhileMenuWasOpen.current = false;
|
|
87
102
|
},
|
|
88
103
|
[canvasEvents]
|
|
89
104
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/components/MenuClickCapture.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { PointerEvent, useCallback, useRef, useState } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { Vec } from '../primitives/Vec'\n\n/**\n * When a menu is open, this component prevents the user from interacting with the canvas.\n *\n * @public @react\n */\nexport function MenuClickCapture() {\n\tconst editor = useEditor()\n\n\t// Whether any menus are open\n\tconst isMenuOpen = useValue('is menu open', () => editor.menus.hasAnyOpenMenus(), [editor])\n\n\t// Whether we're pointing or not\u2014keep this component visible if we're pointing\n\tconst [isPointing, setIsPointing] = useState(false)\n\n\tconst showElement = isMenuOpen || isPointing\n\n\t// Get the same events that we use on the canvas\n\tconst canvasEvents = useCanvasEvents()\n\n\t// Keep track of the pointer state\n\tconst rPointerState = useRef({\n\t\tisDown: false,\n\t\tisDragging: false,\n\t\tstart: new Vec(),\n\t})\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tif (e.button === 0) {\n\t\t\t\tsetIsPointing(true)\n\t\t\t\trPointerState.current = {\n\t\t\t\t\tisDown: true,\n\t\t\t\t\tisDragging: false,\n\t\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t\t}\n\t\t\t}\n\t\t\teditor.menus.clearOpenMenus()\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\t// Do nothing unless we're pointing\n\t\t\tif (!rPointerState.current.isDown) return\n\n\t\t\tif (\n\t\t\t\t// We're pointing, but are we dragging?\n\t\t\t\tVec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >\n\t\t\t\teditor.options.dragDistanceSquared\n\t\t\t) {\n\t\t\t\t// Wehaddaeventitsadrag\n\t\t\t\trPointerState.current = {\n\t\t\t\t\t...rPointerState.current,\n\t\t\t\t\tisDown: true,\n\t\t\t\t\tisDragging: true,\n\t\t\t\t}\n\t\t\t\t
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { PointerEvent, useCallback, useRef, useState } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { Vec } from '../primitives/Vec'\nimport { getPointerInfo } from '../utils/getPointerInfo'\n\n/**\n * When a menu is open, this component prevents the user from interacting with the canvas.\n *\n * @public @react\n */\nexport function MenuClickCapture() {\n\tconst editor = useEditor()\n\n\t// Whether any menus are open\n\tconst isMenuOpen = useValue('is menu open', () => editor.menus.hasAnyOpenMenus(), [editor])\n\n\t// Whether we're pointing or not\u2014keep this component visible if we're pointing\n\tconst [isPointing, setIsPointing] = useState(false)\n\n\tconst showElement = isMenuOpen || isPointing\n\n\t// Get the same events that we use on the canvas\n\tconst canvasEvents = useCanvasEvents()\n\n\t// Keep track of the pointer state\n\tconst rPointerState = useRef({\n\t\tisDown: false,\n\t\tisDragging: false,\n\t\tstart: new Vec(),\n\t})\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tif (e.button === 0) {\n\t\t\t\tsetIsPointing(true)\n\t\t\t\trPointerState.current = {\n\t\t\t\t\tisDown: true,\n\t\t\t\t\tisDragging: false,\n\t\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t\t}\n\t\t\t\trDidAPointerDownAndDragWhileMenuWasOpen.current = false\n\t\t\t}\n\t\t\teditor.menus.clearOpenMenus()\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst rDidAPointerDownAndDragWhileMenuWasOpen = useRef(false)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\t// Do nothing unless we're pointing\n\t\t\tif (!rPointerState.current.isDown) return\n\n\t\t\t// call the onPointerDown with the original pointer position\n\t\t\tconst { x, y } = rPointerState.current.start\n\n\t\t\tif (!rDidAPointerDownAndDragWhileMenuWasOpen.current) {\n\t\t\t\tif (\n\t\t\t\t\t// We're pointing, but are we dragging?\n\t\t\t\t\tVec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >\n\t\t\t\t\teditor.options.dragDistanceSquared\n\t\t\t\t) {\n\t\t\t\t\trDidAPointerDownAndDragWhileMenuWasOpen.current = true\n\t\t\t\t\t// Wehaddaeventitsadrag\n\t\t\t\t\trPointerState.current = {\n\t\t\t\t\t\t...rPointerState.current,\n\t\t\t\t\t\tisDown: true,\n\t\t\t\t\t\tisDragging: true,\n\t\t\t\t\t}\n\t\t\t\t\tcanvasEvents.onPointerDown?.({\n\t\t\t\t\t\t...e,\n\t\t\t\t\t\tclientX: x,\n\t\t\t\t\t\tclientY: y,\n\t\t\t\t\t\tbutton: 0,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (rDidAPointerDownAndDragWhileMenuWasOpen.current) {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t\t[canvasEvents, editor]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\t// Run the pointer up\n\t\t\tcanvasEvents.onPointerUp?.(e)\n\t\t\t// Then turn off pointing\n\t\t\tsetIsPointing(false)\n\t\t\t// Reset the pointer state\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: false,\n\t\t\t\tisDragging: false,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\t\t\trDidAPointerDownAndDragWhileMenuWasOpen.current = false\n\t\t},\n\t\t[canvasEvents]\n\t)\n\n\treturn (\n\t\tshowElement && (\n\t\t\t<div\n\t\t\t\tclassName=\"tlui-menu-click-capture\"\n\t\t\t\tdata-testid=\"menu-click-capture.content\"\n\t\t\t\t{...canvasEvents}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t/>\n\t\t)\n\t)\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHG;AAhHH,yBAAyB;AACzB,mBAA4D;AAC5D,6BAAgC;AAChC,uBAA0B;AAC1B,iBAAoB;AACpB,4BAA+B;AAOxB,SAAS,mBAAmB;AAClC,QAAM,aAAS,4BAAU;AAGzB,QAAM,iBAAa,6BAAS,gBAAgB,MAAM,OAAO,MAAM,gBAAgB,GAAG,CAAC,MAAM,CAAC;AAG1F,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,cAAc,cAAc;AAGlC,QAAM,mBAAe,wCAAgB;AAGrC,QAAM,oBAAgB,qBAAO;AAAA,IAC5B,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO,IAAI,eAAI;AAAA,EAChB,CAAC;AAED,QAAM,wBAAoB;AAAA,IACzB,CAAC,MAAoB;AACpB,UAAI,EAAE,WAAW,GAAG;AACnB,sBAAc,IAAI;AAClB,sBAAc,UAAU;AAAA,UACvB,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,OAAO,IAAI,eAAI,EAAE,SAAS,EAAE,OAAO;AAAA,QACpC;AACA,gDAAwC,UAAU;AAAA,MACnD;AACA,aAAO,MAAM,eAAe;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,8CAA0C,qBAAO,KAAK;AAE5D,QAAM,wBAAoB;AAAA,IACzB,CAAC,MAAoB;AAEpB,UAAI,CAAC,cAAc,QAAQ,OAAQ;AAGnC,YAAM,EAAE,GAAG,EAAE,IAAI,cAAc,QAAQ;AAEvC,UAAI,CAAC,wCAAwC,SAAS;AACrD;AAAA;AAAA,UAEC,eAAI,MAAM,cAAc,QAAQ,OAAO,IAAI,eAAI,EAAE,SAAS,EAAE,OAAO,CAAC,IACpE,OAAO,QAAQ;AAAA,UACd;AACD,kDAAwC,UAAU;AAElD,wBAAc,UAAU;AAAA,YACvB,GAAG,cAAc;AAAA,YACjB,QAAQ;AAAA,YACR,YAAY;AAAA,UACb;AACA,uBAAa,gBAAgB;AAAA,YAC5B,GAAG;AAAA,YACH,SAAS;AAAA,YACT,SAAS;AAAA,YACT,QAAQ;AAAA,UACT,CAAC;AAAA,QACF;AAAA,MACD;AAEA,UAAI,wCAAwC,SAAS;AACpD,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAAA,IACD;AAAA,IACA,CAAC,cAAc,MAAM;AAAA,EACtB;AAEA,QAAM,sBAAkB;AAAA,IACvB,CAAC,MAAoB;AAEpB,mBAAa,cAAc,CAAC;AAE5B,oBAAc,KAAK;AAEnB,oBAAc,UAAU;AAAA,QACvB,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,OAAO,IAAI,eAAI,EAAE,SAAS,EAAE,OAAO;AAAA,MACpC;AACA,8CAAwC,UAAU;AAAA,IACnD;AAAA,IACA,CAAC,YAAY;AAAA,EACd;AAEA,SACC,eACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACX,GAAG;AAAA,MACJ,eAAe;AAAA,MACf,eAAe;AAAA,MACf,aAAa;AAAA;AAAA,EACd;AAGH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1567,7 +1567,9 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
1567
1567
|
return selectedShapes.length === 1 ? selectedShapes[0] : null;
|
|
1568
1568
|
}
|
|
1569
1569
|
/**
|
|
1570
|
-
*
|
|
1570
|
+
* Get the page bounds of all the provided shapes.
|
|
1571
|
+
*
|
|
1572
|
+
* @public
|
|
1571
1573
|
*/
|
|
1572
1574
|
getShapesPageBounds(shapeIds) {
|
|
1573
1575
|
const bounds = (0, import_utils.compact)(shapeIds.map((id) => this.getShapePageBounds(id)));
|
|
@@ -4231,7 +4233,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
4231
4233
|
const parentId = typeof parent === "string" ? parent : parent.id;
|
|
4232
4234
|
const children = this._parentIdsToChildIds.get()[parentId];
|
|
4233
4235
|
if (!children || children.length === 0) {
|
|
4234
|
-
return
|
|
4236
|
+
return (0, import_utils.getIndexAbove)(import_utils.ZERO_INDEX_KEY);
|
|
4235
4237
|
}
|
|
4236
4238
|
const shape = this.getShape(children[children.length - 1]);
|
|
4237
4239
|
return (0, import_utils.getIndexAbove)(shape.index);
|