tldraw 3.16.0-canary.acb40a76700b → 3.16.0-canary.b0fec0f5b729
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 +315 -110
- package/dist-cjs/index.js +37 -14
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/Tldraw.js +12 -2
- package/dist-cjs/lib/Tldraw.js.map +2 -2
- package/dist-cjs/lib/defaultExternalContentHandlers.js +15 -4
- package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/arrow-types.js.map +1 -1
- package/dist-cjs/lib/shapes/arrow/arrowLabel.js +6 -0
- package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +3 -3
- package/dist-cjs/lib/shapes/arrow/arrowTargetState.js +3 -2
- package/dist-cjs/lib/shapes/arrow/arrowTargetState.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js +1 -1
- package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js.map +2 -2
- package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js +4 -4
- package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +8 -1
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/components/FrameLabelInput.js +8 -2
- package/dist-cjs/lib/shapes/frame/components/FrameLabelInput.js.map +2 -2
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +1 -0
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -0
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +2 -1
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/HyperlinkButton.js +4 -4
- package/dist-cjs/lib/shapes/shared/HyperlinkButton.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -3
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/useEditablePlainText.js +3 -5
- package/dist-cjs/lib/shapes/shared/useEditablePlainText.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +0 -2
- package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
- package/dist-cjs/lib/shapes/text/PlainTextArea.js +3 -2
- package/dist-cjs/lib/shapes/text/PlainTextArea.js.map +2 -2
- package/dist-cjs/lib/shapes/text/RichTextArea.js +3 -3
- package/dist-cjs/lib/shapes/text/RichTextArea.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +3 -1
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
- package/dist-cjs/lib/ui/TldrawUi.js +13 -12
- package/dist-cjs/lib/ui/TldrawUi.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 +1 -1
- package/dist-cjs/lib/ui/components/A11y.js.map +2 -2
- package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
- package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
- package/dist-cjs/lib/ui/components/LanguageMenu.js +1 -0
- package/dist-cjs/lib/ui/components/LanguageMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js +2 -1
- package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js.map +2 -2
- package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +1 -1
- package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +9 -4
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +255 -316
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +147 -0
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +7 -0
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js +68 -0
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js.map +7 -0
- package/dist-cjs/lib/ui/components/StylePanel/{DoubleDropdownPicker.js → StylePanelDoubleDropdownPicker.js} +23 -22
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +7 -0
- package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js} +24 -21
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +7 -0
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js +28 -0
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js.map +7 -0
- package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +2 -0
- package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +38 -9
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js +15 -3
- package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +2 -1
- package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +1 -1
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +6 -2
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +11 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js +5 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +18 -5
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +3 -0
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +75 -37
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js +3 -0
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +10 -9
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js +29 -10
- package/dist-cjs/lib/ui/context/actions.js.map +2 -2
- package/dist-cjs/lib/ui/context/components.js +2 -0
- package/dist-cjs/lib/ui/context/components.js.map +2 -2
- package/dist-cjs/lib/ui/context/events.js.map +1 -1
- package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +1 -1
- package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useExportAs.js +3 -2
- package/dist-cjs/lib/ui/hooks/useExportAs.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js +1 -1
- 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 +6 -2
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
- package/dist-cjs/lib/ui/kbd-utils.js +9 -3
- 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/export/copyAs.js +1 -2
- package/dist-cjs/lib/utils/export/copyAs.js.map +2 -2
- package/dist-cjs/lib/utils/export/export.js +0 -20
- package/dist-cjs/lib/utils/export/export.js.map +2 -2
- package/dist-cjs/lib/utils/export/exportAs.js +1 -2
- package/dist-cjs/lib/utils/export/exportAs.js.map +2 -2
- package/dist-esm/index.d.mts +315 -110
- package/dist-esm/index.mjs +69 -29
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/Tldraw.mjs +14 -4
- package/dist-esm/lib/Tldraw.mjs.map +2 -2
- package/dist-esm/lib/defaultExternalContentHandlers.mjs +15 -4
- package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +6 -0
- package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +3 -3
- package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs +3 -2
- package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs +1 -1
- package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs.map +2 -2
- package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs +4 -5
- package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +8 -1
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs +9 -3
- package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs.map +2 -2
- package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +1 -0
- package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -0
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +2 -1
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs +5 -5
- package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -3
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs +3 -6
- package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +0 -2
- package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
- package/dist-esm/lib/shapes/text/PlainTextArea.mjs +4 -3
- package/dist-esm/lib/shapes/text/PlainTextArea.mjs.map +2 -2
- package/dist-esm/lib/shapes/text/RichTextArea.mjs +3 -4
- package/dist-esm/lib/shapes/text/RichTextArea.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +3 -1
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
- package/dist-esm/lib/ui/TldrawUi.mjs +13 -12
- package/dist-esm/lib/ui/TldrawUi.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 +1 -2
- package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
- package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
- package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
- package/dist-esm/lib/ui/components/LanguageMenu.mjs +1 -0
- package/dist-esm/lib/ui/components/LanguageMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs +2 -1
- package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs.map +2 -2
- package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +1 -2
- package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +14 -5
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +257 -320
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +135 -0
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +7 -0
- package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs +48 -0
- package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs.map +7 -0
- package/dist-esm/lib/ui/components/StylePanel/{DoubleDropdownPicker.mjs → StylePanelDoubleDropdownPicker.mjs} +20 -19
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +7 -0
- package/dist-esm/lib/ui/components/StylePanel/{DropdownPicker.mjs → StylePanelDropdownPicker.mjs} +21 -18
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +7 -0
- package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs +8 -0
- package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs.map +7 -0
- package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +2 -0
- package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +38 -9
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs +15 -3
- package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +2 -1
- package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +1 -1
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +6 -2
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +11 -3
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs +6 -4
- package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +18 -5
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +3 -0
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +76 -37
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs +3 -0
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +10 -9
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs +29 -10
- package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
- package/dist-esm/lib/ui/context/components.mjs +2 -0
- package/dist-esm/lib/ui/context/components.mjs.map +2 -2
- package/dist-esm/lib/ui/context/events.mjs.map +1 -1
- package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +1 -2
- package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useExportAs.mjs +3 -2
- package/dist-esm/lib/ui/hooks/useExportAs.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs +1 -1
- package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +6 -2
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
- package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
- 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/export/copyAs.mjs +1 -2
- package/dist-esm/lib/utils/export/copyAs.mjs.map +2 -2
- package/dist-esm/lib/utils/export/export.mjs +0 -20
- package/dist-esm/lib/utils/export/export.mjs.map +2 -2
- package/dist-esm/lib/utils/export/exportAs.mjs +1 -2
- package/dist-esm/lib/utils/export/exportAs.mjs.map +2 -2
- package/package.json +11 -34
- package/src/index.ts +51 -22
- package/src/lib/Tldraw.tsx +15 -2
- package/src/lib/defaultExternalContentHandlers.ts +26 -4
- package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +85 -14
- package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +103 -8
- package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +48 -6
- package/src/lib/shapes/arrow/arrow-types.ts +3 -5
- package/src/lib/shapes/arrow/arrowLabel.ts +8 -0
- package/src/lib/shapes/arrow/arrowTargetState.ts +34 -3
- package/src/lib/shapes/arrow/toolStates/Pointing.tsx +1 -1
- package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +4 -5
- package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +9 -0
- package/src/lib/shapes/frame/components/FrameLabelInput.tsx +10 -3
- package/src/lib/shapes/geo/GeoShapeUtil.tsx +1 -0
- package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -0
- package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
- package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
- package/src/lib/shapes/note/NoteShapeUtil.tsx +1 -0
- package/src/lib/shapes/shared/HyperlinkButton.tsx +5 -5
- package/src/lib/shapes/shared/PlainTextLabel.tsx +0 -6
- package/src/lib/shapes/shared/freehand/svg.ts +2 -0
- package/src/lib/shapes/shared/useEditablePlainText.ts +3 -10
- package/src/lib/shapes/shared/useImageOrVideoAsset.ts +0 -7
- package/src/lib/shapes/text/PlainTextArea.tsx +4 -3
- package/src/lib/shapes/text/RichTextArea.tsx +3 -4
- package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
- package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +6 -2
- package/src/lib/ui/TldrawUi.tsx +16 -10
- package/src/lib/ui/assetUrls.ts +13 -10
- package/src/lib/ui/components/A11y.tsx +1 -2
- package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
- package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
- package/src/lib/ui/components/LanguageMenu.tsx +1 -0
- package/src/lib/ui/components/Minimap/DefaultMinimap.tsx +2 -1
- package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +1 -2
- package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +27 -13
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +260 -381
- package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx} +70 -50
- package/src/lib/ui/components/StylePanel/StylePanelContext.tsx +63 -0
- package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx} +28 -19
- package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +119 -0
- package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx +9 -0
- package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +2 -0
- package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +32 -15
- package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx +12 -4
- package/src/lib/ui/components/Toolbar/LinkEditor.tsx +1 -0
- package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +1 -1
- package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +9 -2
- package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +7 -3
- package/src/lib/ui/components/primitives/TldrawUiInput.tsx +6 -3
- package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +52 -32
- package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +5 -1
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +82 -30
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +4 -0
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +12 -11
- package/src/lib/ui/context/actions.tsx +36 -10
- package/src/lib/ui/context/components.tsx +3 -0
- package/src/lib/ui/context/events.tsx +1 -1
- package/src/lib/ui/hooks/useClipboardEvents.ts +1 -2
- package/src/lib/ui/hooks/useExportAs.ts +3 -2
- package/src/lib/ui/hooks/useTools.tsx +1 -1
- package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +4 -0
- package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +6 -2
- package/src/lib/ui/kbd-utils.ts +10 -3
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +33 -2
- package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
- package/src/lib/utils/export/copyAs.ts +1 -24
- package/src/lib/utils/export/export.ts +0 -36
- package/src/lib/utils/export/exportAs.ts +1 -32
- package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
- package/src/test/A11y.test.tsx +3 -2
- package/src/test/ClickManager.test.ts +7 -6
- package/src/test/Editor.test.tsx +20 -19
- package/src/test/EraserTool.test.ts +12 -11
- package/src/test/HandTool.test.ts +10 -9
- package/src/test/HighlightShape.test.ts +2 -1
- package/src/test/SelectTool.test.ts +3 -2
- package/src/test/TLUserPreferences.test.ts +4 -3
- package/src/test/TestEditor.ts +21 -17
- package/src/test/TldrawEditor.test.tsx +11 -10
- package/src/test/ZoomTool.test.ts +7 -6
- package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
- package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
- package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
- package/src/test/arrows-megabus.test.tsx +5 -4
- package/src/test/bindings.test.tsx +24 -37
- package/src/test/bookmark-shapes.test.ts +1 -8
- package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
- package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
- package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
- package/src/test/commands/alignShapes.test.tsx +25 -24
- package/src/test/commands/animationSpeed.test.ts +2 -1
- package/src/test/commands/centerOnPoint.test.ts +3 -2
- package/src/test/commands/clipboard.test.ts +3 -2
- package/src/test/commands/createShapes.test.ts +2 -1
- package/src/test/commands/deleteShapes.test.ts +2 -1
- package/src/test/commands/distributeShapes.test.tsx +11 -10
- package/src/test/commands/getSvgString.test.ts +2 -1
- package/src/test/commands/packShapes.test.ts +5 -4
- package/src/test/commands/resizeShape.test.ts +2 -1
- package/src/test/commands/rotateShapes.test.ts +7 -6
- package/src/test/commands/setCamera.test.ts +4 -3
- package/src/test/commands/setCurrentPage.test.ts +3 -2
- package/src/test/commands/stackShapes.test.ts +11 -10
- package/src/test/commands/stretch.test.tsx +13 -12
- package/src/test/createDeepLink.test.tsx +2 -1
- package/src/test/cropping.test.ts +3 -2
- package/src/test/custom-clipping.test.ts +436 -0
- package/src/test/drawing.test.ts +2 -1
- package/src/test/flipShapes.test.ts +4 -3
- package/src/test/frames.test.ts +25 -24
- package/src/test/getCulledShapes.test.tsx +74 -4
- package/src/test/groups.test.tsx +1 -1
- package/src/test/handleDeepLink.test.tsx +2 -1
- package/src/test/maxShapes.test.ts +3 -2
- package/src/test/modifiers.test.ts +5 -4
- package/src/test/navigation.test.ts +12 -11
- package/src/test/panning.test.ts +2 -1
- package/src/test/perf/perf.test.ts +2 -1
- package/src/test/registerDeepLinkListener.test.tsx +10 -9
- package/src/test/resizing.test.ts +39 -38
- package/src/test/select.test.tsx +4 -3
- package/src/test/selection-omnibus.test.ts +11 -10
- package/src/test/shapeutils.test.ts +4 -3
- package/src/test/translating.test.ts +9 -8
- package/tldraw.css +49 -5
- package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
- package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +0 -7
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +0 -7
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +0 -131
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +0 -7
- package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
- package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +0 -7
- package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +0 -7
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +0 -115
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +0 -7
- package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +0 -110
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from './TestEditor'
|
|
3
4
|
|
|
4
5
|
let editor: TestEditor
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
vi.useFakeTimers()
|
|
7
8
|
|
|
8
9
|
const ids = {
|
|
9
10
|
box1: createShapeId('box1'),
|
|
@@ -304,7 +305,7 @@ describe('When clicking and dragging', () => {
|
|
|
304
305
|
|
|
305
306
|
editor.expectToBeIn('eraser.erasing')
|
|
306
307
|
|
|
307
|
-
|
|
308
|
+
vi.advanceTimersByTime(16)
|
|
308
309
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
309
310
|
|
|
310
311
|
expect(editor.getErasingShapeIds()).toEqual([ids.box1])
|
|
@@ -330,7 +331,7 @@ describe('When clicking and dragging', () => {
|
|
|
330
331
|
editor.expectToBeIn('eraser.idle')
|
|
331
332
|
editor.pointerDown(-100, -100) // outside of any shapes
|
|
332
333
|
editor.pointerMove(50, 50) // inside of box1
|
|
333
|
-
|
|
334
|
+
vi.advanceTimersByTime(16)
|
|
334
335
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
335
336
|
expect(editor.getErasingShapeIds()).toEqual([ids.box1])
|
|
336
337
|
editor.cancel()
|
|
@@ -345,7 +346,7 @@ describe('When clicking and dragging', () => {
|
|
|
345
346
|
editor.expectToBeIn('eraser.idle')
|
|
346
347
|
editor.pointerDown(275, 275) // in between box2 AND box3, so over of the new group
|
|
347
348
|
editor.pointerMove(280, 280) // still outside of the new group
|
|
348
|
-
|
|
349
|
+
vi.advanceTimersByTime(16)
|
|
349
350
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
350
351
|
expect(editor.getErasingShapeIds()).toEqual([])
|
|
351
352
|
editor.pointerMove(0, 0)
|
|
@@ -360,7 +361,7 @@ describe('When clicking and dragging', () => {
|
|
|
360
361
|
editor.setCurrentTool('eraser')
|
|
361
362
|
editor.pointerDown(325, 25) // directly on frame1, not its children
|
|
362
363
|
editor.pointerMove(350, 375) // still in the frame, passing through box3
|
|
363
|
-
|
|
364
|
+
vi.advanceTimersByTime(16)
|
|
364
365
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
365
366
|
expect(editor.getErasingShapeIds()).toEqual([ids.box3])
|
|
366
367
|
editor.pointerUp()
|
|
@@ -374,7 +375,7 @@ describe('When clicking and dragging', () => {
|
|
|
374
375
|
editor.pointerDown() // Above the masked part of box3
|
|
375
376
|
expect(editor.getErasingShapeIds()).toEqual([])
|
|
376
377
|
editor.pointerMove(425, 500) // Through the masked part of box3
|
|
377
|
-
|
|
378
|
+
vi.advanceTimersByTime(16)
|
|
378
379
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
379
380
|
expect(editor.getErasingShapeIds()).toEqual([])
|
|
380
381
|
editor.pointerUp()
|
|
@@ -402,7 +403,7 @@ describe('When clicking and dragging', () => {
|
|
|
402
403
|
editor.pointerDown(-100, -100)
|
|
403
404
|
expect(editor.getInstanceState().scribbles.length).toBe(0)
|
|
404
405
|
editor.pointerMove(50, 50)
|
|
405
|
-
|
|
406
|
+
vi.advanceTimersByTime(16)
|
|
406
407
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
407
408
|
editor.pointerMove(50, 50)
|
|
408
409
|
editor.pointerMove(51, 50)
|
|
@@ -472,7 +473,7 @@ describe('When holding meta/ctrl key (accel key)', () => {
|
|
|
472
473
|
editor.pointerDown(-100, -100) // outside of any shapes
|
|
473
474
|
editor.pointerMove(99, 99) // next to box1 AND in box2
|
|
474
475
|
|
|
475
|
-
|
|
476
|
+
vi.advanceTimersByTime(16)
|
|
476
477
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
477
478
|
|
|
478
479
|
// Should include all shapes hit initially
|
|
@@ -505,7 +506,7 @@ describe('When holding meta/ctrl key (accel key)', () => {
|
|
|
505
506
|
editor.pointerDown(-100, -100) // outside of any shapes
|
|
506
507
|
editor.pointerMove(99, 99) // next to box1 AND in box2
|
|
507
508
|
|
|
508
|
-
|
|
509
|
+
vi.advanceTimersByTime(16)
|
|
509
510
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
510
511
|
|
|
511
512
|
// Should include all shapes hit initially
|
|
@@ -558,7 +559,7 @@ describe('When holding meta/ctrl key (accel key)', () => {
|
|
|
558
559
|
editor.pointerDown(-100, -100) // outside of any shapes
|
|
559
560
|
editor.pointerMove(99, 99) // next to box1 AND in box2
|
|
560
561
|
|
|
561
|
-
|
|
562
|
+
vi.advanceTimersByTime(16)
|
|
562
563
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
563
564
|
|
|
564
565
|
// Should include all shapes hit initially
|
|
@@ -589,7 +590,7 @@ describe('When holding meta/ctrl key (accel key)', () => {
|
|
|
589
590
|
editor.pointerDown(-100, -100) // outside of any shapes
|
|
590
591
|
editor.pointerMove(99, 99) // next to box1 AND in box2
|
|
591
592
|
|
|
592
|
-
|
|
593
|
+
vi.advanceTimersByTime(16)
|
|
593
594
|
expect(editor.getInstanceState().scribbles.length).toBe(1)
|
|
594
595
|
|
|
595
596
|
// Should include all shapes hit initially
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { vi } from 'vitest'
|
|
1
2
|
import { HandTool } from '../lib/tools/HandTool/HandTool'
|
|
2
3
|
import { TestEditor, createDefaultShapes } from './TestEditor'
|
|
3
4
|
|
|
@@ -14,7 +15,7 @@ afterEach(() => {
|
|
|
14
15
|
editor?.dispose()
|
|
15
16
|
})
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
vi.useFakeTimers()
|
|
18
19
|
|
|
19
20
|
describe(HandTool, () => {
|
|
20
21
|
it('Double taps to zoom in', () => {
|
|
@@ -22,9 +23,9 @@ describe(HandTool, () => {
|
|
|
22
23
|
expect(editor.getZoomLevel()).toBe(1)
|
|
23
24
|
editor.click()
|
|
24
25
|
editor.click() // double click!
|
|
25
|
-
|
|
26
|
+
vi.advanceTimersByTime(300)
|
|
26
27
|
expect(editor.getZoomLevel()).not.toBe(1) // animating
|
|
27
|
-
|
|
28
|
+
vi.advanceTimersByTime(300)
|
|
28
29
|
expect(editor.getZoomLevel()).toBe(2) // all done
|
|
29
30
|
})
|
|
30
31
|
|
|
@@ -34,9 +35,9 @@ describe(HandTool, () => {
|
|
|
34
35
|
editor.click()
|
|
35
36
|
editor.click()
|
|
36
37
|
editor.click() // triple click!
|
|
37
|
-
|
|
38
|
+
vi.advanceTimersByTime(300)
|
|
38
39
|
expect(editor.getZoomLevel()).not.toBe(1) // animating
|
|
39
|
-
|
|
40
|
+
vi.advanceTimersByTime(300)
|
|
40
41
|
expect(editor.getZoomLevel()).toBe(0.5) // all done
|
|
41
42
|
})
|
|
42
43
|
|
|
@@ -48,9 +49,9 @@ describe(HandTool, () => {
|
|
|
48
49
|
editor.click()
|
|
49
50
|
editor.click()
|
|
50
51
|
editor.click() // quad click!
|
|
51
|
-
|
|
52
|
+
vi.advanceTimersByTime(300)
|
|
52
53
|
expect(editor.getZoomLevel()).not.toBe(2) // animating
|
|
53
|
-
|
|
54
|
+
vi.advanceTimersByTime(300)
|
|
54
55
|
expect(editor.getZoomLevel()).toBe(1) // all done
|
|
55
56
|
})
|
|
56
57
|
|
|
@@ -62,9 +63,9 @@ describe(HandTool, () => {
|
|
|
62
63
|
editor.click()
|
|
63
64
|
editor.click()
|
|
64
65
|
editor.click() // quad click!
|
|
65
|
-
|
|
66
|
+
vi.advanceTimersByTime(300)
|
|
66
67
|
expect(editor.getZoomLevel()).not.toBe(1) // animating
|
|
67
|
-
|
|
68
|
+
vi.advanceTimersByTime(300)
|
|
68
69
|
const z = editor.getZoomLevel()
|
|
69
70
|
editor.zoomToFit() // call zoom to fit manually to compare
|
|
70
71
|
expect(editor.getZoomLevel()).toBe(z) // zoom should not have changed
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
createShapeId,
|
|
8
8
|
toRichText,
|
|
9
9
|
} from '@tldraw/editor'
|
|
10
|
+
import { vi } from 'vitest'
|
|
10
11
|
import { TestEditor } from './TestEditor'
|
|
11
12
|
|
|
12
13
|
let editor: TestEditor
|
|
@@ -18,7 +19,7 @@ const ids = {
|
|
|
18
19
|
arrow1: createShapeId('arrow1'),
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
vi.useFakeTimers()
|
|
22
23
|
|
|
23
24
|
beforeEach(() => {
|
|
24
25
|
editor = new TestEditor()
|
|
@@ -160,7 +161,7 @@ describe('TLSelectTool.Translating', () => {
|
|
|
160
161
|
// There's a timer here! We shouldn't end the clone until the timer is done
|
|
161
162
|
expect(editor.getCurrentPageShapes().length).toBe(2)
|
|
162
163
|
|
|
163
|
-
|
|
164
|
+
vi.advanceTimersByTime(250) // tick tock
|
|
164
165
|
|
|
165
166
|
// Timer is done! We should have ended the clone.
|
|
166
167
|
expect(editor.getCurrentPageShapes().length).toBe(1)
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TLUserPreferences, atom, createTLUser } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from './TestEditor'
|
|
3
4
|
|
|
4
5
|
let editor: TestEditor
|
|
@@ -59,7 +60,7 @@ describe('TLUserPreferences', () => {
|
|
|
59
60
|
locale: null,
|
|
60
61
|
name: null,
|
|
61
62
|
})
|
|
62
|
-
const setUserPreferences =
|
|
63
|
+
const setUserPreferences = vi.fn((preferences) => userPreferences.set(preferences))
|
|
63
64
|
|
|
64
65
|
editor = new TestEditor({
|
|
65
66
|
user: createTLUser({
|
|
@@ -80,7 +81,7 @@ describe('TLUserPreferences', () => {
|
|
|
80
81
|
id: '123',
|
|
81
82
|
name: 'blah',
|
|
82
83
|
})
|
|
83
|
-
const setUserPreferences =
|
|
84
|
+
const setUserPreferences = vi.fn((preferences) => userPreferences.set(preferences))
|
|
84
85
|
|
|
85
86
|
editor = new TestEditor({
|
|
86
87
|
user: createTLUser({
|
|
@@ -101,7 +102,7 @@ describe('TLUserPreferences', () => {
|
|
|
101
102
|
id: '123',
|
|
102
103
|
name: 'blah',
|
|
103
104
|
})
|
|
104
|
-
const setUserPreferences =
|
|
105
|
+
const setUserPreferences = vi.fn((preferences) => userPreferences.set(preferences))
|
|
105
106
|
|
|
106
107
|
editor = new TestEditor({
|
|
107
108
|
user: createTLUser({
|
package/src/test/TestEditor.ts
CHANGED
|
@@ -34,6 +34,7 @@ import {
|
|
|
34
34
|
rotateSelectionHandle,
|
|
35
35
|
tlenv,
|
|
36
36
|
} from '@tldraw/editor'
|
|
37
|
+
import { vi } from 'vitest'
|
|
37
38
|
import { defaultBindingUtils } from '../lib/defaultBindingUtils'
|
|
38
39
|
import { defaultShapeTools } from '../lib/defaultShapeTools'
|
|
39
40
|
import { defaultShapeUtils } from '../lib/defaultShapeUtils'
|
|
@@ -42,7 +43,14 @@ import { defaultTools } from '../lib/defaultTools'
|
|
|
42
43
|
import { defaultAddFontsFromNode, tipTapDefaultExtensions } from '../lib/utils/text/richText'
|
|
43
44
|
import { shapesFromJsx } from './test-jsx'
|
|
44
45
|
|
|
45
|
-
|
|
46
|
+
declare module 'vitest' {
|
|
47
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
48
|
+
interface Matchers<T = any> {
|
|
49
|
+
toCloselyMatchObject(expected: any, roundToNearest?: number): void
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
vi.useFakeTimers()
|
|
46
54
|
|
|
47
55
|
Object.assign(navigator, {
|
|
48
56
|
clipboard: {
|
|
@@ -55,16 +63,6 @@ Object.assign(navigator, {
|
|
|
55
63
|
// @ts-expect-error
|
|
56
64
|
window.ClipboardItem = class {}
|
|
57
65
|
|
|
58
|
-
declare global {
|
|
59
|
-
// eslint-disable-next-line @typescript-eslint/no-namespace
|
|
60
|
-
namespace jest {
|
|
61
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
62
|
-
interface Matchers<R> {
|
|
63
|
-
toCloselyMatchObject(value: any, precision?: number): void
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
66
|
export class TestEditor extends Editor {
|
|
69
67
|
constructor(
|
|
70
68
|
options: Partial<Omit<TLEditorOptions, 'store'>> = {},
|
|
@@ -82,14 +80,20 @@ export class TestEditor extends Editor {
|
|
|
82
80
|
right: 1080,
|
|
83
81
|
}
|
|
84
82
|
// make the app full screen for the sake of the insets property
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
vi.spyOn(document.body, 'scrollWidth', 'get').mockImplementation(() => bounds.width)
|
|
84
|
+
vi.spyOn(document.body, 'scrollHeight', 'get').mockImplementation(() => bounds.height)
|
|
87
85
|
|
|
88
86
|
elm.tabIndex = 0
|
|
89
87
|
elm.getBoundingClientRect = () => bounds as DOMRect
|
|
90
88
|
|
|
91
|
-
const shapeUtilsWithDefaults = [
|
|
92
|
-
|
|
89
|
+
const shapeUtilsWithDefaults = [
|
|
90
|
+
...defaultShapeUtils.filter((s) => !options.shapeUtils?.some((su) => su.type === s.type)),
|
|
91
|
+
...(options.shapeUtils ?? []),
|
|
92
|
+
]
|
|
93
|
+
const bindingUtilsWithDefaults = [
|
|
94
|
+
...defaultBindingUtils.filter((b) => !options.bindingUtils?.some((bu) => bu.type === b.type)),
|
|
95
|
+
...(options.bindingUtils ?? []),
|
|
96
|
+
]
|
|
93
97
|
|
|
94
98
|
super({
|
|
95
99
|
...options,
|
|
@@ -272,12 +276,12 @@ export class TestEditor extends Editor {
|
|
|
272
276
|
* methods, or call mockRestore() to restore the actual implementation (e.g.
|
|
273
277
|
* _transformPointerDownSpy.mockRestore())
|
|
274
278
|
*/
|
|
275
|
-
_transformPointerDownSpy =
|
|
279
|
+
_transformPointerDownSpy = vi
|
|
276
280
|
.spyOn(this._clickManager, 'handlePointerEvent')
|
|
277
281
|
.mockImplementation((info) => {
|
|
278
282
|
return info
|
|
279
283
|
})
|
|
280
|
-
_transformPointerUpSpy =
|
|
284
|
+
_transformPointerUpSpy = vi
|
|
281
285
|
.spyOn(this._clickManager, 'handlePointerEvent')
|
|
282
286
|
.mockImplementation((info) => {
|
|
283
287
|
return info
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
noop,
|
|
13
13
|
} from '@tldraw/editor'
|
|
14
14
|
import { StrictMode } from 'react'
|
|
15
|
+
import { vi } from 'vitest'
|
|
15
16
|
import { defaultShapeUtils } from '../lib/defaultShapeUtils'
|
|
16
17
|
import { defaultTools } from '../lib/defaultTools'
|
|
17
18
|
import { GeoShapeUtil } from '../lib/shapes/geo/GeoShapeUtil'
|
|
@@ -89,7 +90,7 @@ describe('<TldrawEditor />', () => {
|
|
|
89
90
|
})
|
|
90
91
|
|
|
91
92
|
it('throws if the store has different shapes to the ones passed in', async () => {
|
|
92
|
-
const spy =
|
|
93
|
+
const spy = vi.spyOn(console, 'error').mockImplementation(noop)
|
|
93
94
|
// expect(() =>
|
|
94
95
|
// render(
|
|
95
96
|
// <TldrawEditor
|
|
@@ -129,7 +130,7 @@ describe('<TldrawEditor />', () => {
|
|
|
129
130
|
|
|
130
131
|
it('Accepts fresh versions of store and calls `onMount` for each one', async () => {
|
|
131
132
|
const initialStore = createTLStore({ shapeUtils: [], bindingUtils: [] })
|
|
132
|
-
const onMount =
|
|
133
|
+
const onMount = vi.fn()
|
|
133
134
|
const rendered = await renderTldrawComponent(
|
|
134
135
|
<TldrawEditor
|
|
135
136
|
initialState="select"
|
|
@@ -139,8 +140,8 @@ describe('<TldrawEditor />', () => {
|
|
|
139
140
|
/>,
|
|
140
141
|
{ waitForPatterns: false }
|
|
141
142
|
)
|
|
142
|
-
const initialEditor = onMount.mock.lastCall[0]
|
|
143
|
-
|
|
143
|
+
const initialEditor = onMount.mock.lastCall![0]
|
|
144
|
+
vi.spyOn(initialEditor, 'dispose')
|
|
144
145
|
expect(initialEditor.store).toBe(initialStore)
|
|
145
146
|
// re-render with the same store:
|
|
146
147
|
rendered.rerender(
|
|
@@ -161,7 +162,7 @@ describe('<TldrawEditor />', () => {
|
|
|
161
162
|
await rendered.findAllByTestId('canvas')
|
|
162
163
|
expect(initialEditor.dispose).toHaveBeenCalledTimes(1)
|
|
163
164
|
expect(onMount).toHaveBeenCalledTimes(2)
|
|
164
|
-
expect(onMount.mock.lastCall[0].store).toBe(newStore)
|
|
165
|
+
expect(onMount.mock.lastCall![0].store).toBe(newStore)
|
|
165
166
|
})
|
|
166
167
|
|
|
167
168
|
it('Renders the canvas and shapes', async () => {
|
|
@@ -227,7 +228,7 @@ describe('<TldrawEditor />', () => {
|
|
|
227
228
|
|
|
228
229
|
it('renders correctly in strict mode', async () => {
|
|
229
230
|
const editorInstances = new Set<Editor>()
|
|
230
|
-
const onMount =
|
|
231
|
+
const onMount = vi.fn((editor: Editor) => {
|
|
231
232
|
editorInstances.add(editor)
|
|
232
233
|
})
|
|
233
234
|
await renderTldrawComponent(
|
|
@@ -245,7 +246,7 @@ describe('<TldrawEditor />', () => {
|
|
|
245
246
|
|
|
246
247
|
it('allows updating camera options without re-creating the editor', async () => {
|
|
247
248
|
const editors: Editor[] = []
|
|
248
|
-
const onMount =
|
|
249
|
+
const onMount = vi.fn((editor: Editor) => {
|
|
249
250
|
if (!editors.includes(editor)) editors.push(editor)
|
|
250
251
|
})
|
|
251
252
|
|
|
@@ -361,7 +362,7 @@ describe('<TldrawEditor />', () => {
|
|
|
361
362
|
})
|
|
362
363
|
|
|
363
364
|
it('passes through the `assets` prop when creating its own in-memory store', async () => {
|
|
364
|
-
const myUploadFn =
|
|
365
|
+
const myUploadFn = vi.fn()
|
|
365
366
|
const assetStore: TLAssetStore = { upload: myUploadFn }
|
|
366
367
|
|
|
367
368
|
const { editor } = await renderTldrawComponentWithEditor(
|
|
@@ -375,7 +376,7 @@ describe('<TldrawEditor />', () => {
|
|
|
375
376
|
})
|
|
376
377
|
|
|
377
378
|
it('passes through the `assets` prop when using `persistenceKey`', async () => {
|
|
378
|
-
const myUploadFn =
|
|
379
|
+
const myUploadFn = vi.fn()
|
|
379
380
|
const assetStore: TLAssetStore = { upload: myUploadFn }
|
|
380
381
|
|
|
381
382
|
const { editor } = await renderTldrawComponentWithEditor(
|
|
@@ -394,7 +395,7 @@ describe('<TldrawEditor />', () => {
|
|
|
394
395
|
})
|
|
395
396
|
|
|
396
397
|
it('will not re-create the editor if re-rendered with identical options', async () => {
|
|
397
|
-
const onMount =
|
|
398
|
+
const onMount = vi.fn()
|
|
398
399
|
|
|
399
400
|
const renderer = await renderTldrawComponent(
|
|
400
401
|
<TldrawEditor onMount={onMount} options={{ maxPages: 1 }} />,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from './TestEditor'
|
|
3
4
|
|
|
4
5
|
let editor: TestEditor
|
|
@@ -7,7 +8,7 @@ const ids = {
|
|
|
7
8
|
box1: createShapeId('box1'),
|
|
8
9
|
}
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
vi.useFakeTimers()
|
|
11
12
|
|
|
12
13
|
beforeEach(() => {
|
|
13
14
|
editor = new TestEditor()
|
|
@@ -44,7 +45,7 @@ describe('TLSelectTool.Zooming', () => {
|
|
|
44
45
|
expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 })
|
|
45
46
|
editor.click()
|
|
46
47
|
editor.expectToBeIn('zoom.idle')
|
|
47
|
-
|
|
48
|
+
vi.advanceTimersByTime(300)
|
|
48
49
|
expect(editor.getZoomLevel()).toBe(2)
|
|
49
50
|
})
|
|
50
51
|
|
|
@@ -55,7 +56,7 @@ describe('TLSelectTool.Zooming', () => {
|
|
|
55
56
|
expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 })
|
|
56
57
|
expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 })
|
|
57
58
|
editor.click()
|
|
58
|
-
|
|
59
|
+
vi.advanceTimersByTime(300)
|
|
59
60
|
expect(editor.getZoomLevel()).toBe(0.5)
|
|
60
61
|
})
|
|
61
62
|
|
|
@@ -122,7 +123,7 @@ describe('TLSelectTool.Zooming', () => {
|
|
|
122
123
|
editor.expectToBeIn('zoom.zoom_brushing')
|
|
123
124
|
editor.pointerUp(change, change)
|
|
124
125
|
editor.expectToBeIn('zoom.idle')
|
|
125
|
-
|
|
126
|
+
vi.advanceTimersByTime(300)
|
|
126
127
|
expect(editor.getZoomLevel()).toBe(2)
|
|
127
128
|
expect(editor.getViewportPageBounds()).toMatchObject({
|
|
128
129
|
x: change / 2,
|
|
@@ -156,7 +157,7 @@ describe('TLSelectTool.Zooming', () => {
|
|
|
156
157
|
h: newBoundsHeight,
|
|
157
158
|
})
|
|
158
159
|
editor.pointerUp(newBoundsX + newBoundsWidth, newBoundsY + newBoundsHeight)
|
|
159
|
-
|
|
160
|
+
vi.advanceTimersByTime(300)
|
|
160
161
|
expect(editor.getZoomLevel()).toBeCloseTo(1.64)
|
|
161
162
|
expect(editor.getViewportPageBounds()).toMatchInlineSnapshot(`
|
|
162
163
|
Box {
|
|
@@ -195,7 +196,7 @@ describe('TLSelectTool.Zooming', () => {
|
|
|
195
196
|
h: newBoundsHeight,
|
|
196
197
|
})
|
|
197
198
|
editor.pointerUp()
|
|
198
|
-
|
|
199
|
+
vi.advanceTimersByTime(500)
|
|
199
200
|
expect(editor.getZoomLevel()).toBeCloseTo(originalZoomLevel / 2)
|
|
200
201
|
expect(editor.getViewportPageBounds()).toMatchObject({
|
|
201
202
|
x: -440,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
//
|
|
1
|
+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
|
-
exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds
|
|
3
|
+
exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > box shape after second resize 1`] = `
|
|
4
4
|
{
|
|
5
5
|
"h": 40,
|
|
6
6
|
"w": 40,
|
|
@@ -9,7 +9,7 @@ exports[`creating new shapes pencil lines will reisze the group appropriately if
|
|
|
9
9
|
}
|
|
10
10
|
`;
|
|
11
11
|
|
|
12
|
-
exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds
|
|
12
|
+
exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > group shape after second resize 1`] = `
|
|
13
13
|
{
|
|
14
14
|
"h": 120,
|
|
15
15
|
"w": 120,
|
|
@@ -18,7 +18,7 @@ exports[`creating new shapes pencil lines will reisze the group appropriately if
|
|
|
18
18
|
}
|
|
19
19
|
`;
|
|
20
20
|
|
|
21
|
-
exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds
|
|
21
|
+
exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > group with line shape 1`] = `
|
|
22
22
|
Box {
|
|
23
23
|
"h": 110,
|
|
24
24
|
"w": 110,
|
|
@@ -27,7 +27,7 @@ Box {
|
|
|
27
27
|
}
|
|
28
28
|
`;
|
|
29
29
|
|
|
30
|
-
exports[`creating new shapes pencil lines works if the shape drawing begins outside of the current group bounds
|
|
30
|
+
exports[`creating new shapes > pencil > lines > works if the shape drawing begins outside of the current group bounds > box shape after resize 1`] = `
|
|
31
31
|
{
|
|
32
32
|
"h": 50,
|
|
33
33
|
"w": 50,
|
|
@@ -36,7 +36,7 @@ exports[`creating new shapes pencil lines works if the shape drawing begins outs
|
|
|
36
36
|
}
|
|
37
37
|
`;
|
|
38
38
|
|
|
39
|
-
exports[`creating new shapes pencil lines works if the shape drawing begins outside of the current group bounds
|
|
39
|
+
exports[`creating new shapes > pencil > lines > works if the shape drawing begins outside of the current group bounds > group with line 1`] = `
|
|
40
40
|
{
|
|
41
41
|
"h": 200,
|
|
42
42
|
"w": 200,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
//
|
|
1
|
+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
|
-
exports[`When resizing a shape with children Resizes a rotated draw shape
|
|
3
|
+
exports[`When resizing a shape with children > Resizes a rotated draw shape > draw shape after rotating 1`] = `
|
|
4
4
|
{
|
|
5
5
|
"id": "shape:lineA",
|
|
6
6
|
"index": "a3",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { getArrowBindings } from '../lib/shapes/arrow/shared'
|
|
3
4
|
import { TestEditor } from './TestEditor'
|
|
4
5
|
import { TL } from './test-jsx'
|
|
@@ -208,7 +209,7 @@ describe('When binding an arrow to a shape', () => {
|
|
|
208
209
|
|
|
209
210
|
editor.keyUp('Control')
|
|
210
211
|
expect(bindings().end).toBeUndefined() // there's a short delay here, it should still be a point
|
|
211
|
-
|
|
212
|
+
vi.advanceTimersByTime(1000) // once the timer runs out...
|
|
212
213
|
expect(bindings().end).toBeDefined()
|
|
213
214
|
|
|
214
215
|
editor.keyDown('Control') // no delay when pressing control again though
|
|
@@ -216,7 +217,7 @@ describe('When binding an arrow to a shape', () => {
|
|
|
216
217
|
|
|
217
218
|
editor.keyUp('Control')
|
|
218
219
|
editor.pointerUp()
|
|
219
|
-
|
|
220
|
+
vi.advanceTimersByTime(1000) // once the timer runs out...
|
|
220
221
|
expect(bindings().end).toBeUndefined() // still a point because interaction ended before timer ended
|
|
221
222
|
})
|
|
222
223
|
|
|
@@ -237,7 +238,7 @@ describe('When binding an arrow to a shape', () => {
|
|
|
237
238
|
// Releasing ctrl should restore binding (after timer)
|
|
238
239
|
editor.keyUp('Control')
|
|
239
240
|
expect(bindings().end).toBeUndefined() // Still no binding immediately
|
|
240
|
-
|
|
241
|
+
vi.advanceTimersByTime(1000)
|
|
241
242
|
expect(bindings().end).toBeDefined()
|
|
242
243
|
})
|
|
243
244
|
})
|
|
@@ -409,7 +410,7 @@ describe('When starting an arrow inside of multiple shapes', () => {
|
|
|
409
410
|
editor.pointerDown(20, 20) // upper left
|
|
410
411
|
expect(editor.getCurrentPageShapes().length).toBe(1)
|
|
411
412
|
expect(arrow()).toBe(null)
|
|
412
|
-
|
|
413
|
+
vi.advanceTimersByTime(1000)
|
|
413
414
|
editor.pointerMove(25, 20)
|
|
414
415
|
expect(editor.getCurrentPageShapes().length).toBe(2)
|
|
415
416
|
expect(arrow()).toMatchObject({ x: 20, y: 20 })
|
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
createBindingId,
|
|
12
12
|
createShapeId,
|
|
13
13
|
} from '@tldraw/editor'
|
|
14
|
+
import { vi } from 'vitest'
|
|
14
15
|
import { TestEditor } from './TestEditor'
|
|
15
16
|
import { TL } from './test-jsx'
|
|
16
17
|
|
|
@@ -23,37 +24,19 @@ const ids = {
|
|
|
23
24
|
box4: createShapeId('box4'),
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
const mockOnOperationComplete =
|
|
27
|
-
const mockOnBeforeDelete =
|
|
28
|
-
const mockOnAfterDelete =
|
|
29
|
-
const mockOnBeforeFromShapeDelete =
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
[BindingOnShapeIsolateOptions<TLUnknownBinding>]
|
|
40
|
-
>
|
|
41
|
-
const mockOnBeforeToShapeIsolate = jest.fn() as jest.Mock<
|
|
42
|
-
void,
|
|
43
|
-
[BindingOnShapeIsolateOptions<TLUnknownBinding>]
|
|
44
|
-
>
|
|
45
|
-
const mockOnBeforeCreate = jest.fn() as jest.Mock<void, [BindingOnCreateOptions<TLUnknownBinding>]>
|
|
46
|
-
const mockOnAfterCreate = jest.fn() as jest.Mock<void, [BindingOnCreateOptions<TLUnknownBinding>]>
|
|
47
|
-
const mockOnBeforeChange = jest.fn() as jest.Mock<void, [BindingOnChangeOptions<TLUnknownBinding>]>
|
|
48
|
-
const mockOnAfterChange = jest.fn() as jest.Mock<void, [BindingOnChangeOptions<TLUnknownBinding>]>
|
|
49
|
-
const mockOnAfterChangeFromShape = jest.fn() as jest.Mock<
|
|
50
|
-
void,
|
|
51
|
-
[BindingOnShapeChangeOptions<TLUnknownBinding>]
|
|
52
|
-
>
|
|
53
|
-
const mockOnAfterChangeToShape = jest.fn() as jest.Mock<
|
|
54
|
-
void,
|
|
55
|
-
[BindingOnShapeChangeOptions<TLUnknownBinding>]
|
|
56
|
-
>
|
|
27
|
+
const mockOnOperationComplete = vi.fn()
|
|
28
|
+
const mockOnBeforeDelete = vi.fn()
|
|
29
|
+
const mockOnAfterDelete = vi.fn()
|
|
30
|
+
const mockOnBeforeFromShapeDelete = vi.fn()
|
|
31
|
+
const mockOnBeforeToShapeDelete = vi.fn()
|
|
32
|
+
const mockOnBeforeFromShapeIsolate = vi.fn()
|
|
33
|
+
const mockOnBeforeToShapeIsolate = vi.fn()
|
|
34
|
+
const mockOnBeforeCreate = vi.fn()
|
|
35
|
+
const mockOnAfterCreate = vi.fn()
|
|
36
|
+
const mockOnBeforeChange = vi.fn()
|
|
37
|
+
const mockOnAfterChange = vi.fn()
|
|
38
|
+
const mockOnAfterChangeFromShape = vi.fn()
|
|
39
|
+
const mockOnAfterChangeToShape = vi.fn()
|
|
57
40
|
|
|
58
41
|
const calls: string[] = []
|
|
59
42
|
|
|
@@ -273,9 +256,11 @@ test('copying the to shape on its own does trigger the unbind operation', () =>
|
|
|
273
256
|
})
|
|
274
257
|
|
|
275
258
|
test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
|
|
276
|
-
mockOnBeforeFromShapeDelete.mockImplementation(
|
|
277
|
-
|
|
278
|
-
|
|
259
|
+
mockOnBeforeFromShapeDelete.mockImplementation(
|
|
260
|
+
(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
|
|
261
|
+
editor.deleteShape(options.binding.toId)
|
|
262
|
+
}
|
|
263
|
+
)
|
|
279
264
|
|
|
280
265
|
bindShapes(ids.box1, ids.box2)
|
|
281
266
|
bindShapes(ids.box2, ids.box3)
|
|
@@ -316,9 +301,11 @@ test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
|
|
|
316
301
|
})
|
|
317
302
|
|
|
318
303
|
test('cascading deletes in beforeToShapeDelete are handled correctly', () => {
|
|
319
|
-
mockOnBeforeToShapeDelete.mockImplementation(
|
|
320
|
-
|
|
321
|
-
|
|
304
|
+
mockOnBeforeToShapeDelete.mockImplementation(
|
|
305
|
+
(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
|
|
306
|
+
editor.deleteShape(options.binding.fromId)
|
|
307
|
+
}
|
|
308
|
+
)
|
|
322
309
|
|
|
323
310
|
bindShapes(ids.box1, ids.box2)
|
|
324
311
|
bindShapes(ids.box2, ids.box3)
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { TLBookmarkShape, createShapeId } from '@tldraw/editor'
|
|
2
|
-
import {
|
|
3
|
-
BookmarkShapeUtil,
|
|
4
|
-
getHumanReadableAddress,
|
|
5
|
-
} from '../lib/shapes/bookmark/BookmarkShapeUtil'
|
|
2
|
+
import { getHumanReadableAddress } from '../lib/shapes/bookmark/BookmarkShapeUtil'
|
|
6
3
|
import { TestEditor } from './TestEditor'
|
|
7
4
|
|
|
8
5
|
let editor: TestEditor
|
|
@@ -14,10 +11,6 @@ afterEach(() => {
|
|
|
14
11
|
editor?.dispose()
|
|
15
12
|
})
|
|
16
13
|
|
|
17
|
-
describe(BookmarkShapeUtil, () => {
|
|
18
|
-
return
|
|
19
|
-
})
|
|
20
|
-
|
|
21
14
|
describe('The URL formatter', () => {
|
|
22
15
|
it('Formats URLs as human-readable', () => {
|
|
23
16
|
const ids = {
|