@tldraw/editor 4.6.0-internal.c7df3c92455a → 4.6.0-next.0a51207761bb
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 +850 -118
- package/dist-cjs/index.js +20 -6
- package/dist-cjs/index.js.map +3 -3
- package/dist-cjs/lib/TldrawEditor.js +59 -14
- package/dist-cjs/lib/TldrawEditor.js.map +3 -3
- package/dist-cjs/lib/components/MenuClickCapture.js +16 -1
- package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
- package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +3 -3
- package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.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/DefaultErrorFallback.js.map +2 -2
- package/dist-cjs/lib/config/{createTLUser.js → createTLCurrentUser.js} +9 -9
- package/dist-cjs/lib/config/createTLCurrentUser.js.map +7 -0
- package/dist-cjs/lib/config/createTLStore.js +31 -1
- package/dist-cjs/lib/config/createTLStore.js.map +2 -2
- package/dist-cjs/lib/config/defaultAssets.js +36 -0
- package/dist-cjs/lib/config/defaultAssets.js.map +7 -0
- package/dist-cjs/lib/config/defaultShapes.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +788 -362
- package/dist-cjs/lib/editor/Editor.js.map +3 -3
- package/dist-cjs/lib/editor/assets/AssetUtil.js +66 -0
- package/dist-cjs/lib/editor/assets/AssetUtil.js.map +7 -0
- package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js +25 -64
- package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +1 -1
- package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +14 -53
- package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js +71 -112
- package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js +80 -0
- package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js.map +7 -0
- package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js +466 -0
- package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js.map +7 -0
- package/dist-cjs/lib/editor/managers/PerformanceManager/perf-types.js +17 -0
- package/dist-cjs/lib/editor/managers/PerformanceManager/perf-types.js.map +7 -0
- package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js +21 -56
- package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +11 -52
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +19 -56
- package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +4 -4
- package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +102 -30
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js +106 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map +7 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +586 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +7 -0
- package/dist-cjs/lib/editor/managers/TickManager/TickManager.js +16 -55
- package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +63 -72
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +21 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +1 -1
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js +6 -0
- package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js.map +2 -2
- package/dist-cjs/lib/editor/tools/StateNode.js +14 -17
- package/dist-cjs/lib/editor/tools/StateNode.js.map +2 -2
- package/dist-cjs/lib/editor/types/SvgExportContext.js.map +2 -2
- package/dist-cjs/lib/editor/types/clipboard-types.js.map +1 -1
- package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
- package/dist-cjs/lib/exports/ExportDelay.js +12 -53
- package/dist-cjs/lib/exports/ExportDelay.js.map +1 -1
- package/dist-cjs/lib/exports/FontEmbedder.js +14 -57
- package/dist-cjs/lib/exports/FontEmbedder.js.map +1 -1
- package/dist-cjs/lib/exports/StyleEmbedder.js +1 -1
- package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
- package/dist-cjs/lib/exports/getSvgJsx.js +12 -7
- package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
- package/dist-cjs/lib/globals/environment.js +18 -1
- package/dist-cjs/lib/globals/environment.js.map +2 -2
- package/dist-cjs/lib/hooks/{useIsDarkMode.js → useColorMode.js} +14 -10
- package/dist-cjs/lib/hooks/useColorMode.js.map +7 -0
- package/dist-cjs/lib/hooks/useCursor.js +3 -7
- package/dist-cjs/lib/hooks/useCursor.js.map +2 -2
- package/dist-cjs/lib/hooks/useDarkMode.js +4 -4
- package/dist-cjs/lib/hooks/useDarkMode.js.map +2 -2
- package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
- package/dist-cjs/lib/hooks/useGestureEvents.js +171 -127
- package/dist-cjs/lib/hooks/useGestureEvents.js.map +3 -3
- package/dist-cjs/lib/hooks/useLocalStore.js.map +2 -2
- package/dist-cjs/lib/options.js +3 -0
- package/dist-cjs/lib/options.js.map +2 -2
- package/dist-cjs/lib/primitives/Box.js +26 -26
- package/dist-cjs/lib/primitives/Box.js.map +2 -2
- package/dist-cjs/lib/primitives/Vec.js +1 -1
- package/dist-cjs/lib/primitives/Vec.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Arc2d.js +2 -2
- package/dist-cjs/lib/primitives/geometry/Arc2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Circle2d.js +2 -2
- package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/CubicSpline2d.js +1 -1
- package/dist-cjs/lib/primitives/geometry/CubicSpline2d.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +3 -3
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js +10 -9
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Polyline2d.js +2 -2
- package/dist-cjs/lib/primitives/geometry/Polyline2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Stadium2d.js +1 -1
- package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +2 -2
- package/dist-cjs/lib/utils/SharedStylesMap.js +1 -1
- package/dist-cjs/lib/utils/SharedStylesMap.js.map +1 -1
- package/dist-cjs/lib/utils/getSvgPathFromPoints.js.map +2 -2
- package/dist-cjs/lib/utils/reparenting.js +2 -1
- package/dist-cjs/lib/utils/reparenting.js.map +2 -2
- package/dist-cjs/lib/utils/richText.js.map +2 -2
- package/dist-cjs/lib/utils/runtime.js +2 -1
- package/dist-cjs/lib/utils/runtime.js.map +2 -2
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +3 -2
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
- package/dist-cjs/lib/utils/sync/hardReset.js +0 -8
- package/dist-cjs/lib/utils/sync/hardReset.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 +850 -118
- package/dist-esm/index.mjs +28 -10
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +62 -14
- package/dist-esm/lib/TldrawEditor.mjs.map +3 -3
- package/dist-esm/lib/components/MenuClickCapture.mjs +16 -1
- package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +3 -3
- package/dist-esm/lib/components/default-components/CanvasShapeIndicators.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/DefaultErrorFallback.mjs.map +2 -2
- package/dist-esm/lib/config/{createTLUser.mjs → createTLCurrentUser.mjs} +6 -6
- package/dist-esm/lib/config/createTLCurrentUser.mjs.map +7 -0
- package/dist-esm/lib/config/createTLStore.mjs +37 -2
- package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
- package/dist-esm/lib/config/defaultAssets.mjs +16 -0
- package/dist-esm/lib/config/defaultAssets.mjs.map +7 -0
- package/dist-esm/lib/config/defaultShapes.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +791 -364
- package/dist-esm/lib/editor/Editor.mjs.map +3 -3
- package/dist-esm/lib/editor/assets/AssetUtil.mjs +46 -0
- package/dist-esm/lib/editor/assets/AssetUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs +25 -64
- package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +1 -1
- package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +14 -53
- package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs +71 -112
- package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs +60 -0
- package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs +438 -0
- package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs +1 -0
- package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs +21 -56
- package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +11 -52
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +19 -56
- package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +4 -4
- package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +102 -30
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs +88 -0
- package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +568 -0
- package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs +16 -55
- package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +63 -72
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +21 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +1 -1
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs +6 -0
- package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs.map +2 -2
- package/dist-esm/lib/editor/tools/StateNode.mjs +14 -17
- package/dist-esm/lib/editor/tools/StateNode.mjs.map +2 -2
- package/dist-esm/lib/editor/types/SvgExportContext.mjs.map +2 -2
- package/dist-esm/lib/exports/ExportDelay.mjs +12 -53
- package/dist-esm/lib/exports/ExportDelay.mjs.map +1 -1
- package/dist-esm/lib/exports/FontEmbedder.mjs +14 -57
- package/dist-esm/lib/exports/FontEmbedder.mjs.map +1 -1
- package/dist-esm/lib/exports/StyleEmbedder.mjs +1 -1
- package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
- package/dist-esm/lib/exports/getSvgJsx.mjs +12 -10
- package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
- package/dist-esm/lib/globals/environment.mjs +18 -1
- package/dist-esm/lib/globals/environment.mjs.map +2 -2
- package/dist-esm/lib/hooks/useColorMode.mjs +19 -0
- package/dist-esm/lib/hooks/useColorMode.mjs.map +7 -0
- package/dist-esm/lib/hooks/useCursor.mjs +3 -7
- package/dist-esm/lib/hooks/useCursor.mjs.map +2 -2
- package/dist-esm/lib/hooks/useDarkMode.mjs +4 -4
- package/dist-esm/lib/hooks/useDarkMode.mjs.map +2 -2
- package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
- package/dist-esm/lib/hooks/useGestureEvents.mjs +171 -127
- package/dist-esm/lib/hooks/useGestureEvents.mjs.map +3 -3
- package/dist-esm/lib/hooks/useLocalStore.mjs.map +2 -2
- package/dist-esm/lib/options.mjs +3 -0
- package/dist-esm/lib/options.mjs.map +2 -2
- package/dist-esm/lib/primitives/Box.mjs +26 -26
- package/dist-esm/lib/primitives/Box.mjs.map +2 -2
- package/dist-esm/lib/primitives/Vec.mjs +1 -1
- package/dist-esm/lib/primitives/Vec.mjs.map +1 -1
- 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/CubicSpline2d.mjs +1 -1
- package/dist-esm/lib/primitives/geometry/CubicSpline2d.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +3 -3
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +10 -9
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Polyline2d.mjs +2 -2
- package/dist-esm/lib/primitives/geometry/Polyline2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Stadium2d.mjs +1 -1
- package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +2 -2
- package/dist-esm/lib/utils/SharedStylesMap.mjs +1 -1
- package/dist-esm/lib/utils/SharedStylesMap.mjs.map +1 -1
- package/dist-esm/lib/utils/getSvgPathFromPoints.mjs.map +2 -2
- package/dist-esm/lib/utils/reparenting.mjs +2 -1
- package/dist-esm/lib/utils/reparenting.mjs.map +2 -2
- package/dist-esm/lib/utils/richText.mjs.map +2 -2
- package/dist-esm/lib/utils/runtime.mjs +2 -1
- package/dist-esm/lib/utils/runtime.mjs.map +2 -2
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +3 -2
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
- package/dist-esm/lib/utils/sync/hardReset.mjs +0 -8
- package/dist-esm/lib/utils/sync/hardReset.mjs.map +2 -2
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +13 -33
- package/package.json +7 -8
- package/src/index.ts +44 -14
- package/src/lib/TldrawEditor.tsx +99 -20
- package/src/lib/components/MenuClickCapture.tsx +20 -0
- package/src/lib/components/default-components/CanvasShapeIndicators.tsx +3 -3
- 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/DefaultErrorFallback.tsx +1 -0
- package/src/lib/config/TLEditorSnapshot.test.ts +1 -1
- package/src/lib/config/{createTLUser.ts → createTLCurrentUser.ts} +9 -9
- package/src/lib/config/createTLStore.ts +58 -3
- package/src/lib/config/defaultAssets.ts +19 -0
- package/src/lib/config/defaultShapes.ts +1 -1
- package/src/lib/editor/Editor.ts +448 -36
- package/src/lib/editor/assets/AssetUtil.ts +85 -0
- package/src/lib/editor/managers/ClickManager/ClickManager.ts +1 -1
- package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.ts +1 -1
- package/src/lib/editor/managers/FontManager/FontManager.test.ts +9 -2
- package/src/lib/editor/managers/FontManager/FontManager.ts +1 -67
- package/src/lib/editor/managers/InputsManager/InputsManager.ts +30 -30
- package/src/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.ts +82 -0
- package/src/lib/editor/managers/PerformanceManager/PerformanceManager.test.ts +522 -0
- package/src/lib/editor/managers/PerformanceManager/PerformanceManager.ts +583 -0
- package/src/lib/editor/managers/PerformanceManager/perf-types.ts +196 -0
- package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts +1 -1
- package/src/lib/editor/managers/SnapManager/HandleSnaps.ts +1 -1
- package/src/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.ts +5 -5
- package/src/lib/editor/managers/TextManager/TextManager.test.ts +18 -4
- package/src/lib/editor/managers/TextManager/TextManager.ts +140 -34
- package/src/lib/editor/managers/ThemeManager/ThemeManager.ts +116 -0
- package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +605 -0
- package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts +25 -31
- package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +7 -5
- package/src/lib/editor/shapes/ShapeUtil.ts +41 -5
- package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +1 -1
- package/src/lib/editor/shapes/shared/getPerfectDashProps.ts +7 -0
- package/src/lib/editor/tools/StateNode.ts +16 -18
- package/src/lib/editor/types/SvgExportContext.tsx +5 -0
- package/src/lib/editor/types/clipboard-types.ts +2 -1
- package/src/lib/editor/types/external-content.ts +1 -0
- package/src/lib/exports/StyleEmbedder.ts +1 -1
- package/src/lib/exports/getSvgJsx.tsx +22 -16
- package/src/lib/globals/environment.ts +18 -0
- package/src/lib/hooks/{useIsDarkMode.ts → useColorMode.ts} +9 -5
- package/src/lib/hooks/useCursor.ts +3 -7
- package/src/lib/hooks/useDarkMode.ts +4 -4
- package/src/lib/hooks/useEditorComponents.tsx +1 -1
- package/src/lib/hooks/useGestureEvents.ts +240 -168
- package/src/lib/hooks/useLocalStore.ts +1 -1
- package/src/lib/options.ts +108 -0
- package/src/lib/primitives/Box.test.ts +30 -0
- package/src/lib/primitives/Box.ts +26 -26
- package/src/lib/primitives/Vec.ts +1 -1
- package/src/lib/primitives/geometry/Arc2d.ts +2 -2
- package/src/lib/primitives/geometry/Circle2d.ts +2 -2
- package/src/lib/primitives/geometry/CubicSpline2d.ts +1 -1
- package/src/lib/primitives/geometry/Ellipse2d.ts +3 -3
- package/src/lib/primitives/geometry/Geometry2d.test.ts +21 -0
- package/src/lib/primitives/geometry/Geometry2d.ts +10 -9
- package/src/lib/primitives/geometry/Polyline2d.ts +2 -2
- package/src/lib/primitives/geometry/Stadium2d.ts +1 -1
- package/src/lib/utils/SharedStylesMap.ts +1 -1
- package/src/lib/utils/getSvgPathFromPoints.ts +1 -1
- package/src/lib/utils/reparenting.ts +6 -2
- package/src/lib/utils/richText.ts +1 -1
- package/src/lib/utils/runtime.ts +3 -1
- package/src/lib/utils/sync/TLLocalSyncClient.test.ts +1 -1
- package/src/lib/utils/sync/TLLocalSyncClient.ts +2 -1
- package/src/lib/utils/sync/hardReset.ts +0 -8
- package/src/version.ts +3 -3
- package/dist-cjs/lib/config/createTLUser.js.map +0 -7
- package/dist-cjs/lib/hooks/useIsDarkMode.js.map +0 -7
- package/dist-esm/lib/config/createTLUser.mjs.map +0 -7
- package/dist-esm/lib/hooks/useIsDarkMode.mjs +0 -15
- package/dist-esm/lib/hooks/useIsDarkMode.mjs.map +0 -7
package/dist-cjs/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Atom } from '@tldraw/state';
|
|
2
2
|
import { AtomSet } from '@tldraw/store';
|
|
3
|
+
import { Awaitable } from '@tldraw/utils';
|
|
3
4
|
import { BoxModel } from '@tldraw/tlschema';
|
|
4
5
|
import { ComponentType } from 'react';
|
|
5
6
|
import { Computed } from '@tldraw/state';
|
|
@@ -56,9 +57,12 @@ import { TLCamera } from '@tldraw/tlschema';
|
|
|
56
57
|
import { TLCreateShapePartial } from '@tldraw/tlschema';
|
|
57
58
|
import { TLCursor } from '@tldraw/tlschema';
|
|
58
59
|
import { TLCursorType } from '@tldraw/tlschema';
|
|
60
|
+
import { TLDefaultColor } from '@tldraw/tlschema';
|
|
61
|
+
import { TLDefaultColorStyle } from '@tldraw/tlschema';
|
|
59
62
|
import { TLDefaultDashStyle } from '@tldraw/tlschema';
|
|
60
63
|
import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
|
|
61
64
|
import { TLDocument } from '@tldraw/tlschema';
|
|
65
|
+
import { TLFontFace } from '@tldraw/tlschema';
|
|
62
66
|
import { TLGroupShape } from '@tldraw/tlschema';
|
|
63
67
|
import { TLHandle } from '@tldraw/tlschema';
|
|
64
68
|
import { TLImageAsset } from '@tldraw/tlschema';
|
|
@@ -80,8 +84,15 @@ import { TLStore } from '@tldraw/tlschema';
|
|
|
80
84
|
import { TLStoreProps } from '@tldraw/tlschema';
|
|
81
85
|
import { TLStoreSchema } from '@tldraw/tlschema';
|
|
82
86
|
import { TLStoreSnapshot } from '@tldraw/tlschema';
|
|
87
|
+
import { TLTheme } from '@tldraw/tlschema';
|
|
88
|
+
import { TLThemeColors } from '@tldraw/tlschema';
|
|
89
|
+
import { TLThemeId } from '@tldraw/tlschema';
|
|
90
|
+
import { TLThemes } from '@tldraw/tlschema';
|
|
91
|
+
import { TLUnknownAsset } from '@tldraw/tlschema';
|
|
83
92
|
import { TLUnknownBinding } from '@tldraw/tlschema';
|
|
84
93
|
import { TLUnknownShape } from '@tldraw/tlschema';
|
|
94
|
+
import { TLUser } from '@tldraw/tlschema';
|
|
95
|
+
import { TLUserStore } from '@tldraw/tlschema';
|
|
85
96
|
import { TLVideoAsset } from '@tldraw/tlschema';
|
|
86
97
|
import { UnknownRecord } from '@tldraw/store';
|
|
87
98
|
import { VecModel } from '@tldraw/tlschema';
|
|
@@ -144,6 +155,51 @@ export declare class Arc2d extends Geometry2d {
|
|
|
144
155
|
*/
|
|
145
156
|
export declare function areAnglesCompatible(a: number, b: number): boolean;
|
|
146
157
|
|
|
158
|
+
/**
|
|
159
|
+
* Abstract base class for defining asset-type-specific behavior.
|
|
160
|
+
*
|
|
161
|
+
* Each asset type (image, video, bookmark, etc.) has a corresponding AssetUtil that handles
|
|
162
|
+
* type-specific operations like determining supported MIME types and creating assets from files.
|
|
163
|
+
*
|
|
164
|
+
* @public
|
|
165
|
+
*/
|
|
166
|
+
export declare abstract class AssetUtil<Asset extends TLAsset = TLAsset> {
|
|
167
|
+
editor: Editor;
|
|
168
|
+
/** Configure this asset util's {@link AssetUtil.options | `options`}. */
|
|
169
|
+
static configure<T extends TLAssetUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
|
|
170
|
+
options: infer Options;
|
|
171
|
+
} ? Partial<Options> : never): T;
|
|
172
|
+
constructor(editor: Editor);
|
|
173
|
+
/**
|
|
174
|
+
* Options for this asset util. Override this to provide customization options for your asset.
|
|
175
|
+
* Use {@link AssetUtil.configure} to customize existing asset utils.
|
|
176
|
+
*/
|
|
177
|
+
options: {};
|
|
178
|
+
static props?: RecordProps<TLUnknownAsset>;
|
|
179
|
+
static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
180
|
+
/**
|
|
181
|
+
* The type of the asset util, which should match the asset's type.
|
|
182
|
+
*/
|
|
183
|
+
static type: string;
|
|
184
|
+
/**
|
|
185
|
+
* Get the default props for an asset of this type.
|
|
186
|
+
*/
|
|
187
|
+
abstract getDefaultProps(): Asset['props'];
|
|
188
|
+
/**
|
|
189
|
+
* Get the MIME types that this asset type supports.
|
|
190
|
+
* Return an empty array if this asset type doesn't support files (e.g. bookmarks).
|
|
191
|
+
*/
|
|
192
|
+
getSupportedMimeTypes(): readonly string[];
|
|
193
|
+
/**
|
|
194
|
+
* Check whether this asset type accepts a given MIME type.
|
|
195
|
+
*/
|
|
196
|
+
acceptsMimeType(mimeType: string): boolean;
|
|
197
|
+
/**
|
|
198
|
+
* Create an asset from a file. Return null if this asset type can't handle the file.
|
|
199
|
+
*/
|
|
200
|
+
getAssetFromFile(_file: File, _assetId: TLAssetId): Promise<Asset | null>;
|
|
201
|
+
}
|
|
202
|
+
|
|
147
203
|
/** @public */
|
|
148
204
|
export declare function average(A: VecLike, B: VecLike): string;
|
|
149
205
|
|
|
@@ -164,6 +220,12 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
|
|
|
164
220
|
getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
|
|
165
221
|
}
|
|
166
222
|
|
|
223
|
+
/** @public */
|
|
224
|
+
export declare interface BatchMeasurementRequest {
|
|
225
|
+
html: string;
|
|
226
|
+
opts: TLMeasureTextOpts;
|
|
227
|
+
}
|
|
228
|
+
|
|
167
229
|
/**
|
|
168
230
|
* Options passed to {@link BindingUtil.onBeforeChange} and {@link BindingUtil.onAfterChange},
|
|
169
231
|
* describing the data associated with a binding being changed.
|
|
@@ -711,6 +773,12 @@ export declare function createDeepLinkString(deepLink: TLDeepLink): string;
|
|
|
711
773
|
*/
|
|
712
774
|
export declare function createSessionStateSnapshotSignal(store: TLStore): Signal<null | TLSessionStateSnapshot>;
|
|
713
775
|
|
|
776
|
+
/** @public */
|
|
777
|
+
export declare function createTLCurrentUser(opts?: {
|
|
778
|
+
setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
|
|
779
|
+
userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
|
|
780
|
+
}): TLCurrentUser;
|
|
781
|
+
|
|
714
782
|
/**
|
|
715
783
|
* A helper for creating a TLStore schema from either an object with shapeUtils, bindingUtils, and
|
|
716
784
|
* migrations, or a schema.
|
|
@@ -728,13 +796,7 @@ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): Sto
|
|
|
728
796
|
*
|
|
729
797
|
* @public
|
|
730
798
|
*/
|
|
731
|
-
export declare function createTLStore({ initialData, defaultName, id, assets, onMount, collaboration, ...rest }?: TLStoreOptions): TLStore;
|
|
732
|
-
|
|
733
|
-
/** @public */
|
|
734
|
-
export declare function createTLUser(opts?: {
|
|
735
|
-
setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
|
|
736
|
-
userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
|
|
737
|
-
}): TLUser;
|
|
799
|
+
export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, themes, ...rest }?: TLStoreOptions): TLStore;
|
|
738
800
|
|
|
739
801
|
/** @public */
|
|
740
802
|
export declare class CubicBezier2d extends Polyline2d {
|
|
@@ -809,6 +871,13 @@ export declare interface DebugFlagDefaults<T> {
|
|
|
809
871
|
|
|
810
872
|
/* Excluded from this release type: DEFAULT_CAMERA_OPTIONS */
|
|
811
873
|
|
|
874
|
+
/**
|
|
875
|
+
* The default theme definition containing color palettes for both light and dark modes.
|
|
876
|
+
*
|
|
877
|
+
* @public
|
|
878
|
+
*/
|
|
879
|
+
export declare const DEFAULT_THEME: TLTheme;
|
|
880
|
+
|
|
812
881
|
/** @public @react */
|
|
813
882
|
export declare function DefaultBackground(): JSX.Element;
|
|
814
883
|
|
|
@@ -923,6 +992,9 @@ export declare const defaultTldrawOptions: {
|
|
|
923
992
|
readonly maxShapesPerPage: 4000;
|
|
924
993
|
readonly multiClickDurationMs: 200;
|
|
925
994
|
readonly nonce: undefined;
|
|
995
|
+
readonly onBeforeCopyToClipboard: undefined;
|
|
996
|
+
readonly onBeforePasteFromClipboard: undefined;
|
|
997
|
+
readonly onClipboardPasteRaw: undefined;
|
|
926
998
|
readonly quickZoomPreservesScreenBounds: true;
|
|
927
999
|
readonly snapThreshold: 8;
|
|
928
1000
|
readonly spacebarPanning: true;
|
|
@@ -953,6 +1025,9 @@ export declare const defaultUserPreferences: Readonly<{
|
|
|
953
1025
|
name: "";
|
|
954
1026
|
}>;
|
|
955
1027
|
|
|
1028
|
+
/** @public */
|
|
1029
|
+
export declare const defaultUserStore: TLUserStore;
|
|
1030
|
+
|
|
956
1031
|
/**
|
|
957
1032
|
* Convert degrees to radians.
|
|
958
1033
|
*
|
|
@@ -1028,7 +1103,7 @@ export declare class EdgeScrollManager {
|
|
|
1028
1103
|
/** @public */
|
|
1029
1104
|
export declare class Editor extends EventEmitter<TLEventMap> {
|
|
1030
1105
|
readonly id: string;
|
|
1031
|
-
constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus,
|
|
1106
|
+
constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
|
|
1032
1107
|
private readonly _getShapeVisibility?;
|
|
1033
1108
|
private getIsShapeHiddenCache;
|
|
1034
1109
|
isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
|
|
@@ -1091,7 +1166,13 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1091
1166
|
* @public
|
|
1092
1167
|
*/
|
|
1093
1168
|
readonly snaps: SnapManager;
|
|
1094
|
-
|
|
1169
|
+
/**
|
|
1170
|
+
* A manager for performance measurement hooks.
|
|
1171
|
+
*
|
|
1172
|
+
* @public
|
|
1173
|
+
*/
|
|
1174
|
+
readonly performance: PerformanceManager;
|
|
1175
|
+
/* Excluded from this release type: _spatialIndex */
|
|
1095
1176
|
/**
|
|
1096
1177
|
* A manager for the any asynchronous events and making sure they're
|
|
1097
1178
|
* cleaned up upon disposal.
|
|
@@ -1110,6 +1191,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1110
1191
|
* @public
|
|
1111
1192
|
*/
|
|
1112
1193
|
readonly user: UserPreferencesManager;
|
|
1194
|
+
/* Excluded from this release type: _themeManager */
|
|
1113
1195
|
/**
|
|
1114
1196
|
* A helper for measuring text.
|
|
1115
1197
|
*
|
|
@@ -1160,6 +1242,83 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1160
1242
|
* @public
|
|
1161
1243
|
*/
|
|
1162
1244
|
dispose(): void;
|
|
1245
|
+
/**
|
|
1246
|
+
* Get the current color mode (`'light'` or `'dark'`), based on the user's dark mode preference.
|
|
1247
|
+
*
|
|
1248
|
+
* @public
|
|
1249
|
+
*/
|
|
1250
|
+
getColorMode(): 'dark' | 'light';
|
|
1251
|
+
/**
|
|
1252
|
+
* Set the color mode. Note that this is a convenience method that passes the mode to
|
|
1253
|
+
* `user.updateUserPreferences`, which is the source of truth for the user's color mode preference.
|
|
1254
|
+
*
|
|
1255
|
+
* @public
|
|
1256
|
+
*/
|
|
1257
|
+
setColorMode(mode: 'dark' | 'light'): this;
|
|
1258
|
+
/**
|
|
1259
|
+
* Get the id of the current theme.
|
|
1260
|
+
*
|
|
1261
|
+
* @public
|
|
1262
|
+
*/
|
|
1263
|
+
getCurrentThemeId(): TLThemeId;
|
|
1264
|
+
/**
|
|
1265
|
+
* Get the current theme definition.
|
|
1266
|
+
*
|
|
1267
|
+
* @public
|
|
1268
|
+
*/
|
|
1269
|
+
getCurrentTheme(): TLTheme;
|
|
1270
|
+
/**
|
|
1271
|
+
* Set the current theme by id.
|
|
1272
|
+
*
|
|
1273
|
+
* @public
|
|
1274
|
+
*/
|
|
1275
|
+
setCurrentTheme(id: TLThemeId): this;
|
|
1276
|
+
/**
|
|
1277
|
+
* Get all registered theme definitions.
|
|
1278
|
+
*
|
|
1279
|
+
* @public
|
|
1280
|
+
*/
|
|
1281
|
+
getThemes(): TLThemes;
|
|
1282
|
+
/**
|
|
1283
|
+
* Get a single theme definition by id.
|
|
1284
|
+
*
|
|
1285
|
+
* @public
|
|
1286
|
+
*/
|
|
1287
|
+
getTheme(id: TLThemeId): TLTheme | undefined;
|
|
1288
|
+
/**
|
|
1289
|
+
* Replace all theme definitions, or update them via a callback that receives a deep copy.
|
|
1290
|
+
* The `'default'` theme must always be present in the result.
|
|
1291
|
+
*
|
|
1292
|
+
* @example
|
|
1293
|
+
* ```ts
|
|
1294
|
+
* // Replace all themes
|
|
1295
|
+
* editor.updateThemes({ default: myDefaultTheme, ocean: myOceanTheme })
|
|
1296
|
+
*
|
|
1297
|
+
* // Update via callback
|
|
1298
|
+
* editor.updateThemes((themes) => {
|
|
1299
|
+
* delete themes.ocean
|
|
1300
|
+
* return themes
|
|
1301
|
+
* })
|
|
1302
|
+
* ```
|
|
1303
|
+
*
|
|
1304
|
+
* @public
|
|
1305
|
+
*/
|
|
1306
|
+
updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): this;
|
|
1307
|
+
/**
|
|
1308
|
+
* Register or update a single theme definition. The theme is keyed by its `id` property.
|
|
1309
|
+
*
|
|
1310
|
+
* @example
|
|
1311
|
+
* ```ts
|
|
1312
|
+
* // Override a property on the default theme
|
|
1313
|
+
* editor.updateTheme({ ...editor.getTheme('default')!, fontSize: 24 })
|
|
1314
|
+
*
|
|
1315
|
+
* // Register a new theme
|
|
1316
|
+
* editor.updateTheme({ id: 'ocean', ...myOceanTheme })
|
|
1317
|
+
* ```
|
|
1318
|
+
*
|
|
1319
|
+
* @public
|
|
1320
|
+
*/
|
|
1321
|
+
updateTheme(theme: TLTheme): this;
|
|
1163
1322
|
/**
|
|
1164
1323
|
* A map of shape utility classes (TLShapeUtils) by shape type.
|
|
1165
1324
|
*
|
|
@@ -1168,6 +1327,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1168
1327
|
shapeUtils: {
|
|
1169
1328
|
readonly [K in string]?: ShapeUtil<TLShape>;
|
|
1170
1329
|
};
|
|
1330
|
+
/* Excluded from this release type: _shapeUtilsByAssetType */
|
|
1171
1331
|
styleProps: {
|
|
1172
1332
|
[key: string]: Map<StyleProp<any>, string>;
|
|
1173
1333
|
};
|
|
@@ -1199,6 +1359,15 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1199
1359
|
hasShapeUtil(shape: TLShape | TLShapePartial<TLShape>): boolean;
|
|
1200
1360
|
hasShapeUtil(type: TLShape['type']): boolean;
|
|
1201
1361
|
hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
|
|
1362
|
+
/**
|
|
1363
|
+
* Get the shape util that handles the given asset type.
|
|
1364
|
+
* Returns the shape util whose {@link ShapeUtil.handledAssetTypes} includes
|
|
1365
|
+
* the given asset type, or undefined if none matches.
|
|
1366
|
+
*
|
|
1367
|
+
* @param assetType - The asset type string.
|
|
1368
|
+
* @public
|
|
1369
|
+
*/
|
|
1370
|
+
getShapeUtilForAssetType(assetType: string): ShapeUtil | undefined;
|
|
1202
1371
|
/**
|
|
1203
1372
|
* A map of shape utility classes (TLShapeUtils) by shape type.
|
|
1204
1373
|
*
|
|
@@ -1229,6 +1398,40 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1229
1398
|
type: S['type'];
|
|
1230
1399
|
} | S): BindingUtil<S>;
|
|
1231
1400
|
getBindingUtil<T extends BindingUtil>(type: T extends BindingUtil<infer R> ? R['type'] : string): T;
|
|
1401
|
+
/**
|
|
1402
|
+
* A map of asset utility classes by asset type.
|
|
1403
|
+
*
|
|
1404
|
+
* @public
|
|
1405
|
+
*/
|
|
1406
|
+
assetUtils: {
|
|
1407
|
+
readonly [K in string]?: AssetUtil<TLAsset>;
|
|
1408
|
+
};
|
|
1409
|
+
/**
|
|
1410
|
+
* Get an asset util from an asset or asset type.
|
|
1411
|
+
*
|
|
1412
|
+
* @param arg - An asset, asset type string, or object with type.
|
|
1413
|
+
*
|
|
1414
|
+
* @public
|
|
1415
|
+
*/
|
|
1416
|
+
getAssetUtil<S extends TLAsset>(asset: {
|
|
1417
|
+
type: S['type'];
|
|
1418
|
+
} | S): AssetUtil<S>;
|
|
1419
|
+
getAssetUtil(type: string): AssetUtil;
|
|
1420
|
+
/**
|
|
1421
|
+
* Returns true if the editor has an asset util for the given asset type.
|
|
1422
|
+
*
|
|
1423
|
+
* @public
|
|
1424
|
+
*/
|
|
1425
|
+
hasAssetUtil(arg: {
|
|
1426
|
+
type: string;
|
|
1427
|
+
} | string): boolean;
|
|
1428
|
+
/**
|
|
1429
|
+
* Get the asset util that accepts the given MIME type.
|
|
1430
|
+
* Returns null if no registered asset util accepts the MIME type.
|
|
1431
|
+
*
|
|
1432
|
+
* @public
|
|
1433
|
+
*/
|
|
1434
|
+
getAssetUtilForMimeType(mimeType: string): AssetUtil | null;
|
|
1232
1435
|
/**
|
|
1233
1436
|
* A manager for the editor's history.
|
|
1234
1437
|
*
|
|
@@ -2259,6 +2462,32 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
2259
2462
|
* @public
|
|
2260
2463
|
*/
|
|
2261
2464
|
getCollaboratorsOnCurrentPage(): TLInstancePresence[];
|
|
2465
|
+
/**
|
|
2466
|
+
* Get the current user's ID for attribution purposes.
|
|
2467
|
+
* Also ensures a `user:` record exists in the store for the current user.
|
|
2468
|
+
* Returns `null` when the user store has no current user.
|
|
2469
|
+
*
|
|
2470
|
+
* @public
|
|
2471
|
+
*/
|
|
2472
|
+
getAttributionUserId(): null | string;
|
|
2473
|
+
/* Excluded from this release type: _ensureUserRecord */
|
|
2474
|
+
/**
|
|
2475
|
+
* Resolve a display name for a user ID. Asks the
|
|
2476
|
+
* {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
|
|
2477
|
+
* falling back to the `user:` record in the store.
|
|
2478
|
+
*
|
|
2479
|
+
* @public
|
|
2480
|
+
*/
|
|
2481
|
+
getAttributionDisplayName(userId: null | string): null | string;
|
|
2482
|
+
/**
|
|
2483
|
+
* Resolve a user record by ID. Asks the
|
|
2484
|
+
* {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
|
|
2485
|
+
* falling back to the `user:` record in the store.
|
|
2486
|
+
*
|
|
2487
|
+
* @public
|
|
2488
|
+
*/
|
|
2489
|
+
getAttributionUser(userId: null | string): null | TLUser;
|
|
2490
|
+
/* Excluded from this release type: _getReferencedUserIds */
|
|
2262
2491
|
private _isLockedOnFollowingUser;
|
|
2263
2492
|
/**
|
|
2264
2493
|
* Start viewport-following a user.
|
|
@@ -4353,6 +4582,35 @@ export declare interface Geometry2dOptions extends TransformedGeometry2dOptions
|
|
|
4353
4582
|
*/
|
|
4354
4583
|
export declare function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
|
|
4355
4584
|
|
|
4585
|
+
/**
|
|
4586
|
+
* Resolves a color style value to its actual CSS color string for a given theme and variant.
|
|
4587
|
+
* If the color is not a default theme color, returns the color value as-is.
|
|
4588
|
+
*
|
|
4589
|
+
* @param colors - The color palette for the current color mode (e.g. `theme.colors[colorMode]`)
|
|
4590
|
+
* @param color - The color style value to resolve
|
|
4591
|
+
* @param variant - Which variant of the color to return (solid, fill, pattern, etc.)
|
|
4592
|
+
* @returns The CSS color string for the specified color and variant
|
|
4593
|
+
*
|
|
4594
|
+
* @example
|
|
4595
|
+
* ```ts
|
|
4596
|
+
* import { getColorValue } from 'tldraw'
|
|
4597
|
+
*
|
|
4598
|
+
* const colors = editor.getCurrentTheme().colors[editor.getColorMode()]
|
|
4599
|
+
*
|
|
4600
|
+
* // Get the solid variant of red
|
|
4601
|
+
* const redSolid = getColorValue(colors, 'red', 'solid') // '#e03131'
|
|
4602
|
+
*
|
|
4603
|
+
* // Get the fill variant of blue
|
|
4604
|
+
* const blueFill = getColorValue(colors, 'blue', 'fill') // '#4465e9'
|
|
4605
|
+
*
|
|
4606
|
+
* // Custom color passes through unchanged
|
|
4607
|
+
* const customColor = getColorValue(colors, '#ff0000', 'solid') // '#ff0000'
|
|
4608
|
+
* ```
|
|
4609
|
+
*
|
|
4610
|
+
* @public
|
|
4611
|
+
*/
|
|
4612
|
+
export declare function getColorValue(colors: TLThemeColors, color: string | TLDefaultColorStyle, variant: keyof TLDefaultColor): string;
|
|
4613
|
+
|
|
4356
4614
|
/** @public */
|
|
4357
4615
|
export declare function getCursor(cursor: TLCursorType, rotation?: number, color?: string): string;
|
|
4358
4616
|
|
|
@@ -4523,7 +4781,7 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
|
|
|
4523
4781
|
static type: "group";
|
|
4524
4782
|
static props: RecordProps<TLGroupShape>;
|
|
4525
4783
|
static migrations: TLPropsMigrations;
|
|
4526
|
-
hideSelectionBoundsFg(): boolean;
|
|
4784
|
+
hideSelectionBoundsFg(shape: TLGroupShape): boolean;
|
|
4527
4785
|
canBind(): boolean;
|
|
4528
4786
|
canResize(): boolean;
|
|
4529
4787
|
canResizeChildren(): boolean;
|
|
@@ -5165,6 +5423,94 @@ export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
|
|
|
5165
5423
|
/** @public */
|
|
5166
5424
|
export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
|
|
5167
5425
|
|
|
5426
|
+
/**
|
|
5427
|
+
* Optional adapter that pipes PerformanceManager events into browser
|
|
5428
|
+
* `performance.mark()` / `performance.measure()` for DevTools integration.
|
|
5429
|
+
*
|
|
5430
|
+
* Tree-shakeable — only included if imported.
|
|
5431
|
+
*
|
|
5432
|
+
* @example
|
|
5433
|
+
* ```ts
|
|
5434
|
+
* const adapter = new PerformanceApiAdapter(editor.performance)
|
|
5435
|
+
* // ... later
|
|
5436
|
+
* adapter.dispose()
|
|
5437
|
+
* ```
|
|
5438
|
+
*
|
|
5439
|
+
* @public
|
|
5440
|
+
*/
|
|
5441
|
+
export declare class PerformanceApiAdapter {
|
|
5442
|
+
private cleanups;
|
|
5443
|
+
constructor(perfManager: PerformanceManager);
|
|
5444
|
+
/** Remove all listeners and stop piping events. @public */
|
|
5445
|
+
dispose(): void;
|
|
5446
|
+
}
|
|
5447
|
+
|
|
5448
|
+
/**
|
|
5449
|
+
* Manages performance event subscriptions for the editor. Available as `editor.performance`.
|
|
5450
|
+
*
|
|
5451
|
+
* Listeners are lazy — internal editor hooks (frame, shape events) are only attached while
|
|
5452
|
+
* at least one subscriber exists, so there is zero overhead when unused.
|
|
5453
|
+
*
|
|
5454
|
+
* @example
|
|
5455
|
+
* ```ts
|
|
5456
|
+
* const unsub = editor.performance.on('interaction-end', (event) => {
|
|
5457
|
+
* console.log(`${event.name}: ${event.fps.toFixed(1)} fps, p95=${event.p95FrameTime.toFixed(1)}ms`)
|
|
5458
|
+
* })
|
|
5459
|
+
* ```
|
|
5460
|
+
*
|
|
5461
|
+
* @public
|
|
5462
|
+
*/
|
|
5463
|
+
export declare class PerformanceManager {
|
|
5464
|
+
/* Excluded from this release type: emitter */
|
|
5465
|
+
private editor;
|
|
5466
|
+
private activeInteraction;
|
|
5467
|
+
private activeCamera;
|
|
5468
|
+
private frameCleanup;
|
|
5469
|
+
private shapeCreatedCleanup;
|
|
5470
|
+
private shapeEditedCleanup;
|
|
5471
|
+
private shapeDeletedCleanup;
|
|
5472
|
+
private loafObserver;
|
|
5473
|
+
constructor(editor: Editor);
|
|
5474
|
+
/**
|
|
5475
|
+
* Subscribe to a performance event. Returns an unsubscribe function.
|
|
5476
|
+
*
|
|
5477
|
+
* @example
|
|
5478
|
+
* ```ts
|
|
5479
|
+
* const unsub = editor.performance.on('interaction-end', (event) => {
|
|
5480
|
+
* sendToAnalytics({ name: event.name, fps: event.fps, p95: event.p95FrameTime })
|
|
5481
|
+
* })
|
|
5482
|
+
* // later: unsub()
|
|
5483
|
+
* ```
|
|
5484
|
+
*
|
|
5485
|
+
* @public
|
|
5486
|
+
*/
|
|
5487
|
+
on<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
|
|
5488
|
+
/**
|
|
5489
|
+
* Subscribe to a performance event once. The listener is removed after the first invocation.
|
|
5490
|
+
* Returns an unsubscribe function for early removal.
|
|
5491
|
+
*
|
|
5492
|
+
* @public
|
|
5493
|
+
*/
|
|
5494
|
+
once<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
|
|
5495
|
+
/* Excluded from this release type: dispose */
|
|
5496
|
+
/* Excluded from this release type: _notifyInteractionStart */
|
|
5497
|
+
/* Excluded from this release type: _notifyInteractionEnd */
|
|
5498
|
+
/* Excluded from this release type: _notifyCameraOperation */
|
|
5499
|
+
/* Excluded from this release type: _notifyUndoRedo */
|
|
5500
|
+
private _startCameraSession;
|
|
5501
|
+
private _endCameraSession;
|
|
5502
|
+
private _onFrame;
|
|
5503
|
+
private _onShapesCreated;
|
|
5504
|
+
private _onShapesEdited;
|
|
5505
|
+
private _onShapesDeleted;
|
|
5506
|
+
private _startLoafObserver;
|
|
5507
|
+
private _stopLoafObserver;
|
|
5508
|
+
private _needsFrameListener;
|
|
5509
|
+
private _needsLoafObserver;
|
|
5510
|
+
private _maybeAttachLazyListeners;
|
|
5511
|
+
private _maybeDetachLazyListeners;
|
|
5512
|
+
}
|
|
5513
|
+
|
|
5168
5514
|
/**
|
|
5169
5515
|
* Find the approximate perimeter of an ellipse.
|
|
5170
5516
|
*
|
|
@@ -5359,6 +5705,16 @@ export declare function resizeScaled(shape: TLBaseShape<any, {
|
|
|
5359
5705
|
y: number;
|
|
5360
5706
|
};
|
|
5361
5707
|
|
|
5708
|
+
/**
|
|
5709
|
+
* Resolve a partial set of user-provided themes into a complete `TLThemes`
|
|
5710
|
+
* record by merging with `DEFAULT_THEME`. The result is suitable for passing to
|
|
5711
|
+
* `registerColorsFromThemes`, `registerFontsFromThemes`, and the
|
|
5712
|
+
* `ThemeManager` constructor.
|
|
5713
|
+
*
|
|
5714
|
+
* @public
|
|
5715
|
+
*/
|
|
5716
|
+
export declare function resolveThemes(themes?: Partial<TLThemes>): TLThemes;
|
|
5717
|
+
|
|
5362
5718
|
/** @public */
|
|
5363
5719
|
export declare type RichTextFontVisitor = (node: TiptapNode, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void) => RichTextFontVisitorState;
|
|
5364
5720
|
|
|
@@ -5640,12 +5996,32 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5640
5996
|
* @public
|
|
5641
5997
|
*/
|
|
5642
5998
|
static type: string;
|
|
5999
|
+
/**
|
|
6000
|
+
* The asset types that this shape can be created from.
|
|
6001
|
+
* When a file is dropped on the canvas, the editor finds the shape util
|
|
6002
|
+
* whose `handledAssetTypes` includes the asset's type and calls
|
|
6003
|
+
* {@link ShapeUtil.createShapeForAsset} to produce the shape.
|
|
6004
|
+
*
|
|
6005
|
+
* @public
|
|
6006
|
+
*/
|
|
6007
|
+
static handledAssetTypes?: readonly string[];
|
|
5643
6008
|
/**
|
|
5644
6009
|
* Get the default props for a shape.
|
|
5645
6010
|
*
|
|
5646
6011
|
* @public
|
|
5647
6012
|
*/
|
|
5648
6013
|
abstract getDefaultProps(): Shape['props'];
|
|
6014
|
+
/**
|
|
6015
|
+
* Create a shape partial for placing an asset on the canvas.
|
|
6016
|
+
* Only called for shapes whose constructor declares matching
|
|
6017
|
+
* {@link ShapeUtil.handledAssetTypes | `handledAssetTypes`}.
|
|
6018
|
+
*
|
|
6019
|
+
* @param asset - The asset to create a shape for.
|
|
6020
|
+
* @param position - Where to place the shape.
|
|
6021
|
+
* @returns A shape partial, or null if this shape can't be created for the asset.
|
|
6022
|
+
* @public
|
|
6023
|
+
*/
|
|
6024
|
+
createShapeForAsset?(asset: TLAsset, position: VecModel): null | TLShapePartial;
|
|
5649
6025
|
/**
|
|
5650
6026
|
* Get the shape's geometry.
|
|
5651
6027
|
*
|
|
@@ -5726,7 +6102,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5726
6102
|
*
|
|
5727
6103
|
* @public
|
|
5728
6104
|
*/
|
|
5729
|
-
canBind(
|
|
6105
|
+
canBind(opts: TLShapeUtilCanBindOpts): boolean;
|
|
5730
6106
|
/**
|
|
5731
6107
|
* Whether the shape can be double clicked to edit.
|
|
5732
6108
|
*
|
|
@@ -5907,7 +6283,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5907
6283
|
* @param type - The shape type.
|
|
5908
6284
|
* @public
|
|
5909
6285
|
*/
|
|
5910
|
-
canReceiveNewChildrenOfType(shape: Shape,
|
|
6286
|
+
canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
|
|
5911
6287
|
/**
|
|
5912
6288
|
* Get the shape as an SVG object.
|
|
5913
6289
|
*
|
|
@@ -5947,6 +6323,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5947
6323
|
*/
|
|
5948
6324
|
getHandleSnapGeometry(shape: Shape): HandleSnapGeometry;
|
|
5949
6325
|
getText(shape: Shape): string | undefined;
|
|
6326
|
+
/**
|
|
6327
|
+
* Return user IDs referenced in shape-specific props.
|
|
6328
|
+
* Used when copying shapes to include referenced users on the clipboard.
|
|
6329
|
+
* Override this if your shape stores user IDs in custom props.
|
|
6330
|
+
*
|
|
6331
|
+
* @public
|
|
6332
|
+
*/
|
|
6333
|
+
getReferencedUserIds(shape: Shape): string[];
|
|
5950
6334
|
getAriaDescriptor(shape: Shape): string | undefined;
|
|
5951
6335
|
/**
|
|
5952
6336
|
* A callback called just before a shape is created. This method provides a last chance to modify
|
|
@@ -6342,6 +6726,8 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
|
|
|
6342
6726
|
static children?: () => TLStateNodeConstructor[];
|
|
6343
6727
|
static isLockable: boolean;
|
|
6344
6728
|
static useCoalescedEvents: boolean;
|
|
6729
|
+
/** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */
|
|
6730
|
+
static trackPerformance: boolean;
|
|
6345
6731
|
id: string;
|
|
6346
6732
|
type: 'branch' | 'leaf' | 'root';
|
|
6347
6733
|
shapeType?: string;
|
|
@@ -6476,6 +6862,10 @@ export declare interface SvgExportContext {
|
|
|
6476
6862
|
* Whether the export should be in dark mode.
|
|
6477
6863
|
*/
|
|
6478
6864
|
readonly isDarkMode: boolean;
|
|
6865
|
+
/**
|
|
6866
|
+
* The color mode to use for this export.
|
|
6867
|
+
*/
|
|
6868
|
+
readonly colorMode: 'dark' | 'light';
|
|
6479
6869
|
/**
|
|
6480
6870
|
* The scale of the export - how much CSS pixels will be scaled up/down by.
|
|
6481
6871
|
*/
|
|
@@ -6507,15 +6897,18 @@ export declare const TAB_ID: string;
|
|
|
6507
6897
|
export declare class TextManager {
|
|
6508
6898
|
editor: Editor;
|
|
6509
6899
|
private elm;
|
|
6900
|
+
private poolElms;
|
|
6510
6901
|
constructor(editor: Editor);
|
|
6902
|
+
private createMeasurementEl;
|
|
6903
|
+
private resetElementStyles;
|
|
6511
6904
|
private setElementStyles;
|
|
6905
|
+
private getMeasureStyles;
|
|
6512
6906
|
dispose(): void;
|
|
6513
|
-
|
|
6514
|
-
|
|
6515
|
-
|
|
6516
|
-
|
|
6517
|
-
|
|
6518
|
-
};
|
|
6907
|
+
private ensurePoolSize;
|
|
6908
|
+
private getPoolItem;
|
|
6909
|
+
measureHtmlBatch(requests: BatchMeasurementRequest[]): TLMeasuredTextSize[];
|
|
6910
|
+
measureText(textToMeasure: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
|
|
6911
|
+
measureHtml(html: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
|
|
6519
6912
|
/**
|
|
6520
6913
|
* Given an html element, measure the position of each span of unbroken
|
|
6521
6914
|
* word/white-space characters within any text nodes it contains.
|
|
@@ -6543,6 +6936,47 @@ export declare class TextManager {
|
|
|
6543
6936
|
}[];
|
|
6544
6937
|
}
|
|
6545
6938
|
|
|
6939
|
+
/**
|
|
6940
|
+
* Manages the editor's color themes.
|
|
6941
|
+
*
|
|
6942
|
+
* Stores named theme definitions (each containing light and dark color palettes
|
|
6943
|
+
* alongside shared properties like font size). The current theme is resolved by
|
|
6944
|
+
* combining the current theme name with the user's color mode preference.
|
|
6945
|
+
*
|
|
6946
|
+
* **Terminology:**
|
|
6947
|
+
* - **Theme** (`TLTheme`): A named set of colors and typographic values for both light and dark modes.
|
|
6948
|
+
* - **Color mode** (`'light' | 'dark'`): The resolved appearance mode, derived from the user's
|
|
6949
|
+
* `colorScheme` preference (`'light' | 'dark' | 'system'`). Access via `getColorMode()`.
|
|
6950
|
+
*
|
|
6951
|
+
* @public
|
|
6952
|
+
*/
|
|
6953
|
+
export declare class ThemeManager {
|
|
6954
|
+
private readonly editor;
|
|
6955
|
+
private readonly _themes;
|
|
6956
|
+
private readonly _currentThemeId;
|
|
6957
|
+
constructor(editor: Editor, options: {
|
|
6958
|
+
initial: TLThemeId;
|
|
6959
|
+
themes: TLThemes;
|
|
6960
|
+
});
|
|
6961
|
+
/** Get the current color mode based on the user's dark mode preference. */
|
|
6962
|
+
getColorMode(): 'dark' | 'light';
|
|
6963
|
+
/** Get all registered theme definitions. */
|
|
6964
|
+
getThemes(): TLThemes;
|
|
6965
|
+
/** Get a single theme definition by id. */
|
|
6966
|
+
getTheme(id: TLThemeId): TLTheme | undefined;
|
|
6967
|
+
/** Get the id of the current theme. */
|
|
6968
|
+
getCurrentThemeId(): TLThemeId;
|
|
6969
|
+
getCurrentTheme(): TLTheme;
|
|
6970
|
+
/** Set the current theme by id. The theme must have been previously registered. */
|
|
6971
|
+
setCurrentTheme(id: TLThemeId): void;
|
|
6972
|
+
/** Replace all theme definitions, or update them via a callback that receives a deep copy. */
|
|
6973
|
+
updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): void;
|
|
6974
|
+
/** Register or update a named theme definition. */
|
|
6975
|
+
updateTheme(theme: TLTheme): void;
|
|
6976
|
+
/** Clean up any resources held by the manager. */
|
|
6977
|
+
dispose(): void;
|
|
6978
|
+
}
|
|
6979
|
+
|
|
6546
6980
|
/* Excluded from this release type: TickManager */
|
|
6547
6981
|
|
|
6548
6982
|
/**
|
|
@@ -6561,12 +6995,23 @@ export declare type TiptapNode = Node_2;
|
|
|
6561
6995
|
/** @public */
|
|
6562
6996
|
export declare type TLAdjacentDirection = 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
|
|
6563
6997
|
|
|
6998
|
+
/** @public */
|
|
6999
|
+
export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
|
|
7000
|
+
|
|
6564
7001
|
/** @public */
|
|
6565
7002
|
export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
|
|
6566
7003
|
|
|
6567
7004
|
/** @public */
|
|
6568
7005
|
export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
|
|
6569
7006
|
|
|
7007
|
+
/** @public */
|
|
7008
|
+
export declare interface TLAssetUtilConstructor<T extends TLAsset = TLAsset, U extends AssetUtil<T> = AssetUtil<T>> {
|
|
7009
|
+
new (editor: Editor): U;
|
|
7010
|
+
type: T['type'];
|
|
7011
|
+
props?: RecordProps<T>;
|
|
7012
|
+
migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
7013
|
+
}
|
|
7014
|
+
|
|
6570
7015
|
/** @public */
|
|
6571
7016
|
export declare type TLBaseBoxShape = ExtractShapeByProps<{
|
|
6572
7017
|
h: number;
|
|
@@ -6656,6 +7101,29 @@ export declare interface TLCameraConstraints {
|
|
|
6656
7101
|
};
|
|
6657
7102
|
}
|
|
6658
7103
|
|
|
7104
|
+
/**
|
|
7105
|
+
* Emitted when a camera operation ends (after a 50ms debounce), with aggregated frame time stats.
|
|
7106
|
+
* @public
|
|
7107
|
+
*/
|
|
7108
|
+
export declare interface TLCameraEndPerfEvent extends TLPerfFrameTimeStats {
|
|
7109
|
+
/** Whether this was a pan or zoom operation. */
|
|
7110
|
+
type: 'panning' | 'zooming';
|
|
7111
|
+
/** Total shapes on the current page. */
|
|
7112
|
+
shapeCount: number;
|
|
7113
|
+
/** Number of shapes visible (not culled) in the viewport. */
|
|
7114
|
+
visibleShapeCount: number;
|
|
7115
|
+
/** Number of shapes culled (off-screen) from rendering. */
|
|
7116
|
+
culledShapeCount: number;
|
|
7117
|
+
/** Viewport width in screen pixels. */
|
|
7118
|
+
viewportWidth: number;
|
|
7119
|
+
/** Viewport height in screen pixels. */
|
|
7120
|
+
viewportHeight: number;
|
|
7121
|
+
/** Camera zoom level (`camera.z`) at session end. */
|
|
7122
|
+
zoomLevel: number;
|
|
7123
|
+
/** `performance.now()` when the camera session ended. */
|
|
7124
|
+
timestamp: number;
|
|
7125
|
+
}
|
|
7126
|
+
|
|
6659
7127
|
/** @public */
|
|
6660
7128
|
export declare interface TLCameraMoveOptions {
|
|
6661
7129
|
/** Whether to move the camera immediately, rather than on the next tick. */
|
|
@@ -6694,6 +7162,17 @@ export declare interface TLCameraOptions {
|
|
|
6694
7162
|
constraints?: TLCameraConstraints;
|
|
6695
7163
|
}
|
|
6696
7164
|
|
|
7165
|
+
/**
|
|
7166
|
+
* Emitted when a camera operation (pan or zoom) begins.
|
|
7167
|
+
* @public
|
|
7168
|
+
*/
|
|
7169
|
+
export declare interface TLCameraStartPerfEvent {
|
|
7170
|
+
/** Whether this is a pan or zoom operation. */
|
|
7171
|
+
type: 'panning' | 'zooming';
|
|
7172
|
+
/** `performance.now()` when the camera session started. */
|
|
7173
|
+
timestamp: number;
|
|
7174
|
+
}
|
|
7175
|
+
|
|
6697
7176
|
/** @public */
|
|
6698
7177
|
export declare type TLCancelEvent = (info: TLCancelEventInfo) => void;
|
|
6699
7178
|
|
|
@@ -6727,6 +7206,40 @@ export declare type TLCLickEventName = 'double_click' | 'quadruple_click' | 'tri
|
|
|
6727
7206
|
/** @public */
|
|
6728
7207
|
export declare type TLClickState = 'idle' | 'overflow' | 'pendingDouble' | 'pendingOverflow' | 'pendingQuadruple' | 'pendingTriple';
|
|
6729
7208
|
|
|
7209
|
+
/**
|
|
7210
|
+
* Raw clipboard paste payload, before tldraw parses clipboard contents into {@link TLExternalContent}.
|
|
7211
|
+
*
|
|
7212
|
+
* - `native-event`: from the `paste` event — `clipboardData` is available synchronously (unlike async
|
|
7213
|
+
* `navigator.clipboard.read()`).
|
|
7214
|
+
* - `clipboard-read`: from an explicit `navigator.clipboard.read()` call — only `ClipboardItem[]`
|
|
7215
|
+
* exists
|
|
7216
|
+
* (no `DataTransfer`).
|
|
7217
|
+
*
|
|
7218
|
+
* @public
|
|
7219
|
+
*/
|
|
7220
|
+
export declare type TLClipboardPasteRawInfo = {
|
|
7221
|
+
readonly clipboardData: DataTransfer | null;
|
|
7222
|
+
readonly editor: Editor;
|
|
7223
|
+
readonly event: ClipboardEvent;
|
|
7224
|
+
readonly point: undefined | VecLike;
|
|
7225
|
+
readonly source: 'native-event';
|
|
7226
|
+
} | {
|
|
7227
|
+
readonly clipboardItems: readonly ClipboardItem[];
|
|
7228
|
+
readonly editor: Editor;
|
|
7229
|
+
readonly point: undefined | VecLike;
|
|
7230
|
+
readonly source: 'clipboard-read';
|
|
7231
|
+
};
|
|
7232
|
+
|
|
7233
|
+
/**
|
|
7234
|
+
* Identifies how a clipboard write was triggered (copy vs cut, keyboard vs menu).
|
|
7235
|
+
*
|
|
7236
|
+
* @public
|
|
7237
|
+
*/
|
|
7238
|
+
export declare interface TLClipboardWriteInfo {
|
|
7239
|
+
readonly operation: 'copy' | 'cut';
|
|
7240
|
+
readonly source: 'menu' | 'native';
|
|
7241
|
+
}
|
|
7242
|
+
|
|
6730
7243
|
/** @public */
|
|
6731
7244
|
export declare interface TLCollaboratorHintProps {
|
|
6732
7245
|
userId: string;
|
|
@@ -6754,6 +7267,7 @@ export declare interface TLContent {
|
|
|
6754
7267
|
rootShapeIds: TLShapeId[];
|
|
6755
7268
|
assets: TLAsset[];
|
|
6756
7269
|
schema: SerializedSchema;
|
|
7270
|
+
users?: TLUser[];
|
|
6757
7271
|
}
|
|
6758
7272
|
|
|
6759
7273
|
/**
|
|
@@ -6775,6 +7289,12 @@ export declare interface TLCropInfo<T extends TLShape> {
|
|
|
6775
7289
|
aspectRatioLocked?: boolean;
|
|
6776
7290
|
}
|
|
6777
7291
|
|
|
7292
|
+
/** @public */
|
|
7293
|
+
export declare interface TLCurrentUser {
|
|
7294
|
+
readonly userPreferences: Signal<TLUserPreferences>;
|
|
7295
|
+
readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
|
|
7296
|
+
}
|
|
7297
|
+
|
|
6778
7298
|
/** @public */
|
|
6779
7299
|
export declare interface TLCursorProps {
|
|
6780
7300
|
userId: string;
|
|
@@ -6875,6 +7395,10 @@ export declare interface TldrawEditorBaseProps {
|
|
|
6875
7395
|
* An array of binding utils to use in the editor.
|
|
6876
7396
|
*/
|
|
6877
7397
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
|
7398
|
+
/**
|
|
7399
|
+
* An array of asset utils to use in the editor.
|
|
7400
|
+
*/
|
|
7401
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
6878
7402
|
/**
|
|
6879
7403
|
* An array of tools to add to the editor's state chart.
|
|
6880
7404
|
*/
|
|
@@ -6902,11 +7426,23 @@ export declare interface TldrawEditorBaseProps {
|
|
|
6902
7426
|
/**
|
|
6903
7427
|
* The user interacting with the editor.
|
|
6904
7428
|
*/
|
|
6905
|
-
user?:
|
|
7429
|
+
user?: TLCurrentUser;
|
|
7430
|
+
/**
|
|
7431
|
+
* The editor's color scheme. Defaults to `'light'`.
|
|
7432
|
+
*
|
|
7433
|
+
* - `'light'` - Always use light mode.
|
|
7434
|
+
* - `'dark'` - Always use dark mode.
|
|
7435
|
+
* - `'system'` - Follow the OS color scheme preference.
|
|
7436
|
+
*/
|
|
7437
|
+
colorScheme?: 'dark' | 'light' | 'system';
|
|
7438
|
+
/**
|
|
7439
|
+
* Named themes for the editor.
|
|
7440
|
+
*/
|
|
7441
|
+
themes?: Partial<TLThemes>;
|
|
6906
7442
|
/**
|
|
6907
|
-
*
|
|
7443
|
+
* The id of the initially active theme. Defaults to `'default'`.
|
|
6908
7444
|
*/
|
|
6909
|
-
|
|
7445
|
+
initialTheme?: TLThemeId;
|
|
6910
7446
|
/**
|
|
6911
7447
|
* Camera options for the editor.
|
|
6912
7448
|
*
|
|
@@ -7166,6 +7702,72 @@ export declare interface TldrawOptions {
|
|
|
7166
7702
|
* viewport's page dimensions regardless of overview zoom changes.
|
|
7167
7703
|
*/
|
|
7168
7704
|
readonly quickZoomPreservesScreenBounds: boolean;
|
|
7705
|
+
/**
|
|
7706
|
+
* Called before content is written to the clipboard during a copy or cut operation.
|
|
7707
|
+
* Receives the serialized content (shapes, bindings, assets) and can filter or transform
|
|
7708
|
+
* it before it reaches the clipboard.
|
|
7709
|
+
*
|
|
7710
|
+
* Return a modified `TLContent` object to change what is copied or cut. Return `false` to
|
|
7711
|
+
* cancel the clipboard write (for cut, the selected shapes are not removed). Return `void`
|
|
7712
|
+
* (or `undefined`) to pass through unchanged. You may return a `Promise` of those values if
|
|
7713
|
+
* the hook is async.
|
|
7714
|
+
*
|
|
7715
|
+
* @example
|
|
7716
|
+
* ```tsx
|
|
7717
|
+
* // Filter out "locked" shapes from copy
|
|
7718
|
+
* onBeforeCopyToClipboard({ content, operation }) {
|
|
7719
|
+
* return {
|
|
7720
|
+
* ...content,
|
|
7721
|
+
* shapes: content.shapes.filter(s => !s.meta.locked),
|
|
7722
|
+
* rootShapeIds: content.rootShapeIds.filter(id =>
|
|
7723
|
+
* content.shapes.find(s => s.id === id && !s.meta.locked)
|
|
7724
|
+
* ),
|
|
7725
|
+
* }
|
|
7726
|
+
* }
|
|
7727
|
+
* ```
|
|
7728
|
+
*/
|
|
7729
|
+
onBeforeCopyToClipboard?(info: {
|
|
7730
|
+
content: TLContent;
|
|
7731
|
+
editor: Editor;
|
|
7732
|
+
} & TLClipboardWriteInfo): Awaitable<false | TLContent | void>;
|
|
7733
|
+
/**
|
|
7734
|
+
* Called before pasted content is processed and shapes are created. Receives the parsed
|
|
7735
|
+
* external content from the clipboard and can filter, transform, or cancel it.
|
|
7736
|
+
*
|
|
7737
|
+
* Return `false` to cancel the paste. Return a modified content object to transform it.
|
|
7738
|
+
* Return `void` (or `undefined`) to pass through unchanged. You may return a `Promise` of
|
|
7739
|
+
* those values if the hook is async.
|
|
7740
|
+
*
|
|
7741
|
+
* This only fires for clipboard paste operations (keyboard shortcuts and menu actions),
|
|
7742
|
+
* not for file drops or programmatic `putExternalContent` calls.
|
|
7743
|
+
*
|
|
7744
|
+
* @example
|
|
7745
|
+
* ```tsx
|
|
7746
|
+
* // Block pasting of image files
|
|
7747
|
+
* onBeforePasteFromClipboard({ content }) {
|
|
7748
|
+
* if (content.type === 'files') {
|
|
7749
|
+
* const nonImages = content.files.filter(f => !f.type.startsWith('image/'))
|
|
7750
|
+
* if (nonImages.length === 0) return false
|
|
7751
|
+
* return { ...content, files: nonImages }
|
|
7752
|
+
* }
|
|
7753
|
+
* }
|
|
7754
|
+
* ```
|
|
7755
|
+
*/
|
|
7756
|
+
onBeforePasteFromClipboard?(info: {
|
|
7757
|
+
content: TLExternalContent<unknown>;
|
|
7758
|
+
editor: Editor;
|
|
7759
|
+
point?: VecLike;
|
|
7760
|
+
source: 'clipboard-read' | 'native-event';
|
|
7761
|
+
}): Awaitable<false | TLExternalContent<unknown> | void>;
|
|
7762
|
+
/**
|
|
7763
|
+
* Called first for keyboard and menu paste, **before** tldraw handles or parses clipboard data
|
|
7764
|
+
* (and before {@link TldrawOptions.onBeforePasteFromClipboard}).
|
|
7765
|
+
*
|
|
7766
|
+
* Return `false` to cancel tldraw's default paste handling for this gesture (same convention as
|
|
7767
|
+
* {@link TldrawOptions.onBeforePasteFromClipboard}). Use this when you handle paste yourself from
|
|
7768
|
+
* raw clipboard data, or to block the gesture entirely. Return `void` (or `undefined`) to continue.
|
|
7769
|
+
*/
|
|
7770
|
+
onClipboardPasteRaw?(info: TLClipboardPasteRawInfo): false | void;
|
|
7169
7771
|
/**
|
|
7170
7772
|
* Called when content is dropped on the canvas. Provides the page position
|
|
7171
7773
|
* where the drop occurred and the underlying drag event object.
|
|
@@ -7233,18 +7835,17 @@ export declare interface TLEditorOptions {
|
|
|
7233
7835
|
*/
|
|
7234
7836
|
bindingUtils: readonly TLAnyBindingUtilConstructor[];
|
|
7235
7837
|
/**
|
|
7236
|
-
* An array of
|
|
7838
|
+
* An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
|
|
7237
7839
|
*/
|
|
7238
|
-
|
|
7840
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
7239
7841
|
/**
|
|
7240
|
-
*
|
|
7241
|
-
* given, the body element will be used.
|
|
7842
|
+
* An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
|
|
7242
7843
|
*/
|
|
7243
|
-
|
|
7844
|
+
tools: readonly TLStateNodeConstructor[];
|
|
7244
7845
|
/**
|
|
7245
7846
|
* A user defined externally to replace the default user.
|
|
7246
7847
|
*/
|
|
7247
|
-
user?:
|
|
7848
|
+
user?: TLCurrentUser;
|
|
7248
7849
|
/**
|
|
7249
7850
|
* The editor's initial active tool (or other state node id).
|
|
7250
7851
|
*/
|
|
@@ -7253,27 +7854,15 @@ export declare interface TLEditorOptions {
|
|
|
7253
7854
|
* Whether to automatically focus the editor when it mounts.
|
|
7254
7855
|
*/
|
|
7255
7856
|
autoFocus?: boolean;
|
|
7256
|
-
/**
|
|
7257
|
-
* Whether to infer dark mode from the user's system preferences. Defaults to false.
|
|
7258
|
-
*/
|
|
7259
|
-
inferDarkMode?: boolean;
|
|
7260
|
-
/**
|
|
7261
|
-
* Options for the editor's camera.
|
|
7262
|
-
*
|
|
7263
|
-
* @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
|
|
7264
|
-
*/
|
|
7265
|
-
cameraOptions?: Partial<TLCameraOptions>;
|
|
7266
|
-
options?: Partial<TldrawOptions>;
|
|
7267
|
-
/**
|
|
7268
|
-
* Text options for the editor.
|
|
7269
|
-
*
|
|
7270
|
-
* @deprecated Use `options.text` instead. This prop will be removed in a future release.
|
|
7271
|
-
*/
|
|
7272
|
-
textOptions?: TLTextOptions;
|
|
7273
7857
|
licenseKey?: string;
|
|
7274
7858
|
fontAssetUrls?: {
|
|
7275
7859
|
[key: string]: string | undefined;
|
|
7276
7860
|
};
|
|
7861
|
+
/**
|
|
7862
|
+
* Should return a containing html element which has all the styles applied to the editor. If not
|
|
7863
|
+
* given, the body element will be used.
|
|
7864
|
+
*/
|
|
7865
|
+
getContainer(): HTMLElement;
|
|
7277
7866
|
/**
|
|
7278
7867
|
* Provides a way to hide shapes.
|
|
7279
7868
|
*
|
|
@@ -7290,6 +7879,40 @@ export declare interface TLEditorOptions {
|
|
|
7290
7879
|
* @param editor - The editor instance.
|
|
7291
7880
|
*/
|
|
7292
7881
|
getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined;
|
|
7882
|
+
/**
|
|
7883
|
+
* Named theme definitions for the editor. Each theme contains shared
|
|
7884
|
+
* properties (font size, line height, stroke width) and color palettes
|
|
7885
|
+
* for both light and dark modes.
|
|
7886
|
+
*/
|
|
7887
|
+
themes?: Partial<TLThemes>;
|
|
7888
|
+
/**
|
|
7889
|
+
* The id of the initially active theme. Defaults to `'default'`.
|
|
7890
|
+
*/
|
|
7891
|
+
initialTheme?: TLThemeId;
|
|
7892
|
+
/**
|
|
7893
|
+
* The editor's color scheme preference, controls the default color mode. Defaults to `'light'`.
|
|
7894
|
+
*
|
|
7895
|
+
* - `'light'` - Always use light mode.
|
|
7896
|
+
* - `'dark'` - Always use dark mode.
|
|
7897
|
+
* - `'system'` - Follow the OS color scheme preference.
|
|
7898
|
+
*/
|
|
7899
|
+
colorScheme?: 'dark' | 'light' | 'system';
|
|
7900
|
+
/**
|
|
7901
|
+
* Additional configuration options for the tldraw editor.
|
|
7902
|
+
*/
|
|
7903
|
+
options?: Partial<TldrawOptions>;
|
|
7904
|
+
/**
|
|
7905
|
+
* Options for the editor's camera.
|
|
7906
|
+
*
|
|
7907
|
+
* @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
|
|
7908
|
+
*/
|
|
7909
|
+
cameraOptions?: Partial<TLCameraOptions>;
|
|
7910
|
+
/**
|
|
7911
|
+
* Text options for the editor.
|
|
7912
|
+
*
|
|
7913
|
+
* @deprecated Use `options.text` instead. This prop will be removed in a future release.
|
|
7914
|
+
*/
|
|
7915
|
+
textOptions?: TLTextOptions;
|
|
7293
7916
|
}
|
|
7294
7917
|
|
|
7295
7918
|
/**
|
|
@@ -7348,6 +7971,7 @@ export declare const tlenv: {
|
|
|
7348
7971
|
*/
|
|
7349
7972
|
export declare const tlenvReactive: Atom< {
|
|
7350
7973
|
isCoarsePointer: boolean;
|
|
7974
|
+
supportsP3ColorSpace: boolean;
|
|
7351
7975
|
}, unknown>;
|
|
7352
7976
|
|
|
7353
7977
|
/** @public */
|
|
@@ -7476,6 +8100,7 @@ export declare interface TLFileReplaceExternalContent extends TLBaseExternalCont
|
|
|
7476
8100
|
type: 'file-replace';
|
|
7477
8101
|
file: File;
|
|
7478
8102
|
shapeId: TLShapeId;
|
|
8103
|
+
/** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */
|
|
7479
8104
|
isImage: boolean;
|
|
7480
8105
|
}
|
|
7481
8106
|
|
|
@@ -7487,69 +8112,18 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
|
|
|
7487
8112
|
}
|
|
7488
8113
|
|
|
7489
8114
|
/**
|
|
7490
|
-
*
|
|
7491
|
-
* ones in the
|
|
7492
|
-
* {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
|
|
7493
|
-
* @public
|
|
7494
|
-
*/
|
|
7495
|
-
export declare interface TLFontFace {
|
|
7496
|
-
/**
|
|
7497
|
-
* How this font can be referred to in CSS.
|
|
7498
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
|
|
7499
|
-
*/
|
|
7500
|
-
readonly family: string;
|
|
7501
|
-
/**
|
|
7502
|
-
* The source of the font. This
|
|
7503
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
|
|
7504
|
-
*/
|
|
7505
|
-
readonly src: TLFontFaceSource;
|
|
7506
|
-
/**
|
|
7507
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
|
|
7508
|
-
*/
|
|
7509
|
-
readonly ascentOverride?: string;
|
|
7510
|
-
/**
|
|
7511
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
|
|
7512
|
-
*/
|
|
7513
|
-
readonly descentOverride?: string;
|
|
7514
|
-
/**
|
|
7515
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
|
|
7516
|
-
*/
|
|
7517
|
-
readonly stretch?: string;
|
|
7518
|
-
/**
|
|
7519
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
|
|
7520
|
-
*/
|
|
7521
|
-
readonly style?: string;
|
|
7522
|
-
/**
|
|
7523
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
|
|
7524
|
-
*/
|
|
7525
|
-
readonly weight?: string;
|
|
7526
|
-
/**
|
|
7527
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
|
|
7528
|
-
*/
|
|
7529
|
-
readonly featureSettings?: string;
|
|
7530
|
-
/**
|
|
7531
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
|
|
7532
|
-
*/
|
|
7533
|
-
readonly lineGapOverride?: string;
|
|
7534
|
-
/**
|
|
7535
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
|
|
7536
|
-
*/
|
|
7537
|
-
readonly unicodeRange?: string;
|
|
7538
|
-
}
|
|
7539
|
-
|
|
7540
|
-
/**
|
|
7541
|
-
* Represents the `src` property of a {@link TLFontFace}.
|
|
7542
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
|
|
8115
|
+
* Emitted every animation frame when at least one `'frame'` listener is registered.
|
|
7543
8116
|
* @public
|
|
7544
8117
|
*/
|
|
7545
|
-
export declare interface
|
|
7546
|
-
/**
|
|
7547
|
-
|
|
7548
|
-
|
|
7549
|
-
|
|
7550
|
-
|
|
7551
|
-
|
|
7552
|
-
|
|
8118
|
+
export declare interface TLFramePerfEvent {
|
|
8119
|
+
/** Time since the last frame in ms. */
|
|
8120
|
+
elapsed: number;
|
|
8121
|
+
/** Total shapes on the current page. */
|
|
8122
|
+
shapeCount: number;
|
|
8123
|
+
/** Number of shapes culled (off-screen) from rendering. */
|
|
8124
|
+
culledShapeCount: number;
|
|
8125
|
+
/** Number of shapes visible (not culled) in the viewport. */
|
|
8126
|
+
visibleShapeCount: number;
|
|
7553
8127
|
}
|
|
7554
8128
|
|
|
7555
8129
|
/** Additional options for the {@link ShapeUtil.getGeometry} method.
|
|
@@ -7694,6 +8268,38 @@ export declare type TLIndicatorPath = {
|
|
|
7694
8268
|
path: Path2D;
|
|
7695
8269
|
} | Path2D;
|
|
7696
8270
|
|
|
8271
|
+
/**
|
|
8272
|
+
* Emitted when an interaction state is exited, with aggregated frame time stats.
|
|
8273
|
+
* @public
|
|
8274
|
+
*/
|
|
8275
|
+
export declare interface TLInteractionEndPerfEvent extends TLPerfFrameTimeStats {
|
|
8276
|
+
/** The state node id (e.g. `'translating'`). */
|
|
8277
|
+
name: string;
|
|
8278
|
+
/** Full tool path (e.g. `'select.translating'`). */
|
|
8279
|
+
path: string;
|
|
8280
|
+
/** Total shapes on the current page. */
|
|
8281
|
+
shapeCount: number;
|
|
8282
|
+
/** Breakdown of selected shape types at interaction start (e.g. `{ geo: 2, draw: 1 }`). */
|
|
8283
|
+
selectedShapeTypes: Record<string, number>;
|
|
8284
|
+
/** Camera zoom level (`camera.z`) at interaction end. */
|
|
8285
|
+
zoomLevel: number;
|
|
8286
|
+
/** `performance.now()` when the interaction ended. */
|
|
8287
|
+
timestamp: number;
|
|
8288
|
+
}
|
|
8289
|
+
|
|
8290
|
+
/**
|
|
8291
|
+
* Emitted when an interaction state (e.g. translating, resizing) is entered.
|
|
8292
|
+
* @public
|
|
8293
|
+
*/
|
|
8294
|
+
export declare interface TLInteractionStartPerfEvent {
|
|
8295
|
+
/** The state node id (e.g. `'translating'`). */
|
|
8296
|
+
name: string;
|
|
8297
|
+
/** Full tool path (e.g. `'select.translating'`). */
|
|
8298
|
+
path: string;
|
|
8299
|
+
/** `performance.now()` when the interaction started. */
|
|
8300
|
+
timestamp: number;
|
|
8301
|
+
}
|
|
8302
|
+
|
|
7697
8303
|
/** @public */
|
|
7698
8304
|
export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
|
|
7699
8305
|
|
|
@@ -7743,6 +8349,11 @@ export declare interface TLLoadSnapshotOptions {
|
|
|
7743
8349
|
forceOverwriteSessionState?: boolean;
|
|
7744
8350
|
}
|
|
7745
8351
|
|
|
8352
|
+
/** @public */
|
|
8353
|
+
export declare type TLMeasuredTextSize = BoxModel & {
|
|
8354
|
+
scrollWidth: number;
|
|
8355
|
+
};
|
|
8356
|
+
|
|
7746
8357
|
/** @public */
|
|
7747
8358
|
export declare interface TLMeasureTextOpts {
|
|
7748
8359
|
fontStyle: string;
|
|
@@ -7936,6 +8547,94 @@ export declare const tlmenus: {
|
|
|
7936
8547
|
*/
|
|
7937
8548
|
export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
|
|
7938
8549
|
|
|
8550
|
+
/**
|
|
8551
|
+
* Map of all performance event names to their payload types.
|
|
8552
|
+
* Used with {@link PerformanceManager.on} and {@link PerformanceManager.once}.
|
|
8553
|
+
* @public
|
|
8554
|
+
*/
|
|
8555
|
+
export declare interface TLPerfEventMap {
|
|
8556
|
+
/** An interaction state was entered. */
|
|
8557
|
+
'interaction-start': [TLInteractionStartPerfEvent];
|
|
8558
|
+
/** An interaction state was exited, with aggregated frame time stats. */
|
|
8559
|
+
'interaction-end': [TLInteractionEndPerfEvent];
|
|
8560
|
+
/** A camera operation (pan/zoom) began. */
|
|
8561
|
+
'camera-start': [TLCameraStartPerfEvent];
|
|
8562
|
+
/** A camera operation ended (after debounce), with aggregated frame time stats. */
|
|
8563
|
+
'camera-end': [TLCameraEndPerfEvent];
|
|
8564
|
+
/** Shapes were created. */
|
|
8565
|
+
'shapes-created': [TLShapeOperationPerfEvent];
|
|
8566
|
+
/** Shapes were updated. */
|
|
8567
|
+
'shapes-updated': [TLShapeOperationPerfEvent];
|
|
8568
|
+
/** Shapes were deleted. */
|
|
8569
|
+
'shapes-deleted': [TLShapeOperationPerfEvent];
|
|
8570
|
+
/** An animation frame was rendered. Only fires when listeners are registered. */
|
|
8571
|
+
frame: [TLFramePerfEvent];
|
|
8572
|
+
/** An undo operation was performed. */
|
|
8573
|
+
undo: [TLUndoRedoPerfEvent];
|
|
8574
|
+
/** A redo operation was performed. */
|
|
8575
|
+
redo: [TLUndoRedoPerfEvent];
|
|
8576
|
+
}
|
|
8577
|
+
|
|
8578
|
+
/**
|
|
8579
|
+
* Common frame time statistics shared by interaction and camera end events.
|
|
8580
|
+
* @public
|
|
8581
|
+
*/
|
|
8582
|
+
export declare interface TLPerfFrameTimeStats {
|
|
8583
|
+
/** Total duration of the session in ms. */
|
|
8584
|
+
duration: number;
|
|
8585
|
+
/** Average frames per second during the session. */
|
|
8586
|
+
fps: number;
|
|
8587
|
+
/** Total number of frames recorded. */
|
|
8588
|
+
frameCount: number;
|
|
8589
|
+
/** Mean frame duration in ms. */
|
|
8590
|
+
avgFrameTime: number;
|
|
8591
|
+
/** Median (p50) frame duration in ms. */
|
|
8592
|
+
medianFrameTime: number;
|
|
8593
|
+
/** 95th percentile frame duration in ms. */
|
|
8594
|
+
p95FrameTime: number;
|
|
8595
|
+
/** 99th percentile frame duration in ms. */
|
|
8596
|
+
p99FrameTime: number;
|
|
8597
|
+
/** Shortest frame duration in ms. */
|
|
8598
|
+
minFrameTime: number;
|
|
8599
|
+
/** Longest frame duration in ms. */
|
|
8600
|
+
maxFrameTime: number;
|
|
8601
|
+
/** Raw frame durations for local analysis. Exclude when sending to analytics. */
|
|
8602
|
+
frameTimes: number[];
|
|
8603
|
+
/**
|
|
8604
|
+
* Long animation frames observed during this period (Chromium 123+).
|
|
8605
|
+
* Only present when the browser supports the Long Animation Frames API and
|
|
8606
|
+
* at least one long frame was observed.
|
|
8607
|
+
* Exclude when sending to analytics — entries are large and contain script URLs.
|
|
8608
|
+
*/
|
|
8609
|
+
longAnimationFrames?: TLPerfLongAnimationFrame[];
|
|
8610
|
+
}
|
|
8611
|
+
|
|
8612
|
+
/**
|
|
8613
|
+
* A long animation frame observed by the browser during an interaction.
|
|
8614
|
+
* Available only in browsers that support the Long Animation Frames API (Chromium 123+).
|
|
8615
|
+
* @public
|
|
8616
|
+
*/
|
|
8617
|
+
export declare interface TLPerfLongAnimationFrame {
|
|
8618
|
+
/** Frame start time (relative to timeOrigin). */
|
|
8619
|
+
startTime: number;
|
|
8620
|
+
/** Total frame duration in ms. */
|
|
8621
|
+
duration: number;
|
|
8622
|
+
/** Time the main thread was blocked in ms. */
|
|
8623
|
+
blockingDuration: number;
|
|
8624
|
+
/** Scripts that contributed to the long frame. */
|
|
8625
|
+
scripts: TLPerfLongAnimationFrameScript[];
|
|
8626
|
+
}
|
|
8627
|
+
|
|
8628
|
+
/** A script attribution entry from a long animation frame. @public */
|
|
8629
|
+
export declare interface TLPerfLongAnimationFrameScript {
|
|
8630
|
+
/** The script source URL (may be empty for inline scripts). */
|
|
8631
|
+
sourceURL: string;
|
|
8632
|
+
/** The function name or invoker description. */
|
|
8633
|
+
invoker: string;
|
|
8634
|
+
/** Time spent in this script in ms. */
|
|
8635
|
+
duration: number;
|
|
8636
|
+
}
|
|
8637
|
+
|
|
7939
8638
|
/** @public */
|
|
7940
8639
|
export declare type TLPinchEvent = (info: TLPinchEventInfo) => void;
|
|
7941
8640
|
|
|
@@ -8123,6 +8822,21 @@ export declare interface TLShapeIndicatorsProps {
|
|
|
8123
8822
|
showAll?: boolean;
|
|
8124
8823
|
}
|
|
8125
8824
|
|
|
8825
|
+
/**
|
|
8826
|
+
* Emitted when shapes are created, updated, or deleted.
|
|
8827
|
+
* @public
|
|
8828
|
+
*/
|
|
8829
|
+
export declare interface TLShapeOperationPerfEvent {
|
|
8830
|
+
/** The operation type. */
|
|
8831
|
+
operation: 'create' | 'delete' | 'update';
|
|
8832
|
+
/** Number of shapes affected. */
|
|
8833
|
+
count: number;
|
|
8834
|
+
/** Breakdown by shape type (e.g. `{ geo: 2, draw: 1 }`). */
|
|
8835
|
+
shapeTypes: Record<string, number>;
|
|
8836
|
+
/** `performance.now()` when the operation occurred. */
|
|
8837
|
+
timestamp: number;
|
|
8838
|
+
}
|
|
8839
|
+
|
|
8126
8840
|
/**
|
|
8127
8841
|
* Options passed to {@link ShapeUtil.canBeLaidOut}.
|
|
8128
8842
|
*
|
|
@@ -8180,6 +8894,7 @@ export declare interface TLShapeUtilConstructor<T extends TLShape, U extends Sha
|
|
|
8180
8894
|
type: T['type'];
|
|
8181
8895
|
props?: RecordProps<T>;
|
|
8182
8896
|
migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
8897
|
+
handledAssetTypes?: readonly string[];
|
|
8183
8898
|
}
|
|
8184
8899
|
|
|
8185
8900
|
/** @public */
|
|
@@ -8207,6 +8922,7 @@ export declare interface TLStateNodeConstructor {
|
|
|
8207
8922
|
children?(): TLStateNodeConstructor[];
|
|
8208
8923
|
isLockable: boolean;
|
|
8209
8924
|
useCoalescedEvents: boolean;
|
|
8925
|
+
trackPerformance: boolean;
|
|
8210
8926
|
}
|
|
8211
8927
|
|
|
8212
8928
|
/** @public */
|
|
@@ -8219,6 +8935,14 @@ export declare interface TLStoreBaseOptions {
|
|
|
8219
8935
|
defaultName?: string;
|
|
8220
8936
|
/** How should this store upload & resolve assets? */
|
|
8221
8937
|
assets?: TLAssetStore;
|
|
8938
|
+
/**
|
|
8939
|
+
* Named theme definitions. When provided, custom color names are automatically
|
|
8940
|
+
* registered before the store is constructed so persisted data with those
|
|
8941
|
+
* colors passes validation on load.
|
|
8942
|
+
*/
|
|
8943
|
+
themes?: Partial<TLThemes>;
|
|
8944
|
+
/** How should this store resolve users for attribution? */
|
|
8945
|
+
users?: TLUserStore;
|
|
8222
8946
|
/** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
|
|
8223
8947
|
onMount?(editor: Editor): (() => void) | void;
|
|
8224
8948
|
}
|
|
@@ -8238,6 +8962,7 @@ export declare type TLStoreOptions = TLStoreBaseOptions & {
|
|
|
8238
8962
|
|
|
8239
8963
|
/** @public */
|
|
8240
8964
|
export declare type TLStoreSchemaOptions = {
|
|
8965
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
8241
8966
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
|
8242
8967
|
migrations?: readonly MigrationSequence[];
|
|
8243
8968
|
records?: Record<string, CustomRecordInfo>;
|
|
@@ -8375,6 +9100,19 @@ export declare interface TLTldrawExternalContentSource {
|
|
|
8375
9100
|
data: TLContent;
|
|
8376
9101
|
}
|
|
8377
9102
|
|
|
9103
|
+
/**
|
|
9104
|
+
* Emitted after an undo or redo operation.
|
|
9105
|
+
* @public
|
|
9106
|
+
*/
|
|
9107
|
+
export declare interface TLUndoRedoPerfEvent {
|
|
9108
|
+
/** Whether this was an undo or redo. */
|
|
9109
|
+
type: 'redo' | 'undo';
|
|
9110
|
+
/** Number of undo steps remaining. */
|
|
9111
|
+
undoDepth: number;
|
|
9112
|
+
/** Number of redo steps remaining. */
|
|
9113
|
+
redoDepth: number;
|
|
9114
|
+
}
|
|
9115
|
+
|
|
8378
9116
|
/** @public */
|
|
8379
9117
|
export declare interface TLUpdatePointerOptions {
|
|
8380
9118
|
/** Whether to update the pointer immediately, rather than on the next tick. */
|
|
@@ -8406,12 +9144,6 @@ export declare interface TLUrlExternalContent extends TLBaseExternalContent {
|
|
|
8406
9144
|
url: string;
|
|
8407
9145
|
}
|
|
8408
9146
|
|
|
8409
|
-
/** @public */
|
|
8410
|
-
export declare interface TLUser {
|
|
8411
|
-
readonly userPreferences: Signal<TLUserPreferences>;
|
|
8412
|
-
readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
|
|
8413
|
-
}
|
|
8414
|
-
|
|
8415
9147
|
/**
|
|
8416
9148
|
* A user of tldraw
|
|
8417
9149
|
*
|
|
@@ -8512,6 +9244,9 @@ export declare function uniq<T>(array: {
|
|
|
8512
9244
|
readonly length: number;
|
|
8513
9245
|
} | null | undefined): T[];
|
|
8514
9246
|
|
|
9247
|
+
/** @public */
|
|
9248
|
+
export declare function useColorMode(): 'dark' | 'light';
|
|
9249
|
+
|
|
8515
9250
|
/** @public */
|
|
8516
9251
|
export declare function useContainer(): HTMLElement;
|
|
8517
9252
|
|
|
@@ -8550,9 +9285,6 @@ export declare function useGlobalMenuIsOpen(id: string, onChange?: (isOpen: bool
|
|
|
8550
9285
|
/** @public */
|
|
8551
9286
|
export declare function useIsCropping(shapeId: TLShapeId): boolean;
|
|
8552
9287
|
|
|
8553
|
-
/** @public */
|
|
8554
|
-
export declare function useIsDarkMode(): boolean;
|
|
8555
|
-
|
|
8556
9288
|
/** @public */
|
|
8557
9289
|
export declare function useIsEditing(shapeId: TLShapeId): boolean;
|
|
8558
9290
|
|
|
@@ -8590,11 +9322,11 @@ export declare function usePresence(userId: string): null | TLInstancePresence;
|
|
|
8590
9322
|
/** @public */
|
|
8591
9323
|
export declare class UserPreferencesManager {
|
|
8592
9324
|
private readonly user;
|
|
8593
|
-
private readonly
|
|
9325
|
+
private readonly colorScheme;
|
|
8594
9326
|
systemColorScheme: Atom<"dark" | "light", unknown>;
|
|
8595
9327
|
disposables: Set<() => void>;
|
|
8596
9328
|
dispose(): void;
|
|
8597
|
-
constructor(user:
|
|
9329
|
+
constructor(user: TLCurrentUser, colorScheme: 'dark' | 'light' | 'system');
|
|
8598
9330
|
updateUserPreferences(userPreferences: Partial<TLUserPreferences>): void;
|
|
8599
9331
|
getUserPreferences(): {
|
|
8600
9332
|
animationSpeed: number;
|
|
@@ -8665,10 +9397,10 @@ export declare function useSvgExportContext(): null | SvgExportContext;
|
|
|
8665
9397
|
/**
|
|
8666
9398
|
* @public
|
|
8667
9399
|
*/
|
|
8668
|
-
export declare function
|
|
9400
|
+
export declare function useTldrawCurrentUser(opts: {
|
|
8669
9401
|
setUserPreferences?: (userPreferences: TLUserPreferences) => void;
|
|
8670
9402
|
userPreferences?: Signal<TLUserPreferences> | TLUserPreferences;
|
|
8671
|
-
}):
|
|
9403
|
+
}): TLCurrentUser;
|
|
8672
9404
|
|
|
8673
9405
|
/** @public */
|
|
8674
9406
|
export declare function useTLSchemaFromUtils(opts: TLStoreSchemaOptions): StoreSchema<TLRecord, TLStoreProps>;
|