@tldraw/editor 4.6.0-canary.1e055ffec9ba → 4.6.0-canary.2152ec021b75
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 +1245 -286
- package/dist-cjs/index.js +28 -26
- package/dist-cjs/index.js.map +3 -3
- package/dist-cjs/lib/TldrawEditor.js +62 -14
- package/dist-cjs/lib/TldrawEditor.js.map +3 -3
- package/dist-cjs/lib/components/MenuClickCapture.js +99 -38
- package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
- package/dist-cjs/lib/components/default-components/CanvasOverlays.js +180 -0
- package/dist-cjs/lib/components/default-components/CanvasOverlays.js.map +7 -0
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js +33 -236
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
- 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/{components/default-components/DefaultShapeIndicatorErrorFallback.js → config/defaultAssets.js} +17 -9
- 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 +892 -367
- package/dist-cjs/lib/editor/Editor.js.map +3 -3
- package/dist-cjs/lib/editor/assets/AssetUtil.js +67 -0
- package/dist-cjs/lib/editor/assets/AssetUtil.js.map +7 -0
- package/dist-cjs/lib/editor/bindings/BindingUtil.js +1 -0
- package/dist-cjs/lib/editor/bindings/BindingUtil.js.map +1 -1
- package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js +26 -64
- package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +2 -1
- package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +15 -53
- package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/FontManager/FontManager.js +2 -0
- package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js +2 -0
- package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js +83 -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/{components/default-components/DefaultHandles.js → editor/managers/PerformanceManager/perf-types.js} +3 -14
- package/dist-cjs/lib/editor/managers/PerformanceManager/perf-types.js.map +7 -0
- package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js +1 -0
- package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js +22 -56
- package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +12 -52
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +21 -57
- package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +5 -4
- package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +103 -30
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js +107 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map +7 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +600 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +7 -0
- package/dist-cjs/lib/editor/managers/TickManager/TickManager.js +17 -55
- package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +65 -72
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
- package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
- package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
- package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +180 -0
- package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
- package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +76 -0
- package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +7 -0
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +35 -20
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +33 -3
- 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 +15 -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/event-types.js.map +2 -2
- package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
- package/dist-cjs/lib/exports/ExportDelay.js +13 -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 +2 -1
- package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
- package/dist-cjs/lib/exports/getSvgJsx.js +14 -8
- 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/EditorComponentsContext.js.map +2 -2
- package/dist-cjs/lib/hooks/useCanvasEvents.js +25 -4
- package/dist-cjs/lib/hooks/useCanvasEvents.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 +0 -28
- 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/hooks/usePeerIds.js +1 -36
- package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
- package/dist-cjs/lib/hooks/useShapeCulling.js +2 -1
- package/dist-cjs/lib/hooks/useShapeCulling.js.map +2 -2
- package/dist-cjs/lib/options.js +4 -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 +4 -1
- package/dist-cjs/lib/primitives/Vec.js.map +2 -2
- 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 +3 -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 +4 -3
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js +12 -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 +2 -1
- package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +2 -2
- package/dist-cjs/lib/utils/EditorAtom.js +2 -0
- package/dist-cjs/lib/utils/EditorAtom.js.map +1 -1
- 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 +5 -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 +1245 -286
- package/dist-esm/index.mjs +40 -48
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +65 -14
- package/dist-esm/lib/TldrawEditor.mjs.map +3 -3
- package/dist-esm/lib/components/MenuClickCapture.mjs +100 -39
- package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +160 -0
- package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +34 -237
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
- 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 +898 -369
- package/dist-esm/lib/editor/Editor.mjs.map +3 -3
- package/dist-esm/lib/editor/assets/AssetUtil.mjs +47 -0
- package/dist-esm/lib/editor/assets/AssetUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/bindings/BindingUtil.mjs +1 -0
- package/dist-esm/lib/editor/bindings/BindingUtil.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs +26 -64
- package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +2 -1
- package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +15 -53
- package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs +2 -0
- package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs +2 -0
- package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs +83 -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/ScribbleManager/ScribbleManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs +22 -56
- package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +12 -52
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +21 -57
- package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +5 -4
- package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +103 -30
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs +89 -0
- package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +582 -0
- package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs +17 -55
- package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +65 -72
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
- package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
- package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
- package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +160 -0
- package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +56 -0
- package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +35 -20
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +33 -3
- 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 +15 -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/editor/types/event-types.mjs.map +2 -2
- package/dist-esm/lib/exports/ExportDelay.mjs +13 -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 +2 -1
- package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
- package/dist-esm/lib/exports/getSvgJsx.mjs +14 -11
- 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/EditorComponentsContext.mjs.map +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs +25 -4
- package/dist-esm/lib/hooks/useCanvasEvents.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 +0 -28
- 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/hooks/usePeerIds.mjs +2 -40
- package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
- package/dist-esm/lib/hooks/useShapeCulling.mjs +2 -1
- package/dist-esm/lib/hooks/useShapeCulling.mjs.map +2 -2
- package/dist-esm/lib/options.mjs +4 -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 +4 -1
- package/dist-esm/lib/primitives/Vec.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 +3 -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 +4 -3
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +12 -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 +2 -1
- package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +2 -2
- package/dist-esm/lib/utils/EditorAtom.mjs +2 -0
- package/dist-esm/lib/utils/EditorAtom.mjs.map +1 -1
- 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 +5 -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 +16 -256
- package/package.json +7 -8
- package/src/index.ts +56 -52
- package/src/lib/TldrawEditor.tsx +108 -20
- package/src/lib/components/MenuClickCapture.tsx +129 -49
- package/src/lib/components/default-components/CanvasOverlays.tsx +208 -0
- package/src/lib/components/default-components/DefaultCanvas.tsx +38 -310
- 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.test.ts +3 -1
- package/src/lib/editor/Editor.ts +596 -45
- 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 +42 -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/SnapManager/SnapManager.test.ts +13 -2
- package/src/lib/editor/managers/SnapManager/SnapManager.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 +619 -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/overlays/OverlayManager.ts +183 -0
- package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
- package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +230 -0
- package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +123 -0
- package/src/lib/editor/shapes/ShapeUtil.ts +67 -30
- package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +41 -4
- 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/event-types.ts +2 -0
- package/src/lib/editor/types/external-content.ts +1 -0
- package/src/lib/exports/StyleEmbedder.ts +1 -1
- package/src/lib/exports/getSvgJsx.test.ts +3 -1
- package/src/lib/exports/getSvgJsx.tsx +24 -17
- package/src/lib/globals/environment.ts +18 -0
- package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
- package/src/lib/hooks/useCanvasEvents.ts +40 -3
- 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 -29
- package/src/lib/hooks/useGestureEvents.ts +240 -168
- package/src/lib/hooks/useLocalStore.ts +1 -1
- package/src/lib/hooks/usePeerIds.ts +6 -55
- package/src/lib/hooks/useShapeCulling.tsx +3 -1
- package/src/lib/options.ts +115 -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/components/LiveCollaborators.js +0 -151
- package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -227
- package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
- package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
- package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
- package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
- package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -101
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
- package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
- package/dist-cjs/lib/config/createTLUser.js.map +0 -7
- package/dist-cjs/lib/hooks/useIsDarkMode.js.map +0 -7
- package/dist-esm/lib/components/LiveCollaborators.mjs +0 -134
- package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -207
- package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
- package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
- package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
- package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
- package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -81
- package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
- package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
- package/dist-esm/lib/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/src/lib/components/LiveCollaborators.tsx +0 -174
- package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -289
- package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
- package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
- package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
- package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
- package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
- package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
- package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
- package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
- package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -116
- package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
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';
|
|
@@ -18,7 +19,6 @@ import { JsonObject } from '@tldraw/utils';
|
|
|
18
19
|
import { JSX } from 'react/jsx-runtime';
|
|
19
20
|
import { LegacyMigrations } from '@tldraw/store';
|
|
20
21
|
import { MigrationSequence } from '@tldraw/store';
|
|
21
|
-
import { NamedExoticComponent } from 'react';
|
|
22
22
|
import { Node as Node_2 } from '@tiptap/pm/model';
|
|
23
23
|
import { PerformanceTracker } from '@tldraw/utils';
|
|
24
24
|
import { PointerEvent as PointerEvent_2 } from 'react';
|
|
@@ -56,9 +56,12 @@ import { TLCamera } from '@tldraw/tlschema';
|
|
|
56
56
|
import { TLCreateShapePartial } from '@tldraw/tlschema';
|
|
57
57
|
import { TLCursor } from '@tldraw/tlschema';
|
|
58
58
|
import { TLCursorType } from '@tldraw/tlschema';
|
|
59
|
+
import { TLDefaultColor } from '@tldraw/tlschema';
|
|
60
|
+
import { TLDefaultColorStyle } from '@tldraw/tlschema';
|
|
59
61
|
import { TLDefaultDashStyle } from '@tldraw/tlschema';
|
|
60
62
|
import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
|
|
61
63
|
import { TLDocument } from '@tldraw/tlschema';
|
|
64
|
+
import { TLFontFace } from '@tldraw/tlschema';
|
|
62
65
|
import { TLGroupShape } from '@tldraw/tlschema';
|
|
63
66
|
import { TLHandle } from '@tldraw/tlschema';
|
|
64
67
|
import { TLImageAsset } from '@tldraw/tlschema';
|
|
@@ -80,8 +83,15 @@ import { TLStore } from '@tldraw/tlschema';
|
|
|
80
83
|
import { TLStoreProps } from '@tldraw/tlschema';
|
|
81
84
|
import { TLStoreSchema } from '@tldraw/tlschema';
|
|
82
85
|
import { TLStoreSnapshot } from '@tldraw/tlschema';
|
|
86
|
+
import { TLTheme } from '@tldraw/tlschema';
|
|
87
|
+
import { TLThemeColors } from '@tldraw/tlschema';
|
|
88
|
+
import { TLThemeId } from '@tldraw/tlschema';
|
|
89
|
+
import { TLThemes } from '@tldraw/tlschema';
|
|
90
|
+
import { TLUnknownAsset } from '@tldraw/tlschema';
|
|
83
91
|
import { TLUnknownBinding } from '@tldraw/tlschema';
|
|
84
92
|
import { TLUnknownShape } from '@tldraw/tlschema';
|
|
93
|
+
import { TLUser } from '@tldraw/tlschema';
|
|
94
|
+
import { TLUserStore } from '@tldraw/tlschema';
|
|
85
95
|
import { TLVideoAsset } from '@tldraw/tlschema';
|
|
86
96
|
import { UnknownRecord } from '@tldraw/store';
|
|
87
97
|
import { VecModel } from '@tldraw/tlschema';
|
|
@@ -144,6 +154,51 @@ export declare class Arc2d extends Geometry2d {
|
|
|
144
154
|
*/
|
|
145
155
|
export declare function areAnglesCompatible(a: number, b: number): boolean;
|
|
146
156
|
|
|
157
|
+
/**
|
|
158
|
+
* Abstract base class for defining asset-type-specific behavior.
|
|
159
|
+
*
|
|
160
|
+
* Each asset type (image, video, bookmark, etc.) has a corresponding AssetUtil that handles
|
|
161
|
+
* type-specific operations like determining supported MIME types and creating assets from files.
|
|
162
|
+
*
|
|
163
|
+
* @public
|
|
164
|
+
*/
|
|
165
|
+
export declare abstract class AssetUtil<Asset extends TLAsset = TLAsset> {
|
|
166
|
+
editor: Editor;
|
|
167
|
+
/** Configure this asset util's {@link AssetUtil.options | `options`}. */
|
|
168
|
+
static configure<T extends TLAssetUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
|
|
169
|
+
options: infer Options;
|
|
170
|
+
} ? Partial<Options> : never): T;
|
|
171
|
+
constructor(editor: Editor);
|
|
172
|
+
/**
|
|
173
|
+
* Options for this asset util. Override this to provide customization options for your asset.
|
|
174
|
+
* Use {@link AssetUtil.configure} to customize existing asset utils.
|
|
175
|
+
*/
|
|
176
|
+
options: {};
|
|
177
|
+
static props?: RecordProps<TLUnknownAsset>;
|
|
178
|
+
static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
179
|
+
/**
|
|
180
|
+
* The type of the asset util, which should match the asset's type.
|
|
181
|
+
*/
|
|
182
|
+
static type: string;
|
|
183
|
+
/**
|
|
184
|
+
* Get the default props for an asset of this type.
|
|
185
|
+
*/
|
|
186
|
+
abstract getDefaultProps(): Asset['props'];
|
|
187
|
+
/**
|
|
188
|
+
* Get the MIME types that this asset type supports.
|
|
189
|
+
* Return an empty array if this asset type doesn't support files (e.g. bookmarks).
|
|
190
|
+
*/
|
|
191
|
+
getSupportedMimeTypes(): readonly string[];
|
|
192
|
+
/**
|
|
193
|
+
* Check whether this asset type accepts a given MIME type.
|
|
194
|
+
*/
|
|
195
|
+
acceptsMimeType(mimeType: string): boolean;
|
|
196
|
+
/**
|
|
197
|
+
* Create an asset from a file. Return null if this asset type can't handle the file.
|
|
198
|
+
*/
|
|
199
|
+
getAssetFromFile(_file: File, _assetId: TLAssetId): Promise<Asset | null>;
|
|
200
|
+
}
|
|
201
|
+
|
|
147
202
|
/** @public */
|
|
148
203
|
export declare function average(A: VecLike, B: VecLike): string;
|
|
149
204
|
|
|
@@ -164,6 +219,62 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
|
|
|
164
219
|
getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
|
|
165
220
|
}
|
|
166
221
|
|
|
222
|
+
/**
|
|
223
|
+
* A base class for frame-like shapes — containers that clip their children,
|
|
224
|
+
* require full-brush selection, block erasure from inside, and support
|
|
225
|
+
* drag-and-drop reparenting.
|
|
226
|
+
*
|
|
227
|
+
* Extending this class is the easiest way to create a custom frame-like shape.
|
|
228
|
+
* It provides sensible defaults for all frame-like behaviors:
|
|
229
|
+
*
|
|
230
|
+
* - `isFrameLike()` returns `true`
|
|
231
|
+
* - `providesBackgroundForChildren()` returns `true`
|
|
232
|
+
* - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
|
|
233
|
+
* - `getClipPath()` returns the shape geometry's vertices
|
|
234
|
+
* - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
|
|
235
|
+
* - `onDragShapesOut()` reparents shapes back to the page
|
|
236
|
+
*
|
|
237
|
+
* All methods can be overridden for custom behavior.
|
|
238
|
+
*
|
|
239
|
+
* @example
|
|
240
|
+
* ```ts
|
|
241
|
+
* class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {
|
|
242
|
+
* static override type = 'my-container' as const
|
|
243
|
+
* static override props = myContainerShapeProps
|
|
244
|
+
*
|
|
245
|
+
* override getDefaultProps() {
|
|
246
|
+
* return { w: 300, h: 200 }
|
|
247
|
+
* }
|
|
248
|
+
*
|
|
249
|
+
* override component(shape: MyContainerShape) {
|
|
250
|
+
* return <SVGContainer>...</SVGContainer>
|
|
251
|
+
* }
|
|
252
|
+
*
|
|
253
|
+
* override getIndicatorPath(shape: MyContainerShape) {
|
|
254
|
+
* const path = new Path2D()
|
|
255
|
+
* path.rect(0, 0, shape.props.w, shape.props.h)
|
|
256
|
+
* return path
|
|
257
|
+
* }
|
|
258
|
+
* }
|
|
259
|
+
* ```
|
|
260
|
+
*
|
|
261
|
+
* @public
|
|
262
|
+
*/
|
|
263
|
+
export declare abstract class BaseFrameLikeShapeUtil<Shape extends TLBaseBoxShape> extends BaseBoxShapeUtil<Shape> {
|
|
264
|
+
isFrameLike(_shape: Shape): boolean;
|
|
265
|
+
providesBackgroundForChildren(): boolean;
|
|
266
|
+
canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
|
|
267
|
+
getClipPath(shape: Shape): undefined | Vec[];
|
|
268
|
+
onDragShapesIn(shape: Shape, draggingShapes: TLShape[], { initialParentIds, initialIndices }: TLDragShapesInInfo): void;
|
|
269
|
+
onDragShapesOut(shape: Shape, draggingShapes: TLShape[], info: TLDragShapesOutInfo): void;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/** @public */
|
|
273
|
+
export declare interface BatchMeasurementRequest {
|
|
274
|
+
html: string;
|
|
275
|
+
opts: TLMeasureTextOpts;
|
|
276
|
+
}
|
|
277
|
+
|
|
167
278
|
/**
|
|
168
279
|
* Options passed to {@link BindingUtil.onBeforeChange} and {@link BindingUtil.onAfterChange},
|
|
169
280
|
* describing the data associated with a binding being changed.
|
|
@@ -711,6 +822,12 @@ export declare function createDeepLinkString(deepLink: TLDeepLink): string;
|
|
|
711
822
|
*/
|
|
712
823
|
export declare function createSessionStateSnapshotSignal(store: TLStore): Signal<null | TLSessionStateSnapshot>;
|
|
713
824
|
|
|
825
|
+
/** @public */
|
|
826
|
+
export declare function createTLCurrentUser(opts?: {
|
|
827
|
+
setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
|
|
828
|
+
userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
|
|
829
|
+
}): TLCurrentUser;
|
|
830
|
+
|
|
714
831
|
/**
|
|
715
832
|
* A helper for creating a TLStore schema from either an object with shapeUtils, bindingUtils, and
|
|
716
833
|
* migrations, or a schema.
|
|
@@ -728,13 +845,7 @@ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): Sto
|
|
|
728
845
|
*
|
|
729
846
|
* @public
|
|
730
847
|
*/
|
|
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;
|
|
848
|
+
export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, themes, ...rest }?: TLStoreOptions): TLStore;
|
|
738
849
|
|
|
739
850
|
/** @public */
|
|
740
851
|
export declare class CubicBezier2d extends Polyline2d {
|
|
@@ -809,54 +920,31 @@ export declare interface DebugFlagDefaults<T> {
|
|
|
809
920
|
|
|
810
921
|
/* Excluded from this release type: DEFAULT_CAMERA_OPTIONS */
|
|
811
922
|
|
|
812
|
-
/**
|
|
813
|
-
|
|
923
|
+
/**
|
|
924
|
+
* The default theme definition containing color palettes for both light and dark modes.
|
|
925
|
+
*
|
|
926
|
+
* @public
|
|
927
|
+
*/
|
|
928
|
+
export declare const DEFAULT_THEME: TLTheme;
|
|
814
929
|
|
|
815
930
|
/** @public @react */
|
|
816
|
-
export declare
|
|
931
|
+
export declare function DefaultBackground(): JSX.Element;
|
|
817
932
|
|
|
818
933
|
/** @public @react */
|
|
819
934
|
export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
|
|
820
935
|
|
|
821
|
-
/** @public @react */
|
|
822
|
-
export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
|
|
823
|
-
|
|
824
|
-
/** @public @react */
|
|
825
|
-
export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
|
|
826
|
-
|
|
827
936
|
/** @public @react */
|
|
828
937
|
export declare const DefaultErrorFallback: TLErrorFallbackComponent;
|
|
829
938
|
|
|
830
939
|
/** @public @react */
|
|
831
940
|
export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element;
|
|
832
941
|
|
|
833
|
-
/** @public @react */
|
|
834
|
-
export declare function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX.Element;
|
|
835
|
-
|
|
836
|
-
/** @public @react */
|
|
837
|
-
export declare const DefaultHandles: ({ children }: TLHandlesProps) => JSX.Element;
|
|
838
|
-
|
|
839
|
-
/** @public @react */
|
|
840
|
-
export declare function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null;
|
|
841
|
-
|
|
842
942
|
/** @public @react */
|
|
843
943
|
export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element;
|
|
844
944
|
|
|
845
|
-
/** @public @react */
|
|
846
|
-
export declare function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX.Element;
|
|
847
|
-
|
|
848
|
-
/** @public @react */
|
|
849
|
-
export declare const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
|
|
850
|
-
|
|
851
|
-
/** @public @react */
|
|
852
|
-
export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
|
|
853
|
-
|
|
854
945
|
/** @public @react */
|
|
855
946
|
export declare const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
|
|
856
947
|
|
|
857
|
-
/** @public @react */
|
|
858
|
-
export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX.Element;
|
|
859
|
-
|
|
860
948
|
/** @public @react */
|
|
861
949
|
export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX.Element;
|
|
862
950
|
|
|
@@ -923,7 +1011,11 @@ export declare const defaultTldrawOptions: {
|
|
|
923
1011
|
readonly maxShapesPerPage: 4000;
|
|
924
1012
|
readonly multiClickDurationMs: 200;
|
|
925
1013
|
readonly nonce: undefined;
|
|
1014
|
+
readonly onBeforeCopyToClipboard: undefined;
|
|
1015
|
+
readonly onBeforePasteFromClipboard: undefined;
|
|
1016
|
+
readonly onClipboardPasteRaw: undefined;
|
|
926
1017
|
readonly quickZoomPreservesScreenBounds: true;
|
|
1018
|
+
readonly rightClickPanning: true;
|
|
927
1019
|
readonly snapThreshold: 8;
|
|
928
1020
|
readonly spacebarPanning: true;
|
|
929
1021
|
readonly temporaryAssetPreviewLifetimeMs: 180000;
|
|
@@ -953,6 +1045,9 @@ export declare const defaultUserPreferences: Readonly<{
|
|
|
953
1045
|
name: "";
|
|
954
1046
|
}>;
|
|
955
1047
|
|
|
1048
|
+
/** @public */
|
|
1049
|
+
export declare const defaultUserStore: TLUserStore;
|
|
1050
|
+
|
|
956
1051
|
/**
|
|
957
1052
|
* Convert degrees to radians.
|
|
958
1053
|
*
|
|
@@ -1028,7 +1123,7 @@ export declare class EdgeScrollManager {
|
|
|
1028
1123
|
/** @public */
|
|
1029
1124
|
export declare class Editor extends EventEmitter<TLEventMap> {
|
|
1030
1125
|
readonly id: string;
|
|
1031
|
-
constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus,
|
|
1126
|
+
constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, overlayUtils: overlayUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
|
|
1032
1127
|
private readonly _getShapeVisibility?;
|
|
1033
1128
|
private getIsShapeHiddenCache;
|
|
1034
1129
|
isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
|
|
@@ -1091,7 +1186,13 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1091
1186
|
* @public
|
|
1092
1187
|
*/
|
|
1093
1188
|
readonly snaps: SnapManager;
|
|
1094
|
-
|
|
1189
|
+
/**
|
|
1190
|
+
* A manager for performance measurement hooks.
|
|
1191
|
+
*
|
|
1192
|
+
* @public
|
|
1193
|
+
*/
|
|
1194
|
+
readonly performance: PerformanceManager;
|
|
1195
|
+
/* Excluded from this release type: _spatialIndex */
|
|
1095
1196
|
/**
|
|
1096
1197
|
* A manager for the any asynchronous events and making sure they're
|
|
1097
1198
|
* cleaned up upon disposal.
|
|
@@ -1104,12 +1205,14 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1104
1205
|
setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
|
|
1105
1206
|
setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
|
|
1106
1207
|
};
|
|
1208
|
+
/* Excluded from this release type: _collaboratorVisibilityClock */
|
|
1107
1209
|
/**
|
|
1108
1210
|
* A manager for the user and their preferences.
|
|
1109
1211
|
*
|
|
1110
1212
|
* @public
|
|
1111
1213
|
*/
|
|
1112
1214
|
readonly user: UserPreferencesManager;
|
|
1215
|
+
/* Excluded from this release type: _themeManager */
|
|
1113
1216
|
/**
|
|
1114
1217
|
* A helper for measuring text.
|
|
1115
1218
|
*
|
|
@@ -1128,6 +1231,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1128
1231
|
* @public
|
|
1129
1232
|
*/
|
|
1130
1233
|
readonly scribbles: ScribbleManager;
|
|
1234
|
+
/**
|
|
1235
|
+
* A manager for canvas overlay UI elements (selection handles, shape handles, etc.).
|
|
1236
|
+
*
|
|
1237
|
+
* @public
|
|
1238
|
+
*/
|
|
1239
|
+
readonly overlays: OverlayManager;
|
|
1131
1240
|
/**
|
|
1132
1241
|
* A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details.
|
|
1133
1242
|
*
|
|
@@ -1160,6 +1269,83 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1160
1269
|
* @public
|
|
1161
1270
|
*/
|
|
1162
1271
|
dispose(): void;
|
|
1272
|
+
/**
|
|
1273
|
+
* Get the current color mode (`'light'` or `'dark'`), based on the user's dark mode preference.
|
|
1274
|
+
*
|
|
1275
|
+
* @public
|
|
1276
|
+
*/
|
|
1277
|
+
getColorMode(): 'dark' | 'light';
|
|
1278
|
+
/**
|
|
1279
|
+
* Set the color mode. Note that this is a convenience method that passes the mode to
|
|
1280
|
+
* `user.updateUserPreferences`, which is the source of truth for the user's color mode preference.
|
|
1281
|
+
*
|
|
1282
|
+
* @public
|
|
1283
|
+
*/
|
|
1284
|
+
setColorMode(mode: 'dark' | 'light'): this;
|
|
1285
|
+
/**
|
|
1286
|
+
* Get the id of the current theme.
|
|
1287
|
+
*
|
|
1288
|
+
* @public
|
|
1289
|
+
*/
|
|
1290
|
+
getCurrentThemeId(): TLThemeId;
|
|
1291
|
+
/**
|
|
1292
|
+
* Get the current theme definition.
|
|
1293
|
+
*
|
|
1294
|
+
* @public
|
|
1295
|
+
*/
|
|
1296
|
+
getCurrentTheme(): TLTheme;
|
|
1297
|
+
/**
|
|
1298
|
+
* Set the current theme by id.
|
|
1299
|
+
*
|
|
1300
|
+
* @public
|
|
1301
|
+
*/
|
|
1302
|
+
setCurrentTheme(id: TLThemeId): this;
|
|
1303
|
+
/**
|
|
1304
|
+
* Get all registered theme definitions.
|
|
1305
|
+
*
|
|
1306
|
+
* @public
|
|
1307
|
+
*/
|
|
1308
|
+
getThemes(): TLThemes;
|
|
1309
|
+
/**
|
|
1310
|
+
* Get a single theme definition by id.
|
|
1311
|
+
*
|
|
1312
|
+
* @public
|
|
1313
|
+
*/
|
|
1314
|
+
getTheme(id: TLThemeId): TLTheme | undefined;
|
|
1315
|
+
/**
|
|
1316
|
+
* Replace all theme definitions, or update them via a callback that receives a deep copy.
|
|
1317
|
+
* The `'default'` theme must always be present in the result.
|
|
1318
|
+
*
|
|
1319
|
+
* @example
|
|
1320
|
+
* ```ts
|
|
1321
|
+
* // Replace all themes
|
|
1322
|
+
* editor.updateThemes({ default: myDefaultTheme, ocean: myOceanTheme })
|
|
1323
|
+
*
|
|
1324
|
+
* // Update via callback
|
|
1325
|
+
* editor.updateThemes((themes) => {
|
|
1326
|
+
* delete themes.ocean
|
|
1327
|
+
* return themes
|
|
1328
|
+
* })
|
|
1329
|
+
* ```
|
|
1330
|
+
*
|
|
1331
|
+
* @public
|
|
1332
|
+
*/
|
|
1333
|
+
updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): this;
|
|
1334
|
+
/**
|
|
1335
|
+
* Register or update a single theme definition. The theme is keyed by its `id` property.
|
|
1336
|
+
*
|
|
1337
|
+
* @example
|
|
1338
|
+
* ```ts
|
|
1339
|
+
* // Override a property on the default theme
|
|
1340
|
+
* editor.updateTheme({ ...editor.getTheme('default')!, fontSize: 24 })
|
|
1341
|
+
*
|
|
1342
|
+
* // Register a new theme
|
|
1343
|
+
* editor.updateTheme({ id: 'ocean', ...myOceanTheme })
|
|
1344
|
+
* ```
|
|
1345
|
+
*
|
|
1346
|
+
* @public
|
|
1347
|
+
*/
|
|
1348
|
+
updateTheme(theme: TLTheme): this;
|
|
1163
1349
|
/**
|
|
1164
1350
|
* A map of shape utility classes (TLShapeUtils) by shape type.
|
|
1165
1351
|
*
|
|
@@ -1168,6 +1354,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1168
1354
|
shapeUtils: {
|
|
1169
1355
|
readonly [K in string]?: ShapeUtil<TLShape>;
|
|
1170
1356
|
};
|
|
1357
|
+
/* Excluded from this release type: _shapeUtilsByAssetType */
|
|
1171
1358
|
styleProps: {
|
|
1172
1359
|
[key: string]: Map<StyleProp<any>, string>;
|
|
1173
1360
|
};
|
|
@@ -1199,6 +1386,15 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1199
1386
|
hasShapeUtil(shape: TLShape | TLShapePartial<TLShape>): boolean;
|
|
1200
1387
|
hasShapeUtil(type: TLShape['type']): boolean;
|
|
1201
1388
|
hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
|
|
1389
|
+
/**
|
|
1390
|
+
* Get the shape util that handles the given asset type.
|
|
1391
|
+
* Returns the shape util whose {@link ShapeUtil.handledAssetTypes} includes
|
|
1392
|
+
* the given asset type, or undefined if none matches.
|
|
1393
|
+
*
|
|
1394
|
+
* @param assetType - The asset type string.
|
|
1395
|
+
* @public
|
|
1396
|
+
*/
|
|
1397
|
+
getShapeUtilForAssetType(assetType: string): ShapeUtil | undefined;
|
|
1202
1398
|
/**
|
|
1203
1399
|
* A map of shape utility classes (TLShapeUtils) by shape type.
|
|
1204
1400
|
*
|
|
@@ -1229,6 +1425,40 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1229
1425
|
type: S['type'];
|
|
1230
1426
|
} | S): BindingUtil<S>;
|
|
1231
1427
|
getBindingUtil<T extends BindingUtil>(type: T extends BindingUtil<infer R> ? R['type'] : string): T;
|
|
1428
|
+
/**
|
|
1429
|
+
* A map of asset utility classes by asset type.
|
|
1430
|
+
*
|
|
1431
|
+
* @public
|
|
1432
|
+
*/
|
|
1433
|
+
assetUtils: {
|
|
1434
|
+
readonly [K in string]?: AssetUtil<TLAsset>;
|
|
1435
|
+
};
|
|
1436
|
+
/**
|
|
1437
|
+
* Get an asset util from an asset or asset type.
|
|
1438
|
+
*
|
|
1439
|
+
* @param arg - An asset, asset type string, or object with type.
|
|
1440
|
+
*
|
|
1441
|
+
* @public
|
|
1442
|
+
*/
|
|
1443
|
+
getAssetUtil<S extends TLAsset>(asset: {
|
|
1444
|
+
type: S['type'];
|
|
1445
|
+
} | S): AssetUtil<S>;
|
|
1446
|
+
getAssetUtil(type: string): AssetUtil;
|
|
1447
|
+
/**
|
|
1448
|
+
* Returns true if the editor has an asset util for the given asset type.
|
|
1449
|
+
*
|
|
1450
|
+
* @public
|
|
1451
|
+
*/
|
|
1452
|
+
hasAssetUtil(arg: {
|
|
1453
|
+
type: string;
|
|
1454
|
+
} | string): boolean;
|
|
1455
|
+
/**
|
|
1456
|
+
* Get the asset util that accepts the given MIME type.
|
|
1457
|
+
* Returns null if no registered asset util accepts the MIME type.
|
|
1458
|
+
*
|
|
1459
|
+
* @public
|
|
1460
|
+
*/
|
|
1461
|
+
getAssetUtilForMimeType(mimeType: string): AssetUtil | null;
|
|
1232
1462
|
/**
|
|
1233
1463
|
* A manager for the editor's history.
|
|
1234
1464
|
*
|
|
@@ -2259,6 +2489,49 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
2259
2489
|
* @public
|
|
2260
2490
|
*/
|
|
2261
2491
|
getCollaboratorsOnCurrentPage(): TLInstancePresence[];
|
|
2492
|
+
/**
|
|
2493
|
+
* Returns a list of presence records for peer collaborators who should currently be
|
|
2494
|
+
* shown in the UI. Filters {@link Editor.getCollaborators} by activity state
|
|
2495
|
+
* (active / idle / inactive) and visibility rules such as following and highlighted
|
|
2496
|
+
* users. Re-evaluates on the collaborator visibility clock, so callers don't need to
|
|
2497
|
+
* drive their own activity timer.
|
|
2498
|
+
*
|
|
2499
|
+
* @public
|
|
2500
|
+
*/
|
|
2501
|
+
getVisibleCollaborators(): TLInstancePresence[];
|
|
2502
|
+
/**
|
|
2503
|
+
* Returns a list of presence records for peer collaborators who should currently be
|
|
2504
|
+
* shown in the UI, filtered to those on the current page.
|
|
2505
|
+
*
|
|
2506
|
+
* @public
|
|
2507
|
+
*/
|
|
2508
|
+
getVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[];
|
|
2509
|
+
/**
|
|
2510
|
+
* Get the current user's ID for attribution purposes.
|
|
2511
|
+
* Also ensures a `user:` record exists in the store for the current user.
|
|
2512
|
+
* Returns `null` when the user store has no current user.
|
|
2513
|
+
*
|
|
2514
|
+
* @public
|
|
2515
|
+
*/
|
|
2516
|
+
getAttributionUserId(): null | string;
|
|
2517
|
+
/* Excluded from this release type: _ensureUserRecord */
|
|
2518
|
+
/**
|
|
2519
|
+
* Resolve a display name for a user ID. Asks the
|
|
2520
|
+
* {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
|
|
2521
|
+
* falling back to the `user:` record in the store.
|
|
2522
|
+
*
|
|
2523
|
+
* @public
|
|
2524
|
+
*/
|
|
2525
|
+
getAttributionDisplayName(userId: null | string): null | string;
|
|
2526
|
+
/**
|
|
2527
|
+
* Resolve a user record by ID. Asks the
|
|
2528
|
+
* {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
|
|
2529
|
+
* falling back to the `user:` record in the store.
|
|
2530
|
+
*
|
|
2531
|
+
* @public
|
|
2532
|
+
*/
|
|
2533
|
+
getAttributionUser(userId: null | string): null | TLUser;
|
|
2534
|
+
/* Excluded from this release type: _getReferencedUserIds */
|
|
2262
2535
|
private _isLockedOnFollowingUser;
|
|
2263
2536
|
/**
|
|
2264
2537
|
* Start viewport-following a user.
|
|
@@ -2893,6 +3166,20 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
2893
3166
|
type: T['type'];
|
|
2894
3167
|
}>;
|
|
2895
3168
|
isShapeOfType<T extends TLShape = TLShape>(shapeId: TLShapeId, type: T['type']): boolean;
|
|
3169
|
+
/**
|
|
3170
|
+
* Get whether a shape behaves like a frame — a container that has child
|
|
3171
|
+
* shapes, requires full-brush selection, blocks erasure from inside, etc.
|
|
3172
|
+
*
|
|
3173
|
+
* @example
|
|
3174
|
+
* ```ts
|
|
3175
|
+
* const isFrameLike = editor.isShapeFrameLike(someShape)
|
|
3176
|
+
* ```
|
|
3177
|
+
*
|
|
3178
|
+
* @param shape - The shape (or shape id) to test.
|
|
3179
|
+
*
|
|
3180
|
+
* @public
|
|
3181
|
+
*/
|
|
3182
|
+
isShapeFrameLike(shape: TLShape | TLShapeId): boolean;
|
|
2896
3183
|
/**
|
|
2897
3184
|
* Get a shape by its id.
|
|
2898
3185
|
*
|
|
@@ -4353,6 +4640,35 @@ export declare interface Geometry2dOptions extends TransformedGeometry2dOptions
|
|
|
4353
4640
|
*/
|
|
4354
4641
|
export declare function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
|
|
4355
4642
|
|
|
4643
|
+
/**
|
|
4644
|
+
* Resolves a color style value to its actual CSS color string for a given theme and variant.
|
|
4645
|
+
* If the color is not a default theme color, returns the color value as-is.
|
|
4646
|
+
*
|
|
4647
|
+
* @param colors - The color palette for the current color mode (e.g. `theme.colors[colorMode]`)
|
|
4648
|
+
* @param color - The color style value to resolve
|
|
4649
|
+
* @param variant - Which variant of the color to return (solid, fill, pattern, etc.)
|
|
4650
|
+
* @returns The CSS color string for the specified color and variant
|
|
4651
|
+
*
|
|
4652
|
+
* @example
|
|
4653
|
+
* ```ts
|
|
4654
|
+
* import { getColorValue } from 'tldraw'
|
|
4655
|
+
*
|
|
4656
|
+
* const colors = editor.getCurrentTheme().colors[editor.getColorMode()]
|
|
4657
|
+
*
|
|
4658
|
+
* // Get the solid variant of red
|
|
4659
|
+
* const redSolid = getColorValue(colors, 'red', 'solid') // '#e03131'
|
|
4660
|
+
*
|
|
4661
|
+
* // Get the fill variant of blue
|
|
4662
|
+
* const blueFill = getColorValue(colors, 'blue', 'fill') // '#4465e9'
|
|
4663
|
+
*
|
|
4664
|
+
* // Custom color passes through unchanged
|
|
4665
|
+
* const customColor = getColorValue(colors, '#ff0000', 'solid') // '#ff0000'
|
|
4666
|
+
* ```
|
|
4667
|
+
*
|
|
4668
|
+
* @public
|
|
4669
|
+
*/
|
|
4670
|
+
export declare function getColorValue(colors: TLThemeColors, color: string | TLDefaultColorStyle, variant: keyof TLDefaultColor): string;
|
|
4671
|
+
|
|
4356
4672
|
/** @public */
|
|
4357
4673
|
export declare function getCursor(cursor: TLCursorType, rotation?: number, color?: string): string;
|
|
4358
4674
|
|
|
@@ -4523,14 +4839,14 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
|
|
|
4523
4839
|
static type: "group";
|
|
4524
4840
|
static props: RecordProps<TLGroupShape>;
|
|
4525
4841
|
static migrations: TLPropsMigrations;
|
|
4526
|
-
hideSelectionBoundsFg(): boolean;
|
|
4842
|
+
hideSelectionBoundsFg(shape: TLGroupShape): boolean;
|
|
4527
4843
|
canBind(): boolean;
|
|
4528
4844
|
canResize(): boolean;
|
|
4529
4845
|
canResizeChildren(): boolean;
|
|
4530
4846
|
getDefaultProps(): TLGroupShape['props'];
|
|
4531
4847
|
getGeometry(shape: TLGroupShape): Geometry2d;
|
|
4532
4848
|
component(shape: TLGroupShape): JSX.Element | null;
|
|
4533
|
-
|
|
4849
|
+
getIndicatorPath(shape: TLGroupShape): Path2D;
|
|
4534
4850
|
onChildrenChange(group: TLGroupShape): void;
|
|
4535
4851
|
}
|
|
4536
4852
|
|
|
@@ -4809,6 +5125,12 @@ export declare class InputsManager {
|
|
|
4809
5125
|
get isPointing(): boolean;
|
|
4810
5126
|
set isPointing(isPointing: boolean);
|
|
4811
5127
|
/* Excluded from this release type: setIsPointing */
|
|
5128
|
+
private _isRightPointing;
|
|
5129
|
+
/**
|
|
5130
|
+
* Whether the user is right-click pointing (before drag threshold).
|
|
5131
|
+
*/
|
|
5132
|
+
getIsRightPointing(): boolean;
|
|
5133
|
+
/* Excluded from this release type: setIsRightPointing */
|
|
4812
5134
|
private _isPinching;
|
|
4813
5135
|
/**
|
|
4814
5136
|
* Whether the user is pinching.
|
|
@@ -5152,29 +5474,290 @@ export declare function openWindow(url: string, target?: string, allowReferrer?:
|
|
|
5152
5474
|
/** @public */
|
|
5153
5475
|
export declare type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
|
5154
5476
|
|
|
5155
|
-
/**
|
|
5156
|
-
* Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
|
|
5157
|
-
*
|
|
5158
|
-
* @param deepLinkString - the deep link string
|
|
5159
|
-
* @returns a deep link descriptor
|
|
5160
|
-
*
|
|
5161
|
-
* @public
|
|
5162
|
-
*/
|
|
5163
|
-
export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
|
|
5164
|
-
|
|
5165
5477
|
/** @public */
|
|
5166
|
-
export declare
|
|
5478
|
+
export declare class OverlayManager {
|
|
5479
|
+
readonly editor: Editor;
|
|
5480
|
+
constructor(editor: Editor);
|
|
5481
|
+
/* Excluded from this release type: _overlayUtils */
|
|
5482
|
+
/* Excluded from this release type: registerUtil */
|
|
5483
|
+
/**
|
|
5484
|
+
* Get an overlay util by type string, overlay instance, or by passing
|
|
5485
|
+
* a util class as a generic parameter for type-safe lookup.
|
|
5486
|
+
*
|
|
5487
|
+
* @example
|
|
5488
|
+
* ```ts
|
|
5489
|
+
* const util = editor.overlays.getOverlayUtil('brush')
|
|
5490
|
+
* const util = editor.overlays.getOverlayUtil<BrushOverlayUtil>('brush')
|
|
5491
|
+
* const util = editor.overlays.getOverlayUtil(myOverlay)
|
|
5492
|
+
* ```
|
|
5493
|
+
*
|
|
5494
|
+
* @public
|
|
5495
|
+
*/
|
|
5496
|
+
getOverlayUtil<T extends OverlayUtil>(type: T extends OverlayUtil<infer O> ? O['type'] : string): T;
|
|
5497
|
+
getOverlayUtil<O extends TLOverlay>(overlay: O): OverlayUtil<O>;
|
|
5498
|
+
/**
|
|
5499
|
+
* Returns all registered overlay utils in paint order (ascending zIndex).
|
|
5500
|
+
* Utils with the same zIndex preserve their registration order.
|
|
5501
|
+
*
|
|
5502
|
+
* @public
|
|
5503
|
+
*/
|
|
5504
|
+
getOverlayUtilsInZOrder(): OverlayUtil[];
|
|
5505
|
+
/**
|
|
5506
|
+
* Reactive list of active overlay utils paired with the overlays they
|
|
5507
|
+
* produced for the current editor state, in paint order (ascending
|
|
5508
|
+
* zIndex). Both the hit-test and render paths read from this single
|
|
5509
|
+
* cached scan instead of each re-deriving the active set. Active utils
|
|
5510
|
+
* are included even when their `getOverlays()` returns an empty array,
|
|
5511
|
+
* since `render()` may still draw non-interactive UI (e.g. the selection
|
|
5512
|
+
* bounding box during brushing).
|
|
5513
|
+
*
|
|
5514
|
+
* @public
|
|
5515
|
+
*/
|
|
5516
|
+
getActiveOverlayEntries(): TLOverlayEntry[];
|
|
5517
|
+
/**
|
|
5518
|
+
* Reactively computed list of all currently active overlays, in paint order.
|
|
5519
|
+
* @public
|
|
5520
|
+
*/
|
|
5521
|
+
getCurrentOverlays(): TLOverlay[];
|
|
5522
|
+
private _geometryCache;
|
|
5523
|
+
/**
|
|
5524
|
+
* Get hit-test geometry for an overlay, cached by overlay identity. Lets
|
|
5525
|
+
* hit-testing on a pointermove storm skip the per-overlay geometry
|
|
5526
|
+
* allocation that {@link OverlayUtil.getGeometry} would otherwise do on
|
|
5527
|
+
* every call.
|
|
5528
|
+
*
|
|
5529
|
+
* @public
|
|
5530
|
+
*/
|
|
5531
|
+
getOverlayGeometry(overlay: TLOverlay): Geometry2d | null;
|
|
5532
|
+
/**
|
|
5533
|
+
* The currently hovered overlay id.
|
|
5534
|
+
* @public
|
|
5535
|
+
*/
|
|
5536
|
+
private _hoveredOverlayId;
|
|
5537
|
+
getHoveredOverlayId(): null | string;
|
|
5538
|
+
getHoveredOverlay(): null | TLOverlay;
|
|
5539
|
+
setHoveredOverlay(id: null | string): void;
|
|
5540
|
+
/**
|
|
5541
|
+
* Hit test all active overlays at a given page point.
|
|
5542
|
+
* Returns the topmost overlay whose geometry contains the point, or null.
|
|
5543
|
+
* Utils are walked from highest zIndex to lowest so the overlay painted on
|
|
5544
|
+
* top also wins the hit test. Within a util, overlays are walked in
|
|
5545
|
+
* array order: the first overlay whose geometry contains the point wins,
|
|
5546
|
+
* so utils should place highest-priority overlays first in `getOverlays`.
|
|
5547
|
+
* Interactive overlays (those with geometry) are checked; non-interactive are skipped.
|
|
5548
|
+
*
|
|
5549
|
+
* @param point - Point in page coordinates
|
|
5550
|
+
* @param margin - Hit test margin
|
|
5551
|
+
* @public
|
|
5552
|
+
*/
|
|
5553
|
+
getOverlayAtPoint(point: VecLike, margin?: number): null | TLOverlay;
|
|
5554
|
+
}
|
|
5167
5555
|
|
|
5168
5556
|
/**
|
|
5169
|
-
*
|
|
5557
|
+
* Base class for overlay utilities. Overlays are ephemeral UI elements rendered
|
|
5558
|
+
* on top of the canvas (selection handles, rotation corners, shape handles, etc.).
|
|
5559
|
+
*
|
|
5560
|
+
* Each OverlayUtil defines a type of overlay and knows how to:
|
|
5561
|
+
* - Determine when its overlays should be active (predicate)
|
|
5562
|
+
* - Produce overlay instances from current editor state
|
|
5563
|
+
* - Provide hit-test geometry for interactive overlays
|
|
5564
|
+
* - Provide cursor style on hover
|
|
5565
|
+
* - Render into a canvas 2D context
|
|
5170
5566
|
*
|
|
5171
|
-
* @param rx - The ellipse's x radius.
|
|
5172
|
-
* @param ry - The ellipse's y radius.
|
|
5173
5567
|
* @public
|
|
5174
5568
|
*/
|
|
5175
|
-
export declare
|
|
5176
|
-
|
|
5177
|
-
|
|
5569
|
+
export declare abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
|
|
5570
|
+
editor: Editor;
|
|
5571
|
+
constructor(editor: Editor);
|
|
5572
|
+
static type: string;
|
|
5573
|
+
/**
|
|
5574
|
+
* Options for this overlay util. Override this to provide customization options.
|
|
5575
|
+
* Use {@link OverlayUtil.configure} to customize existing overlay utils.
|
|
5576
|
+
*
|
|
5577
|
+
* `zIndex` controls paint and hit-test order across utils — higher numbers
|
|
5578
|
+
* paint on top and are hit-tested first. Ties resolve by registration order.
|
|
5579
|
+
* Defaults to `0`; built-in utils use larger integers (100, 200, …) with
|
|
5580
|
+
* gaps so custom utils can slot between.
|
|
5581
|
+
*
|
|
5582
|
+
* @public
|
|
5583
|
+
*/
|
|
5584
|
+
options: {
|
|
5585
|
+
zIndex?: number;
|
|
5586
|
+
};
|
|
5587
|
+
/**
|
|
5588
|
+
* Create a new overlay util class with the given options merged in.
|
|
5589
|
+
*
|
|
5590
|
+
* @example
|
|
5591
|
+
* ```ts
|
|
5592
|
+
* const MyBrush = BrushOverlayUtil.configure({ fill: 'rgba(0,0,255,0.1)' })
|
|
5593
|
+
* ```
|
|
5594
|
+
*
|
|
5595
|
+
* @public
|
|
5596
|
+
*/
|
|
5597
|
+
static configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
|
|
5598
|
+
options: infer Options;
|
|
5599
|
+
} ? Partial<Options> : never): T;
|
|
5600
|
+
/**
|
|
5601
|
+
* Whether this overlay util's overlays should currently be active.
|
|
5602
|
+
* Checked reactively to determine which overlays exist at any given time.
|
|
5603
|
+
*/
|
|
5604
|
+
abstract isActive(): boolean;
|
|
5605
|
+
/**
|
|
5606
|
+
* Returns the overlay instances that currently exist.
|
|
5607
|
+
* Called only when `isActive()` returns true.
|
|
5608
|
+
*/
|
|
5609
|
+
abstract getOverlays(): T[];
|
|
5610
|
+
/**
|
|
5611
|
+
* Returns hit-test geometry for an overlay instance, in page coordinates.
|
|
5612
|
+
* Return null for non-interactive overlays (e.g. snap indicators, scribbles).
|
|
5613
|
+
*/
|
|
5614
|
+
getGeometry(_overlay: T): Geometry2d | null;
|
|
5615
|
+
/**
|
|
5616
|
+
* Returns the cursor type to show when hovering this overlay.
|
|
5617
|
+
*/
|
|
5618
|
+
getCursor(_overlay: T): TLCursorType | undefined;
|
|
5619
|
+
/**
|
|
5620
|
+
* Called when the user points down on this overlay, before the default
|
|
5621
|
+
* routing runs. Acts as an interrupt: define it to take over the event.
|
|
5622
|
+
*
|
|
5623
|
+
* Return `false` to continue with the default behavior (e.g. the
|
|
5624
|
+
* built-in rotate/resize handle transitions or shape-handle dispatch).
|
|
5625
|
+
* Return `true` — or nothing at all — to skip the default. In other
|
|
5626
|
+
* words, once you override this method you own the event unless you
|
|
5627
|
+
* explicitly opt back in by returning `false`.
|
|
5628
|
+
*/
|
|
5629
|
+
onPointerDown?(overlay: T, info: TLPointerEventInfo): boolean | void;
|
|
5630
|
+
/**
|
|
5631
|
+
* Render all active overlays into the canvas context.
|
|
5632
|
+
* The context is already transformed to page space (camera transform applied).
|
|
5633
|
+
* Called reactively when overlays or editor state changes.
|
|
5634
|
+
*/
|
|
5635
|
+
render(_ctx: CanvasRenderingContext2D, _overlays: T[]): void;
|
|
5636
|
+
/**
|
|
5637
|
+
* Optional: render all active overlays into the minimap canvas.
|
|
5638
|
+
* The context is already transformed to page space (minimap camera applied),
|
|
5639
|
+
* so overlays can use the same page-space coordinates as in {@link OverlayUtil.render}.
|
|
5640
|
+
*
|
|
5641
|
+
* `zoom` is the minimap's screen-pixels-per-page-unit, analogous to
|
|
5642
|
+
* `editor.getCamera().z`; use `1 / zoom` for one-minimap-pixel line widths.
|
|
5643
|
+
*
|
|
5644
|
+
* Most overlays should leave this blank — only overlays that are meaningful
|
|
5645
|
+
* at minimap scale (e.g. brushes, collaborator cursors) should opt in.
|
|
5646
|
+
*/
|
|
5647
|
+
renderMinimap(_ctx: CanvasRenderingContext2D, _overlays: T[], _zoom: number): void;
|
|
5648
|
+
}
|
|
5649
|
+
|
|
5650
|
+
/**
|
|
5651
|
+
* Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
|
|
5652
|
+
*
|
|
5653
|
+
* @param deepLinkString - the deep link string
|
|
5654
|
+
* @returns a deep link descriptor
|
|
5655
|
+
*
|
|
5656
|
+
* @public
|
|
5657
|
+
*/
|
|
5658
|
+
export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
|
|
5659
|
+
|
|
5660
|
+
/** @public */
|
|
5661
|
+
export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
|
|
5662
|
+
|
|
5663
|
+
/**
|
|
5664
|
+
* Optional adapter that pipes PerformanceManager events into browser
|
|
5665
|
+
* `performance.mark()` / `performance.measure()` for DevTools integration.
|
|
5666
|
+
*
|
|
5667
|
+
* Tree-shakeable — only included if imported.
|
|
5668
|
+
*
|
|
5669
|
+
* @example
|
|
5670
|
+
* ```ts
|
|
5671
|
+
* const adapter = new PerformanceApiAdapter(editor.performance)
|
|
5672
|
+
* // ... later
|
|
5673
|
+
* adapter.dispose()
|
|
5674
|
+
* ```
|
|
5675
|
+
*
|
|
5676
|
+
* @public
|
|
5677
|
+
*/
|
|
5678
|
+
export declare class PerformanceApiAdapter {
|
|
5679
|
+
private cleanups;
|
|
5680
|
+
constructor(perfManager: PerformanceManager);
|
|
5681
|
+
/** Remove all listeners and stop piping events. @public */
|
|
5682
|
+
dispose(): void;
|
|
5683
|
+
}
|
|
5684
|
+
|
|
5685
|
+
/**
|
|
5686
|
+
* Manages performance event subscriptions for the editor. Available as `editor.performance`.
|
|
5687
|
+
*
|
|
5688
|
+
* Listeners are lazy — internal editor hooks (frame, shape events) are only attached while
|
|
5689
|
+
* at least one subscriber exists, so there is zero overhead when unused.
|
|
5690
|
+
*
|
|
5691
|
+
* @example
|
|
5692
|
+
* ```ts
|
|
5693
|
+
* const unsub = editor.performance.on('interaction-end', (event) => {
|
|
5694
|
+
* console.log(`${event.name}: ${event.fps.toFixed(1)} fps, p95=${event.p95FrameTime.toFixed(1)}ms`)
|
|
5695
|
+
* })
|
|
5696
|
+
* ```
|
|
5697
|
+
*
|
|
5698
|
+
* @public
|
|
5699
|
+
*/
|
|
5700
|
+
export declare class PerformanceManager {
|
|
5701
|
+
/* Excluded from this release type: emitter */
|
|
5702
|
+
private editor;
|
|
5703
|
+
private activeInteraction;
|
|
5704
|
+
private activeCamera;
|
|
5705
|
+
private frameCleanup;
|
|
5706
|
+
private shapeCreatedCleanup;
|
|
5707
|
+
private shapeEditedCleanup;
|
|
5708
|
+
private shapeDeletedCleanup;
|
|
5709
|
+
private loafObserver;
|
|
5710
|
+
constructor(editor: Editor);
|
|
5711
|
+
/**
|
|
5712
|
+
* Subscribe to a performance event. Returns an unsubscribe function.
|
|
5713
|
+
*
|
|
5714
|
+
* @example
|
|
5715
|
+
* ```ts
|
|
5716
|
+
* const unsub = editor.performance.on('interaction-end', (event) => {
|
|
5717
|
+
* sendToAnalytics({ name: event.name, fps: event.fps, p95: event.p95FrameTime })
|
|
5718
|
+
* })
|
|
5719
|
+
* // later: unsub()
|
|
5720
|
+
* ```
|
|
5721
|
+
*
|
|
5722
|
+
* @public
|
|
5723
|
+
*/
|
|
5724
|
+
on<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
|
|
5725
|
+
/**
|
|
5726
|
+
* Subscribe to a performance event once. The listener is removed after the first invocation.
|
|
5727
|
+
* Returns an unsubscribe function for early removal.
|
|
5728
|
+
*
|
|
5729
|
+
* @public
|
|
5730
|
+
*/
|
|
5731
|
+
once<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
|
|
5732
|
+
/* Excluded from this release type: dispose */
|
|
5733
|
+
/* Excluded from this release type: _notifyInteractionStart */
|
|
5734
|
+
/* Excluded from this release type: _notifyInteractionEnd */
|
|
5735
|
+
/* Excluded from this release type: _notifyCameraOperation */
|
|
5736
|
+
/* Excluded from this release type: _notifyUndoRedo */
|
|
5737
|
+
private _startCameraSession;
|
|
5738
|
+
private _endCameraSession;
|
|
5739
|
+
private _onFrame;
|
|
5740
|
+
private _onShapesCreated;
|
|
5741
|
+
private _onShapesEdited;
|
|
5742
|
+
private _onShapesDeleted;
|
|
5743
|
+
private _startLoafObserver;
|
|
5744
|
+
private _stopLoafObserver;
|
|
5745
|
+
private _needsFrameListener;
|
|
5746
|
+
private _needsLoafObserver;
|
|
5747
|
+
private _maybeAttachLazyListeners;
|
|
5748
|
+
private _maybeDetachLazyListeners;
|
|
5749
|
+
}
|
|
5750
|
+
|
|
5751
|
+
/**
|
|
5752
|
+
* Find the approximate perimeter of an ellipse.
|
|
5753
|
+
*
|
|
5754
|
+
* @param rx - The ellipse's x radius.
|
|
5755
|
+
* @param ry - The ellipse's y radius.
|
|
5756
|
+
* @public
|
|
5757
|
+
*/
|
|
5758
|
+
export declare function perimeterOfEllipse(rx: number, ry: number): number;
|
|
5759
|
+
|
|
5760
|
+
/** @public */
|
|
5178
5761
|
export declare const PI: number;
|
|
5179
5762
|
|
|
5180
5763
|
/** @public */
|
|
@@ -5359,6 +5942,16 @@ export declare function resizeScaled(shape: TLBaseShape<any, {
|
|
|
5359
5942
|
y: number;
|
|
5360
5943
|
};
|
|
5361
5944
|
|
|
5945
|
+
/**
|
|
5946
|
+
* Resolve a partial set of user-provided themes into a complete `TLThemes`
|
|
5947
|
+
* record by merging with `DEFAULT_THEME`. The result is suitable for passing to
|
|
5948
|
+
* `registerColorsFromThemes`, `registerFontsFromThemes`, and the
|
|
5949
|
+
* `ThemeManager` constructor.
|
|
5950
|
+
*
|
|
5951
|
+
* @public
|
|
5952
|
+
*/
|
|
5953
|
+
export declare function resolveThemes(themes?: Partial<TLThemes>): TLThemes;
|
|
5954
|
+
|
|
5362
5955
|
/** @public */
|
|
5363
5956
|
export declare type RichTextFontVisitor = (node: TiptapNode, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void) => RichTextFontVisitorState;
|
|
5364
5957
|
|
|
@@ -5586,6 +6179,29 @@ export declare function setRuntimeOverrides(input: Partial<typeof runtime>): voi
|
|
|
5586
6179
|
/** @public */
|
|
5587
6180
|
export declare function setUserPreferences(user: TLUserPreferences): void;
|
|
5588
6181
|
|
|
6182
|
+
/**
|
|
6183
|
+
* Overlay util for shape indicators — the selection / hover / hint outlines drawn
|
|
6184
|
+
* under the selection foreground. Paints local indicators in the theme's
|
|
6185
|
+
* selection color and remote collaborator indicators in each peer's color.
|
|
6186
|
+
*
|
|
6187
|
+
* Non-interactive: contributes no hit-test geometry.
|
|
6188
|
+
*
|
|
6189
|
+
* @public
|
|
6190
|
+
*/
|
|
6191
|
+
export declare class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {
|
|
6192
|
+
static type: string;
|
|
6193
|
+
options: {
|
|
6194
|
+
hintedLineWidth: number;
|
|
6195
|
+
lineWidth: number;
|
|
6196
|
+
zIndex: number;
|
|
6197
|
+
};
|
|
6198
|
+
private _instanceFlags$;
|
|
6199
|
+
isActive(): boolean;
|
|
6200
|
+
getOverlays(): TLShapeIndicatorOverlay[];
|
|
6201
|
+
render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void;
|
|
6202
|
+
private _strokeIndicatorBatch;
|
|
6203
|
+
}
|
|
6204
|
+
|
|
5589
6205
|
/** @public */
|
|
5590
6206
|
export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
5591
6207
|
editor: Editor;
|
|
@@ -5640,12 +6256,32 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5640
6256
|
* @public
|
|
5641
6257
|
*/
|
|
5642
6258
|
static type: string;
|
|
6259
|
+
/**
|
|
6260
|
+
* The asset types that this shape can be created from.
|
|
6261
|
+
* When a file is dropped on the canvas, the editor finds the shape util
|
|
6262
|
+
* whose `handledAssetTypes` includes the asset's type and calls
|
|
6263
|
+
* {@link ShapeUtil.createShapeForAsset} to produce the shape.
|
|
6264
|
+
*
|
|
6265
|
+
* @public
|
|
6266
|
+
*/
|
|
6267
|
+
static handledAssetTypes?: readonly string[];
|
|
5643
6268
|
/**
|
|
5644
6269
|
* Get the default props for a shape.
|
|
5645
6270
|
*
|
|
5646
6271
|
* @public
|
|
5647
6272
|
*/
|
|
5648
6273
|
abstract getDefaultProps(): Shape['props'];
|
|
6274
|
+
/**
|
|
6275
|
+
* Create a shape partial for placing an asset on the canvas.
|
|
6276
|
+
* Only called for shapes whose constructor declares matching
|
|
6277
|
+
* {@link ShapeUtil.handledAssetTypes | `handledAssetTypes`}.
|
|
6278
|
+
*
|
|
6279
|
+
* @param asset - The asset to create a shape for.
|
|
6280
|
+
* @param position - Where to place the shape.
|
|
6281
|
+
* @returns A shape partial, or null if this shape can't be created for the asset.
|
|
6282
|
+
* @public
|
|
6283
|
+
*/
|
|
6284
|
+
createShapeForAsset?(asset: TLAsset, position: VecModel): null | TLShapePartial;
|
|
5649
6285
|
/**
|
|
5650
6286
|
* Get the shape's geometry.
|
|
5651
6287
|
*
|
|
@@ -5662,37 +6298,30 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5662
6298
|
*/
|
|
5663
6299
|
abstract component(shape: Shape): any;
|
|
5664
6300
|
/**
|
|
5665
|
-
* Get
|
|
6301
|
+
* Get a Path2D (or a richer object with clip/additional paths) for rendering the
|
|
6302
|
+
* shape's indicator on the canvas. Shapes that return `undefined` will not render
|
|
6303
|
+
* an indicator.
|
|
5666
6304
|
*
|
|
5667
|
-
*
|
|
5668
|
-
*
|
|
5669
|
-
*/
|
|
5670
|
-
abstract indicator(shape: Shape): any;
|
|
5671
|
-
/**
|
|
5672
|
-
* Whether to use the legacy React-based indicator rendering.
|
|
5673
|
-
*
|
|
5674
|
-
* Override this to return `false` if your shape implements {@link ShapeUtil.getIndicatorPath}
|
|
5675
|
-
* for canvas-based indicator rendering.
|
|
6305
|
+
* For complex indicators that need clipping (e.g., arrows with labels), return an
|
|
6306
|
+
* object with `path`, `clipPath`, and `additionalPaths` properties.
|
|
5676
6307
|
*
|
|
5677
|
-
* @
|
|
6308
|
+
* @param shape - The shape.
|
|
6309
|
+
* @returns A Path2D to stroke, or an object with clipping info, or undefined to skip.
|
|
5678
6310
|
* @public
|
|
5679
6311
|
*/
|
|
5680
|
-
|
|
6312
|
+
abstract getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
|
|
5681
6313
|
/**
|
|
5682
|
-
* Get
|
|
5683
|
-
*
|
|
5684
|
-
* When implemented, this is used instead of {@link ShapeUtil.indicator} for more
|
|
5685
|
-
* efficient canvas-based indicator rendering. Shapes that return `undefined` will
|
|
5686
|
-
* fall back to SVG-based rendering via {@link ShapeUtil.indicator}.
|
|
6314
|
+
* Get JSX describing the shape's indicator (as an SVG element).
|
|
5687
6315
|
*
|
|
5688
|
-
*
|
|
5689
|
-
*
|
|
6316
|
+
* @deprecated SVG indicators are no longer rendered. Override
|
|
6317
|
+
* {@link ShapeUtil.getIndicatorPath} instead. This stub is retained so legacy
|
|
6318
|
+
* subclasses that still call `super.indicator()` keep type-checking; new shapes
|
|
6319
|
+
* should not implement it.
|
|
5690
6320
|
*
|
|
5691
6321
|
* @param shape - The shape.
|
|
5692
|
-
* @returns A Path2D to stroke, or an object with clipping info, or undefined to use SVG fallback.
|
|
5693
6322
|
* @public
|
|
5694
6323
|
*/
|
|
5695
|
-
|
|
6324
|
+
indicator(_shape: Shape): any;
|
|
5696
6325
|
/**
|
|
5697
6326
|
* Get the font faces that should be rendered in the document in order for this shape to render
|
|
5698
6327
|
* correctly.
|
|
@@ -5726,7 +6355,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5726
6355
|
*
|
|
5727
6356
|
* @public
|
|
5728
6357
|
*/
|
|
5729
|
-
canBind(
|
|
6358
|
+
canBind(opts: TLShapeUtilCanBindOpts): boolean;
|
|
5730
6359
|
/**
|
|
5731
6360
|
* Whether the shape can be double clicked to edit.
|
|
5732
6361
|
*
|
|
@@ -5860,6 +6489,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5860
6489
|
* @public
|
|
5861
6490
|
*/
|
|
5862
6491
|
isAspectRatioLocked(shape: Shape): boolean;
|
|
6492
|
+
/**
|
|
6493
|
+
* Whether the shape behaves like a frame — a container that has child shapes,
|
|
6494
|
+
* requires full-brush selection, blocks erasure from inside, etc.
|
|
6495
|
+
*
|
|
6496
|
+
* @param shape - The shape.
|
|
6497
|
+
* @public
|
|
6498
|
+
*/
|
|
6499
|
+
isFrameLike(_shape: Shape): boolean;
|
|
5863
6500
|
/**
|
|
5864
6501
|
* By default, the bounds of an image export are the bounds of all the shapes it contains, plus
|
|
5865
6502
|
* some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the
|
|
@@ -5907,7 +6544,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5907
6544
|
* @param type - The shape type.
|
|
5908
6545
|
* @public
|
|
5909
6546
|
*/
|
|
5910
|
-
canReceiveNewChildrenOfType(shape: Shape,
|
|
6547
|
+
canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
|
|
5911
6548
|
/**
|
|
5912
6549
|
* Get the shape as an SVG object.
|
|
5913
6550
|
*
|
|
@@ -5947,6 +6584,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5947
6584
|
*/
|
|
5948
6585
|
getHandleSnapGeometry(shape: Shape): HandleSnapGeometry;
|
|
5949
6586
|
getText(shape: Shape): string | undefined;
|
|
6587
|
+
/**
|
|
6588
|
+
* Return user IDs referenced in shape-specific props.
|
|
6589
|
+
* Used when copying shapes to include referenced users on the clipboard.
|
|
6590
|
+
* Override this if your shape stores user IDs in custom props.
|
|
6591
|
+
*
|
|
6592
|
+
* @public
|
|
6593
|
+
*/
|
|
6594
|
+
getReferencedUserIds(shape: Shape): string[];
|
|
5950
6595
|
getAriaDescriptor(shape: Shape): string | undefined;
|
|
5951
6596
|
/**
|
|
5952
6597
|
* A callback called just before a shape is created. This method provides a last chance to modify
|
|
@@ -6342,6 +6987,8 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
|
|
|
6342
6987
|
static children?: () => TLStateNodeConstructor[];
|
|
6343
6988
|
static isLockable: boolean;
|
|
6344
6989
|
static useCoalescedEvents: boolean;
|
|
6990
|
+
/** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */
|
|
6991
|
+
static trackPerformance: boolean;
|
|
6345
6992
|
id: string;
|
|
6346
6993
|
type: 'branch' | 'leaf' | 'root';
|
|
6347
6994
|
shapeType?: string;
|
|
@@ -6476,6 +7123,10 @@ export declare interface SvgExportContext {
|
|
|
6476
7123
|
* Whether the export should be in dark mode.
|
|
6477
7124
|
*/
|
|
6478
7125
|
readonly isDarkMode: boolean;
|
|
7126
|
+
/**
|
|
7127
|
+
* The color mode to use for this export.
|
|
7128
|
+
*/
|
|
7129
|
+
readonly colorMode: 'dark' | 'light';
|
|
6479
7130
|
/**
|
|
6480
7131
|
* The scale of the export - how much CSS pixels will be scaled up/down by.
|
|
6481
7132
|
*/
|
|
@@ -6507,15 +7158,18 @@ export declare const TAB_ID: string;
|
|
|
6507
7158
|
export declare class TextManager {
|
|
6508
7159
|
editor: Editor;
|
|
6509
7160
|
private elm;
|
|
7161
|
+
private poolElms;
|
|
6510
7162
|
constructor(editor: Editor);
|
|
7163
|
+
private createMeasurementEl;
|
|
7164
|
+
private resetElementStyles;
|
|
6511
7165
|
private setElementStyles;
|
|
7166
|
+
private getMeasureStyles;
|
|
6512
7167
|
dispose(): void;
|
|
6513
|
-
|
|
6514
|
-
|
|
6515
|
-
|
|
6516
|
-
|
|
6517
|
-
|
|
6518
|
-
};
|
|
7168
|
+
private ensurePoolSize;
|
|
7169
|
+
private getPoolItem;
|
|
7170
|
+
measureHtmlBatch(requests: BatchMeasurementRequest[]): TLMeasuredTextSize[];
|
|
7171
|
+
measureText(textToMeasure: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
|
|
7172
|
+
measureHtml(html: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
|
|
6519
7173
|
/**
|
|
6520
7174
|
* Given an html element, measure the position of each span of unbroken
|
|
6521
7175
|
* word/white-space characters within any text nodes it contains.
|
|
@@ -6543,6 +7197,47 @@ export declare class TextManager {
|
|
|
6543
7197
|
}[];
|
|
6544
7198
|
}
|
|
6545
7199
|
|
|
7200
|
+
/**
|
|
7201
|
+
* Manages the editor's color themes.
|
|
7202
|
+
*
|
|
7203
|
+
* Stores named theme definitions (each containing light and dark color palettes
|
|
7204
|
+
* alongside shared properties like font size). The current theme is resolved by
|
|
7205
|
+
* combining the current theme name with the user's color mode preference.
|
|
7206
|
+
*
|
|
7207
|
+
* **Terminology:**
|
|
7208
|
+
* - **Theme** (`TLTheme`): A named set of colors and typographic values for both light and dark modes.
|
|
7209
|
+
* - **Color mode** (`'light' | 'dark'`): The resolved appearance mode, derived from the user's
|
|
7210
|
+
* `colorScheme` preference (`'light' | 'dark' | 'system'`). Access via `getColorMode()`.
|
|
7211
|
+
*
|
|
7212
|
+
* @public
|
|
7213
|
+
*/
|
|
7214
|
+
export declare class ThemeManager {
|
|
7215
|
+
private readonly editor;
|
|
7216
|
+
private readonly _themes;
|
|
7217
|
+
private readonly _currentThemeId;
|
|
7218
|
+
constructor(editor: Editor, options: {
|
|
7219
|
+
initial: TLThemeId;
|
|
7220
|
+
themes: TLThemes;
|
|
7221
|
+
});
|
|
7222
|
+
/** Get the current color mode based on the user's dark mode preference. */
|
|
7223
|
+
getColorMode(): 'dark' | 'light';
|
|
7224
|
+
/** Get all registered theme definitions. */
|
|
7225
|
+
getThemes(): TLThemes;
|
|
7226
|
+
/** Get a single theme definition by id. */
|
|
7227
|
+
getTheme(id: TLThemeId): TLTheme | undefined;
|
|
7228
|
+
/** Get the id of the current theme. */
|
|
7229
|
+
getCurrentThemeId(): TLThemeId;
|
|
7230
|
+
getCurrentTheme(): TLTheme;
|
|
7231
|
+
/** Set the current theme by id. The theme must have been previously registered. */
|
|
7232
|
+
setCurrentTheme(id: TLThemeId): void;
|
|
7233
|
+
/** Replace all theme definitions, or update them via a callback that receives a deep copy. */
|
|
7234
|
+
updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): void;
|
|
7235
|
+
/** Register or update a named theme definition. */
|
|
7236
|
+
updateTheme(theme: TLTheme): void;
|
|
7237
|
+
/** Clean up any resources held by the manager. */
|
|
7238
|
+
dispose(): void;
|
|
7239
|
+
}
|
|
7240
|
+
|
|
6546
7241
|
/* Excluded from this release type: TickManager */
|
|
6547
7242
|
|
|
6548
7243
|
/**
|
|
@@ -6561,12 +7256,26 @@ export declare type TiptapNode = Node_2;
|
|
|
6561
7256
|
/** @public */
|
|
6562
7257
|
export declare type TLAdjacentDirection = 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
|
|
6563
7258
|
|
|
7259
|
+
/** @public */
|
|
7260
|
+
export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
|
|
7261
|
+
|
|
6564
7262
|
/** @public */
|
|
6565
7263
|
export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
|
|
6566
7264
|
|
|
7265
|
+
/** @public */
|
|
7266
|
+
export declare type TLAnyOverlayUtilConstructor = TLOverlayUtilConstructor<any>;
|
|
7267
|
+
|
|
6567
7268
|
/** @public */
|
|
6568
7269
|
export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
|
|
6569
7270
|
|
|
7271
|
+
/** @public */
|
|
7272
|
+
export declare interface TLAssetUtilConstructor<T extends TLAsset = TLAsset, U extends AssetUtil<T> = AssetUtil<T>> {
|
|
7273
|
+
new (editor: Editor): U;
|
|
7274
|
+
type: T['type'];
|
|
7275
|
+
props?: RecordProps<T>;
|
|
7276
|
+
migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
7277
|
+
}
|
|
7278
|
+
|
|
6570
7279
|
/** @public */
|
|
6571
7280
|
export declare type TLBaseBoxShape = ExtractShapeByProps<{
|
|
6572
7281
|
h: number;
|
|
@@ -6599,15 +7308,6 @@ export declare interface TLBindingUtilConstructor<T extends TLBinding, U extends
|
|
|
6599
7308
|
migrations?: TLPropsMigrations;
|
|
6600
7309
|
}
|
|
6601
7310
|
|
|
6602
|
-
/** @public */
|
|
6603
|
-
export declare interface TLBrushProps {
|
|
6604
|
-
userId?: string;
|
|
6605
|
-
brush: BoxModel;
|
|
6606
|
-
color?: string;
|
|
6607
|
-
opacity?: number;
|
|
6608
|
-
className?: string;
|
|
6609
|
-
}
|
|
6610
|
-
|
|
6611
7311
|
/** @public */
|
|
6612
7312
|
export declare interface TLCameraConstraints {
|
|
6613
7313
|
/** The bounds (in page space) of the constrained space */
|
|
@@ -6656,6 +7356,29 @@ export declare interface TLCameraConstraints {
|
|
|
6656
7356
|
};
|
|
6657
7357
|
}
|
|
6658
7358
|
|
|
7359
|
+
/**
|
|
7360
|
+
* Emitted when a camera operation ends (after a 50ms debounce), with aggregated frame time stats.
|
|
7361
|
+
* @public
|
|
7362
|
+
*/
|
|
7363
|
+
export declare interface TLCameraEndPerfEvent extends TLPerfFrameTimeStats {
|
|
7364
|
+
/** Whether this was a pan or zoom operation. */
|
|
7365
|
+
type: 'panning' | 'zooming';
|
|
7366
|
+
/** Total shapes on the current page. */
|
|
7367
|
+
shapeCount: number;
|
|
7368
|
+
/** Number of shapes visible (not culled) in the viewport. */
|
|
7369
|
+
visibleShapeCount: number;
|
|
7370
|
+
/** Number of shapes culled (off-screen) from rendering. */
|
|
7371
|
+
culledShapeCount: number;
|
|
7372
|
+
/** Viewport width in screen pixels. */
|
|
7373
|
+
viewportWidth: number;
|
|
7374
|
+
/** Viewport height in screen pixels. */
|
|
7375
|
+
viewportHeight: number;
|
|
7376
|
+
/** Camera zoom level (`camera.z`) at session end. */
|
|
7377
|
+
zoomLevel: number;
|
|
7378
|
+
/** `performance.now()` when the camera session ended. */
|
|
7379
|
+
timestamp: number;
|
|
7380
|
+
}
|
|
7381
|
+
|
|
6659
7382
|
/** @public */
|
|
6660
7383
|
export declare interface TLCameraMoveOptions {
|
|
6661
7384
|
/** Whether to move the camera immediately, rather than on the next tick. */
|
|
@@ -6694,6 +7417,17 @@ export declare interface TLCameraOptions {
|
|
|
6694
7417
|
constraints?: TLCameraConstraints;
|
|
6695
7418
|
}
|
|
6696
7419
|
|
|
7420
|
+
/**
|
|
7421
|
+
* Emitted when a camera operation (pan or zoom) begins.
|
|
7422
|
+
* @public
|
|
7423
|
+
*/
|
|
7424
|
+
export declare interface TLCameraStartPerfEvent {
|
|
7425
|
+
/** Whether this is a pan or zoom operation. */
|
|
7426
|
+
type: 'panning' | 'zooming';
|
|
7427
|
+
/** `performance.now()` when the camera session started. */
|
|
7428
|
+
timestamp: number;
|
|
7429
|
+
}
|
|
7430
|
+
|
|
6697
7431
|
/** @public */
|
|
6698
7432
|
export declare type TLCancelEvent = (info: TLCancelEventInfo) => void;
|
|
6699
7433
|
|
|
@@ -6727,15 +7461,38 @@ export declare type TLCLickEventName = 'double_click' | 'quadruple_click' | 'tri
|
|
|
6727
7461
|
/** @public */
|
|
6728
7462
|
export declare type TLClickState = 'idle' | 'overflow' | 'pendingDouble' | 'pendingOverflow' | 'pendingQuadruple' | 'pendingTriple';
|
|
6729
7463
|
|
|
6730
|
-
/**
|
|
6731
|
-
|
|
6732
|
-
|
|
6733
|
-
|
|
6734
|
-
|
|
6735
|
-
|
|
6736
|
-
|
|
6737
|
-
|
|
6738
|
-
|
|
7464
|
+
/**
|
|
7465
|
+
* Raw clipboard paste payload, before tldraw parses clipboard contents into {@link TLExternalContent}.
|
|
7466
|
+
*
|
|
7467
|
+
* - `native-event`: from the `paste` event — `clipboardData` is available synchronously (unlike async
|
|
7468
|
+
* `navigator.clipboard.read()`).
|
|
7469
|
+
* - `clipboard-read`: from an explicit `navigator.clipboard.read()` call — only `ClipboardItem[]`
|
|
7470
|
+
* exists
|
|
7471
|
+
* (no `DataTransfer`).
|
|
7472
|
+
*
|
|
7473
|
+
* @public
|
|
7474
|
+
*/
|
|
7475
|
+
export declare type TLClipboardPasteRawInfo = {
|
|
7476
|
+
readonly clipboardData: DataTransfer | null;
|
|
7477
|
+
readonly editor: Editor;
|
|
7478
|
+
readonly event: ClipboardEvent;
|
|
7479
|
+
readonly point: undefined | VecLike;
|
|
7480
|
+
readonly source: 'native-event';
|
|
7481
|
+
} | {
|
|
7482
|
+
readonly clipboardItems: readonly ClipboardItem[];
|
|
7483
|
+
readonly editor: Editor;
|
|
7484
|
+
readonly point: undefined | VecLike;
|
|
7485
|
+
readonly source: 'clipboard-read';
|
|
7486
|
+
};
|
|
7487
|
+
|
|
7488
|
+
/**
|
|
7489
|
+
* Identifies how a clipboard write was triggered (copy vs cut, keyboard vs menu).
|
|
7490
|
+
*
|
|
7491
|
+
* @public
|
|
7492
|
+
*/
|
|
7493
|
+
export declare interface TLClipboardWriteInfo {
|
|
7494
|
+
readonly operation: 'copy' | 'cut';
|
|
7495
|
+
readonly source: 'menu' | 'native';
|
|
6739
7496
|
}
|
|
6740
7497
|
|
|
6741
7498
|
/** @public */
|
|
@@ -6754,6 +7511,7 @@ export declare interface TLContent {
|
|
|
6754
7511
|
rootShapeIds: TLShapeId[];
|
|
6755
7512
|
assets: TLAsset[];
|
|
6756
7513
|
schema: SerializedSchema;
|
|
7514
|
+
users?: TLUser[];
|
|
6757
7515
|
}
|
|
6758
7516
|
|
|
6759
7517
|
/**
|
|
@@ -6776,14 +7534,9 @@ export declare interface TLCropInfo<T extends TLShape> {
|
|
|
6776
7534
|
}
|
|
6777
7535
|
|
|
6778
7536
|
/** @public */
|
|
6779
|
-
export declare interface
|
|
6780
|
-
|
|
6781
|
-
|
|
6782
|
-
point: null | VecModel;
|
|
6783
|
-
zoom: number;
|
|
6784
|
-
color?: string;
|
|
6785
|
-
name: null | string;
|
|
6786
|
-
chatMessage: string;
|
|
7537
|
+
export declare interface TLCurrentUser {
|
|
7538
|
+
readonly userPreferences: Signal<TLUserPreferences>;
|
|
7539
|
+
readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
|
|
6787
7540
|
}
|
|
6788
7541
|
|
|
6789
7542
|
/** @public */
|
|
@@ -6875,6 +7628,14 @@ export declare interface TldrawEditorBaseProps {
|
|
|
6875
7628
|
* An array of binding utils to use in the editor.
|
|
6876
7629
|
*/
|
|
6877
7630
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
|
7631
|
+
/**
|
|
7632
|
+
* An array of asset utils to use in the editor.
|
|
7633
|
+
*/
|
|
7634
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
7635
|
+
/**
|
|
7636
|
+
* An array of overlay utils to use in the editor for canvas overlay UI elements.
|
|
7637
|
+
*/
|
|
7638
|
+
overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
|
|
6878
7639
|
/**
|
|
6879
7640
|
* An array of tools to add to the editor's state chart.
|
|
6880
7641
|
*/
|
|
@@ -6902,11 +7663,23 @@ export declare interface TldrawEditorBaseProps {
|
|
|
6902
7663
|
/**
|
|
6903
7664
|
* The user interacting with the editor.
|
|
6904
7665
|
*/
|
|
6905
|
-
user?:
|
|
7666
|
+
user?: TLCurrentUser;
|
|
7667
|
+
/**
|
|
7668
|
+
* The editor's color scheme. Defaults to `'light'`.
|
|
7669
|
+
*
|
|
7670
|
+
* - `'light'` - Always use light mode.
|
|
7671
|
+
* - `'dark'` - Always use dark mode.
|
|
7672
|
+
* - `'system'` - Follow the OS color scheme preference.
|
|
7673
|
+
*/
|
|
7674
|
+
colorScheme?: 'dark' | 'light' | 'system';
|
|
7675
|
+
/**
|
|
7676
|
+
* Named themes for the editor.
|
|
7677
|
+
*/
|
|
7678
|
+
themes?: Partial<TLThemes>;
|
|
6906
7679
|
/**
|
|
6907
|
-
*
|
|
7680
|
+
* The id of the initially active theme. Defaults to `'default'`.
|
|
6908
7681
|
*/
|
|
6909
|
-
|
|
7682
|
+
initialTheme?: TLThemeId;
|
|
6910
7683
|
/**
|
|
6911
7684
|
* Camera options for the editor.
|
|
6912
7685
|
*
|
|
@@ -7124,6 +7897,12 @@ export declare interface TldrawOptions {
|
|
|
7124
7897
|
* When false, the spacebar will not pan the camera.
|
|
7125
7898
|
*/
|
|
7126
7899
|
readonly spacebarPanning: boolean;
|
|
7900
|
+
/**
|
|
7901
|
+
* Whether to allow right-click + drag to pan the camera. When true, right-click + drag pans the
|
|
7902
|
+
* camera and a static right-click opens the context menu at the release position. When false,
|
|
7903
|
+
* right-click opens the context menu on press (no drag-to-pan).
|
|
7904
|
+
*/
|
|
7905
|
+
readonly rightClickPanning: boolean;
|
|
7127
7906
|
/**
|
|
7128
7907
|
* The default padding (in pixels) used when zooming to fit content in the viewport.
|
|
7129
7908
|
* This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.
|
|
@@ -7166,6 +7945,72 @@ export declare interface TldrawOptions {
|
|
|
7166
7945
|
* viewport's page dimensions regardless of overview zoom changes.
|
|
7167
7946
|
*/
|
|
7168
7947
|
readonly quickZoomPreservesScreenBounds: boolean;
|
|
7948
|
+
/**
|
|
7949
|
+
* Called before content is written to the clipboard during a copy or cut operation.
|
|
7950
|
+
* Receives the serialized content (shapes, bindings, assets) and can filter or transform
|
|
7951
|
+
* it before it reaches the clipboard.
|
|
7952
|
+
*
|
|
7953
|
+
* Return a modified `TLContent` object to change what is copied or cut. Return `false` to
|
|
7954
|
+
* cancel the clipboard write (for cut, the selected shapes are not removed). Return `void`
|
|
7955
|
+
* (or `undefined`) to pass through unchanged. You may return a `Promise` of those values if
|
|
7956
|
+
* the hook is async.
|
|
7957
|
+
*
|
|
7958
|
+
* @example
|
|
7959
|
+
* ```tsx
|
|
7960
|
+
* // Filter out "locked" shapes from copy
|
|
7961
|
+
* onBeforeCopyToClipboard({ content, operation }) {
|
|
7962
|
+
* return {
|
|
7963
|
+
* ...content,
|
|
7964
|
+
* shapes: content.shapes.filter(s => !s.meta.locked),
|
|
7965
|
+
* rootShapeIds: content.rootShapeIds.filter(id =>
|
|
7966
|
+
* content.shapes.find(s => s.id === id && !s.meta.locked)
|
|
7967
|
+
* ),
|
|
7968
|
+
* }
|
|
7969
|
+
* }
|
|
7970
|
+
* ```
|
|
7971
|
+
*/
|
|
7972
|
+
onBeforeCopyToClipboard?(info: {
|
|
7973
|
+
content: TLContent;
|
|
7974
|
+
editor: Editor;
|
|
7975
|
+
} & TLClipboardWriteInfo): Awaitable<false | TLContent | void>;
|
|
7976
|
+
/**
|
|
7977
|
+
* Called before pasted content is processed and shapes are created. Receives the parsed
|
|
7978
|
+
* external content from the clipboard and can filter, transform, or cancel it.
|
|
7979
|
+
*
|
|
7980
|
+
* Return `false` to cancel the paste. Return a modified content object to transform it.
|
|
7981
|
+
* Return `void` (or `undefined`) to pass through unchanged. You may return a `Promise` of
|
|
7982
|
+
* those values if the hook is async.
|
|
7983
|
+
*
|
|
7984
|
+
* This only fires for clipboard paste operations (keyboard shortcuts and menu actions),
|
|
7985
|
+
* not for file drops or programmatic `putExternalContent` calls.
|
|
7986
|
+
*
|
|
7987
|
+
* @example
|
|
7988
|
+
* ```tsx
|
|
7989
|
+
* // Block pasting of image files
|
|
7990
|
+
* onBeforePasteFromClipboard({ content }) {
|
|
7991
|
+
* if (content.type === 'files') {
|
|
7992
|
+
* const nonImages = content.files.filter(f => !f.type.startsWith('image/'))
|
|
7993
|
+
* if (nonImages.length === 0) return false
|
|
7994
|
+
* return { ...content, files: nonImages }
|
|
7995
|
+
* }
|
|
7996
|
+
* }
|
|
7997
|
+
* ```
|
|
7998
|
+
*/
|
|
7999
|
+
onBeforePasteFromClipboard?(info: {
|
|
8000
|
+
content: TLExternalContent<unknown>;
|
|
8001
|
+
editor: Editor;
|
|
8002
|
+
point?: VecLike;
|
|
8003
|
+
source: 'clipboard-read' | 'native-event';
|
|
8004
|
+
}): Awaitable<false | TLExternalContent<unknown> | void>;
|
|
8005
|
+
/**
|
|
8006
|
+
* Called first for keyboard and menu paste, **before** tldraw handles or parses clipboard data
|
|
8007
|
+
* (and before {@link TldrawOptions.onBeforePasteFromClipboard}).
|
|
8008
|
+
*
|
|
8009
|
+
* Return `false` to cancel tldraw's default paste handling for this gesture (same convention as
|
|
8010
|
+
* {@link TldrawOptions.onBeforePasteFromClipboard}). Use this when you handle paste yourself from
|
|
8011
|
+
* raw clipboard data, or to block the gesture entirely. Return `void` (or `undefined`) to continue.
|
|
8012
|
+
*/
|
|
8013
|
+
onClipboardPasteRaw?(info: TLClipboardPasteRawInfo): false | void;
|
|
7169
8014
|
/**
|
|
7170
8015
|
* Called when content is dropped on the canvas. Provides the page position
|
|
7171
8016
|
* where the drop occurred and the underlying drag event object.
|
|
@@ -7187,34 +8032,17 @@ export declare interface TLDropShapesOverInfo {
|
|
|
7187
8032
|
/** @public */
|
|
7188
8033
|
export declare interface TLEditorComponents {
|
|
7189
8034
|
Background?: ComponentType | null;
|
|
7190
|
-
Brush?: ComponentType<TLBrushProps> | null;
|
|
7191
8035
|
Canvas?: ComponentType<TLCanvasComponentProps> | null;
|
|
7192
|
-
CollaboratorBrush?: ComponentType<TLBrushProps> | null;
|
|
7193
|
-
CollaboratorCursor?: ComponentType<TLCursorProps> | null;
|
|
7194
|
-
CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null;
|
|
7195
|
-
CollaboratorScribble?: ComponentType<TLScribbleProps> | null;
|
|
7196
|
-
CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
|
|
7197
|
-
Cursor?: ComponentType<TLCursorProps> | null;
|
|
7198
8036
|
Grid?: ComponentType<TLGridProps> | null;
|
|
7199
|
-
Handle?: ComponentType<TLHandleProps> | null;
|
|
7200
|
-
Handles?: ComponentType<TLHandlesProps> | null;
|
|
7201
8037
|
InFrontOfTheCanvas?: ComponentType | null;
|
|
7202
8038
|
LoadingScreen?: ComponentType | null;
|
|
7203
8039
|
OnTheCanvas?: ComponentType | null;
|
|
7204
|
-
Overlays?: ComponentType | null;
|
|
7205
|
-
Scribble?: ComponentType<TLScribbleProps> | null;
|
|
7206
8040
|
SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null;
|
|
7207
|
-
SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null;
|
|
7208
|
-
ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
|
|
7209
|
-
ShapeIndicators?: ComponentType | null;
|
|
7210
8041
|
ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null;
|
|
7211
|
-
SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
|
|
7212
8042
|
Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
|
|
7213
8043
|
SvgDefs?: ComponentType | null;
|
|
7214
|
-
ZoomBrush?: ComponentType<TLBrushProps> | null;
|
|
7215
8044
|
ErrorFallback?: TLErrorFallbackComponent;
|
|
7216
8045
|
ShapeErrorFallback?: TLShapeErrorFallbackComponent;
|
|
7217
|
-
ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent;
|
|
7218
8046
|
}
|
|
7219
8047
|
|
|
7220
8048
|
/** @public */
|
|
@@ -7233,18 +8061,22 @@ export declare interface TLEditorOptions {
|
|
|
7233
8061
|
*/
|
|
7234
8062
|
bindingUtils: readonly TLAnyBindingUtilConstructor[];
|
|
7235
8063
|
/**
|
|
7236
|
-
* An array of
|
|
8064
|
+
* An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
|
|
7237
8065
|
*/
|
|
7238
|
-
|
|
8066
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
7239
8067
|
/**
|
|
7240
|
-
*
|
|
7241
|
-
*
|
|
8068
|
+
* An array of overlay utils to use in the editor. These define canvas overlay UI elements
|
|
8069
|
+
* like selection handles, rotation corners, shape handles, etc.
|
|
7242
8070
|
*/
|
|
7243
|
-
|
|
8071
|
+
overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
|
|
8072
|
+
/**
|
|
8073
|
+
* An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
|
|
8074
|
+
*/
|
|
8075
|
+
tools: readonly TLStateNodeConstructor[];
|
|
7244
8076
|
/**
|
|
7245
8077
|
* A user defined externally to replace the default user.
|
|
7246
8078
|
*/
|
|
7247
|
-
user?:
|
|
8079
|
+
user?: TLCurrentUser;
|
|
7248
8080
|
/**
|
|
7249
8081
|
* The editor's initial active tool (or other state node id).
|
|
7250
8082
|
*/
|
|
@@ -7253,27 +8085,15 @@ export declare interface TLEditorOptions {
|
|
|
7253
8085
|
* Whether to automatically focus the editor when it mounts.
|
|
7254
8086
|
*/
|
|
7255
8087
|
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
8088
|
licenseKey?: string;
|
|
7274
8089
|
fontAssetUrls?: {
|
|
7275
8090
|
[key: string]: string | undefined;
|
|
7276
8091
|
};
|
|
8092
|
+
/**
|
|
8093
|
+
* Should return a containing html element which has all the styles applied to the editor. If not
|
|
8094
|
+
* given, the body element will be used.
|
|
8095
|
+
*/
|
|
8096
|
+
getContainer(): HTMLElement;
|
|
7277
8097
|
/**
|
|
7278
8098
|
* Provides a way to hide shapes.
|
|
7279
8099
|
*
|
|
@@ -7290,6 +8110,40 @@ export declare interface TLEditorOptions {
|
|
|
7290
8110
|
* @param editor - The editor instance.
|
|
7291
8111
|
*/
|
|
7292
8112
|
getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined;
|
|
8113
|
+
/**
|
|
8114
|
+
* Named theme definitions for the editor. Each theme contains shared
|
|
8115
|
+
* properties (font size, line height, stroke width) and color palettes
|
|
8116
|
+
* for both light and dark modes.
|
|
8117
|
+
*/
|
|
8118
|
+
themes?: Partial<TLThemes>;
|
|
8119
|
+
/**
|
|
8120
|
+
* The id of the initially active theme. Defaults to `'default'`.
|
|
8121
|
+
*/
|
|
8122
|
+
initialTheme?: TLThemeId;
|
|
8123
|
+
/**
|
|
8124
|
+
* The editor's color scheme preference, controls the default color mode. Defaults to `'light'`.
|
|
8125
|
+
*
|
|
8126
|
+
* - `'light'` - Always use light mode.
|
|
8127
|
+
* - `'dark'` - Always use dark mode.
|
|
8128
|
+
* - `'system'` - Follow the OS color scheme preference.
|
|
8129
|
+
*/
|
|
8130
|
+
colorScheme?: 'dark' | 'light' | 'system';
|
|
8131
|
+
/**
|
|
8132
|
+
* Additional configuration options for the tldraw editor.
|
|
8133
|
+
*/
|
|
8134
|
+
options?: Partial<TldrawOptions>;
|
|
8135
|
+
/**
|
|
8136
|
+
* Options for the editor's camera.
|
|
8137
|
+
*
|
|
8138
|
+
* @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
|
|
8139
|
+
*/
|
|
8140
|
+
cameraOptions?: Partial<TLCameraOptions>;
|
|
8141
|
+
/**
|
|
8142
|
+
* Text options for the editor.
|
|
8143
|
+
*
|
|
8144
|
+
* @deprecated Use `options.text` instead. This prop will be removed in a future release.
|
|
8145
|
+
*/
|
|
8146
|
+
textOptions?: TLTextOptions;
|
|
7293
8147
|
}
|
|
7294
8148
|
|
|
7295
8149
|
/**
|
|
@@ -7348,6 +8202,7 @@ export declare const tlenv: {
|
|
|
7348
8202
|
*/
|
|
7349
8203
|
export declare const tlenvReactive: Atom< {
|
|
7350
8204
|
isCoarsePointer: boolean;
|
|
8205
|
+
supportsP3ColorSpace: boolean;
|
|
7351
8206
|
}, unknown>;
|
|
7352
8207
|
|
|
7353
8208
|
/** @public */
|
|
@@ -7476,6 +8331,7 @@ export declare interface TLFileReplaceExternalContent extends TLBaseExternalCont
|
|
|
7476
8331
|
type: 'file-replace';
|
|
7477
8332
|
file: File;
|
|
7478
8333
|
shapeId: TLShapeId;
|
|
8334
|
+
/** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */
|
|
7479
8335
|
isImage: boolean;
|
|
7480
8336
|
}
|
|
7481
8337
|
|
|
@@ -7487,69 +8343,18 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
|
|
|
7487
8343
|
}
|
|
7488
8344
|
|
|
7489
8345
|
/**
|
|
7490
|
-
*
|
|
7491
|
-
* ones in the
|
|
7492
|
-
* {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
|
|
8346
|
+
* Emitted every animation frame when at least one `'frame'` listener is registered.
|
|
7493
8347
|
* @public
|
|
7494
8348
|
*/
|
|
7495
|
-
export declare interface
|
|
7496
|
-
/**
|
|
7497
|
-
|
|
7498
|
-
|
|
7499
|
-
|
|
7500
|
-
|
|
7501
|
-
|
|
7502
|
-
|
|
7503
|
-
|
|
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.
|
|
7543
|
-
* @public
|
|
7544
|
-
*/
|
|
7545
|
-
export declare interface TLFontFaceSource {
|
|
7546
|
-
/**
|
|
7547
|
-
* A URL from which to load the font. If the value here is a key in
|
|
7548
|
-
* {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.
|
|
7549
|
-
*/
|
|
7550
|
-
url: string;
|
|
7551
|
-
format?: string;
|
|
7552
|
-
tech?: string;
|
|
8349
|
+
export declare interface TLFramePerfEvent {
|
|
8350
|
+
/** Time since the last frame in ms. */
|
|
8351
|
+
elapsed: number;
|
|
8352
|
+
/** Total shapes on the current page. */
|
|
8353
|
+
shapeCount: number;
|
|
8354
|
+
/** Number of shapes culled (off-screen) from rendering. */
|
|
8355
|
+
culledShapeCount: number;
|
|
8356
|
+
/** Number of shapes visible (not culled) in the viewport. */
|
|
8357
|
+
visibleShapeCount: number;
|
|
7553
8358
|
}
|
|
7554
8359
|
|
|
7555
8360
|
/** Additional options for the {@link ShapeUtil.getGeometry} method.
|
|
@@ -7630,20 +8435,6 @@ export declare interface TLHandleDragInfo<T extends TLShape> {
|
|
|
7630
8435
|
initial?: T | undefined;
|
|
7631
8436
|
}
|
|
7632
8437
|
|
|
7633
|
-
/** @public */
|
|
7634
|
-
export declare interface TLHandleProps {
|
|
7635
|
-
shapeId: TLShapeId;
|
|
7636
|
-
handle: TLHandle;
|
|
7637
|
-
zoom: number;
|
|
7638
|
-
isCoarse: boolean;
|
|
7639
|
-
className?: string;
|
|
7640
|
-
}
|
|
7641
|
-
|
|
7642
|
-
/** @public */
|
|
7643
|
-
export declare interface TLHandlesProps {
|
|
7644
|
-
children: ReactNode;
|
|
7645
|
-
}
|
|
7646
|
-
|
|
7647
8438
|
/** @public */
|
|
7648
8439
|
export declare interface TLHistoryBatchOptions {
|
|
7649
8440
|
/**
|
|
@@ -7694,6 +8485,38 @@ export declare type TLIndicatorPath = {
|
|
|
7694
8485
|
path: Path2D;
|
|
7695
8486
|
} | Path2D;
|
|
7696
8487
|
|
|
8488
|
+
/**
|
|
8489
|
+
* Emitted when an interaction state is exited, with aggregated frame time stats.
|
|
8490
|
+
* @public
|
|
8491
|
+
*/
|
|
8492
|
+
export declare interface TLInteractionEndPerfEvent extends TLPerfFrameTimeStats {
|
|
8493
|
+
/** The state node id (e.g. `'translating'`). */
|
|
8494
|
+
name: string;
|
|
8495
|
+
/** Full tool path (e.g. `'select.translating'`). */
|
|
8496
|
+
path: string;
|
|
8497
|
+
/** Total shapes on the current page. */
|
|
8498
|
+
shapeCount: number;
|
|
8499
|
+
/** Breakdown of selected shape types at interaction start (e.g. `{ geo: 2, draw: 1 }`). */
|
|
8500
|
+
selectedShapeTypes: Record<string, number>;
|
|
8501
|
+
/** Camera zoom level (`camera.z`) at interaction end. */
|
|
8502
|
+
zoomLevel: number;
|
|
8503
|
+
/** `performance.now()` when the interaction ended. */
|
|
8504
|
+
timestamp: number;
|
|
8505
|
+
}
|
|
8506
|
+
|
|
8507
|
+
/**
|
|
8508
|
+
* Emitted when an interaction state (e.g. translating, resizing) is entered.
|
|
8509
|
+
* @public
|
|
8510
|
+
*/
|
|
8511
|
+
export declare interface TLInteractionStartPerfEvent {
|
|
8512
|
+
/** The state node id (e.g. `'translating'`). */
|
|
8513
|
+
name: string;
|
|
8514
|
+
/** Full tool path (e.g. `'select.translating'`). */
|
|
8515
|
+
path: string;
|
|
8516
|
+
/** `performance.now()` when the interaction started. */
|
|
8517
|
+
timestamp: number;
|
|
8518
|
+
}
|
|
8519
|
+
|
|
7697
8520
|
/** @public */
|
|
7698
8521
|
export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
|
|
7699
8522
|
|
|
@@ -7743,6 +8566,11 @@ export declare interface TLLoadSnapshotOptions {
|
|
|
7743
8566
|
forceOverwriteSessionState?: boolean;
|
|
7744
8567
|
}
|
|
7745
8568
|
|
|
8569
|
+
/** @public */
|
|
8570
|
+
export declare type TLMeasuredTextSize = BoxModel & {
|
|
8571
|
+
scrollWidth: number;
|
|
8572
|
+
};
|
|
8573
|
+
|
|
7746
8574
|
/** @public */
|
|
7747
8575
|
export declare interface TLMeasureTextOpts {
|
|
7748
8576
|
fontStyle: string;
|
|
@@ -7936,6 +8764,130 @@ export declare const tlmenus: {
|
|
|
7936
8764
|
*/
|
|
7937
8765
|
export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
|
|
7938
8766
|
|
|
8767
|
+
/** @public */
|
|
8768
|
+
export declare interface TLOverlay<Props = Record<string, unknown>> {
|
|
8769
|
+
/**
|
|
8770
|
+
* Globally unique id for this overlay instance across all overlay utils.
|
|
8771
|
+
* Hit-test and hover lookup key on `id` alone, so utils must namespace their
|
|
8772
|
+
* ids (e.g. `'selection_fg:top_left'`, `'handle:<shapeId>:<handleId>'`) to
|
|
8773
|
+
* avoid colliding with overlays from other utils.
|
|
8774
|
+
*/
|
|
8775
|
+
id: string;
|
|
8776
|
+
/** The overlay util type that owns this instance */
|
|
8777
|
+
type: string;
|
|
8778
|
+
/** Arbitrary props for the overlay (handle id, corner name, etc.) */
|
|
8779
|
+
props: Props;
|
|
8780
|
+
}
|
|
8781
|
+
|
|
8782
|
+
/**
|
|
8783
|
+
* An active overlay util paired with the overlays it produced for the current
|
|
8784
|
+
* editor state. Returned by {@link OverlayManager.getActiveOverlayEntries} so
|
|
8785
|
+
* hit-test, render, and debug paths share a single scan per reactive tick.
|
|
8786
|
+
*
|
|
8787
|
+
* @public
|
|
8788
|
+
*/
|
|
8789
|
+
export declare interface TLOverlayEntry {
|
|
8790
|
+
util: OverlayUtil;
|
|
8791
|
+
overlays: TLOverlay[];
|
|
8792
|
+
}
|
|
8793
|
+
|
|
8794
|
+
/** @public */
|
|
8795
|
+
export declare interface TLOverlayUtilConstructor<U extends OverlayUtil = OverlayUtil> {
|
|
8796
|
+
new (editor: Editor): U;
|
|
8797
|
+
type: string;
|
|
8798
|
+
configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
|
|
8799
|
+
options: infer Options;
|
|
8800
|
+
} ? Partial<Options> : never): T;
|
|
8801
|
+
}
|
|
8802
|
+
|
|
8803
|
+
/**
|
|
8804
|
+
* Map of all performance event names to their payload types.
|
|
8805
|
+
* Used with {@link PerformanceManager.on} and {@link PerformanceManager.once}.
|
|
8806
|
+
* @public
|
|
8807
|
+
*/
|
|
8808
|
+
export declare interface TLPerfEventMap {
|
|
8809
|
+
/** An interaction state was entered. */
|
|
8810
|
+
'interaction-start': [TLInteractionStartPerfEvent];
|
|
8811
|
+
/** An interaction state was exited, with aggregated frame time stats. */
|
|
8812
|
+
'interaction-end': [TLInteractionEndPerfEvent];
|
|
8813
|
+
/** A camera operation (pan/zoom) began. */
|
|
8814
|
+
'camera-start': [TLCameraStartPerfEvent];
|
|
8815
|
+
/** A camera operation ended (after debounce), with aggregated frame time stats. */
|
|
8816
|
+
'camera-end': [TLCameraEndPerfEvent];
|
|
8817
|
+
/** Shapes were created. */
|
|
8818
|
+
'shapes-created': [TLShapeOperationPerfEvent];
|
|
8819
|
+
/** Shapes were updated. */
|
|
8820
|
+
'shapes-updated': [TLShapeOperationPerfEvent];
|
|
8821
|
+
/** Shapes were deleted. */
|
|
8822
|
+
'shapes-deleted': [TLShapeOperationPerfEvent];
|
|
8823
|
+
/** An animation frame was rendered. Only fires when listeners are registered. */
|
|
8824
|
+
frame: [TLFramePerfEvent];
|
|
8825
|
+
/** An undo operation was performed. */
|
|
8826
|
+
undo: [TLUndoRedoPerfEvent];
|
|
8827
|
+
/** A redo operation was performed. */
|
|
8828
|
+
redo: [TLUndoRedoPerfEvent];
|
|
8829
|
+
}
|
|
8830
|
+
|
|
8831
|
+
/**
|
|
8832
|
+
* Common frame time statistics shared by interaction and camera end events.
|
|
8833
|
+
* @public
|
|
8834
|
+
*/
|
|
8835
|
+
export declare interface TLPerfFrameTimeStats {
|
|
8836
|
+
/** Total duration of the session in ms. */
|
|
8837
|
+
duration: number;
|
|
8838
|
+
/** Average frames per second during the session. */
|
|
8839
|
+
fps: number;
|
|
8840
|
+
/** Total number of frames recorded. */
|
|
8841
|
+
frameCount: number;
|
|
8842
|
+
/** Mean frame duration in ms. */
|
|
8843
|
+
avgFrameTime: number;
|
|
8844
|
+
/** Median (p50) frame duration in ms. */
|
|
8845
|
+
medianFrameTime: number;
|
|
8846
|
+
/** 95th percentile frame duration in ms. */
|
|
8847
|
+
p95FrameTime: number;
|
|
8848
|
+
/** 99th percentile frame duration in ms. */
|
|
8849
|
+
p99FrameTime: number;
|
|
8850
|
+
/** Shortest frame duration in ms. */
|
|
8851
|
+
minFrameTime: number;
|
|
8852
|
+
/** Longest frame duration in ms. */
|
|
8853
|
+
maxFrameTime: number;
|
|
8854
|
+
/** Raw frame durations for local analysis. Exclude when sending to analytics. */
|
|
8855
|
+
frameTimes: number[];
|
|
8856
|
+
/**
|
|
8857
|
+
* Long animation frames observed during this period (Chromium 123+).
|
|
8858
|
+
* Only present when the browser supports the Long Animation Frames API and
|
|
8859
|
+
* at least one long frame was observed.
|
|
8860
|
+
* Exclude when sending to analytics — entries are large and contain script URLs.
|
|
8861
|
+
*/
|
|
8862
|
+
longAnimationFrames?: TLPerfLongAnimationFrame[];
|
|
8863
|
+
}
|
|
8864
|
+
|
|
8865
|
+
/**
|
|
8866
|
+
* A long animation frame observed by the browser during an interaction.
|
|
8867
|
+
* Available only in browsers that support the Long Animation Frames API (Chromium 123+).
|
|
8868
|
+
* @public
|
|
8869
|
+
*/
|
|
8870
|
+
export declare interface TLPerfLongAnimationFrame {
|
|
8871
|
+
/** Frame start time (relative to timeOrigin). */
|
|
8872
|
+
startTime: number;
|
|
8873
|
+
/** Total frame duration in ms. */
|
|
8874
|
+
duration: number;
|
|
8875
|
+
/** Time the main thread was blocked in ms. */
|
|
8876
|
+
blockingDuration: number;
|
|
8877
|
+
/** Scripts that contributed to the long frame. */
|
|
8878
|
+
scripts: TLPerfLongAnimationFrameScript[];
|
|
8879
|
+
}
|
|
8880
|
+
|
|
8881
|
+
/** A script attribution entry from a long animation frame. @public */
|
|
8882
|
+
export declare interface TLPerfLongAnimationFrameScript {
|
|
8883
|
+
/** The script source URL (may be empty for inline scripts). */
|
|
8884
|
+
sourceURL: string;
|
|
8885
|
+
/** The function name or invoker description. */
|
|
8886
|
+
invoker: string;
|
|
8887
|
+
/** Time spent in this script in ms. */
|
|
8888
|
+
duration: number;
|
|
8889
|
+
}
|
|
8890
|
+
|
|
7939
8891
|
/** @public */
|
|
7940
8892
|
export declare type TLPinchEvent = (info: TLPinchEventInfo) => void;
|
|
7941
8893
|
|
|
@@ -7975,6 +8927,10 @@ export declare type TLPointerEventTarget = {
|
|
|
7975
8927
|
handle?: TLSelectionHandle;
|
|
7976
8928
|
shape?: undefined;
|
|
7977
8929
|
target: 'selection';
|
|
8930
|
+
} | {
|
|
8931
|
+
overlay: TLOverlay;
|
|
8932
|
+
shape?: undefined;
|
|
8933
|
+
target: 'overlay';
|
|
7978
8934
|
} | {
|
|
7979
8935
|
shape: TLShape;
|
|
7980
8936
|
target: 'shape';
|
|
@@ -8045,28 +9001,12 @@ export declare type TLResizeShapeOptions = Partial<{
|
|
|
8045
9001
|
|
|
8046
9002
|
/* Excluded from this release type: TLRotationSnapshot */
|
|
8047
9003
|
|
|
8048
|
-
/** @public */
|
|
8049
|
-
export declare interface TLScribbleProps {
|
|
8050
|
-
userId?: string;
|
|
8051
|
-
scribble: TLScribble;
|
|
8052
|
-
zoom: number;
|
|
8053
|
-
color?: string;
|
|
8054
|
-
opacity?: number;
|
|
8055
|
-
className?: string;
|
|
8056
|
-
}
|
|
8057
|
-
|
|
8058
9004
|
/** @public */
|
|
8059
9005
|
export declare interface TLSelectionBackgroundProps {
|
|
8060
9006
|
bounds: Box;
|
|
8061
9007
|
rotation: number;
|
|
8062
9008
|
}
|
|
8063
9009
|
|
|
8064
|
-
/** @public */
|
|
8065
|
-
export declare interface TLSelectionForegroundProps {
|
|
8066
|
-
bounds: Box;
|
|
8067
|
-
rotation: number;
|
|
8068
|
-
}
|
|
8069
|
-
|
|
8070
9010
|
/** @public */
|
|
8071
9011
|
export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
|
|
8072
9012
|
|
|
@@ -8101,26 +9041,30 @@ export declare type TLShapeErrorFallbackComponent = ComponentType<{
|
|
|
8101
9041
|
}>;
|
|
8102
9042
|
|
|
8103
9043
|
/** @public */
|
|
8104
|
-
export declare
|
|
8105
|
-
|
|
8106
|
-
|
|
8107
|
-
|
|
8108
|
-
|
|
8109
|
-
|
|
8110
|
-
|
|
8111
|
-
|
|
8112
|
-
|
|
8113
|
-
opacity?: number;
|
|
8114
|
-
className?: string;
|
|
8115
|
-
hidden?: boolean;
|
|
9044
|
+
export declare interface TLShapeIndicatorOverlay extends TLOverlay {
|
|
9045
|
+
props: {
|
|
9046
|
+
collaboratorIndicators: Array<{
|
|
9047
|
+
color: string;
|
|
9048
|
+
shapeIds: TLShapeId[];
|
|
9049
|
+
}>;
|
|
9050
|
+
hintingShapeIds: TLShapeId[];
|
|
9051
|
+
idsToDisplay: TLShapeId[];
|
|
9052
|
+
};
|
|
8116
9053
|
}
|
|
8117
9054
|
|
|
8118
|
-
/**
|
|
8119
|
-
|
|
8120
|
-
|
|
8121
|
-
|
|
8122
|
-
|
|
8123
|
-
|
|
9055
|
+
/**
|
|
9056
|
+
* Emitted when shapes are created, updated, or deleted.
|
|
9057
|
+
* @public
|
|
9058
|
+
*/
|
|
9059
|
+
export declare interface TLShapeOperationPerfEvent {
|
|
9060
|
+
/** The operation type. */
|
|
9061
|
+
operation: 'create' | 'delete' | 'update';
|
|
9062
|
+
/** Number of shapes affected. */
|
|
9063
|
+
count: number;
|
|
9064
|
+
/** Breakdown by shape type (e.g. `{ geo: 2, draw: 1 }`). */
|
|
9065
|
+
shapeTypes: Record<string, number>;
|
|
9066
|
+
/** `performance.now()` when the operation occurred. */
|
|
9067
|
+
timestamp: number;
|
|
8124
9068
|
}
|
|
8125
9069
|
|
|
8126
9070
|
/**
|
|
@@ -8180,6 +9124,7 @@ export declare interface TLShapeUtilConstructor<T extends TLShape, U extends Sha
|
|
|
8180
9124
|
type: T['type'];
|
|
8181
9125
|
props?: RecordProps<T>;
|
|
8182
9126
|
migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
9127
|
+
handledAssetTypes?: readonly string[];
|
|
8183
9128
|
}
|
|
8184
9129
|
|
|
8185
9130
|
/** @public */
|
|
@@ -8192,13 +9137,6 @@ export declare interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDi
|
|
|
8192
9137
|
children: ReactNode;
|
|
8193
9138
|
}
|
|
8194
9139
|
|
|
8195
|
-
/** @public */
|
|
8196
|
-
export declare interface TLSnapIndicatorProps {
|
|
8197
|
-
className?: string;
|
|
8198
|
-
line: SnapIndicator;
|
|
8199
|
-
zoom: number;
|
|
8200
|
-
}
|
|
8201
|
-
|
|
8202
9140
|
/** @public */
|
|
8203
9141
|
export declare interface TLStateNodeConstructor {
|
|
8204
9142
|
new (editor: Editor, parent?: StateNode): StateNode;
|
|
@@ -8207,6 +9145,7 @@ export declare interface TLStateNodeConstructor {
|
|
|
8207
9145
|
children?(): TLStateNodeConstructor[];
|
|
8208
9146
|
isLockable: boolean;
|
|
8209
9147
|
useCoalescedEvents: boolean;
|
|
9148
|
+
trackPerformance: boolean;
|
|
8210
9149
|
}
|
|
8211
9150
|
|
|
8212
9151
|
/** @public */
|
|
@@ -8219,6 +9158,14 @@ export declare interface TLStoreBaseOptions {
|
|
|
8219
9158
|
defaultName?: string;
|
|
8220
9159
|
/** How should this store upload & resolve assets? */
|
|
8221
9160
|
assets?: TLAssetStore;
|
|
9161
|
+
/**
|
|
9162
|
+
* Named theme definitions. When provided, custom color names are automatically
|
|
9163
|
+
* registered before the store is constructed so persisted data with those
|
|
9164
|
+
* colors passes validation on load.
|
|
9165
|
+
*/
|
|
9166
|
+
themes?: Partial<TLThemes>;
|
|
9167
|
+
/** How should this store resolve users for attribution? */
|
|
9168
|
+
users?: TLUserStore;
|
|
8222
9169
|
/** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
|
|
8223
9170
|
onMount?(editor: Editor): (() => void) | void;
|
|
8224
9171
|
}
|
|
@@ -8238,6 +9185,7 @@ export declare type TLStoreOptions = TLStoreBaseOptions & {
|
|
|
8238
9185
|
|
|
8239
9186
|
/** @public */
|
|
8240
9187
|
export declare type TLStoreSchemaOptions = {
|
|
9188
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
8241
9189
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
|
8242
9190
|
migrations?: readonly MigrationSequence[];
|
|
8243
9191
|
records?: Record<string, CustomRecordInfo>;
|
|
@@ -8375,6 +9323,19 @@ export declare interface TLTldrawExternalContentSource {
|
|
|
8375
9323
|
data: TLContent;
|
|
8376
9324
|
}
|
|
8377
9325
|
|
|
9326
|
+
/**
|
|
9327
|
+
* Emitted after an undo or redo operation.
|
|
9328
|
+
* @public
|
|
9329
|
+
*/
|
|
9330
|
+
export declare interface TLUndoRedoPerfEvent {
|
|
9331
|
+
/** Whether this was an undo or redo. */
|
|
9332
|
+
type: 'redo' | 'undo';
|
|
9333
|
+
/** Number of undo steps remaining. */
|
|
9334
|
+
undoDepth: number;
|
|
9335
|
+
/** Number of redo steps remaining. */
|
|
9336
|
+
redoDepth: number;
|
|
9337
|
+
}
|
|
9338
|
+
|
|
8378
9339
|
/** @public */
|
|
8379
9340
|
export declare interface TLUpdatePointerOptions {
|
|
8380
9341
|
/** Whether to update the pointer immediately, rather than on the next tick. */
|
|
@@ -8406,12 +9367,6 @@ export declare interface TLUrlExternalContent extends TLBaseExternalContent {
|
|
|
8406
9367
|
url: string;
|
|
8407
9368
|
}
|
|
8408
9369
|
|
|
8409
|
-
/** @public */
|
|
8410
|
-
export declare interface TLUser {
|
|
8411
|
-
readonly userPreferences: Signal<TLUserPreferences>;
|
|
8412
|
-
readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
|
|
8413
|
-
}
|
|
8414
|
-
|
|
8415
9370
|
/**
|
|
8416
9371
|
* A user of tldraw
|
|
8417
9372
|
*
|
|
@@ -8512,6 +9467,9 @@ export declare function uniq<T>(array: {
|
|
|
8512
9467
|
readonly length: number;
|
|
8513
9468
|
} | null | undefined): T[];
|
|
8514
9469
|
|
|
9470
|
+
/** @public */
|
|
9471
|
+
export declare function useColorMode(): 'dark' | 'light';
|
|
9472
|
+
|
|
8515
9473
|
/** @public */
|
|
8516
9474
|
export declare function useContainer(): HTMLElement;
|
|
8517
9475
|
|
|
@@ -8550,9 +9508,6 @@ export declare function useGlobalMenuIsOpen(id: string, onChange?: (isOpen: bool
|
|
|
8550
9508
|
/** @public */
|
|
8551
9509
|
export declare function useIsCropping(shapeId: TLShapeId): boolean;
|
|
8552
9510
|
|
|
8553
|
-
/** @public */
|
|
8554
|
-
export declare function useIsDarkMode(): boolean;
|
|
8555
|
-
|
|
8556
9511
|
/** @public */
|
|
8557
9512
|
export declare function useIsEditing(shapeId: TLShapeId): boolean;
|
|
8558
9513
|
|
|
@@ -8570,6 +9525,10 @@ export declare function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement
|
|
|
8570
9525
|
export declare function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>): void;
|
|
8571
9526
|
|
|
8572
9527
|
/**
|
|
9528
|
+
* Reactive list of peer user IDs for collaborators currently shown in the UI.
|
|
9529
|
+
* Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
|
|
9530
|
+
* transition to idle/inactive, without requiring a manual re-render.
|
|
9531
|
+
*
|
|
8573
9532
|
* @returns The list of peer UserIDs
|
|
8574
9533
|
* @public
|
|
8575
9534
|
*/
|
|
@@ -8590,11 +9549,11 @@ export declare function usePresence(userId: string): null | TLInstancePresence;
|
|
|
8590
9549
|
/** @public */
|
|
8591
9550
|
export declare class UserPreferencesManager {
|
|
8592
9551
|
private readonly user;
|
|
8593
|
-
private readonly
|
|
9552
|
+
private readonly colorScheme;
|
|
8594
9553
|
systemColorScheme: Atom<"dark" | "light", unknown>;
|
|
8595
9554
|
disposables: Set<() => void>;
|
|
8596
9555
|
dispose(): void;
|
|
8597
|
-
constructor(user:
|
|
9556
|
+
constructor(user: TLCurrentUser, colorScheme: 'dark' | 'light' | 'system');
|
|
8598
9557
|
updateUserPreferences(userPreferences: Partial<TLUserPreferences>): void;
|
|
8599
9558
|
getUserPreferences(): {
|
|
8600
9559
|
animationSpeed: number;
|
|
@@ -8665,10 +9624,10 @@ export declare function useSvgExportContext(): null | SvgExportContext;
|
|
|
8665
9624
|
/**
|
|
8666
9625
|
* @public
|
|
8667
9626
|
*/
|
|
8668
|
-
export declare function
|
|
9627
|
+
export declare function useTldrawCurrentUser(opts: {
|
|
8669
9628
|
setUserPreferences?: (userPreferences: TLUserPreferences) => void;
|
|
8670
9629
|
userPreferences?: Signal<TLUserPreferences> | TLUserPreferences;
|
|
8671
|
-
}):
|
|
9630
|
+
}): TLCurrentUser;
|
|
8672
9631
|
|
|
8673
9632
|
/** @public */
|
|
8674
9633
|
export declare function useTLSchemaFromUtils(opts: TLStoreSchemaOptions): StoreSchema<TLRecord, TLStoreProps>;
|