@tldraw/editor 4.6.0-next.fe1474dc57d8 → 5.0.0
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 +412 -179
- package/dist-cjs/index.js +12 -23
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/TldrawEditor.js +3 -0
- package/dist-cjs/lib/TldrawEditor.js.map +2 -2
- package/dist-cjs/lib/components/default-components/CanvasOverlays.js +180 -0
- package/dist-cjs/lib/components/default-components/CanvasOverlays.js.map +7 -0
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js +44 -249
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
- package/dist-cjs/lib/editor/Editor.js +78 -28
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +98 -0
- package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +7 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +14 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +2 -2
- package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
- package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
- package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +161 -0
- package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js +39 -0
- package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js.map +7 -0
- package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +3 -0
- package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +25 -23
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +32 -2
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/types/event-types.js.map +2 -2
- package/dist-cjs/lib/exports/fetchCache.js +1 -1
- package/dist-cjs/lib/exports/fetchCache.js.map +2 -2
- package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
- package/dist-cjs/lib/hooks/useCanvasEvents.js +3 -3
- package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
- package/dist-cjs/lib/hooks/useEditorComponents.js +0 -28
- package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
- package/dist-cjs/lib/hooks/usePeerIds.js +1 -36
- package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
- package/dist-cjs/lib/hooks/useShapeCulling.js +2 -1
- package/dist-cjs/lib/hooks/useShapeCulling.js.map +2 -2
- package/dist-cjs/lib/options.js +0 -1
- package/dist-cjs/lib/options.js.map +2 -2
- package/dist-cjs/lib/utils/reparenting.js +20 -7
- package/dist-cjs/lib/utils/reparenting.js.map +2 -2
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +3 -0
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
- package/dist-cjs/version.js +4 -4
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.d.mts +412 -179
- package/dist-esm/index.mjs +19 -41
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +3 -0
- package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +160 -0
- package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +45 -250
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
- package/dist-esm/lib/editor/Editor.mjs +78 -29
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +83 -0
- package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +14 -0
- package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +2 -2
- package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
- package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
- package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +141 -0
- package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs +19 -0
- package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs.map +7 -0
- package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +3 -0
- package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +25 -23
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +32 -2
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/types/event-types.mjs.map +2 -2
- package/dist-esm/lib/exports/fetchCache.mjs +2 -2
- package/dist-esm/lib/exports/fetchCache.mjs.map +2 -2
- package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs +3 -3
- package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
- package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -28
- package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
- package/dist-esm/lib/hooks/usePeerIds.mjs +2 -40
- package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
- package/dist-esm/lib/hooks/useShapeCulling.mjs +2 -1
- package/dist-esm/lib/hooks/useShapeCulling.mjs.map +2 -2
- package/dist-esm/lib/options.mjs +0 -1
- package/dist-esm/lib/options.mjs.map +2 -2
- package/dist-esm/lib/utils/reparenting.mjs +20 -7
- package/dist-esm/lib/utils/reparenting.mjs.map +2 -2
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +3 -0
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
- package/dist-esm/version.mjs +4 -4
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +4 -239
- package/package.json +7 -7
- package/src/index.ts +17 -39
- package/src/lib/TldrawEditor.tsx +9 -0
- package/src/lib/components/default-components/CanvasOverlays.tsx +208 -0
- package/src/lib/components/default-components/DefaultCanvas.tsx +49 -324
- package/src/lib/editor/Editor.test.ts +3 -1
- package/src/lib/editor/Editor.ts +80 -24
- package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +98 -0
- package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +14 -0
- package/src/lib/editor/overlays/OverlayManager.ts +183 -0
- package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
- package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +216 -0
- package/src/lib/editor/overlays/getOverlayDisplayValues.ts +51 -0
- package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +9 -2
- package/src/lib/editor/shapes/ShapeUtil.ts +34 -26
- package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +40 -3
- package/src/lib/editor/types/event-types.ts +2 -0
- package/src/lib/exports/fetchCache.ts +2 -4
- package/src/lib/exports/getSvgJsx.test.ts +3 -1
- package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
- package/src/lib/hooks/useCanvasEvents.ts +13 -8
- package/src/lib/hooks/useEditorComponents.tsx +0 -28
- package/src/lib/hooks/usePeerIds.ts +6 -55
- package/src/lib/hooks/useShapeCulling.tsx +3 -1
- package/src/lib/options.ts +0 -7
- package/src/lib/utils/reparenting.ts +22 -9
- package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -0
- package/src/version.ts +4 -4
- package/dist-cjs/lib/components/GeometryDebuggingView.js +0 -115
- package/dist-cjs/lib/components/GeometryDebuggingView.js.map +0 -7
- package/dist-cjs/lib/components/LiveCollaborators.js +0 -152
- package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -234
- package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
- package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultCursor.js +0 -59
- package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
- package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultHandles.js +0 -28
- package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
- package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
- package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js +0 -28
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -102
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
- package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
- package/dist-cjs/lib/hooks/useHandleEvents.js +0 -100
- package/dist-cjs/lib/hooks/useHandleEvents.js.map +0 -7
- package/dist-cjs/lib/hooks/useSelectionEvents.js +0 -98
- package/dist-cjs/lib/hooks/useSelectionEvents.js.map +0 -7
- package/dist-esm/lib/components/GeometryDebuggingView.mjs +0 -95
- package/dist-esm/lib/components/GeometryDebuggingView.mjs.map +0 -7
- package/dist-esm/lib/components/LiveCollaborators.mjs +0 -135
- package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -214
- package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
- package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultCursor.mjs +0 -29
- package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
- package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
- package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
- package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -82
- package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
- package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
- package/dist-esm/lib/hooks/useHandleEvents.mjs +0 -70
- package/dist-esm/lib/hooks/useHandleEvents.mjs.map +0 -7
- package/dist-esm/lib/hooks/useSelectionEvents.mjs +0 -78
- package/dist-esm/lib/hooks/useSelectionEvents.mjs.map +0 -7
- package/src/lib/components/GeometryDebuggingView.tsx +0 -108
- package/src/lib/components/LiveCollaborators.tsx +0 -180
- package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -300
- package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
- package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
- package/src/lib/components/default-components/DefaultCursor.tsx +0 -59
- package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
- package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
- package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
- package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
- package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
- package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
- package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -118
- package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
- package/src/lib/hooks/useHandleEvents.ts +0 -88
- package/src/lib/hooks/useSelectionEvents.ts +0 -97
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultScribble.tsx"],
|
|
4
|
-
"sourcesContent": ["import { TLScribble } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'\n\n/** @public */\nexport interface TLScribbleProps {\n\tuserId?: string\n\tscribble: TLScribble\n\tzoom: number\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={getSvgPathFromPoints(scribble.points, false)}\n\t\t\t\tstroke={color ?? `var(--tl-color-${scribble.color})`}\n\t\t\t\tfill=\"none\"\n\t\t\t\tstrokeWidth={8 / zoom}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBG;AAnBH,wBAAuB;AACvB,kCAAqC;AAa9B,SAAS,gBAAgB,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC/F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,SACC,4CAAC,SAAI,WAAW,gBAAY,kBAAAA,SAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAG,kDAAqB,SAAS,QAAQ,KAAK;AAAA,MAC9C,QAAQ,SAAS,kBAAkB,SAAS,KAAK;AAAA,MACjD,MAAK;AAAA,MACL,aAAa,IAAI;AAAA,MACjB,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
|
|
6
|
-
"names": ["classNames"]
|
|
7
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var DefaultSelectionForeground_exports = {};
|
|
30
|
-
__export(DefaultSelectionForeground_exports, {
|
|
31
|
-
DefaultSelectionForeground: () => DefaultSelectionForeground
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(DefaultSelectionForeground_exports);
|
|
34
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
-
var import_state_react = require("@tldraw/state-react");
|
|
36
|
-
var import_classnames = __toESM(require("classnames"), 1);
|
|
37
|
-
var import_react = require("react");
|
|
38
|
-
var import_useEditor = require("../../hooks/useEditor");
|
|
39
|
-
var import_useTransform = require("../../hooks/useTransform");
|
|
40
|
-
var import_Box = require("../../primitives/Box");
|
|
41
|
-
var import_utils = require("../../primitives/utils");
|
|
42
|
-
function DefaultSelectionForeground({ bounds, rotation }) {
|
|
43
|
-
const editor = (0, import_useEditor.useEditor)();
|
|
44
|
-
const rSvg = (0, import_react.useRef)(null);
|
|
45
|
-
const onlyShape = (0, import_state_react.useValue)("only selected shape", () => editor.getOnlySelectedShape(), [editor]);
|
|
46
|
-
const expandOutlineBy = onlyShape ? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape) : 0;
|
|
47
|
-
(0, import_useTransform.useTransform)(rSvg, bounds?.x, bounds?.y, 1, rotation, {
|
|
48
|
-
x: -expandOutlineBy,
|
|
49
|
-
y: -expandOutlineBy
|
|
50
|
-
});
|
|
51
|
-
bounds = expandOutlineBy instanceof import_Box.Box ? bounds.clone().expand(expandOutlineBy).zeroFix() : bounds.clone().expandBy(expandOutlineBy).zeroFix();
|
|
52
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
-
"svg",
|
|
54
|
-
{
|
|
55
|
-
ref: rSvg,
|
|
56
|
-
className: "tl-overlays__item tl-selection__fg",
|
|
57
|
-
"data-testid": "selection-foreground",
|
|
58
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
-
"rect",
|
|
60
|
-
{
|
|
61
|
-
className: (0, import_classnames.default)("tl-selection__fg__outline"),
|
|
62
|
-
width: (0, import_utils.toDomPrecision)(bounds.width),
|
|
63
|
-
height: (0, import_utils.toDomPrecision)(bounds.height)
|
|
64
|
-
}
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
//# sourceMappingURL=DefaultSelectionForeground.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultSelectionForeground.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLSelectionForegroundProps {\n\tbounds: Box\n\trotation: number\n}\n\n/** @public @react */\nexport function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps) {\n\tconst editor = useEditor()\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tconst onlyShape = useValue('only selected shape', () => editor.getOnlySelectedShape(), [editor])\n\n\t// if all shapes have an expandBy for the selection outline, we can expand by the l\n\tconst expandOutlineBy = onlyShape\n\t\t? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape)\n\t\t: 0\n\n\tuseTransform(rSvg, bounds?.x, bounds?.y, 1, rotation, {\n\t\tx: -expandOutlineBy,\n\t\ty: -expandOutlineBy,\n\t})\n\n\tbounds =\n\t\texpandOutlineBy instanceof Box\n\t\t\t? bounds.clone().expand(expandOutlineBy).zeroFix()\n\t\t\t: bounds.clone().expandBy(expandOutlineBy).zeroFix()\n\n\treturn (\n\t\t<svg\n\t\t\tref={rSvg}\n\t\t\tclassName=\"tl-overlays__item tl-selection__fg\"\n\t\t\tdata-testid=\"selection-foreground\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tclassName={classNames('tl-selection__fg__outline')}\n\t\t\t\twidth={toDomPrecision(bounds.width)}\n\t\t\t\theight={toDomPrecision(bounds.height)}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CG;AA1CH,yBAAyB;AACzB,wBAAuB;AACvB,mBAAuB;AACvB,uBAA0B;AAC1B,0BAA6B;AAC7B,iBAAoB;AACpB,mBAA+B;AASxB,SAAS,2BAA2B,EAAE,QAAQ,SAAS,GAA+B;AAC5F,QAAM,aAAS,4BAAU;AACzB,QAAM,WAAO,qBAAsB,IAAI;AAEvC,QAAM,gBAAY,6BAAS,uBAAuB,MAAM,OAAO,qBAAqB,GAAG,CAAC,MAAM,CAAC;AAG/F,QAAM,kBAAkB,YACrB,OAAO,aAAa,SAAS,EAAE,yBAAyB,SAAS,IACjE;AAEH,wCAAa,MAAM,QAAQ,GAAG,QAAQ,GAAG,GAAG,UAAU;AAAA,IACrD,GAAG,CAAC;AAAA,IACJ,GAAG,CAAC;AAAA,EACL,CAAC;AAED,WACC,2BAA2B,iBACxB,OAAO,MAAM,EAAE,OAAO,eAAe,EAAE,QAAQ,IAC/C,OAAO,MAAM,EAAE,SAAS,eAAe,EAAE,QAAQ;AAErD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACA,eAAW,kBAAAA,SAAW,2BAA2B;AAAA,UACjD,WAAO,6BAAe,OAAO,KAAK;AAAA,UAClC,YAAQ,6BAAe,OAAO,MAAM;AAAA;AAAA,MACrC;AAAA;AAAA,EACD;AAEF;",
|
|
6
|
-
"names": ["classNames"]
|
|
7
|
-
}
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var DefaultShapeIndicator_exports = {};
|
|
30
|
-
__export(DefaultShapeIndicator_exports, {
|
|
31
|
-
DefaultShapeIndicator: () => DefaultShapeIndicator
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(DefaultShapeIndicator_exports);
|
|
34
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
-
var import_state_react = require("@tldraw/state-react");
|
|
36
|
-
var import_classnames = __toESM(require("classnames"), 1);
|
|
37
|
-
var import_react = require("react");
|
|
38
|
-
var import_EditorComponentsContext = require("../../hooks/EditorComponentsContext");
|
|
39
|
-
var import_useEditor = require("../../hooks/useEditor");
|
|
40
|
-
var import_ErrorBoundary = require("../ErrorBoundary");
|
|
41
|
-
const EvenInnererIndicator = (0, import_react.memo)(
|
|
42
|
-
({ shape, util }) => {
|
|
43
|
-
return (0, import_state_react.useStateTracking)(
|
|
44
|
-
"Indicator: " + shape.type,
|
|
45
|
-
() => (
|
|
46
|
-
// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
|
|
47
|
-
// calling the render method with stale data.
|
|
48
|
-
util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id))
|
|
49
|
-
)
|
|
50
|
-
);
|
|
51
|
-
},
|
|
52
|
-
(prevProps, nextProps) => {
|
|
53
|
-
return prevProps.shape.props === nextProps.shape.props && prevProps.shape.meta === nextProps.shape.meta;
|
|
54
|
-
}
|
|
55
|
-
);
|
|
56
|
-
const InnerIndicator = (0, import_react.memo)(({ editor, id }) => {
|
|
57
|
-
const shape = (0, import_state_react.useValue)("shape for indicator", () => editor.store.get(id), [editor, id]);
|
|
58
|
-
const { ShapeIndicatorErrorFallback } = (0, import_EditorComponentsContext.useEditorComponents)();
|
|
59
|
-
if (!shape || shape.isLocked) return null;
|
|
60
|
-
const util = editor.getShapeUtil(shape);
|
|
61
|
-
if (editor.options.useCanvasIndicators && !util.useLegacyIndicator()) return null;
|
|
62
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
-
import_ErrorBoundary.OptionalErrorBoundary,
|
|
64
|
-
{
|
|
65
|
-
fallback: ShapeIndicatorErrorFallback,
|
|
66
|
-
onError: (error) => editor.annotateError(error, { origin: "react.shapeIndicator", willCrashApp: false }),
|
|
67
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EvenInnererIndicator, { shape, util }, shape.id)
|
|
68
|
-
}
|
|
69
|
-
);
|
|
70
|
-
});
|
|
71
|
-
const DefaultShapeIndicator = (0, import_react.memo)(function DefaultShapeIndicator2({
|
|
72
|
-
shapeId,
|
|
73
|
-
className,
|
|
74
|
-
color,
|
|
75
|
-
hidden,
|
|
76
|
-
opacity
|
|
77
|
-
}) {
|
|
78
|
-
const editor = (0, import_useEditor.useEditor)();
|
|
79
|
-
const rIndicator = (0, import_react.useRef)(null);
|
|
80
|
-
(0, import_state_react.useQuickReactor)(
|
|
81
|
-
"indicator transform",
|
|
82
|
-
() => {
|
|
83
|
-
if (hidden) return;
|
|
84
|
-
const elm = rIndicator.current;
|
|
85
|
-
if (!elm) return;
|
|
86
|
-
const pageTransform = editor.getShapePageTransform(shapeId);
|
|
87
|
-
if (!pageTransform) return;
|
|
88
|
-
elm.style.setProperty("transform", pageTransform.toCssString());
|
|
89
|
-
},
|
|
90
|
-
[editor, shapeId, hidden]
|
|
91
|
-
);
|
|
92
|
-
(0, import_react.useLayoutEffect)(() => {
|
|
93
|
-
const elm = rIndicator.current;
|
|
94
|
-
if (!elm) return;
|
|
95
|
-
elm.style.setProperty("display", hidden ? "none" : "block");
|
|
96
|
-
}, [hidden]);
|
|
97
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ref: rIndicator, className: (0, import_classnames.default)("tl-overlays__item", className), "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
|
-
"g",
|
|
99
|
-
{
|
|
100
|
-
className: "tl-shape-indicator",
|
|
101
|
-
stroke: color ?? "var(--tl-color-selected)",
|
|
102
|
-
opacity,
|
|
103
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerIndicator, { editor, id: shapeId })
|
|
104
|
-
}
|
|
105
|
-
) });
|
|
106
|
-
});
|
|
107
|
-
//# sourceMappingURL=DefaultShapeIndicator.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useQuickReactor, useStateTracking, useValue } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport type { Editor } from '../../editor/Editor'\nimport { ShapeUtil } from '../../editor/shapes/ShapeUtil'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\nimport { OptionalErrorBoundary } from '../ErrorBoundary'\n\n// need an extra layer of indirection here to allow hooks to be used inside the indicator render\nconst EvenInnererIndicator = memo(\n\t({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {\n\t\treturn useStateTracking('Indicator: ' + shape.type, () =>\n\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t// calling the render method with stale data.\n\t\t\tutil.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)\n\t\t)\n\t},\n\t(prevProps, nextProps) => {\n\t\treturn (\n\t\t\tprevProps.shape.props === nextProps.shape.props &&\n\t\t\tprevProps.shape.meta === nextProps.shape.meta\n\t\t)\n\t}\n)\n\nconst InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {\n\tconst shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])\n\n\tconst { ShapeIndicatorErrorFallback } = useEditorComponents()\n\n\tif (!shape || shape.isLocked) return null\n\n\tconst util = editor.getShapeUtil(shape)\n\n\t// If canvas indicators are enabled and the shape uses them, it will be rendered by CanvasShapeIndicators\n\tif (editor.options.useCanvasIndicators && !util.useLegacyIndicator()) return null\n\n\treturn (\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ShapeIndicatorErrorFallback}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })\n\t\t\t}\n\t\t>\n\t\t\t<EvenInnererIndicator key={shape.id} shape={shape} util={util} />\n\t\t</OptionalErrorBoundary>\n\t)\n})\n\n/** @public */\nexport interface TLShapeIndicatorProps {\n\tuserId?: string\n\tshapeId: TLShapeId\n\tcolor?: string | undefined\n\topacity?: number\n\tclassName?: string\n\thidden?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicator = memo(function DefaultShapeIndicator({\n\tshapeId,\n\tclassName,\n\tcolor,\n\thidden,\n\topacity,\n}: TLShapeIndicatorProps) {\n\tconst editor = useEditor()\n\n\tconst rIndicator = useRef<SVGSVGElement>(null)\n\n\tuseQuickReactor(\n\t\t'indicator transform',\n\t\t() => {\n\t\t\tif (hidden) return\n\t\t\tconst elm = rIndicator.current\n\t\t\tif (!elm) return\n\t\t\tconst pageTransform = editor.getShapePageTransform(shapeId)\n\t\t\tif (!pageTransform) return\n\t\t\telm.style.setProperty('transform', pageTransform.toCssString())\n\t\t},\n\t\t[editor, shapeId, hidden]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = rIndicator.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('display', hidden ? 'none' : 'block')\n\t}, [hidden])\n\n\treturn (\n\t\t<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t<g\n\t\t\t\tclassName=\"tl-shape-indicator\"\n\t\t\t\tstroke={color ?? 'var(--tl-color-selected)'}\n\t\t\t\topacity={opacity}\n\t\t\t>\n\t\t\t\t<InnerIndicator editor={editor} id={shapeId} />\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CG;AA9CH,yBAA4D;AAE5D,wBAAuB;AACvB,mBAA8C;AAG9C,qCAAoC;AACpC,uBAA0B;AAC1B,2BAAsC;AAGtC,MAAM,2BAAuB;AAAA,EAC5B,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC9D,eAAO;AAAA,MAAiB,gBAAgB,MAAM;AAAA,MAAM;AAAA;AAAA;AAAA,QAGnD,KAAK,UAAU,KAAK,OAAO,MAAM,wBAAwB,MAAM,EAAE,CAAY;AAAA;AAAA,IAC9E;AAAA,EACD;AAAA,EACA,CAAC,WAAW,cAAc;AACzB,WACC,UAAU,MAAM,UAAU,UAAU,MAAM,SAC1C,UAAU,MAAM,SAAS,UAAU,MAAM;AAAA,EAE3C;AACD;AAEA,MAAM,qBAAiB,mBAAK,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAClF,QAAM,YAAQ,6BAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,QAAI,oDAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,QAAM,OAAO,OAAO,aAAa,KAAK;AAGtC,MAAI,OAAO,QAAQ,uBAAuB,CAAC,KAAK,mBAAmB,EAAG,QAAO;AAE7E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,sDAAC,wBAAoC,OAAc,QAAxB,MAAM,EAA8B;AAAA;AAAA,EAChE;AAEF,CAAC;AAaM,MAAM,4BAAwB,mBAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,aAAS,4BAAU;AAEzB,QAAM,iBAAa,qBAAsB,IAAI;AAE7C;AAAA,IACC;AAAA,IACA,MAAM;AACL,UAAI,OAAQ;AACZ,YAAM,MAAM,WAAW;AACvB,UAAI,CAAC,IAAK;AACV,YAAM,gBAAgB,OAAO,sBAAsB,OAAO;AAC1D,UAAI,CAAC,cAAe;AACpB,UAAI,MAAM,YAAY,aAAa,cAAc,YAAY,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,QAAQ,SAAS,MAAM;AAAA,EACzB;AAEA,oCAAgB,MAAM;AACrB,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,YAAY,WAAW,SAAS,SAAS,OAAO;AAAA,EAC3D,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,4CAAC,SAAI,KAAK,YAAY,eAAW,kBAAAC,SAAW,qBAAqB,SAAS,GAAG,eAAY,QACxF;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,QAAQ,SAAS;AAAA,MACjB;AAAA,MAEA,sDAAC,kBAAe,QAAgB,IAAI,SAAS;AAAA;AAAA,EAC9C,GACD;AAEF,CAAC;",
|
|
6
|
-
"names": ["DefaultShapeIndicator", "classNames"]
|
|
7
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var DefaultShapeIndicatorErrorFallback_exports = {};
|
|
20
|
-
__export(DefaultShapeIndicatorErrorFallback_exports, {
|
|
21
|
-
DefaultShapeIndicatorErrorFallback: () => DefaultShapeIndicatorErrorFallback
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(DefaultShapeIndicatorErrorFallback_exports);
|
|
24
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
-
const DefaultShapeIndicatorErrorFallback = () => {
|
|
26
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 4, cy: 4, r: 8, strokeWidth: "1", stroke: "red" });
|
|
27
|
-
};
|
|
28
|
-
//# sourceMappingURL=DefaultShapeIndicatorErrorFallback.js.map
|
package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ComponentType } from 'react'\n\n/** @public */\nexport type TLShapeIndicatorErrorFallbackComponent = ComponentType<{ error: unknown }>\n\n/** @internal */\nexport const DefaultShapeIndicatorErrorFallback: TLShapeIndicatorErrorFallbackComponent = () => {\n\treturn <circle cx={4} cy={4} r={8} strokeWidth=\"1\" stroke=\"red\" />\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOQ;AADD,MAAM,qCAA6E,MAAM;AAC/F,SAAO,4CAAC,YAAO,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,aAAY,KAAI,QAAO,OAAM;AACjE;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var DefaultShapeIndicators_exports = {};
|
|
20
|
-
__export(DefaultShapeIndicators_exports, {
|
|
21
|
-
DefaultShapeIndicators: () => DefaultShapeIndicators
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(DefaultShapeIndicators_exports);
|
|
24
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
-
var import_state_react = require("@tldraw/state-react");
|
|
26
|
-
var import_react = require("react");
|
|
27
|
-
var import_EditorComponentsContext = require("../../hooks/EditorComponentsContext");
|
|
28
|
-
var import_useEditor = require("../../hooks/useEditor");
|
|
29
|
-
const DefaultShapeIndicators = (0, import_react.memo)(function DefaultShapeIndicators2({
|
|
30
|
-
hideAll,
|
|
31
|
-
showAll
|
|
32
|
-
}) {
|
|
33
|
-
const editor = (0, import_useEditor.useEditor)();
|
|
34
|
-
if (hideAll && showAll)
|
|
35
|
-
throw Error("You cannot set both hideAll and showAll props to true, cmon now");
|
|
36
|
-
const rPreviousSelectedShapeIds = (0, import_react.useRef)(/* @__PURE__ */ new Set());
|
|
37
|
-
const idsToDisplay = (0, import_state_react.useValue)(
|
|
38
|
-
"should display selected ids",
|
|
39
|
-
() => {
|
|
40
|
-
const prev = rPreviousSelectedShapeIds.current;
|
|
41
|
-
const next = /* @__PURE__ */ new Set();
|
|
42
|
-
const instanceState = editor.getInstanceState();
|
|
43
|
-
const isChangingStyle = instanceState.isChangingStyle;
|
|
44
|
-
const isIdleOrEditing = editor.isInAny("select.idle", "select.editing_shape");
|
|
45
|
-
const isInSelectState = editor.isInAny(
|
|
46
|
-
"select.brushing",
|
|
47
|
-
"select.scribble_brushing",
|
|
48
|
-
"select.pointing_shape",
|
|
49
|
-
"select.pointing_selection",
|
|
50
|
-
"select.pointing_handle"
|
|
51
|
-
);
|
|
52
|
-
if (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {
|
|
53
|
-
rPreviousSelectedShapeIds.current = next;
|
|
54
|
-
return next;
|
|
55
|
-
}
|
|
56
|
-
for (const id of editor.getSelectedShapeIds()) {
|
|
57
|
-
next.add(id);
|
|
58
|
-
}
|
|
59
|
-
if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
|
|
60
|
-
const hovered = editor.getHoveredShapeId();
|
|
61
|
-
if (hovered) next.add(hovered);
|
|
62
|
-
}
|
|
63
|
-
if (prev.size !== next.size) {
|
|
64
|
-
rPreviousSelectedShapeIds.current = next;
|
|
65
|
-
return next;
|
|
66
|
-
}
|
|
67
|
-
for (const id of next) {
|
|
68
|
-
if (!prev.has(id)) {
|
|
69
|
-
rPreviousSelectedShapeIds.current = next;
|
|
70
|
-
return next;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
return prev;
|
|
74
|
-
},
|
|
75
|
-
[editor]
|
|
76
|
-
);
|
|
77
|
-
const renderingShapes = (0, import_state_react.useValue)("rendering shapes", () => editor.getRenderingShapes(), [editor]);
|
|
78
|
-
const { ShapeIndicator } = (0, import_EditorComponentsContext.useEditorComponents)();
|
|
79
|
-
const shapesToRender = (0, import_state_react.useValue)(
|
|
80
|
-
"shapes to render for svg indicators",
|
|
81
|
-
() => {
|
|
82
|
-
if (!editor.options.useCanvasIndicators) return renderingShapes;
|
|
83
|
-
return renderingShapes.filter(({ id }) => {
|
|
84
|
-
const shape = editor.getShape(id);
|
|
85
|
-
if (!shape) return false;
|
|
86
|
-
const util = editor.getShapeUtil(shape);
|
|
87
|
-
return util.useLegacyIndicator();
|
|
88
|
-
});
|
|
89
|
-
},
|
|
90
|
-
[editor, renderingShapes]
|
|
91
|
-
);
|
|
92
|
-
if (!ShapeIndicator) return null;
|
|
93
|
-
return shapesToRender.map(({ id }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
-
ShapeIndicator,
|
|
95
|
-
{
|
|
96
|
-
shapeId: id,
|
|
97
|
-
hidden: !showAll && (hideAll || !idsToDisplay.has(id))
|
|
98
|
-
},
|
|
99
|
-
id + "_indicator"
|
|
100
|
-
));
|
|
101
|
-
});
|
|
102
|
-
//# sourceMappingURL=DefaultShapeIndicators.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicators.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { memo, useRef } from 'react'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\n\n/** @public */\nexport interface TLShapeIndicatorsProps {\n\t/** Whether to hide all of the indicators */\n\thideAll?: boolean\n\t/** Whether to show all of the indicators */\n\tshowAll?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicators = memo(function DefaultShapeIndicators({\n\thideAll,\n\tshowAll,\n}: TLShapeIndicatorsProps) {\n\tconst editor = useEditor()\n\n\tif (hideAll && showAll)\n\t\tthrow Error('You cannot set both hideAll and showAll props to true, cmon now')\n\n\tconst rPreviousSelectedShapeIds = useRef<Set<TLShapeId>>(new Set())\n\n\tconst idsToDisplay = useValue(\n\t\t'should display selected ids',\n\t\t() => {\n\t\t\tconst prev = rPreviousSelectedShapeIds.current\n\t\t\tconst next = new Set<TLShapeId>()\n\n\t\t\tconst instanceState = editor.getInstanceState()\n\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\n\t\t\t// todo: this is tldraw specific and is duplicated at the tldraw layer. What should we do here instead?\n\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\t// We hide all indicators if we're changing style or in certain interactions\n\t\t\t// todo: move this to some kind of Tool.hideIndicators property\n\t\t\tif (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {\n\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\treturn next\n\t\t\t}\n\n\t\t\t// We always want to show indicators for the selected shapes, if any\n\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\tnext.add(id)\n\t\t\t}\n\n\t\t\t// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any\n\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\tif (hovered) next.add(hovered)\n\t\t\t}\n\n\t\t\t// Ok, has anything changed?\n\n\t\t\t// If the number of items in the set is different, then the selection has changed. This catches most changes.\n\t\t\tif (prev.size !== next.size) {\n\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\treturn next\n\t\t\t}\n\n\t\t\t// Set difference check\n\t\t\tfor (const id of next) {\n\t\t\t\tif (!prev.has(id)) {\n\t\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\t\treturn next\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn prev\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Show indicators only for the shapes that are currently being rendered (ie that are on screen)\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\t// Filter out shapes that have canvas indicator support - only render shapes that use legacy SVG indicators\n\t// When useCanvasIndicators is disabled, render all shapes via SVG\n\tconst shapesToRender = useValue(\n\t\t'shapes to render for svg indicators',\n\t\t() => {\n\t\t\tif (!editor.options.useCanvasIndicators) return renderingShapes\n\t\t\treturn renderingShapes.filter(({ id }) => {\n\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\tif (!shape) return false\n\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t})\n\t\t},\n\t\t[editor, renderingShapes]\n\t)\n\n\tif (!ShapeIndicator) return null\n\n\treturn shapesToRender.map(({ id }) => (\n\t\t<ShapeIndicator\n\t\t\tkey={id + '_indicator'}\n\t\t\tshapeId={id}\n\t\t\thidden={!showAll && (hideAll || !idsToDisplay.has(id))}\n\t\t/>\n\t))\n})\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+GE;AA/GF,yBAAyB;AAEzB,mBAA6B;AAC7B,qCAAoC;AACpC,uBAA0B;AAWnB,MAAM,6BAAyB,mBAAK,SAASA,wBAAuB;AAAA,EAC1E;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,aAAS,4BAAU;AAEzB,MAAI,WAAW;AACd,UAAM,MAAM,iEAAiE;AAE9E,QAAM,gCAA4B,qBAAuB,oBAAI,IAAI,CAAC;AAElE,QAAM,mBAAe;AAAA,IACpB;AAAA,IACA,MAAM;AACL,YAAM,OAAO,0BAA0B;AACvC,YAAM,OAAO,oBAAI,IAAe;AAEhC,YAAM,gBAAgB,OAAO,iBAAiB;AAE9C,YAAM,kBAAkB,cAAc;AAItC,YAAM,kBAAkB,OAAO,QAAQ,eAAe,sBAAsB;AAE5E,YAAM,kBAAkB,OAAO;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAIA,UAAI,mBAAmB,EAAE,mBAAmB,kBAAkB;AAC7D,kCAA0B,UAAU;AACpC,eAAO;AAAA,MACR;AAGA,iBAAW,MAAM,OAAO,oBAAoB,GAAG;AAC9C,aAAK,IAAI,EAAE;AAAA,MACZ;AAGA,UAAI,mBAAmB,cAAc,oBAAoB,CAAC,cAAc,iBAAiB;AACxF,cAAM,UAAU,OAAO,kBAAkB;AACzC,YAAI,QAAS,MAAK,IAAI,OAAO;AAAA,MAC9B;AAKA,UAAI,KAAK,SAAS,KAAK,MAAM;AAC5B,kCAA0B,UAAU;AACpC,eAAO;AAAA,MACR;AAGA,iBAAW,MAAM,MAAM;AACtB,YAAI,CAAC,KAAK,IAAI,EAAE,GAAG;AAClB,oCAA0B,UAAU;AACpC,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAGA,QAAM,sBAAkB,6BAAS,oBAAoB,MAAM,OAAO,mBAAmB,GAAG,CAAC,MAAM,CAAC;AAEhG,QAAM,EAAE,eAAe,QAAI,oDAAoB;AAI/C,QAAM,qBAAiB;AAAA,IACtB;AAAA,IACA,MAAM;AACL,UAAI,CAAC,OAAO,QAAQ,oBAAqB,QAAO;AAChD,aAAO,gBAAgB,OAAO,CAAC,EAAE,GAAG,MAAM;AACzC,cAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,YAAI,CAAC,MAAO,QAAO;AACnB,cAAM,OAAO,OAAO,aAAa,KAAK;AACtC,eAAO,KAAK,mBAAmB;AAAA,MAChC,CAAC;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,eAAe;AAAA,EACzB;AAEA,MAAI,CAAC,eAAgB,QAAO;AAE5B,SAAO,eAAe,IAAI,CAAC,EAAE,GAAG,MAC/B;AAAA,IAAC;AAAA;AAAA,MAEA,SAAS;AAAA,MACT,QAAQ,CAAC,YAAY,WAAW,CAAC,aAAa,IAAI,EAAE;AAAA;AAAA,IAF/C,KAAK;AAAA,EAGX,CACA;AACF,CAAC;",
|
|
6
|
-
"names": ["DefaultShapeIndicators"]
|
|
7
|
-
}
|
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var DefaultSnapIndictor_exports = {};
|
|
30
|
-
__export(DefaultSnapIndictor_exports, {
|
|
31
|
-
DefaultSnapIndicator: () => DefaultSnapIndicator
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(DefaultSnapIndictor_exports);
|
|
34
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
-
var import_classnames = __toESM(require("classnames"), 1);
|
|
36
|
-
var React = __toESM(require("react"), 1);
|
|
37
|
-
var import_utils = require("../../primitives/utils");
|
|
38
|
-
function PointsSnapIndicator({ points, zoom }) {
|
|
39
|
-
const l = 2.5 / zoom;
|
|
40
|
-
const minX = points.reduce((acc, p) => Math.min(acc, p.x), Infinity);
|
|
41
|
-
const maxX = points.reduce((acc, p) => Math.max(acc, p.x), -Infinity);
|
|
42
|
-
const minY = points.reduce((acc, p) => Math.min(acc, p.y), Infinity);
|
|
43
|
-
const maxY = points.reduce((acc, p) => Math.max(acc, p.y), -Infinity);
|
|
44
|
-
const useNWtoSEdireciton = points.some((p) => p.x === minX && p.y === minY);
|
|
45
|
-
let firstX, firstY, secondX, secondY;
|
|
46
|
-
if (useNWtoSEdireciton) {
|
|
47
|
-
firstX = minX;
|
|
48
|
-
firstY = minY;
|
|
49
|
-
secondX = maxX;
|
|
50
|
-
secondY = maxY;
|
|
51
|
-
} else {
|
|
52
|
-
firstX = minX;
|
|
53
|
-
firstY = maxY;
|
|
54
|
-
secondX = maxX;
|
|
55
|
-
secondY = minY;
|
|
56
|
-
}
|
|
57
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "tl-snap-indicator", stroke: "lime", children: [
|
|
58
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: firstX, y1: firstY, x2: secondX, y2: secondY }),
|
|
59
|
-
points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: `translate(${p.x},${p.y})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
|
-
"path",
|
|
61
|
-
{
|
|
62
|
-
className: "tl-snap-point",
|
|
63
|
-
d: `M ${-l},${-l} L ${l},${l} M ${-l},${l} L ${l},${-l}`
|
|
64
|
-
}
|
|
65
|
-
) }, i))
|
|
66
|
-
] });
|
|
67
|
-
}
|
|
68
|
-
function GapsSnapIndicator({ gaps, direction, zoom }) {
|
|
69
|
-
const l = 3.5 / zoom;
|
|
70
|
-
let edgeIntersection = [-Infinity, Infinity];
|
|
71
|
-
let nextEdgeIntersection = null;
|
|
72
|
-
const horizontal = direction === "horizontal";
|
|
73
|
-
for (const gap of gaps) {
|
|
74
|
-
nextEdgeIntersection = (0, import_utils.rangeIntersection)(
|
|
75
|
-
edgeIntersection[0],
|
|
76
|
-
edgeIntersection[1],
|
|
77
|
-
horizontal ? gap.startEdge[0].y : gap.startEdge[0].x,
|
|
78
|
-
horizontal ? gap.startEdge[1].y : gap.startEdge[1].x
|
|
79
|
-
);
|
|
80
|
-
if (nextEdgeIntersection) {
|
|
81
|
-
edgeIntersection = nextEdgeIntersection;
|
|
82
|
-
} else {
|
|
83
|
-
continue;
|
|
84
|
-
}
|
|
85
|
-
nextEdgeIntersection = (0, import_utils.rangeIntersection)(
|
|
86
|
-
edgeIntersection[0],
|
|
87
|
-
edgeIntersection[1],
|
|
88
|
-
horizontal ? gap.endEdge[0].y : gap.endEdge[0].x,
|
|
89
|
-
horizontal ? gap.endEdge[1].y : gap.endEdge[1].x
|
|
90
|
-
);
|
|
91
|
-
if (nextEdgeIntersection) {
|
|
92
|
-
edgeIntersection = nextEdgeIntersection;
|
|
93
|
-
} else {
|
|
94
|
-
continue;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
if (edgeIntersection === null) {
|
|
98
|
-
return null;
|
|
99
|
-
}
|
|
100
|
-
const midPoint = (edgeIntersection[0] + edgeIntersection[1]) / 2;
|
|
101
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "tl-snap-indicator", stroke: "cyan", children: gaps.map(({ startEdge, endEdge }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Fragment, { children: horizontal ? (
|
|
102
|
-
// horizontal gap
|
|
103
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
104
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
105
|
-
"line",
|
|
106
|
-
{
|
|
107
|
-
x1: startEdge[0].x,
|
|
108
|
-
y1: midPoint - 2 * l,
|
|
109
|
-
x2: startEdge[1].x,
|
|
110
|
-
y2: midPoint + 2 * l
|
|
111
|
-
}
|
|
112
|
-
),
|
|
113
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
114
|
-
"line",
|
|
115
|
-
{
|
|
116
|
-
x1: endEdge[0].x,
|
|
117
|
-
y1: midPoint - 2 * l,
|
|
118
|
-
x2: endEdge[1].x,
|
|
119
|
-
y2: midPoint + 2 * l
|
|
120
|
-
}
|
|
121
|
-
),
|
|
122
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: startEdge[0].x, y1: midPoint, x2: endEdge[0].x, y2: midPoint }),
|
|
123
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
124
|
-
"line",
|
|
125
|
-
{
|
|
126
|
-
x1: (startEdge[0].x + endEdge[0].x) / 2,
|
|
127
|
-
y1: midPoint - l,
|
|
128
|
-
x2: (startEdge[0].x + endEdge[0].x) / 2,
|
|
129
|
-
y2: midPoint + l
|
|
130
|
-
}
|
|
131
|
-
)
|
|
132
|
-
] })
|
|
133
|
-
) : (
|
|
134
|
-
// vertical gap
|
|
135
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
136
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
137
|
-
"line",
|
|
138
|
-
{
|
|
139
|
-
x1: midPoint - 2 * l,
|
|
140
|
-
y1: startEdge[0].y,
|
|
141
|
-
x2: midPoint + 2 * l,
|
|
142
|
-
y2: startEdge[1].y
|
|
143
|
-
}
|
|
144
|
-
),
|
|
145
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
146
|
-
"line",
|
|
147
|
-
{
|
|
148
|
-
x1: midPoint - 2 * l,
|
|
149
|
-
y1: endEdge[0].y,
|
|
150
|
-
x2: midPoint + 2 * l,
|
|
151
|
-
y2: endEdge[1].y
|
|
152
|
-
}
|
|
153
|
-
),
|
|
154
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: midPoint, y1: startEdge[0].y, x2: midPoint, y2: endEdge[0].y }),
|
|
155
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
156
|
-
"line",
|
|
157
|
-
{
|
|
158
|
-
x1: midPoint - l,
|
|
159
|
-
y1: (startEdge[0].y + endEdge[0].y) / 2,
|
|
160
|
-
x2: midPoint + l,
|
|
161
|
-
y2: (startEdge[0].y + endEdge[0].y) / 2
|
|
162
|
-
}
|
|
163
|
-
)
|
|
164
|
-
] })
|
|
165
|
-
) }, i)) });
|
|
166
|
-
}
|
|
167
|
-
function DefaultSnapIndicator({ className, line, zoom }) {
|
|
168
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: (0, import_classnames.default)("tl-overlays__item", className), "aria-hidden": "true", children: line.type === "points" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PointsSnapIndicator, { ...line, zoom }) : line.type === "gaps" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GapsSnapIndicator, { ...line, zoom }) : null });
|
|
169
|
-
}
|
|
170
|
-
//# sourceMappingURL=DefaultSnapIndictor.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultSnapIndictor.tsx"],
|
|
4
|
-
"sourcesContent": ["import classNames from 'classnames'\nimport * as React from 'react'\nimport {\n\ttype GapsSnapIndicator,\n\ttype PointsSnapIndicator,\n\ttype SnapIndicator,\n} from '../../editor/managers/SnapManager/SnapManager'\nimport { rangeIntersection } from '../../primitives/utils'\n\nfunction PointsSnapIndicator({ points, zoom }: { zoom: number } & PointsSnapIndicator) {\n\tconst l = 2.5 / zoom\n\n\tconst minX = points.reduce((acc, p) => Math.min(acc, p.x), Infinity)\n\tconst maxX = points.reduce((acc, p) => Math.max(acc, p.x), -Infinity)\n\tconst minY = points.reduce((acc, p) => Math.min(acc, p.y), Infinity)\n\tconst maxY = points.reduce((acc, p) => Math.max(acc, p.y), -Infinity)\n\n\tconst useNWtoSEdireciton = points.some((p) => p.x === minX && p.y === minY)\n\tlet firstX: number, firstY: number, secondX: number, secondY: number\n\tif (useNWtoSEdireciton) {\n\t\tfirstX = minX\n\t\tfirstY = minY\n\t\tsecondX = maxX\n\t\tsecondY = maxY\n\t} else {\n\t\tfirstX = minX\n\t\tfirstY = maxY\n\t\tsecondX = maxX\n\t\tsecondY = minY\n\t}\n\n\treturn (\n\t\t<g className=\"tl-snap-indicator\" stroke=\"lime\">\n\t\t\t<line x1={firstX} y1={firstY} x2={secondX} y2={secondY} />\n\t\t\t{points.map((p, i) => (\n\t\t\t\t<g transform={`translate(${p.x},${p.y})`} key={i}>\n\t\t\t\t\t<path\n\t\t\t\t\t\tclassName=\"tl-snap-point\"\n\t\t\t\t\t\td={`M ${-l},${-l} L ${l},${l} M ${-l},${l} L ${l},${-l}`}\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t))}\n\t\t</g>\n\t)\n}\n\nfunction GapsSnapIndicator({ gaps, direction, zoom }: { zoom: number } & GapsSnapIndicator) {\n\tconst l = 3.5 / zoom\n\n\tlet edgeIntersection: number[] | null = [-Infinity, +Infinity]\n\tlet nextEdgeIntersection: number[] | null = null\n\n\tconst horizontal = direction === 'horizontal'\n\n\t// find intersection of all gaps so we can render a straight line through it;\n\t// some range intersections may return null, in which case we skip that gap.\n\tfor (const gap of gaps) {\n\t\tnextEdgeIntersection = rangeIntersection(\n\t\t\tedgeIntersection[0],\n\t\t\tedgeIntersection[1],\n\t\t\thorizontal ? gap.startEdge[0].y : gap.startEdge[0].x,\n\t\t\thorizontal ? gap.startEdge[1].y : gap.startEdge[1].x\n\t\t)\n\n\t\tif (nextEdgeIntersection) {\n\t\t\tedgeIntersection = nextEdgeIntersection\n\t\t} else {\n\t\t\tcontinue\n\t\t}\n\n\t\tnextEdgeIntersection = rangeIntersection(\n\t\t\tedgeIntersection[0],\n\t\t\tedgeIntersection[1],\n\t\t\thorizontal ? gap.endEdge[0].y : gap.endEdge[0].x,\n\t\t\thorizontal ? gap.endEdge[1].y : gap.endEdge[1].x\n\t\t)\n\n\t\tif (nextEdgeIntersection) {\n\t\t\tedgeIntersection = nextEdgeIntersection\n\t\t} else {\n\t\t\tcontinue\n\t\t}\n\t}\n\n\tif (edgeIntersection === null) {\n\t\treturn null\n\t}\n\n\tconst midPoint = (edgeIntersection[0] + edgeIntersection[1]) / 2\n\n\treturn (\n\t\t<g className=\"tl-snap-indicator\" stroke=\"cyan\">\n\t\t\t{gaps.map(({ startEdge, endEdge }, i) => (\n\t\t\t\t<React.Fragment key={i}>\n\t\t\t\t\t{horizontal ? (\n\t\t\t\t\t\t// horizontal gap\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* start edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={startEdge[0].x}\n\t\t\t\t\t\t\t\ty1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\tx2={startEdge[1].x}\n\t\t\t\t\t\t\t\ty2={midPoint + 2 * l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* end edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={endEdge[0].x}\n\t\t\t\t\t\t\t\ty1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\tx2={endEdge[1].x}\n\t\t\t\t\t\t\t\ty2={midPoint + 2 * l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* joining line */}\n\t\t\t\t\t\t\t<line x1={startEdge[0].x} y1={midPoint} x2={endEdge[0].x} y2={midPoint} />\n\t\t\t\t\t\t\t{/* center point marker */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={(startEdge[0].x + endEdge[0].x) / 2}\n\t\t\t\t\t\t\t\ty1={midPoint - l}\n\t\t\t\t\t\t\t\tx2={(startEdge[0].x + endEdge[0].x) / 2}\n\t\t\t\t\t\t\t\ty2={midPoint + l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// vertical gap\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* start edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\ty1={startEdge[0].y}\n\t\t\t\t\t\t\t\tx2={midPoint + 2 * l}\n\t\t\t\t\t\t\t\ty2={startEdge[1].y}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* end edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\ty1={endEdge[0].y}\n\t\t\t\t\t\t\t\tx2={midPoint + 2 * l}\n\t\t\t\t\t\t\t\ty2={endEdge[1].y}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* joining line */}\n\t\t\t\t\t\t\t<line x1={midPoint} y1={startEdge[0].y} x2={midPoint} y2={endEdge[0].y} />\n\t\t\t\t\t\t\t{/* center point marker */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - l}\n\t\t\t\t\t\t\t\ty1={(startEdge[0].y + endEdge[0].y) / 2}\n\t\t\t\t\t\t\t\tx2={midPoint + l}\n\t\t\t\t\t\t\t\ty2={(startEdge[0].y + endEdge[0].y) / 2}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</React.Fragment>\n\t\t\t))}\n\t\t</g>\n\t)\n}\n\n/** @public */\nexport interface TLSnapIndicatorProps {\n\tclassName?: string\n\tline: SnapIndicator\n\tzoom: number\n}\n\n/** @public @react */\nexport function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {\n\treturn (\n\t\t<svg className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t{line.type === 'points' ? (\n\t\t\t\t<PointsSnapIndicator {...line} zoom={zoom} />\n\t\t\t) : line.type === 'gaps' ? (\n\t\t\t\t<GapsSnapIndicator {...line} zoom={zoom} />\n\t\t\t) : null}\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["classNames"]
|
|
7
|
-
}
|