tldraw 3.16.0-next.282b7be564ae → 3.16.0-next.2f9d39693e4c
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 +224 -102
- package/dist-cjs/index.js +33 -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 +5 -4
- package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
- 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/frame/FrameShapeUtil.js +6 -0
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.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/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 +0 -2
- 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/tools/EraserTool/childStates/Erasing.js +25 -1
- package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
- package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js +12 -0
- package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.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/{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/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/{primitives/TldrawUiButtonPicker.js → StylePanel/StylePanelButtonPicker.js} +52 -45
- 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 +3 -2
- 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 +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +10 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +17 -4
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +2 -0
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +37 -36
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +2 -1
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js +23 -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/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 +2 -0
- 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 +224 -102
- package/dist-esm/index.mjs +61 -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 +5 -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/frame/FrameShapeUtil.mjs +6 -0
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.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/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 +0 -2
- 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/tools/EraserTool/childStates/Erasing.mjs +26 -1
- package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
- package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
- package/dist-esm/lib/tools/EraserTool/childStates/Pointing.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/{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/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/{primitives/TldrawUiButtonPicker.mjs → StylePanel/StylePanelButtonPicker.mjs} +54 -43
- 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 +3 -2
- 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 +3 -3
- package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +10 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +17 -4
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +2 -0
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +37 -36
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +2 -1
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs +23 -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/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 +2 -0
- 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 +44 -22
- package/src/lib/Tldraw.tsx +15 -2
- package/src/lib/defaultExternalContentHandlers.ts +12 -4
- package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
- package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
- package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
- package/src/lib/shapes/arrow/arrowLabel.ts +8 -0
- package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +8 -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/shared/PlainTextLabel.tsx +0 -6
- package/src/lib/shapes/shared/freehand/svg.ts +2 -0
- package/src/lib/shapes/shared/useEditablePlainText.ts +0 -6
- package/src/lib/shapes/shared/useImageOrVideoAsset.ts +0 -7
- package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
- package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
- package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
- package/src/lib/ui/TldrawUi.tsx +16 -10
- package/src/lib/ui/assetUrls.ts +13 -10
- 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/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} +63 -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 +4 -3
- 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 +5 -5
- package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +6 -1
- package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +50 -30
- package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +3 -0
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +29 -21
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +3 -2
- package/src/lib/ui/context/actions.tsx +23 -10
- package/src/lib/ui/context/components.tsx +3 -0
- package/src/lib/ui/context/events.tsx +1 -1
- 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 +2 -0
- package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +2 -0
- package/src/lib/ui/kbd-utils.ts +10 -3
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +19 -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 +184 -13
- 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 +13 -15
- 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 +3 -2
- 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 +27 -2
- 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.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.map +0 -7
- package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +0 -110
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tldraw",
|
|
3
3
|
"description": "A tiny little drawing editor.",
|
|
4
|
-
"version": "3.16.0-next.
|
|
4
|
+
"version": "3.16.0-next.2f9d39693e4c",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
],
|
|
28
28
|
"main": "dist-cjs/index.js",
|
|
29
29
|
"scripts": {
|
|
30
|
-
"test-ci": "
|
|
31
|
-
"test": "yarn run -T
|
|
32
|
-
"test-coverage": "
|
|
30
|
+
"test-ci": "yarn run -T vitest run --passWithNoTests",
|
|
31
|
+
"test": "yarn run -T vitest --passWithNoTests",
|
|
32
|
+
"test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
|
|
33
33
|
"predev": "node ./scripts/copy-css-files.mjs",
|
|
34
34
|
"dev": "chokidar '../{editor/editor,tldraw/src/lib/ui}.css' -c 'node ./scripts/copy-css-files.mjs'",
|
|
35
35
|
"prebuild": "node ./scripts/copy-css-files.mjs",
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
"prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
|
|
39
39
|
"postpack": "../../internal/scripts/postpack.sh",
|
|
40
40
|
"pack-tarball": "yarn pack",
|
|
41
|
-
"lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
|
|
41
|
+
"lint": "yarn run -T tsx ../../internal/scripts/lint.ts",
|
|
42
|
+
"context": "yarn run -T tsx ../../internal/scripts/context.ts"
|
|
42
43
|
},
|
|
43
44
|
"files": [
|
|
44
45
|
"tldraw.css",
|
|
@@ -54,13 +55,13 @@
|
|
|
54
55
|
"@tiptap/pm": "^2.9.1",
|
|
55
56
|
"@tiptap/react": "^2.9.1",
|
|
56
57
|
"@tiptap/starter-kit": "^2.9.1",
|
|
57
|
-
"@tldraw/editor": "3.16.0-next.
|
|
58
|
-
"@tldraw/store": "3.16.0-next.
|
|
58
|
+
"@tldraw/editor": "3.16.0-next.2f9d39693e4c",
|
|
59
|
+
"@tldraw/store": "3.16.0-next.2f9d39693e4c",
|
|
59
60
|
"classnames": "^2.5.1",
|
|
60
61
|
"hotkeys-js": "^3.13.9",
|
|
61
62
|
"idb": "^7.1.1",
|
|
62
63
|
"lz-string": "^1.5.0",
|
|
63
|
-
"radix-ui": "^1.
|
|
64
|
+
"radix-ui": "^1.4.2"
|
|
64
65
|
},
|
|
65
66
|
"peerDependencies": {
|
|
66
67
|
"react": "^18.2.0 || ^19.0.0",
|
|
@@ -68,40 +69,16 @@
|
|
|
68
69
|
},
|
|
69
70
|
"devDependencies": {
|
|
70
71
|
"@peculiar/webcrypto": "^1.5.0",
|
|
71
|
-
"@testing-library/jest-dom": "^5.17.0",
|
|
72
72
|
"@testing-library/react": "^15.0.7",
|
|
73
73
|
"@types/classnames": "^2.3.4",
|
|
74
74
|
"@types/lz-string": "^1.5.0",
|
|
75
75
|
"@types/react": "^18.3.18",
|
|
76
76
|
"chokidar-cli": "^3.0.0",
|
|
77
|
-
"jest-canvas-mock": "^2.5.2",
|
|
78
|
-
"jest-environment-jsdom": "^29.7.0",
|
|
79
77
|
"lazyrepo": "0.0.0-alpha.27",
|
|
80
78
|
"react": "^18.3.1",
|
|
81
79
|
"react-dom": "^18.3.1",
|
|
82
|
-
"resize-observer-polyfill": "^1.5.1"
|
|
83
|
-
|
|
84
|
-
"jest": {
|
|
85
|
-
"preset": "../../internal/config/jest/node/jest-preset.js",
|
|
86
|
-
"testEnvironment": "../../../packages/utils/patchedJestJsDom.js",
|
|
87
|
-
"fakeTimers": {
|
|
88
|
-
"enableGlobally": true
|
|
89
|
-
},
|
|
90
|
-
"testPathIgnorePatterns": [
|
|
91
|
-
"^.+\\.*.css$"
|
|
92
|
-
],
|
|
93
|
-
"moduleNameMapper": {
|
|
94
|
-
"^~(.*)": "<rootDir>/src/$1",
|
|
95
|
-
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
|
|
96
|
-
},
|
|
97
|
-
"setupFiles": [
|
|
98
|
-
"raf/polyfill",
|
|
99
|
-
"jest-canvas-mock",
|
|
100
|
-
"<rootDir>/setupTests.js"
|
|
101
|
-
],
|
|
102
|
-
"setupFilesAfterEnv": [
|
|
103
|
-
"../../internal/config/setupJest.ts"
|
|
104
|
-
]
|
|
80
|
+
"resize-observer-polyfill": "^1.5.1",
|
|
81
|
+
"vitest": "^3.2.4"
|
|
105
82
|
},
|
|
106
83
|
"module": "dist-esm/index.mjs",
|
|
107
84
|
"source": "src/index.ts",
|
package/src/index.ts
CHANGED
|
@@ -24,6 +24,7 @@ export { usePrefersReducedMotion } from './lib/shapes/shared/usePrefersReducedMo
|
|
|
24
24
|
export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/components/A11y'
|
|
25
25
|
export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
|
|
26
26
|
export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
|
|
27
|
+
export { DefaultFollowingIndicator } from './lib/ui/components/DefaultFollowingIndicator'
|
|
27
28
|
export { DefaultDialogs } from './lib/ui/components/Dialogs'
|
|
28
29
|
export {
|
|
29
30
|
TldrawUiColumn,
|
|
@@ -85,6 +86,7 @@ export {
|
|
|
85
86
|
defaultHandleExternalUrlContent,
|
|
86
87
|
getAssetInfo,
|
|
87
88
|
getMediaAssetInfoPartial,
|
|
89
|
+
notifyIfFileNotAllowed,
|
|
88
90
|
registerDefaultExternalContentHandlers,
|
|
89
91
|
type TLDefaultExternalContentHandlerOpts,
|
|
90
92
|
type TLExternalContentProps,
|
|
@@ -166,11 +168,10 @@ export {
|
|
|
166
168
|
type TLDefaultFont,
|
|
167
169
|
type TLDefaultFonts,
|
|
168
170
|
} from './lib/shapes/shared/defaultFonts'
|
|
169
|
-
export {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
} from './lib/shapes/shared/PlainTextLabel'
|
|
171
|
+
export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
|
|
172
|
+
export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
|
|
173
|
+
export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
|
|
174
|
+
export { PlainTextLabel, type PlainTextLabelProps } from './lib/shapes/shared/PlainTextLabel'
|
|
174
175
|
export {
|
|
175
176
|
RichTextLabel,
|
|
176
177
|
RichTextSVG,
|
|
@@ -178,10 +179,9 @@ export {
|
|
|
178
179
|
type RichTextSVGProps,
|
|
179
180
|
} from './lib/shapes/shared/RichTextLabel'
|
|
180
181
|
export { useDefaultColorTheme } from './lib/shapes/shared/useDefaultColorTheme'
|
|
181
|
-
export { useEditablePlainText
|
|
182
|
+
export { useEditablePlainText } from './lib/shapes/shared/useEditablePlainText'
|
|
182
183
|
export { useEditableRichText } from './lib/shapes/shared/useEditableRichText'
|
|
183
184
|
export {
|
|
184
|
-
useAsset,
|
|
185
185
|
useImageOrVideoAsset,
|
|
186
186
|
type UseImageOrVideoAssetOptions,
|
|
187
187
|
} from './lib/shapes/shared/useImageOrVideoAsset'
|
|
@@ -360,10 +360,6 @@ export {
|
|
|
360
360
|
TldrawUiMenuSubmenu,
|
|
361
361
|
type TLUiMenuSubmenuProps,
|
|
362
362
|
} from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu'
|
|
363
|
-
export {
|
|
364
|
-
TldrawUiButtonPicker,
|
|
365
|
-
type TLUiButtonPickerProps,
|
|
366
|
-
} from './lib/ui/components/primitives/TldrawUiButtonPicker'
|
|
367
363
|
export {
|
|
368
364
|
TldrawUiContextualToolbar,
|
|
369
365
|
type TLUiContextualToolbarProps,
|
|
@@ -443,17 +439,44 @@ export {
|
|
|
443
439
|
type TLUiStylePanelProps,
|
|
444
440
|
} from './lib/ui/components/StylePanel/DefaultStylePanel'
|
|
445
441
|
export {
|
|
446
|
-
ArrowheadStylePickerSet,
|
|
447
|
-
CommonStylePickerSet,
|
|
448
442
|
DefaultStylePanelContent,
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
443
|
+
StylePanelArrowheadPicker,
|
|
444
|
+
StylePanelArrowKindPicker,
|
|
445
|
+
StylePanelColorPicker,
|
|
446
|
+
StylePanelDashPicker,
|
|
447
|
+
StylePanelFillPicker,
|
|
448
|
+
StylePanelFontPicker,
|
|
449
|
+
StylePanelGeoShapePicker,
|
|
450
|
+
StylePanelLabelAlignPicker,
|
|
451
|
+
StylePanelOpacityPicker,
|
|
452
|
+
StylePanelSection,
|
|
453
|
+
StylePanelSizePicker,
|
|
454
|
+
StylePanelSplinePicker,
|
|
455
|
+
StylePanelTextAlignPicker,
|
|
456
|
+
type StylePanelSectionProps,
|
|
456
457
|
} from './lib/ui/components/StylePanel/DefaultStylePanelContent'
|
|
458
|
+
export {
|
|
459
|
+
StylePanelButtonPicker,
|
|
460
|
+
type StylePanelButtonPickerProps,
|
|
461
|
+
} from './lib/ui/components/StylePanel/StylePanelButtonPicker'
|
|
462
|
+
export {
|
|
463
|
+
StylePanelContextProvider,
|
|
464
|
+
useStylePanelContext,
|
|
465
|
+
type StylePanelContext,
|
|
466
|
+
type StylePanelContextProviderProps,
|
|
467
|
+
} from './lib/ui/components/StylePanel/StylePanelContext'
|
|
468
|
+
export {
|
|
469
|
+
StylePanelDoubleDropdownPicker,
|
|
470
|
+
type StylePanelDoubleDropdownPickerProps,
|
|
471
|
+
} from './lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker'
|
|
472
|
+
export {
|
|
473
|
+
StylePanelDropdownPicker,
|
|
474
|
+
type StylePanelDropdownPickerProps,
|
|
475
|
+
} from './lib/ui/components/StylePanel/StylePanelDropdownPicker'
|
|
476
|
+
export {
|
|
477
|
+
StylePanelSubheading,
|
|
478
|
+
type StylePanelSubheadingProps,
|
|
479
|
+
} from './lib/ui/components/StylePanel/StylePanelSubheading'
|
|
457
480
|
export {
|
|
458
481
|
DefaultImageToolbar,
|
|
459
482
|
type TLUiImageToolbarProps,
|
|
@@ -625,13 +648,12 @@ export {
|
|
|
625
648
|
} from './lib/ui/hooks/useTranslation/useTranslation'
|
|
626
649
|
export { type TLUiIconType } from './lib/ui/icon-types'
|
|
627
650
|
export { useDefaultHelpers, type TLUiOverrideHelpers, type TLUiOverrides } from './lib/ui/overrides'
|
|
628
|
-
export { TldrawUi, type TldrawUiProps } from './lib/ui/TldrawUi'
|
|
651
|
+
export { TldrawUi, TldrawUiInFrontOfTheCanvas, type TldrawUiProps } from './lib/ui/TldrawUi'
|
|
629
652
|
export { containBoxSize, downsizeImage, type BoxWidthHeight } from './lib/utils/assets/assets'
|
|
630
653
|
export { preloadFont, type TLTypeFace } from './lib/utils/assets/preload-font'
|
|
631
654
|
export { getEmbedInfo, type TLEmbedResult } from './lib/utils/embeds/embeds'
|
|
632
655
|
export { putExcalidrawContent } from './lib/utils/excalidraw/putExcalidrawContent'
|
|
633
656
|
export { copyAs, type CopyAsOptions, type TLCopyType } from './lib/utils/export/copyAs'
|
|
634
|
-
export { exportToBlob } from './lib/utils/export/export'
|
|
635
657
|
export { downloadFile, exportAs, type ExportAsOptions } from './lib/utils/export/exportAs'
|
|
636
658
|
export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
|
|
637
659
|
export {
|
package/src/lib/Tldraw.tsx
CHANGED
|
@@ -33,7 +33,7 @@ import { registerDefaultSideEffects } from './defaultSideEffects'
|
|
|
33
33
|
import { defaultTools } from './defaultTools'
|
|
34
34
|
import { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'
|
|
35
35
|
import { allDefaultFontFaces } from './shapes/shared/defaultFonts'
|
|
36
|
-
import { TldrawUi, TldrawUiProps } from './ui/TldrawUi'
|
|
36
|
+
import { TldrawUi, TldrawUiInFrontOfTheCanvas, TldrawUiProps } from './ui/TldrawUi'
|
|
37
37
|
import { TLUiAssetUrlOverrides, useDefaultUiAssetUrlsWithOverrides } from './ui/assetUrls'
|
|
38
38
|
import { LoadingScreen } from './ui/components/LoadingScreen'
|
|
39
39
|
import { Spinner } from './ui/components/Spinner'
|
|
@@ -118,6 +118,18 @@ export function Tldraw(props: TldrawProps) {
|
|
|
118
118
|
|
|
119
119
|
const _components = useShallowObjectIdentity(components)
|
|
120
120
|
|
|
121
|
+
const CustomInFrontOfTheCanvas = components?.InFrontOfTheCanvas
|
|
122
|
+
const InFrontOfTheCanvas = useMemo(() => {
|
|
123
|
+
if (rest.hideUi) return CustomInFrontOfTheCanvas ?? null
|
|
124
|
+
if (!CustomInFrontOfTheCanvas) return TldrawUiInFrontOfTheCanvas
|
|
125
|
+
|
|
126
|
+
return () => (
|
|
127
|
+
<>
|
|
128
|
+
<TldrawUiInFrontOfTheCanvas />
|
|
129
|
+
<CustomInFrontOfTheCanvas />
|
|
130
|
+
</>
|
|
131
|
+
)
|
|
132
|
+
}, [rest.hideUi, CustomInFrontOfTheCanvas])
|
|
121
133
|
const componentsWithDefault = useMemo(
|
|
122
134
|
() => ({
|
|
123
135
|
Scribble: TldrawScribble,
|
|
@@ -129,8 +141,9 @@ export function Tldraw(props: TldrawProps) {
|
|
|
129
141
|
Spinner,
|
|
130
142
|
LoadingScreen,
|
|
131
143
|
..._components,
|
|
144
|
+
InFrontOfTheCanvas,
|
|
132
145
|
}),
|
|
133
|
-
[_components]
|
|
146
|
+
[_components, InFrontOfTheCanvas]
|
|
134
147
|
)
|
|
135
148
|
|
|
136
149
|
const _shapeUtils = useShallowArrayIdentity(shapeUtils)
|
|
@@ -144,7 +144,7 @@ export async function defaultHandleExternalFileAsset(
|
|
|
144
144
|
{ file, assetId }: TLFileExternalAsset,
|
|
145
145
|
options: TLDefaultExternalContentHandlerOpts
|
|
146
146
|
) {
|
|
147
|
-
const isSuccess =
|
|
147
|
+
const isSuccess = notifyIfFileNotAllowed(file, options)
|
|
148
148
|
if (!isSuccess) assert(false, 'File checks failed')
|
|
149
149
|
|
|
150
150
|
const assetInfo = await getAssetInfo(file, options, assetId)
|
|
@@ -161,7 +161,7 @@ export async function defaultHandleExternalFileReplaceContent(
|
|
|
161
161
|
{ file, shapeId, isImage }: TLFileReplaceExternalContent,
|
|
162
162
|
options: TLDefaultExternalContentHandlerOpts
|
|
163
163
|
) {
|
|
164
|
-
const isSuccess =
|
|
164
|
+
const isSuccess = notifyIfFileNotAllowed(file, options)
|
|
165
165
|
if (!isSuccess) assert(false, 'File checks failed')
|
|
166
166
|
|
|
167
167
|
const shape = editor.getShape(shapeId)
|
|
@@ -399,7 +399,7 @@ export async function defaultHandleExternalFileContent(
|
|
|
399
399
|
file: File
|
|
400
400
|
}[] = []
|
|
401
401
|
for (const file of files) {
|
|
402
|
-
const isSuccess =
|
|
402
|
+
const isSuccess = notifyIfFileNotAllowed(file, options)
|
|
403
403
|
if (!isSuccess) continue
|
|
404
404
|
|
|
405
405
|
const assetInfo = await getAssetInfo(file, options)
|
|
@@ -873,7 +873,15 @@ export function createEmptyBookmarkShape(
|
|
|
873
873
|
return editor.getShape(partial.id) as TLBookmarkShape
|
|
874
874
|
}
|
|
875
875
|
|
|
876
|
-
|
|
876
|
+
/**
|
|
877
|
+
* Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
|
|
878
|
+
*
|
|
879
|
+
* @param file - The file to check
|
|
880
|
+
* @param options - The options for the external content handler
|
|
881
|
+
* @returns True if the file is allowed, false otherwise
|
|
882
|
+
* @public
|
|
883
|
+
*/
|
|
884
|
+
export function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts) {
|
|
877
885
|
const {
|
|
878
886
|
acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,
|
|
879
887
|
acceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TLArrowShape, createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../../../test/TestEditor'
|
|
3
4
|
import { ArrowShapeUtil } from './ArrowShapeUtil'
|
|
4
5
|
import { updateArrowTargetState } from './arrowTargetState'
|
|
@@ -12,7 +13,7 @@ const ids = {
|
|
|
12
13
|
arrow1: createShapeId('arrow1'),
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
vi.useFakeTimers()
|
|
16
17
|
|
|
17
18
|
window.requestAnimationFrame = function requestAnimationFrame(cb) {
|
|
18
19
|
return setTimeout(cb, 1000 / 60)
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../../../test/TestEditor'
|
|
3
4
|
import { getArrowTargetState } from './arrowTargetState'
|
|
4
5
|
import { getArrowBindings } from './shared'
|
|
@@ -13,7 +14,7 @@ global.cancelAnimationFrame = function cancelAnimationFrame(id) {
|
|
|
13
14
|
clearTimeout(id)
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
vi.useFakeTimers()
|
|
17
18
|
|
|
18
19
|
const ids = {
|
|
19
20
|
box1: createShapeId('box1'),
|
|
@@ -242,7 +243,7 @@ describe('When pointing an end shape', () => {
|
|
|
242
243
|
},
|
|
243
244
|
})
|
|
244
245
|
|
|
245
|
-
|
|
246
|
+
vi.advanceTimersByTime(1000)
|
|
246
247
|
|
|
247
248
|
arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
|
|
248
249
|
|
|
@@ -306,7 +307,7 @@ describe('When pointing an end shape', () => {
|
|
|
306
307
|
})
|
|
307
308
|
|
|
308
309
|
// Give time for the velocity to die down
|
|
309
|
-
|
|
310
|
+
vi.advanceTimersByTime(1000)
|
|
310
311
|
|
|
311
312
|
arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
|
|
312
313
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../../../test/TestEditor'
|
|
3
4
|
import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
|
|
4
5
|
|
|
@@ -12,7 +13,7 @@ const ids = {
|
|
|
12
13
|
arrow1: createShapeId('arrow1'),
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
vi.useFakeTimers()
|
|
16
17
|
|
|
17
18
|
window.requestAnimationFrame = function requestAnimationFrame(cb) {
|
|
18
19
|
return setTimeout(cb, 1000 / 60)
|
|
@@ -217,7 +218,7 @@ describe('Other cases when arrow are moved', () => {
|
|
|
217
218
|
// When box one is not selected, unbinds box1 and keeps binding to box2
|
|
218
219
|
editor.select(ids.arrow1, ids.box2, ids.box3)
|
|
219
220
|
editor.alignShapes(editor.getSelectedShapeIds(), 'right')
|
|
220
|
-
|
|
221
|
+
vi.advanceTimersByTime(1000)
|
|
221
222
|
|
|
222
223
|
expect(bindings()).toMatchObject({
|
|
223
224
|
start: { toId: ids.box1, props: { isPrecise: false } },
|
|
@@ -227,7 +228,7 @@ describe('Other cases when arrow are moved', () => {
|
|
|
227
228
|
// maintains bindings if they would still be over the same shape (but makes them precise), but unbinds others
|
|
228
229
|
editor.select(ids.arrow1, ids.box3)
|
|
229
230
|
editor.alignShapes(editor.getSelectedShapeIds(), 'top')
|
|
230
|
-
|
|
231
|
+
vi.advanceTimersByTime(1000)
|
|
231
232
|
|
|
232
233
|
expect(bindings()).toMatchObject({
|
|
233
234
|
start: { toId: ids.box1, props: { isPrecise: true } },
|
|
@@ -244,7 +245,7 @@ describe('Other cases when arrow are moved', () => {
|
|
|
244
245
|
// When box one is not selected, unbinds box1 and keeps binding to box2
|
|
245
246
|
editor.select(ids.arrow1, ids.box2, ids.box3)
|
|
246
247
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
|
|
247
|
-
|
|
248
|
+
vi.advanceTimersByTime(1000)
|
|
248
249
|
|
|
249
250
|
expect(bindings()).toMatchObject({
|
|
250
251
|
start: { toId: ids.box1, props: { isPrecise: false } },
|
|
@@ -254,7 +255,7 @@ describe('Other cases when arrow are moved', () => {
|
|
|
254
255
|
// unbinds when only the arrow is selected (not its bound shapes) if the arrow itself has moved
|
|
255
256
|
editor.select(ids.arrow1, ids.box3, ids.box4)
|
|
256
257
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
|
|
257
|
-
|
|
258
|
+
vi.advanceTimersByTime(1000)
|
|
258
259
|
|
|
259
260
|
// The arrow didn't actually move
|
|
260
261
|
expect(bindings()).toMatchObject({
|
|
@@ -265,7 +266,7 @@ describe('Other cases when arrow are moved', () => {
|
|
|
265
266
|
// The arrow will not move because it is still bound to another shape
|
|
266
267
|
editor.updateShapes([{ id: ids.box4, type: 'geo', y: -600 }])
|
|
267
268
|
editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
|
|
268
|
-
|
|
269
|
+
vi.advanceTimersByTime(1000)
|
|
269
270
|
|
|
270
271
|
expect(bindings()).toMatchObject({
|
|
271
272
|
start: undefined,
|
|
@@ -227,6 +227,14 @@ interface ArrowheadInfo {
|
|
|
227
227
|
hasEndArrowhead: boolean
|
|
228
228
|
}
|
|
229
229
|
export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {
|
|
230
|
+
const isEditing = editor.getEditingShapeId() === shape.id
|
|
231
|
+
if (!isEditing && isEmptyRichText(shape.props.richText)) {
|
|
232
|
+
// Short-circuit for empty labels.
|
|
233
|
+
const bodyGeom = getArrowBodyGeometry(editor, shape)
|
|
234
|
+
const labelCenter = bodyGeom.interpolateAlongEdge(0.5)
|
|
235
|
+
return { box: Box.FromCenter(labelCenter, new Vec(0, 0)), debugGeom: [] }
|
|
236
|
+
}
|
|
237
|
+
|
|
230
238
|
const debugGeom: Geometry2d[] = []
|
|
231
239
|
const info = getArrowInfo(editor, shape)!
|
|
232
240
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { TestEditor } from '../../../test/TestEditor'
|
|
2
|
-
import { DrawShapeTool } from './DrawShapeTool'
|
|
3
2
|
|
|
4
3
|
let editor: TestEditor
|
|
5
4
|
|
|
@@ -10,10 +9,6 @@ afterEach(() => {
|
|
|
10
9
|
editor?.dispose()
|
|
11
10
|
})
|
|
12
11
|
|
|
13
|
-
describe(DrawShapeTool, () => {
|
|
14
|
-
return
|
|
15
|
-
})
|
|
16
|
-
|
|
17
12
|
describe('When in the idle state', () => {
|
|
18
13
|
it('Returns to select on cancel', () => {
|
|
19
14
|
editor.setCurrentTool('draw')
|
|
@@ -100,6 +100,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
|
|
|
100
100
|
return false
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
+
override isExportBoundsContainer(): boolean {
|
|
104
|
+
return true
|
|
105
|
+
}
|
|
106
|
+
|
|
103
107
|
override getDefaultProps(): TLFrameShape['props'] {
|
|
104
108
|
return { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }
|
|
105
109
|
}
|
|
@@ -335,6 +339,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
|
|
|
335
339
|
return true
|
|
336
340
|
}
|
|
337
341
|
|
|
342
|
+
override getClipPath(shape: TLFrameShape) {
|
|
343
|
+
return this.editor.getShapeGeometry(shape.id).vertices
|
|
344
|
+
}
|
|
345
|
+
|
|
338
346
|
override canReceiveNewChildrenOfType(shape: TLShape) {
|
|
339
347
|
return !shape.isLocked
|
|
340
348
|
}
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
sortByIndex,
|
|
8
8
|
structuredClone,
|
|
9
9
|
} from '@tldraw/editor'
|
|
10
|
+
import { vi } from 'vitest'
|
|
10
11
|
import { TestEditor } from '../../../test/TestEditor'
|
|
11
12
|
import { TL } from '../../../test/test-jsx'
|
|
12
13
|
|
|
@@ -16,7 +17,7 @@ mockUniqueId(() => 'id' + nextId++)
|
|
|
16
17
|
let editor: TestEditor
|
|
17
18
|
const id = createShapeId('line1')
|
|
18
19
|
|
|
19
|
-
|
|
20
|
+
vi.useFakeTimers()
|
|
20
21
|
|
|
21
22
|
beforeEach(() => {
|
|
22
23
|
editor = new TestEditor()
|
|
@@ -338,12 +339,12 @@ describe('Misc', () => {
|
|
|
338
339
|
|
|
339
340
|
expect(editor.getShapePageBounds(box)!.maxX).not.toEqual(editor.getShapePageBounds(line)!.maxX)
|
|
340
341
|
editor.alignShapes(editor.getSelectedShapeIds(), 'right')
|
|
341
|
-
|
|
342
|
+
vi.advanceTimersByTime(1000)
|
|
342
343
|
expect(editor.getShapePageBounds(box)!.maxX).toEqual(editor.getShapePageBounds(line)!.maxX)
|
|
343
344
|
|
|
344
345
|
expect(editor.getShapePageBounds(box)!.maxY).not.toEqual(editor.getShapePageBounds(line)!.maxY)
|
|
345
346
|
editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
|
|
346
|
-
|
|
347
|
+
vi.advanceTimersByTime(1000)
|
|
347
348
|
expect(editor.getShapePageBounds(box)!.maxY).toEqual(editor.getShapePageBounds(line)!.maxY)
|
|
348
349
|
})
|
|
349
350
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
//
|
|
1
|
+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
|
-
exports[`Misc resizes
|
|
3
|
+
exports[`Misc > resizes > line shape after resize 1`] = `
|
|
4
4
|
{
|
|
5
5
|
"id": "shape:line1",
|
|
6
6
|
"index": "a1",
|
|
@@ -6,6 +6,8 @@ import { StrokePoint } from './types'
|
|
|
6
6
|
*
|
|
7
7
|
* @param points - The stroke points returned from perfect-freehand
|
|
8
8
|
* @param closed - Whether the shape is closed
|
|
9
|
+
*
|
|
10
|
+
* @public
|
|
9
11
|
*/
|
|
10
12
|
export function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {
|
|
11
13
|
const len = points.length
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
|
|
2
|
+
import { vi } from 'vitest'
|
|
2
3
|
import { TestEditor } from '../../../test/TestEditor'
|
|
3
4
|
import { TextShapeTool } from './TextShapeTool'
|
|
4
5
|
|
|
5
6
|
let editor: TestEditor
|
|
6
|
-
|
|
7
|
+
vi.useFakeTimers()
|
|
7
8
|
|
|
8
9
|
beforeEach(() => {
|
|
9
10
|
editor = new TestEditor()
|
|
@@ -115,7 +116,7 @@ describe('When in the pointing state', () => {
|
|
|
115
116
|
|
|
116
117
|
// Go back to start and wait a little to satisfy the time requirement
|
|
117
118
|
editor.pointerMove(0, 0)
|
|
118
|
-
|
|
119
|
+
vi.advanceTimersByTime(200)
|
|
119
120
|
|
|
120
121
|
// y axis doesn't matter
|
|
121
122
|
editor.pointerMove(0, 100)
|
|
@@ -187,7 +188,7 @@ describe('When resizing', () => {
|
|
|
187
188
|
it('bails on escape while resizing and returns to text.idle', () => {
|
|
188
189
|
editor.setCurrentTool('text')
|
|
189
190
|
editor.pointerDown(0, 0)
|
|
190
|
-
|
|
191
|
+
vi.advanceTimersByTime(200)
|
|
191
192
|
editor.pointerMove(100, 100)
|
|
192
193
|
editor.expectToBeIn('select.resizing')
|
|
193
194
|
editor.cancel()
|
|
@@ -198,7 +199,7 @@ describe('When resizing', () => {
|
|
|
198
199
|
it('does not bails on interrupt while resizing', () => {
|
|
199
200
|
editor.setCurrentTool('text')
|
|
200
201
|
editor.pointerDown(0, 0)
|
|
201
|
-
|
|
202
|
+
vi.advanceTimersByTime(200)
|
|
202
203
|
editor.pointerMove(100, 100)
|
|
203
204
|
editor.expectToBeIn('select.resizing')
|
|
204
205
|
editor.interrupt()
|
|
@@ -210,7 +211,7 @@ describe('When resizing', () => {
|
|
|
210
211
|
const x = 0
|
|
211
212
|
const y = 0
|
|
212
213
|
editor.pointerDown(x, y)
|
|
213
|
-
|
|
214
|
+
vi.advanceTimersByTime(200)
|
|
214
215
|
editor.pointerMove(x + 100, y + 100)
|
|
215
216
|
expect(editor.getCurrentPageShapes()[0]).toMatchObject({
|
|
216
217
|
x,
|