@tldraw/editor 4.6.0-next.b3995657a659 → 4.6.0-next.c198a1009190
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 +1192 -297
- package/dist-cjs/index.js +29 -25
- package/dist-cjs/index.js.map +3 -3
- package/dist-cjs/lib/TldrawEditor.js +58 -12
- 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 +46 -248
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
- package/dist-cjs/lib/config/createTLStore.js +7 -0
- 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/editor/Editor.js +357 -38
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- 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 +1 -0
- package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +98 -0
- package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +7 -0
- package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +1 -0
- package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +1 -0
- 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 +12 -0
- 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 +1 -0
- package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +1 -1
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +1 -0
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +1 -1
- package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +2 -1
- package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +1 -0
- package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +1 -0
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +1 -1
- 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 +1 -0
- package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +8 -4
- 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 +161 -0
- package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js +39 -0
- package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js.map +7 -0
- package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +79 -0
- package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +7 -0
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +43 -21
- 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/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 +1 -0
- package/dist-cjs/lib/exports/ExportDelay.js.map +1 -1
- package/dist-cjs/lib/exports/StyleEmbedder.js +1 -0
- package/dist-cjs/lib/exports/StyleEmbedder.js.map +1 -1
- package/dist-cjs/lib/exports/fetchCache.js +1 -1
- package/dist-cjs/lib/exports/fetchCache.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/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 +1 -0
- package/dist-cjs/lib/options.js.map +2 -2
- package/dist-cjs/lib/primitives/Vec.js +3 -0
- package/dist-cjs/lib/primitives/Vec.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Circle2d.js +1 -0
- package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +1 -0
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js +2 -0
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Stadium2d.js +1 -0
- package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +1 -1
- package/dist-cjs/lib/utils/EditorAtom.js +2 -0
- package/dist-cjs/lib/utils/EditorAtom.js.map +1 -1
- package/dist-cjs/lib/utils/reparenting.js +22 -8
- 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 -0
- 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 +1192 -297
- package/dist-esm/index.mjs +37 -46
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +61 -12
- 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 +47 -249
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
- package/dist-esm/lib/config/createTLStore.mjs +10 -1
- 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/editor/Editor.mjs +357 -39
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- 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 +1 -0
- package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +83 -0
- package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +1 -0
- 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 +12 -0
- 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 +1 -0
- package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +1 -0
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +2 -1
- package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +1 -1
- 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 +1 -0
- package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +8 -4
- 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 +141 -0
- package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs +19 -0
- package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs.map +7 -0
- package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +59 -0
- package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +43 -21
- 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 +1 -0
- package/dist-esm/lib/exports/ExportDelay.mjs.map +1 -1
- package/dist-esm/lib/exports/StyleEmbedder.mjs +1 -0
- package/dist-esm/lib/exports/StyleEmbedder.mjs.map +1 -1
- package/dist-esm/lib/exports/fetchCache.mjs +2 -2
- package/dist-esm/lib/exports/fetchCache.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/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 +1 -0
- package/dist-esm/lib/options.mjs.map +2 -2
- package/dist-esm/lib/primitives/Vec.mjs +3 -0
- package/dist-esm/lib/primitives/Vec.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Circle2d.mjs +1 -0
- package/dist-esm/lib/primitives/geometry/Circle2d.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +1 -0
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +2 -0
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Stadium2d.mjs +1 -0
- package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +1 -1
- package/dist-esm/lib/utils/EditorAtom.mjs +2 -0
- package/dist-esm/lib/utils/EditorAtom.mjs.map +1 -1
- package/dist-esm/lib/utils/reparenting.mjs +22 -8
- 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 -0
- 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 +4 -276
- package/package.json +7 -7
- package/src/index.ts +41 -45
- package/src/lib/TldrawEditor.tsx +99 -13
- 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 +51 -322
- package/src/lib/config/createTLStore.ts +22 -1
- package/src/lib/config/defaultAssets.ts +19 -0
- package/src/lib/editor/Editor.test.ts +3 -1
- package/src/lib/editor/Editor.ts +467 -64
- package/src/lib/editor/assets/AssetUtil.ts +85 -0
- package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +98 -0
- 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 +12 -0
- 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/SnapManager.test.ts +13 -2
- package/src/lib/editor/managers/SnapManager/SnapManager.ts +1 -1
- 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 +23 -29
- package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +5 -3
- package/src/lib/editor/overlays/OverlayManager.ts +183 -0
- package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
- package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +216 -0
- package/src/lib/editor/overlays/getOverlayDisplayValues.ts +51 -0
- package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +128 -0
- package/src/lib/editor/shapes/ShapeUtil.ts +73 -29
- 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/event-types.ts +2 -0
- package/src/lib/editor/types/external-content.ts +1 -0
- package/src/lib/exports/fetchCache.ts +2 -4
- package/src/lib/exports/getSvgJsx.test.ts +3 -1
- package/src/lib/exports/getSvgJsx.tsx +23 -16
- package/src/lib/globals/environment.ts +18 -0
- package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
- package/src/lib/hooks/useCanvasEvents.ts +45 -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 +0 -28
- package/src/lib/hooks/usePeerIds.ts +6 -55
- package/src/lib/hooks/useShapeCulling.tsx +3 -1
- package/src/lib/options.ts +7 -0
- package/src/lib/utils/reparenting.ts +28 -11
- package/src/lib/utils/richText.ts +1 -1
- package/src/lib/utils/runtime.ts +3 -1
- package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -0
- package/src/lib/utils/sync/hardReset.ts +0 -8
- package/src/version.ts +3 -3
- package/dist-cjs/lib/components/GeometryDebuggingView.js +0 -115
- package/dist-cjs/lib/components/GeometryDebuggingView.js.map +0 -7
- package/dist-cjs/lib/components/LiveCollaborators.js +0 -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/DefaultCursor.js +0 -59
- package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
- package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultHandles.js.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/hooks/useHandleEvents.js +0 -100
- package/dist-cjs/lib/hooks/useHandleEvents.js.map +0 -7
- package/dist-cjs/lib/hooks/useIsDarkMode.js.map +0 -7
- package/dist-cjs/lib/hooks/useSelectionEvents.js +0 -98
- package/dist-cjs/lib/hooks/useSelectionEvents.js.map +0 -7
- package/dist-esm/lib/components/GeometryDebuggingView.mjs +0 -95
- package/dist-esm/lib/components/GeometryDebuggingView.mjs.map +0 -7
- package/dist-esm/lib/components/LiveCollaborators.mjs +0 -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/DefaultCursor.mjs +0 -29
- package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
- package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
- package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
- package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -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/hooks/useHandleEvents.mjs +0 -70
- package/dist-esm/lib/hooks/useHandleEvents.mjs.map +0 -7
- package/dist-esm/lib/hooks/useIsDarkMode.mjs +0 -15
- package/dist-esm/lib/hooks/useIsDarkMode.mjs.map +0 -7
- package/dist-esm/lib/hooks/useSelectionEvents.mjs +0 -78
- package/dist-esm/lib/hooks/useSelectionEvents.mjs.map +0 -7
- package/src/lib/components/GeometryDebuggingView.tsx +0 -108
- package/src/lib/components/LiveCollaborators.tsx +0 -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/DefaultCursor.tsx +0 -59
- package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
- package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
- package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
- package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
- package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
- package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
- package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -116
- package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
- package/src/lib/hooks/useHandleEvents.ts +0 -88
- package/src/lib/hooks/useSelectionEvents.ts +0 -97
package/dist-cjs/index.d.ts
CHANGED
|
@@ -19,11 +19,8 @@ import { JsonObject } from '@tldraw/utils';
|
|
|
19
19
|
import { JSX } from 'react/jsx-runtime';
|
|
20
20
|
import { LegacyMigrations } from '@tldraw/store';
|
|
21
21
|
import { MigrationSequence } from '@tldraw/store';
|
|
22
|
-
import { NamedExoticComponent } from 'react';
|
|
23
22
|
import { Node as Node_2 } from '@tiptap/pm/model';
|
|
24
23
|
import { PerformanceTracker } from '@tldraw/utils';
|
|
25
|
-
import { PointerEvent as PointerEvent_2 } from 'react';
|
|
26
|
-
import { PointerEventHandler } from 'react';
|
|
27
24
|
import * as React_2 from 'react';
|
|
28
25
|
import { default as React_3 } from 'react';
|
|
29
26
|
import { ReactElement } from 'react';
|
|
@@ -57,9 +54,12 @@ import { TLCamera } from '@tldraw/tlschema';
|
|
|
57
54
|
import { TLCreateShapePartial } from '@tldraw/tlschema';
|
|
58
55
|
import { TLCursor } from '@tldraw/tlschema';
|
|
59
56
|
import { TLCursorType } from '@tldraw/tlschema';
|
|
57
|
+
import { TLDefaultColor } from '@tldraw/tlschema';
|
|
58
|
+
import { TLDefaultColorStyle } from '@tldraw/tlschema';
|
|
60
59
|
import { TLDefaultDashStyle } from '@tldraw/tlschema';
|
|
61
60
|
import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
|
|
62
61
|
import { TLDocument } from '@tldraw/tlschema';
|
|
62
|
+
import { TLFontFace } from '@tldraw/tlschema';
|
|
63
63
|
import { TLGroupShape } from '@tldraw/tlschema';
|
|
64
64
|
import { TLHandle } from '@tldraw/tlschema';
|
|
65
65
|
import { TLImageAsset } from '@tldraw/tlschema';
|
|
@@ -81,6 +81,11 @@ import { TLStore } from '@tldraw/tlschema';
|
|
|
81
81
|
import { TLStoreProps } from '@tldraw/tlschema';
|
|
82
82
|
import { TLStoreSchema } from '@tldraw/tlschema';
|
|
83
83
|
import { TLStoreSnapshot } from '@tldraw/tlschema';
|
|
84
|
+
import { TLTheme } from '@tldraw/tlschema';
|
|
85
|
+
import { TLThemeColors } from '@tldraw/tlschema';
|
|
86
|
+
import { TLThemeId } from '@tldraw/tlschema';
|
|
87
|
+
import { TLThemes } from '@tldraw/tlschema';
|
|
88
|
+
import { TLUnknownAsset } from '@tldraw/tlschema';
|
|
84
89
|
import { TLUnknownBinding } from '@tldraw/tlschema';
|
|
85
90
|
import { TLUnknownShape } from '@tldraw/tlschema';
|
|
86
91
|
import { TLUser } from '@tldraw/tlschema';
|
|
@@ -147,6 +152,51 @@ export declare class Arc2d extends Geometry2d {
|
|
|
147
152
|
*/
|
|
148
153
|
export declare function areAnglesCompatible(a: number, b: number): boolean;
|
|
149
154
|
|
|
155
|
+
/**
|
|
156
|
+
* Abstract base class for defining asset-type-specific behavior.
|
|
157
|
+
*
|
|
158
|
+
* Each asset type (image, video, bookmark, etc.) has a corresponding AssetUtil that handles
|
|
159
|
+
* type-specific operations like determining supported MIME types and creating assets from files.
|
|
160
|
+
*
|
|
161
|
+
* @public
|
|
162
|
+
*/
|
|
163
|
+
export declare abstract class AssetUtil<Asset extends TLAsset = TLAsset> {
|
|
164
|
+
editor: Editor;
|
|
165
|
+
/** Configure this asset util's {@link AssetUtil.options | `options`}. */
|
|
166
|
+
static configure<T extends TLAssetUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
|
|
167
|
+
options: infer Options;
|
|
168
|
+
} ? Partial<Options> : never): T;
|
|
169
|
+
constructor(editor: Editor);
|
|
170
|
+
/**
|
|
171
|
+
* Options for this asset util. Override this to provide customization options for your asset.
|
|
172
|
+
* Use {@link AssetUtil.configure} to customize existing asset utils.
|
|
173
|
+
*/
|
|
174
|
+
options: {};
|
|
175
|
+
static props?: RecordProps<TLUnknownAsset>;
|
|
176
|
+
static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
177
|
+
/**
|
|
178
|
+
* The type of the asset util, which should match the asset's type.
|
|
179
|
+
*/
|
|
180
|
+
static type: string;
|
|
181
|
+
/**
|
|
182
|
+
* Get the default props for an asset of this type.
|
|
183
|
+
*/
|
|
184
|
+
abstract getDefaultProps(): Asset['props'];
|
|
185
|
+
/**
|
|
186
|
+
* Get the MIME types that this asset type supports.
|
|
187
|
+
* Return an empty array if this asset type doesn't support files (e.g. bookmarks).
|
|
188
|
+
*/
|
|
189
|
+
getSupportedMimeTypes(): readonly string[];
|
|
190
|
+
/**
|
|
191
|
+
* Check whether this asset type accepts a given MIME type.
|
|
192
|
+
*/
|
|
193
|
+
acceptsMimeType(mimeType: string): boolean;
|
|
194
|
+
/**
|
|
195
|
+
* Create an asset from a file. Return null if this asset type can't handle the file.
|
|
196
|
+
*/
|
|
197
|
+
getAssetFromFile(_file: File, _assetId: TLAssetId): Promise<Asset | null>;
|
|
198
|
+
}
|
|
199
|
+
|
|
150
200
|
/** @public */
|
|
151
201
|
export declare function average(A: VecLike, B: VecLike): string;
|
|
152
202
|
|
|
@@ -167,6 +217,58 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
|
|
|
167
217
|
getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
|
|
168
218
|
}
|
|
169
219
|
|
|
220
|
+
/**
|
|
221
|
+
* A base class for frame-like shapes — containers that clip their children,
|
|
222
|
+
* require full-brush selection, block erasure from inside, and support
|
|
223
|
+
* drag-and-drop reparenting.
|
|
224
|
+
*
|
|
225
|
+
* Extending this class is the easiest way to create a custom frame-like shape.
|
|
226
|
+
* It provides sensible defaults for all frame-like behaviors:
|
|
227
|
+
*
|
|
228
|
+
* - `isFrameLike()` returns `true`
|
|
229
|
+
* - `providesBackgroundForChildren()` returns `true`
|
|
230
|
+
* - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
|
|
231
|
+
* - `canRemoveChildrenOfType()` returns `true` unless the container is locked
|
|
232
|
+
* - `getClipPath()` returns the shape geometry's vertices
|
|
233
|
+
* - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
|
|
234
|
+
* - `onDragShapesOut()` reparents shapes back to the page
|
|
235
|
+
*
|
|
236
|
+
* All methods can be overridden for custom behavior.
|
|
237
|
+
*
|
|
238
|
+
* @example
|
|
239
|
+
* ```ts
|
|
240
|
+
* class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {
|
|
241
|
+
* static override type = 'my-container' as const
|
|
242
|
+
* static override props = myContainerShapeProps
|
|
243
|
+
*
|
|
244
|
+
* override getDefaultProps() {
|
|
245
|
+
* return { w: 300, h: 200 }
|
|
246
|
+
* }
|
|
247
|
+
*
|
|
248
|
+
* override component(shape: MyContainerShape) {
|
|
249
|
+
* return <SVGContainer>...</SVGContainer>
|
|
250
|
+
* }
|
|
251
|
+
*
|
|
252
|
+
* override getIndicatorPath(shape: MyContainerShape) {
|
|
253
|
+
* const path = new Path2D()
|
|
254
|
+
* path.rect(0, 0, shape.props.w, shape.props.h)
|
|
255
|
+
* return path
|
|
256
|
+
* }
|
|
257
|
+
* }
|
|
258
|
+
* ```
|
|
259
|
+
*
|
|
260
|
+
* @public
|
|
261
|
+
*/
|
|
262
|
+
export declare abstract class BaseFrameLikeShapeUtil<Shape extends TLBaseBoxShape> extends BaseBoxShapeUtil<Shape> {
|
|
263
|
+
isFrameLike(_shape: Shape): boolean;
|
|
264
|
+
providesBackgroundForChildren(): boolean;
|
|
265
|
+
canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
|
|
266
|
+
canRemoveChildrenOfType(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
|
+
|
|
170
272
|
/** @public */
|
|
171
273
|
export declare interface BatchMeasurementRequest {
|
|
172
274
|
html: string;
|
|
@@ -666,6 +768,49 @@ export declare class ClickManager {
|
|
|
666
768
|
*/
|
|
667
769
|
export declare function clockwiseAngleDist(a0: number, a1: number): number;
|
|
668
770
|
|
|
771
|
+
/**
|
|
772
|
+
* Tracks remote peers and exposes the collaborator-related queries used by the
|
|
773
|
+
* editor and its overlays. Encapsulates the visibility clock that periodically
|
|
774
|
+
* re-evaluates which collaborators should be visible based on activity.
|
|
775
|
+
*
|
|
776
|
+
* Accessed via {@link Editor.collaborators}.
|
|
777
|
+
*
|
|
778
|
+
* @public
|
|
779
|
+
*/
|
|
780
|
+
export declare class CollaboratorsManager {
|
|
781
|
+
private readonly editor;
|
|
782
|
+
constructor(editor: Editor);
|
|
783
|
+
/**
|
|
784
|
+
* Drives reactive re-evaluation of {@link CollaboratorsManager.getVisibleCollaborators}.
|
|
785
|
+
* Ticked on a fixed interval so callers don't need to manage their own activity timers.
|
|
786
|
+
*/
|
|
787
|
+
private readonly _visibilityClock;
|
|
788
|
+
private _getCollaboratorsQuery;
|
|
789
|
+
/**
|
|
790
|
+
* Returns a list of presence records for all peer collaborators.
|
|
791
|
+
* This will return the latest presence record for each connected user.
|
|
792
|
+
*/
|
|
793
|
+
getCollaborators(): TLInstancePresence[];
|
|
794
|
+
/**
|
|
795
|
+
* Returns a list of presence records for all peer collaborators on the current page.
|
|
796
|
+
* This will return the latest presence record for each connected user.
|
|
797
|
+
*/
|
|
798
|
+
getCollaboratorsOnCurrentPage(): TLInstancePresence[];
|
|
799
|
+
/**
|
|
800
|
+
* Returns a list of presence records for peer collaborators who should currently be
|
|
801
|
+
* shown in the UI. Filters {@link CollaboratorsManager.getCollaborators} by activity
|
|
802
|
+
* state (active / idle / inactive) and visibility rules such as following and
|
|
803
|
+
* highlighted users. Re-evaluates on the visibility clock, so callers don't need to
|
|
804
|
+
* drive their own activity timer.
|
|
805
|
+
*/
|
|
806
|
+
getVisibleCollaborators(): TLInstancePresence[];
|
|
807
|
+
/**
|
|
808
|
+
* Returns a list of presence records for peer collaborators who should currently be
|
|
809
|
+
* shown in the UI, filtered to those on the current page.
|
|
810
|
+
*/
|
|
811
|
+
getVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[];
|
|
812
|
+
}
|
|
813
|
+
|
|
669
814
|
/**
|
|
670
815
|
* @public
|
|
671
816
|
* @react
|
|
@@ -743,7 +888,7 @@ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): Sto
|
|
|
743
888
|
*
|
|
744
889
|
* @public
|
|
745
890
|
*/
|
|
746
|
-
export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, ...rest }?: TLStoreOptions): TLStore;
|
|
891
|
+
export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, themes, ...rest }?: TLStoreOptions): TLStore;
|
|
747
892
|
|
|
748
893
|
/** @public */
|
|
749
894
|
export declare class CubicBezier2d extends Polyline2d {
|
|
@@ -818,54 +963,31 @@ export declare interface DebugFlagDefaults<T> {
|
|
|
818
963
|
|
|
819
964
|
/* Excluded from this release type: DEFAULT_CAMERA_OPTIONS */
|
|
820
965
|
|
|
821
|
-
/**
|
|
822
|
-
|
|
966
|
+
/**
|
|
967
|
+
* The default theme definition containing color palettes for both light and dark modes.
|
|
968
|
+
*
|
|
969
|
+
* @public
|
|
970
|
+
*/
|
|
971
|
+
export declare const DEFAULT_THEME: TLTheme;
|
|
823
972
|
|
|
824
973
|
/** @public @react */
|
|
825
|
-
export declare
|
|
974
|
+
export declare function DefaultBackground(): JSX.Element;
|
|
826
975
|
|
|
827
976
|
/** @public @react */
|
|
828
977
|
export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
|
|
829
978
|
|
|
830
|
-
/** @public @react */
|
|
831
|
-
export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
|
|
832
|
-
|
|
833
|
-
/** @public @react */
|
|
834
|
-
export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
|
|
835
|
-
|
|
836
979
|
/** @public @react */
|
|
837
980
|
export declare const DefaultErrorFallback: TLErrorFallbackComponent;
|
|
838
981
|
|
|
839
982
|
/** @public @react */
|
|
840
983
|
export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element;
|
|
841
984
|
|
|
842
|
-
/** @public @react */
|
|
843
|
-
export declare function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX.Element;
|
|
844
|
-
|
|
845
|
-
/** @public @react */
|
|
846
|
-
export declare const DefaultHandles: ({ children }: TLHandlesProps) => JSX.Element;
|
|
847
|
-
|
|
848
|
-
/** @public @react */
|
|
849
|
-
export declare function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null;
|
|
850
|
-
|
|
851
985
|
/** @public @react */
|
|
852
986
|
export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element;
|
|
853
987
|
|
|
854
|
-
/** @public @react */
|
|
855
|
-
export declare function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX.Element;
|
|
856
|
-
|
|
857
|
-
/** @public @react */
|
|
858
|
-
export declare const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
|
|
859
|
-
|
|
860
|
-
/** @public @react */
|
|
861
|
-
export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
|
|
862
|
-
|
|
863
988
|
/** @public @react */
|
|
864
989
|
export declare const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
|
|
865
990
|
|
|
866
|
-
/** @public @react */
|
|
867
|
-
export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX.Element;
|
|
868
|
-
|
|
869
991
|
/** @public @react */
|
|
870
992
|
export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX.Element;
|
|
871
993
|
|
|
@@ -936,6 +1058,7 @@ export declare const defaultTldrawOptions: {
|
|
|
936
1058
|
readonly onBeforePasteFromClipboard: undefined;
|
|
937
1059
|
readonly onClipboardPasteRaw: undefined;
|
|
938
1060
|
readonly quickZoomPreservesScreenBounds: true;
|
|
1061
|
+
readonly rightClickPanning: true;
|
|
939
1062
|
readonly snapThreshold: 8;
|
|
940
1063
|
readonly spacebarPanning: true;
|
|
941
1064
|
readonly temporaryAssetPreviewLifetimeMs: 180000;
|
|
@@ -1043,7 +1166,7 @@ export declare class EdgeScrollManager {
|
|
|
1043
1166
|
/** @public */
|
|
1044
1167
|
export declare class Editor extends EventEmitter<TLEventMap> {
|
|
1045
1168
|
readonly id: string;
|
|
1046
|
-
constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus,
|
|
1169
|
+
constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, overlayUtils: overlayUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
|
|
1047
1170
|
private readonly _getShapeVisibility?;
|
|
1048
1171
|
private getIsShapeHiddenCache;
|
|
1049
1172
|
isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
|
|
@@ -1106,7 +1229,13 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1106
1229
|
* @public
|
|
1107
1230
|
*/
|
|
1108
1231
|
readonly snaps: SnapManager;
|
|
1109
|
-
|
|
1232
|
+
/**
|
|
1233
|
+
* A manager for performance measurement hooks.
|
|
1234
|
+
*
|
|
1235
|
+
* @public
|
|
1236
|
+
*/
|
|
1237
|
+
readonly performance: PerformanceManager;
|
|
1238
|
+
/* Excluded from this release type: _spatialIndex */
|
|
1110
1239
|
/**
|
|
1111
1240
|
* A manager for the any asynchronous events and making sure they're
|
|
1112
1241
|
* cleaned up upon disposal.
|
|
@@ -1119,12 +1248,19 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1119
1248
|
setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
|
|
1120
1249
|
setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
|
|
1121
1250
|
};
|
|
1251
|
+
/**
|
|
1252
|
+
* A manager for remote peer collaborators connected to this editor.
|
|
1253
|
+
*
|
|
1254
|
+
* @public
|
|
1255
|
+
*/
|
|
1256
|
+
readonly collaborators: CollaboratorsManager;
|
|
1122
1257
|
/**
|
|
1123
1258
|
* A manager for the user and their preferences.
|
|
1124
1259
|
*
|
|
1125
1260
|
* @public
|
|
1126
1261
|
*/
|
|
1127
1262
|
readonly user: UserPreferencesManager;
|
|
1263
|
+
/* Excluded from this release type: _themeManager */
|
|
1128
1264
|
/**
|
|
1129
1265
|
* A helper for measuring text.
|
|
1130
1266
|
*
|
|
@@ -1143,6 +1279,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1143
1279
|
* @public
|
|
1144
1280
|
*/
|
|
1145
1281
|
readonly scribbles: ScribbleManager;
|
|
1282
|
+
/**
|
|
1283
|
+
* A manager for canvas overlay UI elements (selection handles, shape handles, etc.).
|
|
1284
|
+
*
|
|
1285
|
+
* @public
|
|
1286
|
+
*/
|
|
1287
|
+
readonly overlays: OverlayManager;
|
|
1146
1288
|
/**
|
|
1147
1289
|
* A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details.
|
|
1148
1290
|
*
|
|
@@ -1175,6 +1317,83 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1175
1317
|
* @public
|
|
1176
1318
|
*/
|
|
1177
1319
|
dispose(): void;
|
|
1320
|
+
/**
|
|
1321
|
+
* Get the current color mode (`'light'` or `'dark'`), based on the user's dark mode preference.
|
|
1322
|
+
*
|
|
1323
|
+
* @public
|
|
1324
|
+
*/
|
|
1325
|
+
getColorMode(): 'dark' | 'light';
|
|
1326
|
+
/**
|
|
1327
|
+
* Set the color mode. Note that this is a convenience method that passes the mode to
|
|
1328
|
+
* `user.updateUserPreferences`, which is the source of truth for the user's color mode preference.
|
|
1329
|
+
*
|
|
1330
|
+
* @public
|
|
1331
|
+
*/
|
|
1332
|
+
setColorMode(mode: 'dark' | 'light'): this;
|
|
1333
|
+
/**
|
|
1334
|
+
* Get the id of the current theme.
|
|
1335
|
+
*
|
|
1336
|
+
* @public
|
|
1337
|
+
*/
|
|
1338
|
+
getCurrentThemeId(): TLThemeId;
|
|
1339
|
+
/**
|
|
1340
|
+
* Get the current theme definition.
|
|
1341
|
+
*
|
|
1342
|
+
* @public
|
|
1343
|
+
*/
|
|
1344
|
+
getCurrentTheme(): TLTheme;
|
|
1345
|
+
/**
|
|
1346
|
+
* Set the current theme by id.
|
|
1347
|
+
*
|
|
1348
|
+
* @public
|
|
1349
|
+
*/
|
|
1350
|
+
setCurrentTheme(id: TLThemeId): this;
|
|
1351
|
+
/**
|
|
1352
|
+
* Get all registered theme definitions.
|
|
1353
|
+
*
|
|
1354
|
+
* @public
|
|
1355
|
+
*/
|
|
1356
|
+
getThemes(): TLThemes;
|
|
1357
|
+
/**
|
|
1358
|
+
* Get a single theme definition by id.
|
|
1359
|
+
*
|
|
1360
|
+
* @public
|
|
1361
|
+
*/
|
|
1362
|
+
getTheme(id: TLThemeId): TLTheme | undefined;
|
|
1363
|
+
/**
|
|
1364
|
+
* Replace all theme definitions, or update them via a callback that receives a deep copy.
|
|
1365
|
+
* The `'default'` theme must always be present in the result.
|
|
1366
|
+
*
|
|
1367
|
+
* @example
|
|
1368
|
+
* ```ts
|
|
1369
|
+
* // Replace all themes
|
|
1370
|
+
* editor.updateThemes({ default: myDefaultTheme, ocean: myOceanTheme })
|
|
1371
|
+
*
|
|
1372
|
+
* // Update via callback
|
|
1373
|
+
* editor.updateThemes((themes) => {
|
|
1374
|
+
* delete themes.ocean
|
|
1375
|
+
* return themes
|
|
1376
|
+
* })
|
|
1377
|
+
* ```
|
|
1378
|
+
*
|
|
1379
|
+
* @public
|
|
1380
|
+
*/
|
|
1381
|
+
updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): this;
|
|
1382
|
+
/**
|
|
1383
|
+
* Register or update a single theme definition. The theme is keyed by its `id` property.
|
|
1384
|
+
*
|
|
1385
|
+
* @example
|
|
1386
|
+
* ```ts
|
|
1387
|
+
* // Override a property on the default theme
|
|
1388
|
+
* editor.updateTheme({ ...editor.getTheme('default')!, fontSize: 24 })
|
|
1389
|
+
*
|
|
1390
|
+
* // Register a new theme
|
|
1391
|
+
* editor.updateTheme({ id: 'ocean', ...myOceanTheme })
|
|
1392
|
+
* ```
|
|
1393
|
+
*
|
|
1394
|
+
* @public
|
|
1395
|
+
*/
|
|
1396
|
+
updateTheme(theme: TLTheme): this;
|
|
1178
1397
|
/**
|
|
1179
1398
|
* A map of shape utility classes (TLShapeUtils) by shape type.
|
|
1180
1399
|
*
|
|
@@ -1183,6 +1402,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1183
1402
|
shapeUtils: {
|
|
1184
1403
|
readonly [K in string]?: ShapeUtil<TLShape>;
|
|
1185
1404
|
};
|
|
1405
|
+
/* Excluded from this release type: _shapeUtilsByAssetType */
|
|
1186
1406
|
styleProps: {
|
|
1187
1407
|
[key: string]: Map<StyleProp<any>, string>;
|
|
1188
1408
|
};
|
|
@@ -1214,6 +1434,15 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1214
1434
|
hasShapeUtil(shape: TLShape | TLShapePartial<TLShape>): boolean;
|
|
1215
1435
|
hasShapeUtil(type: TLShape['type']): boolean;
|
|
1216
1436
|
hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
|
|
1437
|
+
/**
|
|
1438
|
+
* Get the shape util that handles the given asset type.
|
|
1439
|
+
* Returns the shape util whose {@link ShapeUtil.handledAssetTypes} includes
|
|
1440
|
+
* the given asset type, or undefined if none matches.
|
|
1441
|
+
*
|
|
1442
|
+
* @param assetType - The asset type string.
|
|
1443
|
+
* @public
|
|
1444
|
+
*/
|
|
1445
|
+
getShapeUtilForAssetType(assetType: string): ShapeUtil | undefined;
|
|
1217
1446
|
/**
|
|
1218
1447
|
* A map of shape utility classes (TLShapeUtils) by shape type.
|
|
1219
1448
|
*
|
|
@@ -1244,6 +1473,40 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1244
1473
|
type: S['type'];
|
|
1245
1474
|
} | S): BindingUtil<S>;
|
|
1246
1475
|
getBindingUtil<T extends BindingUtil>(type: T extends BindingUtil<infer R> ? R['type'] : string): T;
|
|
1476
|
+
/**
|
|
1477
|
+
* A map of asset utility classes by asset type.
|
|
1478
|
+
*
|
|
1479
|
+
* @public
|
|
1480
|
+
*/
|
|
1481
|
+
assetUtils: {
|
|
1482
|
+
readonly [K in string]?: AssetUtil<TLAsset>;
|
|
1483
|
+
};
|
|
1484
|
+
/**
|
|
1485
|
+
* Get an asset util from an asset or asset type.
|
|
1486
|
+
*
|
|
1487
|
+
* @param arg - An asset, asset type string, or object with type.
|
|
1488
|
+
*
|
|
1489
|
+
* @public
|
|
1490
|
+
*/
|
|
1491
|
+
getAssetUtil<S extends TLAsset>(asset: {
|
|
1492
|
+
type: S['type'];
|
|
1493
|
+
} | S): AssetUtil<S>;
|
|
1494
|
+
getAssetUtil(type: string): AssetUtil;
|
|
1495
|
+
/**
|
|
1496
|
+
* Returns true if the editor has an asset util for the given asset type.
|
|
1497
|
+
*
|
|
1498
|
+
* @public
|
|
1499
|
+
*/
|
|
1500
|
+
hasAssetUtil(arg: {
|
|
1501
|
+
type: string;
|
|
1502
|
+
} | string): boolean;
|
|
1503
|
+
/**
|
|
1504
|
+
* Get the asset util that accepts the given MIME type.
|
|
1505
|
+
* Returns null if no registered asset util accepts the MIME type.
|
|
1506
|
+
*
|
|
1507
|
+
* @public
|
|
1508
|
+
*/
|
|
1509
|
+
getAssetUtilForMimeType(mimeType: string): AssetUtil | null;
|
|
1247
1510
|
/**
|
|
1248
1511
|
* A manager for the editor's history.
|
|
1249
1512
|
*
|
|
@@ -1500,6 +1763,11 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
1500
1763
|
/**
|
|
1501
1764
|
* Set the cursor.
|
|
1502
1765
|
*
|
|
1766
|
+
* No-op when the partial wouldn't change the current cursor — `setCursor`
|
|
1767
|
+
* is called from pointer-move hot paths (see `updateHoveredOverlayId`,
|
|
1768
|
+
* various tool states) and skipping redundant writes avoids needlessly
|
|
1769
|
+
* dirtying instance state.
|
|
1770
|
+
*
|
|
1503
1771
|
* @param cursor - The cursor to set.
|
|
1504
1772
|
* @public
|
|
1505
1773
|
*/
|
|
@@ -2259,11 +2527,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
2259
2527
|
* @public
|
|
2260
2528
|
*/
|
|
2261
2529
|
pageToViewport(point: VecLike): Vec;
|
|
2262
|
-
private _getCollaboratorsQuery;
|
|
2263
2530
|
/**
|
|
2264
2531
|
* Returns a list of presence records for all peer collaborators.
|
|
2265
2532
|
* This will return the latest presence record for each connected user.
|
|
2266
2533
|
*
|
|
2534
|
+
* Convenience wrapper for {@link CollaboratorsManager.getCollaborators}.
|
|
2535
|
+
*
|
|
2267
2536
|
* @public
|
|
2268
2537
|
*/
|
|
2269
2538
|
getCollaborators(): TLInstancePresence[];
|
|
@@ -2271,9 +2540,32 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
2271
2540
|
* Returns a list of presence records for all peer collaborators on the current page.
|
|
2272
2541
|
* This will return the latest presence record for each connected user.
|
|
2273
2542
|
*
|
|
2543
|
+
* Convenience wrapper for {@link CollaboratorsManager.getCollaboratorsOnCurrentPage}.
|
|
2544
|
+
*
|
|
2274
2545
|
* @public
|
|
2275
2546
|
*/
|
|
2276
2547
|
getCollaboratorsOnCurrentPage(): TLInstancePresence[];
|
|
2548
|
+
/**
|
|
2549
|
+
* Returns a list of presence records for peer collaborators who should currently be
|
|
2550
|
+
* shown in the UI. Filters {@link Editor.getCollaborators} by activity state
|
|
2551
|
+
* (active / idle / inactive) and visibility rules such as following and highlighted
|
|
2552
|
+
* users. Re-evaluates on the collaborator visibility clock, so callers don't need to
|
|
2553
|
+
* drive their own activity timer.
|
|
2554
|
+
*
|
|
2555
|
+
* Convenience wrapper for {@link CollaboratorsManager.getVisibleCollaborators}.
|
|
2556
|
+
*
|
|
2557
|
+
* @public
|
|
2558
|
+
*/
|
|
2559
|
+
getVisibleCollaborators(): TLInstancePresence[];
|
|
2560
|
+
/**
|
|
2561
|
+
* Returns a list of presence records for peer collaborators who should currently be
|
|
2562
|
+
* shown in the UI, filtered to those on the current page.
|
|
2563
|
+
*
|
|
2564
|
+
* Convenience wrapper for {@link CollaboratorsManager.getVisibleCollaboratorsOnCurrentPage}.
|
|
2565
|
+
*
|
|
2566
|
+
* @public
|
|
2567
|
+
*/
|
|
2568
|
+
getVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[];
|
|
2277
2569
|
/**
|
|
2278
2570
|
* Get the current user's ID for attribution purposes.
|
|
2279
2571
|
* Also ensures a `user:` record exists in the store for the current user.
|
|
@@ -2934,6 +3226,20 @@ export declare class Editor extends EventEmitter<TLEventMap> {
|
|
|
2934
3226
|
type: T['type'];
|
|
2935
3227
|
}>;
|
|
2936
3228
|
isShapeOfType<T extends TLShape = TLShape>(shapeId: TLShapeId, type: T['type']): boolean;
|
|
3229
|
+
/**
|
|
3230
|
+
* Get whether a shape behaves like a frame — a container that has child
|
|
3231
|
+
* shapes, requires full-brush selection, blocks erasure from inside, etc.
|
|
3232
|
+
*
|
|
3233
|
+
* @example
|
|
3234
|
+
* ```ts
|
|
3235
|
+
* const isFrameLike = editor.isShapeFrameLike(someShape)
|
|
3236
|
+
* ```
|
|
3237
|
+
*
|
|
3238
|
+
* @param shape - The shape (or shape id) to test.
|
|
3239
|
+
*
|
|
3240
|
+
* @public
|
|
3241
|
+
*/
|
|
3242
|
+
isShapeFrameLike(shape: TLShape | TLShapeId): boolean;
|
|
2937
3243
|
/**
|
|
2938
3244
|
* Get a shape by its id.
|
|
2939
3245
|
*
|
|
@@ -4394,6 +4700,35 @@ export declare interface Geometry2dOptions extends TransformedGeometry2dOptions
|
|
|
4394
4700
|
*/
|
|
4395
4701
|
export declare function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
|
|
4396
4702
|
|
|
4703
|
+
/**
|
|
4704
|
+
* Resolves a color style value to its actual CSS color string for a given theme and variant.
|
|
4705
|
+
* If the color is not a default theme color, returns the color value as-is.
|
|
4706
|
+
*
|
|
4707
|
+
* @param colors - The color palette for the current color mode (e.g. `theme.colors[colorMode]`)
|
|
4708
|
+
* @param color - The color style value to resolve
|
|
4709
|
+
* @param variant - Which variant of the color to return (solid, fill, pattern, etc.)
|
|
4710
|
+
* @returns The CSS color string for the specified color and variant
|
|
4711
|
+
*
|
|
4712
|
+
* @example
|
|
4713
|
+
* ```ts
|
|
4714
|
+
* import { getColorValue } from 'tldraw'
|
|
4715
|
+
*
|
|
4716
|
+
* const colors = editor.getCurrentTheme().colors[editor.getColorMode()]
|
|
4717
|
+
*
|
|
4718
|
+
* // Get the solid variant of red
|
|
4719
|
+
* const redSolid = getColorValue(colors, 'red', 'solid') // '#e03131'
|
|
4720
|
+
*
|
|
4721
|
+
* // Get the fill variant of blue
|
|
4722
|
+
* const blueFill = getColorValue(colors, 'blue', 'fill') // '#4465e9'
|
|
4723
|
+
*
|
|
4724
|
+
* // Custom color passes through unchanged
|
|
4725
|
+
* const customColor = getColorValue(colors, '#ff0000', 'solid') // '#ff0000'
|
|
4726
|
+
* ```
|
|
4727
|
+
*
|
|
4728
|
+
* @public
|
|
4729
|
+
*/
|
|
4730
|
+
export declare function getColorValue(colors: TLThemeColors, color: string | TLDefaultColorStyle, variant: keyof TLDefaultColor): string;
|
|
4731
|
+
|
|
4397
4732
|
/** @public */
|
|
4398
4733
|
export declare function getCursor(cursor: TLCursorType, rotation?: number, color?: string): string;
|
|
4399
4734
|
|
|
@@ -4438,6 +4773,16 @@ export declare function getFreshUserPreferences(): TLUserPreferences;
|
|
|
4438
4773
|
*/
|
|
4439
4774
|
export declare function getIncrementedName(name: string, others: string[]): string;
|
|
4440
4775
|
|
|
4776
|
+
/**
|
|
4777
|
+
* Get the resolved display values for an overlay, merging the base values with any overrides.
|
|
4778
|
+
*
|
|
4779
|
+
* @public
|
|
4780
|
+
*/
|
|
4781
|
+
export declare function getOverlayDisplayValues<Overlay extends TLOverlay, DisplayValues extends object>(util: {
|
|
4782
|
+
editor: Editor;
|
|
4783
|
+
options: OverlayOptionsWithDisplayValues<Overlay, DisplayValues>;
|
|
4784
|
+
}, overlay: Overlay, colorMode?: 'dark' | 'light'): DisplayValues;
|
|
4785
|
+
|
|
4441
4786
|
/* Excluded from this release type: getOwnerDocument */
|
|
4442
4787
|
|
|
4443
4788
|
/* Excluded from this release type: getOwnerWindow */
|
|
@@ -4564,14 +4909,14 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
|
|
|
4564
4909
|
static type: "group";
|
|
4565
4910
|
static props: RecordProps<TLGroupShape>;
|
|
4566
4911
|
static migrations: TLPropsMigrations;
|
|
4567
|
-
hideSelectionBoundsFg(): boolean;
|
|
4912
|
+
hideSelectionBoundsFg(shape: TLGroupShape): boolean;
|
|
4568
4913
|
canBind(): boolean;
|
|
4569
4914
|
canResize(): boolean;
|
|
4570
4915
|
canResizeChildren(): boolean;
|
|
4571
4916
|
getDefaultProps(): TLGroupShape['props'];
|
|
4572
4917
|
getGeometry(shape: TLGroupShape): Geometry2d;
|
|
4573
4918
|
component(shape: TLGroupShape): JSX.Element | null;
|
|
4574
|
-
|
|
4919
|
+
getIndicatorPath(shape: TLGroupShape): Path2D;
|
|
4575
4920
|
onChildrenChange(group: TLGroupShape): void;
|
|
4576
4921
|
}
|
|
4577
4922
|
|
|
@@ -4850,6 +5195,12 @@ export declare class InputsManager {
|
|
|
4850
5195
|
get isPointing(): boolean;
|
|
4851
5196
|
set isPointing(isPointing: boolean);
|
|
4852
5197
|
/* Excluded from this release type: setIsPointing */
|
|
5198
|
+
private _isRightPointing;
|
|
5199
|
+
/**
|
|
5200
|
+
* Whether the user is right-click pointing (before drag threshold).
|
|
5201
|
+
*/
|
|
5202
|
+
getIsRightPointing(): boolean;
|
|
5203
|
+
/* Excluded from this release type: setIsRightPointing */
|
|
4853
5204
|
private _isPinching;
|
|
4854
5205
|
/**
|
|
4855
5206
|
* Whether the user is pinching.
|
|
@@ -5193,41 +5544,308 @@ export declare function openWindow(url: string, target?: string, allowReferrer?:
|
|
|
5193
5544
|
/** @public */
|
|
5194
5545
|
export declare type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
|
5195
5546
|
|
|
5196
|
-
/**
|
|
5197
|
-
* Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
|
|
5198
|
-
*
|
|
5199
|
-
* @param deepLinkString - the deep link string
|
|
5200
|
-
* @returns a deep link descriptor
|
|
5201
|
-
*
|
|
5202
|
-
* @public
|
|
5203
|
-
*/
|
|
5204
|
-
export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
|
|
5205
|
-
|
|
5206
|
-
/** @public */
|
|
5207
|
-
export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
|
|
5208
|
-
|
|
5209
|
-
/**
|
|
5210
|
-
* Find the approximate perimeter of an ellipse.
|
|
5211
|
-
*
|
|
5212
|
-
* @param rx - The ellipse's x radius.
|
|
5213
|
-
* @param ry - The ellipse's y radius.
|
|
5214
|
-
* @public
|
|
5215
|
-
*/
|
|
5216
|
-
export declare function perimeterOfEllipse(rx: number, ry: number): number;
|
|
5217
|
-
|
|
5218
|
-
/** @public */
|
|
5219
|
-
export declare const PI: number;
|
|
5220
|
-
|
|
5221
|
-
/** @public */
|
|
5222
|
-
export declare const PI2: number;
|
|
5223
|
-
|
|
5224
5547
|
/** @public */
|
|
5225
|
-
export declare class
|
|
5226
|
-
|
|
5227
|
-
constructor(
|
|
5228
|
-
|
|
5229
|
-
|
|
5230
|
-
|
|
5548
|
+
export declare class OverlayManager {
|
|
5549
|
+
readonly editor: Editor;
|
|
5550
|
+
constructor(editor: Editor);
|
|
5551
|
+
/* Excluded from this release type: _overlayUtils */
|
|
5552
|
+
/* Excluded from this release type: registerUtil */
|
|
5553
|
+
/**
|
|
5554
|
+
* Get an overlay util by type string, overlay instance, or by passing
|
|
5555
|
+
* a util class as a generic parameter for type-safe lookup.
|
|
5556
|
+
*
|
|
5557
|
+
* @example
|
|
5558
|
+
* ```ts
|
|
5559
|
+
* const util = editor.overlays.getOverlayUtil('brush')
|
|
5560
|
+
* const util = editor.overlays.getOverlayUtil<BrushOverlayUtil>('brush')
|
|
5561
|
+
* const util = editor.overlays.getOverlayUtil(myOverlay)
|
|
5562
|
+
* ```
|
|
5563
|
+
*
|
|
5564
|
+
* @public
|
|
5565
|
+
*/
|
|
5566
|
+
getOverlayUtil<T extends OverlayUtil>(type: T extends OverlayUtil<infer O> ? O['type'] : string): T;
|
|
5567
|
+
getOverlayUtil<O extends TLOverlay>(overlay: O): OverlayUtil<O>;
|
|
5568
|
+
/**
|
|
5569
|
+
* Returns all registered overlay utils in paint order (ascending zIndex).
|
|
5570
|
+
* Utils with the same zIndex preserve their registration order.
|
|
5571
|
+
*
|
|
5572
|
+
* @public
|
|
5573
|
+
*/
|
|
5574
|
+
getOverlayUtilsInZOrder(): OverlayUtil[];
|
|
5575
|
+
/**
|
|
5576
|
+
* Reactive list of active overlay utils paired with the overlays they
|
|
5577
|
+
* produced for the current editor state, in paint order (ascending
|
|
5578
|
+
* zIndex). Both the hit-test and render paths read from this single
|
|
5579
|
+
* cached scan instead of each re-deriving the active set. Active utils
|
|
5580
|
+
* are included even when their `getOverlays()` returns an empty array,
|
|
5581
|
+
* since `render()` may still draw non-interactive UI (e.g. the selection
|
|
5582
|
+
* bounding box during brushing).
|
|
5583
|
+
*
|
|
5584
|
+
* @public
|
|
5585
|
+
*/
|
|
5586
|
+
getActiveOverlayEntries(): TLOverlayEntry[];
|
|
5587
|
+
/**
|
|
5588
|
+
* Reactively computed list of all currently active overlays, in paint order.
|
|
5589
|
+
* @public
|
|
5590
|
+
*/
|
|
5591
|
+
getCurrentOverlays(): TLOverlay[];
|
|
5592
|
+
private _geometryCache;
|
|
5593
|
+
/**
|
|
5594
|
+
* Get hit-test geometry for an overlay, cached by overlay identity. Lets
|
|
5595
|
+
* hit-testing on a pointermove storm skip the per-overlay geometry
|
|
5596
|
+
* allocation that {@link OverlayUtil.getGeometry} would otherwise do on
|
|
5597
|
+
* every call.
|
|
5598
|
+
*
|
|
5599
|
+
* @public
|
|
5600
|
+
*/
|
|
5601
|
+
getOverlayGeometry(overlay: TLOverlay): Geometry2d | null;
|
|
5602
|
+
/**
|
|
5603
|
+
* The currently hovered overlay id.
|
|
5604
|
+
* @public
|
|
5605
|
+
*/
|
|
5606
|
+
private _hoveredOverlayId;
|
|
5607
|
+
getHoveredOverlayId(): null | string;
|
|
5608
|
+
getHoveredOverlay(): null | TLOverlay;
|
|
5609
|
+
setHoveredOverlay(id: null | string): void;
|
|
5610
|
+
/**
|
|
5611
|
+
* Hit test all active overlays at a given page point.
|
|
5612
|
+
* Returns the topmost overlay whose geometry contains the point, or null.
|
|
5613
|
+
* Utils are walked from highest zIndex to lowest so the overlay painted on
|
|
5614
|
+
* top also wins the hit test. Within a util, overlays are walked in
|
|
5615
|
+
* array order: the first overlay whose geometry contains the point wins,
|
|
5616
|
+
* so utils should place highest-priority overlays first in `getOverlays`.
|
|
5617
|
+
* Interactive overlays (those with geometry) are checked; non-interactive are skipped.
|
|
5618
|
+
*
|
|
5619
|
+
* @param point - Point in page coordinates
|
|
5620
|
+
* @param margin - Hit test margin
|
|
5621
|
+
* @public
|
|
5622
|
+
*/
|
|
5623
|
+
getOverlayAtPoint(point: VecLike, margin?: number): null | TLOverlay;
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
/** @public */
|
|
5627
|
+
export declare interface OverlayOptionsWithDisplayValues<Overlay extends TLOverlay, DisplayValues extends object> {
|
|
5628
|
+
getDefaultDisplayValues(editor: Editor, overlay: Overlay, theme: TLTheme, colorMode: 'dark' | 'light'): DisplayValues;
|
|
5629
|
+
getCustomDisplayValues(editor: Editor, overlay: Overlay, theme: TLTheme, colorMode: 'dark' | 'light'): Partial<DisplayValues>;
|
|
5630
|
+
}
|
|
5631
|
+
|
|
5632
|
+
/**
|
|
5633
|
+
* Base class for overlay utilities. Overlays are ephemeral UI elements rendered
|
|
5634
|
+
* on top of the canvas (selection handles, rotation corners, shape handles, etc.).
|
|
5635
|
+
*
|
|
5636
|
+
* Each OverlayUtil defines a type of overlay and knows how to:
|
|
5637
|
+
* - Determine when its overlays should be active (predicate)
|
|
5638
|
+
* - Produce overlay instances from current editor state
|
|
5639
|
+
* - Provide hit-test geometry for interactive overlays
|
|
5640
|
+
* - Provide cursor style on hover
|
|
5641
|
+
* - Render into a canvas 2D context
|
|
5642
|
+
*
|
|
5643
|
+
* @public
|
|
5644
|
+
*/
|
|
5645
|
+
export declare abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
|
|
5646
|
+
editor: Editor;
|
|
5647
|
+
constructor(editor: Editor);
|
|
5648
|
+
static type: string;
|
|
5649
|
+
/**
|
|
5650
|
+
* Options for this overlay util. Override this to provide customization options.
|
|
5651
|
+
* Use {@link OverlayUtil.configure} to customize existing overlay utils.
|
|
5652
|
+
*
|
|
5653
|
+
* `zIndex` controls paint and hit-test order across utils — higher numbers
|
|
5654
|
+
* paint on top and are hit-tested first. Ties resolve by registration order.
|
|
5655
|
+
* Defaults to `0`; built-in utils use larger integers (100, 200, …) with
|
|
5656
|
+
* gaps so custom utils can slot between.
|
|
5657
|
+
*
|
|
5658
|
+
* @public
|
|
5659
|
+
*/
|
|
5660
|
+
options: {
|
|
5661
|
+
zIndex?: number;
|
|
5662
|
+
};
|
|
5663
|
+
/**
|
|
5664
|
+
* Create a new overlay util class with the given options merged in.
|
|
5665
|
+
*
|
|
5666
|
+
* @example
|
|
5667
|
+
* ```ts
|
|
5668
|
+
* const MyBrush = BrushOverlayUtil.configure({ fill: 'rgba(0,0,255,0.1)' })
|
|
5669
|
+
* ```
|
|
5670
|
+
*
|
|
5671
|
+
* @public
|
|
5672
|
+
*/
|
|
5673
|
+
static configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
|
|
5674
|
+
options: infer Options;
|
|
5675
|
+
} ? Partial<Options> : never): T;
|
|
5676
|
+
/**
|
|
5677
|
+
* Whether this overlay util's overlays should currently be active.
|
|
5678
|
+
* Checked reactively to determine which overlays exist at any given time.
|
|
5679
|
+
*/
|
|
5680
|
+
abstract isActive(): boolean;
|
|
5681
|
+
/**
|
|
5682
|
+
* Returns the overlay instances that currently exist.
|
|
5683
|
+
* Called only when `isActive()` returns true.
|
|
5684
|
+
*/
|
|
5685
|
+
abstract getOverlays(): T[];
|
|
5686
|
+
/**
|
|
5687
|
+
* Returns hit-test geometry for an overlay instance, in page coordinates.
|
|
5688
|
+
* Return null for non-interactive overlays (e.g. snap indicators, scribbles).
|
|
5689
|
+
*/
|
|
5690
|
+
getGeometry(_overlay: T): Geometry2d | null;
|
|
5691
|
+
/**
|
|
5692
|
+
* Returns the cursor type to show when hovering this overlay.
|
|
5693
|
+
*/
|
|
5694
|
+
getCursor(_overlay: T): TLCursorType | undefined;
|
|
5695
|
+
/**
|
|
5696
|
+
* Called when the user points down on this overlay, before the default
|
|
5697
|
+
* routing runs. Acts as an interrupt: define it to take over the event.
|
|
5698
|
+
*
|
|
5699
|
+
* Return `false` to continue with the default behavior (e.g. the
|
|
5700
|
+
* built-in rotate/resize handle transitions or shape-handle dispatch).
|
|
5701
|
+
* Return `true` — or nothing at all — to skip the default. In other
|
|
5702
|
+
* words, once you override this method you own the event unless you
|
|
5703
|
+
* explicitly opt back in by returning `false`.
|
|
5704
|
+
*/
|
|
5705
|
+
onPointerDown?(overlay: T, info: TLPointerEventInfo): boolean | void;
|
|
5706
|
+
/**
|
|
5707
|
+
* Render all active overlays into the canvas context.
|
|
5708
|
+
* The context is already transformed to page space (camera transform applied).
|
|
5709
|
+
* Called reactively when overlays or editor state changes.
|
|
5710
|
+
*/
|
|
5711
|
+
render(_ctx: CanvasRenderingContext2D, _overlays: T[]): void;
|
|
5712
|
+
/**
|
|
5713
|
+
* Optional: render all active overlays into the minimap canvas.
|
|
5714
|
+
* The context is already transformed to page space (minimap camera applied),
|
|
5715
|
+
* so overlays can use the same page-space coordinates as in {@link OverlayUtil.render}.
|
|
5716
|
+
*
|
|
5717
|
+
* `zoom` is the minimap's screen-pixels-per-page-unit, analogous to
|
|
5718
|
+
* `editor.getCamera().z`; use `1 / zoom` for one-minimap-pixel line widths.
|
|
5719
|
+
*
|
|
5720
|
+
* Most overlays should leave this blank — only overlays that are meaningful
|
|
5721
|
+
* at minimap scale (e.g. brushes, collaborator cursors) should opt in.
|
|
5722
|
+
*/
|
|
5723
|
+
renderMinimap(_ctx: CanvasRenderingContext2D, _overlays: T[], _zoom: number): void;
|
|
5724
|
+
}
|
|
5725
|
+
|
|
5726
|
+
/**
|
|
5727
|
+
* Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
|
|
5728
|
+
*
|
|
5729
|
+
* @param deepLinkString - the deep link string
|
|
5730
|
+
* @returns a deep link descriptor
|
|
5731
|
+
*
|
|
5732
|
+
* @public
|
|
5733
|
+
*/
|
|
5734
|
+
export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
|
|
5735
|
+
|
|
5736
|
+
/** @public */
|
|
5737
|
+
export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
|
|
5738
|
+
|
|
5739
|
+
/**
|
|
5740
|
+
* Optional adapter that pipes PerformanceManager events into browser
|
|
5741
|
+
* `performance.mark()` / `performance.measure()` for DevTools integration.
|
|
5742
|
+
*
|
|
5743
|
+
* Tree-shakeable — only included if imported.
|
|
5744
|
+
*
|
|
5745
|
+
* @example
|
|
5746
|
+
* ```ts
|
|
5747
|
+
* const adapter = new PerformanceApiAdapter(editor.performance)
|
|
5748
|
+
* // ... later
|
|
5749
|
+
* adapter.dispose()
|
|
5750
|
+
* ```
|
|
5751
|
+
*
|
|
5752
|
+
* @public
|
|
5753
|
+
*/
|
|
5754
|
+
export declare class PerformanceApiAdapter {
|
|
5755
|
+
private cleanups;
|
|
5756
|
+
constructor(perfManager: PerformanceManager);
|
|
5757
|
+
/** Remove all listeners and stop piping events. @public */
|
|
5758
|
+
dispose(): void;
|
|
5759
|
+
}
|
|
5760
|
+
|
|
5761
|
+
/**
|
|
5762
|
+
* Manages performance event subscriptions for the editor. Available as `editor.performance`.
|
|
5763
|
+
*
|
|
5764
|
+
* Listeners are lazy — internal editor hooks (frame, shape events) are only attached while
|
|
5765
|
+
* at least one subscriber exists, so there is zero overhead when unused.
|
|
5766
|
+
*
|
|
5767
|
+
* @example
|
|
5768
|
+
* ```ts
|
|
5769
|
+
* const unsub = editor.performance.on('interaction-end', (event) => {
|
|
5770
|
+
* console.log(`${event.name}: ${event.fps.toFixed(1)} fps, p95=${event.p95FrameTime.toFixed(1)}ms`)
|
|
5771
|
+
* })
|
|
5772
|
+
* ```
|
|
5773
|
+
*
|
|
5774
|
+
* @public
|
|
5775
|
+
*/
|
|
5776
|
+
export declare class PerformanceManager {
|
|
5777
|
+
/* Excluded from this release type: emitter */
|
|
5778
|
+
private editor;
|
|
5779
|
+
private activeInteraction;
|
|
5780
|
+
private activeCamera;
|
|
5781
|
+
private frameCleanup;
|
|
5782
|
+
private shapeCreatedCleanup;
|
|
5783
|
+
private shapeEditedCleanup;
|
|
5784
|
+
private shapeDeletedCleanup;
|
|
5785
|
+
private loafObserver;
|
|
5786
|
+
constructor(editor: Editor);
|
|
5787
|
+
/**
|
|
5788
|
+
* Subscribe to a performance event. Returns an unsubscribe function.
|
|
5789
|
+
*
|
|
5790
|
+
* @example
|
|
5791
|
+
* ```ts
|
|
5792
|
+
* const unsub = editor.performance.on('interaction-end', (event) => {
|
|
5793
|
+
* sendToAnalytics({ name: event.name, fps: event.fps, p95: event.p95FrameTime })
|
|
5794
|
+
* })
|
|
5795
|
+
* // later: unsub()
|
|
5796
|
+
* ```
|
|
5797
|
+
*
|
|
5798
|
+
* @public
|
|
5799
|
+
*/
|
|
5800
|
+
on<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
|
|
5801
|
+
/**
|
|
5802
|
+
* Subscribe to a performance event once. The listener is removed after the first invocation.
|
|
5803
|
+
* Returns an unsubscribe function for early removal.
|
|
5804
|
+
*
|
|
5805
|
+
* @public
|
|
5806
|
+
*/
|
|
5807
|
+
once<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
|
|
5808
|
+
/* Excluded from this release type: dispose */
|
|
5809
|
+
/* Excluded from this release type: _notifyInteractionStart */
|
|
5810
|
+
/* Excluded from this release type: _notifyInteractionEnd */
|
|
5811
|
+
/* Excluded from this release type: _notifyCameraOperation */
|
|
5812
|
+
/* Excluded from this release type: _notifyUndoRedo */
|
|
5813
|
+
private _startCameraSession;
|
|
5814
|
+
private _endCameraSession;
|
|
5815
|
+
private _onFrame;
|
|
5816
|
+
private _onShapesCreated;
|
|
5817
|
+
private _onShapesEdited;
|
|
5818
|
+
private _onShapesDeleted;
|
|
5819
|
+
private _startLoafObserver;
|
|
5820
|
+
private _stopLoafObserver;
|
|
5821
|
+
private _needsFrameListener;
|
|
5822
|
+
private _needsLoafObserver;
|
|
5823
|
+
private _maybeAttachLazyListeners;
|
|
5824
|
+
private _maybeDetachLazyListeners;
|
|
5825
|
+
}
|
|
5826
|
+
|
|
5827
|
+
/**
|
|
5828
|
+
* Find the approximate perimeter of an ellipse.
|
|
5829
|
+
*
|
|
5830
|
+
* @param rx - The ellipse's x radius.
|
|
5831
|
+
* @param ry - The ellipse's y radius.
|
|
5832
|
+
* @public
|
|
5833
|
+
*/
|
|
5834
|
+
export declare function perimeterOfEllipse(rx: number, ry: number): number;
|
|
5835
|
+
|
|
5836
|
+
/** @public */
|
|
5837
|
+
export declare const PI: number;
|
|
5838
|
+
|
|
5839
|
+
/** @public */
|
|
5840
|
+
export declare const PI2: number;
|
|
5841
|
+
|
|
5842
|
+
/** @public */
|
|
5843
|
+
export declare class Point2d extends Geometry2d {
|
|
5844
|
+
private _point;
|
|
5845
|
+
constructor(config: Omit<Geometry2dOptions, 'isClosed' | 'isFilled'> & {
|
|
5846
|
+
margin: number;
|
|
5847
|
+
point: Vec;
|
|
5848
|
+
});
|
|
5231
5849
|
getVertices(): Vec[];
|
|
5232
5850
|
nearestPoint(): Vec;
|
|
5233
5851
|
hitTestLineSegment(A: VecLike, B: VecLike, margin: number): boolean;
|
|
@@ -5400,6 +6018,16 @@ export declare function resizeScaled(shape: TLBaseShape<any, {
|
|
|
5400
6018
|
y: number;
|
|
5401
6019
|
};
|
|
5402
6020
|
|
|
6021
|
+
/**
|
|
6022
|
+
* Resolve a partial set of user-provided themes into a complete `TLThemes`
|
|
6023
|
+
* record by merging with `DEFAULT_THEME`. The result is suitable for passing to
|
|
6024
|
+
* `registerColorsFromThemes`, `registerFontsFromThemes`, and the
|
|
6025
|
+
* `ThemeManager` constructor.
|
|
6026
|
+
*
|
|
6027
|
+
* @public
|
|
6028
|
+
*/
|
|
6029
|
+
export declare function resolveThemes(themes?: Partial<TLThemes>): TLThemes;
|
|
6030
|
+
|
|
5403
6031
|
/** @public */
|
|
5404
6032
|
export declare type RichTextFontVisitor = (node: TiptapNode, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void) => RichTextFontVisitorState;
|
|
5405
6033
|
|
|
@@ -5627,6 +6255,32 @@ export declare function setRuntimeOverrides(input: Partial<typeof runtime>): voi
|
|
|
5627
6255
|
/** @public */
|
|
5628
6256
|
export declare function setUserPreferences(user: TLUserPreferences): void;
|
|
5629
6257
|
|
|
6258
|
+
/**
|
|
6259
|
+
* Overlay util for shape indicators — the selection / hover / hint outlines drawn
|
|
6260
|
+
* under the selection foreground. Paints local indicators in the theme's
|
|
6261
|
+
* selection color.
|
|
6262
|
+
*
|
|
6263
|
+
* Remote collaborator selection indicators are drawn by a separate overlay util
|
|
6264
|
+
* (e.g. `CollaboratorShapeIndicatorOverlayUtil` from `tldraw`) that runs at a
|
|
6265
|
+
* lower z-index so peer selections appear under the local indicators.
|
|
6266
|
+
*
|
|
6267
|
+
* Non-interactive: contributes no hit-test geometry.
|
|
6268
|
+
*
|
|
6269
|
+
* @public
|
|
6270
|
+
*/
|
|
6271
|
+
export declare class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {
|
|
6272
|
+
static type: string;
|
|
6273
|
+
options: {
|
|
6274
|
+
hintedLineWidth: number;
|
|
6275
|
+
lineWidth: number;
|
|
6276
|
+
zIndex: number;
|
|
6277
|
+
};
|
|
6278
|
+
private _instanceFlags$;
|
|
6279
|
+
isActive(): boolean;
|
|
6280
|
+
getOverlays(): TLShapeIndicatorOverlay[];
|
|
6281
|
+
render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void;
|
|
6282
|
+
}
|
|
6283
|
+
|
|
5630
6284
|
/** @public */
|
|
5631
6285
|
export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
5632
6286
|
editor: Editor;
|
|
@@ -5681,12 +6335,32 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5681
6335
|
* @public
|
|
5682
6336
|
*/
|
|
5683
6337
|
static type: string;
|
|
6338
|
+
/**
|
|
6339
|
+
* The asset types that this shape can be created from.
|
|
6340
|
+
* When a file is dropped on the canvas, the editor finds the shape util
|
|
6341
|
+
* whose `handledAssetTypes` includes the asset's type and calls
|
|
6342
|
+
* {@link ShapeUtil.createShapeForAsset} to produce the shape.
|
|
6343
|
+
*
|
|
6344
|
+
* @public
|
|
6345
|
+
*/
|
|
6346
|
+
static handledAssetTypes?: readonly string[];
|
|
5684
6347
|
/**
|
|
5685
6348
|
* Get the default props for a shape.
|
|
5686
6349
|
*
|
|
5687
6350
|
* @public
|
|
5688
6351
|
*/
|
|
5689
6352
|
abstract getDefaultProps(): Shape['props'];
|
|
6353
|
+
/**
|
|
6354
|
+
* Create a shape partial for placing an asset on the canvas.
|
|
6355
|
+
* Only called for shapes whose constructor declares matching
|
|
6356
|
+
* {@link ShapeUtil.handledAssetTypes | `handledAssetTypes`}.
|
|
6357
|
+
*
|
|
6358
|
+
* @param asset - The asset to create a shape for.
|
|
6359
|
+
* @param position - Where to place the shape.
|
|
6360
|
+
* @returns A shape partial, or null if this shape can't be created for the asset.
|
|
6361
|
+
* @public
|
|
6362
|
+
*/
|
|
6363
|
+
createShapeForAsset?(asset: TLAsset, position: VecModel): null | TLShapePartial;
|
|
5690
6364
|
/**
|
|
5691
6365
|
* Get the shape's geometry.
|
|
5692
6366
|
*
|
|
@@ -5703,37 +6377,30 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5703
6377
|
*/
|
|
5704
6378
|
abstract component(shape: Shape): any;
|
|
5705
6379
|
/**
|
|
5706
|
-
* Get
|
|
5707
|
-
*
|
|
5708
|
-
*
|
|
5709
|
-
* @public
|
|
5710
|
-
*/
|
|
5711
|
-
abstract indicator(shape: Shape): any;
|
|
5712
|
-
/**
|
|
5713
|
-
* Whether to use the legacy React-based indicator rendering.
|
|
6380
|
+
* Get a Path2D (or a richer object with clip/additional paths) for rendering the
|
|
6381
|
+
* shape's indicator on the canvas. Shapes that return `undefined` will not render
|
|
6382
|
+
* an indicator.
|
|
5714
6383
|
*
|
|
5715
|
-
*
|
|
5716
|
-
*
|
|
6384
|
+
* For complex indicators that need clipping (e.g., arrows with labels), return an
|
|
6385
|
+
* object with `path`, `clipPath`, and `additionalPaths` properties.
|
|
5717
6386
|
*
|
|
5718
|
-
* @
|
|
6387
|
+
* @param shape - The shape.
|
|
6388
|
+
* @returns A Path2D to stroke, or an object with clipping info, or undefined to skip.
|
|
5719
6389
|
* @public
|
|
5720
6390
|
*/
|
|
5721
|
-
|
|
6391
|
+
abstract getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
|
|
5722
6392
|
/**
|
|
5723
|
-
* Get
|
|
5724
|
-
*
|
|
5725
|
-
* When implemented, this is used instead of {@link ShapeUtil.indicator} for more
|
|
5726
|
-
* efficient canvas-based indicator rendering. Shapes that return `undefined` will
|
|
5727
|
-
* fall back to SVG-based rendering via {@link ShapeUtil.indicator}.
|
|
6393
|
+
* Get JSX describing the shape's indicator (as an SVG element).
|
|
5728
6394
|
*
|
|
5729
|
-
*
|
|
5730
|
-
*
|
|
6395
|
+
* @deprecated SVG indicators are no longer rendered. Override
|
|
6396
|
+
* {@link ShapeUtil.getIndicatorPath} instead. This stub is retained so legacy
|
|
6397
|
+
* subclasses that still call `super.indicator()` keep type-checking; new shapes
|
|
6398
|
+
* should not implement it.
|
|
5731
6399
|
*
|
|
5732
6400
|
* @param shape - The shape.
|
|
5733
|
-
* @returns A Path2D to stroke, or an object with clipping info, or undefined to use SVG fallback.
|
|
5734
6401
|
* @public
|
|
5735
6402
|
*/
|
|
5736
|
-
|
|
6403
|
+
indicator(_shape: Shape): any;
|
|
5737
6404
|
/**
|
|
5738
6405
|
* Get the font faces that should be rendered in the document in order for this shape to render
|
|
5739
6406
|
* correctly.
|
|
@@ -5767,7 +6434,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5767
6434
|
*
|
|
5768
6435
|
* @public
|
|
5769
6436
|
*/
|
|
5770
|
-
canBind(
|
|
6437
|
+
canBind(opts: TLShapeUtilCanBindOpts): boolean;
|
|
5771
6438
|
/**
|
|
5772
6439
|
* Whether the shape can be double clicked to edit.
|
|
5773
6440
|
*
|
|
@@ -5901,6 +6568,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5901
6568
|
* @public
|
|
5902
6569
|
*/
|
|
5903
6570
|
isAspectRatioLocked(shape: Shape): boolean;
|
|
6571
|
+
/**
|
|
6572
|
+
* Whether the shape behaves like a frame — a container that has child shapes,
|
|
6573
|
+
* requires full-brush selection, blocks erasure from inside, etc.
|
|
6574
|
+
*
|
|
6575
|
+
* @param shape - The shape.
|
|
6576
|
+
* @public
|
|
6577
|
+
*/
|
|
6578
|
+
isFrameLike(_shape: Shape): boolean;
|
|
5904
6579
|
/**
|
|
5905
6580
|
* By default, the bounds of an image export are the bounds of all the shapes it contains, plus
|
|
5906
6581
|
* some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the
|
|
@@ -5942,13 +6617,28 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
|
|
|
5942
6617
|
*/
|
|
5943
6618
|
getHandles?(shape: Shape): TLHandle[];
|
|
5944
6619
|
/**
|
|
5945
|
-
* Get whether the shape can receive children of a given type.
|
|
6620
|
+
* Get whether the shape can receive children of a given type. Used by the drag and drop system
|
|
6621
|
+
* to decide whether {@link ShapeUtil.onDragShapesIn} should fire when a shape of the given type
|
|
6622
|
+
* is dragged over this one.
|
|
5946
6623
|
*
|
|
5947
6624
|
* @param shape - The shape.
|
|
5948
6625
|
* @param type - The shape type.
|
|
5949
6626
|
* @public
|
|
5950
6627
|
*/
|
|
5951
|
-
canReceiveNewChildrenOfType(shape: Shape,
|
|
6628
|
+
canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
|
|
6629
|
+
/**
|
|
6630
|
+
* Get whether children of a given type can be removed from this shape. Used by the drag and
|
|
6631
|
+
* drop system to decide whether {@link ShapeUtil.onDragShapesOut} should fire when a child of
|
|
6632
|
+
* the given type is dragged out of this shape, and by `kickoutOccludedShapes` to decide
|
|
6633
|
+
* whether to auto-reparent a child of the given type when it has moved outside this shape's
|
|
6634
|
+
* geometry. Returning `false` therefore "pins" matching children — they stay parented to this
|
|
6635
|
+
* shape even when dragged or moved outside it. Defaults to `true`.
|
|
6636
|
+
*
|
|
6637
|
+
* @param shape - The shape.
|
|
6638
|
+
* @param type - The shape type.
|
|
6639
|
+
* @public
|
|
6640
|
+
*/
|
|
6641
|
+
canRemoveChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
|
|
5952
6642
|
/**
|
|
5953
6643
|
* Get the shape as an SVG object.
|
|
5954
6644
|
*
|
|
@@ -6391,6 +7081,8 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
|
|
|
6391
7081
|
static children?: () => TLStateNodeConstructor[];
|
|
6392
7082
|
static isLockable: boolean;
|
|
6393
7083
|
static useCoalescedEvents: boolean;
|
|
7084
|
+
/** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */
|
|
7085
|
+
static trackPerformance: boolean;
|
|
6394
7086
|
id: string;
|
|
6395
7087
|
type: 'branch' | 'leaf' | 'root';
|
|
6396
7088
|
shapeType?: string;
|
|
@@ -6490,6 +7182,19 @@ export declare const stopEventPropagation: (e: any) => any;
|
|
|
6490
7182
|
|
|
6491
7183
|
/* Excluded from this release type: StoreName */
|
|
6492
7184
|
|
|
7185
|
+
/**
|
|
7186
|
+
* Combine every batchable shape indicator into a single page-space `Path2D` and
|
|
7187
|
+
* emit one stroke call. Shapes whose indicator needs an evenodd clip (e.g.
|
|
7188
|
+
* arrows with labels or complex arrowheads) can't be batched — they still
|
|
7189
|
+
* stroke individually inside a save/restore with `ctx.clip` applied.
|
|
7190
|
+
*
|
|
7191
|
+
* Shared by {@link ShapeIndicatorOverlayUtil} and any overlay util that paints
|
|
7192
|
+
* shape indicators (e.g. collaborator selections).
|
|
7193
|
+
*
|
|
7194
|
+
* @public
|
|
7195
|
+
*/
|
|
7196
|
+
export declare function strokeShapeIndicators(editor: Editor, ctx: CanvasRenderingContext2D, shapeIds: TLShapeId[]): void;
|
|
7197
|
+
|
|
6493
7198
|
/** @public */
|
|
6494
7199
|
export declare function suffixSafeId(id: SafeId, suffix: string): SafeId;
|
|
6495
7200
|
|
|
@@ -6525,6 +7230,10 @@ export declare interface SvgExportContext {
|
|
|
6525
7230
|
* Whether the export should be in dark mode.
|
|
6526
7231
|
*/
|
|
6527
7232
|
readonly isDarkMode: boolean;
|
|
7233
|
+
/**
|
|
7234
|
+
* The color mode to use for this export.
|
|
7235
|
+
*/
|
|
7236
|
+
readonly colorMode: 'dark' | 'light';
|
|
6528
7237
|
/**
|
|
6529
7238
|
* The scale of the export - how much CSS pixels will be scaled up/down by.
|
|
6530
7239
|
*/
|
|
@@ -6595,6 +7304,47 @@ export declare class TextManager {
|
|
|
6595
7304
|
}[];
|
|
6596
7305
|
}
|
|
6597
7306
|
|
|
7307
|
+
/**
|
|
7308
|
+
* Manages the editor's color themes.
|
|
7309
|
+
*
|
|
7310
|
+
* Stores named theme definitions (each containing light and dark color palettes
|
|
7311
|
+
* alongside shared properties like font size). The current theme is resolved by
|
|
7312
|
+
* combining the current theme name with the user's color mode preference.
|
|
7313
|
+
*
|
|
7314
|
+
* **Terminology:**
|
|
7315
|
+
* - **Theme** (`TLTheme`): A named set of colors and typographic values for both light and dark modes.
|
|
7316
|
+
* - **Color mode** (`'light' | 'dark'`): The resolved appearance mode, derived from the user's
|
|
7317
|
+
* `colorScheme` preference (`'light' | 'dark' | 'system'`). Access via `getColorMode()`.
|
|
7318
|
+
*
|
|
7319
|
+
* @public
|
|
7320
|
+
*/
|
|
7321
|
+
export declare class ThemeManager {
|
|
7322
|
+
private readonly editor;
|
|
7323
|
+
private readonly _themes;
|
|
7324
|
+
private readonly _currentThemeId;
|
|
7325
|
+
constructor(editor: Editor, options: {
|
|
7326
|
+
initial: TLThemeId;
|
|
7327
|
+
themes: TLThemes;
|
|
7328
|
+
});
|
|
7329
|
+
/** Get the current color mode based on the user's dark mode preference. */
|
|
7330
|
+
getColorMode(): 'dark' | 'light';
|
|
7331
|
+
/** Get all registered theme definitions. */
|
|
7332
|
+
getThemes(): TLThemes;
|
|
7333
|
+
/** Get a single theme definition by id. */
|
|
7334
|
+
getTheme(id: TLThemeId): TLTheme | undefined;
|
|
7335
|
+
/** Get the id of the current theme. */
|
|
7336
|
+
getCurrentThemeId(): TLThemeId;
|
|
7337
|
+
getCurrentTheme(): TLTheme;
|
|
7338
|
+
/** Set the current theme by id. The theme must have been previously registered. */
|
|
7339
|
+
setCurrentTheme(id: TLThemeId): void;
|
|
7340
|
+
/** Replace all theme definitions, or update them via a callback that receives a deep copy. */
|
|
7341
|
+
updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): void;
|
|
7342
|
+
/** Register or update a named theme definition. */
|
|
7343
|
+
updateTheme(theme: TLTheme): void;
|
|
7344
|
+
/** Clean up any resources held by the manager. */
|
|
7345
|
+
dispose(): void;
|
|
7346
|
+
}
|
|
7347
|
+
|
|
6598
7348
|
/* Excluded from this release type: TickManager */
|
|
6599
7349
|
|
|
6600
7350
|
/**
|
|
@@ -6613,12 +7363,26 @@ export declare type TiptapNode = Node_2;
|
|
|
6613
7363
|
/** @public */
|
|
6614
7364
|
export declare type TLAdjacentDirection = 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
|
|
6615
7365
|
|
|
7366
|
+
/** @public */
|
|
7367
|
+
export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
|
|
7368
|
+
|
|
6616
7369
|
/** @public */
|
|
6617
7370
|
export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
|
|
6618
7371
|
|
|
7372
|
+
/** @public */
|
|
7373
|
+
export declare type TLAnyOverlayUtilConstructor = TLOverlayUtilConstructor<any>;
|
|
7374
|
+
|
|
6619
7375
|
/** @public */
|
|
6620
7376
|
export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
|
|
6621
7377
|
|
|
7378
|
+
/** @public */
|
|
7379
|
+
export declare interface TLAssetUtilConstructor<T extends TLAsset = TLAsset, U extends AssetUtil<T> = AssetUtil<T>> {
|
|
7380
|
+
new (editor: Editor): U;
|
|
7381
|
+
type: T['type'];
|
|
7382
|
+
props?: RecordProps<T>;
|
|
7383
|
+
migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
7384
|
+
}
|
|
7385
|
+
|
|
6622
7386
|
/** @public */
|
|
6623
7387
|
export declare type TLBaseBoxShape = ExtractShapeByProps<{
|
|
6624
7388
|
h: number;
|
|
@@ -6651,15 +7415,6 @@ export declare interface TLBindingUtilConstructor<T extends TLBinding, U extends
|
|
|
6651
7415
|
migrations?: TLPropsMigrations;
|
|
6652
7416
|
}
|
|
6653
7417
|
|
|
6654
|
-
/** @public */
|
|
6655
|
-
export declare interface TLBrushProps {
|
|
6656
|
-
userId?: string;
|
|
6657
|
-
brush: BoxModel;
|
|
6658
|
-
color?: string;
|
|
6659
|
-
opacity?: number;
|
|
6660
|
-
className?: string;
|
|
6661
|
-
}
|
|
6662
|
-
|
|
6663
7418
|
/** @public */
|
|
6664
7419
|
export declare interface TLCameraConstraints {
|
|
6665
7420
|
/** The bounds (in page space) of the constrained space */
|
|
@@ -6708,6 +7463,29 @@ export declare interface TLCameraConstraints {
|
|
|
6708
7463
|
};
|
|
6709
7464
|
}
|
|
6710
7465
|
|
|
7466
|
+
/**
|
|
7467
|
+
* Emitted when a camera operation ends (after a 50ms debounce), with aggregated frame time stats.
|
|
7468
|
+
* @public
|
|
7469
|
+
*/
|
|
7470
|
+
export declare interface TLCameraEndPerfEvent extends TLPerfFrameTimeStats {
|
|
7471
|
+
/** Whether this was a pan or zoom operation. */
|
|
7472
|
+
type: 'panning' | 'zooming';
|
|
7473
|
+
/** Total shapes on the current page. */
|
|
7474
|
+
shapeCount: number;
|
|
7475
|
+
/** Number of shapes visible (not culled) in the viewport. */
|
|
7476
|
+
visibleShapeCount: number;
|
|
7477
|
+
/** Number of shapes culled (off-screen) from rendering. */
|
|
7478
|
+
culledShapeCount: number;
|
|
7479
|
+
/** Viewport width in screen pixels. */
|
|
7480
|
+
viewportWidth: number;
|
|
7481
|
+
/** Viewport height in screen pixels. */
|
|
7482
|
+
viewportHeight: number;
|
|
7483
|
+
/** Camera zoom level (`camera.z`) at session end. */
|
|
7484
|
+
zoomLevel: number;
|
|
7485
|
+
/** `performance.now()` when the camera session ended. */
|
|
7486
|
+
timestamp: number;
|
|
7487
|
+
}
|
|
7488
|
+
|
|
6711
7489
|
/** @public */
|
|
6712
7490
|
export declare interface TLCameraMoveOptions {
|
|
6713
7491
|
/** Whether to move the camera immediately, rather than on the next tick. */
|
|
@@ -6746,6 +7524,17 @@ export declare interface TLCameraOptions {
|
|
|
6746
7524
|
constraints?: TLCameraConstraints;
|
|
6747
7525
|
}
|
|
6748
7526
|
|
|
7527
|
+
/**
|
|
7528
|
+
* Emitted when a camera operation (pan or zoom) begins.
|
|
7529
|
+
* @public
|
|
7530
|
+
*/
|
|
7531
|
+
export declare interface TLCameraStartPerfEvent {
|
|
7532
|
+
/** Whether this is a pan or zoom operation. */
|
|
7533
|
+
type: 'panning' | 'zooming';
|
|
7534
|
+
/** `performance.now()` when the camera session started. */
|
|
7535
|
+
timestamp: number;
|
|
7536
|
+
}
|
|
7537
|
+
|
|
6749
7538
|
/** @public */
|
|
6750
7539
|
export declare type TLCancelEvent = (info: TLCancelEventInfo) => void;
|
|
6751
7540
|
|
|
@@ -6813,17 +7602,6 @@ export declare interface TLClipboardWriteInfo {
|
|
|
6813
7602
|
readonly source: 'menu' | 'native';
|
|
6814
7603
|
}
|
|
6815
7604
|
|
|
6816
|
-
/** @public */
|
|
6817
|
-
export declare interface TLCollaboratorHintProps {
|
|
6818
|
-
userId: string;
|
|
6819
|
-
className?: string;
|
|
6820
|
-
point: VecModel;
|
|
6821
|
-
viewport: Box;
|
|
6822
|
-
zoom: number;
|
|
6823
|
-
opacity?: number;
|
|
6824
|
-
color: string;
|
|
6825
|
-
}
|
|
6826
|
-
|
|
6827
7605
|
/** @public */
|
|
6828
7606
|
export declare type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
|
|
6829
7607
|
|
|
@@ -6868,17 +7646,6 @@ export declare interface TLCurrentUser {
|
|
|
6868
7646
|
readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
|
|
6869
7647
|
}
|
|
6870
7648
|
|
|
6871
|
-
/** @public */
|
|
6872
|
-
export declare interface TLCursorProps {
|
|
6873
|
-
userId: string;
|
|
6874
|
-
className?: string;
|
|
6875
|
-
point: null | VecModel;
|
|
6876
|
-
zoom: number;
|
|
6877
|
-
color?: string;
|
|
6878
|
-
name: null | string;
|
|
6879
|
-
chatMessage: string;
|
|
6880
|
-
}
|
|
6881
|
-
|
|
6882
7649
|
/** @public */
|
|
6883
7650
|
export declare type TLDeepLink = {
|
|
6884
7651
|
bounds: BoxModel;
|
|
@@ -6968,6 +7735,14 @@ export declare interface TldrawEditorBaseProps {
|
|
|
6968
7735
|
* An array of binding utils to use in the editor.
|
|
6969
7736
|
*/
|
|
6970
7737
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
|
7738
|
+
/**
|
|
7739
|
+
* An array of asset utils to use in the editor.
|
|
7740
|
+
*/
|
|
7741
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
7742
|
+
/**
|
|
7743
|
+
* An array of overlay utils to use in the editor for canvas overlay UI elements.
|
|
7744
|
+
*/
|
|
7745
|
+
overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
|
|
6971
7746
|
/**
|
|
6972
7747
|
* An array of tools to add to the editor's state chart.
|
|
6973
7748
|
*/
|
|
@@ -6997,9 +7772,21 @@ export declare interface TldrawEditorBaseProps {
|
|
|
6997
7772
|
*/
|
|
6998
7773
|
user?: TLCurrentUser;
|
|
6999
7774
|
/**
|
|
7000
|
-
*
|
|
7775
|
+
* The editor's color scheme. Defaults to `'light'`.
|
|
7776
|
+
*
|
|
7777
|
+
* - `'light'` - Always use light mode.
|
|
7778
|
+
* - `'dark'` - Always use dark mode.
|
|
7779
|
+
* - `'system'` - Follow the OS color scheme preference.
|
|
7780
|
+
*/
|
|
7781
|
+
colorScheme?: 'dark' | 'light' | 'system';
|
|
7782
|
+
/**
|
|
7783
|
+
* Named themes for the editor.
|
|
7001
7784
|
*/
|
|
7002
|
-
|
|
7785
|
+
themes?: Partial<TLThemes>;
|
|
7786
|
+
/**
|
|
7787
|
+
* The id of the initially active theme. Defaults to `'default'`.
|
|
7788
|
+
*/
|
|
7789
|
+
initialTheme?: TLThemeId;
|
|
7003
7790
|
/**
|
|
7004
7791
|
* Camera options for the editor.
|
|
7005
7792
|
*
|
|
@@ -7217,6 +8004,12 @@ export declare interface TldrawOptions {
|
|
|
7217
8004
|
* When false, the spacebar will not pan the camera.
|
|
7218
8005
|
*/
|
|
7219
8006
|
readonly spacebarPanning: boolean;
|
|
8007
|
+
/**
|
|
8008
|
+
* Whether to allow right-click + drag to pan the camera. When true, right-click + drag pans the
|
|
8009
|
+
* camera and a static right-click opens the context menu at the release position. When false,
|
|
8010
|
+
* right-click opens the context menu on press (no drag-to-pan).
|
|
8011
|
+
*/
|
|
8012
|
+
readonly rightClickPanning: boolean;
|
|
7220
8013
|
/**
|
|
7221
8014
|
* The default padding (in pixels) used when zooming to fit content in the viewport.
|
|
7222
8015
|
* This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.
|
|
@@ -7346,34 +8139,17 @@ export declare interface TLDropShapesOverInfo {
|
|
|
7346
8139
|
/** @public */
|
|
7347
8140
|
export declare interface TLEditorComponents {
|
|
7348
8141
|
Background?: ComponentType | null;
|
|
7349
|
-
Brush?: ComponentType<TLBrushProps> | null;
|
|
7350
8142
|
Canvas?: ComponentType<TLCanvasComponentProps> | null;
|
|
7351
|
-
CollaboratorBrush?: ComponentType<TLBrushProps> | null;
|
|
7352
|
-
CollaboratorCursor?: ComponentType<TLCursorProps> | null;
|
|
7353
|
-
CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null;
|
|
7354
|
-
CollaboratorScribble?: ComponentType<TLScribbleProps> | null;
|
|
7355
|
-
CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
|
|
7356
|
-
Cursor?: ComponentType<TLCursorProps> | null;
|
|
7357
8143
|
Grid?: ComponentType<TLGridProps> | null;
|
|
7358
|
-
Handle?: ComponentType<TLHandleProps> | null;
|
|
7359
|
-
Handles?: ComponentType<TLHandlesProps> | null;
|
|
7360
8144
|
InFrontOfTheCanvas?: ComponentType | null;
|
|
7361
8145
|
LoadingScreen?: ComponentType | null;
|
|
7362
8146
|
OnTheCanvas?: ComponentType | null;
|
|
7363
|
-
Overlays?: ComponentType | null;
|
|
7364
|
-
Scribble?: ComponentType<TLScribbleProps> | null;
|
|
7365
8147
|
SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null;
|
|
7366
|
-
SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null;
|
|
7367
|
-
ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
|
|
7368
|
-
ShapeIndicators?: ComponentType | null;
|
|
7369
8148
|
ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null;
|
|
7370
|
-
SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
|
|
7371
8149
|
Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
|
|
7372
8150
|
SvgDefs?: ComponentType | null;
|
|
7373
|
-
ZoomBrush?: ComponentType<TLBrushProps> | null;
|
|
7374
8151
|
ErrorFallback?: TLErrorFallbackComponent;
|
|
7375
8152
|
ShapeErrorFallback?: TLShapeErrorFallbackComponent;
|
|
7376
|
-
ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent;
|
|
7377
8153
|
}
|
|
7378
8154
|
|
|
7379
8155
|
/** @public */
|
|
@@ -7392,14 +8168,18 @@ export declare interface TLEditorOptions {
|
|
|
7392
8168
|
*/
|
|
7393
8169
|
bindingUtils: readonly TLAnyBindingUtilConstructor[];
|
|
7394
8170
|
/**
|
|
7395
|
-
* An array of
|
|
8171
|
+
* An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
|
|
7396
8172
|
*/
|
|
7397
|
-
|
|
8173
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
7398
8174
|
/**
|
|
7399
|
-
*
|
|
7400
|
-
*
|
|
8175
|
+
* An array of overlay utils to use in the editor. These define canvas overlay UI elements
|
|
8176
|
+
* like selection handles, rotation corners, shape handles, etc.
|
|
7401
8177
|
*/
|
|
7402
|
-
|
|
8178
|
+
overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
|
|
8179
|
+
/**
|
|
8180
|
+
* An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
|
|
8181
|
+
*/
|
|
8182
|
+
tools: readonly TLStateNodeConstructor[];
|
|
7403
8183
|
/**
|
|
7404
8184
|
* A user defined externally to replace the default user.
|
|
7405
8185
|
*/
|
|
@@ -7412,27 +8192,15 @@ export declare interface TLEditorOptions {
|
|
|
7412
8192
|
* Whether to automatically focus the editor when it mounts.
|
|
7413
8193
|
*/
|
|
7414
8194
|
autoFocus?: boolean;
|
|
7415
|
-
/**
|
|
7416
|
-
* Whether to infer dark mode from the user's system preferences. Defaults to false.
|
|
7417
|
-
*/
|
|
7418
|
-
inferDarkMode?: boolean;
|
|
7419
|
-
/**
|
|
7420
|
-
* Options for the editor's camera.
|
|
7421
|
-
*
|
|
7422
|
-
* @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
|
|
7423
|
-
*/
|
|
7424
|
-
cameraOptions?: Partial<TLCameraOptions>;
|
|
7425
|
-
options?: Partial<TldrawOptions>;
|
|
7426
|
-
/**
|
|
7427
|
-
* Text options for the editor.
|
|
7428
|
-
*
|
|
7429
|
-
* @deprecated Use `options.text` instead. This prop will be removed in a future release.
|
|
7430
|
-
*/
|
|
7431
|
-
textOptions?: TLTextOptions;
|
|
7432
8195
|
licenseKey?: string;
|
|
7433
8196
|
fontAssetUrls?: {
|
|
7434
8197
|
[key: string]: string | undefined;
|
|
7435
8198
|
};
|
|
8199
|
+
/**
|
|
8200
|
+
* Should return a containing html element which has all the styles applied to the editor. If not
|
|
8201
|
+
* given, the body element will be used.
|
|
8202
|
+
*/
|
|
8203
|
+
getContainer(): HTMLElement;
|
|
7436
8204
|
/**
|
|
7437
8205
|
* Provides a way to hide shapes.
|
|
7438
8206
|
*
|
|
@@ -7449,6 +8217,40 @@ export declare interface TLEditorOptions {
|
|
|
7449
8217
|
* @param editor - The editor instance.
|
|
7450
8218
|
*/
|
|
7451
8219
|
getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined;
|
|
8220
|
+
/**
|
|
8221
|
+
* Named theme definitions for the editor. Each theme contains shared
|
|
8222
|
+
* properties (font size, line height, stroke width) and color palettes
|
|
8223
|
+
* for both light and dark modes.
|
|
8224
|
+
*/
|
|
8225
|
+
themes?: Partial<TLThemes>;
|
|
8226
|
+
/**
|
|
8227
|
+
* The id of the initially active theme. Defaults to `'default'`.
|
|
8228
|
+
*/
|
|
8229
|
+
initialTheme?: TLThemeId;
|
|
8230
|
+
/**
|
|
8231
|
+
* The editor's color scheme preference, controls the default color mode. Defaults to `'light'`.
|
|
8232
|
+
*
|
|
8233
|
+
* - `'light'` - Always use light mode.
|
|
8234
|
+
* - `'dark'` - Always use dark mode.
|
|
8235
|
+
* - `'system'` - Follow the OS color scheme preference.
|
|
8236
|
+
*/
|
|
8237
|
+
colorScheme?: 'dark' | 'light' | 'system';
|
|
8238
|
+
/**
|
|
8239
|
+
* Additional configuration options for the tldraw editor.
|
|
8240
|
+
*/
|
|
8241
|
+
options?: Partial<TldrawOptions>;
|
|
8242
|
+
/**
|
|
8243
|
+
* Options for the editor's camera.
|
|
8244
|
+
*
|
|
8245
|
+
* @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
|
|
8246
|
+
*/
|
|
8247
|
+
cameraOptions?: Partial<TLCameraOptions>;
|
|
8248
|
+
/**
|
|
8249
|
+
* Text options for the editor.
|
|
8250
|
+
*
|
|
8251
|
+
* @deprecated Use `options.text` instead. This prop will be removed in a future release.
|
|
8252
|
+
*/
|
|
8253
|
+
textOptions?: TLTextOptions;
|
|
7452
8254
|
}
|
|
7453
8255
|
|
|
7454
8256
|
/**
|
|
@@ -7507,6 +8309,7 @@ export declare const tlenv: {
|
|
|
7507
8309
|
*/
|
|
7508
8310
|
export declare const tlenvReactive: Atom< {
|
|
7509
8311
|
isCoarsePointer: boolean;
|
|
8312
|
+
supportsP3ColorSpace: boolean;
|
|
7510
8313
|
}, unknown>;
|
|
7511
8314
|
|
|
7512
8315
|
/** @public */
|
|
@@ -7635,6 +8438,7 @@ export declare interface TLFileReplaceExternalContent extends TLBaseExternalCont
|
|
|
7635
8438
|
type: 'file-replace';
|
|
7636
8439
|
file: File;
|
|
7637
8440
|
shapeId: TLShapeId;
|
|
8441
|
+
/** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */
|
|
7638
8442
|
isImage: boolean;
|
|
7639
8443
|
}
|
|
7640
8444
|
|
|
@@ -7646,69 +8450,18 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
|
|
|
7646
8450
|
}
|
|
7647
8451
|
|
|
7648
8452
|
/**
|
|
7649
|
-
*
|
|
7650
|
-
* ones in the
|
|
7651
|
-
* {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
|
|
7652
|
-
* @public
|
|
7653
|
-
*/
|
|
7654
|
-
export declare interface TLFontFace {
|
|
7655
|
-
/**
|
|
7656
|
-
* How this font can be referred to in CSS.
|
|
7657
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
|
|
7658
|
-
*/
|
|
7659
|
-
readonly family: string;
|
|
7660
|
-
/**
|
|
7661
|
-
* The source of the font. This
|
|
7662
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
|
|
7663
|
-
*/
|
|
7664
|
-
readonly src: TLFontFaceSource;
|
|
7665
|
-
/**
|
|
7666
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
|
|
7667
|
-
*/
|
|
7668
|
-
readonly ascentOverride?: string;
|
|
7669
|
-
/**
|
|
7670
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
|
|
7671
|
-
*/
|
|
7672
|
-
readonly descentOverride?: string;
|
|
7673
|
-
/**
|
|
7674
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
|
|
7675
|
-
*/
|
|
7676
|
-
readonly stretch?: string;
|
|
7677
|
-
/**
|
|
7678
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
|
|
7679
|
-
*/
|
|
7680
|
-
readonly style?: string;
|
|
7681
|
-
/**
|
|
7682
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
|
|
7683
|
-
*/
|
|
7684
|
-
readonly weight?: string;
|
|
7685
|
-
/**
|
|
7686
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
|
|
7687
|
-
*/
|
|
7688
|
-
readonly featureSettings?: string;
|
|
7689
|
-
/**
|
|
7690
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
|
|
7691
|
-
*/
|
|
7692
|
-
readonly lineGapOverride?: string;
|
|
7693
|
-
/**
|
|
7694
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
|
|
7695
|
-
*/
|
|
7696
|
-
readonly unicodeRange?: string;
|
|
7697
|
-
}
|
|
7698
|
-
|
|
7699
|
-
/**
|
|
7700
|
-
* Represents the `src` property of a {@link TLFontFace}.
|
|
7701
|
-
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
|
|
8453
|
+
* Emitted every animation frame when at least one `'frame'` listener is registered.
|
|
7702
8454
|
* @public
|
|
7703
8455
|
*/
|
|
7704
|
-
export declare interface
|
|
7705
|
-
/**
|
|
7706
|
-
|
|
7707
|
-
|
|
7708
|
-
|
|
7709
|
-
|
|
7710
|
-
|
|
7711
|
-
|
|
8456
|
+
export declare interface TLFramePerfEvent {
|
|
8457
|
+
/** Time since the last frame in ms. */
|
|
8458
|
+
elapsed: number;
|
|
8459
|
+
/** Total shapes on the current page. */
|
|
8460
|
+
shapeCount: number;
|
|
8461
|
+
/** Number of shapes culled (off-screen) from rendering. */
|
|
8462
|
+
culledShapeCount: number;
|
|
8463
|
+
/** Number of shapes visible (not culled) in the viewport. */
|
|
8464
|
+
visibleShapeCount: number;
|
|
7712
8465
|
}
|
|
7713
8466
|
|
|
7714
8467
|
/** Additional options for the {@link ShapeUtil.getGeometry} method.
|
|
@@ -7789,20 +8542,6 @@ export declare interface TLHandleDragInfo<T extends TLShape> {
|
|
|
7789
8542
|
initial?: T | undefined;
|
|
7790
8543
|
}
|
|
7791
8544
|
|
|
7792
|
-
/** @public */
|
|
7793
|
-
export declare interface TLHandleProps {
|
|
7794
|
-
shapeId: TLShapeId;
|
|
7795
|
-
handle: TLHandle;
|
|
7796
|
-
zoom: number;
|
|
7797
|
-
isCoarse: boolean;
|
|
7798
|
-
className?: string;
|
|
7799
|
-
}
|
|
7800
|
-
|
|
7801
|
-
/** @public */
|
|
7802
|
-
export declare interface TLHandlesProps {
|
|
7803
|
-
children: ReactNode;
|
|
7804
|
-
}
|
|
7805
|
-
|
|
7806
8545
|
/** @public */
|
|
7807
8546
|
export declare interface TLHistoryBatchOptions {
|
|
7808
8547
|
/**
|
|
@@ -7853,6 +8592,38 @@ export declare type TLIndicatorPath = {
|
|
|
7853
8592
|
path: Path2D;
|
|
7854
8593
|
} | Path2D;
|
|
7855
8594
|
|
|
8595
|
+
/**
|
|
8596
|
+
* Emitted when an interaction state is exited, with aggregated frame time stats.
|
|
8597
|
+
* @public
|
|
8598
|
+
*/
|
|
8599
|
+
export declare interface TLInteractionEndPerfEvent extends TLPerfFrameTimeStats {
|
|
8600
|
+
/** The state node id (e.g. `'translating'`). */
|
|
8601
|
+
name: string;
|
|
8602
|
+
/** Full tool path (e.g. `'select.translating'`). */
|
|
8603
|
+
path: string;
|
|
8604
|
+
/** Total shapes on the current page. */
|
|
8605
|
+
shapeCount: number;
|
|
8606
|
+
/** Breakdown of selected shape types at interaction start (e.g. `{ geo: 2, draw: 1 }`). */
|
|
8607
|
+
selectedShapeTypes: Record<string, number>;
|
|
8608
|
+
/** Camera zoom level (`camera.z`) at interaction end. */
|
|
8609
|
+
zoomLevel: number;
|
|
8610
|
+
/** `performance.now()` when the interaction ended. */
|
|
8611
|
+
timestamp: number;
|
|
8612
|
+
}
|
|
8613
|
+
|
|
8614
|
+
/**
|
|
8615
|
+
* Emitted when an interaction state (e.g. translating, resizing) is entered.
|
|
8616
|
+
* @public
|
|
8617
|
+
*/
|
|
8618
|
+
export declare interface TLInteractionStartPerfEvent {
|
|
8619
|
+
/** The state node id (e.g. `'translating'`). */
|
|
8620
|
+
name: string;
|
|
8621
|
+
/** Full tool path (e.g. `'select.translating'`). */
|
|
8622
|
+
path: string;
|
|
8623
|
+
/** `performance.now()` when the interaction started. */
|
|
8624
|
+
timestamp: number;
|
|
8625
|
+
}
|
|
8626
|
+
|
|
7856
8627
|
/** @public */
|
|
7857
8628
|
export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
|
|
7858
8629
|
|
|
@@ -8100,6 +8871,130 @@ export declare const tlmenus: {
|
|
|
8100
8871
|
*/
|
|
8101
8872
|
export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
|
|
8102
8873
|
|
|
8874
|
+
/** @public */
|
|
8875
|
+
export declare interface TLOverlay<Props = Record<string, unknown>> {
|
|
8876
|
+
/**
|
|
8877
|
+
* Globally unique id for this overlay instance across all overlay utils.
|
|
8878
|
+
* Hit-test and hover lookup key on `id` alone, so utils must namespace their
|
|
8879
|
+
* ids (e.g. `'selection_fg:top_left'`, `'handle:<shapeId>:<handleId>'`) to
|
|
8880
|
+
* avoid colliding with overlays from other utils.
|
|
8881
|
+
*/
|
|
8882
|
+
id: string;
|
|
8883
|
+
/** The overlay util type that owns this instance */
|
|
8884
|
+
type: string;
|
|
8885
|
+
/** Arbitrary props for the overlay (handle id, corner name, etc.) */
|
|
8886
|
+
props: Props;
|
|
8887
|
+
}
|
|
8888
|
+
|
|
8889
|
+
/**
|
|
8890
|
+
* An active overlay util paired with the overlays it produced for the current
|
|
8891
|
+
* editor state. Returned by {@link OverlayManager.getActiveOverlayEntries} so
|
|
8892
|
+
* hit-test, render, and debug paths share a single scan per reactive tick.
|
|
8893
|
+
*
|
|
8894
|
+
* @public
|
|
8895
|
+
*/
|
|
8896
|
+
export declare interface TLOverlayEntry {
|
|
8897
|
+
util: OverlayUtil;
|
|
8898
|
+
overlays: TLOverlay[];
|
|
8899
|
+
}
|
|
8900
|
+
|
|
8901
|
+
/** @public */
|
|
8902
|
+
export declare interface TLOverlayUtilConstructor<U extends OverlayUtil = OverlayUtil> {
|
|
8903
|
+
new (editor: Editor): U;
|
|
8904
|
+
type: string;
|
|
8905
|
+
configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
|
|
8906
|
+
options: infer Options;
|
|
8907
|
+
} ? Partial<Options> : never): T;
|
|
8908
|
+
}
|
|
8909
|
+
|
|
8910
|
+
/**
|
|
8911
|
+
* Map of all performance event names to their payload types.
|
|
8912
|
+
* Used with {@link PerformanceManager.on} and {@link PerformanceManager.once}.
|
|
8913
|
+
* @public
|
|
8914
|
+
*/
|
|
8915
|
+
export declare interface TLPerfEventMap {
|
|
8916
|
+
/** An interaction state was entered. */
|
|
8917
|
+
'interaction-start': [TLInteractionStartPerfEvent];
|
|
8918
|
+
/** An interaction state was exited, with aggregated frame time stats. */
|
|
8919
|
+
'interaction-end': [TLInteractionEndPerfEvent];
|
|
8920
|
+
/** A camera operation (pan/zoom) began. */
|
|
8921
|
+
'camera-start': [TLCameraStartPerfEvent];
|
|
8922
|
+
/** A camera operation ended (after debounce), with aggregated frame time stats. */
|
|
8923
|
+
'camera-end': [TLCameraEndPerfEvent];
|
|
8924
|
+
/** Shapes were created. */
|
|
8925
|
+
'shapes-created': [TLShapeOperationPerfEvent];
|
|
8926
|
+
/** Shapes were updated. */
|
|
8927
|
+
'shapes-updated': [TLShapeOperationPerfEvent];
|
|
8928
|
+
/** Shapes were deleted. */
|
|
8929
|
+
'shapes-deleted': [TLShapeOperationPerfEvent];
|
|
8930
|
+
/** An animation frame was rendered. Only fires when listeners are registered. */
|
|
8931
|
+
frame: [TLFramePerfEvent];
|
|
8932
|
+
/** An undo operation was performed. */
|
|
8933
|
+
undo: [TLUndoRedoPerfEvent];
|
|
8934
|
+
/** A redo operation was performed. */
|
|
8935
|
+
redo: [TLUndoRedoPerfEvent];
|
|
8936
|
+
}
|
|
8937
|
+
|
|
8938
|
+
/**
|
|
8939
|
+
* Common frame time statistics shared by interaction and camera end events.
|
|
8940
|
+
* @public
|
|
8941
|
+
*/
|
|
8942
|
+
export declare interface TLPerfFrameTimeStats {
|
|
8943
|
+
/** Total duration of the session in ms. */
|
|
8944
|
+
duration: number;
|
|
8945
|
+
/** Average frames per second during the session. */
|
|
8946
|
+
fps: number;
|
|
8947
|
+
/** Total number of frames recorded. */
|
|
8948
|
+
frameCount: number;
|
|
8949
|
+
/** Mean frame duration in ms. */
|
|
8950
|
+
avgFrameTime: number;
|
|
8951
|
+
/** Median (p50) frame duration in ms. */
|
|
8952
|
+
medianFrameTime: number;
|
|
8953
|
+
/** 95th percentile frame duration in ms. */
|
|
8954
|
+
p95FrameTime: number;
|
|
8955
|
+
/** 99th percentile frame duration in ms. */
|
|
8956
|
+
p99FrameTime: number;
|
|
8957
|
+
/** Shortest frame duration in ms. */
|
|
8958
|
+
minFrameTime: number;
|
|
8959
|
+
/** Longest frame duration in ms. */
|
|
8960
|
+
maxFrameTime: number;
|
|
8961
|
+
/** Raw frame durations for local analysis. Exclude when sending to analytics. */
|
|
8962
|
+
frameTimes: number[];
|
|
8963
|
+
/**
|
|
8964
|
+
* Long animation frames observed during this period (Chromium 123+).
|
|
8965
|
+
* Only present when the browser supports the Long Animation Frames API and
|
|
8966
|
+
* at least one long frame was observed.
|
|
8967
|
+
* Exclude when sending to analytics — entries are large and contain script URLs.
|
|
8968
|
+
*/
|
|
8969
|
+
longAnimationFrames?: TLPerfLongAnimationFrame[];
|
|
8970
|
+
}
|
|
8971
|
+
|
|
8972
|
+
/**
|
|
8973
|
+
* A long animation frame observed by the browser during an interaction.
|
|
8974
|
+
* Available only in browsers that support the Long Animation Frames API (Chromium 123+).
|
|
8975
|
+
* @public
|
|
8976
|
+
*/
|
|
8977
|
+
export declare interface TLPerfLongAnimationFrame {
|
|
8978
|
+
/** Frame start time (relative to timeOrigin). */
|
|
8979
|
+
startTime: number;
|
|
8980
|
+
/** Total frame duration in ms. */
|
|
8981
|
+
duration: number;
|
|
8982
|
+
/** Time the main thread was blocked in ms. */
|
|
8983
|
+
blockingDuration: number;
|
|
8984
|
+
/** Scripts that contributed to the long frame. */
|
|
8985
|
+
scripts: TLPerfLongAnimationFrameScript[];
|
|
8986
|
+
}
|
|
8987
|
+
|
|
8988
|
+
/** A script attribution entry from a long animation frame. @public */
|
|
8989
|
+
export declare interface TLPerfLongAnimationFrameScript {
|
|
8990
|
+
/** The script source URL (may be empty for inline scripts). */
|
|
8991
|
+
sourceURL: string;
|
|
8992
|
+
/** The function name or invoker description. */
|
|
8993
|
+
invoker: string;
|
|
8994
|
+
/** Time spent in this script in ms. */
|
|
8995
|
+
duration: number;
|
|
8996
|
+
}
|
|
8997
|
+
|
|
8103
8998
|
/** @public */
|
|
8104
8999
|
export declare type TLPinchEvent = (info: TLPinchEventInfo) => void;
|
|
8105
9000
|
|
|
@@ -8139,6 +9034,10 @@ export declare type TLPointerEventTarget = {
|
|
|
8139
9034
|
handle?: TLSelectionHandle;
|
|
8140
9035
|
shape?: undefined;
|
|
8141
9036
|
target: 'selection';
|
|
9037
|
+
} | {
|
|
9038
|
+
overlay: TLOverlay;
|
|
9039
|
+
shape?: undefined;
|
|
9040
|
+
target: 'overlay';
|
|
8142
9041
|
} | {
|
|
8143
9042
|
shape: TLShape;
|
|
8144
9043
|
target: 'shape';
|
|
@@ -8209,28 +9108,12 @@ export declare type TLResizeShapeOptions = Partial<{
|
|
|
8209
9108
|
|
|
8210
9109
|
/* Excluded from this release type: TLRotationSnapshot */
|
|
8211
9110
|
|
|
8212
|
-
/** @public */
|
|
8213
|
-
export declare interface TLScribbleProps {
|
|
8214
|
-
userId?: string;
|
|
8215
|
-
scribble: TLScribble;
|
|
8216
|
-
zoom: number;
|
|
8217
|
-
color?: string;
|
|
8218
|
-
opacity?: number;
|
|
8219
|
-
className?: string;
|
|
8220
|
-
}
|
|
8221
|
-
|
|
8222
9111
|
/** @public */
|
|
8223
9112
|
export declare interface TLSelectionBackgroundProps {
|
|
8224
9113
|
bounds: Box;
|
|
8225
9114
|
rotation: number;
|
|
8226
9115
|
}
|
|
8227
9116
|
|
|
8228
|
-
/** @public */
|
|
8229
|
-
export declare interface TLSelectionForegroundProps {
|
|
8230
|
-
bounds: Box;
|
|
8231
|
-
rotation: number;
|
|
8232
|
-
}
|
|
8233
|
-
|
|
8234
9117
|
/** @public */
|
|
8235
9118
|
export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
|
|
8236
9119
|
|
|
@@ -8265,26 +9148,26 @@ export declare type TLShapeErrorFallbackComponent = ComponentType<{
|
|
|
8265
9148
|
}>;
|
|
8266
9149
|
|
|
8267
9150
|
/** @public */
|
|
8268
|
-
export declare
|
|
8269
|
-
|
|
8270
|
-
|
|
8271
|
-
|
|
8272
|
-
|
|
8273
|
-
export declare interface TLShapeIndicatorProps {
|
|
8274
|
-
userId?: string;
|
|
8275
|
-
shapeId: TLShapeId;
|
|
8276
|
-
color?: string | undefined;
|
|
8277
|
-
opacity?: number;
|
|
8278
|
-
className?: string;
|
|
8279
|
-
hidden?: boolean;
|
|
9151
|
+
export declare interface TLShapeIndicatorOverlay extends TLOverlay {
|
|
9152
|
+
props: {
|
|
9153
|
+
hintingShapeIds: TLShapeId[];
|
|
9154
|
+
idsToDisplay: TLShapeId[];
|
|
9155
|
+
};
|
|
8280
9156
|
}
|
|
8281
9157
|
|
|
8282
|
-
/**
|
|
8283
|
-
|
|
8284
|
-
|
|
8285
|
-
|
|
8286
|
-
|
|
8287
|
-
|
|
9158
|
+
/**
|
|
9159
|
+
* Emitted when shapes are created, updated, or deleted.
|
|
9160
|
+
* @public
|
|
9161
|
+
*/
|
|
9162
|
+
export declare interface TLShapeOperationPerfEvent {
|
|
9163
|
+
/** The operation type. */
|
|
9164
|
+
operation: 'create' | 'delete' | 'update';
|
|
9165
|
+
/** Number of shapes affected. */
|
|
9166
|
+
count: number;
|
|
9167
|
+
/** Breakdown by shape type (e.g. `{ geo: 2, draw: 1 }`). */
|
|
9168
|
+
shapeTypes: Record<string, number>;
|
|
9169
|
+
/** `performance.now()` when the operation occurred. */
|
|
9170
|
+
timestamp: number;
|
|
8288
9171
|
}
|
|
8289
9172
|
|
|
8290
9173
|
/**
|
|
@@ -8344,6 +9227,7 @@ export declare interface TLShapeUtilConstructor<T extends TLShape, U extends Sha
|
|
|
8344
9227
|
type: T['type'];
|
|
8345
9228
|
props?: RecordProps<T>;
|
|
8346
9229
|
migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
|
9230
|
+
handledAssetTypes?: readonly string[];
|
|
8347
9231
|
}
|
|
8348
9232
|
|
|
8349
9233
|
/** @public */
|
|
@@ -8356,13 +9240,6 @@ export declare interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDi
|
|
|
8356
9240
|
children: ReactNode;
|
|
8357
9241
|
}
|
|
8358
9242
|
|
|
8359
|
-
/** @public */
|
|
8360
|
-
export declare interface TLSnapIndicatorProps {
|
|
8361
|
-
className?: string;
|
|
8362
|
-
line: SnapIndicator;
|
|
8363
|
-
zoom: number;
|
|
8364
|
-
}
|
|
8365
|
-
|
|
8366
9243
|
/** @public */
|
|
8367
9244
|
export declare interface TLStateNodeConstructor {
|
|
8368
9245
|
new (editor: Editor, parent?: StateNode): StateNode;
|
|
@@ -8371,6 +9248,7 @@ export declare interface TLStateNodeConstructor {
|
|
|
8371
9248
|
children?(): TLStateNodeConstructor[];
|
|
8372
9249
|
isLockable: boolean;
|
|
8373
9250
|
useCoalescedEvents: boolean;
|
|
9251
|
+
trackPerformance: boolean;
|
|
8374
9252
|
}
|
|
8375
9253
|
|
|
8376
9254
|
/** @public */
|
|
@@ -8383,6 +9261,12 @@ export declare interface TLStoreBaseOptions {
|
|
|
8383
9261
|
defaultName?: string;
|
|
8384
9262
|
/** How should this store upload & resolve assets? */
|
|
8385
9263
|
assets?: TLAssetStore;
|
|
9264
|
+
/**
|
|
9265
|
+
* Named theme definitions. When provided, custom color names are automatically
|
|
9266
|
+
* registered before the store is constructed so persisted data with those
|
|
9267
|
+
* colors passes validation on load.
|
|
9268
|
+
*/
|
|
9269
|
+
themes?: Partial<TLThemes>;
|
|
8386
9270
|
/** How should this store resolve users for attribution? */
|
|
8387
9271
|
users?: TLUserStore;
|
|
8388
9272
|
/** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
|
|
@@ -8404,6 +9288,7 @@ export declare type TLStoreOptions = TLStoreBaseOptions & {
|
|
|
8404
9288
|
|
|
8405
9289
|
/** @public */
|
|
8406
9290
|
export declare type TLStoreSchemaOptions = {
|
|
9291
|
+
assetUtils?: readonly TLAnyAssetUtilConstructor[];
|
|
8407
9292
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
|
8408
9293
|
migrations?: readonly MigrationSequence[];
|
|
8409
9294
|
records?: Record<string, CustomRecordInfo>;
|
|
@@ -8541,6 +9426,19 @@ export declare interface TLTldrawExternalContentSource {
|
|
|
8541
9426
|
data: TLContent;
|
|
8542
9427
|
}
|
|
8543
9428
|
|
|
9429
|
+
/**
|
|
9430
|
+
* Emitted after an undo or redo operation.
|
|
9431
|
+
* @public
|
|
9432
|
+
*/
|
|
9433
|
+
export declare interface TLUndoRedoPerfEvent {
|
|
9434
|
+
/** Whether this was an undo or redo. */
|
|
9435
|
+
type: 'redo' | 'undo';
|
|
9436
|
+
/** Number of undo steps remaining. */
|
|
9437
|
+
undoDepth: number;
|
|
9438
|
+
/** Number of redo steps remaining. */
|
|
9439
|
+
redoDepth: number;
|
|
9440
|
+
}
|
|
9441
|
+
|
|
8544
9442
|
/** @public */
|
|
8545
9443
|
export declare interface TLUpdatePointerOptions {
|
|
8546
9444
|
/** Whether to update the pointer immediately, rather than on the next tick. */
|
|
@@ -8672,6 +9570,9 @@ export declare function uniq<T>(array: {
|
|
|
8672
9570
|
readonly length: number;
|
|
8673
9571
|
} | null | undefined): T[];
|
|
8674
9572
|
|
|
9573
|
+
/** @public */
|
|
9574
|
+
export declare function useColorMode(): 'dark' | 'light';
|
|
9575
|
+
|
|
8675
9576
|
/** @public */
|
|
8676
9577
|
export declare function useContainer(): HTMLElement;
|
|
8677
9578
|
|
|
@@ -8710,9 +9611,6 @@ export declare function useGlobalMenuIsOpen(id: string, onChange?: (isOpen: bool
|
|
|
8710
9611
|
/** @public */
|
|
8711
9612
|
export declare function useIsCropping(shapeId: TLShapeId): boolean;
|
|
8712
9613
|
|
|
8713
|
-
/** @public */
|
|
8714
|
-
export declare function useIsDarkMode(): boolean;
|
|
8715
|
-
|
|
8716
9614
|
/** @public */
|
|
8717
9615
|
export declare function useIsEditing(shapeId: TLShapeId): boolean;
|
|
8718
9616
|
|
|
@@ -8730,6 +9628,10 @@ export declare function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement
|
|
|
8730
9628
|
export declare function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>): void;
|
|
8731
9629
|
|
|
8732
9630
|
/**
|
|
9631
|
+
* Reactive list of peer user IDs for collaborators currently shown in the UI.
|
|
9632
|
+
* Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
|
|
9633
|
+
* transition to idle/inactive, without requiring a manual re-render.
|
|
9634
|
+
*
|
|
8733
9635
|
* @returns The list of peer UserIDs
|
|
8734
9636
|
* @public
|
|
8735
9637
|
*/
|
|
@@ -8750,11 +9652,11 @@ export declare function usePresence(userId: string): null | TLInstancePresence;
|
|
|
8750
9652
|
/** @public */
|
|
8751
9653
|
export declare class UserPreferencesManager {
|
|
8752
9654
|
private readonly user;
|
|
8753
|
-
private readonly
|
|
9655
|
+
private readonly colorScheme;
|
|
8754
9656
|
systemColorScheme: Atom<"dark" | "light", unknown>;
|
|
8755
9657
|
disposables: Set<() => void>;
|
|
8756
9658
|
dispose(): void;
|
|
8757
|
-
constructor(user: TLCurrentUser,
|
|
9659
|
+
constructor(user: TLCurrentUser, colorScheme: 'dark' | 'light' | 'system');
|
|
8758
9660
|
updateUserPreferences(userPreferences: Partial<TLUserPreferences>): void;
|
|
8759
9661
|
getUserPreferences(): {
|
|
8760
9662
|
animationSpeed: number;
|
|
@@ -8795,13 +9697,6 @@ export declare class UserPreferencesManager {
|
|
|
8795
9697
|
/** @public */
|
|
8796
9698
|
export declare const userTypeValidator: T.Validator<TLUserPreferences>;
|
|
8797
9699
|
|
|
8798
|
-
/** @public */
|
|
8799
|
-
export declare function useSelectionEvents(handle: TLSelectionHandle): {
|
|
8800
|
-
onPointerDown: PointerEventHandler<Element>;
|
|
8801
|
-
onPointerMove: (e: PointerEvent_2<Element>) => void;
|
|
8802
|
-
onPointerUp: PointerEventHandler<Element>;
|
|
8803
|
-
};
|
|
8804
|
-
|
|
8805
9700
|
/* Excluded from this release type: useShallowArrayIdentity */
|
|
8806
9701
|
|
|
8807
9702
|
/* Excluded from this release type: useShallowObjectIdentity */
|