@tldraw/editor 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6
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 -213
- package/dist-cjs/index.js +1 -8
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/TldrawEditor.js +0 -2
- package/dist-cjs/lib/TldrawEditor.js.map +2 -2
- package/dist-cjs/lib/components/SVGContainer.js +1 -1
- package/dist-cjs/lib/components/SVGContainer.js.map +2 -2
- package/dist-cjs/lib/components/Shape.js +26 -4
- package/dist-cjs/lib/components/Shape.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultBrush.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultCursor.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultGrid.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultGrid.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultHandles.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultSpinner.js +15 -27
- package/dist-cjs/lib/components/default-components/DefaultSpinner.js.map +3 -3
- package/dist-cjs/lib/config/TLUserPreferences.js +2 -14
- package/dist-cjs/lib/config/TLUserPreferences.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +52 -107
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +3 -13
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/tools/StateNode.js +1 -20
- package/dist-cjs/lib/editor/tools/StateNode.js.map +2 -2
- package/dist-cjs/lib/editor/types/misc-types.js.map +1 -1
- package/dist-cjs/lib/hooks/useEditor.js +4 -1
- package/dist-cjs/lib/hooks/useEditor.js.map +2 -2
- package/dist-cjs/lib/hooks/useEditorComponents.js +0 -2
- package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
- package/dist-cjs/lib/license/Watermark.js +2 -2
- package/dist-cjs/lib/license/Watermark.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/primitives/geometry/Arc2d.js +1 -1
- package/dist-cjs/lib/primitives/geometry/Arc2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Circle2d.js +1 -1
- package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/CubicBezier2d.js +1 -3
- package/dist-cjs/lib/primitives/geometry/CubicBezier2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +1 -1
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/geometry-constants.js +2 -2
- package/dist-cjs/lib/primitives/geometry/geometry-constants.js.map +2 -2
- package/dist-cjs/lib/primitives/intersect.js +4 -4
- package/dist-cjs/lib/primitives/intersect.js.map +2 -2
- package/dist-cjs/lib/primitives/utils.js +0 -4
- package/dist-cjs/lib/primitives/utils.js.map +2 -2
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +1 -0
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.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 -213
- package/dist-esm/index.mjs +2 -16
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +0 -2
- package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
- package/dist-esm/lib/components/SVGContainer.mjs +1 -1
- package/dist-esm/lib/components/SVGContainer.mjs.map +2 -2
- package/dist-esm/lib/components/Shape.mjs +26 -4
- package/dist-esm/lib/components/Shape.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultBrush.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultCursor.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultGrid.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultGrid.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultSpinner.mjs +15 -17
- package/dist-esm/lib/components/default-components/DefaultSpinner.mjs.map +2 -2
- package/dist-esm/lib/config/TLUserPreferences.mjs +2 -14
- package/dist-esm/lib/config/TLUserPreferences.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +52 -107
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +3 -13
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/tools/StateNode.mjs +1 -20
- package/dist-esm/lib/editor/tools/StateNode.mjs.map +2 -2
- package/dist-esm/lib/hooks/useEditor.mjs +4 -1
- package/dist-esm/lib/hooks/useEditor.mjs.map +2 -2
- package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -4
- package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
- package/dist-esm/lib/license/Watermark.mjs +2 -2
- package/dist-esm/lib/license/Watermark.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/primitives/geometry/Arc2d.mjs +2 -2
- package/dist-esm/lib/primitives/geometry/Arc2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Circle2d.mjs +2 -2
- package/dist-esm/lib/primitives/geometry/Circle2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/CubicBezier2d.mjs +1 -3
- package/dist-esm/lib/primitives/geometry/CubicBezier2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +2 -2
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/geometry-constants.mjs +2 -2
- package/dist-esm/lib/primitives/geometry/geometry-constants.mjs.map +2 -2
- package/dist-esm/lib/primitives/intersect.mjs +5 -5
- package/dist-esm/lib/primitives/intersect.mjs.map +2 -2
- package/dist-esm/lib/primitives/utils.mjs +0 -4
- package/dist-esm/lib/primitives/utils.mjs.map +2 -2
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +1 -0
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +27 -23
- package/package.json +8 -9
- package/src/index.ts +1 -15
- package/src/lib/TldrawEditor.tsx +0 -2
- package/src/lib/components/SVGContainer.tsx +1 -1
- package/src/lib/components/Shape.tsx +21 -6
- package/src/lib/components/default-components/DefaultBrush.tsx +1 -1
- package/src/lib/components/default-components/DefaultCanvas.tsx +1 -1
- package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +1 -1
- package/src/lib/components/default-components/DefaultCursor.tsx +1 -1
- package/src/lib/components/default-components/DefaultGrid.tsx +1 -1
- package/src/lib/components/default-components/DefaultHandles.tsx +1 -5
- package/src/lib/components/default-components/DefaultShapeIndicator.tsx +1 -1
- package/src/lib/components/default-components/DefaultSnapIndictor.tsx +1 -1
- package/src/lib/components/default-components/DefaultSpinner.tsx +12 -12
- package/src/lib/config/TLUserPreferences.ts +0 -14
- package/src/lib/editor/Editor.test.ts +0 -407
- package/src/lib/editor/Editor.ts +72 -140
- package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts +0 -34
- package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +0 -13
- package/src/lib/editor/shapes/ShapeUtil.ts +0 -57
- package/src/lib/editor/tools/StateNode.ts +1 -27
- package/src/lib/editor/types/misc-types.ts +1 -73
- package/src/lib/hooks/useEditor.tsx +5 -6
- package/src/lib/hooks/useEditorComponents.tsx +2 -8
- package/src/lib/license/Watermark.tsx +2 -2
- package/src/lib/options.ts +0 -2
- package/src/lib/primitives/geometry/Arc2d.ts +2 -2
- package/src/lib/primitives/geometry/Circle2d.ts +2 -2
- package/src/lib/primitives/geometry/CubicBezier2d.ts +1 -4
- package/src/lib/primitives/geometry/Ellipse2d.ts +2 -2
- package/src/lib/primitives/geometry/geometry-constants.ts +1 -2
- package/src/lib/primitives/intersect.ts +5 -12
- package/src/lib/primitives/utils.ts +0 -11
- package/src/lib/test/currentToolIdMask.test.ts +49 -0
- package/src/lib/utils/sync/TLLocalSyncClient.ts +1 -0
- package/src/version.ts +3 -3
- package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js +0 -53
- package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js.map +0 -7
- package/dist-cjs/lib/hooks/useStateAttribute.js +0 -35
- package/dist-cjs/lib/hooks/useStateAttribute.js.map +0 -7
- package/dist-cjs/lib/utils/EditorAtom.js +0 -45
- package/dist-cjs/lib/utils/EditorAtom.js.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeWrapper.mjs +0 -23
- package/dist-esm/lib/components/default-components/DefaultShapeWrapper.mjs.map +0 -7
- package/dist-esm/lib/hooks/useStateAttribute.mjs +0 -15
- package/dist-esm/lib/hooks/useStateAttribute.mjs.map +0 -7
- package/dist-esm/lib/utils/EditorAtom.mjs +0 -25
- package/dist-esm/lib/utils/EditorAtom.mjs.map +0 -7
- package/src/lib/components/default-components/DefaultShapeWrapper.tsx +0 -35
- package/src/lib/editor/tools/StateNode.test.ts +0 -285
- package/src/lib/hooks/useStateAttribute.ts +0 -15
- package/src/lib/primitives/intersect.test.ts +0 -946
- package/src/lib/utils/EditorAtom.ts +0 -37
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
const DefaultHandles = ({ children }) => {
|
|
3
|
-
return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item",
|
|
3
|
+
return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", children });
|
|
4
4
|
};
|
|
5
5
|
export {
|
|
6
6
|
DefaultHandles
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/components/default-components/DefaultHandles.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ReactNode } from 'react'\n\n/** @public */\nexport interface TLHandlesProps {\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport const DefaultHandles = ({ children }: TLHandlesProps) => {\n\treturn
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { ReactNode } from 'react'\n\n/** @public */\nexport interface TLHandlesProps {\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport const DefaultHandles = ({ children }: TLHandlesProps) => {\n\treturn <svg className=\"tl-user-handles tl-overlays__item\">{children}</svg>\n}\n"],
|
|
5
|
+
"mappings": "AASQ;AADD,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAAsB;AAC/D,SAAO,oBAAC,SAAI,WAAU,qCAAqC,UAAS;AACrE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -59,7 +59,7 @@ const DefaultShapeIndicator = memo(function DefaultShapeIndicator2({
|
|
|
59
59
|
if (!elm) return;
|
|
60
60
|
elm.style.setProperty("display", hidden ? "none" : "block");
|
|
61
61
|
}, [hidden]);
|
|
62
|
-
return /* @__PURE__ */ jsx("svg", { ref: rIndicator, className: classNames("tl-overlays__item", className),
|
|
62
|
+
return /* @__PURE__ */ jsx("svg", { ref: rIndicator, className: classNames("tl-overlays__item", className), children: /* @__PURE__ */ jsx("g", { className: "tl-shape-indicator", stroke: color ?? "var(--color-selected)", opacity, children: /* @__PURE__ */ jsx(InnerIndicator, { editor, id: shapeId }) }) });
|
|
63
63
|
});
|
|
64
64
|
export {
|
|
65
65
|
DefaultShapeIndicator
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\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\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={editor.getShapeUtil(shape)} />\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)}
|
|
5
|
-
"mappings": "AAyCG;AAzCH,SAAS,iBAAiB,kBAAkB,gBAAgB;AAE5D,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB,cAAc;AAG9C,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AAGtC,MAAM,uBAAuB;AAAA,EAC5B,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC9D,WAAO;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,iBAAiB,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAClF,QAAM,QAAQ,SAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,IAAI,oBAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,8BAAC,wBAAoC,OAAc,MAAM,OAAO,aAAa,KAAK,KAAvD,MAAM,EAAoD;AAAA;AAAA,EACtF;AAEF,CAAC;AAaM,MAAM,wBAAwB,KAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa,OAAsB,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,kBAAgB,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,oBAAC,SAAI,KAAK,YAAY,WAAW,WAAW,qBAAqB,SAAS,
|
|
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 { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\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\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={editor.getShapeUtil(shape)} />\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)}>\n\t\t\t<g className=\"tl-shape-indicator\" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>\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": "AAyCG;AAzCH,SAAS,iBAAiB,kBAAkB,gBAAgB;AAE5D,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB,cAAc;AAG9C,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AAGtC,MAAM,uBAAuB;AAAA,EAC5B,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC9D,WAAO;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,iBAAiB,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAClF,QAAM,QAAQ,SAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,IAAI,oBAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,8BAAC,wBAAoC,OAAc,MAAM,OAAO,aAAa,KAAK,KAAvD,MAAM,EAAoD;AAAA;AAAA,EACtF;AAEF,CAAC;AAaM,MAAM,wBAAwB,KAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa,OAAsB,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,kBAAgB,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,oBAAC,SAAI,KAAK,YAAY,WAAW,WAAW,qBAAqB,SAAS,GACzE,8BAAC,OAAE,WAAU,sBAAqB,QAAQ,SAAS,yBAAyB,SAC3E,8BAAC,kBAAe,QAAgB,IAAI,SAAS,GAC9C,GACD;AAEF,CAAC;",
|
|
6
6
|
"names": ["DefaultShapeIndicator"]
|
|
7
7
|
}
|
|
@@ -134,7 +134,7 @@ function GapsSnapIndicator({ gaps, direction, zoom }) {
|
|
|
134
134
|
);
|
|
135
135
|
}
|
|
136
136
|
function DefaultSnapIndicator({ className, line, zoom }) {
|
|
137
|
-
return /* @__PURE__ */ jsx("svg", { className: classNames("tl-overlays__item", className),
|
|
137
|
+
return /* @__PURE__ */ jsx("svg", { className: classNames("tl-overlays__item", className), children: line.type === "points" ? /* @__PURE__ */ jsx(PointsSnapIndicator, { ...line, zoom }) : line.type === "gaps" ? /* @__PURE__ */ jsx(GapsSnapIndicator, { ...line, zoom }) : null });
|
|
138
138
|
}
|
|
139
139
|
export {
|
|
140
140
|
DefaultSnapIndicator
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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)}
|
|
5
|
-
"mappings": "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
|
|
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)}>\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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
);
|
|
2
|
+
function DefaultSpinner() {
|
|
3
|
+
return /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", "aria-hidden": "false", children: /* @__PURE__ */ jsxs("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
|
|
4
|
+
/* @__PURE__ */ jsx("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
|
|
5
|
+
/* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor", children: /* @__PURE__ */ jsx(
|
|
6
|
+
"animateTransform",
|
|
7
|
+
{
|
|
8
|
+
attributeName: "transform",
|
|
9
|
+
type: "rotate",
|
|
10
|
+
from: "0 8 8",
|
|
11
|
+
to: "360 8 8",
|
|
12
|
+
dur: "1s",
|
|
13
|
+
repeatCount: "indefinite"
|
|
14
|
+
}
|
|
15
|
+
) })
|
|
16
|
+
] }) });
|
|
19
17
|
}
|
|
20
18
|
export {
|
|
21
19
|
DefaultSpinner
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/components/default-components/DefaultSpinner.tsx"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/** @public @react */\nexport function DefaultSpinner() {\n\treturn (\n\t\t<svg width={16} height={16} viewBox=\"0 0 16 16\" aria-hidden=\"false\">\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\">\n\t\t\t\t\t<animateTransform\n\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\tfrom=\"0 8 8\"\n\t\t\t\t\t\tto=\"360 8 8\"\n\t\t\t\t\t\tdur=\"1s\"\n\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t/>\n\t\t\t\t</path>\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
+
"mappings": "AAIG,SACC,KADD;AAHI,SAAS,iBAAiB;AAChC,SACC,oBAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAY,eAAY,SAC3D,+BAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,wBAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,IACvE,oBAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAC5D;AAAA,MAAC;AAAA;AAAA,QACA,eAAc;AAAA,QACd,MAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAG;AAAA,QACH,KAAI;AAAA,QACJ,aAAY;AAAA;AAAA,IACb,GACD;AAAA,KACD,GACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,14 +10,12 @@ const userTypeValidator = T.object({
|
|
|
10
10
|
// N.B. These are duplicated in TLdrawAppUser.
|
|
11
11
|
locale: T.string.nullable().optional(),
|
|
12
12
|
animationSpeed: T.number.nullable().optional(),
|
|
13
|
-
areKeyboardShortcutsEnabled: T.boolean.nullable().optional(),
|
|
14
13
|
edgeScrollSpeed: T.number.nullable().optional(),
|
|
15
14
|
colorScheme: T.literalEnum("light", "dark", "system").optional(),
|
|
16
15
|
isSnapMode: T.boolean.nullable().optional(),
|
|
17
16
|
isWrapMode: T.boolean.nullable().optional(),
|
|
18
17
|
isDynamicSizeMode: T.boolean.nullable().optional(),
|
|
19
|
-
isPasteAtCursorMode: T.boolean.nullable().optional()
|
|
20
|
-
showUiLabels: T.boolean.nullable().optional()
|
|
18
|
+
isPasteAtCursorMode: T.boolean.nullable().optional()
|
|
21
19
|
});
|
|
22
20
|
const Versions = {
|
|
23
21
|
AddAnimationSpeed: 1,
|
|
@@ -27,9 +25,7 @@ const Versions = {
|
|
|
27
25
|
AddExcalidrawSelectMode: 5,
|
|
28
26
|
AddDynamicSizeMode: 6,
|
|
29
27
|
AllowSystemColorScheme: 7,
|
|
30
|
-
AddPasteAtCursor: 8
|
|
31
|
-
AddKeyboardShortcuts: 9,
|
|
32
|
-
AddShowUiLabels: 10
|
|
28
|
+
AddPasteAtCursor: 8
|
|
33
29
|
};
|
|
34
30
|
const CURRENT_VERSION = Math.max(...Object.values(Versions));
|
|
35
31
|
function migrateSnapshot(data) {
|
|
@@ -61,12 +57,6 @@ function migrateSnapshot(data) {
|
|
|
61
57
|
if (data.version < Versions.AddPasteAtCursor) {
|
|
62
58
|
data.user.isPasteAtCursorMode = false;
|
|
63
59
|
}
|
|
64
|
-
if (data.version < Versions.AddKeyboardShortcuts) {
|
|
65
|
-
data.user.areKeyboardShortcutsEnabled = true;
|
|
66
|
-
}
|
|
67
|
-
if (data.version < Versions.AddShowUiLabels) {
|
|
68
|
-
data.user.showUiLabels = false;
|
|
69
|
-
}
|
|
70
60
|
data.version = CURRENT_VERSION;
|
|
71
61
|
}
|
|
72
62
|
const USER_COLORS = [
|
|
@@ -99,12 +89,10 @@ const defaultUserPreferences = Object.freeze({
|
|
|
99
89
|
// N.B. These are duplicated in TLdrawAppUser.
|
|
100
90
|
edgeScrollSpeed: 1,
|
|
101
91
|
animationSpeed: userPrefersReducedMotion() ? 0 : 1,
|
|
102
|
-
areKeyboardShortcutsEnabled: true,
|
|
103
92
|
isSnapMode: false,
|
|
104
93
|
isWrapMode: false,
|
|
105
94
|
isDynamicSizeMode: false,
|
|
106
95
|
isPasteAtCursorMode: false,
|
|
107
|
-
showUiLabels: false,
|
|
108
96
|
colorScheme: "light"
|
|
109
97
|
});
|
|
110
98
|
function getFreshUserPreferences() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/config/TLUserPreferences.ts"],
|
|
4
|
-
"sourcesContent": ["import { atom } from '@tldraw/state'\nimport { getDefaultTranslationLocale } from '@tldraw/tlschema'\nimport { getFromLocalStorage, setInLocalStorage, structuredClone, uniqueId } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\n\nconst USER_DATA_KEY = 'TLDRAW_USER_DATA_v3'\n\n/**\n * A user of tldraw\n *\n * @public\n */\nexport interface TLUserPreferences {\n\tid: string\n\tname?: string | null\n\tcolor?: string | null\n\t// N.B. These are duplicated in TLdrawAppUser.\n\tlocale?: string | null\n\tanimationSpeed?: number | null\n\
|
|
5
|
-
"mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,qBAAqB,mBAAmB,iBAAiB,gBAAgB;AAClF,SAAS,SAAS;AAElB,MAAM,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import { atom } from '@tldraw/state'\nimport { getDefaultTranslationLocale } from '@tldraw/tlschema'\nimport { getFromLocalStorage, setInLocalStorage, structuredClone, uniqueId } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\n\nconst USER_DATA_KEY = 'TLDRAW_USER_DATA_v3'\n\n/**\n * A user of tldraw\n *\n * @public\n */\nexport interface TLUserPreferences {\n\tid: string\n\tname?: string | null\n\tcolor?: string | null\n\t// N.B. These are duplicated in TLdrawAppUser.\n\tlocale?: string | null\n\tanimationSpeed?: number | null\n\tedgeScrollSpeed?: number | null\n\tcolorScheme?: 'light' | 'dark' | 'system'\n\tisSnapMode?: boolean | null\n\tisWrapMode?: boolean | null\n\tisDynamicSizeMode?: boolean | null\n\tisPasteAtCursorMode?: boolean | null\n}\n\ninterface UserDataSnapshot {\n\tversion: number\n\tuser: TLUserPreferences\n}\n\ninterface UserChangeBroadcastMessage {\n\ttype: typeof broadcastEventKey\n\torigin: string\n\tdata: UserDataSnapshot\n}\n\n/** @public */\nexport const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUserPreferences>({\n\tid: T.string,\n\tname: T.string.nullable().optional(),\n\tcolor: T.string.nullable().optional(),\n\t// N.B. These are duplicated in TLdrawAppUser.\n\tlocale: T.string.nullable().optional(),\n\tanimationSpeed: T.number.nullable().optional(),\n\tedgeScrollSpeed: T.number.nullable().optional(),\n\tcolorScheme: T.literalEnum('light', 'dark', 'system').optional(),\n\tisSnapMode: T.boolean.nullable().optional(),\n\tisWrapMode: T.boolean.nullable().optional(),\n\tisDynamicSizeMode: T.boolean.nullable().optional(),\n\tisPasteAtCursorMode: T.boolean.nullable().optional(),\n})\n\nconst Versions = {\n\tAddAnimationSpeed: 1,\n\tAddIsSnapMode: 2,\n\tMakeFieldsNullable: 3,\n\tAddEdgeScrollSpeed: 4,\n\tAddExcalidrawSelectMode: 5,\n\tAddDynamicSizeMode: 6,\n\tAllowSystemColorScheme: 7,\n\tAddPasteAtCursor: 8,\n} as const\n\nconst CURRENT_VERSION = Math.max(...Object.values(Versions))\n\nfunction migrateSnapshot(data: { version: number; user: any }) {\n\tif (data.version < Versions.AddAnimationSpeed) {\n\t\tdata.user.animationSpeed = 1\n\t}\n\tif (data.version < Versions.AddIsSnapMode) {\n\t\tdata.user.isSnapMode = false\n\t}\n\tif (data.version < Versions.MakeFieldsNullable) {\n\t\t// noop\n\t}\n\tif (data.version < Versions.AddEdgeScrollSpeed) {\n\t\tdata.user.edgeScrollSpeed = 1\n\t}\n\tif (data.version < Versions.AddExcalidrawSelectMode) {\n\t\tdata.user.isWrapMode = false\n\t}\n\tif (data.version < Versions.AllowSystemColorScheme) {\n\t\tif (data.user.isDarkMode === true) {\n\t\t\tdata.user.colorScheme = 'dark'\n\t\t} else if (data.user.isDarkMode === false) {\n\t\t\tdata.user.colorScheme = 'light'\n\t\t}\n\t\tdelete data.user.isDarkMode\n\t}\n\n\tif (data.version < Versions.AddDynamicSizeMode) {\n\t\tdata.user.isDynamicSizeMode = false\n\t}\n\tif (data.version < Versions.AddPasteAtCursor) {\n\t\tdata.user.isPasteAtCursorMode = false\n\t}\n\n\t// finally\n\tdata.version = CURRENT_VERSION\n}\n\n/** @internal */\nexport const USER_COLORS = [\n\t'#FF802B',\n\t'#EC5E41',\n\t'#F2555A',\n\t'#F04F88',\n\t'#E34BA9',\n\t'#BD54C6',\n\t'#9D5BD2',\n\t'#7B66DC',\n\t'#02B1CC',\n\t'#11B3A3',\n\t'#39B178',\n\t'#55B467',\n] as const\n\nfunction getRandomColor() {\n\treturn USER_COLORS[Math.floor(Math.random() * USER_COLORS.length)]\n}\n\n/** @internal */\nexport function userPrefersReducedMotion() {\n\tif (typeof window !== 'undefined' && 'matchMedia' in window) {\n\t\treturn window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false\n\t}\n\n\treturn false\n}\n\n/** @public */\nexport const defaultUserPreferences = Object.freeze({\n\tname: '',\n\tlocale: getDefaultTranslationLocale(),\n\tcolor: getRandomColor(),\n\n\t// N.B. These are duplicated in TLdrawAppUser.\n\tedgeScrollSpeed: 1,\n\tanimationSpeed: userPrefersReducedMotion() ? 0 : 1,\n\tisSnapMode: false,\n\tisWrapMode: false,\n\tisDynamicSizeMode: false,\n\tisPasteAtCursorMode: false,\n\tcolorScheme: 'light',\n}) satisfies Readonly<Omit<TLUserPreferences, 'id'>>\n\n/** @public */\nexport function getFreshUserPreferences(): TLUserPreferences {\n\treturn {\n\t\tid: uniqueId(),\n\t\tcolor: getRandomColor(),\n\t}\n}\n\nfunction migrateUserPreferences(userData: unknown): TLUserPreferences {\n\tif (userData === null || typeof userData !== 'object') {\n\t\treturn getFreshUserPreferences()\n\t}\n\n\tif (!('version' in userData) || !('user' in userData) || typeof userData.version !== 'number') {\n\t\treturn getFreshUserPreferences()\n\t}\n\n\tconst snapshot = structuredClone(userData) as any\n\n\tmigrateSnapshot(snapshot)\n\n\ttry {\n\t\treturn userTypeValidator.validate(snapshot.user)\n\t} catch {\n\t\treturn getFreshUserPreferences()\n\t}\n}\n\nfunction loadUserPreferences(): TLUserPreferences {\n\tconst userData = (JSON.parse(getFromLocalStorage(USER_DATA_KEY) || 'null') ??\n\t\tnull) as null | UserDataSnapshot\n\n\treturn migrateUserPreferences(userData)\n}\n\nconst globalUserPreferences = atom<TLUserPreferences | null>('globalUserData', null)\n\nfunction storeUserPreferences() {\n\tsetInLocalStorage(\n\t\tUSER_DATA_KEY,\n\t\tJSON.stringify({\n\t\t\tversion: CURRENT_VERSION,\n\t\t\tuser: globalUserPreferences.get(),\n\t\t})\n\t)\n}\n\n/** @public */\nexport function setUserPreferences(user: TLUserPreferences) {\n\tuserTypeValidator.validate(user)\n\tglobalUserPreferences.set(user)\n\tstoreUserPreferences()\n\tbroadcastUserPreferencesChange()\n}\n\nconst isTest = typeof process !== 'undefined' && process.env.NODE_ENV === 'test'\n\nconst channel =\n\ttypeof BroadcastChannel !== 'undefined' && !isTest\n\t\t? new BroadcastChannel('tldraw-user-sync')\n\t\t: null\n\nchannel?.addEventListener('message', (e) => {\n\tconst data = e.data as undefined | UserChangeBroadcastMessage\n\tif (data?.type === broadcastEventKey && data?.origin !== getBroadcastOrigin()) {\n\t\tglobalUserPreferences.set(migrateUserPreferences(data.data))\n\t}\n})\n\nlet _broadcastOrigin = null as null | string\nfunction getBroadcastOrigin() {\n\tif (_broadcastOrigin === null) {\n\t\t_broadcastOrigin = uniqueId()\n\t}\n\treturn _broadcastOrigin\n}\nconst broadcastEventKey = 'tldraw-user-preferences-change' as const\n\nfunction broadcastUserPreferencesChange() {\n\tchannel?.postMessage({\n\t\ttype: broadcastEventKey,\n\t\torigin: getBroadcastOrigin(),\n\t\tdata: {\n\t\t\tuser: getUserPreferences(),\n\t\t\tversion: CURRENT_VERSION,\n\t\t},\n\t} satisfies UserChangeBroadcastMessage)\n}\n\n/** @public */\nexport function getUserPreferences(): TLUserPreferences {\n\tlet prefs = globalUserPreferences.get()\n\tif (!prefs) {\n\t\tprefs = loadUserPreferences()\n\t\tsetUserPreferences(prefs)\n\t}\n\treturn prefs\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,qBAAqB,mBAAmB,iBAAiB,gBAAgB;AAClF,SAAS,SAAS;AAElB,MAAM,gBAAgB;AAkCf,MAAM,oBAAoD,EAAE,OAA0B;AAAA,EAC5F,IAAI,EAAE;AAAA,EACN,MAAM,EAAE,OAAO,SAAS,EAAE,SAAS;AAAA,EACnC,OAAO,EAAE,OAAO,SAAS,EAAE,SAAS;AAAA;AAAA,EAEpC,QAAQ,EAAE,OAAO,SAAS,EAAE,SAAS;AAAA,EACrC,gBAAgB,EAAE,OAAO,SAAS,EAAE,SAAS;AAAA,EAC7C,iBAAiB,EAAE,OAAO,SAAS,EAAE,SAAS;AAAA,EAC9C,aAAa,EAAE,YAAY,SAAS,QAAQ,QAAQ,EAAE,SAAS;AAAA,EAC/D,YAAY,EAAE,QAAQ,SAAS,EAAE,SAAS;AAAA,EAC1C,YAAY,EAAE,QAAQ,SAAS,EAAE,SAAS;AAAA,EAC1C,mBAAmB,EAAE,QAAQ,SAAS,EAAE,SAAS;AAAA,EACjD,qBAAqB,EAAE,QAAQ,SAAS,EAAE,SAAS;AACpD,CAAC;AAED,MAAM,WAAW;AAAA,EAChB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,kBAAkB;AACnB;AAEA,MAAM,kBAAkB,KAAK,IAAI,GAAG,OAAO,OAAO,QAAQ,CAAC;AAE3D,SAAS,gBAAgB,MAAsC;AAC9D,MAAI,KAAK,UAAU,SAAS,mBAAmB;AAC9C,SAAK,KAAK,iBAAiB;AAAA,EAC5B;AACA,MAAI,KAAK,UAAU,SAAS,eAAe;AAC1C,SAAK,KAAK,aAAa;AAAA,EACxB;AACA,MAAI,KAAK,UAAU,SAAS,oBAAoB;AAAA,EAEhD;AACA,MAAI,KAAK,UAAU,SAAS,oBAAoB;AAC/C,SAAK,KAAK,kBAAkB;AAAA,EAC7B;AACA,MAAI,KAAK,UAAU,SAAS,yBAAyB;AACpD,SAAK,KAAK,aAAa;AAAA,EACxB;AACA,MAAI,KAAK,UAAU,SAAS,wBAAwB;AACnD,QAAI,KAAK,KAAK,eAAe,MAAM;AAClC,WAAK,KAAK,cAAc;AAAA,IACzB,WAAW,KAAK,KAAK,eAAe,OAAO;AAC1C,WAAK,KAAK,cAAc;AAAA,IACzB;AACA,WAAO,KAAK,KAAK;AAAA,EAClB;AAEA,MAAI,KAAK,UAAU,SAAS,oBAAoB;AAC/C,SAAK,KAAK,oBAAoB;AAAA,EAC/B;AACA,MAAI,KAAK,UAAU,SAAS,kBAAkB;AAC7C,SAAK,KAAK,sBAAsB;AAAA,EACjC;AAGA,OAAK,UAAU;AAChB;AAGO,MAAM,cAAc;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEA,SAAS,iBAAiB;AACzB,SAAO,YAAY,KAAK,MAAM,KAAK,OAAO,IAAI,YAAY,MAAM,CAAC;AAClE;AAGO,SAAS,2BAA2B;AAC1C,MAAI,OAAO,WAAW,eAAe,gBAAgB,QAAQ;AAC5D,WAAO,OAAO,aAAa,kCAAkC,GAAG,WAAW;AAAA,EAC5E;AAEA,SAAO;AACR;AAGO,MAAM,yBAAyB,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ,4BAA4B;AAAA,EACpC,OAAO,eAAe;AAAA;AAAA,EAGtB,iBAAiB;AAAA,EACjB,gBAAgB,yBAAyB,IAAI,IAAI;AAAA,EACjD,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,aAAa;AACd,CAAC;AAGM,SAAS,0BAA6C;AAC5D,SAAO;AAAA,IACN,IAAI,SAAS;AAAA,IACb,OAAO,eAAe;AAAA,EACvB;AACD;AAEA,SAAS,uBAAuB,UAAsC;AACrE,MAAI,aAAa,QAAQ,OAAO,aAAa,UAAU;AACtD,WAAO,wBAAwB;AAAA,EAChC;AAEA,MAAI,EAAE,aAAa,aAAa,EAAE,UAAU,aAAa,OAAO,SAAS,YAAY,UAAU;AAC9F,WAAO,wBAAwB;AAAA,EAChC;AAEA,QAAM,WAAW,gBAAgB,QAAQ;AAEzC,kBAAgB,QAAQ;AAExB,MAAI;AACH,WAAO,kBAAkB,SAAS,SAAS,IAAI;AAAA,EAChD,QAAQ;AACP,WAAO,wBAAwB;AAAA,EAChC;AACD;AAEA,SAAS,sBAAyC;AACjD,QAAM,WAAY,KAAK,MAAM,oBAAoB,aAAa,KAAK,MAAM,KACxE;AAED,SAAO,uBAAuB,QAAQ;AACvC;AAEA,MAAM,wBAAwB,KAA+B,kBAAkB,IAAI;AAEnF,SAAS,uBAAuB;AAC/B;AAAA,IACC;AAAA,IACA,KAAK,UAAU;AAAA,MACd,SAAS;AAAA,MACT,MAAM,sBAAsB,IAAI;AAAA,IACjC,CAAC;AAAA,EACF;AACD;AAGO,SAAS,mBAAmB,MAAyB;AAC3D,oBAAkB,SAAS,IAAI;AAC/B,wBAAsB,IAAI,IAAI;AAC9B,uBAAqB;AACrB,iCAA+B;AAChC;AAEA,MAAM,SAAS,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa;AAE1E,MAAM,UACL,OAAO,qBAAqB,eAAe,CAAC,SACzC,IAAI,iBAAiB,kBAAkB,IACvC;AAEJ,SAAS,iBAAiB,WAAW,CAAC,MAAM;AAC3C,QAAM,OAAO,EAAE;AACf,MAAI,MAAM,SAAS,qBAAqB,MAAM,WAAW,mBAAmB,GAAG;AAC9E,0BAAsB,IAAI,uBAAuB,KAAK,IAAI,CAAC;AAAA,EAC5D;AACD,CAAC;AAED,IAAI,mBAAmB;AACvB,SAAS,qBAAqB;AAC7B,MAAI,qBAAqB,MAAM;AAC9B,uBAAmB,SAAS;AAAA,EAC7B;AACA,SAAO;AACR;AACA,MAAM,oBAAoB;AAE1B,SAAS,iCAAiC;AACzC,WAAS,YAAY;AAAA,IACpB,MAAM;AAAA,IACN,QAAQ,mBAAmB;AAAA,IAC3B,MAAM;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,SAAS;AAAA,IACV;AAAA,EACD,CAAsC;AACvC;AAGO,SAAS,qBAAwC;AACvD,MAAI,QAAQ,sBAAsB,IAAI;AACtC,MAAI,CAAC,OAAO;AACX,YAAQ,oBAAoB;AAC5B,uBAAmB,KAAK;AAAA,EACzB;AACA,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1466,9 +1466,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
1466
1466
|
return this;
|
|
1467
1467
|
}
|
|
1468
1468
|
/**
|
|
1469
|
-
* Select all
|
|
1470
|
-
* select all shapes within that parent. If the user has not selected any shapes,
|
|
1471
|
-
* or if the shapes shapes are only on select all shapes on the current page.
|
|
1469
|
+
* Select all direct children of the current page.
|
|
1472
1470
|
*
|
|
1473
1471
|
* @example
|
|
1474
1472
|
* ```ts
|
|
@@ -1478,23 +1476,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
1478
1476
|
* @public
|
|
1479
1477
|
*/
|
|
1480
1478
|
selectAll() {
|
|
1481
|
-
|
|
1482
|
-
const selectedShapeIds = this.getSelectedShapeIds();
|
|
1483
|
-
if (selectedShapeIds.length > 0) {
|
|
1484
|
-
for (const id of selectedShapeIds) {
|
|
1485
|
-
const shape = this.getShape(id);
|
|
1486
|
-
if (!shape) continue;
|
|
1487
|
-
if (parentToSelectWithinId === null) {
|
|
1488
|
-
parentToSelectWithinId = shape.parentId;
|
|
1489
|
-
} else if (parentToSelectWithinId !== shape.parentId) {
|
|
1490
|
-
return this;
|
|
1491
|
-
}
|
|
1492
|
-
}
|
|
1493
|
-
}
|
|
1494
|
-
if (!parentToSelectWithinId) {
|
|
1495
|
-
parentToSelectWithinId = this.getCurrentPageId();
|
|
1496
|
-
}
|
|
1497
|
-
const ids = this.getSortedChildIdsForParent(parentToSelectWithinId);
|
|
1479
|
+
const ids = this.getSortedChildIdsForParent(this.getCurrentPageId());
|
|
1498
1480
|
if (ids.length <= 0) return this;
|
|
1499
1481
|
this.setSelectedShapes(this._getUnlockedShapeIds(ids));
|
|
1500
1482
|
return this;
|
|
@@ -1513,8 +1495,9 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
1513
1495
|
const selectedShapeIds = this.getSelectedShapeIds();
|
|
1514
1496
|
const firstParentId = selectedShapeIds[0] ? this.getShape(selectedShapeIds[0])?.parentId : null;
|
|
1515
1497
|
const isSelectedWithinContainer = firstParentId && selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) && !isPageId(firstParentId);
|
|
1516
|
-
const
|
|
1517
|
-
|
|
1498
|
+
const readingOrderShapes = isSelectedWithinContainer ? this._getShapesInReadingOrder(
|
|
1499
|
+
this.getCurrentPageShapes().filter((shape2) => shape2.parentId === firstParentId)
|
|
1500
|
+
) : this.getCurrentPageShapesInReadingOrder();
|
|
1518
1501
|
const currentShapeId = selectedShapeIds.length === 1 ? selectedShapeIds[0] : readingOrderShapes.find((shape2) => selectedShapeIds.includes(shape2.id))?.id;
|
|
1519
1502
|
let adjacentShapeId;
|
|
1520
1503
|
if (direction === "next" || direction === "prev") {
|
|
@@ -1524,7 +1507,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
1524
1507
|
adjacentShapeId = shapeIds[adjacentIndex];
|
|
1525
1508
|
} else {
|
|
1526
1509
|
if (!currentShapeId) return;
|
|
1527
|
-
adjacentShapeId = this.getNearestAdjacentShape(
|
|
1510
|
+
adjacentShapeId = this.getNearestAdjacentShape(currentShapeId, direction);
|
|
1528
1511
|
}
|
|
1529
1512
|
const shape = this.getShape(adjacentShapeId);
|
|
1530
1513
|
if (!shape) return;
|
|
@@ -1590,10 +1573,11 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
1590
1573
|
*
|
|
1591
1574
|
* @public
|
|
1592
1575
|
*/
|
|
1593
|
-
getNearestAdjacentShape(
|
|
1576
|
+
getNearestAdjacentShape(currentShapeId, direction) {
|
|
1594
1577
|
const directionToAngle = { right: 0, left: 180, down: 90, up: 270 };
|
|
1595
1578
|
const currentShape = this.getShape(currentShapeId);
|
|
1596
1579
|
if (!currentShape) return currentShapeId;
|
|
1580
|
+
const shapes = this.getCurrentPageShapes();
|
|
1597
1581
|
const tabbableShapes = shapes.filter(
|
|
1598
1582
|
(shape) => this.getShapeUtil(shape).canTabTo(shape) && shape.id !== currentShapeId
|
|
1599
1583
|
);
|
|
@@ -2357,11 +2341,28 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
2357
2341
|
{ history: "ignore" }
|
|
2358
2342
|
);
|
|
2359
2343
|
const { currentScreenPoint, currentPagePoint } = this.inputs;
|
|
2344
|
+
const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID);
|
|
2360
2345
|
if (currentScreenPoint.x / z - x !== currentPagePoint.x || currentScreenPoint.y / z - y !== currentPagePoint.y) {
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2346
|
+
const event = {
|
|
2347
|
+
type: "pointer",
|
|
2348
|
+
target: "canvas",
|
|
2349
|
+
name: "pointer_move",
|
|
2350
|
+
// weird but true: we need to put the screen point back into client space
|
|
2351
|
+
point: Vec.AddXY(currentScreenPoint, screenBounds.x, screenBounds.y),
|
|
2352
|
+
pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE,
|
|
2353
|
+
ctrlKey: this.inputs.ctrlKey,
|
|
2354
|
+
altKey: this.inputs.altKey,
|
|
2355
|
+
shiftKey: this.inputs.shiftKey,
|
|
2356
|
+
metaKey: this.inputs.metaKey,
|
|
2357
|
+
accelKey: isAccelKey(this.inputs),
|
|
2358
|
+
button: 0,
|
|
2359
|
+
isPen: this.getInstanceState().isPenMode ?? false
|
|
2360
|
+
};
|
|
2361
|
+
if (opts?.immediate) {
|
|
2362
|
+
this._flushEventForTick(event);
|
|
2363
|
+
} else {
|
|
2364
|
+
this.dispatch(event);
|
|
2365
|
+
}
|
|
2365
2366
|
}
|
|
2366
2367
|
this._tickCameraState();
|
|
2367
2368
|
});
|
|
@@ -3330,24 +3331,19 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
3330
3331
|
*/
|
|
3331
3332
|
deletePage(page) {
|
|
3332
3333
|
const id = typeof page === "string" ? page : page.id;
|
|
3333
|
-
this.run(
|
|
3334
|
-
()
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3346
|
-
this.deleteShapes(shapes);
|
|
3347
|
-
this.store.remove([deletedPage.id]);
|
|
3348
|
-
},
|
|
3349
|
-
{ ignoreShapeLock: true }
|
|
3350
|
-
);
|
|
3334
|
+
this.run(() => {
|
|
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
|
+
this.store.remove([deletedPage.id]);
|
|
3346
|
+
});
|
|
3351
3347
|
return this;
|
|
3352
3348
|
}
|
|
3353
3349
|
/**
|
|
@@ -3944,7 +3940,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
3944
3940
|
hitInside = false,
|
|
3945
3941
|
hitFrameInside = false
|
|
3946
3942
|
} = opts;
|
|
3947
|
-
const [innerMargin, outerMargin] = Array.isArray(margin) ? margin : [margin, margin];
|
|
3948
3943
|
let inHollowSmallestArea = Infinity;
|
|
3949
3944
|
let inHollowSmallestAreaHit = null;
|
|
3950
3945
|
let inMarginClosestToEdgeDistance = Infinity;
|
|
@@ -3954,7 +3949,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
3954
3949
|
return false;
|
|
3955
3950
|
const pageMask = this.getShapeMask(shape);
|
|
3956
3951
|
if (pageMask && !pointInPolygon(point, pageMask)) return false;
|
|
3957
|
-
if (filter
|
|
3952
|
+
if (filter) return filter(shape);
|
|
3958
3953
|
return true;
|
|
3959
3954
|
});
|
|
3960
3955
|
for (let i = shapesToCheck.length - 1; i >= 0; i--) {
|
|
@@ -3962,7 +3957,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
3962
3957
|
const geometry = this.getShapeGeometry(shape);
|
|
3963
3958
|
const isGroup = geometry instanceof Group2d;
|
|
3964
3959
|
const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
|
|
3965
|
-
if (this.isShapeOfType(shape, "frame") ||
|
|
3960
|
+
if (this.isShapeOfType(shape, "frame") || this.isShapeOfType(shape, "arrow") && shape.props.text.trim() || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
|
|
3966
3961
|
for (const childGeometry of geometry.children) {
|
|
3967
3962
|
if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
|
|
3968
3963
|
return shape;
|
|
@@ -3970,8 +3965,8 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
3970
3965
|
}
|
|
3971
3966
|
}
|
|
3972
3967
|
if (this.isShapeOfType(shape, "frame")) {
|
|
3973
|
-
const distance2 = geometry.distanceToPoint(pointInShapeSpace,
|
|
3974
|
-
if (
|
|
3968
|
+
const distance2 = geometry.distanceToPoint(pointInShapeSpace, hitInside);
|
|
3969
|
+
if (Math.abs(distance2) <= margin) {
|
|
3975
3970
|
return inMarginClosestToEdgeHit || shape;
|
|
3976
3971
|
}
|
|
3977
3972
|
if (geometry.hitTestPoint(pointInShapeSpace, 0, true)) {
|
|
@@ -3991,10 +3986,10 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
3991
3986
|
}
|
|
3992
3987
|
distance = minDistance;
|
|
3993
3988
|
} else {
|
|
3994
|
-
if (
|
|
3989
|
+
if (margin === 0 && (geometry.bounds.w < 1 || geometry.bounds.h < 1)) {
|
|
3995
3990
|
distance = geometry.distanceToPoint(pointInShapeSpace, hitInside);
|
|
3996
3991
|
} else {
|
|
3997
|
-
if (geometry.bounds.containsPoint(pointInShapeSpace,
|
|
3992
|
+
if (geometry.bounds.containsPoint(pointInShapeSpace, margin)) {
|
|
3998
3993
|
distance = geometry.distanceToPoint(pointInShapeSpace, hitInside);
|
|
3999
3994
|
} else {
|
|
4000
3995
|
distance = Infinity;
|
|
@@ -4002,22 +3997,12 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
4002
3997
|
}
|
|
4003
3998
|
}
|
|
4004
3999
|
if (geometry.isClosed) {
|
|
4005
|
-
if (distance <=
|
|
4000
|
+
if (distance <= margin) {
|
|
4006
4001
|
if (geometry.isFilled || isGroup && geometry.children[0].isFilled) {
|
|
4007
4002
|
return inMarginClosestToEdgeHit || shape;
|
|
4008
4003
|
} else {
|
|
4009
4004
|
if (this.getShapePageBounds(shape).contains(viewportPageBounds)) continue;
|
|
4010
|
-
if (
|
|
4011
|
-
// On hitInside, the distance will be negative for hits inside
|
|
4012
|
-
// If the distance is positive, check against the outer margin
|
|
4013
|
-
(// If the distance is negative, check against the inner margin
|
|
4014
|
-
distance > 0 && distance <= outerMargin || distance <= 0 && distance > -innerMargin)
|
|
4015
|
-
) : (
|
|
4016
|
-
// If hitInside is false, then sadly _we do not know_ whether the
|
|
4017
|
-
// point is inside or outside of the shape, so we check against
|
|
4018
|
-
// the max of the two margins
|
|
4019
|
-
(Math.abs(distance) <= Math.max(innerMargin, outerMargin))
|
|
4020
|
-
)) {
|
|
4005
|
+
if (Math.abs(distance) < margin) {
|
|
4021
4006
|
if (Math.abs(distance) < inMarginClosestToEdgeDistance) {
|
|
4022
4007
|
inMarginClosestToEdgeDistance = Math.abs(distance);
|
|
4023
4008
|
inMarginClosestToEdgeHit = shape;
|
|
@@ -5536,7 +5521,8 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
5536
5521
|
const shapesMovingTogether = [shape];
|
|
5537
5522
|
const boundsOfShapesMovingTogether = [shapePageBounds];
|
|
5538
5523
|
if (!this.getShapeUtil(shape).canBeLaidOut?.(shape, {
|
|
5539
|
-
type: "stretch"
|
|
5524
|
+
type: "stretch",
|
|
5525
|
+
shapes: shapesToStretchFirstPass
|
|
5540
5526
|
})) {
|
|
5541
5527
|
continue;
|
|
5542
5528
|
}
|
|
@@ -7060,47 +7046,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
|
|
|
7060
7046
|
this.dispatch({ type: "misc", name: "complete" });
|
|
7061
7047
|
return this;
|
|
7062
7048
|
}
|
|
7063
|
-
/**
|
|
7064
|
-
* Dispatch a pointer move event in the current position of the pointer. This is useful when
|
|
7065
|
-
* external circumstances have changed (e.g. the camera moved or a shape was moved) and you want
|
|
7066
|
-
* the current interaction to respond to that change.
|
|
7067
|
-
*
|
|
7068
|
-
* @example
|
|
7069
|
-
* ```ts
|
|
7070
|
-
* editor.updatePointer()
|
|
7071
|
-
* ```
|
|
7072
|
-
*
|
|
7073
|
-
* @param options - The options for updating the pointer.
|
|
7074
|
-
* @returns The editor instance.
|
|
7075
|
-
* @public
|
|
7076
|
-
*/
|
|
7077
|
-
updatePointer(options) {
|
|
7078
|
-
const event = {
|
|
7079
|
-
type: "pointer",
|
|
7080
|
-
target: "canvas",
|
|
7081
|
-
name: "pointer_move",
|
|
7082
|
-
point: options?.point ?? // weird but true: what `inputs` calls screen-space is actually viewport space. so
|
|
7083
|
-
// we need to convert back into true screen space first. we should fix this...
|
|
7084
|
-
Vec.Add(
|
|
7085
|
-
this.inputs.currentScreenPoint,
|
|
7086
|
-
this.store.unsafeGetWithoutCapture(TLINSTANCE_ID).screenBounds
|
|
7087
|
-
),
|
|
7088
|
-
pointerId: options?.pointerId ?? 0,
|
|
7089
|
-
button: options?.button ?? 0,
|
|
7090
|
-
isPen: options?.isPen ?? this.inputs.isPen,
|
|
7091
|
-
shiftKey: options?.shiftKey ?? this.inputs.shiftKey,
|
|
7092
|
-
altKey: options?.altKey ?? this.inputs.altKey,
|
|
7093
|
-
ctrlKey: options?.ctrlKey ?? this.inputs.ctrlKey,
|
|
7094
|
-
metaKey: options?.metaKey ?? this.inputs.metaKey,
|
|
7095
|
-
accelKey: options?.accelKey ?? isAccelKey(this.inputs)
|
|
7096
|
-
};
|
|
7097
|
-
if (options?.immediate) {
|
|
7098
|
-
this._flushEventForTick(event);
|
|
7099
|
-
} else {
|
|
7100
|
-
this.dispatch(event);
|
|
7101
|
-
}
|
|
7102
|
-
return this;
|
|
7103
|
-
}
|
|
7104
7049
|
/**
|
|
7105
7050
|
* Puts the editor into focused mode.
|
|
7106
7051
|
*
|