tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +19 -125
- package/dist-cjs/index.js +2 -19
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/TldrawImage.js +2 -5
- package/dist-cjs/lib/TldrawImage.js.map +3 -3
- package/dist-cjs/lib/canvas/TldrawCropHandles.js +1 -1
- package/dist-cjs/lib/canvas/TldrawCropHandles.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawHandles.js +1 -1
- package/dist-cjs/lib/canvas/TldrawHandles.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawOverlays.js +1 -1
- package/dist-cjs/lib/canvas/TldrawOverlays.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawSelectionForeground.js +271 -279
- package/dist-cjs/lib/canvas/TldrawSelectionForeground.js.map +2 -2
- package/dist-cjs/lib/defaultExternalContentHandlers.js +0 -1
- package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +41 -24
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/arrowLabel.js +4 -16
- package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/arrowTargetState.js +1 -1
- package/dist-cjs/lib/shapes/arrow/arrowTargetState.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js +0 -3
- package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js.map +2 -2
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +3 -0
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +5 -5
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +3 -0
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js +4 -15
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +1 -2
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/PathBuilder.js +3 -21
- package/dist-cjs/lib/shapes/shared/PathBuilder.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +0 -1
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/RichTextLabel.js +2 -5
- package/dist-cjs/lib/shapes/shared/RichTextLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/SvgTextLabel.js +3 -4
- package/dist-cjs/lib/shapes/shared/SvgTextLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js +1 -10
- package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js.map +2 -2
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js +11 -5
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
- package/dist-cjs/lib/styles.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.js +1 -7
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +22 -43
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js +15 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingShape.js +0 -5
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingShape.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js +0 -8
- package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js +0 -8
- package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js +0 -8
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map +2 -2
- package/dist-cjs/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.js.map +2 -2
- package/dist-cjs/lib/ui/assetUrls.js +13 -10
- package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
- package/dist-cjs/lib/ui/components/A11y.js +12 -14
- package/dist-cjs/lib/ui/components/A11y.js.map +2 -2
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +1 -51
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js +2 -3
- package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +4 -3
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/Spinner.js +25 -2
- package/dist-cjs/lib/ui/components/Spinner.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +0 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +136 -168
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbar.js +7 -21
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +2 -3
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
- package/dist-cjs/lib/ui/components/menu-items.js +0 -22
- package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/Button/TldrawUiButtonIcon.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +0 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js +1 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js +1 -35
- package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +2 -6
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +3 -12
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +2 -0
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js +2 -3
- package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js +8 -57
- package/dist-cjs/lib/ui/context/actions.js.map +2 -2
- package/dist-cjs/lib/ui/context/events.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/menu-hooks.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js +2 -2
- package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +0 -11
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
- package/dist-cjs/lib/ui/kbd-utils.js +1 -2
- package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js +1 -1
- package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js.map +2 -2
- package/dist-cjs/lib/utils/tldr/buildFromV1Document.js +2 -3
- package/dist-cjs/lib/utils/tldr/buildFromV1Document.js.map +2 -2
- package/dist-esm/index.d.mts +19 -125
- package/dist-esm/index.mjs +4 -33
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawImage.mjs +2 -5
- package/dist-esm/lib/TldrawImage.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawCropHandles.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawCropHandles.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawHandles.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawHandles.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawOverlays.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawOverlays.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs +271 -279
- package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs.map +2 -2
- package/dist-esm/lib/defaultExternalContentHandlers.mjs +0 -1
- package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs +41 -26
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +5 -19
- package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs +1 -1
- package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs +0 -3
- package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs.map +2 -2
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs +3 -0
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +5 -5
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +3 -0
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/line/LineShapeUtil.mjs +4 -15
- package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +1 -2
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/PathBuilder.mjs +3 -22
- package/dist-esm/lib/shapes/shared/PathBuilder.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +0 -1
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/RichTextLabel.mjs +2 -5
- package/dist-esm/lib/shapes/shared/RichTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/SvgTextLabel.mjs +3 -4
- package/dist-esm/lib/shapes/shared/SvgTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs +1 -10
- package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs.map +2 -2
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +11 -5
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/styles.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.mjs +1 -7
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +22 -43
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs +15 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/PointingShape.mjs +0 -5
- package/dist-esm/lib/tools/SelectTool/childStates/PointingShape.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs +0 -8
- package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs +0 -8
- package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs +0 -8
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
- package/dist-esm/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.mjs.map +2 -2
- package/dist-esm/lib/ui/assetUrls.mjs +13 -10
- package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
- package/dist-esm/lib/ui/components/A11y.mjs +12 -14
- package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +1 -51
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs +3 -3
- package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +4 -3
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Spinner.mjs +26 -3
- package/dist-esm/lib/ui/components/Spinner.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +1 -3
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +136 -168
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbar.mjs +9 -23
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbar.mjs.map +3 -3
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +3 -3
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +2 -3
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
- package/dist-esm/lib/ui/components/menu-items.mjs +0 -22
- package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/Button/TldrawUiButtonIcon.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +0 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs +1 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs +2 -36
- package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +2 -6
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +3 -12
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +2 -0
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs +2 -3
- package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs +8 -57
- package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
- package/dist-esm/lib/ui/context/events.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/menu-hooks.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs +2 -2
- package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +0 -11
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
- package/dist-esm/lib/ui/kbd-utils.mjs +1 -2
- package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs +1 -1
- package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs.map +2 -2
- package/dist-esm/lib/utils/tldr/buildFromV1Document.mjs +2 -3
- package/dist-esm/lib/utils/tldr/buildFromV1Document.mjs.map +2 -2
- package/package.json +3 -4
- package/src/index.ts +2 -24
- package/src/lib/TldrawImage.tsx +2 -6
- package/src/lib/canvas/TldrawCropHandles.tsx +1 -3
- package/src/lib/canvas/TldrawHandles.tsx +1 -5
- package/src/lib/canvas/TldrawOverlays.tsx +1 -1
- package/src/lib/canvas/TldrawSelectionForeground.tsx +1 -5
- package/src/lib/defaultExternalContentHandlers.ts +1 -2
- package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +5 -5
- package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +43 -26
- package/src/lib/shapes/arrow/arrowLabel.ts +3 -23
- package/src/lib/shapes/arrow/arrowTargetState.ts +1 -2
- package/src/lib/shapes/arrow/toolStates/Pointing.tsx +0 -3
- package/src/lib/shapes/draw/DrawShapeUtil.tsx +4 -0
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +7 -5
- package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +3 -0
- package/src/lib/shapes/line/LineShapeUtil.tsx +5 -19
- package/src/lib/shapes/note/NoteShapeUtil.tsx +0 -1
- package/src/lib/shapes/shared/PathBuilder.test.tsx +1 -1
- package/src/lib/shapes/shared/PathBuilder.tsx +1 -35
- package/src/lib/shapes/shared/PlainTextLabel.tsx +0 -1
- package/src/lib/shapes/shared/RichTextLabel.tsx +0 -4
- package/src/lib/shapes/shared/SvgTextLabel.tsx +2 -4
- package/src/lib/shapes/shared/usePrefersReducedMotion.tsx +1 -11
- package/src/lib/shapes/text/TextShapeUtil.tsx +12 -5
- package/src/lib/styles.tsx +1 -3
- package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.ts +1 -8
- package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +30 -54
- package/src/lib/tools/SelectTool/childStates/Idle.ts +24 -2
- package/src/lib/tools/SelectTool/childStates/PointingShape.ts +0 -7
- package/src/lib/tools/SelectTool/childStates/Resizing.ts +1 -12
- package/src/lib/tools/SelectTool/childStates/Rotating.ts +0 -11
- package/src/lib/tools/SelectTool/childStates/Translating.ts +0 -11
- package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts +0 -1
- package/src/lib/ui/assetUrls.ts +13 -10
- package/src/lib/ui/components/A11y.tsx +13 -15
- package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +0 -40
- package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx +2 -4
- package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +4 -3
- package/src/lib/ui/components/Spinner.tsx +24 -2
- package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +1 -3
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +127 -171
- package/src/lib/ui/components/Toolbar/DefaultImageToolbar.tsx +9 -25
- package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +3 -3
- package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +12 -17
- package/src/lib/ui/components/menu-items.tsx +0 -25
- package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx +2 -2
- package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +0 -2
- package/src/lib/ui/components/primitives/TldrawUiDialog.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiIcon.tsx +3 -41
- package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +1 -6
- package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +3 -24
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +2 -2
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +4 -3
- package/src/lib/ui/context/TldrawUiContextProvider.tsx +20 -23
- package/src/lib/ui/context/actions.tsx +9 -59
- package/src/lib/ui/context/events.tsx +2 -5
- package/src/lib/ui/hooks/menu-hooks.ts +0 -1
- package/src/lib/ui/hooks/useKeyboardShortcuts.ts +2 -3
- package/src/lib/ui/hooks/useTools.tsx +1 -2
- package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +0 -11
- package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +0 -11
- package/src/lib/ui/kbd-utils.ts +1 -2
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +23 -65
- package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +2 -16
- package/src/lib/utils/excalidraw/putExcalidrawContent.ts +1 -1
- package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +3 -24
- package/src/lib/utils/tldr/buildFromV1Document.ts +1 -2
- package/src/test/Editor.test.tsx +1 -1
- package/src/test/SelectTool.test.ts +11 -37
- package/src/test/arrows-megabus.test.tsx +6 -12
- package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +2 -2
- package/src/test/commands/deletePage.test.ts +1 -84
- package/src/test/groups.test.tsx +1 -1
- package/src/test/navigation.test.ts +0 -254
- package/src/test/shapeutils.test.ts +45 -394
- package/src/test/translating.test.ts +1 -1
- package/tldraw.css +50 -88
- package/dist-cjs/lib/ui/components/AccessibilityMenu.js +0 -35
- package/dist-cjs/lib/ui/components/AccessibilityMenu.js.map +0 -7
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +0 -267
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +0 -7
- package/dist-esm/lib/ui/components/AccessibilityMenu.mjs +0 -19
- package/dist-esm/lib/ui/components/AccessibilityMenu.mjs.map +0 -7
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +0 -237
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +0 -7
- package/src/lib/ui/components/AccessibilityMenu.tsx +0 -20
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +0 -313
- package/src/test/inner-outer-margin.test.ts +0 -315
package/tldraw.css
CHANGED
|
@@ -167,12 +167,11 @@
|
|
|
167
167
|
--color-selected: hsl(214, 84%, 56%);
|
|
168
168
|
--color-selected-contrast: hsl(0, 0%, 100%);
|
|
169
169
|
--color-focus: hsl(219, 65%, 50%);
|
|
170
|
-
--color-tooltip: hsla(200, 14%, 4%, 1);
|
|
171
170
|
/* Text */
|
|
172
171
|
--color-text: hsl(0, 0%, 0%);
|
|
173
172
|
--color-text-0: hsl(0, 0%, 11%);
|
|
174
173
|
--color-text-1: hsl(0, 0%, 18%);
|
|
175
|
-
--color-text-3: hsl(
|
|
174
|
+
--color-text-3: hsl(220, 2%, 65%);
|
|
176
175
|
--color-text-shadow: hsl(0, 0%, 100%);
|
|
177
176
|
--color-text-highlight: hsl(52, 100%, 50%);
|
|
178
177
|
--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
|
|
@@ -223,12 +222,11 @@
|
|
|
223
222
|
--color-selected: hsl(217, 89%, 61%);
|
|
224
223
|
--color-selected-contrast: hsl(0, 0%, 100%);
|
|
225
224
|
--color-focus: hsl(217, 76%, 80%);
|
|
226
|
-
--color-tooltip: hsla(0, 0%, 100%, 1);
|
|
227
225
|
/* Text */
|
|
228
226
|
--color-text: hsl(210, 17%, 98%);
|
|
229
227
|
--color-text-0: hsl(0, 9%, 94%);
|
|
230
228
|
--color-text-1: hsl(0, 0%, 85%);
|
|
231
|
-
--color-text-3: hsl(
|
|
229
|
+
--color-text-3: hsl(210, 6%, 45%);
|
|
232
230
|
--color-text-shadow: hsl(210, 13%, 18%);
|
|
233
231
|
--color-text-highlight: hsl(52, 100%, 41%);
|
|
234
232
|
--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
|
|
@@ -780,7 +778,8 @@ input,
|
|
|
780
778
|
position: static;
|
|
781
779
|
}
|
|
782
780
|
|
|
783
|
-
.tl-text-wrapper[data-isediting='false'] .tl-text-input
|
|
781
|
+
.tl-text-wrapper[data-isediting='false'] .tl-text-input,
|
|
782
|
+
.tl-arrow-label[data-isediting='false'] .tl-text-input {
|
|
784
783
|
opacity: 0;
|
|
785
784
|
cursor: var(--tl-cursor-default);
|
|
786
785
|
}
|
|
@@ -973,14 +972,14 @@ input,
|
|
|
973
972
|
font-size: 14px;
|
|
974
973
|
font-weight: 500;
|
|
975
974
|
opacity: 0;
|
|
976
|
-
animation:
|
|
975
|
+
animation: fade-in 0.2s ease-in-out forwards;
|
|
977
976
|
animation-delay: 0.2s;
|
|
978
977
|
position: absolute;
|
|
979
978
|
inset: 0px;
|
|
980
979
|
z-index: var(--layer-canvas-blocker);
|
|
981
980
|
}
|
|
982
981
|
|
|
983
|
-
@keyframes
|
|
982
|
+
@keyframes fade-in {
|
|
984
983
|
0% {
|
|
985
984
|
opacity: 0;
|
|
986
985
|
}
|
|
@@ -989,19 +988,6 @@ input,
|
|
|
989
988
|
}
|
|
990
989
|
}
|
|
991
990
|
|
|
992
|
-
.tl-spinner {
|
|
993
|
-
animation: tl-spin 1s linear infinite;
|
|
994
|
-
}
|
|
995
|
-
|
|
996
|
-
@keyframes tl-spin {
|
|
997
|
-
0% {
|
|
998
|
-
transform: rotate(0deg);
|
|
999
|
-
}
|
|
1000
|
-
100% {
|
|
1001
|
-
transform: rotate(360deg);
|
|
1002
|
-
}
|
|
1003
|
-
}
|
|
1004
|
-
|
|
1005
991
|
/* ---------------------- Brush --------------------- */
|
|
1006
992
|
|
|
1007
993
|
.tl-brush {
|
|
@@ -1193,7 +1179,7 @@ input,
|
|
|
1193
1179
|
|
|
1194
1180
|
/* --------------------- Arrow shape -------------------- */
|
|
1195
1181
|
|
|
1196
|
-
.tl-
|
|
1182
|
+
.tl-arrow-label {
|
|
1197
1183
|
position: absolute;
|
|
1198
1184
|
top: -1px;
|
|
1199
1185
|
left: -1px;
|
|
@@ -1208,15 +1194,33 @@ input,
|
|
|
1208
1194
|
text-shadow: var(--tl-text-outline);
|
|
1209
1195
|
}
|
|
1210
1196
|
|
|
1211
|
-
.tl-
|
|
1197
|
+
.tl-arrow-label[data-isediting='true'] p {
|
|
1198
|
+
opacity: 0;
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1201
|
+
.tl-arrow-label__inner {
|
|
1212
1202
|
border-radius: var(--radius-1);
|
|
1213
1203
|
box-sizing: content-box;
|
|
1204
|
+
position: relative;
|
|
1214
1205
|
height: max-content;
|
|
1215
1206
|
width: max-content;
|
|
1207
|
+
pointer-events: none;
|
|
1208
|
+
display: flex;
|
|
1209
|
+
justify-content: center;
|
|
1210
|
+
align-items: center;
|
|
1216
1211
|
}
|
|
1217
1212
|
|
|
1218
|
-
.tl-
|
|
1213
|
+
.tl-arrow-label .tl-arrow {
|
|
1214
|
+
position: relative;
|
|
1219
1215
|
height: max-content;
|
|
1216
|
+
padding: inherit;
|
|
1217
|
+
overflow: visible;
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
.tl-arrow-label textarea {
|
|
1221
|
+
padding: inherit;
|
|
1222
|
+
/* Don't allow textarea to be zero width */
|
|
1223
|
+
min-width: 4px;
|
|
1220
1224
|
}
|
|
1221
1225
|
|
|
1222
1226
|
.tl-arrow-hint {
|
|
@@ -1877,7 +1881,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1877
1881
|
opacity: 1;
|
|
1878
1882
|
}
|
|
1879
1883
|
|
|
1880
|
-
.tlui-button[aria-expanded='true'][data-direction='left'] {
|
|
1884
|
+
.tlui-button[aria-expanded='true'][data-direction='left']::after {
|
|
1881
1885
|
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
1882
1886
|
opacity: 1;
|
|
1883
1887
|
}
|
|
@@ -2744,7 +2748,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2744
2748
|
justify-content: center;
|
|
2745
2749
|
border-radius: 99px;
|
|
2746
2750
|
opacity: 0;
|
|
2747
|
-
animation:
|
|
2751
|
+
animation: fade-in;
|
|
2748
2752
|
animation-duration: 0.12s;
|
|
2749
2753
|
animation-delay: 2s;
|
|
2750
2754
|
animation-fill-mode: forwards;
|
|
@@ -2780,12 +2784,6 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2780
2784
|
max-width: 148px;
|
|
2781
2785
|
}
|
|
2782
2786
|
|
|
2783
|
-
.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
|
|
2784
|
-
border-radius: 10px;
|
|
2785
|
-
outline: 2px solid var(--color-text);
|
|
2786
|
-
outline-offset: -5px;
|
|
2787
|
-
}
|
|
2788
|
-
|
|
2789
2787
|
.tlui-style-panel::-webkit-scrollbar {
|
|
2790
2788
|
display: none;
|
|
2791
2789
|
}
|
|
@@ -2850,26 +2848,6 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2850
2848
|
}
|
|
2851
2849
|
}
|
|
2852
2850
|
|
|
2853
|
-
/* Accessibility subheadings */
|
|
2854
|
-
|
|
2855
|
-
.tlui-style-panel__section .tlui-style-panel__subheading,
|
|
2856
|
-
.tlui-style-panel__section__common .tlui-style-panel__subheading,
|
|
2857
|
-
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
2858
|
-
margin: 0;
|
|
2859
|
-
padding: var(--space-2) var(--space-3) 0px var(--space-4);
|
|
2860
|
-
font-size: 12px;
|
|
2861
|
-
font-weight: inherit;
|
|
2862
|
-
line-height: inherit;
|
|
2863
|
-
}
|
|
2864
|
-
|
|
2865
|
-
.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
|
|
2866
|
-
padding-top: var(--space-3);
|
|
2867
|
-
}
|
|
2868
|
-
|
|
2869
|
-
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
2870
|
-
padding-top: 0px;
|
|
2871
|
-
}
|
|
2872
|
-
|
|
2873
2851
|
/* --------------------- Bottom --------------------- */
|
|
2874
2852
|
|
|
2875
2853
|
.tlui-layout__bottom {
|
|
@@ -2914,6 +2892,20 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2914
2892
|
display: none;
|
|
2915
2893
|
}
|
|
2916
2894
|
|
|
2895
|
+
.tlui-navigation-panel__toggle .tlui-icon {
|
|
2896
|
+
opacity: 0.24;
|
|
2897
|
+
}
|
|
2898
|
+
|
|
2899
|
+
.tlui-navigation-panel__toggle:active .tlui-icon {
|
|
2900
|
+
opacity: 1;
|
|
2901
|
+
}
|
|
2902
|
+
|
|
2903
|
+
@media (hover: hover) {
|
|
2904
|
+
.tlui-navigation-panel__toggle:hover .tlui-icon {
|
|
2905
|
+
opacity: 1;
|
|
2906
|
+
}
|
|
2907
|
+
}
|
|
2908
|
+
|
|
2917
2909
|
/* Minimap */
|
|
2918
2910
|
|
|
2919
2911
|
.tlui-minimap {
|
|
@@ -3028,36 +3020,6 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3028
3020
|
transition: transform 0.15s ease-out 0.05s;
|
|
3029
3021
|
}
|
|
3030
3022
|
|
|
3031
|
-
/* ------------------- Tooltip -------------------- */
|
|
3032
|
-
|
|
3033
|
-
.tlui-tooltip {
|
|
3034
|
-
font-size: 12px;
|
|
3035
|
-
padding: 2px 8px;
|
|
3036
|
-
border-radius: 4px;
|
|
3037
|
-
background-color: var(--color-tooltip);
|
|
3038
|
-
box-shadow: none;
|
|
3039
|
-
color: var(--color-text-shadow);
|
|
3040
|
-
max-width: 400px;
|
|
3041
|
-
width: fit-content;
|
|
3042
|
-
text-align: center;
|
|
3043
|
-
pointer-events: none;
|
|
3044
|
-
will-change: transform, opacity;
|
|
3045
|
-
z-index: 2;
|
|
3046
|
-
}
|
|
3047
|
-
|
|
3048
|
-
.tlui-tooltip__arrow {
|
|
3049
|
-
fill: var(--color-tooltip);
|
|
3050
|
-
will-change: opacity;
|
|
3051
|
-
}
|
|
3052
|
-
|
|
3053
|
-
[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
|
|
3054
|
-
z-index: var(--layer-toasts) !important;
|
|
3055
|
-
}
|
|
3056
|
-
|
|
3057
|
-
[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
|
|
3058
|
-
transition: all 0.1s ease-out;
|
|
3059
|
-
}
|
|
3060
|
-
|
|
3061
3023
|
/* ------------------- Debug panel ------------------ */
|
|
3062
3024
|
|
|
3063
3025
|
.tlui-debug-panel {
|
|
@@ -3201,11 +3163,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3201
3163
|
|
|
3202
3164
|
@media (prefers-reduced-motion: no-preference) {
|
|
3203
3165
|
.tlui-toast__container[data-state='open'] {
|
|
3204
|
-
animation:
|
|
3166
|
+
animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|
3205
3167
|
}
|
|
3206
3168
|
|
|
3207
3169
|
.tlui-toast__container[data-state='closed'] {
|
|
3208
|
-
animation:
|
|
3170
|
+
animation: hide 100ms ease-in;
|
|
3209
3171
|
}
|
|
3210
3172
|
|
|
3211
3173
|
.tlui-toast__container[data-swipe='move'] {
|
|
@@ -3218,7 +3180,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3218
3180
|
}
|
|
3219
3181
|
|
|
3220
3182
|
.tlui-toast__container[data-swipe='end'] {
|
|
3221
|
-
animation:
|
|
3183
|
+
animation: swipe-out 100ms ease-out;
|
|
3222
3184
|
}
|
|
3223
3185
|
}
|
|
3224
3186
|
|
|
@@ -3233,7 +3195,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3233
3195
|
z-index: var(--layer-canvas-overlays);
|
|
3234
3196
|
background-color: var(--color-overlay);
|
|
3235
3197
|
pointer-events: all;
|
|
3236
|
-
animation:
|
|
3198
|
+
animation: fadeIn 0.12s ease-out;
|
|
3237
3199
|
display: grid;
|
|
3238
3200
|
place-items: center;
|
|
3239
3201
|
overflow-y: auto;
|
|
@@ -3800,7 +3762,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3800
3762
|
}
|
|
3801
3763
|
|
|
3802
3764
|
/* ------------------- Animations ------------------- */
|
|
3803
|
-
@keyframes
|
|
3765
|
+
@keyframes hide {
|
|
3804
3766
|
0% {
|
|
3805
3767
|
opacity: 1;
|
|
3806
3768
|
}
|
|
@@ -3809,7 +3771,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3809
3771
|
}
|
|
3810
3772
|
}
|
|
3811
3773
|
|
|
3812
|
-
@keyframes
|
|
3774
|
+
@keyframes slide-in {
|
|
3813
3775
|
from {
|
|
3814
3776
|
transform: translateX(calc(100% + var(--space-3)));
|
|
3815
3777
|
}
|
|
@@ -3818,7 +3780,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3818
3780
|
}
|
|
3819
3781
|
}
|
|
3820
3782
|
|
|
3821
|
-
@keyframes
|
|
3783
|
+
@keyframes swipe-out {
|
|
3822
3784
|
from {
|
|
3823
3785
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
3824
3786
|
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var AccessibilityMenu_exports = {};
|
|
20
|
-
__export(AccessibilityMenu_exports, {
|
|
21
|
-
AccessibilityMenu: () => AccessibilityMenu
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(AccessibilityMenu_exports);
|
|
24
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
-
var import_menu_items = require("./menu-items");
|
|
26
|
-
var import_TldrawUiMenuGroup = require("./primitives/menus/TldrawUiMenuGroup");
|
|
27
|
-
var import_TldrawUiMenuSubmenu = require("./primitives/menus/TldrawUiMenuSubmenu");
|
|
28
|
-
function AccessibilityMenu() {
|
|
29
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuSubmenu.TldrawUiMenuSubmenu, { id: "help menu accessibility", label: "menu.accessibility", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiMenuGroup.TldrawUiMenuGroup, { id: "accessibility", children: [
|
|
30
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleReduceMotionItem, {}),
|
|
31
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleKeyboardShortcutsItem, {}),
|
|
32
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleUiLabelsItem, {})
|
|
33
|
-
] }) });
|
|
34
|
-
}
|
|
35
|
-
//# sourceMappingURL=AccessibilityMenu.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/ui/components/AccessibilityMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tToggleKeyboardShortcutsItem,\n\tToggleReduceMotionItem,\n\tToggleUiLabelsItem,\n} from './menu-items'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\n/** @public @react */\nexport function AccessibilityMenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"help menu accessibility\" label=\"menu.accessibility\">\n\t\t\t<TldrawUiMenuGroup id=\"accessibility\">\n\t\t\t\t<ToggleReduceMotionItem />\n\t\t\t\t<ToggleKeyboardShortcutsItem />\n\t\t\t\t<ToggleUiLabelsItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYG;AAZH,wBAIO;AACP,+BAAkC;AAClC,iCAAoC;AAG7B,SAAS,oBAAoB;AACnC,SACC,4CAAC,kDAAoB,IAAG,2BAA0B,OAAM,sBACvD,uDAAC,8CAAkB,IAAG,iBACrB;AAAA,gDAAC,4CAAuB;AAAA,IACxB,4CAAC,iDAA4B;AAAA,IAC7B,4CAAC,wCAAmB;AAAA,KACrB,GACD;AAEF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,267 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var TldrawUiTooltip_exports = {};
|
|
30
|
-
__export(TldrawUiTooltip_exports, {
|
|
31
|
-
TldrawUiTooltip: () => TldrawUiTooltip,
|
|
32
|
-
TldrawUiTooltipProvider: () => TldrawUiTooltipProvider
|
|
33
|
-
});
|
|
34
|
-
module.exports = __toCommonJS(TldrawUiTooltip_exports);
|
|
35
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_editor = require("@tldraw/editor");
|
|
37
|
-
var import_radix_ui = require("radix-ui");
|
|
38
|
-
var import_react = __toESM(require("react"));
|
|
39
|
-
var import_usePrefersReducedMotion = require("../../../shapes/shared/usePrefersReducedMotion");
|
|
40
|
-
const DEFAULT_TOOLTIP_DELAY_MS = 700;
|
|
41
|
-
class TooltipManager {
|
|
42
|
-
static instance = null;
|
|
43
|
-
currentTooltipId = null;
|
|
44
|
-
currentContent = "";
|
|
45
|
-
currentSide = "bottom";
|
|
46
|
-
currentSideOffset = 5;
|
|
47
|
-
destroyTimeoutId = null;
|
|
48
|
-
subscribers = /* @__PURE__ */ new Set();
|
|
49
|
-
activeElement = null;
|
|
50
|
-
editor = null;
|
|
51
|
-
static getInstance() {
|
|
52
|
-
if (!TooltipManager.instance) {
|
|
53
|
-
TooltipManager.instance = new TooltipManager();
|
|
54
|
-
}
|
|
55
|
-
return TooltipManager.instance;
|
|
56
|
-
}
|
|
57
|
-
setEditor(editor) {
|
|
58
|
-
this.editor = editor;
|
|
59
|
-
}
|
|
60
|
-
subscribe(callback) {
|
|
61
|
-
this.subscribers.add(callback);
|
|
62
|
-
return () => this.subscribers.delete(callback);
|
|
63
|
-
}
|
|
64
|
-
notify() {
|
|
65
|
-
this.subscribers.forEach((callback) => callback());
|
|
66
|
-
}
|
|
67
|
-
showTooltip(tooltipId, content, element, side = "bottom", sideOffset = 5) {
|
|
68
|
-
if (this.destroyTimeoutId) {
|
|
69
|
-
clearTimeout(this.destroyTimeoutId);
|
|
70
|
-
this.destroyTimeoutId = null;
|
|
71
|
-
}
|
|
72
|
-
this.currentTooltipId = tooltipId;
|
|
73
|
-
this.currentContent = content;
|
|
74
|
-
this.currentSide = side;
|
|
75
|
-
this.currentSideOffset = sideOffset;
|
|
76
|
-
this.activeElement = element;
|
|
77
|
-
this.notify();
|
|
78
|
-
}
|
|
79
|
-
hideTooltip(tooltipId) {
|
|
80
|
-
if (this.currentTooltipId === tooltipId) {
|
|
81
|
-
if (this.editor) {
|
|
82
|
-
this.destroyTimeoutId = this.editor.timers.setTimeout(() => {
|
|
83
|
-
this.currentTooltipId = null;
|
|
84
|
-
this.currentContent = "";
|
|
85
|
-
this.activeElement = null;
|
|
86
|
-
this.destroyTimeoutId = null;
|
|
87
|
-
this.notify();
|
|
88
|
-
}, 300);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
getCurrentTooltipData() {
|
|
93
|
-
return {
|
|
94
|
-
id: this.currentTooltipId,
|
|
95
|
-
content: this.currentContent,
|
|
96
|
-
side: this.currentSide,
|
|
97
|
-
sideOffset: this.currentSideOffset,
|
|
98
|
-
element: this.activeElement
|
|
99
|
-
};
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
const tooltipManager = TooltipManager.getInstance();
|
|
103
|
-
const TooltipSingletonContext = (0, import_react.createContext)(false);
|
|
104
|
-
function TldrawUiTooltipProvider({ children }) {
|
|
105
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Provider, { skipDelayDuration: 700, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipSingletonContext.Provider, { value: true, children: [
|
|
106
|
-
children,
|
|
107
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipSingleton, {})
|
|
108
|
-
] }) });
|
|
109
|
-
}
|
|
110
|
-
function TooltipSingleton() {
|
|
111
|
-
const editor = (0, import_editor.useMaybeEditor)();
|
|
112
|
-
const [, forceUpdate] = (0, import_react.useState)({});
|
|
113
|
-
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
|
|
114
|
-
const triggerRef = (0, import_react.useRef)(null);
|
|
115
|
-
const previousPositionRef = (0, import_react.useRef)(null);
|
|
116
|
-
const prefersReducedMotion = (0, import_usePrefersReducedMotion.usePrefersReducedMotion)();
|
|
117
|
-
const [shouldAnimate, setShouldAnimate] = (0, import_react.useState)(false);
|
|
118
|
-
const isFirstShowRef = (0, import_react.useRef)(true);
|
|
119
|
-
const showTimeoutRef = (0, import_react.useRef)(null);
|
|
120
|
-
(0, import_react.useEffect)(() => {
|
|
121
|
-
tooltipManager.setEditor(editor);
|
|
122
|
-
}, [editor]);
|
|
123
|
-
(0, import_react.useEffect)(() => {
|
|
124
|
-
const unsubscribe = tooltipManager.subscribe(() => {
|
|
125
|
-
forceUpdate({});
|
|
126
|
-
});
|
|
127
|
-
return unsubscribe;
|
|
128
|
-
}, []);
|
|
129
|
-
const tooltipData = tooltipManager.getCurrentTooltipData();
|
|
130
|
-
(0, import_react.useEffect)(() => {
|
|
131
|
-
const shouldBeOpen = Boolean(tooltipData.id && tooltipData.element);
|
|
132
|
-
if (showTimeoutRef.current) {
|
|
133
|
-
clearTimeout(showTimeoutRef.current);
|
|
134
|
-
showTimeoutRef.current = null;
|
|
135
|
-
}
|
|
136
|
-
if (shouldBeOpen && tooltipData.element && triggerRef.current) {
|
|
137
|
-
const activeRect = tooltipData.element.getBoundingClientRect();
|
|
138
|
-
const trigger = triggerRef.current;
|
|
139
|
-
const newPosition = {
|
|
140
|
-
x: activeRect.left + activeRect.width / 2,
|
|
141
|
-
y: activeRect.top + activeRect.height / 2
|
|
142
|
-
};
|
|
143
|
-
let shouldAnimateCheck = false;
|
|
144
|
-
if (previousPositionRef.current) {
|
|
145
|
-
const isNearPrevious = import_editor.Vec.DistMin(previousPositionRef.current, newPosition, 200);
|
|
146
|
-
shouldAnimateCheck = !prefersReducedMotion && isNearPrevious && Math.abs(newPosition.y - previousPositionRef.current.y) < 50;
|
|
147
|
-
}
|
|
148
|
-
setShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck);
|
|
149
|
-
previousPositionRef.current = newPosition;
|
|
150
|
-
trigger.style.position = "fixed";
|
|
151
|
-
trigger.style.left = `${activeRect.left}px`;
|
|
152
|
-
trigger.style.top = `${activeRect.top}px`;
|
|
153
|
-
trigger.style.width = `${activeRect.width}px`;
|
|
154
|
-
trigger.style.height = `${activeRect.height}px`;
|
|
155
|
-
trigger.style.pointerEvents = "none";
|
|
156
|
-
trigger.style.zIndex = "9999";
|
|
157
|
-
if (isFirstShowRef.current && editor) {
|
|
158
|
-
showTimeoutRef.current = editor.timers.setTimeout(() => {
|
|
159
|
-
setIsOpen(true);
|
|
160
|
-
isFirstShowRef.current = false;
|
|
161
|
-
}, editor.options.tooltipDelayMs);
|
|
162
|
-
} else {
|
|
163
|
-
setIsOpen(true);
|
|
164
|
-
}
|
|
165
|
-
} else if (!shouldBeOpen) {
|
|
166
|
-
setIsOpen(false);
|
|
167
|
-
previousPositionRef.current = null;
|
|
168
|
-
setShouldAnimate(false);
|
|
169
|
-
isFirstShowRef.current = true;
|
|
170
|
-
}
|
|
171
|
-
}, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion]);
|
|
172
|
-
if (!tooltipData.id) {
|
|
173
|
-
return null;
|
|
174
|
-
}
|
|
175
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_radix_ui.Tooltip.Root, { open: isOpen, delayDuration: 0, children: [
|
|
176
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: triggerRef }) }),
|
|
177
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
178
|
-
import_radix_ui.Tooltip.Content,
|
|
179
|
-
{
|
|
180
|
-
className: "tlui-tooltip",
|
|
181
|
-
"data-should-animate": shouldAnimate,
|
|
182
|
-
side: tooltipData.side,
|
|
183
|
-
sideOffset: tooltipData.sideOffset,
|
|
184
|
-
avoidCollisions: true,
|
|
185
|
-
collisionPadding: 8,
|
|
186
|
-
dir: "ltr",
|
|
187
|
-
children: [
|
|
188
|
-
tooltipData.content,
|
|
189
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
|
|
190
|
-
]
|
|
191
|
-
}
|
|
192
|
-
)
|
|
193
|
-
] });
|
|
194
|
-
}
|
|
195
|
-
function TldrawUiTooltip({
|
|
196
|
-
children,
|
|
197
|
-
content,
|
|
198
|
-
side = "bottom",
|
|
199
|
-
sideOffset = 5,
|
|
200
|
-
disabled = false
|
|
201
|
-
}) {
|
|
202
|
-
const editor = (0, import_editor.useMaybeEditor)();
|
|
203
|
-
const tooltipId = (0, import_react.useRef)((0, import_editor.uniqueId)());
|
|
204
|
-
const hasProvider = (0, import_react.useContext)(TooltipSingletonContext);
|
|
205
|
-
if (disabled || !content) {
|
|
206
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
|
|
207
|
-
}
|
|
208
|
-
if (!hasProvider) {
|
|
209
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
210
|
-
import_radix_ui.Tooltip.Root,
|
|
211
|
-
{
|
|
212
|
-
delayDuration: editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS,
|
|
213
|
-
disableHoverableContent: true,
|
|
214
|
-
children: [
|
|
215
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Trigger, { asChild: true, children }),
|
|
216
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
217
|
-
import_radix_ui.Tooltip.Content,
|
|
218
|
-
{
|
|
219
|
-
className: "tlui-tooltip",
|
|
220
|
-
side,
|
|
221
|
-
sideOffset,
|
|
222
|
-
avoidCollisions: true,
|
|
223
|
-
collisionPadding: 8,
|
|
224
|
-
dir: "ltr",
|
|
225
|
-
children: [
|
|
226
|
-
content,
|
|
227
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
|
|
228
|
-
]
|
|
229
|
-
}
|
|
230
|
-
)
|
|
231
|
-
]
|
|
232
|
-
}
|
|
233
|
-
);
|
|
234
|
-
}
|
|
235
|
-
const handleMouseEnter = (event) => {
|
|
236
|
-
tooltipManager.showTooltip(
|
|
237
|
-
tooltipId.current,
|
|
238
|
-
content,
|
|
239
|
-
event.currentTarget,
|
|
240
|
-
side,
|
|
241
|
-
sideOffset
|
|
242
|
-
);
|
|
243
|
-
};
|
|
244
|
-
const handleMouseLeave = () => {
|
|
245
|
-
tooltipManager.hideTooltip(tooltipId.current);
|
|
246
|
-
};
|
|
247
|
-
const handleFocus = (event) => {
|
|
248
|
-
tooltipManager.showTooltip(
|
|
249
|
-
tooltipId.current,
|
|
250
|
-
content,
|
|
251
|
-
event.currentTarget,
|
|
252
|
-
side,
|
|
253
|
-
sideOffset
|
|
254
|
-
);
|
|
255
|
-
};
|
|
256
|
-
const handleBlur = () => {
|
|
257
|
-
tooltipManager.hideTooltip(tooltipId.current);
|
|
258
|
-
};
|
|
259
|
-
const childrenWithHandlers = import_react.default.cloneElement(children, {
|
|
260
|
-
onMouseEnter: handleMouseEnter,
|
|
261
|
-
onMouseLeave: handleMouseLeave,
|
|
262
|
-
onFocus: handleFocus,
|
|
263
|
-
onBlur: handleBlur
|
|
264
|
-
});
|
|
265
|
-
return childrenWithHandlers;
|
|
266
|
-
}
|
|
267
|
-
//# sourceMappingURL=TldrawUiTooltip.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react'\nimport { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltipId: string | null = null\n\tprivate currentContent: string | React.ReactNode = ''\n\tprivate currentSide: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n\tprivate currentSideOffset: number = 5\n\tprivate destroyTimeoutId: number | null = null\n\tprivate subscribers: Set<() => void> = new Set()\n\tprivate activeElement: HTMLElement | null = null\n\tprivate editor: Editor | null = null\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\tsetEditor(editor: Editor | null) {\n\t\tthis.editor = editor\n\t}\n\n\tsubscribe(callback: () => void): () => void {\n\t\tthis.subscribers.add(callback)\n\t\treturn () => this.subscribers.delete(callback)\n\t}\n\n\tprivate notify() {\n\t\tthis.subscribers.forEach((callback) => callback())\n\t}\n\n\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\telement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left' = 'bottom',\n\t\tsideOffset: number = 5\n\t) {\n\t\t// Clear any existing destroy timeout\n\t\tif (this.destroyTimeoutId) {\n\t\t\tclearTimeout(this.destroyTimeoutId)\n\t\t\tthis.destroyTimeoutId = null\n\t\t}\n\n\t\t// Update current tooltip\n\t\tthis.currentTooltipId = tooltipId\n\t\tthis.currentContent = content\n\t\tthis.currentSide = side\n\t\tthis.currentSideOffset = sideOffset\n\t\tthis.activeElement = element\n\n\t\tthis.notify()\n\t}\n\n\thideTooltip(tooltipId: string) {\n\t\t// Only hide if this is the current tooltip\n\t\tif (this.currentTooltipId === tooltipId) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tif (this.editor) {\n\t\t\t\tthis.destroyTimeoutId = this.editor.timers.setTimeout(() => {\n\t\t\t\t\tthis.currentTooltipId = null\n\t\t\t\t\tthis.currentContent = ''\n\t\t\t\t\tthis.activeElement = null\n\t\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t\t\tthis.notify()\n\t\t\t\t}, 300)\n\t\t\t}\n\t\t}\n\t}\n\n\tgetCurrentTooltipData() {\n\t\treturn {\n\t\t\tid: this.currentTooltipId,\n\t\t\tcontent: this.currentContent,\n\t\t\tside: this.currentSide,\n\t\t\tsideOffset: this.currentSideOffset,\n\t\t\telement: this.activeElement,\n\t\t}\n\t}\n}\n\nconst tooltipManager = TooltipManager.getInstance()\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst editor = useMaybeEditor()\n\tconst [, forceUpdate] = useState({})\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst previousPositionRef = useRef<{ x: number; y: number } | null>(null)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst [shouldAnimate, setShouldAnimate] = useState(false)\n\tconst isFirstShowRef = useRef(true)\n\tconst showTimeoutRef = useRef<number | null>(null)\n\n\t// Set editor in tooltip manager\n\tuseEffect(() => {\n\t\ttooltipManager.setEditor(editor)\n\t}, [editor])\n\n\t// Subscribe to tooltip manager updates\n\tuseEffect(() => {\n\t\tconst unsubscribe = tooltipManager.subscribe(() => {\n\t\t\tforceUpdate({})\n\t\t})\n\t\treturn unsubscribe\n\t}, [])\n\n\tconst tooltipData = tooltipManager.getCurrentTooltipData()\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tconst shouldBeOpen = Boolean(tooltipData.id && tooltipData.element)\n\n\t\t// Clear any existing show timeout\n\t\tif (showTimeoutRef.current) {\n\t\t\tclearTimeout(showTimeoutRef.current)\n\t\t\tshowTimeoutRef.current = null\n\t\t}\n\n\t\tif (shouldBeOpen && tooltipData.element && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = tooltipData.element.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\tconst newPosition = {\n\t\t\t\tx: activeRect.left + activeRect.width / 2,\n\t\t\t\ty: activeRect.top + activeRect.height / 2,\n\t\t\t}\n\n\t\t\t// Determine if we should animate\n\t\t\tlet shouldAnimateCheck = false\n\t\t\tif (previousPositionRef.current) {\n\t\t\t\tconst isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200)\n\t\t\t\t// Only animate if the distance is less than 200px (nearby tooltips)\n\t\t\t\tshouldAnimateCheck =\n\t\t\t\t\t!prefersReducedMotion &&\n\t\t\t\t\tisNearPrevious &&\n\t\t\t\t\tMath.abs(newPosition.y - previousPositionRef.current.y) < 50\n\t\t\t}\n\t\t\t// Don't animate on initial show (previousPositionRef.current is null)\n\n\t\t\tsetShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck)\n\t\t\tpreviousPositionRef.current = newPosition\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current && editor) {\n\t\t\t\tshowTimeoutRef.current = editor.timers.setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, editor.options.tooltipDelayMs)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else if (!shouldBeOpen) {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset position tracking when tooltip closes\n\t\t\tpreviousPositionRef.current = null\n\t\t\tsetShouldAnimate(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\t}, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion])\n\n\tif (!tooltipData.id) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tdata-should-animate={shouldAnimate}\n\t\t\t\tside={tooltipData.side}\n\t\t\t\tsideOffset={tooltipData.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{tooltipData.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport function TldrawUiTooltip({\n\tchildren,\n\tcontent,\n\tside = 'bottom',\n\tsideOffset = 5,\n\tdisabled = false,\n}: TldrawUiTooltipProps) {\n\tconst editor = useMaybeEditor()\n\tconst tooltipId = useRef<string>(uniqueId())\n\tconst hasProvider = useContext(TooltipSingletonContext)\n\n\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\tif (disabled || !content) {\n\t\treturn <>{children}</>\n\t}\n\n\t// Fallback to old behavior if no provider\n\tif (!hasProvider) {\n\t\treturn (\n\t\t\t<_Tooltip.Root\n\t\t\t\tdelayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}\n\t\t\t\tdisableHoverableContent\n\t\t\t>\n\t\t\t\t<_Tooltip.Trigger asChild>{children}</_Tooltip.Trigger>\n\t\t\t\t<_Tooltip.Content\n\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\tside={side}\n\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\tavoidCollisions\n\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t</_Tooltip.Content>\n\t\t\t</_Tooltip.Root>\n\t\t)\n\t}\n\n\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\ttooltipManager.showTooltip(\n\t\t\ttooltipId.current,\n\t\t\tcontent,\n\t\t\tevent.currentTarget as HTMLElement,\n\t\t\tside,\n\t\t\tsideOffset\n\t\t)\n\t}\n\n\tconst handleMouseLeave = () => {\n\t\ttooltipManager.hideTooltip(tooltipId.current)\n\t}\n\n\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\ttooltipManager.showTooltip(\n\t\t\ttooltipId.current,\n\t\t\tcontent,\n\t\t\tevent.currentTarget as HTMLElement,\n\t\t\tside,\n\t\t\tsideOffset\n\t\t)\n\t}\n\n\tconst handleBlur = () => {\n\t\ttooltipManager.hideTooltip(tooltipId.current)\n\t}\n\n\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\tonMouseEnter: handleMouseEnter,\n\t\tonMouseLeave: handleMouseLeave,\n\t\tonFocus: handleFocus,\n\t\tonBlur: handleBlur,\n\t})\n\n\treturn childrenWithHandlers\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["_Tooltip", "React"]
|
|
7
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
ToggleKeyboardShortcutsItem,
|
|
4
|
-
ToggleReduceMotionItem,
|
|
5
|
-
ToggleUiLabelsItem
|
|
6
|
-
} from "./menu-items.mjs";
|
|
7
|
-
import { TldrawUiMenuGroup } from "./primitives/menus/TldrawUiMenuGroup.mjs";
|
|
8
|
-
import { TldrawUiMenuSubmenu } from "./primitives/menus/TldrawUiMenuSubmenu.mjs";
|
|
9
|
-
function AccessibilityMenu() {
|
|
10
|
-
return /* @__PURE__ */ jsx(TldrawUiMenuSubmenu, { id: "help menu accessibility", label: "menu.accessibility", children: /* @__PURE__ */ jsxs(TldrawUiMenuGroup, { id: "accessibility", children: [
|
|
11
|
-
/* @__PURE__ */ jsx(ToggleReduceMotionItem, {}),
|
|
12
|
-
/* @__PURE__ */ jsx(ToggleKeyboardShortcutsItem, {}),
|
|
13
|
-
/* @__PURE__ */ jsx(ToggleUiLabelsItem, {})
|
|
14
|
-
] }) });
|
|
15
|
-
}
|
|
16
|
-
export {
|
|
17
|
-
AccessibilityMenu
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=AccessibilityMenu.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/ui/components/AccessibilityMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tToggleKeyboardShortcutsItem,\n\tToggleReduceMotionItem,\n\tToggleUiLabelsItem,\n} from './menu-items'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\n/** @public @react */\nexport function AccessibilityMenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"help menu accessibility\" label=\"menu.accessibility\">\n\t\t\t<TldrawUiMenuGroup id=\"accessibility\">\n\t\t\t\t<ToggleReduceMotionItem />\n\t\t\t\t<ToggleKeyboardShortcutsItem />\n\t\t\t\t<ToggleUiLabelsItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n"],
|
|
5
|
-
"mappings": "AAYG,SACC,KADD;AAZH;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAG7B,SAAS,oBAAoB;AACnC,SACC,oBAAC,uBAAoB,IAAG,2BAA0B,OAAM,sBACvD,+BAAC,qBAAkB,IAAG,iBACrB;AAAA,wBAAC,0BAAuB;AAAA,IACxB,oBAAC,+BAA4B;AAAA,IAC7B,oBAAC,sBAAmB;AAAA,KACrB,GACD;AAEF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|