tldraw 3.16.0-internal.a478398270c6 → 3.16.0-next.15f085081fd5
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 +316 -23
- package/dist-cjs/index.js +34 -2
- 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/TldrawImage.js +5 -2
- package/dist-cjs/lib/TldrawImage.js.map +3 -3
- package/dist-cjs/lib/canvas/TldrawCropHandles.js +1 -1
- package/dist-cjs/lib/canvas/TldrawCropHandles.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawHandles.js +1 -1
- package/dist-cjs/lib/canvas/TldrawHandles.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawOverlays.js +1 -1
- package/dist-cjs/lib/canvas/TldrawOverlays.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawScribble.js +1 -1
- package/dist-cjs/lib/canvas/TldrawScribble.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawSelectionForeground.js +279 -271
- package/dist-cjs/lib/canvas/TldrawSelectionForeground.js.map +2 -2
- package/dist-cjs/lib/defaultExternalContentHandlers.js +6 -4
- package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +27 -44
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/arrowLabel.js +16 -4
- package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/arrowTargetState.js +1 -1
- package/dist-cjs/lib/shapes/arrow/arrowTargetState.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js +3 -3
- package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map +1 -1
- package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js +3 -0
- package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js.map +2 -2
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +3 -6
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +20 -17
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
- package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +2 -2
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js +2 -1
- package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js.map +2 -2
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +5 -4
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +6 -3
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js +20 -5
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +6 -5
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/PathBuilder.js +21 -3
- package/dist-cjs/lib/shapes/shared/PathBuilder.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -0
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/RichTextLabel.js +5 -2
- package/dist-cjs/lib/shapes/shared/RichTextLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/ShapeFill.js +4 -4
- package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/SvgTextLabel.js +4 -3
- package/dist-cjs/lib/shapes/shared/SvgTextLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js +10 -1
- package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js.map +2 -2
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js +7 -13
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +1 -1
- package/dist-cjs/lib/styles.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/tools/SelectTool/childStates/Crop/children/PointingCrop.js +7 -1
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +43 -22
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js +2 -15
- package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingShape.js +5 -0
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingShape.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js +8 -0
- package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js +8 -0
- package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js +8 -0
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map +2 -2
- package/dist-cjs/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.js.map +2 -2
- package/dist-cjs/lib/ui/TldrawUi.js +27 -12
- package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
- package/dist-cjs/lib/ui/components/A11y.js +14 -12
- package/dist-cjs/lib/ui/components/A11y.js.map +2 -2
- package/dist-cjs/lib/ui/components/AccessibilityMenu.js +35 -0
- package/dist-cjs/lib/ui/components/AccessibilityMenu.js.map +7 -0
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js +12 -3
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.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/DefaultMenuPanel.js +3 -2
- package/dist-cjs/lib/ui/components/DefaultMenuPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +57 -7
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js +3 -2
- package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
- package/dist-cjs/lib/ui/components/MobileStylePanel.js +5 -3
- package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +4 -5
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +2 -1
- package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js +3 -2
- package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/Spinner.js +2 -25
- package/dist-cjs/lib/ui/components/Spinner.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +2 -0
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +171 -139
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js +3 -3
- package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +26 -25
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbar.js +21 -7
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +1 -1
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js +66 -21
- package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +189 -80
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +5 -4
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
- package/dist-cjs/lib/ui/components/menu-items.js +22 -0
- package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/Button/TldrawUiButtonIcon.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +7 -16
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +3 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +1 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js +1 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js +35 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js +3 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.map +3 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +6 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +31 -7
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +262 -0
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +7 -0
- package/dist-cjs/lib/ui/components/primitives/layout.js +76 -0
- package/dist-cjs/lib/ui/components/primitives/layout.js.map +7 -0
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuContext.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +25 -12
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +154 -22
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js +3 -2
- package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js +72 -9
- 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 +2 -2
- package/dist-cjs/lib/ui/hooks/menu-hooks.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js +2 -2
- package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js +94 -9
- 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 +12 -0
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
- package/dist-cjs/lib/ui/kbd-utils.js +11 -4
- package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js +1 -1
- package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js.map +2 -2
- package/dist-cjs/lib/utils/tldr/buildFromV1Document.js +3 -2
- package/dist-cjs/lib/utils/tldr/buildFromV1Document.js.map +2 -2
- package/dist-esm/index.d.mts +316 -23
- package/dist-esm/index.mjs +57 -5
- 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/TldrawImage.mjs +5 -2
- package/dist-esm/lib/TldrawImage.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawCropHandles.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawCropHandles.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawHandles.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawHandles.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawOverlays.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawOverlays.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawScribble.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawScribble.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs +279 -271
- package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs.map +2 -2
- package/dist-esm/lib/defaultExternalContentHandlers.mjs +6 -4
- package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs +30 -44
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +19 -5
- package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs +1 -1
- package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs +3 -3
- package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs.map +1 -1
- package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs +3 -0
- package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs.map +2 -2
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs +4 -6
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs +1 -1
- package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +1 -1
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +21 -17
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs +1 -1
- package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs.map +2 -2
- package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +3 -2
- package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs +2 -1
- package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs.map +2 -2
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +6 -4
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +6 -3
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/line/LineShapeUtil.mjs +21 -5
- package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +7 -5
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/PathBuilder.mjs +22 -3
- package/dist-esm/lib/shapes/shared/PathBuilder.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -0
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/RichTextLabel.mjs +5 -2
- package/dist-esm/lib/shapes/shared/RichTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs +5 -4
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/SvgTextLabel.mjs +4 -3
- package/dist-esm/lib/shapes/shared/SvgTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs +10 -1
- package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs.map +2 -2
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +8 -13
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +3 -3
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +1 -1
- package/dist-esm/lib/styles.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/tools/SelectTool/childStates/Crop/children/PointingCrop.mjs +7 -1
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +43 -22
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs +2 -15
- package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/PointingShape.mjs +5 -0
- package/dist-esm/lib/tools/SelectTool/childStates/PointingShape.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs +8 -0
- package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs +8 -0
- package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs +8 -0
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
- package/dist-esm/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.mjs.map +2 -2
- package/dist-esm/lib/ui/TldrawUi.mjs +29 -14
- package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
- package/dist-esm/lib/ui/components/A11y.mjs +14 -12
- package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
- package/dist-esm/lib/ui/components/AccessibilityMenu.mjs +19 -0
- package/dist-esm/lib/ui/components/AccessibilityMenu.mjs.map +7 -0
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs +12 -3
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.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/DefaultMenuPanel.mjs +3 -2
- package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +57 -7
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs +3 -3
- package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs +6 -3
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +4 -5
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +2 -1
- package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs +3 -2
- package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs +2 -2
- package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Spinner.mjs +3 -26
- package/dist-esm/lib/ui/components/Spinner.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +3 -1
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +171 -139
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs +3 -3
- package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +26 -25
- package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbar.mjs +23 -9
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbar.mjs.map +3 -3
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +1 -1
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs +56 -21
- package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +192 -81
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +3 -3
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +5 -4
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
- package/dist-esm/lib/ui/components/menu-items.mjs +22 -0
- package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/Button/TldrawUiButtonIcon.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +8 -6
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +1 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs +1 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs +36 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs +3 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +6 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +31 -7
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +239 -0
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +7 -0
- package/dist-esm/lib/ui/components/primitives/layout.mjs +46 -0
- package/dist-esm/lib/ui/components/primitives/layout.mjs.map +7 -0
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuContext.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +25 -12
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +162 -24
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs +3 -2
- package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs +72 -9
- 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 +2 -2
- package/dist-esm/lib/ui/hooks/menu-hooks.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs +2 -2
- package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs +102 -10
- package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +12 -0
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
- package/dist-esm/lib/ui/kbd-utils.mjs +11 -4
- package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs +1 -1
- package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs.map +2 -2
- package/dist-esm/lib/utils/tldr/buildFromV1Document.mjs +3 -2
- package/dist-esm/lib/utils/tldr/buildFromV1Document.mjs.map +2 -2
- package/package.json +12 -34
- package/src/index.ts +42 -3
- package/src/lib/Tldraw.tsx +15 -2
- package/src/lib/TldrawImage.tsx +6 -2
- package/src/lib/canvas/TldrawCropHandles.tsx +3 -1
- package/src/lib/canvas/TldrawHandles.tsx +5 -1
- package/src/lib/canvas/TldrawOverlays.tsx +1 -1
- package/src/lib/canvas/TldrawScribble.tsx +1 -1
- package/src/lib/canvas/TldrawSelectionForeground.tsx +5 -1
- package/src/lib/defaultExternalContentHandlers.ts +14 -5
- 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 +12 -11
- package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +30 -46
- package/src/lib/shapes/arrow/arrowLabel.ts +23 -3
- package/src/lib/shapes/arrow/arrowTargetState.ts +2 -1
- package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
- package/src/lib/shapes/arrow/toolStates/Pointing.tsx +3 -0
- package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
- package/src/lib/shapes/draw/DrawShapeUtil.tsx +4 -7
- package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +30 -21
- package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
- package/src/lib/shapes/geo/GeoShapeUtil.tsx +3 -2
- package/src/lib/shapes/geo/components/GeoShapeBody.tsx +2 -2
- package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +7 -4
- package/src/lib/shapes/image/ImageShapeUtil.tsx +6 -3
- package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
- package/src/lib/shapes/line/LineShapeUtil.tsx +25 -6
- package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
- package/src/lib/shapes/note/NoteShapeUtil.tsx +10 -4
- package/src/lib/shapes/shared/PathBuilder.test.tsx +1 -1
- package/src/lib/shapes/shared/PathBuilder.tsx +35 -1
- package/src/lib/shapes/shared/PlainTextLabel.tsx +1 -0
- package/src/lib/shapes/shared/RichTextLabel.tsx +4 -0
- package/src/lib/shapes/shared/ShapeFill.tsx +5 -4
- package/src/lib/shapes/shared/SvgTextLabel.tsx +4 -2
- package/src/lib/shapes/shared/freehand/svg.ts +2 -0
- package/src/lib/shapes/shared/usePrefersReducedMotion.tsx +11 -1
- package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
- package/src/lib/shapes/text/TextShapeUtil.tsx +8 -14
- package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
- package/src/lib/styles.tsx +3 -1
- package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
- package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
- package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.ts +8 -1
- package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +54 -30
- package/src/lib/tools/SelectTool/childStates/Idle.ts +2 -24
- package/src/lib/tools/SelectTool/childStates/PointingShape.ts +7 -0
- package/src/lib/tools/SelectTool/childStates/Resizing.ts +12 -1
- package/src/lib/tools/SelectTool/childStates/Rotating.ts +11 -0
- package/src/lib/tools/SelectTool/childStates/Translating.ts +11 -1
- package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts +1 -0
- package/src/lib/ui/TldrawUi.tsx +33 -12
- package/src/lib/ui/components/A11y.tsx +15 -13
- package/src/lib/ui/components/AccessibilityMenu.tsx +20 -0
- package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +15 -3
- package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
- package/src/lib/ui/components/DefaultMenuPanel.tsx +4 -3
- package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +46 -6
- package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx +4 -2
- package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
- package/src/lib/ui/components/MobileStylePanel.tsx +9 -6
- package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +4 -5
- package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +3 -2
- package/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx +4 -3
- package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx +3 -3
- package/src/lib/ui/components/Spinner.tsx +2 -24
- package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +3 -1
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +146 -106
- package/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx +3 -3
- package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +7 -6
- package/src/lib/ui/components/Toolbar/DefaultImageToolbar.tsx +25 -9
- package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
- package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +55 -23
- package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +212 -61
- package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +17 -12
- package/src/lib/ui/components/menu-items.tsx +25 -0
- package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx +2 -2
- package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +40 -35
- package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiDialog.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiIcon.tsx +41 -3
- package/src/lib/ui/components/primitives/TldrawUiPopover.tsx +4 -2
- package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +6 -1
- package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +56 -12
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +325 -0
- package/src/lib/ui/components/primitives/layout.tsx +107 -0
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +2 -2
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +29 -16
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +224 -23
- package/src/lib/ui/context/TldrawUiContextProvider.tsx +23 -20
- package/src/lib/ui/context/actions.tsx +74 -10
- package/src/lib/ui/context/components.tsx +3 -0
- package/src/lib/ui/context/events.tsx +6 -2
- package/src/lib/ui/hooks/menu-hooks.ts +1 -0
- package/src/lib/ui/hooks/useKeyboardShortcuts.ts +3 -2
- package/src/lib/ui/hooks/useTools.tsx +142 -11
- package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +12 -0
- package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +12 -0
- package/src/lib/ui/kbd-utils.ts +12 -4
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +417 -314
- package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +21 -7
- package/src/lib/utils/excalidraw/putExcalidrawContent.ts +1 -1
- package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +28 -7
- package/src/lib/utils/tldr/buildFromV1Document.ts +2 -1
- package/src/test/A11y.test.tsx +3 -2
- package/src/test/ClickManager.test.ts +7 -6
- package/src/test/Editor.test.tsx +21 -20
- 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 +40 -13
- 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 +17 -10
- 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/deletePage.test.ts +84 -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/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 +2 -2
- package/src/test/handleDeepLink.test.tsx +2 -1
- package/src/test/inner-outer-margin.test.ts +315 -0
- package/src/test/maxShapes.test.ts +3 -2
- package/src/test/modifiers.test.ts +5 -4
- package/src/test/navigation.test.ts +264 -9
- 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 +398 -48
- package/src/test/translating.test.ts +10 -9
- package/tldraw.css +737 -627
- package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
- package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
|
@@ -91,6 +91,14 @@ class Resizing extends import_editor.StateNode {
|
|
|
91
91
|
this.cancel();
|
|
92
92
|
}
|
|
93
93
|
cancel() {
|
|
94
|
+
const { shapeSnapshots } = this.snapshot;
|
|
95
|
+
shapeSnapshots.forEach(({ shape }) => {
|
|
96
|
+
const current = this.editor.getShape(shape.id);
|
|
97
|
+
if (current) {
|
|
98
|
+
const util = this.editor.getShapeUtil(shape);
|
|
99
|
+
util.onResizeCancel?.(shape, current);
|
|
100
|
+
}
|
|
101
|
+
});
|
|
94
102
|
this.editor.bailToMark(this.markId);
|
|
95
103
|
if (this.info.onInteractionEnd) {
|
|
96
104
|
this.editor.setCurrentTool(this.info.onInteractionEnd, {});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/tools/SelectTool/childStates/Resizing.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n\tBox,\n\tHALF_PI,\n\tMat,\n\tPI,\n\tPI2,\n\tSelectionCorner,\n\tSelectionEdge,\n\tStateNode,\n\tTLFrameShape,\n\tTLPointerEventInfo,\n\tTLShape,\n\tTLShapeId,\n\tTLShapePartial,\n\tTLTextShape,\n\tTLTickEventInfo,\n\tVec,\n\tVecLike,\n\tareAnglesCompatible,\n\tcompact,\n\tisAccelKey,\n\tkickoutOccludedShapes,\n} from '@tldraw/editor'\n\nexport type ResizingInfo = TLPointerEventInfo & {\n\ttarget: 'selection'\n\thandle: SelectionEdge | SelectionCorner\n\tisCreating?: boolean\n\tcreatingMarkId?: string\n\tonCreate?(shape: TLShape | null): void\n\tcreationCursorOffset?: VecLike\n\tonInteractionEnd?: string\n}\n\nexport class Resizing extends StateNode {\n\tstatic override id = 'resizing'\n\n\tinfo = {} as ResizingInfo\n\n\tmarkId = ''\n\n\t// A switch to detect when the user is holding ctrl\n\tprivate didHoldCommand = false\n\n\t// we transition into the resizing state from the geo pointing state, which starts with a shape of size w: 1, h: 1,\n\t// so if the user drags x: +50, y: +50 after mouseDown, the shape will be w: 51, h: 51, which is too many pixels, alas\n\t// so we allow passing a further offset into this state to negate such issues\n\tcreationCursorOffset = { x: 0, y: 0 } as VecLike\n\n\tprivate snapshot = {} as any as Snapshot\n\n\toverride onEnter(info: ResizingInfo) {\n\t\tconst { isCreating = false, creatingMarkId, creationCursorOffset = { x: 0, y: 0 } } = info\n\n\t\tthis.info = info\n\t\tthis.didHoldCommand = false\n\n\t\tthis.parent.setCurrentToolIdMask(info.onInteractionEnd)\n\t\tthis.creationCursorOffset = creationCursorOffset\n\n\t\ttry {\n\t\t\t// On rare and mysterious occasions, the user can enter the resizing state with no shapes selected\n\t\t\tthis.snapshot = this._createSnapshot()\n\t\t} catch (e) {\n\t\t\tconsole.error(e)\n\t\t\tthis.cancel()\n\t\t\treturn\n\t\t}\n\n\t\tthis.markId = ''\n\n\t\tif (isCreating) {\n\t\t\tif (creatingMarkId) {\n\t\t\t\tthis.markId = creatingMarkId\n\t\t\t} else {\n\t\t\t\t// handle legacy implicit `creating:{shapeId}` marks\n\t\t\t\tconst markId = this.editor.getMarkIdMatching(\n\t\t\t\t\t`creating:${this.editor.getOnlySelectedShapeId()}`\n\t\t\t\t)\n\t\t\t\tif (markId) {\n\t\t\t\t\tthis.markId = markId\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthis.markId = this.editor.markHistoryStoppingPoint('starting resizing')\n\t\t}\n\n\t\tif (isCreating) {\n\t\t\tthis.editor.setCursor({ type: 'cross', rotation: 0 })\n\t\t}\n\n\t\tthis.handleResizeStart()\n\t\tthis.updateShapes()\n\t}\n\n\toverride onTick({ elapsed }: TLTickEventInfo) {\n\t\tconst { editor } = this\n\t\teditor.edgeScrollManager.updateEdgeScrolling(elapsed)\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyDown() {\n\t\tthis.updateShapes()\n\t}\n\toverride onKeyUp() {\n\t\tthis.updateShapes()\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\tprivate cancel() {\n\t\t// Restore initial models\n\t\tthis.editor.bailToMark(this.markId)\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd, {})\n\t\t} else {\n\t\t\tthis.parent.transition('idle')\n\t\t}\n\t}\n\n\tprivate complete() {\n\t\tkickoutOccludedShapes(this.editor, this.snapshot.selectedShapeIds)\n\n\t\tthis.handleResizeEnd()\n\n\t\tif (this.info.isCreating && this.info.onCreate) {\n\t\t\tthis.info.onCreate?.(this.editor.getOnlySelectedShape())\n\t\t\treturn\n\t\t}\n\n\t\tif (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd, {})\n\t\t\treturn\n\t\t}\n\n\t\tthis.parent.transition('idle')\n\t}\n\n\tprivate handleResizeStart() {\n\t\tconst { shapeSnapshots } = this.snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tshapeSnapshots.forEach(({ shape }) => {\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onResizeStart?.(shape)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\tprivate handleResizeEnd() {\n\t\tconst { shapeSnapshots } = this.snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tshapeSnapshots.forEach(({ shape }) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onResizeEnd?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\tprivate updateShapes() {\n\t\tconst { altKey, shiftKey } = this.editor.inputs\n\t\tconst {\n\t\t\tframes,\n\t\t\tshapeSnapshots,\n\t\t\tselectionBounds,\n\t\t\tcursorHandleOffset,\n\t\t\tselectedShapeIds,\n\t\t\tselectionRotation,\n\t\t\tcanShapesDeform,\n\t\t} = this.snapshot\n\n\t\tlet isAspectRatioLocked = shiftKey || !canShapesDeform\n\n\t\tif (shapeSnapshots.size === 1) {\n\t\t\tconst onlySnapshot = [...shapeSnapshots.values()][0]!\n\t\t\tif (this.editor.isShapeOfType<TLTextShape>(onlySnapshot.shape, 'text')) {\n\t\t\t\tisAspectRatioLocked = !(this.info.handle === 'left' || this.info.handle === 'right')\n\t\t\t}\n\t\t}\n\n\t\t// first negate the 'cursor handle offset'\n\t\t// we need to do this because we do grid snapping based on the page point of the handle\n\t\t// rather than the page point of the cursor, so it's easier to pretend that the cursor\n\t\t// is really where the handle actually is\n\t\t//\n\t\t// *** Massively zoomed-in diagram of the initial mouseDown ***\n\t\t//\n\t\t//\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502corner handle\n\t\t// \u250C\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2510\n\t\t// selection \u2502 \u2502\n\t\t// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 x\u25C4\u2500\u2500\u253C\u2500\u2500\u2500\u2500 drag handle point \u25B2\n\t\t// \u2502 \u2502 \u2502\n\t\t// \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u251C\u2500 cursorHandleOffset.y\n\t\t// \u2502\n\t\t// originPagePoint\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25BAx\u2500\u2510 \u25BC\n\t\t// \u2502 \u2514\u2500\u2510\n\t\t// \u2502 \u2514\u2500\u2510\n\t\t// \u2502 \u2502 mouse (sorry)\n\t\t// \u2514\u2500\u2500\u2510 \u250C\u2518\n\t\t// \u2502 \u2502\n\t\t// \u2514\u2500\u2518\n\t\t// \u25C4\u2500\u2500\u252C\u2500\u2500\u25BA\n\t\t// \u2502\n\t\t// cursorHandleOffset.x\n\n\t\tconst isHoldingAccel = isAccelKey(this.editor.inputs)\n\n\t\tconst currentPagePoint = this.editor.inputs.currentPagePoint\n\t\t\t.clone()\n\t\t\t.sub(cursorHandleOffset)\n\t\t\t.sub(this.creationCursorOffset)\n\n\t\tconst originPagePoint = this.editor.inputs.originPagePoint.clone().sub(cursorHandleOffset)\n\n\t\tif (this.editor.getInstanceState().isGridMode && !isHoldingAccel) {\n\t\t\tconst { gridSize } = this.editor.getDocumentSettings()\n\t\t\tcurrentPagePoint.snapToGrid(gridSize)\n\t\t}\n\n\t\tconst dragHandle = this.info.handle as SelectionCorner | SelectionEdge\n\t\tconst scaleOriginHandle = rotateSelectionHandle(dragHandle, Math.PI)\n\n\t\tthis.editor.snaps.clearIndicators()\n\n\t\tconst shouldSnap = this.editor.user.getIsSnapMode() ? !isHoldingAccel : isHoldingAccel\n\n\t\tif (shouldSnap && selectionRotation % HALF_PI === 0) {\n\t\t\tconst { nudge } = this.editor.snaps.shapeBounds.snapResizeShapes({\n\t\t\t\tdragDelta: Vec.Sub(currentPagePoint, originPagePoint),\n\t\t\t\tinitialSelectionPageBounds: this.snapshot.initialSelectionPageBounds,\n\t\t\t\thandle: rotateSelectionHandle(dragHandle, selectionRotation),\n\t\t\t\tisAspectRatioLocked,\n\t\t\t\tisResizingFromCenter: altKey,\n\t\t\t})\n\n\t\t\tcurrentPagePoint.add(nudge)\n\t\t}\n\n\t\t// get the page point of the selection handle opposite to the drag handle\n\t\t// or the center of the selection box if altKey is pressed\n\t\tconst scaleOriginPage = Vec.RotWith(\n\t\t\taltKey ? selectionBounds.center : selectionBounds.getHandlePoint(scaleOriginHandle),\n\t\t\tselectionBounds.point,\n\t\t\tselectionRotation\n\t\t)\n\n\t\t// calculate the scale by measuring the current distance between the drag handle and the scale origin\n\t\t// and dividing by the original distance between the drag handle and the scale origin\n\n\t\t// bug: for edges, the page point doesn't matter, the\n\n\t\tconst distanceFromScaleOriginNow = Vec.Sub(currentPagePoint, scaleOriginPage).rot(\n\t\t\t-selectionRotation\n\t\t)\n\n\t\tconst distanceFromScaleOriginAtStart = Vec.Sub(originPagePoint, scaleOriginPage).rot(\n\t\t\t-selectionRotation\n\t\t)\n\n\t\tconst scale = Vec.DivV(distanceFromScaleOriginNow, distanceFromScaleOriginAtStart)\n\n\t\tif (!Number.isFinite(scale.x)) scale.x = 1\n\t\tif (!Number.isFinite(scale.y)) scale.y = 1\n\n\t\tconst isXLocked = dragHandle === 'top' || dragHandle === 'bottom'\n\t\tconst isYLocked = dragHandle === 'left' || dragHandle === 'right'\n\n\t\t// lock an axis if required\n\t\tif (isAspectRatioLocked) {\n\t\t\tif (isYLocked) {\n\t\t\t\t// holding shift and dragging either the left or the right edge\n\t\t\t\tscale.y = Math.abs(scale.x)\n\t\t\t} else if (isXLocked) {\n\t\t\t\t// holding shift and dragging either the top or the bottom edge\n\t\t\t\tscale.x = Math.abs(scale.y)\n\t\t\t} else if (Math.abs(scale.x) > Math.abs(scale.y)) {\n\t\t\t\t// holding shift and the drag has moved further in the x dimension\n\t\t\t\tscale.y = Math.abs(scale.x) * (scale.y < 0 ? -1 : 1)\n\t\t\t} else {\n\t\t\t\t// holding shift and the drag has moved further in the y dimension\n\t\t\t\tscale.x = Math.abs(scale.y) * (scale.x < 0 ? -1 : 1)\n\t\t\t}\n\t\t} else {\n\t\t\t// not holding shift, but still need to lock axes if dragging an edge\n\t\t\tif (isXLocked) {\n\t\t\t\tscale.x = 1\n\t\t\t}\n\t\t\tif (isYLocked) {\n\t\t\t\tscale.y = 1\n\t\t\t}\n\t\t}\n\n\t\tif (!this.info.isCreating) {\n\t\t\tthis.updateCursor({\n\t\t\t\tdragHandle,\n\t\t\t\tisFlippedX: scale.x < 0,\n\t\t\t\tisFlippedY: scale.y < 0,\n\t\t\t\trotation: selectionRotation,\n\t\t\t})\n\t\t}\n\n\t\tfor (const id of shapeSnapshots.keys()) {\n\t\t\tconst snapshot = shapeSnapshots.get(id)!\n\n\t\t\tthis.editor.resizeShape(id, scale, {\n\t\t\t\tinitialShape: snapshot.shape,\n\t\t\t\tinitialBounds: snapshot.bounds,\n\t\t\t\tinitialPageTransform: snapshot.pageTransform,\n\t\t\t\tdragHandle,\n\t\t\t\tmode:\n\t\t\t\t\tselectedShapeIds.length === 1 && id === selectedShapeIds[0]\n\t\t\t\t\t\t? 'resize_bounds'\n\t\t\t\t\t\t: 'scale_shape',\n\t\t\t\tscaleOrigin: scaleOriginPage,\n\t\t\t\tisAspectRatioLocked,\n\t\t\t\tscaleAxisRotation: selectionRotation,\n\t\t\t\tskipStartAndEndCallbacks: true,\n\t\t\t})\n\t\t}\n\n\t\t// If there's only one shape snapshot and it's a frame and the user is holding ctrl,\n\t\t// then we preserve the position of the frame's children, almost like the user is cropping\n\t\t// the frame rather than resizing it.\n\t\tif (isHoldingAccel) {\n\t\t\tthis.didHoldCommand = true\n\n\t\t\tfor (const { id, children } of frames) {\n\t\t\t\tif (!children.length) continue\n\t\t\t\tconst initial = shapeSnapshots.get(id)!.shape\n\t\t\t\tconst current = this.editor.getShape(id)!\n\t\t\t\tif (!(initial && current)) continue\n\n\t\t\t\tconst dx = current.x - initial.x\n\t\t\t\tconst dy = current.y - initial.y\n\n\t\t\t\tconst delta = new Vec(dx, dy).rot(-initial.rotation)\n\n\t\t\t\tif (delta.x !== 0 || delta.y !== 0) {\n\t\t\t\t\tfor (const child of children) {\n\t\t\t\t\t\tthis.editor.updateShape({\n\t\t\t\t\t\t\tid: child.id,\n\t\t\t\t\t\t\ttype: child.type,\n\t\t\t\t\t\t\tx: child.x - delta.x,\n\t\t\t\t\t\t\ty: child.y - delta.y,\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (this.didHoldCommand) {\n\t\t\t// If we're no longer holding the command key...\n\t\t\tthis.didHoldCommand = false\n\n\t\t\tfor (const { children } of frames) {\n\t\t\t\tif (!children.length) continue\n\t\t\t\tfor (const child of children) {\n\t\t\t\t\tthis.editor.updateShape({\n\t\t\t\t\t\tid: child.id,\n\t\t\t\t\t\ttype: child.type,\n\t\t\t\t\t\tx: child.x,\n\t\t\t\t\t\ty: child.y,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// ---\n\n\tprivate updateCursor({\n\t\tdragHandle,\n\t\tisFlippedX,\n\t\tisFlippedY,\n\t\trotation,\n\t}: {\n\t\tdragHandle: SelectionCorner | SelectionEdge\n\t\tisFlippedX: boolean\n\t\tisFlippedY: boolean\n\t\trotation: number\n\t}) {\n\t\tconst nextCursor = { ...this.editor.getInstanceState().cursor }\n\n\t\tswitch (dragHandle) {\n\t\t\tcase 'top_left':\n\t\t\tcase 'bottom_right': {\n\t\t\t\tnextCursor.type = 'nwse-resize'\n\t\t\t\tif (isFlippedX !== isFlippedY) {\n\t\t\t\t\tnextCursor.type = 'nesw-resize'\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'top_right':\n\t\t\tcase 'bottom_left': {\n\t\t\t\tnextCursor.type = 'nesw-resize'\n\t\t\t\tif (isFlippedX !== isFlippedY) {\n\t\t\t\t\tnextCursor.type = 'nwse-resize'\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\tnextCursor.rotation = rotation\n\n\t\tthis.editor.setCursor(nextCursor)\n\t}\n\n\toverride onExit() {\n\t\tthis.parent.setCurrentToolIdMask(undefined)\n\t\tthis.editor.setCursor({ type: 'default', rotation: 0 })\n\t\tthis.editor.snaps.clearIndicators()\n\t}\n\n\tprivate _createSnapshot() {\n\t\tconst { editor } = this\n\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\tconst selectionRotation = editor.getSelectionRotation()\n\t\tconst {\n\t\t\tinputs: { originPagePoint },\n\t\t} = editor\n\n\t\tconst selectionBounds = editor.getSelectionRotatedPageBounds()\n\t\tif (!selectionBounds) throw Error('Resizing but nothing is selected')\n\n\t\tconst dragHandlePoint = Vec.RotWith(\n\t\t\tselectionBounds.getHandlePoint(this.info.handle!),\n\t\t\tselectionBounds.point,\n\t\t\tselectionRotation\n\t\t)\n\n\t\tconst cursorHandleOffset = Vec.Sub(originPagePoint, dragHandlePoint)\n\n\t\tconst shapeSnapshots = new Map<\n\t\t\tTLShapeId,\n\t\t\t{\n\t\t\t\tshape: TLShape\n\t\t\t\tbounds: Box\n\t\t\t\tpageTransform: Mat\n\t\t\t\tpageRotation: number\n\t\t\t\tisAspectRatioLocked: boolean\n\t\t\t}\n\t\t>()\n\n\t\tconst frames: { id: TLShapeId; children: TLShape[] }[] = []\n\n\t\tconst populateResizingShapes = (shapeId: TLShapeId): false | undefined => {\n\t\t\tconst shape = editor.getShape(shapeId)\n\t\t\tif (!shape) return false\n\n\t\t\tconst util = editor.getShapeUtil(shape)\n\n\t\t\t// If the shape can resize, add it to the resizing shapes snapshots\n\t\t\tif (util.canResize(shape)) {\n\t\t\t\tconst pageTransform = editor.getShapePageTransform(shape)!\n\t\t\t\tshapeSnapshots.set(shape.id, {\n\t\t\t\t\tshape,\n\t\t\t\t\tbounds: editor.getShapeGeometry(shape).bounds,\n\t\t\t\t\tpageTransform,\n\t\t\t\t\tpageRotation: Mat.Decompose(pageTransform).rotation,\n\t\t\t\t\tisAspectRatioLocked: util.isAspectRatioLocked(shape),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// Special case:\n\t\t\t// For frames, we don't want to resize children but we DO want to get a snapshot of their children so that we can restore their\n\t\t\t// positions with the accel key behavior. We could break this further into APIs, for example by collecting snapshots of all\n\t\t\t// descendants (easy) but also flagging with behavior like \"resize\" or \"keep absolute position\" or \"reposition only with accel key\",\n\t\t\t// though I'm not sure where that would be defined; perhaps better handled with onResizeStart / onResize callbacks on the util, and\n\t\t\t// pass `accelKeyIsPressed` as well as `accelKeyWasPressed`?\n\t\t\tif (editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {\n\t\t\t\tframes.push({\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\tchildren: compact(\n\t\t\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t\t\t),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// This will stop the traversal of descendants\n\t\t\tif (!util.canResizeChildren(shape)) return false\n\t\t}\n\n\t\tselectedShapeIds.forEach((shapeId) => {\n\t\t\tconst keepDescending = populateResizingShapes(shapeId)\n\t\t\tif (keepDescending === false) return\n\t\t\teditor.visitDescendants(shapeId, populateResizingShapes)\n\t\t})\n\n\t\tconst canShapesDeform = ![...shapeSnapshots.values()].some(\n\t\t\t(shape) =>\n\t\t\t\t!areAnglesCompatible(shape.pageRotation, selectionRotation) || shape.isAspectRatioLocked\n\t\t)\n\n\t\treturn {\n\t\t\tshapeSnapshots,\n\t\t\tselectionBounds,\n\t\t\tcursorHandleOffset,\n\t\t\tselectionRotation,\n\t\t\tselectedShapeIds,\n\t\t\tcanShapesDeform,\n\t\t\tinitialSelectionPageBounds: this.editor.getSelectionPageBounds()!,\n\t\t\tframes,\n\t\t}\n\t}\n}\n\ntype Snapshot = ReturnType<Resizing['_createSnapshot']>\n\nconst ORDERED_SELECTION_HANDLES: (SelectionEdge | SelectionCorner)[] = [\n\t'top',\n\t'top_right',\n\t'right',\n\t'bottom_right',\n\t'bottom',\n\t'bottom_left',\n\t'left',\n\t'top_left',\n]\n\nexport function rotateSelectionHandle(handle: SelectionEdge | SelectionCorner, rotation: number) {\n\t// first find out how many tau we need to rotate by\n\trotation = rotation % PI2\n\tconst numSteps = Math.round(rotation / (PI / 4))\n\n\tconst currentIndex = ORDERED_SELECTION_HANDLES.indexOf(handle)\n\treturn ORDERED_SELECTION_HANDLES[(currentIndex + numSteps) % ORDERED_SELECTION_HANDLES.length]\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAsBO;AAYA,MAAM,iBAAiB,wBAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EAErB,OAAO,CAAC;AAAA,EAER,SAAS;AAAA;AAAA,EAGD,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAKzB,uBAAuB,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EAE5B,WAAW,CAAC;AAAA,EAEX,QAAQ,MAAoB;AACpC,UAAM,EAAE,aAAa,OAAO,gBAAgB,uBAAuB,EAAE,GAAG,GAAG,GAAG,EAAE,EAAE,IAAI;AAEtF,SAAK,OAAO;AACZ,SAAK,iBAAiB;AAEtB,SAAK,OAAO,qBAAqB,KAAK,gBAAgB;AACtD,SAAK,uBAAuB;AAE5B,QAAI;AAEH,WAAK,WAAW,KAAK,gBAAgB;AAAA,IACtC,SAAS,GAAG;AACX,cAAQ,MAAM,CAAC;AACf,WAAK,OAAO;AACZ;AAAA,IACD;AAEA,SAAK,SAAS;AAEd,QAAI,YAAY;AACf,UAAI,gBAAgB;AACnB,aAAK,SAAS;AAAA,MACf,OAAO;AAEN,cAAM,SAAS,KAAK,OAAO;AAAA,UAC1B,YAAY,KAAK,OAAO,uBAAuB,CAAC;AAAA,QACjD;AACA,YAAI,QAAQ;AACX,eAAK,SAAS;AAAA,QACf;AAAA,MACD;AAAA,IACD,OAAO;AACN,WAAK,SAAS,KAAK,OAAO,yBAAyB,mBAAmB;AAAA,IACvE;AAEA,QAAI,YAAY;AACf,WAAK,OAAO,UAAU,EAAE,MAAM,SAAS,UAAU,EAAE,CAAC;AAAA,IACrD;AAEA,SAAK,kBAAkB;AACvB,SAAK,aAAa;AAAA,EACnB;AAAA,EAES,OAAO,EAAE,QAAQ,GAAoB;AAC7C,UAAM,EAAE,OAAO,IAAI;AACnB,WAAO,kBAAkB,oBAAoB,OAAO;AAAA,EACrD;AAAA,EAES,gBAAgB;AACxB,SAAK,aAAa;AAAA,EACnB;AAAA,EAES,YAAY;AACpB,SAAK,aAAa;AAAA,EACnB;AAAA,EACS,UAAU;AAClB,SAAK,aAAa;AAAA,EACnB;AAAA,EAES,cAAc;AACtB,SAAK,SAAS;AAAA,EACf;AAAA,EAES,aAAa;AACrB,SAAK,SAAS;AAAA,EACf;AAAA,EAES,WAAW;AACnB,SAAK,OAAO;AAAA,EACb;AAAA,EAEQ,SAAS;AAEhB,SAAK,OAAO,WAAW,KAAK,MAAM;
|
|
4
|
+
"sourcesContent": ["import {\n\tBox,\n\tHALF_PI,\n\tMat,\n\tPI,\n\tPI2,\n\tSelectionCorner,\n\tSelectionEdge,\n\tStateNode,\n\tTLFrameShape,\n\tTLPointerEventInfo,\n\tTLShape,\n\tTLShapeId,\n\tTLShapePartial,\n\tTLTextShape,\n\tTLTickEventInfo,\n\tVec,\n\tVecLike,\n\tareAnglesCompatible,\n\tcompact,\n\tisAccelKey,\n\tkickoutOccludedShapes,\n} from '@tldraw/editor'\n\nexport type ResizingInfo = TLPointerEventInfo & {\n\ttarget: 'selection'\n\thandle: SelectionEdge | SelectionCorner\n\tisCreating?: boolean\n\tcreatingMarkId?: string\n\tonCreate?(shape: TLShape | null): void\n\tcreationCursorOffset?: VecLike\n\tonInteractionEnd?: string\n}\n\nexport class Resizing extends StateNode {\n\tstatic override id = 'resizing'\n\n\tinfo = {} as ResizingInfo\n\n\tmarkId = ''\n\n\t// A switch to detect when the user is holding ctrl\n\tprivate didHoldCommand = false\n\n\t// we transition into the resizing state from the geo pointing state, which starts with a shape of size w: 1, h: 1,\n\t// so if the user drags x: +50, y: +50 after mouseDown, the shape will be w: 51, h: 51, which is too many pixels, alas\n\t// so we allow passing a further offset into this state to negate such issues\n\tcreationCursorOffset = { x: 0, y: 0 } as VecLike\n\n\tprivate snapshot = {} as any as Snapshot\n\n\toverride onEnter(info: ResizingInfo) {\n\t\tconst { isCreating = false, creatingMarkId, creationCursorOffset = { x: 0, y: 0 } } = info\n\n\t\tthis.info = info\n\t\tthis.didHoldCommand = false\n\n\t\tthis.parent.setCurrentToolIdMask(info.onInteractionEnd)\n\t\tthis.creationCursorOffset = creationCursorOffset\n\n\t\ttry {\n\t\t\t// On rare and mysterious occasions, the user can enter the resizing state with no shapes selected\n\t\t\tthis.snapshot = this._createSnapshot()\n\t\t} catch (e) {\n\t\t\tconsole.error(e)\n\t\t\tthis.cancel()\n\t\t\treturn\n\t\t}\n\n\t\tthis.markId = ''\n\n\t\tif (isCreating) {\n\t\t\tif (creatingMarkId) {\n\t\t\t\tthis.markId = creatingMarkId\n\t\t\t} else {\n\t\t\t\t// handle legacy implicit `creating:{shapeId}` marks\n\t\t\t\tconst markId = this.editor.getMarkIdMatching(\n\t\t\t\t\t`creating:${this.editor.getOnlySelectedShapeId()}`\n\t\t\t\t)\n\t\t\t\tif (markId) {\n\t\t\t\t\tthis.markId = markId\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthis.markId = this.editor.markHistoryStoppingPoint('starting resizing')\n\t\t}\n\n\t\tif (isCreating) {\n\t\t\tthis.editor.setCursor({ type: 'cross', rotation: 0 })\n\t\t}\n\n\t\tthis.handleResizeStart()\n\t\tthis.updateShapes()\n\t}\n\n\toverride onTick({ elapsed }: TLTickEventInfo) {\n\t\tconst { editor } = this\n\t\teditor.edgeScrollManager.updateEdgeScrolling(elapsed)\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyDown() {\n\t\tthis.updateShapes()\n\t}\n\toverride onKeyUp() {\n\t\tthis.updateShapes()\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\tprivate cancel() {\n\t\t// Call onResizeCancel callback before resetting\n\t\tconst { shapeSnapshots } = this.snapshot\n\n\t\tshapeSnapshots.forEach(({ shape }) => {\n\t\t\tconst current = this.editor.getShape(shape.id)\n\t\t\tif (current) {\n\t\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\t\tutil.onResizeCancel?.(shape, current)\n\t\t\t}\n\t\t})\n\n\t\tthis.editor.bailToMark(this.markId)\n\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd, {})\n\t\t} else {\n\t\t\tthis.parent.transition('idle')\n\t\t}\n\t}\n\n\tprivate complete() {\n\t\tkickoutOccludedShapes(this.editor, this.snapshot.selectedShapeIds)\n\n\t\tthis.handleResizeEnd()\n\n\t\tif (this.info.isCreating && this.info.onCreate) {\n\t\t\tthis.info.onCreate?.(this.editor.getOnlySelectedShape())\n\t\t\treturn\n\t\t}\n\n\t\tif (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd, {})\n\t\t\treturn\n\t\t}\n\n\t\tthis.parent.transition('idle')\n\t}\n\n\tprivate handleResizeStart() {\n\t\tconst { shapeSnapshots } = this.snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tshapeSnapshots.forEach(({ shape }) => {\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onResizeStart?.(shape)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\tprivate handleResizeEnd() {\n\t\tconst { shapeSnapshots } = this.snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tshapeSnapshots.forEach(({ shape }) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onResizeEnd?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\tprivate updateShapes() {\n\t\tconst { altKey, shiftKey } = this.editor.inputs\n\t\tconst {\n\t\t\tframes,\n\t\t\tshapeSnapshots,\n\t\t\tselectionBounds,\n\t\t\tcursorHandleOffset,\n\t\t\tselectedShapeIds,\n\t\t\tselectionRotation,\n\t\t\tcanShapesDeform,\n\t\t} = this.snapshot\n\n\t\tlet isAspectRatioLocked = shiftKey || !canShapesDeform\n\n\t\tif (shapeSnapshots.size === 1) {\n\t\t\tconst onlySnapshot = [...shapeSnapshots.values()][0]!\n\t\t\tif (this.editor.isShapeOfType<TLTextShape>(onlySnapshot.shape, 'text')) {\n\t\t\t\tisAspectRatioLocked = !(this.info.handle === 'left' || this.info.handle === 'right')\n\t\t\t}\n\t\t}\n\n\t\t// first negate the 'cursor handle offset'\n\t\t// we need to do this because we do grid snapping based on the page point of the handle\n\t\t// rather than the page point of the cursor, so it's easier to pretend that the cursor\n\t\t// is really where the handle actually is\n\t\t//\n\t\t// *** Massively zoomed-in diagram of the initial mouseDown ***\n\t\t//\n\t\t//\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502\n\t\t// \u2502corner handle\n\t\t// \u250C\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2510\n\t\t// selection \u2502 \u2502\n\t\t// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 x\u25C4\u2500\u2500\u253C\u2500\u2500\u2500\u2500 drag handle point \u25B2\n\t\t// \u2502 \u2502 \u2502\n\t\t// \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u251C\u2500 cursorHandleOffset.y\n\t\t// \u2502\n\t\t// originPagePoint\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25BAx\u2500\u2510 \u25BC\n\t\t// \u2502 \u2514\u2500\u2510\n\t\t// \u2502 \u2514\u2500\u2510\n\t\t// \u2502 \u2502 mouse (sorry)\n\t\t// \u2514\u2500\u2500\u2510 \u250C\u2518\n\t\t// \u2502 \u2502\n\t\t// \u2514\u2500\u2518\n\t\t// \u25C4\u2500\u2500\u252C\u2500\u2500\u25BA\n\t\t// \u2502\n\t\t// cursorHandleOffset.x\n\n\t\tconst isHoldingAccel = isAccelKey(this.editor.inputs)\n\n\t\tconst currentPagePoint = this.editor.inputs.currentPagePoint\n\t\t\t.clone()\n\t\t\t.sub(cursorHandleOffset)\n\t\t\t.sub(this.creationCursorOffset)\n\n\t\tconst originPagePoint = this.editor.inputs.originPagePoint.clone().sub(cursorHandleOffset)\n\n\t\tif (this.editor.getInstanceState().isGridMode && !isHoldingAccel) {\n\t\t\tconst { gridSize } = this.editor.getDocumentSettings()\n\t\t\tcurrentPagePoint.snapToGrid(gridSize)\n\t\t}\n\n\t\tconst dragHandle = this.info.handle as SelectionCorner | SelectionEdge\n\t\tconst scaleOriginHandle = rotateSelectionHandle(dragHandle, Math.PI)\n\n\t\tthis.editor.snaps.clearIndicators()\n\n\t\tconst shouldSnap = this.editor.user.getIsSnapMode() ? !isHoldingAccel : isHoldingAccel\n\n\t\tif (shouldSnap && selectionRotation % HALF_PI === 0) {\n\t\t\tconst { nudge } = this.editor.snaps.shapeBounds.snapResizeShapes({\n\t\t\t\tdragDelta: Vec.Sub(currentPagePoint, originPagePoint),\n\t\t\t\tinitialSelectionPageBounds: this.snapshot.initialSelectionPageBounds,\n\t\t\t\thandle: rotateSelectionHandle(dragHandle, selectionRotation),\n\t\t\t\tisAspectRatioLocked,\n\t\t\t\tisResizingFromCenter: altKey,\n\t\t\t})\n\n\t\t\tcurrentPagePoint.add(nudge)\n\t\t}\n\n\t\t// get the page point of the selection handle opposite to the drag handle\n\t\t// or the center of the selection box if altKey is pressed\n\t\tconst scaleOriginPage = Vec.RotWith(\n\t\t\taltKey ? selectionBounds.center : selectionBounds.getHandlePoint(scaleOriginHandle),\n\t\t\tselectionBounds.point,\n\t\t\tselectionRotation\n\t\t)\n\n\t\t// calculate the scale by measuring the current distance between the drag handle and the scale origin\n\t\t// and dividing by the original distance between the drag handle and the scale origin\n\n\t\t// bug: for edges, the page point doesn't matter, the\n\n\t\tconst distanceFromScaleOriginNow = Vec.Sub(currentPagePoint, scaleOriginPage).rot(\n\t\t\t-selectionRotation\n\t\t)\n\n\t\tconst distanceFromScaleOriginAtStart = Vec.Sub(originPagePoint, scaleOriginPage).rot(\n\t\t\t-selectionRotation\n\t\t)\n\n\t\tconst scale = Vec.DivV(distanceFromScaleOriginNow, distanceFromScaleOriginAtStart)\n\n\t\tif (!Number.isFinite(scale.x)) scale.x = 1\n\t\tif (!Number.isFinite(scale.y)) scale.y = 1\n\n\t\tconst isXLocked = dragHandle === 'top' || dragHandle === 'bottom'\n\t\tconst isYLocked = dragHandle === 'left' || dragHandle === 'right'\n\n\t\t// lock an axis if required\n\t\tif (isAspectRatioLocked) {\n\t\t\tif (isYLocked) {\n\t\t\t\t// holding shift and dragging either the left or the right edge\n\t\t\t\tscale.y = Math.abs(scale.x)\n\t\t\t} else if (isXLocked) {\n\t\t\t\t// holding shift and dragging either the top or the bottom edge\n\t\t\t\tscale.x = Math.abs(scale.y)\n\t\t\t} else if (Math.abs(scale.x) > Math.abs(scale.y)) {\n\t\t\t\t// holding shift and the drag has moved further in the x dimension\n\t\t\t\tscale.y = Math.abs(scale.x) * (scale.y < 0 ? -1 : 1)\n\t\t\t} else {\n\t\t\t\t// holding shift and the drag has moved further in the y dimension\n\t\t\t\tscale.x = Math.abs(scale.y) * (scale.x < 0 ? -1 : 1)\n\t\t\t}\n\t\t} else {\n\t\t\t// not holding shift, but still need to lock axes if dragging an edge\n\t\t\tif (isXLocked) {\n\t\t\t\tscale.x = 1\n\t\t\t}\n\t\t\tif (isYLocked) {\n\t\t\t\tscale.y = 1\n\t\t\t}\n\t\t}\n\n\t\tif (!this.info.isCreating) {\n\t\t\tthis.updateCursor({\n\t\t\t\tdragHandle,\n\t\t\t\tisFlippedX: scale.x < 0,\n\t\t\t\tisFlippedY: scale.y < 0,\n\t\t\t\trotation: selectionRotation,\n\t\t\t})\n\t\t}\n\n\t\tfor (const id of shapeSnapshots.keys()) {\n\t\t\tconst snapshot = shapeSnapshots.get(id)!\n\n\t\t\tthis.editor.resizeShape(id, scale, {\n\t\t\t\tinitialShape: snapshot.shape,\n\t\t\t\tinitialBounds: snapshot.bounds,\n\t\t\t\tinitialPageTransform: snapshot.pageTransform,\n\t\t\t\tdragHandle,\n\t\t\t\tmode:\n\t\t\t\t\tselectedShapeIds.length === 1 && id === selectedShapeIds[0]\n\t\t\t\t\t\t? 'resize_bounds'\n\t\t\t\t\t\t: 'scale_shape',\n\t\t\t\tscaleOrigin: scaleOriginPage,\n\t\t\t\tisAspectRatioLocked,\n\t\t\t\tscaleAxisRotation: selectionRotation,\n\t\t\t\tskipStartAndEndCallbacks: true,\n\t\t\t})\n\t\t}\n\n\t\t// If there's only one shape snapshot and it's a frame and the user is holding ctrl,\n\t\t// then we preserve the position of the frame's children, almost like the user is cropping\n\t\t// the frame rather than resizing it.\n\t\tif (isHoldingAccel) {\n\t\t\tthis.didHoldCommand = true\n\n\t\t\tfor (const { id, children } of frames) {\n\t\t\t\tif (!children.length) continue\n\t\t\t\tconst initial = shapeSnapshots.get(id)!.shape\n\t\t\t\tconst current = this.editor.getShape(id)!\n\t\t\t\tif (!(initial && current)) continue\n\n\t\t\t\tconst dx = current.x - initial.x\n\t\t\t\tconst dy = current.y - initial.y\n\n\t\t\t\tconst delta = new Vec(dx, dy).rot(-initial.rotation)\n\n\t\t\t\tif (delta.x !== 0 || delta.y !== 0) {\n\t\t\t\t\tfor (const child of children) {\n\t\t\t\t\t\tthis.editor.updateShape({\n\t\t\t\t\t\t\tid: child.id,\n\t\t\t\t\t\t\ttype: child.type,\n\t\t\t\t\t\t\tx: child.x - delta.x,\n\t\t\t\t\t\t\ty: child.y - delta.y,\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (this.didHoldCommand) {\n\t\t\t// If we're no longer holding the command key...\n\t\t\tthis.didHoldCommand = false\n\n\t\t\tfor (const { children } of frames) {\n\t\t\t\tif (!children.length) continue\n\t\t\t\tfor (const child of children) {\n\t\t\t\t\tthis.editor.updateShape({\n\t\t\t\t\t\tid: child.id,\n\t\t\t\t\t\ttype: child.type,\n\t\t\t\t\t\tx: child.x,\n\t\t\t\t\t\ty: child.y,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// ---\n\n\tprivate updateCursor({\n\t\tdragHandle,\n\t\tisFlippedX,\n\t\tisFlippedY,\n\t\trotation,\n\t}: {\n\t\tdragHandle: SelectionCorner | SelectionEdge\n\t\tisFlippedX: boolean\n\t\tisFlippedY: boolean\n\t\trotation: number\n\t}) {\n\t\tconst nextCursor = { ...this.editor.getInstanceState().cursor }\n\n\t\tswitch (dragHandle) {\n\t\t\tcase 'top_left':\n\t\t\tcase 'bottom_right': {\n\t\t\t\tnextCursor.type = 'nwse-resize'\n\t\t\t\tif (isFlippedX !== isFlippedY) {\n\t\t\t\t\tnextCursor.type = 'nesw-resize'\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'top_right':\n\t\t\tcase 'bottom_left': {\n\t\t\t\tnextCursor.type = 'nesw-resize'\n\t\t\t\tif (isFlippedX !== isFlippedY) {\n\t\t\t\t\tnextCursor.type = 'nwse-resize'\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\tnextCursor.rotation = rotation\n\n\t\tthis.editor.setCursor(nextCursor)\n\t}\n\n\toverride onExit() {\n\t\tthis.parent.setCurrentToolIdMask(undefined)\n\t\tthis.editor.setCursor({ type: 'default', rotation: 0 })\n\t\tthis.editor.snaps.clearIndicators()\n\t}\n\n\tprivate _createSnapshot() {\n\t\tconst { editor } = this\n\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\tconst selectionRotation = editor.getSelectionRotation()\n\t\tconst {\n\t\t\tinputs: { originPagePoint },\n\t\t} = editor\n\n\t\tconst selectionBounds = editor.getSelectionRotatedPageBounds()\n\t\tif (!selectionBounds) throw Error('Resizing but nothing is selected')\n\n\t\tconst dragHandlePoint = Vec.RotWith(\n\t\t\tselectionBounds.getHandlePoint(this.info.handle!),\n\t\t\tselectionBounds.point,\n\t\t\tselectionRotation\n\t\t)\n\n\t\tconst cursorHandleOffset = Vec.Sub(originPagePoint, dragHandlePoint)\n\n\t\tconst shapeSnapshots = new Map<\n\t\t\tTLShapeId,\n\t\t\t{\n\t\t\t\tshape: TLShape\n\t\t\t\tbounds: Box\n\t\t\t\tpageTransform: Mat\n\t\t\t\tpageRotation: number\n\t\t\t\tisAspectRatioLocked: boolean\n\t\t\t}\n\t\t>()\n\n\t\tconst frames: { id: TLShapeId; children: TLShape[] }[] = []\n\n\t\tconst populateResizingShapes = (shapeId: TLShapeId): false | undefined => {\n\t\t\tconst shape = editor.getShape(shapeId)\n\t\t\tif (!shape) return false\n\n\t\t\tconst util = editor.getShapeUtil(shape)\n\n\t\t\t// If the shape can resize, add it to the resizing shapes snapshots\n\t\t\tif (util.canResize(shape)) {\n\t\t\t\tconst pageTransform = editor.getShapePageTransform(shape)!\n\t\t\t\tshapeSnapshots.set(shape.id, {\n\t\t\t\t\tshape,\n\t\t\t\t\tbounds: editor.getShapeGeometry(shape).bounds,\n\t\t\t\t\tpageTransform,\n\t\t\t\t\tpageRotation: Mat.Decompose(pageTransform).rotation,\n\t\t\t\t\tisAspectRatioLocked: util.isAspectRatioLocked(shape),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// Special case:\n\t\t\t// For frames, we don't want to resize children but we DO want to get a snapshot of their children so that we can restore their\n\t\t\t// positions with the accel key behavior. We could break this further into APIs, for example by collecting snapshots of all\n\t\t\t// descendants (easy) but also flagging with behavior like \"resize\" or \"keep absolute position\" or \"reposition only with accel key\",\n\t\t\t// though I'm not sure where that would be defined; perhaps better handled with onResizeStart / onResize callbacks on the util, and\n\t\t\t// pass `accelKeyIsPressed` as well as `accelKeyWasPressed`?\n\t\t\tif (editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {\n\t\t\t\tframes.push({\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\tchildren: compact(\n\t\t\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t\t\t),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// This will stop the traversal of descendants\n\t\t\tif (!util.canResizeChildren(shape)) return false\n\t\t}\n\n\t\tselectedShapeIds.forEach((shapeId) => {\n\t\t\tconst keepDescending = populateResizingShapes(shapeId)\n\t\t\tif (keepDescending === false) return\n\t\t\teditor.visitDescendants(shapeId, populateResizingShapes)\n\t\t})\n\n\t\tconst canShapesDeform = ![...shapeSnapshots.values()].some(\n\t\t\t(shape) =>\n\t\t\t\t!areAnglesCompatible(shape.pageRotation, selectionRotation) || shape.isAspectRatioLocked\n\t\t)\n\n\t\treturn {\n\t\t\tshapeSnapshots,\n\t\t\tselectionBounds,\n\t\t\tcursorHandleOffset,\n\t\t\tselectionRotation,\n\t\t\tselectedShapeIds,\n\t\t\tcanShapesDeform,\n\t\t\tinitialSelectionPageBounds: this.editor.getSelectionPageBounds()!,\n\t\t\tframes,\n\t\t}\n\t}\n}\n\ntype Snapshot = ReturnType<Resizing['_createSnapshot']>\n\nconst ORDERED_SELECTION_HANDLES: (SelectionEdge | SelectionCorner)[] = [\n\t'top',\n\t'top_right',\n\t'right',\n\t'bottom_right',\n\t'bottom',\n\t'bottom_left',\n\t'left',\n\t'top_left',\n]\n\nexport function rotateSelectionHandle(handle: SelectionEdge | SelectionCorner, rotation: number) {\n\t// first find out how many tau we need to rotate by\n\trotation = rotation % PI2\n\tconst numSteps = Math.round(rotation / (PI / 4))\n\n\tconst currentIndex = ORDERED_SELECTION_HANDLES.indexOf(handle)\n\treturn ORDERED_SELECTION_HANDLES[(currentIndex + numSteps) % ORDERED_SELECTION_HANDLES.length]\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAsBO;AAYA,MAAM,iBAAiB,wBAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EAErB,OAAO,CAAC;AAAA,EAER,SAAS;AAAA;AAAA,EAGD,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAKzB,uBAAuB,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EAE5B,WAAW,CAAC;AAAA,EAEX,QAAQ,MAAoB;AACpC,UAAM,EAAE,aAAa,OAAO,gBAAgB,uBAAuB,EAAE,GAAG,GAAG,GAAG,EAAE,EAAE,IAAI;AAEtF,SAAK,OAAO;AACZ,SAAK,iBAAiB;AAEtB,SAAK,OAAO,qBAAqB,KAAK,gBAAgB;AACtD,SAAK,uBAAuB;AAE5B,QAAI;AAEH,WAAK,WAAW,KAAK,gBAAgB;AAAA,IACtC,SAAS,GAAG;AACX,cAAQ,MAAM,CAAC;AACf,WAAK,OAAO;AACZ;AAAA,IACD;AAEA,SAAK,SAAS;AAEd,QAAI,YAAY;AACf,UAAI,gBAAgB;AACnB,aAAK,SAAS;AAAA,MACf,OAAO;AAEN,cAAM,SAAS,KAAK,OAAO;AAAA,UAC1B,YAAY,KAAK,OAAO,uBAAuB,CAAC;AAAA,QACjD;AACA,YAAI,QAAQ;AACX,eAAK,SAAS;AAAA,QACf;AAAA,MACD;AAAA,IACD,OAAO;AACN,WAAK,SAAS,KAAK,OAAO,yBAAyB,mBAAmB;AAAA,IACvE;AAEA,QAAI,YAAY;AACf,WAAK,OAAO,UAAU,EAAE,MAAM,SAAS,UAAU,EAAE,CAAC;AAAA,IACrD;AAEA,SAAK,kBAAkB;AACvB,SAAK,aAAa;AAAA,EACnB;AAAA,EAES,OAAO,EAAE,QAAQ,GAAoB;AAC7C,UAAM,EAAE,OAAO,IAAI;AACnB,WAAO,kBAAkB,oBAAoB,OAAO;AAAA,EACrD;AAAA,EAES,gBAAgB;AACxB,SAAK,aAAa;AAAA,EACnB;AAAA,EAES,YAAY;AACpB,SAAK,aAAa;AAAA,EACnB;AAAA,EACS,UAAU;AAClB,SAAK,aAAa;AAAA,EACnB;AAAA,EAES,cAAc;AACtB,SAAK,SAAS;AAAA,EACf;AAAA,EAES,aAAa;AACrB,SAAK,SAAS;AAAA,EACf;AAAA,EAES,WAAW;AACnB,SAAK,OAAO;AAAA,EACb;AAAA,EAEQ,SAAS;AAEhB,UAAM,EAAE,eAAe,IAAI,KAAK;AAEhC,mBAAe,QAAQ,CAAC,EAAE,MAAM,MAAM;AACrC,YAAM,UAAU,KAAK,OAAO,SAAS,MAAM,EAAE;AAC7C,UAAI,SAAS;AACZ,cAAM,OAAO,KAAK,OAAO,aAAa,KAAK;AAC3C,aAAK,iBAAiB,OAAO,OAAO;AAAA,MACrC;AAAA,IACD,CAAC;AAED,SAAK,OAAO,WAAW,KAAK,MAAM;AAElC,QAAI,KAAK,KAAK,kBAAkB;AAC/B,WAAK,OAAO,eAAe,KAAK,KAAK,kBAAkB,CAAC,CAAC;AAAA,IAC1D,OAAO;AACN,WAAK,OAAO,WAAW,MAAM;AAAA,IAC9B;AAAA,EACD;AAAA,EAEQ,WAAW;AAClB,6CAAsB,KAAK,QAAQ,KAAK,SAAS,gBAAgB;AAEjE,SAAK,gBAAgB;AAErB,QAAI,KAAK,KAAK,cAAc,KAAK,KAAK,UAAU;AAC/C,WAAK,KAAK,WAAW,KAAK,OAAO,qBAAqB,CAAC;AACvD;AAAA,IACD;AAEA,QAAI,KAAK,OAAO,iBAAiB,EAAE,gBAAgB,KAAK,KAAK,kBAAkB;AAC9E,WAAK,OAAO,eAAe,KAAK,KAAK,kBAAkB,CAAC,CAAC;AACzD;AAAA,IACD;AAEA,SAAK,OAAO,WAAW,MAAM;AAAA,EAC9B;AAAA,EAEQ,oBAAoB;AAC3B,UAAM,EAAE,eAAe,IAAI,KAAK;AAEhC,UAAM,UAA4B,CAAC;AAEnC,mBAAe,QAAQ,CAAC,EAAE,MAAM,MAAM;AACrC,YAAM,OAAO,KAAK,OAAO,aAAa,KAAK;AAC3C,YAAM,SAAS,KAAK,gBAAgB,KAAK;AACzC,UAAI,QAAQ;AACX,gBAAQ,KAAK,MAAM;AAAA,MACpB;AAAA,IACD,CAAC;AAED,QAAI,QAAQ,SAAS,GAAG;AACvB,WAAK,OAAO,aAAa,OAAO;AAAA,IACjC;AAAA,EACD;AAAA,EAEQ,kBAAkB;AACzB,UAAM,EAAE,eAAe,IAAI,KAAK;AAEhC,UAAM,UAA4B,CAAC;AAEnC,mBAAe,QAAQ,CAAC,EAAE,MAAM,MAAM;AACrC,YAAM,UAAU,KAAK,OAAO,SAAS,MAAM,EAAE;AAC7C,YAAM,OAAO,KAAK,OAAO,aAAa,KAAK;AAC3C,YAAM,SAAS,KAAK,cAAc,OAAO,OAAO;AAChD,UAAI,QAAQ;AACX,gBAAQ,KAAK,MAAM;AAAA,MACpB;AAAA,IACD,CAAC;AAED,QAAI,QAAQ,SAAS,GAAG;AACvB,WAAK,OAAO,aAAa,OAAO;AAAA,IACjC;AAAA,EACD;AAAA,EAEQ,eAAe;AACtB,UAAM,EAAE,QAAQ,SAAS,IAAI,KAAK,OAAO;AACzC,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,IAAI,KAAK;AAET,QAAI,sBAAsB,YAAY,CAAC;AAEvC,QAAI,eAAe,SAAS,GAAG;AAC9B,YAAM,eAAe,CAAC,GAAG,eAAe,OAAO,CAAC,EAAE,CAAC;AACnD,UAAI,KAAK,OAAO,cAA2B,aAAa,OAAO,MAAM,GAAG;AACvE,8BAAsB,EAAE,KAAK,KAAK,WAAW,UAAU,KAAK,KAAK,WAAW;AAAA,MAC7E;AAAA,IACD;AAmCA,UAAM,qBAAiB,0BAAW,KAAK,OAAO,MAAM;AAEpD,UAAM,mBAAmB,KAAK,OAAO,OAAO,iBAC1C,MAAM,EACN,IAAI,kBAAkB,EACtB,IAAI,KAAK,oBAAoB;AAE/B,UAAM,kBAAkB,KAAK,OAAO,OAAO,gBAAgB,MAAM,EAAE,IAAI,kBAAkB;AAEzF,QAAI,KAAK,OAAO,iBAAiB,EAAE,cAAc,CAAC,gBAAgB;AACjE,YAAM,EAAE,SAAS,IAAI,KAAK,OAAO,oBAAoB;AACrD,uBAAiB,WAAW,QAAQ;AAAA,IACrC;AAEA,UAAM,aAAa,KAAK,KAAK;AAC7B,UAAM,oBAAoB,sBAAsB,YAAY,KAAK,EAAE;AAEnE,SAAK,OAAO,MAAM,gBAAgB;AAElC,UAAM,aAAa,KAAK,OAAO,KAAK,cAAc,IAAI,CAAC,iBAAiB;AAExE,QAAI,cAAc,oBAAoB,0BAAY,GAAG;AACpD,YAAM,EAAE,MAAM,IAAI,KAAK,OAAO,MAAM,YAAY,iBAAiB;AAAA,QAChE,WAAW,kBAAI,IAAI,kBAAkB,eAAe;AAAA,QACpD,4BAA4B,KAAK,SAAS;AAAA,QAC1C,QAAQ,sBAAsB,YAAY,iBAAiB;AAAA,QAC3D;AAAA,QACA,sBAAsB;AAAA,MACvB,CAAC;AAED,uBAAiB,IAAI,KAAK;AAAA,IAC3B;AAIA,UAAM,kBAAkB,kBAAI;AAAA,MAC3B,SAAS,gBAAgB,SAAS,gBAAgB,eAAe,iBAAiB;AAAA,MAClF,gBAAgB;AAAA,MAChB;AAAA,IACD;AAOA,UAAM,6BAA6B,kBAAI,IAAI,kBAAkB,eAAe,EAAE;AAAA,MAC7E,CAAC;AAAA,IACF;AAEA,UAAM,iCAAiC,kBAAI,IAAI,iBAAiB,eAAe,EAAE;AAAA,MAChF,CAAC;AAAA,IACF;AAEA,UAAM,QAAQ,kBAAI,KAAK,4BAA4B,8BAA8B;AAEjF,QAAI,CAAC,OAAO,SAAS,MAAM,CAAC,EAAG,OAAM,IAAI;AACzC,QAAI,CAAC,OAAO,SAAS,MAAM,CAAC,EAAG,OAAM,IAAI;AAEzC,UAAM,YAAY,eAAe,SAAS,eAAe;AACzD,UAAM,YAAY,eAAe,UAAU,eAAe;AAG1D,QAAI,qBAAqB;AACxB,UAAI,WAAW;AAEd,cAAM,IAAI,KAAK,IAAI,MAAM,CAAC;AAAA,MAC3B,WAAW,WAAW;AAErB,cAAM,IAAI,KAAK,IAAI,MAAM,CAAC;AAAA,MAC3B,WAAW,KAAK,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,MAAM,CAAC,GAAG;AAEjD,cAAM,IAAI,KAAK,IAAI,MAAM,CAAC,KAAK,MAAM,IAAI,IAAI,KAAK;AAAA,MACnD,OAAO;AAEN,cAAM,IAAI,KAAK,IAAI,MAAM,CAAC,KAAK,MAAM,IAAI,IAAI,KAAK;AAAA,MACnD;AAAA,IACD,OAAO;AAEN,UAAI,WAAW;AACd,cAAM,IAAI;AAAA,MACX;AACA,UAAI,WAAW;AACd,cAAM,IAAI;AAAA,MACX;AAAA,IACD;AAEA,QAAI,CAAC,KAAK,KAAK,YAAY;AAC1B,WAAK,aAAa;AAAA,QACjB;AAAA,QACA,YAAY,MAAM,IAAI;AAAA,QACtB,YAAY,MAAM,IAAI;AAAA,QACtB,UAAU;AAAA,MACX,CAAC;AAAA,IACF;AAEA,eAAW,MAAM,eAAe,KAAK,GAAG;AACvC,YAAM,WAAW,eAAe,IAAI,EAAE;AAEtC,WAAK,OAAO,YAAY,IAAI,OAAO;AAAA,QAClC,cAAc,SAAS;AAAA,QACvB,eAAe,SAAS;AAAA,QACxB,sBAAsB,SAAS;AAAA,QAC/B;AAAA,QACA,MACC,iBAAiB,WAAW,KAAK,OAAO,iBAAiB,CAAC,IACvD,kBACA;AAAA,QACJ,aAAa;AAAA,QACb;AAAA,QACA,mBAAmB;AAAA,QACnB,0BAA0B;AAAA,MAC3B,CAAC;AAAA,IACF;AAKA,QAAI,gBAAgB;AACnB,WAAK,iBAAiB;AAEtB,iBAAW,EAAE,IAAI,SAAS,KAAK,QAAQ;AACtC,YAAI,CAAC,SAAS,OAAQ;AACtB,cAAM,UAAU,eAAe,IAAI,EAAE,EAAG;AACxC,cAAM,UAAU,KAAK,OAAO,SAAS,EAAE;AACvC,YAAI,EAAE,WAAW,SAAU;AAE3B,cAAM,KAAK,QAAQ,IAAI,QAAQ;AAC/B,cAAM,KAAK,QAAQ,IAAI,QAAQ;AAE/B,cAAM,QAAQ,IAAI,kBAAI,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,QAAQ;AAEnD,YAAI,MAAM,MAAM,KAAK,MAAM,MAAM,GAAG;AACnC,qBAAW,SAAS,UAAU;AAC7B,iBAAK,OAAO,YAAY;AAAA,cACvB,IAAI,MAAM;AAAA,cACV,MAAM,MAAM;AAAA,cACZ,GAAG,MAAM,IAAI,MAAM;AAAA,cACnB,GAAG,MAAM,IAAI,MAAM;AAAA,YACpB,CAAC;AAAA,UACF;AAAA,QACD;AAAA,MACD;AAAA,IACD,WAAW,KAAK,gBAAgB;AAE/B,WAAK,iBAAiB;AAEtB,iBAAW,EAAE,SAAS,KAAK,QAAQ;AAClC,YAAI,CAAC,SAAS,OAAQ;AACtB,mBAAW,SAAS,UAAU;AAC7B,eAAK,OAAO,YAAY;AAAA,YACvB,IAAI,MAAM;AAAA,YACV,MAAM,MAAM;AAAA,YACZ,GAAG,MAAM;AAAA,YACT,GAAG,MAAM;AAAA,UACV,CAAC;AAAA,QACF;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAAA;AAAA,EAIQ,aAAa;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAKG;AACF,UAAM,aAAa,EAAE,GAAG,KAAK,OAAO,iBAAiB,EAAE,OAAO;AAE9D,YAAQ,YAAY;AAAA,MACnB,KAAK;AAAA,MACL,KAAK,gBAAgB;AACpB,mBAAW,OAAO;AAClB,YAAI,eAAe,YAAY;AAC9B,qBAAW,OAAO;AAAA,QACnB;AACA;AAAA,MACD;AAAA,MACA,KAAK;AAAA,MACL,KAAK,eAAe;AACnB,mBAAW,OAAO;AAClB,YAAI,eAAe,YAAY;AAC9B,qBAAW,OAAO;AAAA,QACnB;AACA;AAAA,MACD;AAAA,IACD;AAEA,eAAW,WAAW;AAEtB,SAAK,OAAO,UAAU,UAAU;AAAA,EACjC;AAAA,EAES,SAAS;AACjB,SAAK,OAAO,qBAAqB,MAAS;AAC1C,SAAK,OAAO,UAAU,EAAE,MAAM,WAAW,UAAU,EAAE,CAAC;AACtD,SAAK,OAAO,MAAM,gBAAgB;AAAA,EACnC;AAAA,EAEQ,kBAAkB;AACzB,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,mBAAmB,OAAO,oBAAoB;AACpD,UAAM,oBAAoB,OAAO,qBAAqB;AACtD,UAAM;AAAA,MACL,QAAQ,EAAE,gBAAgB;AAAA,IAC3B,IAAI;AAEJ,UAAM,kBAAkB,OAAO,8BAA8B;AAC7D,QAAI,CAAC,gBAAiB,OAAM,MAAM,kCAAkC;AAEpE,UAAM,kBAAkB,kBAAI;AAAA,MAC3B,gBAAgB,eAAe,KAAK,KAAK,MAAO;AAAA,MAChD,gBAAgB;AAAA,MAChB;AAAA,IACD;AAEA,UAAM,qBAAqB,kBAAI,IAAI,iBAAiB,eAAe;AAEnE,UAAM,iBAAiB,oBAAI,IASzB;AAEF,UAAM,SAAmD,CAAC;AAE1D,UAAM,yBAAyB,CAAC,YAA0C;AACzE,YAAM,QAAQ,OAAO,SAAS,OAAO;AACrC,UAAI,CAAC,MAAO,QAAO;AAEnB,YAAM,OAAO,OAAO,aAAa,KAAK;AAGtC,UAAI,KAAK,UAAU,KAAK,GAAG;AAC1B,cAAM,gBAAgB,OAAO,sBAAsB,KAAK;AACxD,uBAAe,IAAI,MAAM,IAAI;AAAA,UAC5B;AAAA,UACA,QAAQ,OAAO,iBAAiB,KAAK,EAAE;AAAA,UACvC;AAAA,UACA,cAAc,kBAAI,UAAU,aAAa,EAAE;AAAA,UAC3C,qBAAqB,KAAK,oBAAoB,KAAK;AAAA,QACpD,CAAC;AAAA,MACF;AAQA,UAAI,OAAO,cAA4B,OAAO,OAAO,GAAG;AACvD,eAAO,KAAK;AAAA,UACX,IAAI,MAAM;AAAA,UACV,cAAU;AAAA,YACT,OAAO,2BAA2B,KAAK,EAAE,IAAI,CAAC,OAAO,OAAO,SAAS,EAAE,CAAC;AAAA,UACzE;AAAA,QACD,CAAC;AAAA,MACF;AAGA,UAAI,CAAC,KAAK,kBAAkB,KAAK,EAAG,QAAO;AAAA,IAC5C;AAEA,qBAAiB,QAAQ,CAAC,YAAY;AACrC,YAAM,iBAAiB,uBAAuB,OAAO;AACrD,UAAI,mBAAmB,MAAO;AAC9B,aAAO,iBAAiB,SAAS,sBAAsB;AAAA,IACxD,CAAC;AAED,UAAM,kBAAkB,CAAC,CAAC,GAAG,eAAe,OAAO,CAAC,EAAE;AAAA,MACrD,CAAC,UACA,KAAC,mCAAoB,MAAM,cAAc,iBAAiB,KAAK,MAAM;AAAA,IACvE;AAEA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,4BAA4B,KAAK,OAAO,uBAAuB;AAAA,MAC/D;AAAA,IACD;AAAA,EACD;AACD;AAIA,MAAM,4BAAiE;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,SAAS,sBAAsB,QAAyC,UAAkB;AAEhG,aAAW,WAAW;AACtB,QAAM,WAAW,KAAK,MAAM,YAAY,mBAAK,EAAE;AAE/C,QAAM,eAAe,0BAA0B,QAAQ,MAAM;AAC7D,SAAO,2BAA2B,eAAe,YAAY,0BAA0B,MAAM;AAC9F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -93,6 +93,14 @@ class Rotating extends import_editor.StateNode {
|
|
|
93
93
|
});
|
|
94
94
|
}
|
|
95
95
|
cancel() {
|
|
96
|
+
const { shapeSnapshots } = this.snapshot;
|
|
97
|
+
shapeSnapshots.forEach(({ shape }) => {
|
|
98
|
+
const current = this.editor.getShape(shape.id);
|
|
99
|
+
if (current) {
|
|
100
|
+
const util = this.editor.getShapeUtil(shape);
|
|
101
|
+
util.onRotateCancel?.(shape, current);
|
|
102
|
+
}
|
|
103
|
+
});
|
|
96
104
|
this.editor.bailToMark(this.markId);
|
|
97
105
|
if (this.info.onInteractionEnd) {
|
|
98
106
|
this.editor.setCurrentTool(this.info.onInteractionEnd, this.info);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/tools/SelectTool/childStates/Rotating.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n\tRotateCorner,\n\tStateNode,\n\tTLPointerEventInfo,\n\tTLRotationSnapshot,\n\tapplyRotationToSnapshotShapes,\n\tdegreesToRadians,\n\tgetRotationSnapshot,\n\tkickoutOccludedShapes,\n\tshortAngleDist,\n\tsnapAngle,\n} from '@tldraw/editor'\nimport { CursorTypeMap } from './PointingResizeHandle'\n\nconst ONE_DEGREE = Math.PI / 180\n\nexport class Rotating extends StateNode {\n\tstatic override id = 'rotating'\n\n\tsnapshot = {} as TLRotationSnapshot\n\n\tinfo = {} as Extract<TLPointerEventInfo, { target: 'selection' }> & { onInteractionEnd?: string }\n\n\tmarkId = ''\n\n\toverride onEnter(info: TLPointerEventInfo & { target: 'selection'; onInteractionEnd?: string }) {\n\t\t// Store the event information\n\t\tthis.info = info\n\t\tthis.parent.setCurrentToolIdMask(info.onInteractionEnd)\n\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('rotate start')\n\n\t\tconst snapshot = getRotationSnapshot({\n\t\t\teditor: this.editor,\n\t\t\tids: this.editor.getSelectedShapeIds(),\n\t\t})\n\t\tif (!snapshot) return this.parent.transition('idle', this.info)\n\t\tthis.snapshot = snapshot\n\n\t\t// Trigger a pointer move\n\t\tconst newSelectionRotation = this._getRotationFromPointerPosition({\n\t\t\tsnapToNearestDegree: false,\n\t\t})\n\n\t\tapplyRotationToSnapshotShapes({\n\t\t\teditor: this.editor,\n\t\t\tdelta: this._getRotationFromPointerPosition({ snapToNearestDegree: false }),\n\t\t\tsnapshot: this.snapshot,\n\t\t\tstage: 'start',\n\t\t})\n\n\t\t// Update cursor\n\t\tthis.editor.setCursor({\n\t\t\ttype: CursorTypeMap[this.info.handle as RotateCorner],\n\t\t\trotation: newSelectionRotation + this.snapshot.initialShapesRotation,\n\t\t})\n\t}\n\n\toverride onExit() {\n\t\tthis.editor.setCursor({ type: 'default', rotation: 0 })\n\t\tthis.parent.setCurrentToolIdMask(undefined)\n\n\t\tthis.snapshot = {} as TLRotationSnapshot\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.update()\n\t}\n\n\toverride onKeyDown() {\n\t\tthis.update()\n\t}\n\n\toverride onKeyUp() {\n\t\tthis.update()\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\t// ---\n\n\tprivate update() {\n\t\tconst newSelectionRotation = this._getRotationFromPointerPosition({\n\t\t\tsnapToNearestDegree: false,\n\t\t})\n\n\t\tapplyRotationToSnapshotShapes({\n\t\t\teditor: this.editor,\n\t\t\tdelta: newSelectionRotation,\n\t\t\tsnapshot: this.snapshot,\n\t\t\tstage: 'update',\n\t\t})\n\n\t\t// Update cursor\n\t\tthis.editor.setCursor({\n\t\t\ttype: CursorTypeMap[this.info.handle as RotateCorner],\n\t\t\trotation: newSelectionRotation + this.snapshot.initialShapesRotation,\n\t\t})\n\t}\n\n\tprivate cancel() {\n\t\tthis.editor.bailToMark(this.markId)\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd, this.info)\n\t\t} else {\n\t\t\tthis.parent.transition('idle', this.info)\n\t\t}\n\t}\n\n\tprivate complete() {\n\t\tapplyRotationToSnapshotShapes({\n\t\t\teditor: this.editor,\n\t\t\tdelta: this._getRotationFromPointerPosition({ snapToNearestDegree: true }),\n\t\t\tsnapshot: this.snapshot,\n\t\t\tstage: 'end',\n\t\t})\n\t\tkickoutOccludedShapes(\n\t\t\tthis.editor,\n\t\t\tthis.snapshot.shapeSnapshots.map((s) => s.shape.id)\n\t\t)\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd, this.info)\n\t\t} else {\n\t\t\tthis.parent.transition('idle', this.info)\n\t\t}\n\t}\n\n\t_getRotationFromPointerPosition({ snapToNearestDegree }: { snapToNearestDegree: boolean }) {\n\t\tconst {\n\t\t\tinputs: { shiftKey, currentPagePoint },\n\t\t} = this.editor\n\t\tconst { initialCursorAngle, initialShapesRotation, initialPageCenter } = this.snapshot\n\n\t\t// The delta is the difference between the current angle and the initial angle\n\t\tconst preSnapRotationDelta = initialPageCenter.angle(currentPagePoint) - initialCursorAngle\n\t\tlet newSelectionRotation = initialShapesRotation + preSnapRotationDelta\n\n\t\tif (shiftKey) {\n\t\t\tnewSelectionRotation = snapAngle(newSelectionRotation, 24)\n\t\t} else if (snapToNearestDegree) {\n\t\t\tnewSelectionRotation = Math.round(newSelectionRotation / ONE_DEGREE) * ONE_DEGREE\n\n\t\t\tif (this.editor.getInstanceState().isCoarsePointer) {\n\t\t\t\tconst snappedToRightAngle = snapAngle(newSelectionRotation, 4)\n\t\t\t\tconst angleToRightAngle = shortAngleDist(newSelectionRotation, snappedToRightAngle)\n\t\t\t\tif (Math.abs(angleToRightAngle) < degreesToRadians(5)) {\n\t\t\t\t\tnewSelectionRotation = snappedToRightAngle\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn newSelectionRotation - initialShapesRotation\n\t}\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWO;AACP,kCAA8B;AAE9B,MAAM,aAAa,KAAK,KAAK;AAEtB,MAAM,iBAAiB,wBAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EAErB,WAAW,CAAC;AAAA,EAEZ,OAAO,CAAC;AAAA,EAER,SAAS;AAAA,EAEA,QAAQ,MAA+E;AAE/F,SAAK,OAAO;AACZ,SAAK,OAAO,qBAAqB,KAAK,gBAAgB;AAEtD,SAAK,SAAS,KAAK,OAAO,yBAAyB,cAAc;AAEjE,UAAM,eAAW,mCAAoB;AAAA,MACpC,QAAQ,KAAK;AAAA,MACb,KAAK,KAAK,OAAO,oBAAoB;AAAA,IACtC,CAAC;AACD,QAAI,CAAC,SAAU,QAAO,KAAK,OAAO,WAAW,QAAQ,KAAK,IAAI;AAC9D,SAAK,WAAW;AAGhB,UAAM,uBAAuB,KAAK,gCAAgC;AAAA,MACjE,qBAAqB;AAAA,IACtB,CAAC;AAED,qDAA8B;AAAA,MAC7B,QAAQ,KAAK;AAAA,MACb,OAAO,KAAK,gCAAgC,EAAE,qBAAqB,MAAM,CAAC;AAAA,MAC1E,UAAU,KAAK;AAAA,MACf,OAAO;AAAA,IACR,CAAC;AAGD,SAAK,OAAO,UAAU;AAAA,MACrB,MAAM,0CAAc,KAAK,KAAK,MAAsB;AAAA,MACpD,UAAU,uBAAuB,KAAK,SAAS;AAAA,IAChD,CAAC;AAAA,EACF;AAAA,EAES,SAAS;AACjB,SAAK,OAAO,UAAU,EAAE,MAAM,WAAW,UAAU,EAAE,CAAC;AACtD,SAAK,OAAO,qBAAqB,MAAS;AAE1C,SAAK,WAAW,CAAC;AAAA,EAClB;AAAA,EAES,gBAAgB;AACxB,SAAK,OAAO;AAAA,EACb;AAAA,EAES,YAAY;AACpB,SAAK,OAAO;AAAA,EACb;AAAA,EAES,UAAU;AAClB,SAAK,OAAO;AAAA,EACb;AAAA,EAES,cAAc;AACtB,SAAK,SAAS;AAAA,EACf;AAAA,EAES,aAAa;AACrB,SAAK,SAAS;AAAA,EACf;AAAA,EAES,WAAW;AACnB,SAAK,OAAO;AAAA,EACb;AAAA;AAAA,EAIQ,SAAS;AAChB,UAAM,uBAAuB,KAAK,gCAAgC;AAAA,MACjE,qBAAqB;AAAA,IACtB,CAAC;AAED,qDAA8B;AAAA,MAC7B,QAAQ,KAAK;AAAA,MACb,OAAO;AAAA,MACP,UAAU,KAAK;AAAA,MACf,OAAO;AAAA,IACR,CAAC;AAGD,SAAK,OAAO,UAAU;AAAA,MACrB,MAAM,0CAAc,KAAK,KAAK,MAAsB;AAAA,MACpD,UAAU,uBAAuB,KAAK,SAAS;AAAA,IAChD,CAAC;AAAA,EACF;AAAA,EAEQ,SAAS;
|
|
4
|
+
"sourcesContent": ["import {\n\tRotateCorner,\n\tStateNode,\n\tTLPointerEventInfo,\n\tTLRotationSnapshot,\n\tapplyRotationToSnapshotShapes,\n\tdegreesToRadians,\n\tgetRotationSnapshot,\n\tkickoutOccludedShapes,\n\tshortAngleDist,\n\tsnapAngle,\n} from '@tldraw/editor'\nimport { CursorTypeMap } from './PointingResizeHandle'\n\nconst ONE_DEGREE = Math.PI / 180\n\nexport class Rotating extends StateNode {\n\tstatic override id = 'rotating'\n\n\tsnapshot = {} as TLRotationSnapshot\n\n\tinfo = {} as Extract<TLPointerEventInfo, { target: 'selection' }> & { onInteractionEnd?: string }\n\n\tmarkId = ''\n\n\toverride onEnter(info: TLPointerEventInfo & { target: 'selection'; onInteractionEnd?: string }) {\n\t\t// Store the event information\n\t\tthis.info = info\n\t\tthis.parent.setCurrentToolIdMask(info.onInteractionEnd)\n\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('rotate start')\n\n\t\tconst snapshot = getRotationSnapshot({\n\t\t\teditor: this.editor,\n\t\t\tids: this.editor.getSelectedShapeIds(),\n\t\t})\n\t\tif (!snapshot) return this.parent.transition('idle', this.info)\n\t\tthis.snapshot = snapshot\n\n\t\t// Trigger a pointer move\n\t\tconst newSelectionRotation = this._getRotationFromPointerPosition({\n\t\t\tsnapToNearestDegree: false,\n\t\t})\n\n\t\tapplyRotationToSnapshotShapes({\n\t\t\teditor: this.editor,\n\t\t\tdelta: this._getRotationFromPointerPosition({ snapToNearestDegree: false }),\n\t\t\tsnapshot: this.snapshot,\n\t\t\tstage: 'start',\n\t\t})\n\n\t\t// Update cursor\n\t\tthis.editor.setCursor({\n\t\t\ttype: CursorTypeMap[this.info.handle as RotateCorner],\n\t\t\trotation: newSelectionRotation + this.snapshot.initialShapesRotation,\n\t\t})\n\t}\n\n\toverride onExit() {\n\t\tthis.editor.setCursor({ type: 'default', rotation: 0 })\n\t\tthis.parent.setCurrentToolIdMask(undefined)\n\n\t\tthis.snapshot = {} as TLRotationSnapshot\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.update()\n\t}\n\n\toverride onKeyDown() {\n\t\tthis.update()\n\t}\n\n\toverride onKeyUp() {\n\t\tthis.update()\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\t// ---\n\n\tprivate update() {\n\t\tconst newSelectionRotation = this._getRotationFromPointerPosition({\n\t\t\tsnapToNearestDegree: false,\n\t\t})\n\n\t\tapplyRotationToSnapshotShapes({\n\t\t\teditor: this.editor,\n\t\t\tdelta: newSelectionRotation,\n\t\t\tsnapshot: this.snapshot,\n\t\t\tstage: 'update',\n\t\t})\n\n\t\t// Update cursor\n\t\tthis.editor.setCursor({\n\t\t\ttype: CursorTypeMap[this.info.handle as RotateCorner],\n\t\t\trotation: newSelectionRotation + this.snapshot.initialShapesRotation,\n\t\t})\n\t}\n\n\tprivate cancel() {\n\t\t// Call onRotateCancel callback before bailing to mark\n\t\tconst { shapeSnapshots } = this.snapshot\n\n\t\tshapeSnapshots.forEach(({ shape }) => {\n\t\t\tconst current = this.editor.getShape(shape.id)\n\t\t\tif (current) {\n\t\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\t\tutil.onRotateCancel?.(shape, current)\n\t\t\t}\n\t\t})\n\n\t\tthis.editor.bailToMark(this.markId)\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd, this.info)\n\t\t} else {\n\t\t\tthis.parent.transition('idle', this.info)\n\t\t}\n\t}\n\n\tprivate complete() {\n\t\tapplyRotationToSnapshotShapes({\n\t\t\teditor: this.editor,\n\t\t\tdelta: this._getRotationFromPointerPosition({ snapToNearestDegree: true }),\n\t\t\tsnapshot: this.snapshot,\n\t\t\tstage: 'end',\n\t\t})\n\t\tkickoutOccludedShapes(\n\t\t\tthis.editor,\n\t\t\tthis.snapshot.shapeSnapshots.map((s) => s.shape.id)\n\t\t)\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd, this.info)\n\t\t} else {\n\t\t\tthis.parent.transition('idle', this.info)\n\t\t}\n\t}\n\n\t_getRotationFromPointerPosition({ snapToNearestDegree }: { snapToNearestDegree: boolean }) {\n\t\tconst {\n\t\t\tinputs: { shiftKey, currentPagePoint },\n\t\t} = this.editor\n\t\tconst { initialCursorAngle, initialShapesRotation, initialPageCenter } = this.snapshot\n\n\t\t// The delta is the difference between the current angle and the initial angle\n\t\tconst preSnapRotationDelta = initialPageCenter.angle(currentPagePoint) - initialCursorAngle\n\t\tlet newSelectionRotation = initialShapesRotation + preSnapRotationDelta\n\n\t\tif (shiftKey) {\n\t\t\tnewSelectionRotation = snapAngle(newSelectionRotation, 24)\n\t\t} else if (snapToNearestDegree) {\n\t\t\tnewSelectionRotation = Math.round(newSelectionRotation / ONE_DEGREE) * ONE_DEGREE\n\n\t\t\tif (this.editor.getInstanceState().isCoarsePointer) {\n\t\t\t\tconst snappedToRightAngle = snapAngle(newSelectionRotation, 4)\n\t\t\t\tconst angleToRightAngle = shortAngleDist(newSelectionRotation, snappedToRightAngle)\n\t\t\t\tif (Math.abs(angleToRightAngle) < degreesToRadians(5)) {\n\t\t\t\t\tnewSelectionRotation = snappedToRightAngle\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn newSelectionRotation - initialShapesRotation\n\t}\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -205,6 +205,14 @@ class Translating extends (_a = import_editor.StateNode, _updateParentTransforms
|
|
|
205
205
|
}
|
|
206
206
|
}
|
|
207
207
|
cancel() {
|
|
208
|
+
const { movingShapes } = this.snapshot;
|
|
209
|
+
movingShapes.forEach((shape) => {
|
|
210
|
+
const current = this.editor.getShape(shape.id);
|
|
211
|
+
if (current) {
|
|
212
|
+
const util = this.editor.getShapeUtil(shape);
|
|
213
|
+
util.onTranslateCancel?.(shape, current);
|
|
214
|
+
}
|
|
215
|
+
});
|
|
208
216
|
this.reset();
|
|
209
217
|
if (this.info.onInteractionEnd) {
|
|
210
218
|
this.editor.setCurrentTool(this.info.onInteractionEnd);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/tools/SelectTool/childStates/Translating.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n\tBoundsSnapPoint,\n\tEditor,\n\tMat,\n\tMatModel,\n\tPageRecordType,\n\tStateNode,\n\tTLNoteShape,\n\tTLPointerEventInfo,\n\tTLShape,\n\tTLShapePartial,\n\tTLTickEventInfo,\n\tVec,\n\tbind,\n\tcompact,\n\tisPageId,\n\tkickoutOccludedShapes,\n} from '@tldraw/editor'\nimport {\n\tNOTE_ADJACENT_POSITION_SNAP_RADIUS,\n\tNOTE_CENTER_OFFSET,\n\tgetAvailableNoteAdjacentPositions,\n} from '../../../shapes/note/noteHelpers'\nimport { DragAndDropManager } from '../DragAndDropManager'\n\nexport type TranslatingInfo = TLPointerEventInfo & {\n\ttarget: 'shape'\n\tisCreating?: boolean\n\tcreatingMarkId?: string\n\tonCreate?(): void\n\tdidStartInPit?: boolean\n\tonInteractionEnd?: string\n}\n\nexport class Translating extends StateNode {\n\tstatic override id = 'translating'\n\n\tinfo = {} as TranslatingInfo\n\n\tselectionSnapshot: TranslatingSnapshot = {} as any\n\n\tsnapshot: TranslatingSnapshot = {} as any\n\n\tmarkId = ''\n\n\tisCloning = false\n\tisCreating = false\n\tonCreate(_shape: TLShape | null): void {\n\t\treturn\n\t}\n\n\tdragAndDropManager = new DragAndDropManager(this.editor)\n\n\toverride onEnter(info: TranslatingInfo) {\n\t\tconst { isCreating = false, creatingMarkId, onCreate = () => void null } = info\n\n\t\tif (!this.editor.getSelectedShapeIds()?.length) {\n\t\t\tthis.parent.transition('idle')\n\t\t\treturn\n\t\t}\n\n\t\tthis.info = info\n\t\tthis.parent.setCurrentToolIdMask(info.onInteractionEnd)\n\t\tthis.isCreating = isCreating\n\n\t\tthis.markId = ''\n\n\t\tif (isCreating) {\n\t\t\tif (creatingMarkId) {\n\t\t\t\tthis.markId = creatingMarkId\n\t\t\t} else {\n\t\t\t\t// handle legacy implicit `creating:{shapeId}` marks\n\t\t\t\tconst markId = this.editor.getMarkIdMatching(\n\t\t\t\t\t`creating:${this.editor.getOnlySelectedShapeId()}`\n\t\t\t\t)\n\t\t\t\tif (markId) {\n\t\t\t\t\tthis.markId = markId\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthis.markId = this.editor.markHistoryStoppingPoint('translating')\n\t\t}\n\n\t\tthis.onCreate = onCreate\n\n\t\tthis.isCloning = false\n\t\tthis.info = info\n\n\t\tthis.editor.setCursor({ type: 'move', rotation: 0 })\n\t\tthis.selectionSnapshot = getTranslatingSnapshot(this.editor)\n\n\t\t// Don't clone on create; otherwise clone on altKey\n\t\tif (!this.isCreating) {\n\t\t\tif (this.editor.inputs.altKey) {\n\t\t\t\tthis.startCloning()\n\t\t\t\tif (this.isCloning) return\n\t\t\t}\n\t\t}\n\n\t\tthis.snapshot = this.selectionSnapshot\n\t\tthis.handleStart()\n\t\tthis.updateShapes()\n\t}\n\n\toverride onExit() {\n\t\tthis.parent.setCurrentToolIdMask(undefined)\n\t\tthis.selectionSnapshot = {} as any\n\t\tthis.snapshot = {} as any\n\t\tthis.editor.snaps.clearIndicators()\n\t\tthis.editor.setCursor({ type: 'default', rotation: 0 })\n\t\tthis.dragAndDropManager.clear()\n\t}\n\n\toverride onTick({ elapsed }: TLTickEventInfo) {\n\t\tconst { editor } = this\n\t\teditor.edgeScrollManager.updateEdgeScrolling(elapsed)\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyDown() {\n\t\tif (this.editor.inputs.altKey && !this.isCloning) {\n\t\t\tthis.startCloning()\n\t\t\tif (this.isCloning) return\n\t\t}\n\n\t\t// need to update in case user pressed a different modifier key\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyUp() {\n\t\tif (!this.editor.inputs.altKey && this.isCloning) {\n\t\t\tthis.stopCloning()\n\t\t\treturn\n\t\t}\n\n\t\t// need to update in case user pressed a different modifier key\n\t\tthis.updateShapes()\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\tprotected startCloning() {\n\t\tif (this.isCreating) return\n\t\tconst shapeIds = Array.from(this.editor.getSelectedShapeIds())\n\n\t\t// If we can't create the shapes, don't even start cloning\n\t\tif (!this.editor.canCreateShapes(shapeIds)) return\n\n\t\tthis.isCloning = true\n\t\tthis.reset()\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('translate cloning')\n\n\t\tthis.editor.duplicateShapes(Array.from(this.editor.getSelectedShapeIds()))\n\n\t\tthis.snapshot = getTranslatingSnapshot(this.editor)\n\t\tthis.handleStart()\n\t\tthis.updateShapes()\n\t}\n\n\tprotected stopCloning() {\n\t\tthis.isCloning = false\n\t\tthis.snapshot = this.selectionSnapshot\n\t\tthis.reset()\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('translate')\n\t\tthis.updateShapes()\n\t}\n\n\treset() {\n\t\tthis.editor.bailToMark(this.markId)\n\t}\n\n\tprotected complete() {\n\t\tthis.updateShapes()\n\t\tthis.dragAndDropManager.dropShapes(this.snapshot.movingShapes)\n\t\tthis.handleEnd()\n\t\tkickoutOccludedShapes(\n\t\t\tthis.editor,\n\t\t\tthis.snapshot.movingShapes.map((s) => s.id)\n\t\t)\n\n\t\tif (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd)\n\t\t} else {\n\t\t\tif (this.isCreating) {\n\t\t\t\tthis.onCreate?.(this.editor.getOnlySelectedShape())\n\t\t\t} else {\n\t\t\t\tthis.parent.transition('idle')\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate cancel() {\n\t\tthis.reset()\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd)\n\t\t} else {\n\t\t\tthis.parent.transition('idle', this.info)\n\t\t}\n\t}\n\n\tprotected handleStart() {\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslateStart?.(shape)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\n\t\tthis.dragAndDropManager.startDraggingShapes(\n\t\t\t// Get fresh shapes from the snapshot, in case onTranslateStart mutates the shape\n\t\t\tcompact(this.snapshot.movingShapes.map((s) => this.editor.getShape(s.id))),\n\t\t\t// Start from the place where the user started dragging\n\t\t\tthis.editor.inputs.originPagePoint,\n\t\t\tthis.updateParentTransforms\n\t\t)\n\n\t\tthis.editor.setHoveredShape(null)\n\t}\n\n\tprotected handleEnd() {\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tif (this.isCloning && movingShapes.length > 0) {\n\t\t\tconst currentAveragePagePoint = Vec.Average(\n\t\t\t\tmovingShapes.map((s) => this.editor.getShapePageTransform(s.id)!.point())\n\t\t\t)\n\t\t\tconst offset = Vec.Sub(currentAveragePagePoint, this.selectionSnapshot.averagePagePoint)\n\t\t\tif (!Vec.IsNaN(offset)) {\n\t\t\t\tthis.editor.updateInstanceState({\n\t\t\t\t\tduplicateProps: {\n\t\t\t\t\t\tshapeIds: movingShapes.map((s) => s.id),\n\t\t\t\t\t\toffset: { x: offset.x, y: offset.y },\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslateEnd?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\tprotected updateShapes() {\n\t\tconst { snapshot } = this\n\n\t\t// We should have started already, but hey\n\t\tthis.dragAndDropManager.startDraggingShapes(\n\t\t\tsnapshot.movingShapes,\n\t\t\tthis.editor.inputs.originPagePoint,\n\t\t\tthis.updateParentTransforms\n\t\t)\n\n\t\tmoveShapesToPoint({\n\t\t\teditor: this.editor,\n\t\t\tsnapshot,\n\t\t})\n\n\t\tconst { movingShapes } = snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslate?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\t@bind\n\tprotected updateParentTransforms() {\n\t\tconst {\n\t\t\teditor,\n\t\t\tsnapshot: { shapeSnapshots },\n\t\t} = this\n\t\tconst movingShapes: TLShape[] = []\n\n\t\tshapeSnapshots.forEach((shapeSnapshot) => {\n\t\t\tconst shape = editor.getShape(shapeSnapshot.shape.id)\n\t\t\tif (!shape) return null\n\t\t\tmovingShapes.push(shape)\n\n\t\t\tconst parentTransform = isPageId(shape.parentId)\n\t\t\t\t? null\n\t\t\t\t: Mat.Inverse(editor.getShapePageTransform(shape.parentId)!)\n\n\t\t\tshapeSnapshot.parentTransform = parentTransform\n\t\t})\n\t}\n}\n\nfunction getTranslatingSnapshot(editor: Editor) {\n\tconst movingShapes: TLShape[] = []\n\tconst pagePoints: Vec[] = []\n\n\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\tconst shapeSnapshots = compact(\n\t\tselectedShapeIds.map((id): null | MovingShapeSnapshot => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return null\n\t\t\tmovingShapes.push(shape)\n\n\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\tconst pagePoint = pageTransform.point()\n\t\t\tconst pageRotation = pageTransform.rotation()\n\n\t\t\tpagePoints.push(pagePoint)\n\n\t\t\tconst parentTransform = PageRecordType.isId(shape.parentId)\n\t\t\t\t? null\n\t\t\t\t: Mat.Inverse(editor.getShapePageTransform(shape.parentId)!)\n\n\t\t\treturn {\n\t\t\t\tshape,\n\t\t\t\tpagePoint,\n\t\t\t\tpageRotation,\n\t\t\t\tparentTransform,\n\t\t\t}\n\t\t})\n\t)\n\n\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\tlet initialSnapPoints: BoundsSnapPoint[] = []\n\n\tif (onlySelectedShape) {\n\t\tinitialSnapPoints = editor.snaps.shapeBounds.getSnapPoints(onlySelectedShape.id)!\n\t} else {\n\t\tconst selectionPageBounds = editor.getSelectionPageBounds()\n\t\tif (selectionPageBounds) {\n\t\t\tinitialSnapPoints = selectionPageBounds.cornersAndCenter.map((p, i) => ({\n\t\t\t\tid: 'selection:' + i,\n\t\t\t\tx: p.x,\n\t\t\t\ty: p.y,\n\t\t\t}))\n\t\t}\n\t}\n\n\tlet noteAdjacentPositions: Vec[] | undefined\n\tlet noteSnapshot: (MovingShapeSnapshot & { shape: TLNoteShape }) | undefined\n\n\tconst { originPagePoint } = editor.inputs\n\n\tconst allHoveredNotes = shapeSnapshots.filter(\n\t\t(s) =>\n\t\t\teditor.isShapeOfType<TLNoteShape>(s.shape, 'note') &&\n\t\t\teditor.isPointInShape(s.shape, originPagePoint)\n\t) as (MovingShapeSnapshot & { shape: TLNoteShape })[]\n\n\tif (allHoveredNotes.length === 0) {\n\t\t// noop\n\t} else if (allHoveredNotes.length === 1) {\n\t\t// just one, easy\n\t\tnoteSnapshot = allHoveredNotes[0]\n\t} else {\n\t\t// More than one under the cursor, so we need to find the highest shape in z-order\n\t\tconst allShapesSorted = editor.getCurrentPageShapesSorted()\n\t\tnoteSnapshot = allHoveredNotes\n\t\t\t.map((s) => ({\n\t\t\t\tsnapshot: s,\n\t\t\t\tindex: allShapesSorted.findIndex((shape) => shape.id === s.shape.id),\n\t\t\t}))\n\t\t\t.sort((a, b) => b.index - a.index)[0]?.snapshot // highest up first\n\t}\n\n\tif (noteSnapshot) {\n\t\tnoteAdjacentPositions = getAvailableNoteAdjacentPositions(\n\t\t\teditor,\n\t\t\tnoteSnapshot.pageRotation,\n\t\t\tnoteSnapshot.shape.props.scale,\n\t\t\tnoteSnapshot.shape.props.growY ?? 0\n\t\t)\n\t}\n\n\treturn {\n\t\taveragePagePoint: Vec.Average(pagePoints),\n\t\tmovingShapes,\n\t\tshapeSnapshots,\n\t\tinitialPageBounds: editor.getSelectionPageBounds()!,\n\t\tinitialSnapPoints,\n\t\tnoteAdjacentPositions,\n\t\tnoteSnapshot,\n\t}\n}\n\nexport type TranslatingSnapshot = ReturnType<typeof getTranslatingSnapshot>\n\nexport interface MovingShapeSnapshot {\n\tshape: TLShape\n\tpagePoint: Vec\n\tpageRotation: number\n\tparentTransform: MatModel | null\n}\n\nexport function moveShapesToPoint({\n\teditor,\n\tsnapshot,\n}: {\n\teditor: Editor\n\tsnapshot: TranslatingSnapshot\n}) {\n\tconst { inputs } = editor\n\n\tconst {\n\t\tnoteSnapshot,\n\t\tnoteAdjacentPositions,\n\t\tinitialPageBounds,\n\t\tinitialSnapPoints,\n\t\tshapeSnapshots,\n\t\taveragePagePoint,\n\t} = snapshot\n\n\tconst isGridMode = editor.getInstanceState().isGridMode\n\n\tconst gridSize = editor.getDocumentSettings().gridSize\n\n\tconst delta = Vec.Sub(inputs.currentPagePoint, inputs.originPagePoint)\n\n\tconst flatten: 'x' | 'y' | null = editor.inputs.shiftKey\n\t\t? Math.abs(delta.x) < Math.abs(delta.y)\n\t\t\t? 'x'\n\t\t\t: 'y'\n\t\t: null\n\n\tif (flatten === 'x') {\n\t\tdelta.x = 0\n\t} else if (flatten === 'y') {\n\t\tdelta.y = 0\n\t}\n\n\t// Provisional snapping\n\teditor.snaps.clearIndicators()\n\n\t// If the user isn't moving super quick\n\tconst isSnapping = editor.user.getIsSnapMode() ? !inputs.ctrlKey : inputs.ctrlKey\n\tlet snappedToPit = false\n\tif (isSnapping && editor.inputs.pointerVelocity.len() < 0.5) {\n\t\t// snapping\n\t\tconst { nudge } = editor.snaps.shapeBounds.snapTranslateShapes({\n\t\t\tdragDelta: delta,\n\t\t\tinitialSelectionPageBounds: initialPageBounds,\n\t\t\tlockedAxis: flatten,\n\t\t\tinitialSelectionSnapPoints: initialSnapPoints,\n\t\t})\n\n\t\tdelta.add(nudge)\n\t} else {\n\t\t// for sticky notes, snap to grid position next to other notes\n\t\tif (noteSnapshot && noteAdjacentPositions) {\n\t\t\tconst { scale } = noteSnapshot.shape.props\n\t\t\tconst pageCenter = noteSnapshot.pagePoint\n\t\t\t\t.clone()\n\t\t\t\t.add(delta)\n\t\t\t\t// use the middle of the note, disregarding extra height\n\t\t\t\t.add(NOTE_CENTER_OFFSET.clone().mul(scale).rot(noteSnapshot.pageRotation))\n\n\t\t\t// Find the pit with the center closest to the put center\n\t\t\tlet min = NOTE_ADJACENT_POSITION_SNAP_RADIUS / editor.getZoomLevel() // in screen space\n\t\t\tlet offset = new Vec(0, 0)\n\t\t\tfor (const pit of noteAdjacentPositions) {\n\t\t\t\t// We've already filtered pits with the same page rotation\n\t\t\t\tconst deltaToPit = Vec.Sub(pageCenter, pit)\n\t\t\t\tconst dist = deltaToPit.len()\n\t\t\t\tif (dist < min) {\n\t\t\t\t\tsnappedToPit = true\n\t\t\t\t\tmin = dist\n\t\t\t\t\toffset = deltaToPit\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdelta.sub(offset)\n\t\t}\n\t}\n\n\tconst averageSnappedPoint = Vec.Add(averagePagePoint, delta)\n\n\t// we don't want to snap to the grid if we're holding the ctrl key, if we've already snapped into a pit, or if we're showing snapping indicators\n\tconst snapIndicators = editor.snaps.getIndicators()\n\tif (isGridMode && !inputs.ctrlKey && !snappedToPit && snapIndicators.length === 0) {\n\t\taverageSnappedPoint.snapToGrid(gridSize)\n\t}\n\n\tconst averageSnap = Vec.Sub(averageSnappedPoint, averagePagePoint)\n\n\teditor.updateShapes(\n\t\tcompact(\n\t\t\tshapeSnapshots.map(({ shape, pagePoint, parentTransform }): TLShapePartial | null => {\n\t\t\t\tconst newPagePoint = Vec.Add(pagePoint, averageSnap)\n\n\t\t\t\tconst newLocalPoint = parentTransform\n\t\t\t\t\t? Mat.applyToPoint(parentTransform, newPagePoint)\n\t\t\t\t\t: newPagePoint\n\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: newLocalPoint.x,\n\t\t\t\t\ty: newLocalPoint.y,\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t)\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiBO;AACP,yBAIO;AACP,gCAAmC;AAvBnC;
|
|
4
|
+
"sourcesContent": ["import {\n\tBoundsSnapPoint,\n\tEditor,\n\tMat,\n\tMatModel,\n\tPageRecordType,\n\tStateNode,\n\tTLNoteShape,\n\tTLPointerEventInfo,\n\tTLShape,\n\tTLShapePartial,\n\tTLTickEventInfo,\n\tVec,\n\tbind,\n\tcompact,\n\tisPageId,\n\tkickoutOccludedShapes,\n} from '@tldraw/editor'\nimport {\n\tNOTE_ADJACENT_POSITION_SNAP_RADIUS,\n\tNOTE_CENTER_OFFSET,\n\tgetAvailableNoteAdjacentPositions,\n} from '../../../shapes/note/noteHelpers'\nimport { DragAndDropManager } from '../DragAndDropManager'\n\nexport type TranslatingInfo = TLPointerEventInfo & {\n\ttarget: 'shape'\n\tisCreating?: boolean\n\tcreatingMarkId?: string\n\tonCreate?(): void\n\tonInteractionEnd?: string\n}\n\nexport class Translating extends StateNode {\n\tstatic override id = 'translating'\n\n\tinfo = {} as TranslatingInfo\n\n\tselectionSnapshot: TranslatingSnapshot = {} as any\n\n\tsnapshot: TranslatingSnapshot = {} as any\n\n\tmarkId = ''\n\n\tisCloning = false\n\tisCreating = false\n\tonCreate(_shape: TLShape | null): void {\n\t\treturn\n\t}\n\n\tdragAndDropManager = new DragAndDropManager(this.editor)\n\n\toverride onEnter(info: TranslatingInfo) {\n\t\tconst { isCreating = false, creatingMarkId, onCreate = () => void null } = info\n\n\t\tif (!this.editor.getSelectedShapeIds()?.length) {\n\t\t\tthis.parent.transition('idle')\n\t\t\treturn\n\t\t}\n\n\t\tthis.info = info\n\t\tthis.parent.setCurrentToolIdMask(info.onInteractionEnd)\n\t\tthis.isCreating = isCreating\n\n\t\tthis.markId = ''\n\n\t\tif (isCreating) {\n\t\t\tif (creatingMarkId) {\n\t\t\t\tthis.markId = creatingMarkId\n\t\t\t} else {\n\t\t\t\t// handle legacy implicit `creating:{shapeId}` marks\n\t\t\t\tconst markId = this.editor.getMarkIdMatching(\n\t\t\t\t\t`creating:${this.editor.getOnlySelectedShapeId()}`\n\t\t\t\t)\n\t\t\t\tif (markId) {\n\t\t\t\t\tthis.markId = markId\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthis.markId = this.editor.markHistoryStoppingPoint('translating')\n\t\t}\n\n\t\tthis.onCreate = onCreate\n\n\t\tthis.isCloning = false\n\t\tthis.info = info\n\n\t\tthis.editor.setCursor({ type: 'move', rotation: 0 })\n\t\tthis.selectionSnapshot = getTranslatingSnapshot(this.editor)\n\n\t\t// Don't clone on create; otherwise clone on altKey\n\t\tif (!this.isCreating) {\n\t\t\tif (this.editor.inputs.altKey) {\n\t\t\t\tthis.startCloning()\n\t\t\t\tif (this.isCloning) return\n\t\t\t}\n\t\t}\n\n\t\tthis.snapshot = this.selectionSnapshot\n\t\tthis.handleStart()\n\t\tthis.updateShapes()\n\t}\n\n\toverride onExit() {\n\t\tthis.parent.setCurrentToolIdMask(undefined)\n\t\tthis.selectionSnapshot = {} as any\n\t\tthis.snapshot = {} as any\n\t\tthis.editor.snaps.clearIndicators()\n\t\tthis.editor.setCursor({ type: 'default', rotation: 0 })\n\t\tthis.dragAndDropManager.clear()\n\t}\n\n\toverride onTick({ elapsed }: TLTickEventInfo) {\n\t\tconst { editor } = this\n\t\teditor.edgeScrollManager.updateEdgeScrolling(elapsed)\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyDown() {\n\t\tif (this.editor.inputs.altKey && !this.isCloning) {\n\t\t\tthis.startCloning()\n\t\t\tif (this.isCloning) return\n\t\t}\n\n\t\t// need to update in case user pressed a different modifier key\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyUp() {\n\t\tif (!this.editor.inputs.altKey && this.isCloning) {\n\t\t\tthis.stopCloning()\n\t\t\treturn\n\t\t}\n\n\t\t// need to update in case user pressed a different modifier key\n\t\tthis.updateShapes()\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\tprotected startCloning() {\n\t\tif (this.isCreating) return\n\t\tconst shapeIds = Array.from(this.editor.getSelectedShapeIds())\n\n\t\t// If we can't create the shapes, don't even start cloning\n\t\tif (!this.editor.canCreateShapes(shapeIds)) return\n\n\t\tthis.isCloning = true\n\t\tthis.reset()\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('translate cloning')\n\n\t\tthis.editor.duplicateShapes(Array.from(this.editor.getSelectedShapeIds()))\n\n\t\tthis.snapshot = getTranslatingSnapshot(this.editor)\n\t\tthis.handleStart()\n\t\tthis.updateShapes()\n\t}\n\n\tprotected stopCloning() {\n\t\tthis.isCloning = false\n\t\tthis.snapshot = this.selectionSnapshot\n\t\tthis.reset()\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('translate')\n\t\tthis.updateShapes()\n\t}\n\n\treset() {\n\t\tthis.editor.bailToMark(this.markId)\n\t}\n\n\tprotected complete() {\n\t\tthis.updateShapes()\n\t\tthis.dragAndDropManager.dropShapes(this.snapshot.movingShapes)\n\t\tthis.handleEnd()\n\t\tkickoutOccludedShapes(\n\t\t\tthis.editor,\n\t\t\tthis.snapshot.movingShapes.map((s) => s.id)\n\t\t)\n\n\t\tif (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd)\n\t\t} else {\n\t\t\tif (this.isCreating) {\n\t\t\t\tthis.onCreate?.(this.editor.getOnlySelectedShape())\n\t\t\t} else {\n\t\t\t\tthis.parent.transition('idle')\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate cancel() {\n\t\t// Call onTranslateCancel callback before resetting\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)\n\t\t\tif (current) {\n\t\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\t\tutil.onTranslateCancel?.(shape, current)\n\t\t\t}\n\t\t})\n\n\t\tthis.reset()\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd)\n\t\t} else {\n\t\t\tthis.parent.transition('idle', this.info)\n\t\t}\n\t}\n\n\tprotected handleStart() {\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslateStart?.(shape)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\n\t\tthis.dragAndDropManager.startDraggingShapes(\n\t\t\t// Get fresh shapes from the snapshot, in case onTranslateStart mutates the shape\n\t\t\tcompact(this.snapshot.movingShapes.map((s) => this.editor.getShape(s.id))),\n\t\t\t// Start from the place where the user started dragging\n\t\t\tthis.editor.inputs.originPagePoint,\n\t\t\tthis.updateParentTransforms\n\t\t)\n\n\t\tthis.editor.setHoveredShape(null)\n\t}\n\n\tprotected handleEnd() {\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tif (this.isCloning && movingShapes.length > 0) {\n\t\t\tconst currentAveragePagePoint = Vec.Average(\n\t\t\t\tmovingShapes.map((s) => this.editor.getShapePageTransform(s.id)!.point())\n\t\t\t)\n\t\t\tconst offset = Vec.Sub(currentAveragePagePoint, this.selectionSnapshot.averagePagePoint)\n\t\t\tif (!Vec.IsNaN(offset)) {\n\t\t\t\tthis.editor.updateInstanceState({\n\t\t\t\t\tduplicateProps: {\n\t\t\t\t\t\tshapeIds: movingShapes.map((s) => s.id),\n\t\t\t\t\t\toffset: { x: offset.x, y: offset.y },\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslateEnd?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\tprotected updateShapes() {\n\t\tconst { snapshot } = this\n\n\t\t// We should have started already, but hey\n\t\tthis.dragAndDropManager.startDraggingShapes(\n\t\t\tsnapshot.movingShapes,\n\t\t\tthis.editor.inputs.originPagePoint,\n\t\t\tthis.updateParentTransforms\n\t\t)\n\n\t\tmoveShapesToPoint({\n\t\t\teditor: this.editor,\n\t\t\tsnapshot,\n\t\t})\n\n\t\tconst { movingShapes } = snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslate?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\t@bind\n\tprotected updateParentTransforms() {\n\t\tconst {\n\t\t\teditor,\n\t\t\tsnapshot: { shapeSnapshots },\n\t\t} = this\n\t\tconst movingShapes: TLShape[] = []\n\n\t\tshapeSnapshots.forEach((shapeSnapshot) => {\n\t\t\tconst shape = editor.getShape(shapeSnapshot.shape.id)\n\t\t\tif (!shape) return null\n\t\t\tmovingShapes.push(shape)\n\n\t\t\tconst parentTransform = isPageId(shape.parentId)\n\t\t\t\t? null\n\t\t\t\t: Mat.Inverse(editor.getShapePageTransform(shape.parentId)!)\n\n\t\t\tshapeSnapshot.parentTransform = parentTransform\n\t\t})\n\t}\n}\n\nfunction getTranslatingSnapshot(editor: Editor) {\n\tconst movingShapes: TLShape[] = []\n\tconst pagePoints: Vec[] = []\n\n\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\tconst shapeSnapshots = compact(\n\t\tselectedShapeIds.map((id): null | MovingShapeSnapshot => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return null\n\t\t\tmovingShapes.push(shape)\n\n\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\tconst pagePoint = pageTransform.point()\n\t\t\tconst pageRotation = pageTransform.rotation()\n\n\t\t\tpagePoints.push(pagePoint)\n\n\t\t\tconst parentTransform = PageRecordType.isId(shape.parentId)\n\t\t\t\t? null\n\t\t\t\t: Mat.Inverse(editor.getShapePageTransform(shape.parentId)!)\n\n\t\t\treturn {\n\t\t\t\tshape,\n\t\t\t\tpagePoint,\n\t\t\t\tpageRotation,\n\t\t\t\tparentTransform,\n\t\t\t}\n\t\t})\n\t)\n\n\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\tlet initialSnapPoints: BoundsSnapPoint[] = []\n\n\tif (onlySelectedShape) {\n\t\tinitialSnapPoints = editor.snaps.shapeBounds.getSnapPoints(onlySelectedShape.id)!\n\t} else {\n\t\tconst selectionPageBounds = editor.getSelectionPageBounds()\n\t\tif (selectionPageBounds) {\n\t\t\tinitialSnapPoints = selectionPageBounds.cornersAndCenter.map((p, i) => ({\n\t\t\t\tid: 'selection:' + i,\n\t\t\t\tx: p.x,\n\t\t\t\ty: p.y,\n\t\t\t}))\n\t\t}\n\t}\n\n\tlet noteAdjacentPositions: Vec[] | undefined\n\tlet noteSnapshot: (MovingShapeSnapshot & { shape: TLNoteShape }) | undefined\n\n\tconst { originPagePoint } = editor.inputs\n\n\tconst allHoveredNotes = shapeSnapshots.filter(\n\t\t(s) =>\n\t\t\teditor.isShapeOfType<TLNoteShape>(s.shape, 'note') &&\n\t\t\teditor.isPointInShape(s.shape, originPagePoint)\n\t) as (MovingShapeSnapshot & { shape: TLNoteShape })[]\n\n\tif (allHoveredNotes.length === 0) {\n\t\t// noop\n\t} else if (allHoveredNotes.length === 1) {\n\t\t// just one, easy\n\t\tnoteSnapshot = allHoveredNotes[0]\n\t} else {\n\t\t// More than one under the cursor, so we need to find the highest shape in z-order\n\t\tconst allShapesSorted = editor.getCurrentPageShapesSorted()\n\t\tnoteSnapshot = allHoveredNotes\n\t\t\t.map((s) => ({\n\t\t\t\tsnapshot: s,\n\t\t\t\tindex: allShapesSorted.findIndex((shape) => shape.id === s.shape.id),\n\t\t\t}))\n\t\t\t.sort((a, b) => b.index - a.index)[0]?.snapshot // highest up first\n\t}\n\n\tif (noteSnapshot) {\n\t\tnoteAdjacentPositions = getAvailableNoteAdjacentPositions(\n\t\t\teditor,\n\t\t\tnoteSnapshot.pageRotation,\n\t\t\tnoteSnapshot.shape.props.scale,\n\t\t\tnoteSnapshot.shape.props.growY ?? 0\n\t\t)\n\t}\n\n\treturn {\n\t\taveragePagePoint: Vec.Average(pagePoints),\n\t\tmovingShapes,\n\t\tshapeSnapshots,\n\t\tinitialPageBounds: editor.getSelectionPageBounds()!,\n\t\tinitialSnapPoints,\n\t\tnoteAdjacentPositions,\n\t\tnoteSnapshot,\n\t}\n}\n\nexport type TranslatingSnapshot = ReturnType<typeof getTranslatingSnapshot>\n\nexport interface MovingShapeSnapshot {\n\tshape: TLShape\n\tpagePoint: Vec\n\tpageRotation: number\n\tparentTransform: MatModel | null\n}\n\nexport function moveShapesToPoint({\n\teditor,\n\tsnapshot,\n}: {\n\teditor: Editor\n\tsnapshot: TranslatingSnapshot\n}) {\n\tconst { inputs } = editor\n\n\tconst {\n\t\tnoteSnapshot,\n\t\tnoteAdjacentPositions,\n\t\tinitialPageBounds,\n\t\tinitialSnapPoints,\n\t\tshapeSnapshots,\n\t\taveragePagePoint,\n\t} = snapshot\n\n\tconst isGridMode = editor.getInstanceState().isGridMode\n\n\tconst gridSize = editor.getDocumentSettings().gridSize\n\n\tconst delta = Vec.Sub(inputs.currentPagePoint, inputs.originPagePoint)\n\n\tconst flatten: 'x' | 'y' | null = editor.inputs.shiftKey\n\t\t? Math.abs(delta.x) < Math.abs(delta.y)\n\t\t\t? 'x'\n\t\t\t: 'y'\n\t\t: null\n\n\tif (flatten === 'x') {\n\t\tdelta.x = 0\n\t} else if (flatten === 'y') {\n\t\tdelta.y = 0\n\t}\n\n\t// Provisional snapping\n\teditor.snaps.clearIndicators()\n\n\t// If the user isn't moving super quick\n\tconst isSnapping = editor.user.getIsSnapMode() ? !inputs.ctrlKey : inputs.ctrlKey\n\tlet snappedToPit = false\n\tif (isSnapping && editor.inputs.pointerVelocity.len() < 0.5) {\n\t\t// snapping\n\t\tconst { nudge } = editor.snaps.shapeBounds.snapTranslateShapes({\n\t\t\tdragDelta: delta,\n\t\t\tinitialSelectionPageBounds: initialPageBounds,\n\t\t\tlockedAxis: flatten,\n\t\t\tinitialSelectionSnapPoints: initialSnapPoints,\n\t\t})\n\n\t\tdelta.add(nudge)\n\t} else {\n\t\t// for sticky notes, snap to grid position next to other notes\n\t\tif (noteSnapshot && noteAdjacentPositions) {\n\t\t\tconst { scale } = noteSnapshot.shape.props\n\t\t\tconst pageCenter = noteSnapshot.pagePoint\n\t\t\t\t.clone()\n\t\t\t\t.add(delta)\n\t\t\t\t// use the middle of the note, disregarding extra height\n\t\t\t\t.add(NOTE_CENTER_OFFSET.clone().mul(scale).rot(noteSnapshot.pageRotation))\n\n\t\t\t// Find the pit with the center closest to the put center\n\t\t\tlet min = NOTE_ADJACENT_POSITION_SNAP_RADIUS / editor.getZoomLevel() // in screen space\n\t\t\tlet offset = new Vec(0, 0)\n\t\t\tfor (const pit of noteAdjacentPositions) {\n\t\t\t\t// We've already filtered pits with the same page rotation\n\t\t\t\tconst deltaToPit = Vec.Sub(pageCenter, pit)\n\t\t\t\tconst dist = deltaToPit.len()\n\t\t\t\tif (dist < min) {\n\t\t\t\t\tsnappedToPit = true\n\t\t\t\t\tmin = dist\n\t\t\t\t\toffset = deltaToPit\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdelta.sub(offset)\n\t\t}\n\t}\n\n\tconst averageSnappedPoint = Vec.Add(averagePagePoint, delta)\n\n\t// we don't want to snap to the grid if we're holding the ctrl key, if we've already snapped into a pit, or if we're showing snapping indicators\n\tconst snapIndicators = editor.snaps.getIndicators()\n\tif (isGridMode && !inputs.ctrlKey && !snappedToPit && snapIndicators.length === 0) {\n\t\taverageSnappedPoint.snapToGrid(gridSize)\n\t}\n\n\tconst averageSnap = Vec.Sub(averageSnappedPoint, averagePagePoint)\n\n\teditor.updateShapes(\n\t\tcompact(\n\t\t\tshapeSnapshots.map(({ shape, pagePoint, parentTransform }): TLShapePartial | null => {\n\t\t\t\tconst newPagePoint = Vec.Add(pagePoint, averageSnap)\n\n\t\t\t\tconst newLocalPoint = parentTransform\n\t\t\t\t\t? Mat.applyToPoint(parentTransform, newPagePoint)\n\t\t\t\t\t: newPagePoint\n\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: newLocalPoint.x,\n\t\t\t\t\ty: newLocalPoint.y,\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts"],
|
|
4
|
-
"sourcesContent": ["import { Editor, TLShape } from '@tldraw/editor'\n\nexport function getHitShapeOnCanvasPointerDown(\n\teditor: Editor,\n\thitLabels = false\n): TLShape | undefined {\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst {\n\t\tinputs: { currentPagePoint },\n\t} = editor\n\n\treturn (\n\t\t// hovered shape at point\n\t\teditor.getShapeAtPoint(currentPagePoint, {\n\t\t\thitInside: false,\n\t\t\thitLabels,\n\t\t\tmargin: editor.options.hitTestMargin / zoomLevel,\n\t\t\trenderingOnly: true,\n\t\t}) ??\n\t\t// selected shape at point\n\t\teditor.getSelectedShapeAtPoint(currentPagePoint)\n\t)\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Editor, TLShape } from '@tldraw/editor'\n\n/** @public */\nexport function getHitShapeOnCanvasPointerDown(\n\teditor: Editor,\n\thitLabels = false\n): TLShape | undefined {\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst {\n\t\tinputs: { currentPagePoint },\n\t} = editor\n\n\treturn (\n\t\t// hovered shape at point\n\t\teditor.getShapeAtPoint(currentPagePoint, {\n\t\t\thitInside: false,\n\t\t\thitLabels,\n\t\t\tmargin: editor.options.hitTestMargin / zoomLevel,\n\t\t\trenderingOnly: true,\n\t\t}) ??\n\t\t// selected shape at point\n\t\teditor.getSelectedShapeAtPoint(currentPagePoint)\n\t)\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,SAAS,+BACf,QACA,YAAY,OACU;AACtB,QAAM,YAAY,OAAO,aAAa;AACtC,QAAM;AAAA,IACL,QAAQ,EAAE,iBAAiB;AAAA,EAC5B,IAAI;AAEJ;AAAA;AAAA,IAEC,OAAO,gBAAgB,kBAAkB;AAAA,MACxC,WAAW;AAAA,MACX;AAAA,MACA,QAAQ,OAAO,QAAQ,gBAAgB;AAAA,MACvC,eAAe;AAAA,IAChB,CAAC;AAAA,IAED,OAAO,wBAAwB,gBAAgB;AAAA;AAEjD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var TldrawUi_exports = {};
|
|
30
30
|
__export(TldrawUi_exports, {
|
|
31
|
-
TldrawUi: () => TldrawUi
|
|
31
|
+
TldrawUi: () => TldrawUi,
|
|
32
|
+
TldrawUiInFrontOfTheCanvas: () => TldrawUiInFrontOfTheCanvas
|
|
32
33
|
});
|
|
33
34
|
module.exports = __toCommonJS(TldrawUi_exports);
|
|
34
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -36,7 +37,6 @@ var import_editor = require("@tldraw/editor");
|
|
|
36
37
|
var import_classnames = __toESM(require("classnames"));
|
|
37
38
|
var import_react = __toESM(require("react"));
|
|
38
39
|
var import_A11y = require("./components/A11y");
|
|
39
|
-
var import_FollowingIndicator = require("./components/FollowingIndicator");
|
|
40
40
|
var import_TldrawUiButton = require("./components/primitives/Button/TldrawUiButton");
|
|
41
41
|
var import_TldrawUiButtonIcon = require("./components/primitives/Button/TldrawUiButtonIcon");
|
|
42
42
|
var import_constants = require("./constants");
|
|
@@ -85,10 +85,6 @@ const TldrawUiContent = import_react.default.memo(function TldrawUI() {
|
|
|
85
85
|
NavigationPanel,
|
|
86
86
|
HelperButtons,
|
|
87
87
|
DebugPanel,
|
|
88
|
-
CursorChatBubble,
|
|
89
|
-
RichTextToolbar,
|
|
90
|
-
ImageToolbar,
|
|
91
|
-
VideoToolbar,
|
|
92
88
|
Toasts,
|
|
93
89
|
Dialogs,
|
|
94
90
|
A11y
|
|
@@ -128,6 +124,18 @@ const TldrawUiContent = import_react.default.memo(function TldrawUI() {
|
|
|
128
124
|
[]
|
|
129
125
|
);
|
|
130
126
|
const { "toggle-focus-mode": toggleFocus } = (0, import_actions.useActions)();
|
|
127
|
+
const { breakpointsAbove, breakpointsBelow } = (0, import_react.useMemo)(() => {
|
|
128
|
+
const breakpointsAbove2 = [];
|
|
129
|
+
const breakpointsBelow2 = [];
|
|
130
|
+
for (let bp = 0; bp < import_constants.PORTRAIT_BREAKPOINTS.length; bp++) {
|
|
131
|
+
if (bp <= breakpoint) {
|
|
132
|
+
breakpointsAbove2.push(bp);
|
|
133
|
+
} else {
|
|
134
|
+
breakpointsBelow2.push(bp);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
return { breakpointsAbove: breakpointsAbove2, breakpointsBelow: breakpointsBelow2 };
|
|
138
|
+
}, [breakpoint]);
|
|
131
139
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
132
140
|
"div",
|
|
133
141
|
{
|
|
@@ -136,6 +144,8 @@ const TldrawUiContent = import_react.default.memo(function TldrawUI() {
|
|
|
136
144
|
}),
|
|
137
145
|
"data-iseditinganything": hideToolbarWhileEditing,
|
|
138
146
|
"data-breakpoint": breakpoint,
|
|
147
|
+
"data-breakpoints-above": breakpointsAbove.join(" "),
|
|
148
|
+
"data-breakpoints-below": breakpointsBelow.join(" "),
|
|
139
149
|
children: [
|
|
140
150
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11y.SkipToMainContent, {}),
|
|
141
151
|
isFocusMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-layout__top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -169,15 +179,20 @@ const TldrawUiContent = import_react.default.memo(function TldrawUI() {
|
|
|
169
179
|
A11y && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(A11y, {})
|
|
170
180
|
] })
|
|
171
181
|
] }),
|
|
172
|
-
RichTextToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichTextToolbar, {}),
|
|
173
|
-
ImageToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageToolbar, {}),
|
|
174
|
-
VideoToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoToolbar, {}),
|
|
175
182
|
Toasts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toasts, {}),
|
|
176
|
-
Dialogs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialogs, {})
|
|
177
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FollowingIndicator.FollowingIndicator, {}),
|
|
178
|
-
CursorChatBubble && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CursorChatBubble, {})
|
|
183
|
+
Dialogs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialogs, {})
|
|
179
184
|
]
|
|
180
185
|
}
|
|
181
186
|
);
|
|
182
187
|
});
|
|
188
|
+
function TldrawUiInFrontOfTheCanvas() {
|
|
189
|
+
const { RichTextToolbar, ImageToolbar, VideoToolbar, CursorChatBubble, FollowingIndicator } = (0, import_components.useTldrawUiComponents)();
|
|
190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
191
|
+
RichTextToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichTextToolbar, {}),
|
|
192
|
+
ImageToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageToolbar, {}),
|
|
193
|
+
VideoToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoToolbar, {}),
|
|
194
|
+
FollowingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FollowingIndicator, {}),
|
|
195
|
+
CursorChatBubble && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CursorChatBubble, {})
|
|
196
|
+
] });
|
|
197
|
+
}
|
|
183
198
|
//# sourceMappingURL=TldrawUi.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/ui/TldrawUi.tsx"],
|
|
4
|
-
"sourcesContent": ["import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { ReactNode, useRef, useState } from 'react'\nimport { TLUiAssetUrlOverrides } from './assetUrls'\nimport { SkipToMainContent } from './components/A11y'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["React", "TldrawUi", "TldrawUiInner", "classNames"]
|
|
4
|
+
"sourcesContent": ["import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { ReactNode, useMemo, useRef, useState } from 'react'\nimport { TLUiAssetUrlOverrides } from './assetUrls'\nimport { SkipToMainContent } from './components/A11y'\nimport { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'\nimport { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from './constants'\nimport {\n\tTLUiContextProviderProps,\n\tTldrawUiContextProvider,\n} from './context/TldrawUiContextProvider'\nimport { useActions } from './context/actions'\nimport { useBreakpoint } from './context/breakpoints'\nimport { TLUiComponents, useTldrawUiComponents } from './context/components'\nimport { useNativeClipboardEvents } from './hooks/useClipboardEvents'\nimport { useEditorEvents } from './hooks/useEditorEvents'\nimport { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'\nimport { useReadonly } from './hooks/useReadonly'\nimport { useTranslation } from './hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TldrawUiProps extends TLUiContextProviderProps {\n\t/**\n\t * The component's children.\n\t */\n\tchildren?: ReactNode\n\n\t/**\n\t * Whether to hide the user interface and only display the canvas.\n\t */\n\thideUi?: boolean\n\n\t/**\n\t * Overrides for the UI components.\n\t */\n\tcomponents?: TLUiComponents\n\n\t/**\n\t * Additional items to add to the debug menu (will be deprecated)\n\t */\n\trenderDebugMenuItems?(): React.ReactNode\n\n\t/** Asset URL override. */\n\tassetUrls?: TLUiAssetUrlOverrides\n}\n\n/**\n * @public\n * @react\n */\nexport const TldrawUi = React.memo(function TldrawUi({\n\trenderDebugMenuItems,\n\tchildren,\n\thideUi,\n\tcomponents,\n\t...rest\n}: TldrawUiProps) {\n\treturn (\n\t\t<TldrawUiContextProvider {...rest} components={components}>\n\t\t\t<TldrawUiInner hideUi={hideUi} renderDebugMenuItems={renderDebugMenuItems}>\n\t\t\t\t{children}\n\t\t\t</TldrawUiInner>\n\t\t</TldrawUiContextProvider>\n\t)\n})\n\ninterface TldrawUiContentProps {\n\thideUi?: boolean\n\tshareZone?: ReactNode\n\ttopZone?: ReactNode\n\trenderDebugMenuItems?(): React.ReactNode\n}\n\nconst TldrawUiInner = React.memo(function TldrawUiInner({\n\tchildren,\n\thideUi,\n\t...rest\n}: TldrawUiContentProps & { children: ReactNode }) {\n\t// The hideUi prop should prevent the UI from mounting.\n\t// If we ever need want the UI to mount and preserve state, then\n\t// we should change this behavior and hide the UI via CSS instead.\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t{hideUi ? null : <TldrawUiContent {...rest} />}\n\t\t</>\n\t)\n})\n\nconst TldrawUiContent = React.memo(function TldrawUI() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst isFocusMode = useValue('focus', () => editor.getInstanceState().isFocusMode, [editor])\n\tconst isDebugMode = useValue('debug', () => editor.getInstanceState().isDebugMode, [editor])\n\n\tconst {\n\t\tSharePanel,\n\t\tTopPanel,\n\t\tMenuPanel,\n\t\tStylePanel,\n\t\tToolbar,\n\t\tHelpMenu,\n\t\tNavigationPanel,\n\t\tHelperButtons,\n\t\tDebugPanel,\n\t\tToasts,\n\t\tDialogs,\n\t\tA11y,\n\t} = useTldrawUiComponents()\n\n\tuseKeyboardShortcuts()\n\tuseNativeClipboardEvents()\n\tuseEditorEvents()\n\n\tconst rIsEditingAnything = useRef(false)\n\tconst rHidingTimeout = useRef(-1 as any)\n\tconst [hideToolbarWhileEditing, setHideToolbarWhileEditing] = useState(false)\n\n\tuseReactor(\n\t\t'update hide toolbar while delayed',\n\t\t() => {\n\t\t\tconst isMobileEnvironment = tlenv.isIos || tlenv.isAndroid\n\t\t\tif (!isMobileEnvironment) return\n\n\t\t\tconst editingShape = editor.getEditingShapeId()\n\t\t\tif (editingShape === null) {\n\t\t\t\tif (rIsEditingAnything.current) {\n\t\t\t\t\trIsEditingAnything.current = false\n\t\t\t\t\tclearTimeout(rHidingTimeout.current)\n\t\t\t\t\tif (tlenv.isAndroid) {\n\t\t\t\t\t\t// On Android, hide it after 150ms\n\t\t\t\t\t\trHidingTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tsetHideToolbarWhileEditing(false)\n\t\t\t\t\t\t}, 150)\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// On iOS, just hide it immediately\n\t\t\t\t\t\tsetHideToolbarWhileEditing(false)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (!rIsEditingAnything.current) {\n\t\t\t\trIsEditingAnything.current = true\n\t\t\t\tclearTimeout(rHidingTimeout.current)\n\t\t\t\tsetHideToolbarWhileEditing(true)\n\t\t\t}\n\t\t},\n\t\t[]\n\t)\n\n\tconst { 'toggle-focus-mode': toggleFocus } = useActions()\n\n\tconst { breakpointsAbove, breakpointsBelow } = useMemo(() => {\n\t\tconst breakpointsAbove = []\n\t\tconst breakpointsBelow = []\n\t\tfor (let bp = 0; bp < PORTRAIT_BREAKPOINTS.length; bp++) {\n\t\t\tif (bp <= breakpoint) {\n\t\t\t\tbreakpointsAbove.push(bp)\n\t\t\t} else {\n\t\t\t\tbreakpointsBelow.push(bp)\n\t\t\t}\n\t\t}\n\t\treturn { breakpointsAbove, breakpointsBelow }\n\t}, [breakpoint])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tlui-layout', {\n\t\t\t\t'tlui-layout__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t})}\n\t\t\t// When the virtual keyboard is opening we want it to hide immediately.\n\t\t\t// But when the virtual keyboard is closing we want to wait a bit before showing it again.\n\t\t\tdata-iseditinganything={hideToolbarWhileEditing}\n\t\t\tdata-breakpoint={breakpoint}\n\t\t\tdata-breakpoints-above={breakpointsAbove.join(' ')}\n\t\t\tdata-breakpoints-below={breakpointsBelow.join(' ')}\n\t\t>\n\t\t\t<SkipToMainContent />\n\t\t\t{isFocusMode ? (\n\t\t\t\t<div className=\"tlui-layout__top\">\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-focus-button\"\n\t\t\t\t\t\ttitle={msg('focus-mode.toggle-focus-mode')}\n\t\t\t\t\t\tonClick={() => toggleFocus.onSelect('menu')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"dot\" />\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"tlui-layout__top\">\n\t\t\t\t\t\t<div className=\"tlui-layout__top__left\">\n\t\t\t\t\t\t\t{MenuPanel && <MenuPanel />}\n\t\t\t\t\t\t\t{HelperButtons && <HelperButtons />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"tlui-layout__top__center\">{TopPanel && <TopPanel />}</div>\n\t\t\t\t\t\t<div className=\"tlui-layout__top__right\">\n\t\t\t\t\t\t\t{SharePanel && <SharePanel />}\n\t\t\t\t\t\t\t{StylePanel && breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (\n\t\t\t\t\t\t\t\t<StylePanel />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"tlui-layout__bottom\">\n\t\t\t\t\t\t<div className=\"tlui-layout__bottom__main\">\n\t\t\t\t\t\t\t{NavigationPanel && <NavigationPanel />}\n\t\t\t\t\t\t\t{Toolbar && <Toolbar />}\n\t\t\t\t\t\t\t{HelpMenu && <HelpMenu />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{isDebugMode && DebugPanel && <DebugPanel />}\n\t\t\t\t\t\t{A11y && <A11y />}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{Toasts && <Toasts />}\n\t\t\t{Dialogs && <Dialogs />}\n\t\t</div>\n\t)\n})\n\n/** @public @react */\nexport function TldrawUiInFrontOfTheCanvas() {\n\tconst { RichTextToolbar, ImageToolbar, VideoToolbar, CursorChatBubble, FollowingIndicator } =\n\t\tuseTldrawUiComponents()\n\n\treturn (\n\t\t<>\n\t\t\t{RichTextToolbar && <RichTextToolbar />}\n\t\t\t{ImageToolbar && <ImageToolbar />}\n\t\t\t{VideoToolbar && <VideoToolbar />}\n\t\t\t{FollowingIndicator && <FollowingIndicator />}\n\t\t\t{CursorChatBubble && <CursorChatBubble />}\n\t\t</>\n\t)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "TldrawUi", "TldrawUiInner", "breakpointsAbove", "breakpointsBelow", "classNames"]
|
|
7
7
|
}
|
|
@@ -124,19 +124,21 @@ const useSelectedShapesAnnouncer = () => {
|
|
|
124
124
|
() => {
|
|
125
125
|
if (!editor) return;
|
|
126
126
|
const isInSelecting = editor.isIn("select.idle");
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
rPrevSelectedShapeIds.current
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
127
|
+
if (isInSelecting) {
|
|
128
|
+
const selectedShapeIds = editor.getSelectedShapeIds();
|
|
129
|
+
if (selectedShapeIds !== rPrevSelectedShapeIds.current) {
|
|
130
|
+
rPrevSelectedShapeIds.current = selectedShapeIds;
|
|
131
|
+
(0, import_editor.unsafe__withoutCapture)(() => {
|
|
132
|
+
const a11yLive = generateShapeAnnouncementMessage({
|
|
133
|
+
editor,
|
|
134
|
+
selectedShapeIds,
|
|
135
|
+
msg
|
|
136
|
+
});
|
|
137
|
+
if (a11yLive) {
|
|
138
|
+
a11y.announce({ msg: a11yLive });
|
|
139
|
+
}
|
|
135
140
|
});
|
|
136
|
-
|
|
137
|
-
a11y.announce({ msg: a11yLive });
|
|
138
|
-
}
|
|
139
|
-
});
|
|
141
|
+
}
|
|
140
142
|
}
|
|
141
143
|
},
|
|
142
144
|
[editor, a11y, msg]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/ui/components/A11y.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tdebugFlags,\n\tEditor,\n\tstopEventPropagation,\n\tTLGeoShape,\n\tTLShapeId,\n\tunsafe__withoutCapture,\n\tuseContainer,\n\tuseEditor,\n\tuseMaybeEditor,\n\tuseReactor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { memo, MouseEvent, useCallback, useEffect, useRef } from 'react'\nimport { useA11y } from '../context/a11y'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\n\nexport function SkipToMainContent() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst button = useRef<HTMLButtonElement>(null)\n\n\tconst handleNavigateToFirstShape = useCallback(\n\t\t(e: MouseEvent | KeyboardEvent) => {\n\t\t\tstopEventPropagation(e)\n\t\t\tbutton.current?.blur()\n\t\t\tconst shapes = editor.getCurrentPageShapesInReadingOrder()\n\t\t\tif (!shapes.length) return\n\t\t\teditor.setSelectedShapes([shapes[0].id])\n\t\t\teditor.zoomToSelectionIfOffscreen(256, {\n\t\t\t\tanimation: {\n\t\t\t\t\tduration: editor.options.animationMediumMs,\n\t\t\t\t},\n\t\t\t\tinset: 0,\n\t\t\t})\n\n\t\t\t// N.B. If we don't do this, then we go into editing mode for some reason...\n\t\t\t// Not sure of a better solution at the moment...\n\t\t\teditor.timers.setTimeout(() => editor.getContainer().focus(), 100)\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiButton\n\t\t\tref={button}\n\t\t\ttype=\"low\"\n\t\t\ttabIndex={0}\n\t\t\tclassName=\"tl-skip-to-main-content\"\n\t\t\tonClick={handleNavigateToFirstShape}\n\t\t>\n\t\t\t{msg('a11y.skip-to-main-content')}\n\t\t</TldrawUiButton>\n\t)\n}\n\n/** @public @react */\nexport const DefaultA11yAnnouncer = memo(function TldrawUiA11yAnnouncer() {\n\tconst a11y = useA11y()\n\tconst translation = useTranslation()\n\tconst msg = useValue('a11y-msg', () => a11y.currentMsg.get(), [])\n\tuseA11yDebug(msg.msg)\n\n\tuseSelectedShapesAnnouncer()\n\n\treturn (\n\t\tmsg.msg && (\n\t\t\t<div\n\t\t\t\taria-label={translation('a11y.status')}\n\t\t\t\taria-live={msg.priority || 'assertive'}\n\t\t\t\trole=\"status\"\n\t\t\t\taria-hidden=\"false\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: '-10000px',\n\t\t\t\t\tleft: '-10000px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{msg.msg}\n\t\t\t</div>\n\t\t)\n\t)\n})\n\n/**\n * Core function to generate accessibility announcements for selected shapes\n * @public\n */\nexport function generateShapeAnnouncementMessage(args: {\n\teditor: Editor\n\tselectedShapeIds: TLShapeId[]\n\tmsg(id: string, values?: Record<string, any>): string\n}) {\n\tconst { editor, selectedShapeIds, msg } = args\n\tlet a11yLive = ''\n\tconst numShapes = selectedShapeIds.length\n\n\tif (numShapes > 1) {\n\t\ta11yLive = msg('a11y.multiple-shapes').replace('{num}', numShapes.toString())\n\t} else if (numShapes === 1) {\n\t\tconst shapeId = selectedShapeIds[0]\n\t\tconst shape = editor.getShape(shapeId)\n\t\tif (!shape) return ''\n\n\t\tconst shapeUtil = editor.getShapeUtil(shape.type)\n\n\t\tconst isMedia = ['image', 'video'].includes(shape.type)\n\t\t// Yeah, yeah this is a bit of a hack, we should get better translations.\n\t\tlet shapeType = ''\n\t\tif (shape.type === 'geo') {\n\t\t\tshapeType = msg(`geo-style.${(shape as TLGeoShape).props.geo}`)\n\t\t} else if (isMedia) {\n\t\t\tshapeType = msg(`a11y.shape-${shape.type}`)\n\t\t} else {\n\t\t\tshapeType = msg(`tool.${shape.type}`)\n\t\t}\n\n\t\t// Get shape index in reading order\n\t\tconst readingOrderShapes = editor.getCurrentPageShapesInReadingOrder()\n\t\tconst currentShapeIndex = (readingOrderShapes.findIndex((s) => s.id === shapeId) + 1).toString()\n\t\tconst totalShapes = readingOrderShapes.length.toString()\n\t\tconst shapeIndex = msg('a11y.shape-index')\n\t\t\t.replace('{num}', currentShapeIndex)\n\t\t\t.replace('{total}', totalShapes)\n\n\t\t// Get describing text (alt text or shape text)\n\t\tconst describingText = shapeUtil.getAriaDescriptor(shape) || shapeUtil.getText(shape) || ''\n\n\t\t// Build the full announcement\n\t\ta11yLive = (describingText ? `${describingText}, ` : '') + `${shapeType}. ${shapeIndex}`\n\t}\n\n\treturn a11yLive\n}\n\n/** @public */\nexport const useSelectedShapesAnnouncer = () => {\n\tconst editor = useMaybeEditor()\n\tconst a11y = useA11y()\n\tconst msg = useTranslation()\n\n\tconst rPrevSelectedShapeIds = useRef<string[]>([])\n\n\tuseReactor(\n\t\t'announce selection',\n\t\t() => {\n\t\t\tif (!editor) return\n\n\t\t\tconst isInSelecting = editor.isIn('select.idle')\n\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\tif (
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import {\n\tdebugFlags,\n\tEditor,\n\tstopEventPropagation,\n\tTLGeoShape,\n\tTLShapeId,\n\tunsafe__withoutCapture,\n\tuseContainer,\n\tuseEditor,\n\tuseMaybeEditor,\n\tuseReactor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { memo, MouseEvent, useCallback, useEffect, useRef } from 'react'\nimport { useA11y } from '../context/a11y'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\n\nexport function SkipToMainContent() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst button = useRef<HTMLButtonElement>(null)\n\n\tconst handleNavigateToFirstShape = useCallback(\n\t\t(e: MouseEvent | KeyboardEvent) => {\n\t\t\tstopEventPropagation(e)\n\t\t\tbutton.current?.blur()\n\t\t\tconst shapes = editor.getCurrentPageShapesInReadingOrder()\n\t\t\tif (!shapes.length) return\n\t\t\teditor.setSelectedShapes([shapes[0].id])\n\t\t\teditor.zoomToSelectionIfOffscreen(256, {\n\t\t\t\tanimation: {\n\t\t\t\t\tduration: editor.options.animationMediumMs,\n\t\t\t\t},\n\t\t\t\tinset: 0,\n\t\t\t})\n\n\t\t\t// N.B. If we don't do this, then we go into editing mode for some reason...\n\t\t\t// Not sure of a better solution at the moment...\n\t\t\teditor.timers.setTimeout(() => editor.getContainer().focus(), 100)\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiButton\n\t\t\tref={button}\n\t\t\ttype=\"low\"\n\t\t\ttabIndex={0}\n\t\t\tclassName=\"tl-skip-to-main-content\"\n\t\t\tonClick={handleNavigateToFirstShape}\n\t\t>\n\t\t\t{msg('a11y.skip-to-main-content')}\n\t\t</TldrawUiButton>\n\t)\n}\n\n/** @public @react */\nexport const DefaultA11yAnnouncer = memo(function TldrawUiA11yAnnouncer() {\n\tconst a11y = useA11y()\n\tconst translation = useTranslation()\n\tconst msg = useValue('a11y-msg', () => a11y.currentMsg.get(), [])\n\tuseA11yDebug(msg.msg)\n\n\tuseSelectedShapesAnnouncer()\n\n\treturn (\n\t\tmsg.msg && (\n\t\t\t<div\n\t\t\t\taria-label={translation('a11y.status')}\n\t\t\t\taria-live={msg.priority || 'assertive'}\n\t\t\t\trole=\"status\"\n\t\t\t\taria-hidden=\"false\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: '-10000px',\n\t\t\t\t\tleft: '-10000px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{msg.msg}\n\t\t\t</div>\n\t\t)\n\t)\n})\n\n/**\n * Core function to generate accessibility announcements for selected shapes\n * @public\n */\nexport function generateShapeAnnouncementMessage(args: {\n\teditor: Editor\n\tselectedShapeIds: TLShapeId[]\n\tmsg(id: string, values?: Record<string, any>): string\n}) {\n\tconst { editor, selectedShapeIds, msg } = args\n\tlet a11yLive = ''\n\tconst numShapes = selectedShapeIds.length\n\n\tif (numShapes > 1) {\n\t\ta11yLive = msg('a11y.multiple-shapes').replace('{num}', numShapes.toString())\n\t} else if (numShapes === 1) {\n\t\tconst shapeId = selectedShapeIds[0]\n\t\tconst shape = editor.getShape(shapeId)\n\t\tif (!shape) return ''\n\n\t\tconst shapeUtil = editor.getShapeUtil(shape.type)\n\n\t\tconst isMedia = ['image', 'video'].includes(shape.type)\n\t\t// Yeah, yeah this is a bit of a hack, we should get better translations.\n\t\tlet shapeType = ''\n\t\tif (shape.type === 'geo') {\n\t\t\tshapeType = msg(`geo-style.${(shape as TLGeoShape).props.geo}`)\n\t\t} else if (isMedia) {\n\t\t\tshapeType = msg(`a11y.shape-${shape.type}`)\n\t\t} else {\n\t\t\tshapeType = msg(`tool.${shape.type}`)\n\t\t}\n\n\t\t// Get shape index in reading order\n\t\tconst readingOrderShapes = editor.getCurrentPageShapesInReadingOrder()\n\t\tconst currentShapeIndex = (readingOrderShapes.findIndex((s) => s.id === shapeId) + 1).toString()\n\t\tconst totalShapes = readingOrderShapes.length.toString()\n\t\tconst shapeIndex = msg('a11y.shape-index')\n\t\t\t.replace('{num}', currentShapeIndex)\n\t\t\t.replace('{total}', totalShapes)\n\n\t\t// Get describing text (alt text or shape text)\n\t\tconst describingText = shapeUtil.getAriaDescriptor(shape) || shapeUtil.getText(shape) || ''\n\n\t\t// Build the full announcement\n\t\ta11yLive = (describingText ? `${describingText}, ` : '') + `${shapeType}. ${shapeIndex}`\n\t}\n\n\treturn a11yLive\n}\n\n/** @public */\nexport const useSelectedShapesAnnouncer = () => {\n\tconst editor = useMaybeEditor()\n\tconst a11y = useA11y()\n\tconst msg = useTranslation()\n\n\tconst rPrevSelectedShapeIds = useRef<string[]>([])\n\n\tuseReactor(\n\t\t'announce selection',\n\t\t() => {\n\t\t\tif (!editor) return\n\n\t\t\tconst isInSelecting = editor.isIn('select.idle')\n\t\t\tif (isInSelecting) {\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds !== rPrevSelectedShapeIds.current) {\n\t\t\t\t\trPrevSelectedShapeIds.current = selectedShapeIds\n\t\t\t\t\tunsafe__withoutCapture(() => {\n\t\t\t\t\t\tconst a11yLive = generateShapeAnnouncementMessage({\n\t\t\t\t\t\t\teditor,\n\t\t\t\t\t\t\tselectedShapeIds,\n\t\t\t\t\t\t\tmsg,\n\t\t\t\t\t\t})\n\n\t\t\t\t\t\tif (a11yLive) {\n\t\t\t\t\t\t\ta11y.announce({ msg: a11yLive })\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, a11y, msg]\n\t)\n}\n\nconst useA11yDebug = (msg: string | undefined) => {\n\tconst container = useContainer()\n\n\tuseEffect(() => {\n\t\tif (debugFlags.a11y.get()) {\n\t\t\tconst log = (msg: string) => {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.debug(\n\t\t\t\t\t`%ca11y%c: ${msg}`,\n\t\t\t\t\t`color: white; background: #40C057; padding: 2px;border-radius: 3px;`,\n\t\t\t\t\t'font-weight: normal'\n\t\t\t\t)\n\t\t\t}\n\t\t\tconst handleKeyUp = (e: KeyboardEvent) => {\n\t\t\t\tconst el = document.activeElement\n\t\t\t\tif (\n\t\t\t\t\te.key === 'Tab' &&\n\t\t\t\t\tel &&\n\t\t\t\t\tel !== document.body &&\n\t\t\t\t\t!el.classList.contains('tl-container')\n\t\t\t\t) {\n\t\t\t\t\tconst label = el.getAttribute('aria-label') || el.getAttribute('title') || el.textContent\n\t\t\t\t\tif (label) {\n\t\t\t\t\t\tlog(label)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (msg) {\n\t\t\t\tlog(msg)\n\t\t\t}\n\n\t\t\tdocument.addEventListener('keyup', handleKeyUp)\n\t\t\treturn () => document.removeEventListener('keyup', handleKeyUp)\n\t\t}\n\t}, [container, msg])\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["msg"]
|
|
7
7
|
}
|