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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/lib/defaultExternalContentHandlers.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n\tAssetRecordType,\n\tDEFAULT_SUPPORTED_IMAGE_TYPES,\n\tDEFAULT_SUPPORT_VIDEO_TYPES,\n\tEditor,\n\tMediaHelpers,\n\tTLAsset,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLContent,\n\tTLFileExternalAsset,\n\tTLFileReplaceExternalContent,\n\tTLImageAsset,\n\tTLImageShape,\n\tTLShapeId,\n\tTLShapePartial,\n\tTLTextShape,\n\tTLTextShapeProps,\n\tTLUrlExternalAsset,\n\tTLVideoAsset,\n\tTLVideoShape,\n\tVec,\n\tVecLike,\n\tassert,\n\tcreateShapeId,\n\tfetch,\n\tgetHashForBuffer,\n\tgetHashForString,\n\tmaybeSnapToGrid,\n\ttoRichText,\n} from '@tldraw/editor'\nimport { EmbedDefinition } from './defaultEmbedDefinitions'\nimport { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'\nimport { getCroppedImageDataForReplacedImage } from './shapes/shared/crop'\nimport { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from './shapes/shared/default-shape-constants'\nimport { TLUiToastsContextType } from './ui/context/toasts'\nimport { useTranslation } from './ui/hooks/useTranslation/useTranslation'\nimport { containBoxSize } from './utils/assets/assets'\nimport { putExcalidrawContent } from './utils/excalidraw/putExcalidrawContent'\nimport { renderRichTextFromHTML } from './utils/text/richText'\nimport { cleanupText, isRightToLeftLanguage } from './utils/text/text'\n\n/**\n * 5000px\n * @public\n */\nexport const DEFAULT_MAX_IMAGE_DIMENSION = 5000\n/**\n * 10mb\n * @public\n */\nexport const DEFAULT_MAX_ASSET_SIZE = 10 * 1024 * 1024\n\n/** @public */\nexport interface TLExternalContentProps {\n\t/**\n\t * The maximum dimension (width or height) of an image. Images larger than this will be rescaled\n\t * to fit. Defaults to infinity.\n\t */\n\tmaxImageDimension?: number\n\t/**\n\t * The maximum size (in bytes) of an asset. Assets larger than this will be rejected. Defaults\n\t * to 10mb (10 * 1024 * 1024).\n\t */\n\tmaxAssetSize?: number\n\t/**\n\t * The mime types of images that are allowed to be handled. Defaults to\n\t * DEFAULT_SUPPORTED_IMAGE_TYPES.\n\t */\n\tacceptedImageMimeTypes?: readonly string[]\n\t/**\n\t * The mime types of videos that are allowed to be handled. Defaults to\n\t * DEFAULT_SUPPORT_VIDEO_TYPES.\n\t */\n\tacceptedVideoMimeTypes?: readonly string[]\n}\n\n/** @public */\nexport interface TLDefaultExternalContentHandlerOpts extends TLExternalContentProps {\n\ttoasts: TLUiToastsContextType\n\tmsg: ReturnType<typeof useTranslation>\n}\n\n/** @public */\nexport function registerDefaultExternalContentHandlers(\n\teditor: Editor,\n\toptions: TLDefaultExternalContentHandlerOpts\n) {\n\t// files -> asset\n\teditor.registerExternalAssetHandler('file', async (externalAsset) => {\n\t\treturn defaultHandleExternalFileAsset(editor, externalAsset, options)\n\t})\n\n\t// urls -> bookmark asset\n\teditor.registerExternalAssetHandler('url', async (externalAsset) => {\n\t\treturn defaultHandleExternalUrlAsset(editor, externalAsset, options)\n\t})\n\n\t// svg text\n\teditor.registerExternalContentHandler('svg-text', async (externalContent) => {\n\t\treturn defaultHandleExternalSvgTextContent(editor, externalContent)\n\t})\n\n\t// embeds\n\teditor.registerExternalContentHandler<'embed', EmbedDefinition>('embed', (externalContent) => {\n\t\treturn defaultHandleExternalEmbedContent(editor, externalContent)\n\t})\n\n\t// files\n\teditor.registerExternalContentHandler('files', async (externalContent) => {\n\t\treturn defaultHandleExternalFileContent(editor, externalContent, options)\n\t})\n\n\t// file-replace -> asset\n\teditor.registerExternalContentHandler('file-replace', async (externalContent) => {\n\t\treturn defaultHandleExternalFileReplaceContent(editor, externalContent, options)\n\t})\n\n\t// text\n\teditor.registerExternalContentHandler('text', async (externalContent) => {\n\t\treturn defaultHandleExternalTextContent(editor, externalContent)\n\t})\n\n\t// url\n\teditor.registerExternalContentHandler('url', async (externalContent) => {\n\t\treturn defaultHandleExternalUrlContent(editor, externalContent, options)\n\t})\n\n\t// tldraw\n\teditor.registerExternalContentHandler('tldraw', async (externalContent) => {\n\t\treturn defaultHandleExternalTldrawContent(editor, externalContent)\n\t})\n\n\t// excalidraw\n\teditor.registerExternalContentHandler('excalidraw', async (externalContent) => {\n\t\treturn defaultHandleExternalExcalidrawContent(editor, externalContent)\n\t})\n}\n\n/** @public */\nexport async function defaultHandleExternalFileAsset(\n\teditor: Editor,\n\t{ file, assetId }: TLFileExternalAsset,\n\toptions: TLDefaultExternalContentHandlerOpts\n) {\n\tconst isSuccess = runFileChecks(file, options)\n\tif (!isSuccess) assert(false, 'File checks failed')\n\n\tconst assetInfo = await getAssetInfo(file, options, assetId)\n\tconst result = await editor.uploadAsset(assetInfo, file)\n\tassetInfo.props.src = result.src\n\tif (result.meta) assetInfo.meta = { ...assetInfo.meta, ...result.meta }\n\n\treturn AssetRecordType.create(assetInfo)\n}\n\n/** @public */\nexport async function defaultHandleExternalFileReplaceContent(\n\teditor: Editor,\n\t{ file, shapeId, isImage }: TLFileReplaceExternalContent,\n\toptions: TLDefaultExternalContentHandlerOpts\n) {\n\tconst isSuccess = runFileChecks(file, options)\n\tif (!isSuccess) assert(false, 'File checks failed')\n\n\tconst shape = editor.getShape(shapeId)\n\tif (!shape) assert(false, 'Shape not found')\n\n\tconst hash = getHashForBuffer(await file.arrayBuffer())\n\tconst assetId = AssetRecordType.createId(hash)\n\teditor.createTemporaryAssetPreview(assetId, file)\n\tconst assetInfoPartial = await getMediaAssetInfoPartial(\n\t\tfile,\n\t\tassetId,\n\t\tisImage /* isImage */,\n\t\t!isImage /* isVideo */\n\t)\n\teditor.createAssets([assetInfoPartial])\n\n\t// And update the shape\n\tif (shape.type === 'image') {\n\t\tconst imageShape = shape as TLImageShape\n\t\tconst currentCrop = imageShape.props.crop\n\n\t\t// Calculate new dimensions that preserve the current visual size of the cropped area\n\t\tlet newWidth = assetInfoPartial.props.w\n\t\tlet newHeight = assetInfoPartial.props.h\n\t\tlet newX = imageShape.x\n\t\tlet newY = imageShape.y\n\t\tlet finalCrop = currentCrop\n\n\t\tif (currentCrop) {\n\t\t\t// Use the dedicated function to calculate the new crop and dimensions\n\t\t\tconst result = getCroppedImageDataForReplacedImage(\n\t\t\t\timageShape,\n\t\t\t\tassetInfoPartial.props.w,\n\t\t\t\tassetInfoPartial.props.h\n\t\t\t)\n\n\t\t\tfinalCrop = result.crop\n\t\t\tnewWidth = result.w\n\t\t\tnewHeight = result.h\n\t\t\tnewX = result.x\n\t\t\tnewY = result.y\n\t\t}\n\n\t\teditor.updateShapes<TLImageShape>([\n\t\t\t{\n\t\t\t\tid: imageShape.id,\n\t\t\t\ttype: imageShape.type,\n\t\t\t\tprops: {\n\t\t\t\t\tassetId: assetId,\n\t\t\t\t\tcrop: finalCrop,\n\t\t\t\t\tw: newWidth,\n\t\t\t\t\th: newHeight,\n\t\t\t\t},\n\t\t\t\tx: newX,\n\t\t\t\ty: newY,\n\t\t\t},\n\t\t])\n\t} else if (shape.type === 'video') {\n\t\teditor.updateShapes<TLVideoShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: {\n\t\t\t\t\tassetId: assetId,\n\t\t\t\t\tw: assetInfoPartial.props.w,\n\t\t\t\t\th: assetInfoPartial.props.h,\n\t\t\t\t},\n\t\t\t},\n\t\t])\n\t}\n\n\tconst asset = (await editor.getAssetForExternalContent({\n\t\ttype: 'file',\n\t\tfile,\n\t\tassetId,\n\t})) as TLAsset\n\n\teditor.updateAssets([{ ...asset, id: assetId }])\n\n\treturn asset\n}\n\n/** @public */\nexport async function defaultHandleExternalUrlAsset(\n\teditor: Editor,\n\t{ url }: TLUrlExternalAsset,\n\t{ toasts, msg }: TLDefaultExternalContentHandlerOpts\n): Promise<TLBookmarkAsset> {\n\tlet meta: { image: string; favicon: string; title: string; description: string }\n\n\ttry {\n\t\tconst resp = await fetch(url, {\n\t\t\tmethod: 'GET',\n\t\t\tmode: 'no-cors',\n\t\t})\n\t\tconst html = await resp.text()\n\t\tconst doc = new DOMParser().parseFromString(html, 'text/html')\n\t\tmeta = {\n\t\t\timage: doc.head.querySelector('meta[property=\"og:image\"]')?.getAttribute('content') ?? '',\n\t\t\tfavicon:\n\t\t\t\tdoc.head.querySelector('link[rel=\"apple-touch-icon\"]')?.getAttribute('href') ??\n\t\t\t\tdoc.head.querySelector('link[rel=\"icon\"]')?.getAttribute('href') ??\n\t\t\t\t'',\n\t\t\ttitle: doc.head.querySelector('meta[property=\"og:title\"]')?.getAttribute('content') ?? url,\n\t\t\tdescription:\n\t\t\t\tdoc.head.querySelector('meta[property=\"og:description\"]')?.getAttribute('content') ?? '',\n\t\t}\n\t\tif (!meta.image.startsWith('http')) {\n\t\t\tmeta.image = new URL(meta.image, url).href\n\t\t}\n\t\tif (!meta.favicon.startsWith('http')) {\n\t\t\tmeta.favicon = new URL(meta.favicon, url).href\n\t\t}\n\t} catch (error) {\n\t\tconsole.error(error)\n\t\ttoasts.addToast({\n\t\t\ttitle: msg('assets.url.failed'),\n\t\t\tseverity: 'error',\n\t\t})\n\t\tmeta = { image: '', favicon: '', title: '', description: '' }\n\t}\n\n\t// Create the bookmark asset from the meta\n\treturn {\n\t\tid: AssetRecordType.createId(getHashForString(url)),\n\t\ttypeName: 'asset',\n\t\ttype: 'bookmark',\n\t\tprops: {\n\t\t\tsrc: url,\n\t\t\tdescription: meta.description,\n\t\t\timage: meta.image,\n\t\t\tfavicon: meta.favicon,\n\t\t\ttitle: meta.title,\n\t\t},\n\t\tmeta: {},\n\t} as TLBookmarkAsset\n}\n\n/** @public */\nexport async function defaultHandleExternalSvgTextContent(\n\teditor: Editor,\n\t{ point, text }: { point?: VecLike; text: string }\n) {\n\tconst position =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst svg = new DOMParser().parseFromString(text, 'image/svg+xml').querySelector('svg')\n\tif (!svg) {\n\t\tthrow new Error('No <svg/> element present')\n\t}\n\n\tlet width = parseFloat(svg.getAttribute('width') || '0')\n\tlet height = parseFloat(svg.getAttribute('height') || '0')\n\n\tif (!(width && height)) {\n\t\tdocument.body.appendChild(svg)\n\t\tconst box = svg.getBoundingClientRect()\n\t\tdocument.body.removeChild(svg)\n\n\t\twidth = box.width\n\t\theight = box.height\n\t}\n\n\tconst asset = await editor.getAssetForExternalContent({\n\t\ttype: 'file',\n\t\tfile: new File([text], 'asset.svg', { type: 'image/svg+xml' }),\n\t})\n\n\tif (!asset) throw Error('Could not create an asset')\n\n\tcreateShapesForAssets(editor, [asset], position)\n}\n\n/** @public */\nexport function defaultHandleExternalEmbedContent<T>(\n\teditor: Editor,\n\t{ point, url, embed }: { point?: VecLike; url: string; embed: T }\n) {\n\tconst position =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst { width, height } = embed as { width: number; height: number }\n\n\tconst id = createShapeId()\n\n\tconst newPoint = maybeSnapToGrid(\n\t\tnew Vec(position.x - (width || 450) / 2, position.y - (height || 450) / 2),\n\t\teditor\n\t)\n\tconst shapePartial: TLShapePartial = {\n\t\tid,\n\t\ttype: 'embed',\n\t\tx: newPoint.x,\n\t\ty: newPoint.y,\n\t\tprops: {\n\t\t\tw: width,\n\t\t\th: height,\n\t\t\turl,\n\t\t},\n\t}\n\n\tif (editor.canCreateShape(shapePartial)) {\n\t\teditor.createShape(shapePartial).select(id)\n\t}\n}\n\n/** @public */\nexport async function defaultHandleExternalFileContent(\n\teditor: Editor,\n\t{ point, files }: { point?: VecLike; files: File[] },\n\toptions: TLDefaultExternalContentHandlerOpts\n) {\n\tconst { acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES, toasts, msg } = options\n\tif (files.length > editor.options.maxFilesAtOnce) {\n\t\ttoasts.addToast({ title: msg('assets.files.amount-too-big'), severity: 'error' })\n\t\treturn\n\t}\n\n\tconst position =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst pagePoint = new Vec(position.x, position.y)\n\tconst assetPartials: TLAsset[] = []\n\tconst assetsToUpdate: {\n\t\tasset: TLAsset\n\t\tfile: File\n\t}[] = []\n\tfor (const file of files) {\n\t\tconst isSuccess = runFileChecks(file, options)\n\t\tif (!isSuccess) continue\n\n\t\tconst assetInfo = await getAssetInfo(file, options)\n\t\tif (acceptedImageMimeTypes.includes(file.type)) {\n\t\t\teditor.createTemporaryAssetPreview(assetInfo.id, file)\n\t\t}\n\t\tassetPartials.push(assetInfo)\n\t\tassetsToUpdate.push({ asset: assetInfo, file })\n\t}\n\n\tPromise.allSettled(\n\t\tassetsToUpdate.map(async (assetAndFile) => {\n\t\t\ttry {\n\t\t\t\tconst newAsset = await editor.getAssetForExternalContent({\n\t\t\t\t\ttype: 'file',\n\t\t\t\t\tfile: assetAndFile.file,\n\t\t\t\t})\n\n\t\t\t\tif (!newAsset) {\n\t\t\t\t\tthrow Error('Could not create an asset')\n\t\t\t\t}\n\n\t\t\t\t// Save the new asset under the old asset's id\n\t\t\t\teditor.updateAssets([{ ...newAsset, id: assetAndFile.asset.id }])\n\t\t\t} catch (error) {\n\t\t\t\ttoasts.addToast({\n\t\t\t\t\ttitle: msg('assets.files.upload-failed'),\n\t\t\t\t\tseverity: 'error',\n\t\t\t\t})\n\t\t\t\tconsole.error(error)\n\t\t\t\teditor.deleteAssets([assetAndFile.asset.id])\n\t\t\t\treturn\n\t\t\t}\n\t\t})\n\t)\n\n\tcreateShapesForAssets(editor, assetPartials, pagePoint)\n}\n\n/** @public */\nexport async function defaultHandleExternalTextContent(\n\teditor: Editor,\n\t{ point, text, html }: { point?: VecLike; text: string; html?: string }\n) {\n\tconst p =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst defaultProps = editor.getShapeUtil<TLTextShape>('text').getDefaultProps()\n\n\tconst cleanedUpPlaintext = cleanupText(text)\n\tconst richTextToPaste = html\n\t\t? renderRichTextFromHTML(editor, html)\n\t\t: toRichText(cleanedUpPlaintext)\n\n\t// todo: discuss\n\t// If we have one shape with rich text selected, update the shape's text.\n\t// const onlySelectedShape = editor.getOnlySelectedShape()\n\t// if (onlySelectedShape && 'richText' in onlySelectedShape.props) {\n\t// \teditor.updateShapes([\n\t// \t\t{\n\t// \t\t\tid: onlySelectedShape.id,\n\t// \t\t\ttype: onlySelectedShape.type,\n\t// \t\t\tprops: {\n\t// \t\t\t\trichText: richTextToPaste,\n\t// \t\t\t},\n\t// \t\t},\n\t// \t])\n\n\t// \treturn\n\t// }\n\n\t// Measure the text with default values\n\tlet w: number\n\tlet h: number\n\tlet autoSize: boolean\n\tlet align = 'middle' as TLTextShapeProps['textAlign']\n\n\tconst htmlToMeasure = html ?? cleanedUpPlaintext.replace(/\\n/g, '<br>')\n\tconst isMultiLine = html\n\t\t? richTextToPaste.content.length > 1\n\t\t: cleanedUpPlaintext.split('\\n').length > 1\n\n\t// check whether the text contains the most common characters in RTL languages\n\tconst isRtl = isRightToLeftLanguage(cleanedUpPlaintext)\n\n\tif (isMultiLine) {\n\t\talign = isMultiLine ? (isRtl ? 'end' : 'start') : 'middle'\n\t}\n\n\tconst rawSize = editor.textMeasure.measureHtml(htmlToMeasure, {\n\t\t...TEXT_PROPS,\n\t\tfontFamily: FONT_FAMILIES[defaultProps.font],\n\t\tfontSize: FONT_SIZES[defaultProps.size],\n\t\tmaxWidth: null,\n\t})\n\n\tconst minWidth = Math.min(\n\t\tisMultiLine ? editor.getViewportPageBounds().width * 0.9 : 920,\n\t\tMath.max(200, editor.getViewportPageBounds().width * 0.9)\n\t)\n\n\tif (rawSize.w > minWidth) {\n\t\tconst shrunkSize = editor.textMeasure.measureHtml(htmlToMeasure, {\n\t\t\t...TEXT_PROPS,\n\t\t\tfontFamily: FONT_FAMILIES[defaultProps.font],\n\t\t\tfontSize: FONT_SIZES[defaultProps.size],\n\t\t\tmaxWidth: minWidth,\n\t\t})\n\t\tw = shrunkSize.w\n\t\th = shrunkSize.h\n\t\tautoSize = false\n\t\talign = isRtl ? 'end' : 'start'\n\t} else {\n\t\t// autosize is fine\n\t\tw = Math.max(rawSize.w, 10)\n\t\th = Math.max(rawSize.h, 10)\n\t\tautoSize = true\n\t}\n\n\tif (p.y - h / 2 < editor.getViewportPageBounds().minY + 40) {\n\t\tp.y = editor.getViewportPageBounds().minY + 40 + h / 2\n\t}\n\n\tconst newPoint = maybeSnapToGrid(new Vec(p.x - w / 2, p.y - h / 2), editor)\n\tconst shapeId = createShapeId()\n\n\t// Allow this to trigger the max shapes reached alert\n\teditor.createShapes<TLTextShape>([\n\t\t{\n\t\t\tid: shapeId,\n\t\t\ttype: 'text',\n\t\t\tx: newPoint.x,\n\t\t\ty: newPoint.y,\n\t\t\tprops: {\n\t\t\t\trichText: richTextToPaste,\n\t\t\t\t// if the text has more than one line, align it to the left\n\t\t\t\ttextAlign: align,\n\t\t\t\tautoSize,\n\t\t\t\tw,\n\t\t\t},\n\t\t},\n\t])\n}\n\n/** @public */\nexport async function defaultHandleExternalUrlContent(\n\teditor: Editor,\n\t{ point, url }: { point?: VecLike; url: string },\n\t{ toasts, msg }: TLDefaultExternalContentHandlerOpts\n) {\n\t// try to paste as an embed first\n\tconst embedUtil = editor.getShapeUtil('embed') as EmbedShapeUtil | undefined\n\tconst embedInfo = embedUtil?.getEmbedDefinition(url)\n\n\tif (embedInfo) {\n\t\treturn editor.putExternalContent({\n\t\t\ttype: 'embed',\n\t\t\turl: embedInfo.url,\n\t\t\tpoint,\n\t\t\tembed: embedInfo.definition,\n\t\t})\n\t}\n\n\tconst position =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\tconst shape = createEmptyBookmarkShape(editor, url, position)\n\n\t// Use an existing asset if we have one, or else else create a new one\n\tlet asset = editor.getAsset(assetId) as TLAsset\n\tlet shouldAlsoCreateAsset = false\n\tif (!asset) {\n\t\tshouldAlsoCreateAsset = true\n\t\ttry {\n\t\t\tconst bookmarkAsset = await editor.getAssetForExternalContent({ type: 'url', url })\n\t\t\tif (!bookmarkAsset) throw Error('Could not create an asset')\n\t\t\tasset = bookmarkAsset\n\t\t} catch {\n\t\t\ttoasts.addToast({\n\t\t\t\ttitle: msg('assets.url.failed'),\n\t\t\t\tseverity: 'error',\n\t\t\t})\n\t\t\treturn\n\t\t}\n\t}\n\n\teditor.run(() => {\n\t\tif (shouldAlsoCreateAsset) {\n\t\t\teditor.createAssets([asset])\n\t\t}\n\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: {\n\t\t\t\t\tassetId: asset.id,\n\t\t\t\t},\n\t\t\t},\n\t\t])\n\t})\n}\n\n/** @public */\nexport async function defaultHandleExternalTldrawContent(\n\teditor: Editor,\n\t{ point, content }: { point?: VecLike; content: TLContent }\n) {\n\teditor.run(() => {\n\t\tconst selectionBoundsBefore = editor.getSelectionPageBounds()\n\t\teditor.markHistoryStoppingPoint('paste')\n\n\t\t// Unlock any locked root shapes on paste\n\t\tfor (const shape of content.shapes) {\n\t\t\tif (content.rootShapeIds.includes(shape.id)) {\n\t\t\t\tshape.isLocked = false\n\t\t\t}\n\t\t}\n\n\t\teditor.putContentOntoCurrentPage(content, {\n\t\t\tpoint: point,\n\t\t\tselect: true,\n\t\t})\n\t\tconst selectedBoundsAfter = editor.getSelectionPageBounds()\n\t\tif (\n\t\t\tselectionBoundsBefore &&\n\t\t\tselectedBoundsAfter &&\n\t\t\tselectionBoundsBefore?.collides(selectedBoundsAfter)\n\t\t) {\n\t\t\t// Creates a 'puff' to show content has been pasted\n\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\teditor.timers.setTimeout(() => {\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t\t}, 150)\n\t\t}\n\t})\n}\n\n/** @public */\nexport async function defaultHandleExternalExcalidrawContent(\n\teditor: Editor,\n\t{ point, content }: { point?: VecLike; content: any }\n) {\n\teditor.run(() => {\n\t\tputExcalidrawContent(editor, content, point)\n\t})\n}\n\n/** @public */\nexport async function getMediaAssetInfoPartial(\n\tfile: File,\n\tassetId: TLAssetId,\n\tisImageType: boolean,\n\tisVideoType: boolean,\n\tmaxImageDimension?: number\n) {\n\tlet fileType = file.type\n\n\tif (file.type === 'video/quicktime') {\n\t\t// hack to make .mov videos work\n\t\tfileType = 'video/mp4'\n\t}\n\n\tconst size = isImageType\n\t\t? await MediaHelpers.getImageSize(file)\n\t\t: await MediaHelpers.getVideoSize(file)\n\n\tconst isAnimated = (await MediaHelpers.isAnimated(file)) || isVideoType\n\n\tconst assetInfo = {\n\t\tid: assetId,\n\t\ttype: isImageType ? 'image' : 'video',\n\t\ttypeName: 'asset',\n\t\tprops: {\n\t\t\tname: file.name,\n\t\t\tsrc: '',\n\t\t\tw: size.w,\n\t\t\th: size.h,\n\t\t\tfileSize: file.size,\n\t\t\tmimeType: fileType,\n\t\t\tisAnimated,\n\t\t},\n\t\tmeta: {},\n\t} as TLImageAsset | TLVideoAsset\n\n\tif (maxImageDimension && isFinite(maxImageDimension)) {\n\t\tconst size = { w: assetInfo.props.w, h: assetInfo.props.h }\n\t\tconst resizedSize = containBoxSize(size, { w: maxImageDimension, h: maxImageDimension })\n\t\tif (size !== resizedSize && MediaHelpers.isStaticImageType(file.type)) {\n\t\t\tassetInfo.props.w = resizedSize.w\n\t\t\tassetInfo.props.h = resizedSize.h\n\t\t}\n\t}\n\n\treturn assetInfo\n}\n\n/**\n * A helper function for an external content handler. It creates bookmarks,\n * images or video shapes corresponding to the type of assets provided.\n *\n * @param editor - The editor instance\n *\n * @param assets - An array of asset Ids\n *\n * @param position - the position at which to create the shapes\n *\n * @public\n */\nexport async function createShapesForAssets(\n\teditor: Editor,\n\tassets: TLAsset[],\n\tposition: VecLike\n): Promise<TLShapeId[]> {\n\tif (!assets.length) return []\n\n\tconst currentPoint = Vec.From(position)\n\tconst partials: TLShapePartial[] = []\n\n\tfor (let i = 0; i < assets.length; i++) {\n\t\tconst asset = assets[i]\n\t\tswitch (asset.type) {\n\t\t\tcase 'image': {\n\t\t\t\tpartials.push({\n\t\t\t\t\tid: createShapeId(),\n\t\t\t\t\ttype: 'image',\n\t\t\t\t\tx: currentPoint.x,\n\t\t\t\t\ty: currentPoint.y,\n\t\t\t\t\topacity: 1,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tassetId: asset.id,\n\t\t\t\t\t\tw: asset.props.w,\n\t\t\t\t\t\th: asset.props.h,\n\t\t\t\t\t},\n\t\t\t\t})\n\n\t\t\t\tcurrentPoint.x += asset.props.w\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'video': {\n\t\t\t\tpartials.push({\n\t\t\t\t\tid: createShapeId(),\n\t\t\t\t\ttype: 'video',\n\t\t\t\t\tx: currentPoint.x,\n\t\t\t\t\ty: currentPoint.y,\n\t\t\t\t\topacity: 1,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tassetId: asset.id,\n\t\t\t\t\t\tw: asset.props.w,\n\t\t\t\t\t\th: asset.props.h,\n\t\t\t\t\t},\n\t\t\t\t})\n\n\t\t\t\tcurrentPoint.x += asset.props.w\n\t\t\t}\n\t\t}\n\t}\n\n\teditor.run(() => {\n\t\t// Create any assets\n\t\tconst assetsToCreate = assets.filter((asset) => !editor.getAsset(asset.id))\n\n\t\teditor.store.atomic(() => {\n\t\t\tif (editor.canCreateShapes(partials)) {\n\t\t\t\tif (assetsToCreate.length) {\n\t\t\t\t\teditor.createAssets(assetsToCreate)\n\t\t\t\t}\n\n\t\t\t\t// Create the shapes\n\t\t\t\teditor.createShapes(partials).select(...partials.map((p) => p.id))\n\n\t\t\t\t// Re-position shapes so that the center of the group is at the provided point\n\t\t\t\tcenterSelectionAroundPoint(editor, position)\n\t\t\t}\n\t\t})\n\t})\n\n\treturn partials.map((p) => p.id)\n}\n\n/**\n * Repositions selected shapes do that the center of the group is\n * at the provided position\n *\n * @param editor - The editor instance\n *\n * @param position - the point to center the shapes around\n *\n * @public\n */\nexport function centerSelectionAroundPoint(editor: Editor, position: VecLike) {\n\t// Re-position shapes so that the center of the group is at the provided point\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tlet selectionPageBounds = editor.getSelectionPageBounds()\n\n\tif (selectionPageBounds) {\n\t\tconst offset = selectionPageBounds!.center.sub(position)\n\n\t\teditor.updateShapes(\n\t\t\teditor.getSelectedShapes().map((shape) => {\n\t\t\t\tconst localRotation = editor.getShapeParentTransform(shape).decompose().rotation\n\t\t\t\tconst localDelta = Vec.Rot(offset, -localRotation)\n\t\t\t\treturn {\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tx: shape.x! - localDelta.x,\n\t\t\t\t\ty: shape.y! - localDelta.y,\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t}\n\tselectionPageBounds = editor.getSelectionPageBounds()\n\t// align selection with the grid if necessary\n\tif (selectionPageBounds && editor.getInstanceState().isGridMode) {\n\t\tconst gridSize = editor.getDocumentSettings().gridSize\n\t\tconst topLeft = new Vec(selectionPageBounds.minX, selectionPageBounds.minY)\n\t\tconst gridSnappedPoint = topLeft.clone().snapToGrid(gridSize)\n\t\tconst delta = Vec.Sub(topLeft, gridSnappedPoint)\n\t\teditor.updateShapes(\n\t\t\teditor.getSelectedShapes().map((shape) => {\n\t\t\t\tconst newPoint = { x: shape.x! - delta.x, y: shape.y! - delta.y }\n\t\t\t\treturn {\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tx: newPoint.x,\n\t\t\t\t\ty: newPoint.y,\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t}\n\t// Zoom out to fit the shapes, if necessary\n\tselectionPageBounds = editor.getSelectionPageBounds()\n\tif (selectionPageBounds && !viewportPageBounds.contains(selectionPageBounds)) {\n\t\teditor.zoomToSelection({ animation: { duration: editor.options.animationMediumMs } })\n\t}\n}\n\n/** @public */\nexport function createEmptyBookmarkShape(\n\teditor: Editor,\n\turl: string,\n\tposition: VecLike\n): TLBookmarkShape {\n\tconst partial: TLShapePartial = {\n\t\tid: createShapeId(),\n\t\ttype: 'bookmark',\n\t\tx: position.x - 150,\n\t\ty: position.y - 160,\n\t\topacity: 1,\n\t\tprops: {\n\t\t\tassetId: null,\n\t\t\turl,\n\t\t},\n\t}\n\n\teditor.run(() => {\n\t\t// Allow this to trigger the max shapes reached alert\n\t\teditor.createShape(partial)\n\t\tif (!editor.getShape(partial.id)) return\n\t\teditor.select(partial.id)\n\t\tcenterSelectionAroundPoint(editor, position)\n\t})\n\n\treturn editor.getShape(partial.id) as TLBookmarkShape\n}\n\nfunction runFileChecks(file: File, options: TLDefaultExternalContentHandlerOpts) {\n\tconst {\n\t\tacceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,\n\t\tacceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,\n\t\tmaxAssetSize = DEFAULT_MAX_ASSET_SIZE,\n\t\ttoasts,\n\t\tmsg,\n\t} = options\n\tconst isImageType = acceptedImageMimeTypes.includes(file.type)\n\tconst isVideoType = acceptedVideoMimeTypes.includes(file.type)\n\n\tif (!isImageType && !isVideoType) {\n\t\ttoasts.addToast({\n\t\t\ttitle: msg('assets.files.type-not-allowed'),\n\t\t\tseverity: 'error',\n\t\t})\n\t\treturn false\n\t}\n\n\tif (file.size > maxAssetSize) {\n\t\ttoasts.addToast({\n\t\t\ttitle: msg('assets.files.size-too-big'),\n\t\t\tseverity: 'error',\n\t\t})\n\t\treturn false\n\t}\n\n\t// Use mime type instead of file ext, this is because\n\t// window.navigator.clipboard does not preserve file names\n\t// of copied files.\n\tif (!file.type) {\n\t\ttoasts.addToast({\n\t\t\ttitle: msg('assets.files.upload-failed'),\n\t\t\tseverity: 'error',\n\t\t})\n\t\tconsole.error('No mime type')\n\t\treturn false\n\t}\n\n\treturn true\n}\n\n/** @public */\nexport async function getAssetInfo(\n\tfile: File,\n\toptions: TLDefaultExternalContentHandlerOpts,\n\tassetId?: TLAssetId\n) {\n\tconst {\n\t\tacceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,\n\t\tacceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,\n\t\tmaxImageDimension = DEFAULT_MAX_IMAGE_DIMENSION,\n\t} = options\n\n\tconst isImageType = acceptedImageMimeTypes.includes(file.type)\n\tconst isVideoType = acceptedVideoMimeTypes.includes(file.type)\n\tconst hash = getHashForBuffer(await file.arrayBuffer())\n\tassetId ??= AssetRecordType.createId(hash)\n\tconst assetInfo = await getMediaAssetInfoPartial(\n\t\tfile,\n\t\tassetId,\n\t\tisImageType,\n\t\tisVideoType,\n\t\tmaxImageDimension\n\t)\n\treturn assetInfo\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["import {\n\tAssetRecordType,\n\tDEFAULT_SUPPORTED_IMAGE_TYPES,\n\tDEFAULT_SUPPORT_VIDEO_TYPES,\n\tEditor,\n\tMediaHelpers,\n\tTLAsset,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLContent,\n\tTLFileExternalAsset,\n\tTLFileReplaceExternalContent,\n\tTLImageAsset,\n\tTLImageShape,\n\tTLShapeId,\n\tTLShapePartial,\n\tTLTextShape,\n\tTLTextShapeProps,\n\tTLUrlExternalAsset,\n\tTLVideoAsset,\n\tTLVideoShape,\n\tVec,\n\tVecLike,\n\tassert,\n\tcreateShapeId,\n\tfetch,\n\tgetHashForBuffer,\n\tgetHashForString,\n\tmaybeSnapToGrid,\n\ttoRichText,\n} from '@tldraw/editor'\nimport { EmbedDefinition } from './defaultEmbedDefinitions'\nimport { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'\nimport { getCroppedImageDataForReplacedImage } from './shapes/shared/crop'\nimport { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from './shapes/shared/default-shape-constants'\nimport { TLUiToastsContextType } from './ui/context/toasts'\nimport { useTranslation } from './ui/hooks/useTranslation/useTranslation'\nimport { containBoxSize } from './utils/assets/assets'\nimport { putExcalidrawContent } from './utils/excalidraw/putExcalidrawContent'\nimport { renderRichTextFromHTML } from './utils/text/richText'\nimport { cleanupText, isRightToLeftLanguage } from './utils/text/text'\n\n/**\n * 5000px\n * @public\n */\nexport const DEFAULT_MAX_IMAGE_DIMENSION = 5000\n/**\n * 10mb\n * @public\n */\nexport const DEFAULT_MAX_ASSET_SIZE = 10 * 1024 * 1024\n\n/** @public */\nexport interface TLExternalContentProps {\n\t/**\n\t * The maximum dimension (width or height) of an image. Images larger than this will be rescaled\n\t * to fit. Defaults to infinity.\n\t */\n\tmaxImageDimension?: number\n\t/**\n\t * The maximum size (in bytes) of an asset. Assets larger than this will be rejected. Defaults\n\t * to 10mb (10 * 1024 * 1024).\n\t */\n\tmaxAssetSize?: number\n\t/**\n\t * The mime types of images that are allowed to be handled. Defaults to\n\t * DEFAULT_SUPPORTED_IMAGE_TYPES.\n\t */\n\tacceptedImageMimeTypes?: readonly string[]\n\t/**\n\t * The mime types of videos that are allowed to be handled. Defaults to\n\t * DEFAULT_SUPPORT_VIDEO_TYPES.\n\t */\n\tacceptedVideoMimeTypes?: readonly string[]\n}\n\n/** @public */\nexport interface TLDefaultExternalContentHandlerOpts extends TLExternalContentProps {\n\ttoasts: TLUiToastsContextType\n\tmsg: ReturnType<typeof useTranslation>\n}\n\n/** @public */\nexport function registerDefaultExternalContentHandlers(\n\teditor: Editor,\n\toptions: TLDefaultExternalContentHandlerOpts\n) {\n\t// files -> asset\n\teditor.registerExternalAssetHandler('file', async (externalAsset) => {\n\t\treturn defaultHandleExternalFileAsset(editor, externalAsset, options)\n\t})\n\n\t// urls -> bookmark asset\n\teditor.registerExternalAssetHandler('url', async (externalAsset) => {\n\t\treturn defaultHandleExternalUrlAsset(editor, externalAsset, options)\n\t})\n\n\t// svg text\n\teditor.registerExternalContentHandler('svg-text', async (externalContent) => {\n\t\treturn defaultHandleExternalSvgTextContent(editor, externalContent)\n\t})\n\n\t// embeds\n\teditor.registerExternalContentHandler<'embed', EmbedDefinition>('embed', (externalContent) => {\n\t\treturn defaultHandleExternalEmbedContent(editor, externalContent)\n\t})\n\n\t// files\n\teditor.registerExternalContentHandler('files', async (externalContent) => {\n\t\treturn defaultHandleExternalFileContent(editor, externalContent, options)\n\t})\n\n\t// file-replace -> asset\n\teditor.registerExternalContentHandler('file-replace', async (externalContent) => {\n\t\treturn defaultHandleExternalFileReplaceContent(editor, externalContent, options)\n\t})\n\n\t// text\n\teditor.registerExternalContentHandler('text', async (externalContent) => {\n\t\treturn defaultHandleExternalTextContent(editor, externalContent)\n\t})\n\n\t// url\n\teditor.registerExternalContentHandler('url', async (externalContent) => {\n\t\treturn defaultHandleExternalUrlContent(editor, externalContent, options)\n\t})\n\n\t// tldraw\n\teditor.registerExternalContentHandler('tldraw', async (externalContent) => {\n\t\treturn defaultHandleExternalTldrawContent(editor, externalContent)\n\t})\n\n\t// excalidraw\n\teditor.registerExternalContentHandler('excalidraw', async (externalContent) => {\n\t\treturn defaultHandleExternalExcalidrawContent(editor, externalContent)\n\t})\n}\n\n/** @public */\nexport async function defaultHandleExternalFileAsset(\n\teditor: Editor,\n\t{ file, assetId }: TLFileExternalAsset,\n\toptions: TLDefaultExternalContentHandlerOpts\n) {\n\tconst isSuccess = notifyIfFileNotAllowed(file, options)\n\tif (!isSuccess) assert(false, 'File checks failed')\n\n\tconst assetInfo = await getAssetInfo(file, options, assetId)\n\tconst result = await editor.uploadAsset(assetInfo, file)\n\tassetInfo.props.src = result.src\n\tif (result.meta) assetInfo.meta = { ...assetInfo.meta, ...result.meta }\n\n\treturn AssetRecordType.create(assetInfo)\n}\n\n/** @public */\nexport async function defaultHandleExternalFileReplaceContent(\n\teditor: Editor,\n\t{ file, shapeId, isImage }: TLFileReplaceExternalContent,\n\toptions: TLDefaultExternalContentHandlerOpts\n) {\n\tconst isSuccess = notifyIfFileNotAllowed(file, options)\n\tif (!isSuccess) assert(false, 'File checks failed')\n\n\tconst shape = editor.getShape(shapeId)\n\tif (!shape) assert(false, 'Shape not found')\n\n\tconst hash = getHashForBuffer(await file.arrayBuffer())\n\tconst assetId = AssetRecordType.createId(hash)\n\teditor.createTemporaryAssetPreview(assetId, file)\n\tconst assetInfoPartial = await getMediaAssetInfoPartial(\n\t\tfile,\n\t\tassetId,\n\t\tisImage /* isImage */,\n\t\t!isImage /* isVideo */\n\t)\n\teditor.createAssets([assetInfoPartial])\n\n\t// And update the shape\n\tif (shape.type === 'image') {\n\t\tconst imageShape = shape as TLImageShape\n\t\tconst currentCrop = imageShape.props.crop\n\n\t\t// Calculate new dimensions that preserve the current visual size of the cropped area\n\t\tlet newWidth = assetInfoPartial.props.w\n\t\tlet newHeight = assetInfoPartial.props.h\n\t\tlet newX = imageShape.x\n\t\tlet newY = imageShape.y\n\t\tlet finalCrop = currentCrop\n\n\t\tif (currentCrop) {\n\t\t\t// Use the dedicated function to calculate the new crop and dimensions\n\t\t\tconst result = getCroppedImageDataForReplacedImage(\n\t\t\t\timageShape,\n\t\t\t\tassetInfoPartial.props.w,\n\t\t\t\tassetInfoPartial.props.h\n\t\t\t)\n\n\t\t\tfinalCrop = result.crop\n\t\t\tnewWidth = result.w\n\t\t\tnewHeight = result.h\n\t\t\tnewX = result.x\n\t\t\tnewY = result.y\n\t\t}\n\n\t\teditor.updateShapes<TLImageShape>([\n\t\t\t{\n\t\t\t\tid: imageShape.id,\n\t\t\t\ttype: imageShape.type,\n\t\t\t\tprops: {\n\t\t\t\t\tassetId: assetId,\n\t\t\t\t\tcrop: finalCrop,\n\t\t\t\t\tw: newWidth,\n\t\t\t\t\th: newHeight,\n\t\t\t\t},\n\t\t\t\tx: newX,\n\t\t\t\ty: newY,\n\t\t\t},\n\t\t])\n\t} else if (shape.type === 'video') {\n\t\teditor.updateShapes<TLVideoShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: {\n\t\t\t\t\tassetId: assetId,\n\t\t\t\t\tw: assetInfoPartial.props.w,\n\t\t\t\t\th: assetInfoPartial.props.h,\n\t\t\t\t},\n\t\t\t},\n\t\t])\n\t}\n\n\tconst asset = (await editor.getAssetForExternalContent({\n\t\ttype: 'file',\n\t\tfile,\n\t\tassetId,\n\t})) as TLAsset\n\n\teditor.updateAssets([{ ...asset, id: assetId }])\n\n\treturn asset\n}\n\n/** @public */\nexport async function defaultHandleExternalUrlAsset(\n\teditor: Editor,\n\t{ url }: TLUrlExternalAsset,\n\t{ toasts, msg }: TLDefaultExternalContentHandlerOpts\n): Promise<TLBookmarkAsset> {\n\tlet meta: { image: string; favicon: string; title: string; description: string }\n\n\ttry {\n\t\tconst resp = await fetch(url, {\n\t\t\tmethod: 'GET',\n\t\t\tmode: 'no-cors',\n\t\t})\n\t\tconst html = await resp.text()\n\t\tconst doc = new DOMParser().parseFromString(html, 'text/html')\n\t\tmeta = {\n\t\t\timage: doc.head.querySelector('meta[property=\"og:image\"]')?.getAttribute('content') ?? '',\n\t\t\tfavicon:\n\t\t\t\tdoc.head.querySelector('link[rel=\"apple-touch-icon\"]')?.getAttribute('href') ??\n\t\t\t\tdoc.head.querySelector('link[rel=\"icon\"]')?.getAttribute('href') ??\n\t\t\t\t'',\n\t\t\ttitle: doc.head.querySelector('meta[property=\"og:title\"]')?.getAttribute('content') ?? url,\n\t\t\tdescription:\n\t\t\t\tdoc.head.querySelector('meta[property=\"og:description\"]')?.getAttribute('content') ?? '',\n\t\t}\n\t\tif (!meta.image.startsWith('http')) {\n\t\t\tmeta.image = new URL(meta.image, url).href\n\t\t}\n\t\tif (!meta.favicon.startsWith('http')) {\n\t\t\tmeta.favicon = new URL(meta.favicon, url).href\n\t\t}\n\t} catch (error) {\n\t\tconsole.error(error)\n\t\ttoasts.addToast({\n\t\t\ttitle: msg('assets.url.failed'),\n\t\t\tseverity: 'error',\n\t\t})\n\t\tmeta = { image: '', favicon: '', title: '', description: '' }\n\t}\n\n\t// Create the bookmark asset from the meta\n\treturn {\n\t\tid: AssetRecordType.createId(getHashForString(url)),\n\t\ttypeName: 'asset',\n\t\ttype: 'bookmark',\n\t\tprops: {\n\t\t\tsrc: url,\n\t\t\tdescription: meta.description,\n\t\t\timage: meta.image,\n\t\t\tfavicon: meta.favicon,\n\t\t\ttitle: meta.title,\n\t\t},\n\t\tmeta: {},\n\t} as TLBookmarkAsset\n}\n\n/** @public */\nexport async function defaultHandleExternalSvgTextContent(\n\teditor: Editor,\n\t{ point, text }: { point?: VecLike; text: string }\n) {\n\tconst position =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst svg = new DOMParser().parseFromString(text, 'image/svg+xml').querySelector('svg')\n\tif (!svg) {\n\t\tthrow new Error('No <svg/> element present')\n\t}\n\n\tlet width = parseFloat(svg.getAttribute('width') || '0')\n\tlet height = parseFloat(svg.getAttribute('height') || '0')\n\n\tif (!(width && height)) {\n\t\tdocument.body.appendChild(svg)\n\t\tconst box = svg.getBoundingClientRect()\n\t\tdocument.body.removeChild(svg)\n\n\t\twidth = box.width\n\t\theight = box.height\n\t}\n\n\tconst asset = await editor.getAssetForExternalContent({\n\t\ttype: 'file',\n\t\tfile: new File([text], 'asset.svg', { type: 'image/svg+xml' }),\n\t})\n\n\tif (!asset) throw Error('Could not create an asset')\n\n\tcreateShapesForAssets(editor, [asset], position)\n}\n\n/** @public */\nexport function defaultHandleExternalEmbedContent<T>(\n\teditor: Editor,\n\t{ point, url, embed }: { point?: VecLike; url: string; embed: T }\n) {\n\tconst position =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst { width, height } = embed as { width: number; height: number }\n\n\tconst id = createShapeId()\n\n\tconst newPoint = maybeSnapToGrid(\n\t\tnew Vec(position.x - (width || 450) / 2, position.y - (height || 450) / 2),\n\t\teditor\n\t)\n\tconst shapePartial: TLShapePartial = {\n\t\tid,\n\t\ttype: 'embed',\n\t\tx: newPoint.x,\n\t\ty: newPoint.y,\n\t\tprops: {\n\t\t\tw: width,\n\t\t\th: height,\n\t\t\turl,\n\t\t},\n\t}\n\n\tif (editor.canCreateShape(shapePartial)) {\n\t\teditor.createShape(shapePartial).select(id)\n\t}\n}\n\n/** @public */\nexport async function defaultHandleExternalFileContent(\n\teditor: Editor,\n\t{ point, files }: { point?: VecLike; files: File[] },\n\toptions: TLDefaultExternalContentHandlerOpts\n) {\n\tconst { acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES, toasts, msg } = options\n\tif (files.length > editor.options.maxFilesAtOnce) {\n\t\ttoasts.addToast({ title: msg('assets.files.amount-too-big'), severity: 'error' })\n\t\treturn\n\t}\n\n\tconst position =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst pagePoint = new Vec(position.x, position.y)\n\tconst assetPartials: TLAsset[] = []\n\tconst assetsToUpdate: {\n\t\tasset: TLAsset\n\t\tfile: File\n\t}[] = []\n\tfor (const file of files) {\n\t\tconst isSuccess = notifyIfFileNotAllowed(file, options)\n\t\tif (!isSuccess) continue\n\n\t\tconst assetInfo = await getAssetInfo(file, options)\n\t\tif (acceptedImageMimeTypes.includes(file.type)) {\n\t\t\teditor.createTemporaryAssetPreview(assetInfo.id, file)\n\t\t}\n\t\tassetPartials.push(assetInfo)\n\t\tassetsToUpdate.push({ asset: assetInfo, file })\n\t}\n\n\tPromise.allSettled(\n\t\tassetsToUpdate.map(async (assetAndFile) => {\n\t\t\ttry {\n\t\t\t\tconst newAsset = await editor.getAssetForExternalContent({\n\t\t\t\t\ttype: 'file',\n\t\t\t\t\tfile: assetAndFile.file,\n\t\t\t\t})\n\n\t\t\t\tif (!newAsset) {\n\t\t\t\t\tthrow Error('Could not create an asset')\n\t\t\t\t}\n\n\t\t\t\t// Save the new asset under the old asset's id\n\t\t\t\teditor.updateAssets([{ ...newAsset, id: assetAndFile.asset.id }])\n\t\t\t} catch (error) {\n\t\t\t\ttoasts.addToast({\n\t\t\t\t\ttitle: msg('assets.files.upload-failed'),\n\t\t\t\t\tseverity: 'error',\n\t\t\t\t})\n\t\t\t\tconsole.error(error)\n\t\t\t\teditor.deleteAssets([assetAndFile.asset.id])\n\t\t\t\treturn\n\t\t\t}\n\t\t})\n\t)\n\n\tcreateShapesForAssets(editor, assetPartials, pagePoint)\n}\n\n/** @public */\nexport async function defaultHandleExternalTextContent(\n\teditor: Editor,\n\t{ point, text, html }: { point?: VecLike; text: string; html?: string }\n) {\n\tconst p =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst defaultProps = editor.getShapeUtil<TLTextShape>('text').getDefaultProps()\n\n\tconst cleanedUpPlaintext = cleanupText(text)\n\tconst richTextToPaste = html\n\t\t? renderRichTextFromHTML(editor, html)\n\t\t: toRichText(cleanedUpPlaintext)\n\n\t// todo: discuss\n\t// If we have one shape with rich text selected, update the shape's text.\n\t// const onlySelectedShape = editor.getOnlySelectedShape()\n\t// if (onlySelectedShape && 'richText' in onlySelectedShape.props) {\n\t// \teditor.updateShapes([\n\t// \t\t{\n\t// \t\t\tid: onlySelectedShape.id,\n\t// \t\t\ttype: onlySelectedShape.type,\n\t// \t\t\tprops: {\n\t// \t\t\t\trichText: richTextToPaste,\n\t// \t\t\t},\n\t// \t\t},\n\t// \t])\n\n\t// \treturn\n\t// }\n\n\t// Measure the text with default values\n\tlet w: number\n\tlet h: number\n\tlet autoSize: boolean\n\tlet align = 'middle' as TLTextShapeProps['textAlign']\n\n\tconst htmlToMeasure = html ?? cleanedUpPlaintext.replace(/\\n/g, '<br>')\n\tconst isMultiLine = html\n\t\t? richTextToPaste.content.length > 1\n\t\t: cleanedUpPlaintext.split('\\n').length > 1\n\n\t// check whether the text contains the most common characters in RTL languages\n\tconst isRtl = isRightToLeftLanguage(cleanedUpPlaintext)\n\n\tif (isMultiLine) {\n\t\talign = isMultiLine ? (isRtl ? 'end' : 'start') : 'middle'\n\t}\n\n\tconst rawSize = editor.textMeasure.measureHtml(htmlToMeasure, {\n\t\t...TEXT_PROPS,\n\t\tfontFamily: FONT_FAMILIES[defaultProps.font],\n\t\tfontSize: FONT_SIZES[defaultProps.size],\n\t\tmaxWidth: null,\n\t})\n\n\tconst minWidth = Math.min(\n\t\tisMultiLine ? editor.getViewportPageBounds().width * 0.9 : 920,\n\t\tMath.max(200, editor.getViewportPageBounds().width * 0.9)\n\t)\n\n\tif (rawSize.w > minWidth) {\n\t\tconst shrunkSize = editor.textMeasure.measureHtml(htmlToMeasure, {\n\t\t\t...TEXT_PROPS,\n\t\t\tfontFamily: FONT_FAMILIES[defaultProps.font],\n\t\t\tfontSize: FONT_SIZES[defaultProps.size],\n\t\t\tmaxWidth: minWidth,\n\t\t})\n\t\tw = shrunkSize.w\n\t\th = shrunkSize.h\n\t\tautoSize = false\n\t\talign = isRtl ? 'end' : 'start'\n\t} else {\n\t\t// autosize is fine\n\t\tw = Math.max(rawSize.w, 10)\n\t\th = Math.max(rawSize.h, 10)\n\t\tautoSize = true\n\t}\n\n\tif (p.y - h / 2 < editor.getViewportPageBounds().minY + 40) {\n\t\tp.y = editor.getViewportPageBounds().minY + 40 + h / 2\n\t}\n\n\tconst newPoint = maybeSnapToGrid(new Vec(p.x - w / 2, p.y - h / 2), editor)\n\tconst shapeId = createShapeId()\n\n\t// Allow this to trigger the max shapes reached alert\n\teditor.createShapes<TLTextShape>([\n\t\t{\n\t\t\tid: shapeId,\n\t\t\ttype: 'text',\n\t\t\tx: newPoint.x,\n\t\t\ty: newPoint.y,\n\t\t\tprops: {\n\t\t\t\trichText: richTextToPaste,\n\t\t\t\t// if the text has more than one line, align it to the left\n\t\t\t\ttextAlign: align,\n\t\t\t\tautoSize,\n\t\t\t\tw,\n\t\t\t},\n\t\t},\n\t])\n}\n\n/** @public */\nexport async function defaultHandleExternalUrlContent(\n\teditor: Editor,\n\t{ point, url }: { point?: VecLike; url: string },\n\t{ toasts, msg }: TLDefaultExternalContentHandlerOpts\n) {\n\t// try to paste as an embed first\n\tconst embedUtil = editor.getShapeUtil('embed') as EmbedShapeUtil | undefined\n\tconst embedInfo = embedUtil?.getEmbedDefinition(url)\n\n\tif (embedInfo) {\n\t\treturn editor.putExternalContent({\n\t\t\ttype: 'embed',\n\t\t\turl: embedInfo.url,\n\t\t\tpoint,\n\t\t\tembed: embedInfo.definition,\n\t\t})\n\t}\n\n\tconst position =\n\t\tpoint ??\n\t\t(editor.inputs.shiftKey\n\t\t\t? editor.inputs.currentPagePoint\n\t\t\t: editor.getViewportPageBounds().center)\n\n\tconst assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\tconst shape = createEmptyBookmarkShape(editor, url, position)\n\n\t// Use an existing asset if we have one, or else else create a new one\n\tlet asset = editor.getAsset(assetId) as TLAsset\n\tlet shouldAlsoCreateAsset = false\n\tif (!asset) {\n\t\tshouldAlsoCreateAsset = true\n\t\ttry {\n\t\t\tconst bookmarkAsset = await editor.getAssetForExternalContent({ type: 'url', url })\n\t\t\tif (!bookmarkAsset) throw Error('Could not create an asset')\n\t\t\tasset = bookmarkAsset\n\t\t} catch {\n\t\t\ttoasts.addToast({\n\t\t\t\ttitle: msg('assets.url.failed'),\n\t\t\t\tseverity: 'error',\n\t\t\t})\n\t\t\treturn\n\t\t}\n\t}\n\n\teditor.run(() => {\n\t\tif (shouldAlsoCreateAsset) {\n\t\t\teditor.createAssets([asset])\n\t\t}\n\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: {\n\t\t\t\t\tassetId: asset.id,\n\t\t\t\t},\n\t\t\t},\n\t\t])\n\t})\n}\n\n/** @public */\nexport async function defaultHandleExternalTldrawContent(\n\teditor: Editor,\n\t{ point, content }: { point?: VecLike; content: TLContent }\n) {\n\teditor.run(() => {\n\t\tconst selectionBoundsBefore = editor.getSelectionPageBounds()\n\t\teditor.markHistoryStoppingPoint('paste')\n\n\t\t// Unlock any locked root shapes on paste\n\t\tfor (const shape of content.shapes) {\n\t\t\tif (content.rootShapeIds.includes(shape.id)) {\n\t\t\t\tshape.isLocked = false\n\t\t\t}\n\t\t}\n\n\t\teditor.putContentOntoCurrentPage(content, {\n\t\t\tpoint: point,\n\t\t\tselect: true,\n\t\t})\n\t\tconst selectedBoundsAfter = editor.getSelectionPageBounds()\n\t\tif (\n\t\t\tselectionBoundsBefore &&\n\t\t\tselectedBoundsAfter &&\n\t\t\tselectionBoundsBefore?.collides(selectedBoundsAfter)\n\t\t) {\n\t\t\t// Creates a 'puff' to show content has been pasted\n\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\teditor.timers.setTimeout(() => {\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t\t}, 150)\n\t\t}\n\t})\n}\n\n/** @public */\nexport async function defaultHandleExternalExcalidrawContent(\n\teditor: Editor,\n\t{ point, content }: { point?: VecLike; content: any }\n) {\n\teditor.run(() => {\n\t\tputExcalidrawContent(editor, content, point)\n\t})\n}\n\n/** @public */\nexport async function getMediaAssetInfoPartial(\n\tfile: File,\n\tassetId: TLAssetId,\n\tisImageType: boolean,\n\tisVideoType: boolean,\n\tmaxImageDimension?: number\n) {\n\tlet fileType = file.type\n\n\tif (file.type === 'video/quicktime') {\n\t\t// hack to make .mov videos work\n\t\tfileType = 'video/mp4'\n\t}\n\n\tconst size = isImageType\n\t\t? await MediaHelpers.getImageSize(file)\n\t\t: await MediaHelpers.getVideoSize(file)\n\n\tconst isAnimated = (await MediaHelpers.isAnimated(file)) || isVideoType\n\n\tconst assetInfo = {\n\t\tid: assetId,\n\t\ttype: isImageType ? 'image' : 'video',\n\t\ttypeName: 'asset',\n\t\tprops: {\n\t\t\tname: file.name,\n\t\t\tsrc: '',\n\t\t\tw: size.w,\n\t\t\th: size.h,\n\t\t\tfileSize: file.size,\n\t\t\tmimeType: fileType,\n\t\t\tisAnimated,\n\t\t},\n\t\tmeta: {},\n\t} as TLImageAsset | TLVideoAsset\n\n\tif (maxImageDimension && isFinite(maxImageDimension)) {\n\t\tconst size = { w: assetInfo.props.w, h: assetInfo.props.h }\n\t\tconst resizedSize = containBoxSize(size, { w: maxImageDimension, h: maxImageDimension })\n\t\tif (size !== resizedSize && MediaHelpers.isStaticImageType(file.type)) {\n\t\t\tassetInfo.props.w = resizedSize.w\n\t\t\tassetInfo.props.h = resizedSize.h\n\t\t}\n\t}\n\n\treturn assetInfo\n}\n\n/**\n * A helper function for an external content handler. It creates bookmarks,\n * images or video shapes corresponding to the type of assets provided.\n *\n * @param editor - The editor instance\n *\n * @param assets - An array of asset Ids\n *\n * @param position - the position at which to create the shapes\n *\n * @public\n */\nexport async function createShapesForAssets(\n\teditor: Editor,\n\tassets: TLAsset[],\n\tposition: VecLike\n): Promise<TLShapeId[]> {\n\tif (!assets.length) return []\n\n\tconst currentPoint = Vec.From(position)\n\tconst partials: TLShapePartial[] = []\n\n\tfor (let i = 0; i < assets.length; i++) {\n\t\tconst asset = assets[i]\n\t\tswitch (asset.type) {\n\t\t\tcase 'image': {\n\t\t\t\tpartials.push({\n\t\t\t\t\tid: createShapeId(),\n\t\t\t\t\ttype: 'image',\n\t\t\t\t\tx: currentPoint.x,\n\t\t\t\t\ty: currentPoint.y,\n\t\t\t\t\topacity: 1,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tassetId: asset.id,\n\t\t\t\t\t\tw: asset.props.w,\n\t\t\t\t\t\th: asset.props.h,\n\t\t\t\t\t},\n\t\t\t\t})\n\n\t\t\t\tcurrentPoint.x += asset.props.w\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'video': {\n\t\t\t\tpartials.push({\n\t\t\t\t\tid: createShapeId(),\n\t\t\t\t\ttype: 'video',\n\t\t\t\t\tx: currentPoint.x,\n\t\t\t\t\ty: currentPoint.y,\n\t\t\t\t\topacity: 1,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tassetId: asset.id,\n\t\t\t\t\t\tw: asset.props.w,\n\t\t\t\t\t\th: asset.props.h,\n\t\t\t\t\t},\n\t\t\t\t})\n\n\t\t\t\tcurrentPoint.x += asset.props.w\n\t\t\t}\n\t\t}\n\t}\n\n\teditor.run(() => {\n\t\t// Create any assets\n\t\tconst assetsToCreate = assets.filter((asset) => !editor.getAsset(asset.id))\n\n\t\teditor.store.atomic(() => {\n\t\t\tif (editor.canCreateShapes(partials)) {\n\t\t\t\tif (assetsToCreate.length) {\n\t\t\t\t\teditor.createAssets(assetsToCreate)\n\t\t\t\t}\n\n\t\t\t\t// Create the shapes\n\t\t\t\teditor.createShapes(partials).select(...partials.map((p) => p.id))\n\n\t\t\t\t// Re-position shapes so that the center of the group is at the provided point\n\t\t\t\tcenterSelectionAroundPoint(editor, position)\n\t\t\t}\n\t\t})\n\t})\n\n\treturn partials.map((p) => p.id)\n}\n\n/**\n * Repositions selected shapes do that the center of the group is\n * at the provided position\n *\n * @param editor - The editor instance\n *\n * @param position - the point to center the shapes around\n *\n * @public\n */\nexport function centerSelectionAroundPoint(editor: Editor, position: VecLike) {\n\t// Re-position shapes so that the center of the group is at the provided point\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tlet selectionPageBounds = editor.getSelectionPageBounds()\n\n\tif (selectionPageBounds) {\n\t\tconst offset = selectionPageBounds!.center.sub(position)\n\n\t\teditor.updateShapes(\n\t\t\teditor.getSelectedShapes().map((shape) => {\n\t\t\t\tconst localRotation = editor.getShapeParentTransform(shape).decompose().rotation\n\t\t\t\tconst localDelta = Vec.Rot(offset, -localRotation)\n\t\t\t\treturn {\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tx: shape.x! - localDelta.x,\n\t\t\t\t\ty: shape.y! - localDelta.y,\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t}\n\tselectionPageBounds = editor.getSelectionPageBounds()\n\t// align selection with the grid if necessary\n\tif (selectionPageBounds && editor.getInstanceState().isGridMode) {\n\t\tconst gridSize = editor.getDocumentSettings().gridSize\n\t\tconst topLeft = new Vec(selectionPageBounds.minX, selectionPageBounds.minY)\n\t\tconst gridSnappedPoint = topLeft.clone().snapToGrid(gridSize)\n\t\tconst delta = Vec.Sub(topLeft, gridSnappedPoint)\n\t\teditor.updateShapes(\n\t\t\teditor.getSelectedShapes().map((shape) => {\n\t\t\t\tconst newPoint = { x: shape.x! - delta.x, y: shape.y! - delta.y }\n\t\t\t\treturn {\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tx: newPoint.x,\n\t\t\t\t\ty: newPoint.y,\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t}\n\t// Zoom out to fit the shapes, if necessary\n\tselectionPageBounds = editor.getSelectionPageBounds()\n\tif (selectionPageBounds && !viewportPageBounds.contains(selectionPageBounds)) {\n\t\teditor.zoomToSelection({ animation: { duration: editor.options.animationMediumMs } })\n\t}\n}\n\n/** @public */\nexport function createEmptyBookmarkShape(\n\teditor: Editor,\n\turl: string,\n\tposition: VecLike\n): TLBookmarkShape {\n\tconst partial: TLShapePartial = {\n\t\tid: createShapeId(),\n\t\ttype: 'bookmark',\n\t\tx: position.x - 150,\n\t\ty: position.y - 160,\n\t\topacity: 1,\n\t\tprops: {\n\t\t\tassetId: null,\n\t\t\turl,\n\t\t},\n\t}\n\n\teditor.run(() => {\n\t\t// Allow this to trigger the max shapes reached alert\n\t\teditor.createShape(partial)\n\t\tif (!editor.getShape(partial.id)) return\n\t\teditor.select(partial.id)\n\t\tcenterSelectionAroundPoint(editor, position)\n\t})\n\n\treturn editor.getShape(partial.id) as TLBookmarkShape\n}\n\n/**\n * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.\n *\n * @param file - The file to check\n * @param options - The options for the external content handler\n * @returns True if the file is allowed, false otherwise\n * @public\n */\nexport function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts) {\n\tconst {\n\t\tacceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,\n\t\tacceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,\n\t\tmaxAssetSize = DEFAULT_MAX_ASSET_SIZE,\n\t\ttoasts,\n\t\tmsg,\n\t} = options\n\tconst isImageType = acceptedImageMimeTypes.includes(file.type)\n\tconst isVideoType = acceptedVideoMimeTypes.includes(file.type)\n\n\tif (!isImageType && !isVideoType) {\n\t\ttoasts.addToast({\n\t\t\ttitle: msg('assets.files.type-not-allowed'),\n\t\t\tseverity: 'error',\n\t\t})\n\t\treturn false\n\t}\n\n\tif (file.size > maxAssetSize) {\n\t\ttoasts.addToast({\n\t\t\ttitle: msg('assets.files.size-too-big'),\n\t\t\tseverity: 'error',\n\t\t})\n\t\treturn false\n\t}\n\n\t// Use mime type instead of file ext, this is because\n\t// window.navigator.clipboard does not preserve file names\n\t// of copied files.\n\tif (!file.type) {\n\t\ttoasts.addToast({\n\t\t\ttitle: msg('assets.files.upload-failed'),\n\t\t\tseverity: 'error',\n\t\t})\n\t\tconsole.error('No mime type')\n\t\treturn false\n\t}\n\n\treturn true\n}\n\n/** @public */\nexport async function getAssetInfo(\n\tfile: File,\n\toptions: TLDefaultExternalContentHandlerOpts,\n\tassetId?: TLAssetId\n) {\n\tconst {\n\t\tacceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,\n\t\tacceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,\n\t\tmaxImageDimension = DEFAULT_MAX_IMAGE_DIMENSION,\n\t} = options\n\n\tconst isImageType = acceptedImageMimeTypes.includes(file.type)\n\tconst isVideoType = acceptedVideoMimeTypes.includes(file.type)\n\tconst hash = getHashForBuffer(await file.arrayBuffer())\n\tassetId ??= AssetRecordType.createId(hash)\n\tconst assetInfo = await getMediaAssetInfoPartial(\n\t\tfile,\n\t\tassetId,\n\t\tisImageType,\n\t\tisVideoType,\n\t\tmaxImageDimension\n\t)\n\treturn assetInfo\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["size"]
|
|
7
7
|
}
|
|
@@ -170,6 +170,12 @@ function getArrowLabelRange(editor, shape, info) {
|
|
|
170
170
|
return { start: startRelative, end: endRelative, dbg };
|
|
171
171
|
}
|
|
172
172
|
function getArrowLabelPosition(editor, shape) {
|
|
173
|
+
const isEditing = editor.getEditingShapeId() === shape.id;
|
|
174
|
+
if (!isEditing && (0, import_richText.isEmptyRichText)(shape.props.richText)) {
|
|
175
|
+
const bodyGeom2 = getArrowBodyGeometry(editor, shape);
|
|
176
|
+
const labelCenter2 = bodyGeom2.interpolateAlongEdge(0.5);
|
|
177
|
+
return { box: import_editor.Box.FromCenter(labelCenter2, new import_editor.Vec(0, 0)), debugGeom: [] };
|
|
178
|
+
}
|
|
173
179
|
const debugGeom = [];
|
|
174
180
|
const info = (0, import_shared.getArrowInfo)(editor, shape);
|
|
175
181
|
const arrowheadInfo = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/shapes/arrow/arrowLabel.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n\tArc2d,\n\tBox,\n\tCircle2d,\n\tEdge2d,\n\tEditor,\n\tGeometry2d,\n\tGroup2d,\n\tPolygon2d,\n\tPolyline2d,\n\tTLArrowShape,\n\tTLShape,\n\tVec,\n\tVecLike,\n\tclamp,\n\tcreateComputedCache,\n\texhaustiveSwitchError,\n\tgetChangedKeys,\n\tpointInPolygon,\n\ttoRichText,\n} from '@tldraw/editor'\nimport { isEmptyRichText, renderHtmlFromRichTextForMeasurement } from '../../utils/text/richText'\nimport {\n\tARROW_LABEL_FONT_SIZES,\n\tARROW_LABEL_PADDING,\n\tFONT_FAMILIES,\n\tLABEL_TO_ARROW_PADDING,\n\tSTROKE_SIZES,\n\tTEXT_PROPS,\n} from '../shared/default-shape-constants'\nimport { TLArrowInfo } from './arrow-types'\nimport { getArrowInfo } from './shared'\n\nexport function getArrowBodyGeometry(editor: Editor, shape: TLArrowShape) {\n\tconst info = getArrowInfo(editor, shape)!\n\tswitch (info.type) {\n\t\tcase 'straight':\n\t\t\treturn new Edge2d({\n\t\t\t\tstart: Vec.From(info.start.point),\n\t\t\t\tend: Vec.From(info.end.point),\n\t\t\t})\n\t\tcase 'arc':\n\t\t\treturn new Arc2d({\n\t\t\t\tcenter: Vec.Cast(info.handleArc.center),\n\t\t\t\tstart: Vec.Cast(info.start.point),\n\t\t\t\tend: Vec.Cast(info.end.point),\n\t\t\t\tsweepFlag: info.bodyArc.sweepFlag,\n\t\t\t\tlargeArcFlag: info.bodyArc.largeArcFlag,\n\t\t\t})\n\t\tcase 'elbow':\n\t\t\treturn new Polyline2d({ points: info.route.points })\n\t\tdefault:\n\t\t\texhaustiveSwitchError(info, 'type')\n\t}\n}\n\nconst labelSizeCache = createComputedCache(\n\t'arrow label size',\n\t(editor: Editor, shape: TLArrowShape) => {\n\t\teditor.fonts.trackFontsForShape(shape)\n\t\tlet width = 0\n\t\tlet height = 0\n\n\t\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\t\t// We use 'i' as a default label to measure against as a minimum width.\n\t\tconst isEmpty = isEmptyRichText(shape.props.richText)\n\t\tconst html = renderHtmlFromRichTextForMeasurement(\n\t\t\teditor,\n\t\t\tisEmpty ? toRichText('i') : shape.props.richText\n\t\t)\n\n\t\tconst bodyBounds = bodyGeom.bounds\n\n\t\tconst fontSize = getArrowLabelFontSize(shape)\n\n\t\t// First we measure the text with no constraints\n\t\tconst { w, h } = editor.textMeasure.measureHtml(html, {\n\t\t\t...TEXT_PROPS,\n\t\t\tfontFamily: FONT_FAMILIES[shape.props.font],\n\t\t\tfontSize,\n\t\t\tmaxWidth: null,\n\t\t})\n\n\t\twidth = w\n\t\theight = h\n\n\t\tlet shouldSquish = false\n\n\t\t// If the text is wider than the body, we need to squish it\n\t\tconst info = getArrowInfo(editor, shape)!\n\t\tconst labelToArrowPadding = getLabelToArrowPadding(shape)\n\t\tconst margin =\n\t\t\tinfo.type === 'elbow'\n\t\t\t\t? Math.max(info.elbow.A.arrowheadOffset + labelToArrowPadding, 32) +\n\t\t\t\t\tMath.max(info.elbow.B.arrowheadOffset + labelToArrowPadding, 32)\n\t\t\t\t: 64\n\n\t\tif (bodyBounds.width > bodyBounds.height) {\n\t\t\twidth = Math.max(Math.min(w, margin), Math.min(bodyBounds.width - margin, w))\n\t\t\tshouldSquish = true\n\t\t} else if (width > 16 * fontSize) {\n\t\t\twidth = 16 * fontSize\n\t\t\tshouldSquish = true\n\t\t}\n\n\t\tif (shouldSquish) {\n\t\t\tconst { w: squishedWidth, h: squishedHeight } = editor.textMeasure.measureHtml(html, {\n\t\t\t\t...TEXT_PROPS,\n\t\t\t\tfontFamily: FONT_FAMILIES[shape.props.font],\n\t\t\t\tfontSize,\n\t\t\t\tmaxWidth: width,\n\t\t\t})\n\n\t\t\twidth = squishedWidth\n\t\t\theight = squishedHeight\n\t\t}\n\n\t\treturn new Vec(width, height).addScalar(ARROW_LABEL_PADDING * 2 * shape.props.scale)\n\t},\n\t{\n\t\tareRecordsEqual: (a, b) => {\n\t\t\tif (a.props === b.props) return true\n\n\t\t\t// If the only thing that has changed is the label position, we can skip recalculating the size\n\t\t\tconst changedKeys = getChangedKeys(a.props, b.props)\n\t\t\treturn changedKeys.length === 1 && changedKeys[0] === 'labelPosition'\n\t\t},\n\t}\n)\n\nfunction getArrowLabelSize(editor: Editor, shape: TLArrowShape) {\n\treturn labelSizeCache.get(editor, shape.id) ?? new Vec(0, 0)\n}\n\nfunction getLabelToArrowPadding(shape: TLArrowShape) {\n\tconst strokeWidth = STROKE_SIZES[shape.props.size]\n\tconst labelToArrowPadding =\n\t\t(LABEL_TO_ARROW_PADDING +\n\t\t\t(strokeWidth - STROKE_SIZES.s) * 2 +\n\t\t\t(strokeWidth === STROKE_SIZES.xl ? 20 : 0)) *\n\t\tshape.props.scale\n\n\treturn labelToArrowPadding\n}\n\n/**\n * Return the range of possible label positions for an arrow. The full possible range is 0 to 1, but\n * as the label itself takes up space the usable range is smaller.\n */\nfunction getArrowLabelRange(editor: Editor, shape: TLArrowShape, info: TLArrowInfo) {\n\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\tconst dbgPoints: VecLike[] = []\n\tconst dbg: Geometry2d[] = [new Group2d({ children: [bodyGeom], debugColor: 'lime' })]\n\n\tconst labelSize = getArrowLabelSize(editor, shape)\n\tconst labelToArrowPadding = getLabelToArrowPadding(shape)\n\tconst paddingRelative = labelToArrowPadding / bodyGeom.length\n\n\t// we can calculate the range by sticking the center of the label at the very start/end of the\n\t// arrow, and seeing where the label intersects with the arrow. Then, if we move the label's\n\t// center to that point, that'll be the start/end of the range.\n\n\tlet startBox, endBox\n\tif (info.type === 'elbow') {\n\t\t// for elbow arrows, because they have multiple segments but are always axis-aligned, we can use\n\t\t// an expanded box. This helps keep the box from partially covering the first segment when it's\n\t\t// very small.\n\t\tdbgPoints.push(info.start.point, info.end.point)\n\t\tstartBox = Box.FromCenter(info.start.point, labelSize).expandBy(labelToArrowPadding)\n\t\tendBox = Box.FromCenter(info.end.point, labelSize).expandBy(labelToArrowPadding)\n\t} else {\n\t\t// for other arrows, we move along the arrow by the padding amount to find the start/end points\n\t\tconst startPoint = bodyGeom.interpolateAlongEdge(paddingRelative)\n\t\tconst endPoint = bodyGeom.interpolateAlongEdge(1 - paddingRelative)\n\t\tdbgPoints.push(startPoint, endPoint)\n\t\tstartBox = Box.FromCenter(startPoint, labelSize)\n\t\tendBox = Box.FromCenter(endPoint, labelSize)\n\t}\n\tconst startIntersections = bodyGeom.intersectPolygon(startBox.corners)\n\tconst endIntersections = bodyGeom.intersectPolygon(endBox.corners)\n\n\tconst startConstrained = furthest(info.start.point, startIntersections)\n\tconst endConstrained = furthest(info.end.point, endIntersections)\n\n\tlet startRelative = startConstrained ? bodyGeom.uninterpolateAlongEdge(startConstrained) : 0.5\n\tlet endRelative = endConstrained ? bodyGeom.uninterpolateAlongEdge(endConstrained) : 0.5\n\n\tif (startRelative > endRelative) {\n\t\tstartRelative = 0.5\n\t\tendRelative = 0.5\n\t}\n\n\tfor (const pt of [...startIntersections, ...endIntersections, ...dbgPoints]) {\n\t\tdbg.push(\n\t\t\tnew Circle2d({\n\t\t\t\tx: pt.x - 3,\n\t\t\t\ty: pt.y - 3,\n\t\t\t\tradius: 3,\n\t\t\t\tisFilled: false,\n\t\t\t\tdebugColor: 'magenta',\n\t\t\t\tignore: true,\n\t\t\t})\n\t\t)\n\t}\n\tdbg.push(\n\t\tnew Polygon2d({\n\t\t\tpoints: startBox.corners,\n\t\t\tdebugColor: 'lime',\n\t\t\tisFilled: false,\n\t\t\tignore: true,\n\t\t}),\n\t\tnew Polygon2d({\n\t\t\tpoints: endBox.corners,\n\t\t\tdebugColor: 'lime',\n\t\t\tisFilled: false,\n\t\t\tignore: true,\n\t\t})\n\t)\n\n\treturn { start: startRelative, end: endRelative, dbg }\n}\n\ninterface ArrowheadInfo {\n\thasStartBinding: boolean\n\thasEndBinding: boolean\n\thasStartArrowhead: boolean\n\thasEndArrowhead: boolean\n}\nexport function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {\n\tconst debugGeom: Geometry2d[] = []\n\tconst info = getArrowInfo(editor, shape)!\n\n\tconst arrowheadInfo: ArrowheadInfo = {\n\t\thasStartBinding: !!info.bindings.start,\n\t\thasEndBinding: !!info.bindings.end,\n\t\thasStartArrowhead: info.start.arrowhead !== 'none',\n\t\thasEndArrowhead: info.end.arrowhead !== 'none',\n\t}\n\n\tconst range = getArrowLabelRange(editor, shape, info)\n\tif (range.dbg) debugGeom.push(...range.dbg)\n\n\tconst clampedPosition = getClampedPosition(shape, range, arrowheadInfo)\n\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\tconst labelCenter = bodyGeom.interpolateAlongEdge(clampedPosition)\n\tconst labelSize = getArrowLabelSize(editor, shape)\n\n\treturn { box: Box.FromCenter(labelCenter, labelSize), debugGeom }\n}\n\nfunction getClampedPosition(\n\tshape: TLArrowShape,\n\trange: { start: number; end: number },\n\tarrowheadInfo: ArrowheadInfo\n) {\n\tconst { hasEndArrowhead, hasEndBinding, hasStartBinding, hasStartArrowhead } = arrowheadInfo\n\tconst clampedPosition = clamp(\n\t\tshape.props.labelPosition,\n\t\thasStartArrowhead || hasStartBinding ? range.start : 0,\n\t\thasEndArrowhead || hasEndBinding ? range.end : 1\n\t)\n\n\treturn clampedPosition\n}\n\nfunction furthest(from: VecLike, candidates: VecLike[]): VecLike | null {\n\tlet furthest: VecLike | null = null\n\tlet furthestDist = -Infinity\n\n\tfor (const candidate of candidates) {\n\t\tconst dist = Vec.Dist2(from, candidate)\n\t\tif (dist > furthestDist) {\n\t\t\tfurthest = candidate\n\t\t\tfurthestDist = dist\n\t\t}\n\t}\n\n\treturn furthest\n}\n\nexport function getArrowLabelFontSize(shape: TLArrowShape) {\n\treturn ARROW_LABEL_FONT_SIZES[shape.props.size] * shape.props.scale\n}\n\nexport function getArrowLabelDefaultPosition(editor: Editor, shape: TLArrowShape) {\n\tconst info = getArrowInfo(editor, shape)!\n\tswitch (info.type) {\n\t\tcase 'straight':\n\t\tcase 'arc':\n\t\t\treturn 0.5\n\t\tcase 'elbow': {\n\t\t\tconst midpointHandle = info.route.midpointHandle\n\t\t\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\t\t\tif (midpointHandle && bodyGeom) {\n\t\t\t\treturn bodyGeom.uninterpolateAlongEdge(midpointHandle.point)\n\t\t\t}\n\t\t\treturn 0.5\n\t\t}\n\t\tdefault:\n\t\t\texhaustiveSwitchError(info, 'type')\n\t}\n}\n\n/** @internal */\nexport function isOverArrowLabel(editor: Editor, shape: TLShape) {\n\tif (!editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return false\n\n\tconst pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint)\n\t// How should we handle multiple labels? Do shapes ever have multiple labels?\n\tconst labelGeometry = editor.getShapeGeometry<Group2d>(shape).children[1]\n\t// Knowing what we know about arrows... if the shape has no text in its label,\n\t// then the label geometry should not be there.\n\treturn labelGeometry && pointInPolygon(pointInShapeSpace, labelGeometry.vertices)\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
6
|
-
"names": ["furthest"]
|
|
4
|
+
"sourcesContent": ["import {\n\tArc2d,\n\tBox,\n\tCircle2d,\n\tEdge2d,\n\tEditor,\n\tGeometry2d,\n\tGroup2d,\n\tPolygon2d,\n\tPolyline2d,\n\tTLArrowShape,\n\tTLShape,\n\tVec,\n\tVecLike,\n\tclamp,\n\tcreateComputedCache,\n\texhaustiveSwitchError,\n\tgetChangedKeys,\n\tpointInPolygon,\n\ttoRichText,\n} from '@tldraw/editor'\nimport { isEmptyRichText, renderHtmlFromRichTextForMeasurement } from '../../utils/text/richText'\nimport {\n\tARROW_LABEL_FONT_SIZES,\n\tARROW_LABEL_PADDING,\n\tFONT_FAMILIES,\n\tLABEL_TO_ARROW_PADDING,\n\tSTROKE_SIZES,\n\tTEXT_PROPS,\n} from '../shared/default-shape-constants'\nimport { TLArrowInfo } from './arrow-types'\nimport { getArrowInfo } from './shared'\n\nexport function getArrowBodyGeometry(editor: Editor, shape: TLArrowShape) {\n\tconst info = getArrowInfo(editor, shape)!\n\tswitch (info.type) {\n\t\tcase 'straight':\n\t\t\treturn new Edge2d({\n\t\t\t\tstart: Vec.From(info.start.point),\n\t\t\t\tend: Vec.From(info.end.point),\n\t\t\t})\n\t\tcase 'arc':\n\t\t\treturn new Arc2d({\n\t\t\t\tcenter: Vec.Cast(info.handleArc.center),\n\t\t\t\tstart: Vec.Cast(info.start.point),\n\t\t\t\tend: Vec.Cast(info.end.point),\n\t\t\t\tsweepFlag: info.bodyArc.sweepFlag,\n\t\t\t\tlargeArcFlag: info.bodyArc.largeArcFlag,\n\t\t\t})\n\t\tcase 'elbow':\n\t\t\treturn new Polyline2d({ points: info.route.points })\n\t\tdefault:\n\t\t\texhaustiveSwitchError(info, 'type')\n\t}\n}\n\nconst labelSizeCache = createComputedCache(\n\t'arrow label size',\n\t(editor: Editor, shape: TLArrowShape) => {\n\t\teditor.fonts.trackFontsForShape(shape)\n\t\tlet width = 0\n\t\tlet height = 0\n\n\t\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\t\t// We use 'i' as a default label to measure against as a minimum width.\n\t\tconst isEmpty = isEmptyRichText(shape.props.richText)\n\t\tconst html = renderHtmlFromRichTextForMeasurement(\n\t\t\teditor,\n\t\t\tisEmpty ? toRichText('i') : shape.props.richText\n\t\t)\n\n\t\tconst bodyBounds = bodyGeom.bounds\n\n\t\tconst fontSize = getArrowLabelFontSize(shape)\n\n\t\t// First we measure the text with no constraints\n\t\tconst { w, h } = editor.textMeasure.measureHtml(html, {\n\t\t\t...TEXT_PROPS,\n\t\t\tfontFamily: FONT_FAMILIES[shape.props.font],\n\t\t\tfontSize,\n\t\t\tmaxWidth: null,\n\t\t})\n\n\t\twidth = w\n\t\theight = h\n\n\t\tlet shouldSquish = false\n\n\t\t// If the text is wider than the body, we need to squish it\n\t\tconst info = getArrowInfo(editor, shape)!\n\t\tconst labelToArrowPadding = getLabelToArrowPadding(shape)\n\t\tconst margin =\n\t\t\tinfo.type === 'elbow'\n\t\t\t\t? Math.max(info.elbow.A.arrowheadOffset + labelToArrowPadding, 32) +\n\t\t\t\t\tMath.max(info.elbow.B.arrowheadOffset + labelToArrowPadding, 32)\n\t\t\t\t: 64\n\n\t\tif (bodyBounds.width > bodyBounds.height) {\n\t\t\twidth = Math.max(Math.min(w, margin), Math.min(bodyBounds.width - margin, w))\n\t\t\tshouldSquish = true\n\t\t} else if (width > 16 * fontSize) {\n\t\t\twidth = 16 * fontSize\n\t\t\tshouldSquish = true\n\t\t}\n\n\t\tif (shouldSquish) {\n\t\t\tconst { w: squishedWidth, h: squishedHeight } = editor.textMeasure.measureHtml(html, {\n\t\t\t\t...TEXT_PROPS,\n\t\t\t\tfontFamily: FONT_FAMILIES[shape.props.font],\n\t\t\t\tfontSize,\n\t\t\t\tmaxWidth: width,\n\t\t\t})\n\n\t\t\twidth = squishedWidth\n\t\t\theight = squishedHeight\n\t\t}\n\n\t\treturn new Vec(width, height).addScalar(ARROW_LABEL_PADDING * 2 * shape.props.scale)\n\t},\n\t{\n\t\tareRecordsEqual: (a, b) => {\n\t\t\tif (a.props === b.props) return true\n\n\t\t\t// If the only thing that has changed is the label position, we can skip recalculating the size\n\t\t\tconst changedKeys = getChangedKeys(a.props, b.props)\n\t\t\treturn changedKeys.length === 1 && changedKeys[0] === 'labelPosition'\n\t\t},\n\t}\n)\n\nfunction getArrowLabelSize(editor: Editor, shape: TLArrowShape) {\n\treturn labelSizeCache.get(editor, shape.id) ?? new Vec(0, 0)\n}\n\nfunction getLabelToArrowPadding(shape: TLArrowShape) {\n\tconst strokeWidth = STROKE_SIZES[shape.props.size]\n\tconst labelToArrowPadding =\n\t\t(LABEL_TO_ARROW_PADDING +\n\t\t\t(strokeWidth - STROKE_SIZES.s) * 2 +\n\t\t\t(strokeWidth === STROKE_SIZES.xl ? 20 : 0)) *\n\t\tshape.props.scale\n\n\treturn labelToArrowPadding\n}\n\n/**\n * Return the range of possible label positions for an arrow. The full possible range is 0 to 1, but\n * as the label itself takes up space the usable range is smaller.\n */\nfunction getArrowLabelRange(editor: Editor, shape: TLArrowShape, info: TLArrowInfo) {\n\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\tconst dbgPoints: VecLike[] = []\n\tconst dbg: Geometry2d[] = [new Group2d({ children: [bodyGeom], debugColor: 'lime' })]\n\n\tconst labelSize = getArrowLabelSize(editor, shape)\n\tconst labelToArrowPadding = getLabelToArrowPadding(shape)\n\tconst paddingRelative = labelToArrowPadding / bodyGeom.length\n\n\t// we can calculate the range by sticking the center of the label at the very start/end of the\n\t// arrow, and seeing where the label intersects with the arrow. Then, if we move the label's\n\t// center to that point, that'll be the start/end of the range.\n\n\tlet startBox, endBox\n\tif (info.type === 'elbow') {\n\t\t// for elbow arrows, because they have multiple segments but are always axis-aligned, we can use\n\t\t// an expanded box. This helps keep the box from partially covering the first segment when it's\n\t\t// very small.\n\t\tdbgPoints.push(info.start.point, info.end.point)\n\t\tstartBox = Box.FromCenter(info.start.point, labelSize).expandBy(labelToArrowPadding)\n\t\tendBox = Box.FromCenter(info.end.point, labelSize).expandBy(labelToArrowPadding)\n\t} else {\n\t\t// for other arrows, we move along the arrow by the padding amount to find the start/end points\n\t\tconst startPoint = bodyGeom.interpolateAlongEdge(paddingRelative)\n\t\tconst endPoint = bodyGeom.interpolateAlongEdge(1 - paddingRelative)\n\t\tdbgPoints.push(startPoint, endPoint)\n\t\tstartBox = Box.FromCenter(startPoint, labelSize)\n\t\tendBox = Box.FromCenter(endPoint, labelSize)\n\t}\n\tconst startIntersections = bodyGeom.intersectPolygon(startBox.corners)\n\tconst endIntersections = bodyGeom.intersectPolygon(endBox.corners)\n\n\tconst startConstrained = furthest(info.start.point, startIntersections)\n\tconst endConstrained = furthest(info.end.point, endIntersections)\n\n\tlet startRelative = startConstrained ? bodyGeom.uninterpolateAlongEdge(startConstrained) : 0.5\n\tlet endRelative = endConstrained ? bodyGeom.uninterpolateAlongEdge(endConstrained) : 0.5\n\n\tif (startRelative > endRelative) {\n\t\tstartRelative = 0.5\n\t\tendRelative = 0.5\n\t}\n\n\tfor (const pt of [...startIntersections, ...endIntersections, ...dbgPoints]) {\n\t\tdbg.push(\n\t\t\tnew Circle2d({\n\t\t\t\tx: pt.x - 3,\n\t\t\t\ty: pt.y - 3,\n\t\t\t\tradius: 3,\n\t\t\t\tisFilled: false,\n\t\t\t\tdebugColor: 'magenta',\n\t\t\t\tignore: true,\n\t\t\t})\n\t\t)\n\t}\n\tdbg.push(\n\t\tnew Polygon2d({\n\t\t\tpoints: startBox.corners,\n\t\t\tdebugColor: 'lime',\n\t\t\tisFilled: false,\n\t\t\tignore: true,\n\t\t}),\n\t\tnew Polygon2d({\n\t\t\tpoints: endBox.corners,\n\t\t\tdebugColor: 'lime',\n\t\t\tisFilled: false,\n\t\t\tignore: true,\n\t\t})\n\t)\n\n\treturn { start: startRelative, end: endRelative, dbg }\n}\n\ninterface ArrowheadInfo {\n\thasStartBinding: boolean\n\thasEndBinding: boolean\n\thasStartArrowhead: boolean\n\thasEndArrowhead: boolean\n}\nexport function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {\n\tconst isEditing = editor.getEditingShapeId() === shape.id\n\tif (!isEditing && isEmptyRichText(shape.props.richText)) {\n\t\t// Short-circuit for empty labels.\n\t\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\t\tconst labelCenter = bodyGeom.interpolateAlongEdge(0.5)\n\t\treturn { box: Box.FromCenter(labelCenter, new Vec(0, 0)), debugGeom: [] }\n\t}\n\n\tconst debugGeom: Geometry2d[] = []\n\tconst info = getArrowInfo(editor, shape)!\n\n\tconst arrowheadInfo: ArrowheadInfo = {\n\t\thasStartBinding: !!info.bindings.start,\n\t\thasEndBinding: !!info.bindings.end,\n\t\thasStartArrowhead: info.start.arrowhead !== 'none',\n\t\thasEndArrowhead: info.end.arrowhead !== 'none',\n\t}\n\n\tconst range = getArrowLabelRange(editor, shape, info)\n\tif (range.dbg) debugGeom.push(...range.dbg)\n\n\tconst clampedPosition = getClampedPosition(shape, range, arrowheadInfo)\n\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\tconst labelCenter = bodyGeom.interpolateAlongEdge(clampedPosition)\n\tconst labelSize = getArrowLabelSize(editor, shape)\n\n\treturn { box: Box.FromCenter(labelCenter, labelSize), debugGeom }\n}\n\nfunction getClampedPosition(\n\tshape: TLArrowShape,\n\trange: { start: number; end: number },\n\tarrowheadInfo: ArrowheadInfo\n) {\n\tconst { hasEndArrowhead, hasEndBinding, hasStartBinding, hasStartArrowhead } = arrowheadInfo\n\tconst clampedPosition = clamp(\n\t\tshape.props.labelPosition,\n\t\thasStartArrowhead || hasStartBinding ? range.start : 0,\n\t\thasEndArrowhead || hasEndBinding ? range.end : 1\n\t)\n\n\treturn clampedPosition\n}\n\nfunction furthest(from: VecLike, candidates: VecLike[]): VecLike | null {\n\tlet furthest: VecLike | null = null\n\tlet furthestDist = -Infinity\n\n\tfor (const candidate of candidates) {\n\t\tconst dist = Vec.Dist2(from, candidate)\n\t\tif (dist > furthestDist) {\n\t\t\tfurthest = candidate\n\t\t\tfurthestDist = dist\n\t\t}\n\t}\n\n\treturn furthest\n}\n\nexport function getArrowLabelFontSize(shape: TLArrowShape) {\n\treturn ARROW_LABEL_FONT_SIZES[shape.props.size] * shape.props.scale\n}\n\nexport function getArrowLabelDefaultPosition(editor: Editor, shape: TLArrowShape) {\n\tconst info = getArrowInfo(editor, shape)!\n\tswitch (info.type) {\n\t\tcase 'straight':\n\t\tcase 'arc':\n\t\t\treturn 0.5\n\t\tcase 'elbow': {\n\t\t\tconst midpointHandle = info.route.midpointHandle\n\t\t\tconst bodyGeom = getArrowBodyGeometry(editor, shape)\n\t\t\tif (midpointHandle && bodyGeom) {\n\t\t\t\treturn bodyGeom.uninterpolateAlongEdge(midpointHandle.point)\n\t\t\t}\n\t\t\treturn 0.5\n\t\t}\n\t\tdefault:\n\t\t\texhaustiveSwitchError(info, 'type')\n\t}\n}\n\n/** @internal */\nexport function isOverArrowLabel(editor: Editor, shape: TLShape) {\n\tif (!editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return false\n\n\tconst pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint)\n\t// How should we handle multiple labels? Do shapes ever have multiple labels?\n\tconst labelGeometry = editor.getShapeGeometry<Group2d>(shape).children[1]\n\t// Knowing what we know about arrows... if the shape has no text in its label,\n\t// then the label geometry should not be there.\n\treturn labelGeometry && pointInPolygon(pointInShapeSpace, labelGeometry.vertices)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["bodyGeom", "labelCenter", "furthest"]
|
|
7
7
|
}
|
|
@@ -79,6 +79,9 @@ class FrameShapeUtil extends import_editor.BaseBoxShapeUtil {
|
|
|
79
79
|
canResizeChildren() {
|
|
80
80
|
return false;
|
|
81
81
|
}
|
|
82
|
+
isExportBoundsContainer() {
|
|
83
|
+
return true;
|
|
84
|
+
}
|
|
82
85
|
getDefaultProps() {
|
|
83
86
|
return { w: 160 * 2, h: 90 * 2, name: "", color: "black" };
|
|
84
87
|
}
|
|
@@ -262,6 +265,9 @@ class FrameShapeUtil extends import_editor.BaseBoxShapeUtil {
|
|
|
262
265
|
providesBackgroundForChildren() {
|
|
263
266
|
return true;
|
|
264
267
|
}
|
|
268
|
+
getClipPath(shape) {
|
|
269
|
+
return this.editor.getShapeGeometry(shape.id).vertices;
|
|
270
|
+
}
|
|
265
271
|
canReceiveNewChildrenOfType(shape) {
|
|
266
272
|
return !shape.isLocked;
|
|
267
273
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/shapes/frame/FrameShapeUtil.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tDefaultColorStyle,\n\tGeometry2d,\n\tGroup2d,\n\tRectangle2d,\n\tSVGContainer,\n\tSvgExportContext,\n\tTLClickEventInfo,\n\tTLDragShapesOutInfo,\n\tTLDragShapesOverInfo,\n\tTLFrameShape,\n\tTLFrameShapeProps,\n\tTLResizeInfo,\n\tTLShape,\n\tTLShapePartial,\n\tTLShapeUtilConstructor,\n\tclamp,\n\tcompact,\n\tframeShapeMigrations,\n\tframeShapeProps,\n\tgetColorValue,\n\tgetDefaultColorTheme,\n\tlerp,\n\tresizeBox,\n\ttoDomPrecision,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { fitFrameToContent, getFrameChildrenBounds } from '../../utils/frames/frames'\nimport {\n\tTLCreateTextJsxFromSpansOpts,\n\tcreateTextJsxFromSpans,\n} from '../shared/createTextJsxFromSpans'\nimport { useDefaultColorTheme } from '../shared/useDefaultColorTheme'\nimport { FrameHeading } from './components/FrameHeading'\nimport {\n\tgetFrameHeadingOpts,\n\tgetFrameHeadingSide,\n\tgetFrameHeadingSize,\n\tgetFrameHeadingTranslation,\n} from './frameHelpers'\n\n// Some of these values are repeated in CSS and need to match\nconst FRAME_HEADING_EXTRA_WIDTH = 12\nconst FRAME_HEADING_MIN_WIDTH = 32\nconst FRAME_HEADING_NOCOLORS_OFFSET_X = -7\nconst FRAME_HEADING_OFFSET_Y = 4\n\n/** @public */\nexport interface FrameShapeOptions {\n\t/**\n\t * When true, the frame will display colors for the shape's headings and background.\n\t */\n\tshowColors: boolean\n}\n\nexport function defaultEmptyAs(str: string, dflt: string) {\n\tif (str.match(/^\\s*$/)) {\n\t\treturn dflt\n\t}\n\treturn str\n}\n\n/** @public */\nexport class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {\n\tstatic override type = 'frame' as const\n\tstatic override props = frameShapeProps\n\tstatic override migrations = frameShapeMigrations\n\n\toverride options: FrameShapeOptions = {\n\t\tshowColors: false,\n\t}\n\n\t// evil crimes :)\n\t// By default, showColors is off. Because they use style props, which are picked up\n\t// automatically, we don't have DefaultColorStyle in the props in the schema by default.\n\t// Instead, when someone calls .configure to turn the option on, we manually add in the color\n\t// style here so it plays nicely with the other editor APIs.\n\tstatic override configure<T extends TLShapeUtilConstructor<any, any>>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\tconst withOptions = super.configure.call(this, options) as T\n\t\tif ((options as any).showColors) {\n\t\t\t;(withOptions as any).props = { ...withOptions.props, color: DefaultColorStyle }\n\t\t}\n\t\treturn withOptions\n\t}\n\n\toverride canEdit() {\n\t\treturn true\n\t}\n\n\toverride canResize() {\n\t\treturn true\n\t}\n\n\toverride canResizeChildren() {\n\t\treturn false\n\t}\n\n\toverride getDefaultProps(): TLFrameShape['props'] {\n\t\treturn { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }\n\t}\n\n\toverride getAriaDescriptor(shape: TLFrameShape) {\n\t\treturn shape.props.name\n\t}\n\n\toverride getGeometry(shape: TLFrameShape): Geometry2d {\n\t\tconst { editor } = this\n\n\t\tconst z = editor.getZoomLevel()\n\n\t\t// Which dimension measures the top edge after rotation?\n\t\tconst labelSide = getFrameHeadingSide(editor, shape)\n\t\tconst isVertical = labelSide % 2 === 1\n\t\tconst rotatedTopEdgeWidth = isVertical ? shape.props.h : shape.props.w\n\n\t\t// Get the size of the heading (max width equal to the rotatedTopEdgeWidth)\n\t\tconst opts = getFrameHeadingOpts(rotatedTopEdgeWidth, false)\n\t\tconst headingSize = getFrameHeadingSize(editor, shape, opts)\n\n\t\t// If NOT showing frame colors, we need to offset the label\n\t\t// to the left so that the title is in line with the shape edge\n\t\t// and add that extra width to the right side of the label\n\t\tconst isShowingFrameColors = this.options.showColors\n\n\t\t// Scale everything into **screen space**\n\t\tconst extraWidth = FRAME_HEADING_EXTRA_WIDTH / z\n\t\tconst minWidth = FRAME_HEADING_MIN_WIDTH / z\n\t\tconst maxWidth = rotatedTopEdgeWidth + (isShowingFrameColors ? 1 : extraWidth)\n\n\t\tconst labelWidth = headingSize.w / z\n\t\tconst labelHeight = headingSize.h / z\n\n\t\tconst clampedLabelWidth = clamp(labelWidth + extraWidth, minWidth, maxWidth)\n\n\t\tconst offsetX = (isShowingFrameColors ? -1 : FRAME_HEADING_NOCOLORS_OFFSET_X) / z\n\t\tconst offsetY = FRAME_HEADING_OFFSET_Y / z\n\n\t\t// In page space\n\t\tconst width = isVertical ? labelHeight : clampedLabelWidth\n\t\tconst height = isVertical ? clampedLabelWidth : labelHeight\n\n\t\t// Calculate label position based on side. The position needs to always appear\n\t\t// at the top left of the shape, regardless of rotation. The label must be\n\t\t// between a minimum and maximum. The minimum is arbitrary; the maximum is the\n\t\t// width of the edge of the frame where the label will be shown.\n\n\t\tlet x: number, y: number\n\n\t\tswitch (labelSide) {\n\t\t\tcase 0: {\n\t\t\t\t// top\n\t\t\t\tx = offsetX\n\t\t\t\ty = -(labelHeight + offsetY)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 1: {\n\t\t\t\t// right\n\t\t\t\tx = -(labelHeight + offsetY)\n\t\t\t\ty = shape.props.h - (offsetX + clampedLabelWidth)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 2: {\n\t\t\t\t// bottom\n\t\t\t\tx = shape.props.w - (offsetX + clampedLabelWidth)\n\t\t\t\ty = shape.props.h + offsetY\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 3: {\n\t\t\t\t// left\n\t\t\t\tx = shape.props.w + offsetY\n\t\t\t\ty = offsetX\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\treturn new Group2d({\n\t\t\tchildren: [\n\t\t\t\tnew Rectangle2d({\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tisFilled: false,\n\t\t\t\t}),\n\t\t\t\tnew Rectangle2d({\n\t\t\t\t\tx,\n\t\t\t\t\ty,\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t\tisFilled: true,\n\t\t\t\t\tisLabel: true,\n\t\t\t\t}),\n\t\t\t],\n\t\t})\n\t}\n\n\toverride getText(shape: TLFrameShape): string | undefined {\n\t\treturn shape.props.name\n\t}\n\n\toverride component(shape: TLFrameShape) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst theme = useDefaultColorTheme()\n\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst isCreating = useValue(\n\t\t\t'is creating this shape',\n\t\t\t() => {\n\t\t\t\tconst resizingState = this.editor.getStateDescendant('select.resizing')\n\t\t\t\tif (!resizingState) return false\n\t\t\t\tif (!resizingState.getIsActive()) return false\n\t\t\t\tconst info = (resizingState as typeof resizingState & { info: { isCreating: boolean } })\n\t\t\t\t\t?.info\n\t\t\t\tif (!info) return false\n\t\t\t\treturn info.isCreating && this.editor.getOnlySelectedShapeId() === shape.id\n\t\t\t},\n\t\t\t[shape.id]\n\t\t)\n\n\t\tconst showFrameColors = this.options.showColors\n\t\tconst colorToUse = showFrameColors ? shape.props.color : 'black'\n\t\tconst frameFill = getColorValue(theme, colorToUse, 'frameFill')\n\t\tconst frameStroke = getColorValue(theme, colorToUse, 'frameStroke')\n\t\tconst frameHeadingStroke = showFrameColors\n\t\t\t? getColorValue(theme, colorToUse, 'frameHeadingStroke')\n\t\t\t: theme.background\n\t\tconst frameHeadingFill = showFrameColors\n\t\t\t? getColorValue(theme, colorToUse, 'frameHeadingFill')\n\t\t\t: theme.background\n\t\tconst frameHeadingText = getColorValue(theme, colorToUse, 'frameText')\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SVGContainer>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tclassName={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}\n\t\t\t\t\t\tfill={frameFill}\n\t\t\t\t\t\tstroke={frameStroke}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: `calc(${shape.props.w}px + 1px / var(--tl-zoom))`,\n\t\t\t\t\t\t\theight: `calc(${shape.props.h}px + 1px / var(--tl-zoom))`,\n\t\t\t\t\t\t\ttransform: `translate(calc(-0.5px / var(--tl-zoom)), calc(-0.5px / var(--tl-zoom)))`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</SVGContainer>\n\t\t\t\t{isCreating ? null : (\n\t\t\t\t\t<FrameHeading\n\t\t\t\t\t\tid={shape.id}\n\t\t\t\t\t\tname={shape.props.name}\n\t\t\t\t\t\tfill={frameHeadingFill}\n\t\t\t\t\t\tstroke={frameHeadingStroke}\n\t\t\t\t\t\tcolor={frameHeadingText}\n\t\t\t\t\t\twidth={shape.props.w}\n\t\t\t\t\t\theight={shape.props.h}\n\t\t\t\t\t\toffsetX={showFrameColors ? -1 : -7}\n\t\t\t\t\t\tshowColors={this.options.showColors}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)\n\t}\n\n\toverride toSvg(shape: TLFrameShape, ctx: SvgExportContext) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: ctx.isDarkMode })\n\n\t\t// rotate right 45 deg\n\t\tconst labelSide = getFrameHeadingSide(this.editor, shape)\n\t\tconst isVertical = labelSide % 2 === 1\n\t\tconst rotatedTopEdgeWidth = isVertical ? shape.props.h : shape.props.w\n\t\tconst labelTranslate = getFrameHeadingTranslation(shape, labelSide, true)\n\n\t\t// Truncate with ellipsis\n\t\tconst opts: TLCreateTextJsxFromSpansOpts = getFrameHeadingOpts(rotatedTopEdgeWidth - 12, true)\n\n\t\tconst frameTitle = defaultEmptyAs(shape.props.name, 'Frame') + String.fromCharCode(8203)\n\t\tconst labelBounds = getFrameHeadingSize(this.editor, shape, opts)\n\t\tconst spans = this.editor.textMeasure.measureTextSpans(frameTitle, opts)\n\t\tconst text = createTextJsxFromSpans(this.editor, spans, opts)\n\n\t\tconst showFrameColors = this.options.showColors\n\t\tconst colorToUse = showFrameColors ? shape.props.color : 'black'\n\t\tconst frameFill = getColorValue(theme, colorToUse, 'frameFill')\n\t\tconst frameStroke = getColorValue(theme, colorToUse, 'frameStroke')\n\t\tconst frameHeadingStroke = showFrameColors\n\t\t\t? getColorValue(theme, colorToUse, 'frameHeadingStroke')\n\t\t\t: theme.background\n\t\tconst frameHeadingFill = showFrameColors\n\t\t\t? getColorValue(theme, colorToUse, 'frameHeadingFill')\n\t\t\t: theme.background\n\t\tconst frameHeadingText = getColorValue(theme, colorToUse, 'frameText')\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<rect\n\t\t\t\t\twidth={shape.props.w}\n\t\t\t\t\theight={shape.props.h}\n\t\t\t\t\tfill={frameFill}\n\t\t\t\t\tstroke={frameStroke}\n\t\t\t\t\tstrokeWidth={1}\n\t\t\t\t\tx={0}\n\t\t\t\t\trx={0}\n\t\t\t\t\try={0}\n\t\t\t\t/>\n\t\t\t\t<g fill={frameHeadingText} transform={labelTranslate}>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tx={labelBounds.x - (showFrameColors ? 0 : 6)}\n\t\t\t\t\t\ty={labelBounds.y - 6}\n\t\t\t\t\t\twidth={Math.min(rotatedTopEdgeWidth, labelBounds.width + 12)}\n\t\t\t\t\t\theight={labelBounds.height}\n\t\t\t\t\t\tfill={frameHeadingFill}\n\t\t\t\t\t\tstroke={frameHeadingStroke}\n\t\t\t\t\t\trx={4}\n\t\t\t\t\t\try={4}\n\t\t\t\t\t/>\n\t\t\t\t\t<g transform={`translate(${showFrameColors ? 8 : 0}, 4)`}>{text}</g>\n\t\t\t\t</g>\n\t\t\t</>\n\t\t)\n\t}\n\n\tindicator(shape: TLFrameShape) {\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\tclassName={`tl-frame-indicator`}\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride canReceiveNewChildrenOfType(shape: TLShape) {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride onResize(shape: any, info: TLResizeInfo<any>) {\n\t\treturn resizeBox(shape, info)\n\t}\n\n\toverride getInterpolatedProps(\n\t\tstartShape: TLFrameShape,\n\t\tendShape: TLFrameShape,\n\t\tt: number\n\t): TLFrameShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n\n\toverride onDoubleClickEdge(shape: TLFrameShape, info: TLClickEventInfo) {\n\t\tif (info.target !== 'selection') return\n\t\tconst { handle } = info\n\n\t\t// If handle is missing, we can't determine which edge was clicked\n\t\tif (!handle) return\n\n\t\tconst isHorizontalEdge = handle === 'left' || handle === 'right'\n\t\tconst isVerticalEdge = handle === 'top' || handle === 'bottom'\n\n\t\tconst childIds = this.editor.getSortedChildIdsForParent(shape.id)\n\t\tconst children = compact(childIds.map((id) => this.editor.getShape(id)))\n\t\tif (!children.length) return\n\n\t\tconst { dx, dy, w, h } = getFrameChildrenBounds(children, this.editor, { padding: 10 })\n\n\t\tthis.editor.run(() => {\n\t\t\tconst changes: TLShapePartial[] = childIds.map((childId) => {\n\t\t\t\tconst childShape = this.editor.getShape(childId)!\n\t\t\t\treturn {\n\t\t\t\t\tid: childShape.id,\n\t\t\t\t\ttype: childShape.type,\n\t\t\t\t\tx: isHorizontalEdge ? childShape.x + dx : childShape.x,\n\t\t\t\t\ty: isVerticalEdge ? childShape.y + dy : childShape.y,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tthis.editor.updateShapes(changes)\n\t\t})\n\n\t\treturn {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tprops: {\n\t\t\t\tw: isHorizontalEdge ? w : shape.props.w,\n\t\t\t\th: isVerticalEdge ? h : shape.props.h,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride onDoubleClickCorner(shape: TLFrameShape) {\n\t\tfitFrameToContent(this.editor, shape.id, { padding: 10 })\n\t\treturn {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t}\n\t}\n\n\toverride onDragShapesIn(\n\t\tshape: TLFrameShape,\n\t\tdraggingShapes: TLShape[],\n\t\t{ initialParentIds, initialIndices }: TLDragShapesOverInfo\n\t) {\n\t\tconst { editor } = this\n\n\t\tif (draggingShapes.every((s) => s.parentId === shape.id)) return\n\n\t\t// Check to see whether any of the shapes can have their old index restored\n\t\tlet canRestoreOriginalIndices = false\n\t\tconst previousChildren = draggingShapes.filter((s) => shape.id === initialParentIds.get(s.id))\n\n\t\tif (previousChildren.length > 0) {\n\t\t\tconst currentChildren = compact(\n\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t)\n\t\t\tif (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {\n\t\t\t\tcanRestoreOriginalIndices = true\n\t\t\t}\n\t\t}\n\n\t\t// I can't imagine this happening, but if any of the children are the ancestor of the frame, quit here\n\t\tif (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return\n\n\t\t// Reparent the shapes to the new parent\n\t\teditor.reparentShapes(draggingShapes, shape.id)\n\n\t\t// If we can restore the original indices, then do so\n\t\tif (canRestoreOriginalIndices) {\n\t\t\tfor (const shape of previousChildren) {\n\t\t\t\teditor.updateShape({\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tindex: initialIndices.get(shape.id),\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDragShapesOut(\n\t\tshape: TLFrameShape,\n\t\tdraggingShapes: TLShape[],\n\t\tinfo: TLDragShapesOutInfo\n\t): void {\n\t\tconst { editor } = this\n\t\t// When a user drags shapes out of a frame, and if we're not dragging into a new shape, then reparent\n\t\t// the dragging shapes (that are current children of the frame) onto the current page instead\n\t\tif (!info.nextDraggingOverShapeId) {\n\t\t\teditor.reparentShapes(\n\t\t\t\tdraggingShapes.filter(\n\t\t\t\t\t(s) => s.parentId === shape.id && this.canReceiveNewChildrenOfType(s)\n\t\t\t\t),\n\t\t\t\teditor.getCurrentPageId()\n\t\t\t)\n\t\t}\n\t}\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tDefaultColorStyle,\n\tGeometry2d,\n\tGroup2d,\n\tRectangle2d,\n\tSVGContainer,\n\tSvgExportContext,\n\tTLClickEventInfo,\n\tTLDragShapesOutInfo,\n\tTLDragShapesOverInfo,\n\tTLFrameShape,\n\tTLFrameShapeProps,\n\tTLResizeInfo,\n\tTLShape,\n\tTLShapePartial,\n\tTLShapeUtilConstructor,\n\tclamp,\n\tcompact,\n\tframeShapeMigrations,\n\tframeShapeProps,\n\tgetColorValue,\n\tgetDefaultColorTheme,\n\tlerp,\n\tresizeBox,\n\ttoDomPrecision,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { fitFrameToContent, getFrameChildrenBounds } from '../../utils/frames/frames'\nimport {\n\tTLCreateTextJsxFromSpansOpts,\n\tcreateTextJsxFromSpans,\n} from '../shared/createTextJsxFromSpans'\nimport { useDefaultColorTheme } from '../shared/useDefaultColorTheme'\nimport { FrameHeading } from './components/FrameHeading'\nimport {\n\tgetFrameHeadingOpts,\n\tgetFrameHeadingSide,\n\tgetFrameHeadingSize,\n\tgetFrameHeadingTranslation,\n} from './frameHelpers'\n\n// Some of these values are repeated in CSS and need to match\nconst FRAME_HEADING_EXTRA_WIDTH = 12\nconst FRAME_HEADING_MIN_WIDTH = 32\nconst FRAME_HEADING_NOCOLORS_OFFSET_X = -7\nconst FRAME_HEADING_OFFSET_Y = 4\n\n/** @public */\nexport interface FrameShapeOptions {\n\t/**\n\t * When true, the frame will display colors for the shape's headings and background.\n\t */\n\tshowColors: boolean\n}\n\nexport function defaultEmptyAs(str: string, dflt: string) {\n\tif (str.match(/^\\s*$/)) {\n\t\treturn dflt\n\t}\n\treturn str\n}\n\n/** @public */\nexport class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {\n\tstatic override type = 'frame' as const\n\tstatic override props = frameShapeProps\n\tstatic override migrations = frameShapeMigrations\n\n\toverride options: FrameShapeOptions = {\n\t\tshowColors: false,\n\t}\n\n\t// evil crimes :)\n\t// By default, showColors is off. Because they use style props, which are picked up\n\t// automatically, we don't have DefaultColorStyle in the props in the schema by default.\n\t// Instead, when someone calls .configure to turn the option on, we manually add in the color\n\t// style here so it plays nicely with the other editor APIs.\n\tstatic override configure<T extends TLShapeUtilConstructor<any, any>>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\tconst withOptions = super.configure.call(this, options) as T\n\t\tif ((options as any).showColors) {\n\t\t\t;(withOptions as any).props = { ...withOptions.props, color: DefaultColorStyle }\n\t\t}\n\t\treturn withOptions\n\t}\n\n\toverride canEdit() {\n\t\treturn true\n\t}\n\n\toverride canResize() {\n\t\treturn true\n\t}\n\n\toverride canResizeChildren() {\n\t\treturn false\n\t}\n\n\toverride isExportBoundsContainer(): boolean {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLFrameShape['props'] {\n\t\treturn { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }\n\t}\n\n\toverride getAriaDescriptor(shape: TLFrameShape) {\n\t\treturn shape.props.name\n\t}\n\n\toverride getGeometry(shape: TLFrameShape): Geometry2d {\n\t\tconst { editor } = this\n\n\t\tconst z = editor.getZoomLevel()\n\n\t\t// Which dimension measures the top edge after rotation?\n\t\tconst labelSide = getFrameHeadingSide(editor, shape)\n\t\tconst isVertical = labelSide % 2 === 1\n\t\tconst rotatedTopEdgeWidth = isVertical ? shape.props.h : shape.props.w\n\n\t\t// Get the size of the heading (max width equal to the rotatedTopEdgeWidth)\n\t\tconst opts = getFrameHeadingOpts(rotatedTopEdgeWidth, false)\n\t\tconst headingSize = getFrameHeadingSize(editor, shape, opts)\n\n\t\t// If NOT showing frame colors, we need to offset the label\n\t\t// to the left so that the title is in line with the shape edge\n\t\t// and add that extra width to the right side of the label\n\t\tconst isShowingFrameColors = this.options.showColors\n\n\t\t// Scale everything into **screen space**\n\t\tconst extraWidth = FRAME_HEADING_EXTRA_WIDTH / z\n\t\tconst minWidth = FRAME_HEADING_MIN_WIDTH / z\n\t\tconst maxWidth = rotatedTopEdgeWidth + (isShowingFrameColors ? 1 : extraWidth)\n\n\t\tconst labelWidth = headingSize.w / z\n\t\tconst labelHeight = headingSize.h / z\n\n\t\tconst clampedLabelWidth = clamp(labelWidth + extraWidth, minWidth, maxWidth)\n\n\t\tconst offsetX = (isShowingFrameColors ? -1 : FRAME_HEADING_NOCOLORS_OFFSET_X) / z\n\t\tconst offsetY = FRAME_HEADING_OFFSET_Y / z\n\n\t\t// In page space\n\t\tconst width = isVertical ? labelHeight : clampedLabelWidth\n\t\tconst height = isVertical ? clampedLabelWidth : labelHeight\n\n\t\t// Calculate label position based on side. The position needs to always appear\n\t\t// at the top left of the shape, regardless of rotation. The label must be\n\t\t// between a minimum and maximum. The minimum is arbitrary; the maximum is the\n\t\t// width of the edge of the frame where the label will be shown.\n\n\t\tlet x: number, y: number\n\n\t\tswitch (labelSide) {\n\t\t\tcase 0: {\n\t\t\t\t// top\n\t\t\t\tx = offsetX\n\t\t\t\ty = -(labelHeight + offsetY)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 1: {\n\t\t\t\t// right\n\t\t\t\tx = -(labelHeight + offsetY)\n\t\t\t\ty = shape.props.h - (offsetX + clampedLabelWidth)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 2: {\n\t\t\t\t// bottom\n\t\t\t\tx = shape.props.w - (offsetX + clampedLabelWidth)\n\t\t\t\ty = shape.props.h + offsetY\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 3: {\n\t\t\t\t// left\n\t\t\t\tx = shape.props.w + offsetY\n\t\t\t\ty = offsetX\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\treturn new Group2d({\n\t\t\tchildren: [\n\t\t\t\tnew Rectangle2d({\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tisFilled: false,\n\t\t\t\t}),\n\t\t\t\tnew Rectangle2d({\n\t\t\t\t\tx,\n\t\t\t\t\ty,\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t\tisFilled: true,\n\t\t\t\t\tisLabel: true,\n\t\t\t\t}),\n\t\t\t],\n\t\t})\n\t}\n\n\toverride getText(shape: TLFrameShape): string | undefined {\n\t\treturn shape.props.name\n\t}\n\n\toverride component(shape: TLFrameShape) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst theme = useDefaultColorTheme()\n\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst isCreating = useValue(\n\t\t\t'is creating this shape',\n\t\t\t() => {\n\t\t\t\tconst resizingState = this.editor.getStateDescendant('select.resizing')\n\t\t\t\tif (!resizingState) return false\n\t\t\t\tif (!resizingState.getIsActive()) return false\n\t\t\t\tconst info = (resizingState as typeof resizingState & { info: { isCreating: boolean } })\n\t\t\t\t\t?.info\n\t\t\t\tif (!info) return false\n\t\t\t\treturn info.isCreating && this.editor.getOnlySelectedShapeId() === shape.id\n\t\t\t},\n\t\t\t[shape.id]\n\t\t)\n\n\t\tconst showFrameColors = this.options.showColors\n\t\tconst colorToUse = showFrameColors ? shape.props.color : 'black'\n\t\tconst frameFill = getColorValue(theme, colorToUse, 'frameFill')\n\t\tconst frameStroke = getColorValue(theme, colorToUse, 'frameStroke')\n\t\tconst frameHeadingStroke = showFrameColors\n\t\t\t? getColorValue(theme, colorToUse, 'frameHeadingStroke')\n\t\t\t: theme.background\n\t\tconst frameHeadingFill = showFrameColors\n\t\t\t? getColorValue(theme, colorToUse, 'frameHeadingFill')\n\t\t\t: theme.background\n\t\tconst frameHeadingText = getColorValue(theme, colorToUse, 'frameText')\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SVGContainer>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tclassName={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}\n\t\t\t\t\t\tfill={frameFill}\n\t\t\t\t\t\tstroke={frameStroke}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: `calc(${shape.props.w}px + 1px / var(--tl-zoom))`,\n\t\t\t\t\t\t\theight: `calc(${shape.props.h}px + 1px / var(--tl-zoom))`,\n\t\t\t\t\t\t\ttransform: `translate(calc(-0.5px / var(--tl-zoom)), calc(-0.5px / var(--tl-zoom)))`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</SVGContainer>\n\t\t\t\t{isCreating ? null : (\n\t\t\t\t\t<FrameHeading\n\t\t\t\t\t\tid={shape.id}\n\t\t\t\t\t\tname={shape.props.name}\n\t\t\t\t\t\tfill={frameHeadingFill}\n\t\t\t\t\t\tstroke={frameHeadingStroke}\n\t\t\t\t\t\tcolor={frameHeadingText}\n\t\t\t\t\t\twidth={shape.props.w}\n\t\t\t\t\t\theight={shape.props.h}\n\t\t\t\t\t\toffsetX={showFrameColors ? -1 : -7}\n\t\t\t\t\t\tshowColors={this.options.showColors}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)\n\t}\n\n\toverride toSvg(shape: TLFrameShape, ctx: SvgExportContext) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: ctx.isDarkMode })\n\n\t\t// rotate right 45 deg\n\t\tconst labelSide = getFrameHeadingSide(this.editor, shape)\n\t\tconst isVertical = labelSide % 2 === 1\n\t\tconst rotatedTopEdgeWidth = isVertical ? shape.props.h : shape.props.w\n\t\tconst labelTranslate = getFrameHeadingTranslation(shape, labelSide, true)\n\n\t\t// Truncate with ellipsis\n\t\tconst opts: TLCreateTextJsxFromSpansOpts = getFrameHeadingOpts(rotatedTopEdgeWidth - 12, true)\n\n\t\tconst frameTitle = defaultEmptyAs(shape.props.name, 'Frame') + String.fromCharCode(8203)\n\t\tconst labelBounds = getFrameHeadingSize(this.editor, shape, opts)\n\t\tconst spans = this.editor.textMeasure.measureTextSpans(frameTitle, opts)\n\t\tconst text = createTextJsxFromSpans(this.editor, spans, opts)\n\n\t\tconst showFrameColors = this.options.showColors\n\t\tconst colorToUse = showFrameColors ? shape.props.color : 'black'\n\t\tconst frameFill = getColorValue(theme, colorToUse, 'frameFill')\n\t\tconst frameStroke = getColorValue(theme, colorToUse, 'frameStroke')\n\t\tconst frameHeadingStroke = showFrameColors\n\t\t\t? getColorValue(theme, colorToUse, 'frameHeadingStroke')\n\t\t\t: theme.background\n\t\tconst frameHeadingFill = showFrameColors\n\t\t\t? getColorValue(theme, colorToUse, 'frameHeadingFill')\n\t\t\t: theme.background\n\t\tconst frameHeadingText = getColorValue(theme, colorToUse, 'frameText')\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<rect\n\t\t\t\t\twidth={shape.props.w}\n\t\t\t\t\theight={shape.props.h}\n\t\t\t\t\tfill={frameFill}\n\t\t\t\t\tstroke={frameStroke}\n\t\t\t\t\tstrokeWidth={1}\n\t\t\t\t\tx={0}\n\t\t\t\t\trx={0}\n\t\t\t\t\try={0}\n\t\t\t\t/>\n\t\t\t\t<g fill={frameHeadingText} transform={labelTranslate}>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tx={labelBounds.x - (showFrameColors ? 0 : 6)}\n\t\t\t\t\t\ty={labelBounds.y - 6}\n\t\t\t\t\t\twidth={Math.min(rotatedTopEdgeWidth, labelBounds.width + 12)}\n\t\t\t\t\t\theight={labelBounds.height}\n\t\t\t\t\t\tfill={frameHeadingFill}\n\t\t\t\t\t\tstroke={frameHeadingStroke}\n\t\t\t\t\t\trx={4}\n\t\t\t\t\t\try={4}\n\t\t\t\t\t/>\n\t\t\t\t\t<g transform={`translate(${showFrameColors ? 8 : 0}, 4)`}>{text}</g>\n\t\t\t\t</g>\n\t\t\t</>\n\t\t)\n\t}\n\n\tindicator(shape: TLFrameShape) {\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\tclassName={`tl-frame-indicator`}\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride getClipPath(shape: TLFrameShape) {\n\t\treturn this.editor.getShapeGeometry(shape.id).vertices\n\t}\n\n\toverride canReceiveNewChildrenOfType(shape: TLShape) {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride onResize(shape: any, info: TLResizeInfo<any>) {\n\t\treturn resizeBox(shape, info)\n\t}\n\n\toverride getInterpolatedProps(\n\t\tstartShape: TLFrameShape,\n\t\tendShape: TLFrameShape,\n\t\tt: number\n\t): TLFrameShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n\n\toverride onDoubleClickEdge(shape: TLFrameShape, info: TLClickEventInfo) {\n\t\tif (info.target !== 'selection') return\n\t\tconst { handle } = info\n\n\t\t// If handle is missing, we can't determine which edge was clicked\n\t\tif (!handle) return\n\n\t\tconst isHorizontalEdge = handle === 'left' || handle === 'right'\n\t\tconst isVerticalEdge = handle === 'top' || handle === 'bottom'\n\n\t\tconst childIds = this.editor.getSortedChildIdsForParent(shape.id)\n\t\tconst children = compact(childIds.map((id) => this.editor.getShape(id)))\n\t\tif (!children.length) return\n\n\t\tconst { dx, dy, w, h } = getFrameChildrenBounds(children, this.editor, { padding: 10 })\n\n\t\tthis.editor.run(() => {\n\t\t\tconst changes: TLShapePartial[] = childIds.map((childId) => {\n\t\t\t\tconst childShape = this.editor.getShape(childId)!\n\t\t\t\treturn {\n\t\t\t\t\tid: childShape.id,\n\t\t\t\t\ttype: childShape.type,\n\t\t\t\t\tx: isHorizontalEdge ? childShape.x + dx : childShape.x,\n\t\t\t\t\ty: isVerticalEdge ? childShape.y + dy : childShape.y,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tthis.editor.updateShapes(changes)\n\t\t})\n\n\t\treturn {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tprops: {\n\t\t\t\tw: isHorizontalEdge ? w : shape.props.w,\n\t\t\t\th: isVerticalEdge ? h : shape.props.h,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride onDoubleClickCorner(shape: TLFrameShape) {\n\t\tfitFrameToContent(this.editor, shape.id, { padding: 10 })\n\t\treturn {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t}\n\t}\n\n\toverride onDragShapesIn(\n\t\tshape: TLFrameShape,\n\t\tdraggingShapes: TLShape[],\n\t\t{ initialParentIds, initialIndices }: TLDragShapesOverInfo\n\t) {\n\t\tconst { editor } = this\n\n\t\tif (draggingShapes.every((s) => s.parentId === shape.id)) return\n\n\t\t// Check to see whether any of the shapes can have their old index restored\n\t\tlet canRestoreOriginalIndices = false\n\t\tconst previousChildren = draggingShapes.filter((s) => shape.id === initialParentIds.get(s.id))\n\n\t\tif (previousChildren.length > 0) {\n\t\t\tconst currentChildren = compact(\n\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t)\n\t\t\tif (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {\n\t\t\t\tcanRestoreOriginalIndices = true\n\t\t\t}\n\t\t}\n\n\t\t// I can't imagine this happening, but if any of the children are the ancestor of the frame, quit here\n\t\tif (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return\n\n\t\t// Reparent the shapes to the new parent\n\t\teditor.reparentShapes(draggingShapes, shape.id)\n\n\t\t// If we can restore the original indices, then do so\n\t\tif (canRestoreOriginalIndices) {\n\t\t\tfor (const shape of previousChildren) {\n\t\t\t\teditor.updateShape({\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tindex: initialIndices.get(shape.id),\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDragShapesOut(\n\t\tshape: TLFrameShape,\n\t\tdraggingShapes: TLShape[],\n\t\tinfo: TLDragShapesOutInfo\n\t): void {\n\t\tconst { editor } = this\n\t\t// When a user drags shapes out of a frame, and if we're not dragging into a new shape, then reparent\n\t\t// the dragging shapes (that are current children of the frame) onto the current page instead\n\t\tif (!info.nextDraggingOverShapeId) {\n\t\t\teditor.reparentShapes(\n\t\t\t\tdraggingShapes.filter(\n\t\t\t\t\t(s) => s.parentId === shape.id && this.canReceiveNewChildrenOfType(s)\n\t\t\t\t),\n\t\t\t\teditor.getCurrentPageId()\n\t\t\t)\n\t\t}\n\t}\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["classNames", "shape"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/shapes/image/ImageShapeUtil.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tEditor,\n\tEllipse2d,\n\tFileHelpers,\n\tGeometry2d,\n\tHTMLContainer,\n\tImage,\n\tMediaHelpers,\n\tRectangle2d,\n\tSvgExportContext,\n\tTLAsset,\n\tTLAssetId,\n\tTLImageShape,\n\tTLImageShapeProps,\n\tTLResizeInfo,\n\tTLShapePartial,\n\tVec,\n\tWeakCache,\n\tfetch,\n\timageShapeMigrations,\n\timageShapeProps,\n\tlerp,\n\tmodulate,\n\tresizeBox,\n\tstructuredClone,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseUniqueSafeId,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { memo, useEffect, useState } from 'react'\nimport { BrokenAssetIcon } from '../shared/BrokenAssetIcon'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { getUncroppedSize } from '../shared/crop'\nimport { useImageOrVideoAsset } from '../shared/useImageOrVideoAsset'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nasync function getDataURIFromURL(url: string): Promise<string> {\n\tconst response = await fetch(url)\n\tconst blob = await response.blob()\n\treturn FileHelpers.blobToDataUrl(blob)\n}\n\nconst imageSvgExportCache = new WeakCache<TLAsset, Promise<string | null>>()\n\n/** @public */\nexport class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {\n\tstatic override type = 'image' as const\n\tstatic override props = imageShapeProps\n\tstatic override migrations = imageShapeMigrations\n\n\toverride isAspectRatioLocked() {\n\t\treturn true\n\t}\n\toverride canCrop() {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLImageShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tplaying: true,\n\t\t\turl: '',\n\t\t\tcrop: null,\n\t\t\tflipX: false,\n\t\t\tflipY: false,\n\t\t\taltText: '',\n\t\t}\n\t}\n\n\toverride getGeometry(shape: TLImageShape): Geometry2d {\n\t\tif (shape.props.crop?.isCircle) {\n\t\t\treturn new Ellipse2d({\n\t\t\t\twidth: shape.props.w,\n\t\t\t\theight: shape.props.h,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\toverride getAriaDescriptor(shape: TLImageShape) {\n\t\treturn shape.props.altText\n\t}\n\n\toverride onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>) {\n\t\tlet resized: TLImageShape = resizeBox(shape, info)\n\t\tconst { flipX, flipY } = info.initialShape.props\n\t\tconst { scaleX, scaleY, mode } = info\n\n\t\tresized = {\n\t\t\t...resized,\n\t\t\tprops: {\n\t\t\t\t...resized.props,\n\t\t\t\tflipX: scaleX < 0 !== flipX,\n\t\t\t\tflipY: scaleY < 0 !== flipY,\n\t\t\t},\n\t\t}\n\t\tif (!shape.props.crop) return resized\n\n\t\tconst flipCropHorizontally =\n\t\t\t// We used the flip horizontally feature\n\t\t\t(mode === 'scale_shape' && scaleX === -1) ||\n\t\t\t// We resized the shape past it's bounds, so it flipped\n\t\t\t(mode === 'resize_bounds' && flipX !== resized.props.flipX)\n\t\tconst flipCropVertically =\n\t\t\t// We used the flip vertically feature\n\t\t\t(mode === 'scale_shape' && scaleY === -1) ||\n\t\t\t// We resized the shape past it's bounds, so it flipped\n\t\t\t(mode === 'resize_bounds' && flipY !== resized.props.flipY)\n\n\t\tconst { topLeft, bottomRight } = shape.props.crop\n\t\tresized.props.crop = {\n\t\t\ttopLeft: {\n\t\t\t\tx: flipCropHorizontally ? 1 - bottomRight.x : topLeft.x,\n\t\t\t\ty: flipCropVertically ? 1 - bottomRight.y : topLeft.y,\n\t\t\t},\n\t\t\tbottomRight: {\n\t\t\t\tx: flipCropHorizontally ? 1 - topLeft.x : bottomRight.x,\n\t\t\t\ty: flipCropVertically ? 1 - topLeft.y : bottomRight.y,\n\t\t\t},\n\t\t\tisCircle: shape.props.crop.isCircle,\n\t\t}\n\t\treturn resized\n\t}\n\n\tcomponent(shape: TLImageShape) {\n\t\treturn <ImageShape shape={shape} />\n\t}\n\n\tindicator(shape: TLImageShape) {\n\t\tconst isCropping = this.editor.getCroppingShapeId() === shape.id\n\t\tif (isCropping) return null\n\n\t\tif (shape.props.crop?.isCircle) {\n\t\t\treturn (\n\t\t\t\t<ellipse\n\t\t\t\t\tcx={toDomPrecision(shape.props.w / 2)}\n\t\t\t\t\tcy={toDomPrecision(shape.props.h / 2)}\n\t\t\t\t\trx={toDomPrecision(shape.props.w / 2)}\n\t\t\t\t\try={toDomPrecision(shape.props.h / 2)}\n\t\t\t\t/>\n\t\t\t)\n\t\t}\n\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLImageShape, ctx: SvgExportContext) {\n\t\tconst props = shape.props\n\t\tif (!props.assetId) return null\n\n\t\tconst asset = this.editor.getAsset(props.assetId)\n\n\t\tif (!asset) return null\n\n\t\tconst { w } = getUncroppedSize(shape.props, props.crop)\n\n\t\tconst src = await imageSvgExportCache.get(asset, async () => {\n\t\t\tlet src = await ctx.resolveAssetUrl(asset.id, w)\n\t\t\tif (!src) return null\n\t\t\tif (\n\t\t\t\tsrc.startsWith('blob:') ||\n\t\t\t\tsrc.startsWith('http') ||\n\t\t\t\tsrc.startsWith('/') ||\n\t\t\t\tsrc.startsWith('./')\n\t\t\t) {\n\t\t\t\t// If it's a remote image, we need to fetch it and convert it to a data URI\n\t\t\t\tsrc = (await getDataURIFromURL(src)) || ''\n\t\t\t}\n\n\t\t\t// If it's animated then we need to get the first frame\n\t\t\tif (getIsAnimated(this.editor, asset.id)) {\n\t\t\t\tconst { promise } = getFirstFrameOfAnimatedImage(src)\n\t\t\t\tsrc = await promise\n\t\t\t}\n\t\t\treturn src\n\t\t})\n\n\t\tif (!src) return null\n\n\t\treturn <SvgImage shape={shape} src={src} />\n\t}\n\n\toverride onDoubleClickEdge(shape: TLImageShape) {\n\t\tconst props = shape.props\n\t\tif (!props) return\n\n\t\tif (this.editor.getCroppingShapeId() !== shape.id) {\n\t\t\treturn\n\t\t}\n\n\t\tconst crop = structuredClone(props.crop) || {\n\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t}\n\n\t\t// The true asset dimensions\n\t\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\n\t\tconst pointDelta = new Vec(crop.topLeft.x * w, crop.topLeft.y * h).rot(shape.rotation)\n\n\t\tconst partial: TLShapePartial<TLImageShape> = {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tx: shape.x - pointDelta.x,\n\t\t\ty: shape.y - pointDelta.y,\n\t\t\tprops: {\n\t\t\t\tcrop: {\n\t\t\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t\t\t},\n\t\t\t\tw,\n\t\t\t\th,\n\t\t\t},\n\t\t}\n\n\t\tthis.editor.updateShapes([partial])\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLImageShape,\n\t\tendShape: TLImageShape,\n\t\tt: number\n\t): TLImageShapeProps {\n\t\tfunction interpolateCrop(\n\t\t\tstartShape: TLImageShape,\n\t\t\tendShape: TLImageShape\n\t\t): TLImageShapeProps['crop'] {\n\t\t\tif (startShape.props.crop === null && endShape.props.crop === null) return null\n\n\t\t\tconst startTL = startShape.props.crop?.topLeft || { x: 0, y: 0 }\n\t\t\tconst startBR = startShape.props.crop?.bottomRight || { x: 1, y: 1 }\n\t\t\tconst endTL = endShape.props.crop?.topLeft || { x: 0, y: 0 }\n\t\t\tconst endBR = endShape.props.crop?.bottomRight || { x: 1, y: 1 }\n\n\t\t\treturn {\n\t\t\t\ttopLeft: { x: lerp(startTL.x, endTL.x, t), y: lerp(startTL.y, endTL.y, t) },\n\t\t\t\tbottomRight: { x: lerp(startBR.x, endBR.x, t), y: lerp(startBR.y, endBR.y, t) },\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t\tcrop: interpolateCrop(startShape, endShape),\n\t\t}\n\t}\n}\n\nconst ImageShape = memo(function ImageShape({ shape }: { shape: TLImageShape }) {\n\tconst editor = useEditor()\n\n\tconst { w } = getUncroppedSize(shape.props, shape.props.crop)\n\tconst { asset, url } = useImageOrVideoAsset({\n\t\tshapeId: shape.id,\n\t\tassetId: shape.props.assetId,\n\t\twidth: w,\n\t})\n\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst [staticFrameSrc, setStaticFrameSrc] = useState('')\n\tconst [loadedUrl, setLoadedUrl] = useState<null | string>(null)\n\tconst isAnimated = asset && getIsAnimated(editor, asset.id)\n\n\tuseEffect(() => {\n\t\tif (url && isAnimated) {\n\t\t\tconst { promise, cancel } = getFirstFrameOfAnimatedImage(url)\n\n\t\t\tpromise.then((dataUrl) => {\n\t\t\t\tsetStaticFrameSrc(dataUrl)\n\t\t\t\tsetLoadedUrl(url)\n\t\t\t})\n\n\t\t\treturn () => {\n\t\t\t\tcancel()\n\t\t\t}\n\t\t}\n\t}, [editor, isAnimated, prefersReducedMotion, url])\n\n\tconst showCropPreview = useValue(\n\t\t'show crop preview',\n\t\t() =>\n\t\t\tshape.id === editor.getOnlySelectedShapeId() &&\n\t\t\teditor.getCroppingShapeId() === shape.id &&\n\t\t\teditor.isIn('select.crop'),\n\t\t[editor, shape.id]\n\t)\n\n\t// We only want to reduce motion for mimeTypes that have motion\n\tconst reduceMotion =\n\t\tprefersReducedMotion && (asset?.props.mimeType?.includes('video') || isAnimated)\n\n\tconst containerStyle = getCroppedContainerStyle(shape)\n\n\tconst nextSrc = url === loadedUrl ? null : url\n\tconst loadedSrc = reduceMotion ? staticFrameSrc : loadedUrl\n\n\t// This logic path is for when it's broken/missing asset.\n\tif (!url && !asset?.props.src) {\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tcolor: 'var(--tl-color-text-3)',\n\t\t\t\t\tbackgroundColor: 'var(--tl-color-low)',\n\t\t\t\t\tborder: '1px solid var(--tl-color-low-border)',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames('tl-image-container', asset && 'tl-image-container-loading')}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t>\n\t\t\t\t\t{asset ? null : <BrokenAssetIcon />}\n\t\t\t\t</div>\n\t\t\t\t{'url' in shape.props && shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\t// We don't set crossOrigin for non-animated images because for Cloudflare we don't currently\n\t// have that set up.\n\tconst crossOrigin = isAnimated ? 'anonymous' : undefined\n\n\treturn (\n\t\t<>\n\t\t\t{showCropPreview && loadedSrc && (\n\t\t\t\t<div style={containerStyle}>\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\tstyle={{ ...getFlipStyle(shape), opacity: 0.1 }}\n\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\tsrc={loadedSrc}\n\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tborderRadius: shape.props.crop?.isCircle ? '50%' : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={classNames('tl-image-container')} style={containerStyle}>\n\t\t\t\t\t{/* We have two images: the currently loaded image, and the next image that\n\t\t\t\t\twe're waiting to load. we keep the loaded image mounted while we're waiting\n\t\t\t\t\tfor the next one by storing the loaded URL in state. We use `key` props with\n\t\t\t\t\tthe src of the image so that when the next image is ready, the previous one will\n\t\t\t\t\tbe unmounted and the next will be shown with the browser having to remount a\n\t\t\t\t\tfresh image and decoded it again from the cache. */}\n\t\t\t\t\t{loadedSrc && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={loadedSrc}\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={getFlipStyle(shape)}\n\t\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\t\tsrc={loadedSrc}\n\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{nextSrc && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={nextSrc}\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={getFlipStyle(shape)}\n\t\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\t\tsrc={nextSrc}\n\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\talt={shape.props.altText}\n\t\t\t\t\t\t\tonLoad={() => setLoadedUrl(nextSrc)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t\t</HTMLContainer>\n\t\t</>\n\t)\n})\n\nfunction getIsAnimated(editor: Editor, assetId: TLAssetId) {\n\tconst asset = assetId ? editor.getAsset(assetId) : undefined\n\n\tif (!asset) return false\n\n\treturn (\n\t\t('mimeType' in asset.props && MediaHelpers.isAnimatedImageType(asset?.props.mimeType)) ||\n\t\t('isAnimated' in asset.props && asset.props.isAnimated)\n\t)\n}\n\n/**\n * When an image is cropped we need to translate the image to show the portion withing the cropped\n * area. We do this by translating the image by the negative of the top left corner of the crop\n * area.\n *\n * @param shape - Shape The image shape for which to get the container style\n * @returns - Styles to apply to the image container\n */\nfunction getCroppedContainerStyle(shape: TLImageShape) {\n\tconst crop = shape.props.crop\n\tconst topLeft = crop?.topLeft\n\tif (!topLeft) {\n\t\treturn {\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t}\n\t}\n\n\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\tconst offsetX = -topLeft.x * w\n\tconst offsetY = -topLeft.y * h\n\treturn {\n\t\ttransform: `translate(${offsetX}px, ${offsetY}px)`,\n\t\twidth: w,\n\t\theight: h,\n\t}\n}\n\nfunction getFlipStyle(shape: TLImageShape, size?: { width: number; height: number }) {\n\tconst { flipX, flipY, crop } = shape.props\n\tif (!flipX && !flipY) return undefined\n\n\tlet cropOffsetX\n\tlet cropOffsetY\n\tif (crop) {\n\t\t// We have to do all this extra math because of the whole transform origin around 0,0\n\t\t// instead of center in SVG-land, ugh.\n\t\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\n\t\t// Find the resulting w/h of the crop in normalized (0-1) coordinates\n\t\tconst cropWidth = crop.bottomRight.x - crop.topLeft.x\n\t\tconst cropHeight = crop.bottomRight.y - crop.topLeft.y\n\n\t\t// Map from the normalized crop coordinate space to shape pixel space\n\t\tcropOffsetX = modulate(crop.topLeft.x, [0, 1 - cropWidth], [0, w - shape.props.w])\n\t\tcropOffsetY = modulate(crop.topLeft.y, [0, 1 - cropHeight], [0, h - shape.props.h])\n\t}\n\n\tconst scale = `scale(${flipX ? -1 : 1}, ${flipY ? -1 : 1})`\n\tconst translate = size\n\t\t? `translate(${(flipX ? size.width : 0) - (cropOffsetX ? cropOffsetX : 0)}px,\n\t\t ${(flipY ? size.height : 0) - (cropOffsetY ? cropOffsetY : 0)}px)`\n\t\t: ''\n\n\treturn {\n\t\ttransform: `${translate} ${scale}`,\n\t\t// in SVG, flipping around the center doesn't work so we use explicit width/height\n\t\ttransformOrigin: size ? '0 0' : 'center center',\n\t}\n}\n\nfunction SvgImage({ shape, src }: { shape: TLImageShape; src: string }) {\n\tconst cropClipId = useUniqueSafeId()\n\tconst containerStyle = getCroppedContainerStyle(shape)\n\tconst crop = shape.props.crop\n\n\tif (containerStyle.transform && crop) {\n\t\tconst { transform: cropTransform, width, height } = containerStyle\n\t\tconst croppedWidth = (crop.bottomRight.x - crop.topLeft.x) * width\n\t\tconst croppedHeight = (crop.bottomRight.y - crop.topLeft.y) * height\n\n\t\tconst points = [\n\t\t\tnew Vec(0, 0),\n\t\t\tnew Vec(croppedWidth, 0),\n\t\t\tnew Vec(croppedWidth, croppedHeight),\n\t\t\tnew Vec(0, croppedHeight),\n\t\t]\n\n\t\tconst flip = getFlipStyle(shape, { width, height })\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<defs>\n\t\t\t\t\t<clipPath id={cropClipId}>\n\t\t\t\t\t\t{crop.isCircle ? (\n\t\t\t\t\t\t\t<ellipse\n\t\t\t\t\t\t\t\tcx={croppedWidth / 2}\n\t\t\t\t\t\t\t\tcy={croppedHeight / 2}\n\t\t\t\t\t\t\t\trx={croppedWidth / 2}\n\t\t\t\t\t\t\t\try={croppedHeight / 2}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<polygon points={points.map((p) => `${p.x},${p.y}`).join(' ')} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</clipPath>\n\t\t\t\t</defs>\n\t\t\t\t<g clipPath={`url(#${cropClipId})`}>\n\t\t\t\t\t<image\n\t\t\t\t\t\thref={src}\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\theight={height}\n\t\t\t\t\t\taria-label={shape.props.altText}\n\t\t\t\t\t\tstyle={flip ? { ...flip } : { transform: cropTransform }}\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t</>\n\t\t)\n\t} else {\n\t\treturn (\n\t\t\t<image\n\t\t\t\thref={src}\n\t\t\t\twidth={shape.props.w}\n\t\t\t\theight={shape.props.h}\n\t\t\t\taria-label={shape.props.altText}\n\t\t\t\tstyle={getFlipStyle(shape, { width: shape.props.w, height: shape.props.h })}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nfunction getFirstFrameOfAnimatedImage(url: string) {\n\tlet cancelled = false\n\n\tconst promise = new Promise<string>((resolve) => {\n\t\tconst image = Image()\n\t\timage.onload = () => {\n\t\t\tif (cancelled) return\n\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = image.width\n\t\t\tcanvas.height = image.height\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tctx.drawImage(image, 0, 0)\n\t\t\tresolve(canvas.toDataURL())\n\t\t}\n\t\timage.crossOrigin = 'anonymous'\n\t\timage.src = url\n\t})\n\n\treturn { promise, cancel: () => (cancelled = true) }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tEditor,\n\tEllipse2d,\n\tFileHelpers,\n\tGeometry2d,\n\tHTMLContainer,\n\tImage,\n\tMediaHelpers,\n\tRectangle2d,\n\tSvgExportContext,\n\tTLAsset,\n\tTLAssetId,\n\tTLImageShape,\n\tTLImageShapeProps,\n\tTLResizeInfo,\n\tTLShapePartial,\n\tVec,\n\tWeakCache,\n\tfetch,\n\timageShapeMigrations,\n\timageShapeProps,\n\tlerp,\n\tmodulate,\n\tresizeBox,\n\tstructuredClone,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseUniqueSafeId,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { memo, useEffect, useState } from 'react'\nimport { BrokenAssetIcon } from '../shared/BrokenAssetIcon'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { getUncroppedSize } from '../shared/crop'\nimport { useImageOrVideoAsset } from '../shared/useImageOrVideoAsset'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nasync function getDataURIFromURL(url: string): Promise<string> {\n\tconst response = await fetch(url)\n\tconst blob = await response.blob()\n\treturn FileHelpers.blobToDataUrl(blob)\n}\n\nconst imageSvgExportCache = new WeakCache<TLAsset, Promise<string | null>>()\n\n/** @public */\nexport class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {\n\tstatic override type = 'image' as const\n\tstatic override props = imageShapeProps\n\tstatic override migrations = imageShapeMigrations\n\n\toverride isAspectRatioLocked() {\n\t\treturn true\n\t}\n\toverride canCrop() {\n\t\treturn true\n\t}\n\toverride isExportBoundsContainer(): boolean {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLImageShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tplaying: true,\n\t\t\turl: '',\n\t\t\tcrop: null,\n\t\t\tflipX: false,\n\t\t\tflipY: false,\n\t\t\taltText: '',\n\t\t}\n\t}\n\n\toverride getGeometry(shape: TLImageShape): Geometry2d {\n\t\tif (shape.props.crop?.isCircle) {\n\t\t\treturn new Ellipse2d({\n\t\t\t\twidth: shape.props.w,\n\t\t\t\theight: shape.props.h,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\toverride getAriaDescriptor(shape: TLImageShape) {\n\t\treturn shape.props.altText\n\t}\n\n\toverride onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>) {\n\t\tlet resized: TLImageShape = resizeBox(shape, info)\n\t\tconst { flipX, flipY } = info.initialShape.props\n\t\tconst { scaleX, scaleY, mode } = info\n\n\t\tresized = {\n\t\t\t...resized,\n\t\t\tprops: {\n\t\t\t\t...resized.props,\n\t\t\t\tflipX: scaleX < 0 !== flipX,\n\t\t\t\tflipY: scaleY < 0 !== flipY,\n\t\t\t},\n\t\t}\n\t\tif (!shape.props.crop) return resized\n\n\t\tconst flipCropHorizontally =\n\t\t\t// We used the flip horizontally feature\n\t\t\t(mode === 'scale_shape' && scaleX === -1) ||\n\t\t\t// We resized the shape past it's bounds, so it flipped\n\t\t\t(mode === 'resize_bounds' && flipX !== resized.props.flipX)\n\t\tconst flipCropVertically =\n\t\t\t// We used the flip vertically feature\n\t\t\t(mode === 'scale_shape' && scaleY === -1) ||\n\t\t\t// We resized the shape past it's bounds, so it flipped\n\t\t\t(mode === 'resize_bounds' && flipY !== resized.props.flipY)\n\n\t\tconst { topLeft, bottomRight } = shape.props.crop\n\t\tresized.props.crop = {\n\t\t\ttopLeft: {\n\t\t\t\tx: flipCropHorizontally ? 1 - bottomRight.x : topLeft.x,\n\t\t\t\ty: flipCropVertically ? 1 - bottomRight.y : topLeft.y,\n\t\t\t},\n\t\t\tbottomRight: {\n\t\t\t\tx: flipCropHorizontally ? 1 - topLeft.x : bottomRight.x,\n\t\t\t\ty: flipCropVertically ? 1 - topLeft.y : bottomRight.y,\n\t\t\t},\n\t\t\tisCircle: shape.props.crop.isCircle,\n\t\t}\n\t\treturn resized\n\t}\n\n\tcomponent(shape: TLImageShape) {\n\t\treturn <ImageShape shape={shape} />\n\t}\n\n\tindicator(shape: TLImageShape) {\n\t\tconst isCropping = this.editor.getCroppingShapeId() === shape.id\n\t\tif (isCropping) return null\n\n\t\tif (shape.props.crop?.isCircle) {\n\t\t\treturn (\n\t\t\t\t<ellipse\n\t\t\t\t\tcx={toDomPrecision(shape.props.w / 2)}\n\t\t\t\t\tcy={toDomPrecision(shape.props.h / 2)}\n\t\t\t\t\trx={toDomPrecision(shape.props.w / 2)}\n\t\t\t\t\try={toDomPrecision(shape.props.h / 2)}\n\t\t\t\t/>\n\t\t\t)\n\t\t}\n\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLImageShape, ctx: SvgExportContext) {\n\t\tconst props = shape.props\n\t\tif (!props.assetId) return null\n\n\t\tconst asset = this.editor.getAsset(props.assetId)\n\n\t\tif (!asset) return null\n\n\t\tconst { w } = getUncroppedSize(shape.props, props.crop)\n\n\t\tconst src = await imageSvgExportCache.get(asset, async () => {\n\t\t\tlet src = await ctx.resolveAssetUrl(asset.id, w)\n\t\t\tif (!src) return null\n\t\t\tif (\n\t\t\t\tsrc.startsWith('blob:') ||\n\t\t\t\tsrc.startsWith('http') ||\n\t\t\t\tsrc.startsWith('/') ||\n\t\t\t\tsrc.startsWith('./')\n\t\t\t) {\n\t\t\t\t// If it's a remote image, we need to fetch it and convert it to a data URI\n\t\t\t\tsrc = (await getDataURIFromURL(src)) || ''\n\t\t\t}\n\n\t\t\t// If it's animated then we need to get the first frame\n\t\t\tif (getIsAnimated(this.editor, asset.id)) {\n\t\t\t\tconst { promise } = getFirstFrameOfAnimatedImage(src)\n\t\t\t\tsrc = await promise\n\t\t\t}\n\t\t\treturn src\n\t\t})\n\n\t\tif (!src) return null\n\n\t\treturn <SvgImage shape={shape} src={src} />\n\t}\n\n\toverride onDoubleClickEdge(shape: TLImageShape) {\n\t\tconst props = shape.props\n\t\tif (!props) return\n\n\t\tif (this.editor.getCroppingShapeId() !== shape.id) {\n\t\t\treturn\n\t\t}\n\n\t\tconst crop = structuredClone(props.crop) || {\n\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t}\n\n\t\t// The true asset dimensions\n\t\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\n\t\tconst pointDelta = new Vec(crop.topLeft.x * w, crop.topLeft.y * h).rot(shape.rotation)\n\n\t\tconst partial: TLShapePartial<TLImageShape> = {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tx: shape.x - pointDelta.x,\n\t\t\ty: shape.y - pointDelta.y,\n\t\t\tprops: {\n\t\t\t\tcrop: {\n\t\t\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t\t\t},\n\t\t\t\tw,\n\t\t\t\th,\n\t\t\t},\n\t\t}\n\n\t\tthis.editor.updateShapes([partial])\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLImageShape,\n\t\tendShape: TLImageShape,\n\t\tt: number\n\t): TLImageShapeProps {\n\t\tfunction interpolateCrop(\n\t\t\tstartShape: TLImageShape,\n\t\t\tendShape: TLImageShape\n\t\t): TLImageShapeProps['crop'] {\n\t\t\tif (startShape.props.crop === null && endShape.props.crop === null) return null\n\n\t\t\tconst startTL = startShape.props.crop?.topLeft || { x: 0, y: 0 }\n\t\t\tconst startBR = startShape.props.crop?.bottomRight || { x: 1, y: 1 }\n\t\t\tconst endTL = endShape.props.crop?.topLeft || { x: 0, y: 0 }\n\t\t\tconst endBR = endShape.props.crop?.bottomRight || { x: 1, y: 1 }\n\n\t\t\treturn {\n\t\t\t\ttopLeft: { x: lerp(startTL.x, endTL.x, t), y: lerp(startTL.y, endTL.y, t) },\n\t\t\t\tbottomRight: { x: lerp(startBR.x, endBR.x, t), y: lerp(startBR.y, endBR.y, t) },\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t\tcrop: interpolateCrop(startShape, endShape),\n\t\t}\n\t}\n}\n\nconst ImageShape = memo(function ImageShape({ shape }: { shape: TLImageShape }) {\n\tconst editor = useEditor()\n\n\tconst { w } = getUncroppedSize(shape.props, shape.props.crop)\n\tconst { asset, url } = useImageOrVideoAsset({\n\t\tshapeId: shape.id,\n\t\tassetId: shape.props.assetId,\n\t\twidth: w,\n\t})\n\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst [staticFrameSrc, setStaticFrameSrc] = useState('')\n\tconst [loadedUrl, setLoadedUrl] = useState<null | string>(null)\n\tconst isAnimated = asset && getIsAnimated(editor, asset.id)\n\n\tuseEffect(() => {\n\t\tif (url && isAnimated) {\n\t\t\tconst { promise, cancel } = getFirstFrameOfAnimatedImage(url)\n\n\t\t\tpromise.then((dataUrl) => {\n\t\t\t\tsetStaticFrameSrc(dataUrl)\n\t\t\t\tsetLoadedUrl(url)\n\t\t\t})\n\n\t\t\treturn () => {\n\t\t\t\tcancel()\n\t\t\t}\n\t\t}\n\t}, [editor, isAnimated, prefersReducedMotion, url])\n\n\tconst showCropPreview = useValue(\n\t\t'show crop preview',\n\t\t() =>\n\t\t\tshape.id === editor.getOnlySelectedShapeId() &&\n\t\t\teditor.getCroppingShapeId() === shape.id &&\n\t\t\teditor.isIn('select.crop'),\n\t\t[editor, shape.id]\n\t)\n\n\t// We only want to reduce motion for mimeTypes that have motion\n\tconst reduceMotion =\n\t\tprefersReducedMotion && (asset?.props.mimeType?.includes('video') || isAnimated)\n\n\tconst containerStyle = getCroppedContainerStyle(shape)\n\n\tconst nextSrc = url === loadedUrl ? null : url\n\tconst loadedSrc = reduceMotion ? staticFrameSrc : loadedUrl\n\n\t// This logic path is for when it's broken/missing asset.\n\tif (!url && !asset?.props.src) {\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tcolor: 'var(--tl-color-text-3)',\n\t\t\t\t\tbackgroundColor: 'var(--tl-color-low)',\n\t\t\t\t\tborder: '1px solid var(--tl-color-low-border)',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames('tl-image-container', asset && 'tl-image-container-loading')}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t>\n\t\t\t\t\t{asset ? null : <BrokenAssetIcon />}\n\t\t\t\t</div>\n\t\t\t\t{'url' in shape.props && shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\t// We don't set crossOrigin for non-animated images because for Cloudflare we don't currently\n\t// have that set up.\n\tconst crossOrigin = isAnimated ? 'anonymous' : undefined\n\n\treturn (\n\t\t<>\n\t\t\t{showCropPreview && loadedSrc && (\n\t\t\t\t<div style={containerStyle}>\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\tstyle={{ ...getFlipStyle(shape), opacity: 0.1 }}\n\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\tsrc={loadedSrc}\n\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tborderRadius: shape.props.crop?.isCircle ? '50%' : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={classNames('tl-image-container')} style={containerStyle}>\n\t\t\t\t\t{/* We have two images: the currently loaded image, and the next image that\n\t\t\t\t\twe're waiting to load. we keep the loaded image mounted while we're waiting\n\t\t\t\t\tfor the next one by storing the loaded URL in state. We use `key` props with\n\t\t\t\t\tthe src of the image so that when the next image is ready, the previous one will\n\t\t\t\t\tbe unmounted and the next will be shown with the browser having to remount a\n\t\t\t\t\tfresh image and decoded it again from the cache. */}\n\t\t\t\t\t{loadedSrc && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={loadedSrc}\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={getFlipStyle(shape)}\n\t\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\t\tsrc={loadedSrc}\n\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{nextSrc && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={nextSrc}\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={getFlipStyle(shape)}\n\t\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\t\tsrc={nextSrc}\n\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\talt={shape.props.altText}\n\t\t\t\t\t\t\tonLoad={() => setLoadedUrl(nextSrc)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t\t</HTMLContainer>\n\t\t</>\n\t)\n})\n\nfunction getIsAnimated(editor: Editor, assetId: TLAssetId) {\n\tconst asset = assetId ? editor.getAsset(assetId) : undefined\n\n\tif (!asset) return false\n\n\treturn (\n\t\t('mimeType' in asset.props && MediaHelpers.isAnimatedImageType(asset?.props.mimeType)) ||\n\t\t('isAnimated' in asset.props && asset.props.isAnimated)\n\t)\n}\n\n/**\n * When an image is cropped we need to translate the image to show the portion withing the cropped\n * area. We do this by translating the image by the negative of the top left corner of the crop\n * area.\n *\n * @param shape - Shape The image shape for which to get the container style\n * @returns - Styles to apply to the image container\n */\nfunction getCroppedContainerStyle(shape: TLImageShape) {\n\tconst crop = shape.props.crop\n\tconst topLeft = crop?.topLeft\n\tif (!topLeft) {\n\t\treturn {\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t}\n\t}\n\n\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\tconst offsetX = -topLeft.x * w\n\tconst offsetY = -topLeft.y * h\n\treturn {\n\t\ttransform: `translate(${offsetX}px, ${offsetY}px)`,\n\t\twidth: w,\n\t\theight: h,\n\t}\n}\n\nfunction getFlipStyle(shape: TLImageShape, size?: { width: number; height: number }) {\n\tconst { flipX, flipY, crop } = shape.props\n\tif (!flipX && !flipY) return undefined\n\n\tlet cropOffsetX\n\tlet cropOffsetY\n\tif (crop) {\n\t\t// We have to do all this extra math because of the whole transform origin around 0,0\n\t\t// instead of center in SVG-land, ugh.\n\t\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\n\t\t// Find the resulting w/h of the crop in normalized (0-1) coordinates\n\t\tconst cropWidth = crop.bottomRight.x - crop.topLeft.x\n\t\tconst cropHeight = crop.bottomRight.y - crop.topLeft.y\n\n\t\t// Map from the normalized crop coordinate space to shape pixel space\n\t\tcropOffsetX = modulate(crop.topLeft.x, [0, 1 - cropWidth], [0, w - shape.props.w])\n\t\tcropOffsetY = modulate(crop.topLeft.y, [0, 1 - cropHeight], [0, h - shape.props.h])\n\t}\n\n\tconst scale = `scale(${flipX ? -1 : 1}, ${flipY ? -1 : 1})`\n\tconst translate = size\n\t\t? `translate(${(flipX ? size.width : 0) - (cropOffsetX ? cropOffsetX : 0)}px,\n\t\t ${(flipY ? size.height : 0) - (cropOffsetY ? cropOffsetY : 0)}px)`\n\t\t: ''\n\n\treturn {\n\t\ttransform: `${translate} ${scale}`,\n\t\t// in SVG, flipping around the center doesn't work so we use explicit width/height\n\t\ttransformOrigin: size ? '0 0' : 'center center',\n\t}\n}\n\nfunction SvgImage({ shape, src }: { shape: TLImageShape; src: string }) {\n\tconst cropClipId = useUniqueSafeId()\n\tconst containerStyle = getCroppedContainerStyle(shape)\n\tconst crop = shape.props.crop\n\n\tif (containerStyle.transform && crop) {\n\t\tconst { transform: cropTransform, width, height } = containerStyle\n\t\tconst croppedWidth = (crop.bottomRight.x - crop.topLeft.x) * width\n\t\tconst croppedHeight = (crop.bottomRight.y - crop.topLeft.y) * height\n\n\t\tconst points = [\n\t\t\tnew Vec(0, 0),\n\t\t\tnew Vec(croppedWidth, 0),\n\t\t\tnew Vec(croppedWidth, croppedHeight),\n\t\t\tnew Vec(0, croppedHeight),\n\t\t]\n\n\t\tconst flip = getFlipStyle(shape, { width, height })\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<defs>\n\t\t\t\t\t<clipPath id={cropClipId}>\n\t\t\t\t\t\t{crop.isCircle ? (\n\t\t\t\t\t\t\t<ellipse\n\t\t\t\t\t\t\t\tcx={croppedWidth / 2}\n\t\t\t\t\t\t\t\tcy={croppedHeight / 2}\n\t\t\t\t\t\t\t\trx={croppedWidth / 2}\n\t\t\t\t\t\t\t\try={croppedHeight / 2}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<polygon points={points.map((p) => `${p.x},${p.y}`).join(' ')} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</clipPath>\n\t\t\t\t</defs>\n\t\t\t\t<g clipPath={`url(#${cropClipId})`}>\n\t\t\t\t\t<image\n\t\t\t\t\t\thref={src}\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\theight={height}\n\t\t\t\t\t\taria-label={shape.props.altText}\n\t\t\t\t\t\tstyle={flip ? { ...flip } : { transform: cropTransform }}\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t</>\n\t\t)\n\t} else {\n\t\treturn (\n\t\t\t<image\n\t\t\t\thref={src}\n\t\t\t\twidth={shape.props.w}\n\t\t\t\theight={shape.props.h}\n\t\t\t\taria-label={shape.props.altText}\n\t\t\t\tstyle={getFlipStyle(shape, { width: shape.props.w, height: shape.props.h })}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nfunction getFirstFrameOfAnimatedImage(url: string) {\n\tlet cancelled = false\n\n\tconst promise = new Promise<string>((resolve) => {\n\t\tconst image = Image()\n\t\timage.onload = () => {\n\t\t\tif (cancelled) return\n\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = image.width\n\t\t\tcanvas.height = image.height\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tctx.drawImage(image, 0, 0)\n\t\t\tresolve(canvas.toDataURL())\n\t\t}\n\t\timage.crossOrigin = 'anonymous'\n\t\timage.src = url\n\t})\n\n\treturn { promise, cancel: () => (cancelled = true) }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["src", "startShape", "endShape", "ImageShape", "classNames"]
|
|
7
7
|
}
|