@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.1
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 +493 -170
- package/dist-cjs/index.js +14 -23
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/TldrawEditor.js +3 -0
- package/dist-cjs/lib/TldrawEditor.js.map +2 -2
- package/dist-cjs/lib/components/MenuClickCapture.js +93 -47
- package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
- package/dist-cjs/lib/components/default-components/CanvasOverlays.js +180 -0
- package/dist-cjs/lib/components/default-components/CanvasOverlays.js.map +7 -0
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js +46 -248
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
- package/dist-cjs/lib/editor/Editor.js +142 -33
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/assets/AssetUtil.js +1 -0
- package/dist-cjs/lib/editor/assets/AssetUtil.js.map +1 -1
- package/dist-cjs/lib/editor/bindings/BindingUtil.js +1 -0
- package/dist-cjs/lib/editor/bindings/BindingUtil.js.map +1 -1
- package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js +1 -0
- package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +98 -0
- package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +7 -0
- package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +1 -0
- package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +1 -0
- package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/FontManager/FontManager.js +2 -0
- package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js +2 -0
- package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js +12 -0
- package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js +1 -0
- package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js +1 -0
- package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +1 -1
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +1 -0
- package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +1 -1
- package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +2 -1
- package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +1 -0
- package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +1 -0
- package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js +1 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +14 -0
- package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +2 -2
- package/dist-cjs/lib/editor/managers/TickManager/TickManager.js +1 -0
- package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +2 -0
- package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +1 -1
- package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
- package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
- package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +161 -0
- package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
- package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js +39 -0
- package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js.map +7 -0
- package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +79 -0
- package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +7 -0
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +36 -23
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +32 -2
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/tools/StateNode.js +1 -0
- package/dist-cjs/lib/editor/tools/StateNode.js.map +1 -1
- package/dist-cjs/lib/editor/types/event-types.js.map +2 -2
- package/dist-cjs/lib/exports/ExportDelay.js +1 -0
- package/dist-cjs/lib/exports/ExportDelay.js.map +1 -1
- package/dist-cjs/lib/exports/StyleEmbedder.js +1 -0
- package/dist-cjs/lib/exports/StyleEmbedder.js.map +1 -1
- package/dist-cjs/lib/exports/fetchCache.js +1 -1
- package/dist-cjs/lib/exports/fetchCache.js.map +2 -2
- package/dist-cjs/lib/exports/getSvgJsx.js +2 -1
- package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
- package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
- package/dist-cjs/lib/hooks/useCanvasEvents.js +25 -4
- package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
- package/dist-cjs/lib/hooks/useEditorComponents.js +0 -28
- package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
- package/dist-cjs/lib/hooks/usePeerIds.js +1 -36
- package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
- package/dist-cjs/lib/hooks/useShapeCulling.js +2 -1
- package/dist-cjs/lib/hooks/useShapeCulling.js.map +2 -2
- package/dist-cjs/lib/options.js +1 -0
- package/dist-cjs/lib/options.js.map +2 -2
- package/dist-cjs/lib/primitives/Vec.js +3 -0
- package/dist-cjs/lib/primitives/Vec.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Circle2d.js +1 -0
- package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +1 -0
- package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js +2 -0
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +1 -1
- package/dist-cjs/lib/primitives/geometry/Stadium2d.js +1 -0
- package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +1 -1
- package/dist-cjs/lib/utils/EditorAtom.js +2 -0
- package/dist-cjs/lib/utils/EditorAtom.js.map +1 -1
- package/dist-cjs/lib/utils/reparenting.js +20 -7
- package/dist-cjs/lib/utils/reparenting.js.map +2 -2
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +5 -0
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
- package/dist-cjs/version.js +4 -4
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.d.mts +493 -170
- package/dist-esm/index.mjs +21 -41
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +3 -0
- package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
- package/dist-esm/lib/components/MenuClickCapture.mjs +94 -48
- package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +160 -0
- package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +47 -249
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
- package/dist-esm/lib/editor/Editor.mjs +143 -35
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/assets/AssetUtil.mjs +1 -0
- package/dist-esm/lib/editor/assets/AssetUtil.mjs.map +1 -1
- package/dist-esm/lib/editor/bindings/BindingUtil.mjs +1 -0
- package/dist-esm/lib/editor/bindings/BindingUtil.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +83 -0
- package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +7 -0
- package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs +2 -0
- package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs +2 -0
- package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs +12 -0
- package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs +1 -0
- package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +1 -0
- package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +2 -1
- package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +14 -0
- package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs +1 -0
- package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +2 -0
- package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +1 -1
- package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
- package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
- package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +141 -0
- package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs +19 -0
- package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs.map +7 -0
- package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +59 -0
- package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +7 -0
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +36 -23
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +32 -2
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/tools/StateNode.mjs +1 -0
- package/dist-esm/lib/editor/tools/StateNode.mjs.map +1 -1
- package/dist-esm/lib/editor/types/event-types.mjs.map +2 -2
- package/dist-esm/lib/exports/ExportDelay.mjs +1 -0
- package/dist-esm/lib/exports/ExportDelay.mjs.map +1 -1
- package/dist-esm/lib/exports/StyleEmbedder.mjs +1 -0
- package/dist-esm/lib/exports/StyleEmbedder.mjs.map +1 -1
- package/dist-esm/lib/exports/fetchCache.mjs +2 -2
- package/dist-esm/lib/exports/fetchCache.mjs.map +2 -2
- package/dist-esm/lib/exports/getSvgJsx.mjs +2 -1
- package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
- package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs +25 -4
- package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
- package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -28
- package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
- package/dist-esm/lib/hooks/usePeerIds.mjs +2 -40
- package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
- package/dist-esm/lib/hooks/useShapeCulling.mjs +2 -1
- package/dist-esm/lib/hooks/useShapeCulling.mjs.map +2 -2
- package/dist-esm/lib/options.mjs +1 -0
- package/dist-esm/lib/options.mjs.map +2 -2
- package/dist-esm/lib/primitives/Vec.mjs +3 -0
- package/dist-esm/lib/primitives/Vec.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Circle2d.mjs +1 -0
- package/dist-esm/lib/primitives/geometry/Circle2d.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +1 -0
- package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +2 -0
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +1 -1
- package/dist-esm/lib/primitives/geometry/Stadium2d.mjs +1 -0
- package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +1 -1
- package/dist-esm/lib/utils/EditorAtom.mjs +2 -0
- package/dist-esm/lib/utils/EditorAtom.mjs.map +1 -1
- package/dist-esm/lib/utils/reparenting.mjs +20 -7
- package/dist-esm/lib/utils/reparenting.mjs.map +2 -2
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +5 -0
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
- package/dist-esm/version.mjs +4 -4
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +4 -243
- package/package.json +7 -7
- package/src/index.ts +18 -39
- package/src/lib/TldrawEditor.tsx +9 -0
- package/src/lib/components/MenuClickCapture.tsx +124 -64
- package/src/lib/components/default-components/CanvasOverlays.tsx +208 -0
- package/src/lib/components/default-components/DefaultCanvas.tsx +51 -322
- package/src/lib/editor/Editor.test.ts +3 -1
- package/src/lib/editor/Editor.ts +167 -38
- package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +98 -0
- package/src/lib/editor/managers/InputsManager/InputsManager.ts +12 -0
- package/src/lib/editor/managers/SnapManager/SnapManager.test.ts +13 -2
- package/src/lib/editor/managers/SnapManager/SnapManager.ts +1 -1
- package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +14 -0
- package/src/lib/editor/overlays/OverlayManager.ts +183 -0
- package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
- package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +216 -0
- package/src/lib/editor/overlays/getOverlayDisplayValues.ts +51 -0
- package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +128 -0
- package/src/lib/editor/shapes/ShapeUtil.ts +45 -26
- package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +40 -3
- package/src/lib/editor/types/event-types.ts +2 -0
- package/src/lib/exports/fetchCache.ts +2 -4
- package/src/lib/exports/getSvgJsx.test.ts +3 -1
- package/src/lib/exports/getSvgJsx.tsx +2 -1
- package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
- package/src/lib/hooks/useCanvasEvents.ts +45 -3
- package/src/lib/hooks/useEditorComponents.tsx +0 -28
- package/src/lib/hooks/usePeerIds.ts +6 -55
- package/src/lib/hooks/useShapeCulling.tsx +3 -1
- package/src/lib/options.ts +7 -0
- package/src/lib/utils/reparenting.ts +22 -9
- package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -0
- package/src/version.ts +4 -4
- package/dist-cjs/lib/components/GeometryDebuggingView.js +0 -115
- package/dist-cjs/lib/components/GeometryDebuggingView.js.map +0 -7
- package/dist-cjs/lib/components/LiveCollaborators.js +0 -151
- package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -227
- package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
- package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultCursor.js +0 -59
- package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
- package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultHandles.js +0 -28
- package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
- package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
- package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js +0 -28
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -101
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
- package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
- package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
- package/dist-cjs/lib/hooks/useHandleEvents.js +0 -100
- package/dist-cjs/lib/hooks/useHandleEvents.js.map +0 -7
- package/dist-cjs/lib/hooks/useSelectionEvents.js +0 -98
- package/dist-cjs/lib/hooks/useSelectionEvents.js.map +0 -7
- package/dist-esm/lib/components/GeometryDebuggingView.mjs +0 -95
- package/dist-esm/lib/components/GeometryDebuggingView.mjs.map +0 -7
- package/dist-esm/lib/components/LiveCollaborators.mjs +0 -134
- package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -207
- package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
- package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultCursor.mjs +0 -29
- package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
- package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
- package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
- package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
- package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -81
- package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
- package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
- package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
- package/dist-esm/lib/hooks/useHandleEvents.mjs +0 -70
- package/dist-esm/lib/hooks/useHandleEvents.mjs.map +0 -7
- package/dist-esm/lib/hooks/useSelectionEvents.mjs +0 -78
- package/dist-esm/lib/hooks/useSelectionEvents.mjs.map +0 -7
- package/src/lib/components/GeometryDebuggingView.tsx +0 -108
- package/src/lib/components/LiveCollaborators.tsx +0 -174
- package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -289
- package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
- package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
- package/src/lib/components/default-components/DefaultCursor.tsx +0 -59
- package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
- package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
- package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
- package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
- package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
- package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
- package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -116
- package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
- package/src/lib/hooks/useHandleEvents.ts +0 -88
- package/src/lib/hooks/useSelectionEvents.ts +0 -97
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultScribble.tsx"],
|
|
4
|
-
"sourcesContent": ["import { TLScribble } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'\n\n/** @public */\nexport interface TLScribbleProps {\n\tuserId?: string\n\tscribble: TLScribble\n\tzoom: number\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={getSvgPathFromPoints(scribble.points, false)}\n\t\t\t\tstroke={color ?? `var(--tl-color-${scribble.color})`}\n\t\t\t\tfill=\"none\"\n\t\t\t\tstrokeWidth={8 / zoom}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
-
"mappings": "AAoBG;AAnBH,OAAO,gBAAgB;AACvB,SAAS,4BAA4B;AAa9B,SAAS,gBAAgB,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC/F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,SACC,oBAAC,SAAI,WAAW,YAAY,WAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,GAAG,qBAAqB,SAAS,QAAQ,KAAK;AAAA,MAC9C,QAAQ,SAAS,kBAAkB,SAAS,KAAK;AAAA,MACjD,MAAK;AAAA,MACL,aAAa,IAAI;AAAA,MACjB,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useValue } from "@tldraw/state-react";
|
|
3
|
-
import classNames from "classnames";
|
|
4
|
-
import { useRef } from "react";
|
|
5
|
-
import { useEditor } from "../../hooks/useEditor.mjs";
|
|
6
|
-
import { useTransform } from "../../hooks/useTransform.mjs";
|
|
7
|
-
import { Box } from "../../primitives/Box.mjs";
|
|
8
|
-
import { toDomPrecision } from "../../primitives/utils.mjs";
|
|
9
|
-
function DefaultSelectionForeground({ bounds, rotation }) {
|
|
10
|
-
const editor = useEditor();
|
|
11
|
-
const rSvg = useRef(null);
|
|
12
|
-
const onlyShape = useValue("only selected shape", () => editor.getOnlySelectedShape(), [editor]);
|
|
13
|
-
const expandOutlineBy = onlyShape ? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape) : 0;
|
|
14
|
-
useTransform(rSvg, bounds?.x, bounds?.y, 1, rotation, {
|
|
15
|
-
x: -expandOutlineBy,
|
|
16
|
-
y: -expandOutlineBy
|
|
17
|
-
});
|
|
18
|
-
bounds = expandOutlineBy instanceof Box ? bounds.clone().expand(expandOutlineBy).zeroFix() : bounds.clone().expandBy(expandOutlineBy).zeroFix();
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
-
"svg",
|
|
21
|
-
{
|
|
22
|
-
ref: rSvg,
|
|
23
|
-
className: "tl-overlays__item tl-selection__fg",
|
|
24
|
-
"data-testid": "selection-foreground",
|
|
25
|
-
children: /* @__PURE__ */ jsx(
|
|
26
|
-
"rect",
|
|
27
|
-
{
|
|
28
|
-
className: classNames("tl-selection__fg__outline"),
|
|
29
|
-
width: toDomPrecision(bounds.width),
|
|
30
|
-
height: toDomPrecision(bounds.height)
|
|
31
|
-
}
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
export {
|
|
37
|
-
DefaultSelectionForeground
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=DefaultSelectionForeground.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultSelectionForeground.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLSelectionForegroundProps {\n\tbounds: Box\n\trotation: number\n}\n\n/** @public @react */\nexport function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps) {\n\tconst editor = useEditor()\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tconst onlyShape = useValue('only selected shape', () => editor.getOnlySelectedShape(), [editor])\n\n\t// if all shapes have an expandBy for the selection outline, we can expand by the l\n\tconst expandOutlineBy = onlyShape\n\t\t? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape)\n\t\t: 0\n\n\tuseTransform(rSvg, bounds?.x, bounds?.y, 1, rotation, {\n\t\tx: -expandOutlineBy,\n\t\ty: -expandOutlineBy,\n\t})\n\n\tbounds =\n\t\texpandOutlineBy instanceof Box\n\t\t\t? bounds.clone().expand(expandOutlineBy).zeroFix()\n\t\t\t: bounds.clone().expandBy(expandOutlineBy).zeroFix()\n\n\treturn (\n\t\t<svg\n\t\t\tref={rSvg}\n\t\t\tclassName=\"tl-overlays__item tl-selection__fg\"\n\t\t\tdata-testid=\"selection-foreground\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tclassName={classNames('tl-selection__fg__outline')}\n\t\t\t\twidth={toDomPrecision(bounds.width)}\n\t\t\t\theight={toDomPrecision(bounds.height)}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
-
"mappings": "AA0CG;AA1CH,SAAS,gBAAgB;AACzB,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,WAAW;AACpB,SAAS,sBAAsB;AASxB,SAAS,2BAA2B,EAAE,QAAQ,SAAS,GAA+B;AAC5F,QAAM,SAAS,UAAU;AACzB,QAAM,OAAO,OAAsB,IAAI;AAEvC,QAAM,YAAY,SAAS,uBAAuB,MAAM,OAAO,qBAAqB,GAAG,CAAC,MAAM,CAAC;AAG/F,QAAM,kBAAkB,YACrB,OAAO,aAAa,SAAS,EAAE,yBAAyB,SAAS,IACjE;AAEH,eAAa,MAAM,QAAQ,GAAG,QAAQ,GAAG,GAAG,UAAU;AAAA,IACrD,GAAG,CAAC;AAAA,IACJ,GAAG,CAAC;AAAA,EACL,CAAC;AAED,WACC,2BAA2B,MACxB,OAAO,MAAM,EAAE,OAAO,eAAe,EAAE,QAAQ,IAC/C,OAAO,MAAM,EAAE,SAAS,eAAe,EAAE,QAAQ;AAErD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,WAAW,2BAA2B;AAAA,UACjD,OAAO,eAAe,OAAO,KAAK;AAAA,UAClC,QAAQ,eAAe,OAAO,MAAM;AAAA;AAAA,MACrC;AAAA;AAAA,EACD;AAEF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useQuickReactor, useStateTracking, useValue } from "@tldraw/state-react";
|
|
3
|
-
import classNames from "classnames";
|
|
4
|
-
import { memo, useLayoutEffect, useRef } from "react";
|
|
5
|
-
import { useEditorComponents } from "../../hooks/EditorComponentsContext.mjs";
|
|
6
|
-
import { useEditor } from "../../hooks/useEditor.mjs";
|
|
7
|
-
import { OptionalErrorBoundary } from "../ErrorBoundary.mjs";
|
|
8
|
-
const EvenInnererIndicator = memo(
|
|
9
|
-
({ shape, util }) => {
|
|
10
|
-
return useStateTracking(
|
|
11
|
-
"Indicator: " + shape.type,
|
|
12
|
-
() => (
|
|
13
|
-
// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
|
|
14
|
-
// calling the render method with stale data.
|
|
15
|
-
(util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id)))
|
|
16
|
-
)
|
|
17
|
-
);
|
|
18
|
-
},
|
|
19
|
-
(prevProps, nextProps) => {
|
|
20
|
-
return prevProps.shape.props === nextProps.shape.props && prevProps.shape.meta === nextProps.shape.meta;
|
|
21
|
-
}
|
|
22
|
-
);
|
|
23
|
-
const InnerIndicator = memo(({ editor, id }) => {
|
|
24
|
-
const shape = useValue("shape for indicator", () => editor.store.get(id), [editor, id]);
|
|
25
|
-
const { ShapeIndicatorErrorFallback } = useEditorComponents();
|
|
26
|
-
if (!shape || shape.isLocked) return null;
|
|
27
|
-
const util = editor.getShapeUtil(shape);
|
|
28
|
-
if (!util.useLegacyIndicator()) return null;
|
|
29
|
-
return /* @__PURE__ */ jsx(
|
|
30
|
-
OptionalErrorBoundary,
|
|
31
|
-
{
|
|
32
|
-
fallback: ShapeIndicatorErrorFallback,
|
|
33
|
-
onError: (error) => editor.annotateError(error, { origin: "react.shapeIndicator", willCrashApp: false }),
|
|
34
|
-
children: /* @__PURE__ */ jsx(EvenInnererIndicator, { shape, util }, shape.id)
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
});
|
|
38
|
-
const DefaultShapeIndicator = memo(function DefaultShapeIndicator2({
|
|
39
|
-
shapeId,
|
|
40
|
-
className,
|
|
41
|
-
color,
|
|
42
|
-
hidden,
|
|
43
|
-
opacity
|
|
44
|
-
}) {
|
|
45
|
-
const editor = useEditor();
|
|
46
|
-
const rIndicator = useRef(null);
|
|
47
|
-
useQuickReactor(
|
|
48
|
-
"indicator transform",
|
|
49
|
-
() => {
|
|
50
|
-
if (hidden) return;
|
|
51
|
-
const elm = rIndicator.current;
|
|
52
|
-
if (!elm) return;
|
|
53
|
-
const pageTransform = editor.getShapePageTransform(shapeId);
|
|
54
|
-
if (!pageTransform) return;
|
|
55
|
-
elm.style.setProperty("transform", pageTransform.toCssString());
|
|
56
|
-
},
|
|
57
|
-
[editor, shapeId, hidden]
|
|
58
|
-
);
|
|
59
|
-
useLayoutEffect(() => {
|
|
60
|
-
const elm = rIndicator.current;
|
|
61
|
-
if (!elm) return;
|
|
62
|
-
elm.style.setProperty("display", hidden ? "none" : "block");
|
|
63
|
-
}, [hidden]);
|
|
64
|
-
return /* @__PURE__ */ jsx("svg", { ref: rIndicator, className: classNames("tl-overlays__item", className), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
65
|
-
"g",
|
|
66
|
-
{
|
|
67
|
-
className: "tl-shape-indicator",
|
|
68
|
-
stroke: color ?? "var(--tl-color-selected)",
|
|
69
|
-
opacity,
|
|
70
|
-
children: /* @__PURE__ */ jsx(InnerIndicator, { editor, id: shapeId })
|
|
71
|
-
}
|
|
72
|
-
) });
|
|
73
|
-
});
|
|
74
|
-
export {
|
|
75
|
-
DefaultShapeIndicator
|
|
76
|
-
};
|
|
77
|
-
//# sourceMappingURL=DefaultShapeIndicator.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useQuickReactor, useStateTracking, useValue } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport type { Editor } from '../../editor/Editor'\nimport { ShapeUtil } from '../../editor/shapes/ShapeUtil'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\nimport { OptionalErrorBoundary } from '../ErrorBoundary'\n\n// need an extra layer of indirection here to allow hooks to be used inside the indicator render\nconst EvenInnererIndicator = memo(\n\t({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {\n\t\treturn useStateTracking('Indicator: ' + shape.type, () =>\n\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t// calling the render method with stale data.\n\t\t\tutil.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)\n\t\t)\n\t},\n\t(prevProps, nextProps) => {\n\t\treturn (\n\t\t\tprevProps.shape.props === nextProps.shape.props &&\n\t\t\tprevProps.shape.meta === nextProps.shape.meta\n\t\t)\n\t}\n)\n\nconst InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {\n\tconst shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])\n\n\tconst { ShapeIndicatorErrorFallback } = useEditorComponents()\n\n\tif (!shape || shape.isLocked) return null\n\n\tconst util = editor.getShapeUtil(shape)\n\n\t// If the shape uses canvas indicators, it will be rendered by CanvasShapeIndicators\n\tif (!util.useLegacyIndicator()) return null\n\n\treturn (\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ShapeIndicatorErrorFallback}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })\n\t\t\t}\n\t\t>\n\t\t\t<EvenInnererIndicator key={shape.id} shape={shape} util={util} />\n\t\t</OptionalErrorBoundary>\n\t)\n})\n\n/** @public */\nexport interface TLShapeIndicatorProps {\n\tuserId?: string\n\tshapeId: TLShapeId\n\tcolor?: string | undefined\n\topacity?: number\n\tclassName?: string\n\thidden?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicator = memo(function DefaultShapeIndicator({\n\tshapeId,\n\tclassName,\n\tcolor,\n\thidden,\n\topacity,\n}: TLShapeIndicatorProps) {\n\tconst editor = useEditor()\n\n\tconst rIndicator = useRef<SVGSVGElement>(null)\n\n\tuseQuickReactor(\n\t\t'indicator transform',\n\t\t() => {\n\t\t\tif (hidden) return\n\t\t\tconst elm = rIndicator.current\n\t\t\tif (!elm) return\n\t\t\tconst pageTransform = editor.getShapePageTransform(shapeId)\n\t\t\tif (!pageTransform) return\n\t\t\telm.style.setProperty('transform', pageTransform.toCssString())\n\t\t},\n\t\t[editor, shapeId, hidden]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = rIndicator.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('display', hidden ? 'none' : 'block')\n\t}, [hidden])\n\n\treturn (\n\t\t<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t<g\n\t\t\t\tclassName=\"tl-shape-indicator\"\n\t\t\t\tstroke={color ?? 'var(--tl-color-selected)'}\n\t\t\t\topacity={opacity}\n\t\t\t>\n\t\t\t\t<InnerIndicator editor={editor} id={shapeId} />\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n"],
|
|
5
|
-
"mappings": "AA8CG;AA9CH,SAAS,iBAAiB,kBAAkB,gBAAgB;AAE5D,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB,cAAc;AAG9C,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAGtC,MAAM,uBAAuB;AAAA,EAC5B,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC9D,WAAO;AAAA,MAAiB,gBAAgB,MAAM;AAAA,MAAM;AAAA;AAAA;AAAA,QAGnD,KAAK,UAAU,KAAK,OAAO,MAAM,wBAAwB,MAAM,EAAE,CAAY;AAAA;AAAA,IAC9E;AAAA,EACD;AAAA,EACA,CAAC,WAAW,cAAc;AACzB,WACC,UAAU,MAAM,UAAU,UAAU,MAAM,SAC1C,UAAU,MAAM,SAAS,UAAU,MAAM;AAAA,EAE3C;AACD;AAEA,MAAM,iBAAiB,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAClF,QAAM,QAAQ,SAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,IAAI,oBAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,QAAM,OAAO,OAAO,aAAa,KAAK;AAGtC,MAAI,CAAC,KAAK,mBAAmB,EAAG,QAAO;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,8BAAC,wBAAoC,OAAc,QAAxB,MAAM,EAA8B;AAAA;AAAA,EAChE;AAEF,CAAC;AAaM,MAAM,wBAAwB,KAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa,OAAsB,IAAI;AAE7C;AAAA,IACC;AAAA,IACA,MAAM;AACL,UAAI,OAAQ;AACZ,YAAM,MAAM,WAAW;AACvB,UAAI,CAAC,IAAK;AACV,YAAM,gBAAgB,OAAO,sBAAsB,OAAO;AAC1D,UAAI,CAAC,cAAe;AACpB,UAAI,MAAM,YAAY,aAAa,cAAc,YAAY,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,QAAQ,SAAS,MAAM;AAAA,EACzB;AAEA,kBAAgB,MAAM;AACrB,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,YAAY,WAAW,SAAS,SAAS,OAAO;AAAA,EAC3D,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,oBAAC,SAAI,KAAK,YAAY,WAAW,WAAW,qBAAqB,SAAS,GAAG,eAAY,QACxF;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,QAAQ,SAAS;AAAA,MACjB;AAAA,MAEA,8BAAC,kBAAe,QAAgB,IAAI,SAAS;AAAA;AAAA,EAC9C,GACD;AAEF,CAAC;",
|
|
6
|
-
"names": ["DefaultShapeIndicator"]
|
|
7
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
const DefaultShapeIndicatorErrorFallback = () => {
|
|
3
|
-
return /* @__PURE__ */ jsx("circle", { cx: 4, cy: 4, r: 8, strokeWidth: "1", stroke: "red" });
|
|
4
|
-
};
|
|
5
|
-
export {
|
|
6
|
-
DefaultShapeIndicatorErrorFallback
|
|
7
|
-
};
|
|
8
|
-
//# sourceMappingURL=DefaultShapeIndicatorErrorFallback.mjs.map
|
package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ComponentType } from 'react'\n\n/** @public */\nexport type TLShapeIndicatorErrorFallbackComponent = ComponentType<{ error: unknown }>\n\n/** @internal */\nexport const DefaultShapeIndicatorErrorFallback: TLShapeIndicatorErrorFallbackComponent = () => {\n\treturn <circle cx={4} cy={4} r={8} strokeWidth=\"1\" stroke=\"red\" />\n}\n"],
|
|
5
|
-
"mappings": "AAOQ;AADD,MAAM,qCAA6E,MAAM;AAC/F,SAAO,oBAAC,YAAO,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,aAAY,KAAI,QAAO,OAAM;AACjE;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useValue } from "@tldraw/state-react";
|
|
3
|
-
import { memo, useRef } from "react";
|
|
4
|
-
import { useEditorComponents } from "../../hooks/EditorComponentsContext.mjs";
|
|
5
|
-
import { useEditor } from "../../hooks/useEditor.mjs";
|
|
6
|
-
const DefaultShapeIndicators = memo(function DefaultShapeIndicators2({
|
|
7
|
-
hideAll,
|
|
8
|
-
showAll
|
|
9
|
-
}) {
|
|
10
|
-
const editor = useEditor();
|
|
11
|
-
if (hideAll && showAll)
|
|
12
|
-
throw Error("You cannot set both hideAll and showAll props to true, cmon now");
|
|
13
|
-
const rPreviousSelectedShapeIds = useRef(/* @__PURE__ */ new Set());
|
|
14
|
-
const idsToDisplay = useValue(
|
|
15
|
-
"should display selected ids",
|
|
16
|
-
() => {
|
|
17
|
-
const prev = rPreviousSelectedShapeIds.current;
|
|
18
|
-
const next = /* @__PURE__ */ new Set();
|
|
19
|
-
const instanceState = editor.getInstanceState();
|
|
20
|
-
const isChangingStyle = instanceState.isChangingStyle;
|
|
21
|
-
const isIdleOrEditing = editor.isInAny("select.idle", "select.editing_shape");
|
|
22
|
-
const isInSelectState = editor.isInAny(
|
|
23
|
-
"select.brushing",
|
|
24
|
-
"select.scribble_brushing",
|
|
25
|
-
"select.pointing_shape",
|
|
26
|
-
"select.pointing_selection",
|
|
27
|
-
"select.pointing_handle"
|
|
28
|
-
);
|
|
29
|
-
if (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {
|
|
30
|
-
rPreviousSelectedShapeIds.current = next;
|
|
31
|
-
return next;
|
|
32
|
-
}
|
|
33
|
-
for (const id of editor.getSelectedShapeIds()) {
|
|
34
|
-
next.add(id);
|
|
35
|
-
}
|
|
36
|
-
if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
|
|
37
|
-
const hovered = editor.getHoveredShapeId();
|
|
38
|
-
if (hovered) next.add(hovered);
|
|
39
|
-
}
|
|
40
|
-
if (prev.size !== next.size) {
|
|
41
|
-
rPreviousSelectedShapeIds.current = next;
|
|
42
|
-
return next;
|
|
43
|
-
}
|
|
44
|
-
for (const id of next) {
|
|
45
|
-
if (!prev.has(id)) {
|
|
46
|
-
rPreviousSelectedShapeIds.current = next;
|
|
47
|
-
return next;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
return prev;
|
|
51
|
-
},
|
|
52
|
-
[editor]
|
|
53
|
-
);
|
|
54
|
-
const renderingShapes = useValue("rendering shapes", () => editor.getRenderingShapes(), [editor]);
|
|
55
|
-
const { ShapeIndicator } = useEditorComponents();
|
|
56
|
-
const shapesToRender = useValue(
|
|
57
|
-
"shapes to render for svg indicators",
|
|
58
|
-
() => {
|
|
59
|
-
return renderingShapes.filter(({ id }) => {
|
|
60
|
-
const shape = editor.getShape(id);
|
|
61
|
-
if (!shape) return false;
|
|
62
|
-
const util = editor.getShapeUtil(shape);
|
|
63
|
-
return util.useLegacyIndicator();
|
|
64
|
-
});
|
|
65
|
-
},
|
|
66
|
-
[editor, renderingShapes]
|
|
67
|
-
);
|
|
68
|
-
if (!ShapeIndicator) return null;
|
|
69
|
-
return shapesToRender.map(({ id }) => /* @__PURE__ */ jsx(
|
|
70
|
-
ShapeIndicator,
|
|
71
|
-
{
|
|
72
|
-
shapeId: id,
|
|
73
|
-
hidden: !showAll && (hideAll || !idsToDisplay.has(id))
|
|
74
|
-
},
|
|
75
|
-
id + "_indicator"
|
|
76
|
-
));
|
|
77
|
-
});
|
|
78
|
-
export {
|
|
79
|
-
DefaultShapeIndicators
|
|
80
|
-
};
|
|
81
|
-
//# sourceMappingURL=DefaultShapeIndicators.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicators.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { memo, useRef } from 'react'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\n\n/** @public */\nexport interface TLShapeIndicatorsProps {\n\t/** Whether to hide all of the indicators */\n\thideAll?: boolean\n\t/** Whether to show all of the indicators */\n\tshowAll?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicators = memo(function DefaultShapeIndicators({\n\thideAll,\n\tshowAll,\n}: TLShapeIndicatorsProps) {\n\tconst editor = useEditor()\n\n\tif (hideAll && showAll)\n\t\tthrow Error('You cannot set both hideAll and showAll props to true, cmon now')\n\n\tconst rPreviousSelectedShapeIds = useRef<Set<TLShapeId>>(new Set())\n\n\tconst idsToDisplay = useValue(\n\t\t'should display selected ids',\n\t\t() => {\n\t\t\tconst prev = rPreviousSelectedShapeIds.current\n\t\t\tconst next = new Set<TLShapeId>()\n\n\t\t\tconst instanceState = editor.getInstanceState()\n\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\n\t\t\t// todo: this is tldraw specific and is duplicated at the tldraw layer. What should we do here instead?\n\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\t// We hide all indicators if we're changing style or in certain interactions\n\t\t\t// todo: move this to some kind of Tool.hideIndicators property\n\t\t\tif (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {\n\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\treturn next\n\t\t\t}\n\n\t\t\t// We always want to show indicators for the selected shapes, if any\n\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\tnext.add(id)\n\t\t\t}\n\n\t\t\t// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any\n\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\tif (hovered) next.add(hovered)\n\t\t\t}\n\n\t\t\t// Ok, has anything changed?\n\n\t\t\t// If the number of items in the set is different, then the selection has changed. This catches most changes.\n\t\t\tif (prev.size !== next.size) {\n\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\treturn next\n\t\t\t}\n\n\t\t\t// Set difference check\n\t\t\tfor (const id of next) {\n\t\t\t\tif (!prev.has(id)) {\n\t\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\t\treturn next\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn prev\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Show indicators only for the shapes that are currently being rendered (ie that are on screen)\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\t// Filter out shapes that have canvas indicator support - only render shapes that use legacy SVG indicators\n\tconst shapesToRender = useValue(\n\t\t'shapes to render for svg indicators',\n\t\t() => {\n\t\t\treturn renderingShapes.filter(({ id }) => {\n\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\tif (!shape) return false\n\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t})\n\t\t},\n\t\t[editor, renderingShapes]\n\t)\n\n\tif (!ShapeIndicator) return null\n\n\treturn shapesToRender.map(({ id }) => (\n\t\t<ShapeIndicator\n\t\t\tkey={id + '_indicator'}\n\t\t\tshapeId={id}\n\t\t\thidden={!showAll && (hideAll || !idsToDisplay.has(id))}\n\t\t/>\n\t))\n})\n"],
|
|
5
|
-
"mappings": "AA6GE;AA7GF,SAAS,gBAAgB;AAEzB,SAAS,MAAM,cAAc;AAC7B,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAWnB,MAAM,yBAAyB,KAAK,SAASA,wBAAuB;AAAA,EAC1E;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,SAAS,UAAU;AAEzB,MAAI,WAAW;AACd,UAAM,MAAM,iEAAiE;AAE9E,QAAM,4BAA4B,OAAuB,oBAAI,IAAI,CAAC;AAElE,QAAM,eAAe;AAAA,IACpB;AAAA,IACA,MAAM;AACL,YAAM,OAAO,0BAA0B;AACvC,YAAM,OAAO,oBAAI,IAAe;AAEhC,YAAM,gBAAgB,OAAO,iBAAiB;AAE9C,YAAM,kBAAkB,cAAc;AAItC,YAAM,kBAAkB,OAAO,QAAQ,eAAe,sBAAsB;AAE5E,YAAM,kBAAkB,OAAO;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAIA,UAAI,mBAAmB,EAAE,mBAAmB,kBAAkB;AAC7D,kCAA0B,UAAU;AACpC,eAAO;AAAA,MACR;AAGA,iBAAW,MAAM,OAAO,oBAAoB,GAAG;AAC9C,aAAK,IAAI,EAAE;AAAA,MACZ;AAGA,UAAI,mBAAmB,cAAc,oBAAoB,CAAC,cAAc,iBAAiB;AACxF,cAAM,UAAU,OAAO,kBAAkB;AACzC,YAAI,QAAS,MAAK,IAAI,OAAO;AAAA,MAC9B;AAKA,UAAI,KAAK,SAAS,KAAK,MAAM;AAC5B,kCAA0B,UAAU;AACpC,eAAO;AAAA,MACR;AAGA,iBAAW,MAAM,MAAM;AACtB,YAAI,CAAC,KAAK,IAAI,EAAE,GAAG;AAClB,oCAA0B,UAAU;AACpC,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAGA,QAAM,kBAAkB,SAAS,oBAAoB,MAAM,OAAO,mBAAmB,GAAG,CAAC,MAAM,CAAC;AAEhG,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAG/C,QAAM,iBAAiB;AAAA,IACtB;AAAA,IACA,MAAM;AACL,aAAO,gBAAgB,OAAO,CAAC,EAAE,GAAG,MAAM;AACzC,cAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,YAAI,CAAC,MAAO,QAAO;AACnB,cAAM,OAAO,OAAO,aAAa,KAAK;AACtC,eAAO,KAAK,mBAAmB;AAAA,MAChC,CAAC;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,eAAe;AAAA,EACzB;AAEA,MAAI,CAAC,eAAgB,QAAO;AAE5B,SAAO,eAAe,IAAI,CAAC,EAAE,GAAG,MAC/B;AAAA,IAAC;AAAA;AAAA,MAEA,SAAS;AAAA,MACT,QAAQ,CAAC,YAAY,WAAW,CAAC,aAAa,IAAI,EAAE;AAAA;AAAA,IAF/C,KAAK;AAAA,EAGX,CACA;AACF,CAAC;",
|
|
6
|
-
"names": ["DefaultShapeIndicators"]
|
|
7
|
-
}
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import classNames from "classnames";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { rangeIntersection } from "../../primitives/utils.mjs";
|
|
5
|
-
function PointsSnapIndicator({ points, zoom }) {
|
|
6
|
-
const l = 2.5 / zoom;
|
|
7
|
-
const minX = points.reduce((acc, p) => Math.min(acc, p.x), Infinity);
|
|
8
|
-
const maxX = points.reduce((acc, p) => Math.max(acc, p.x), -Infinity);
|
|
9
|
-
const minY = points.reduce((acc, p) => Math.min(acc, p.y), Infinity);
|
|
10
|
-
const maxY = points.reduce((acc, p) => Math.max(acc, p.y), -Infinity);
|
|
11
|
-
const useNWtoSEdireciton = points.some((p) => p.x === minX && p.y === minY);
|
|
12
|
-
let firstX, firstY, secondX, secondY;
|
|
13
|
-
if (useNWtoSEdireciton) {
|
|
14
|
-
firstX = minX;
|
|
15
|
-
firstY = minY;
|
|
16
|
-
secondX = maxX;
|
|
17
|
-
secondY = maxY;
|
|
18
|
-
} else {
|
|
19
|
-
firstX = minX;
|
|
20
|
-
firstY = maxY;
|
|
21
|
-
secondX = maxX;
|
|
22
|
-
secondY = minY;
|
|
23
|
-
}
|
|
24
|
-
return /* @__PURE__ */ jsxs("g", { className: "tl-snap-indicator", stroke: "lime", children: [
|
|
25
|
-
/* @__PURE__ */ jsx("line", { x1: firstX, y1: firstY, x2: secondX, y2: secondY }),
|
|
26
|
-
points.map((p, i) => /* @__PURE__ */ jsx("g", { transform: `translate(${p.x},${p.y})`, children: /* @__PURE__ */ jsx(
|
|
27
|
-
"path",
|
|
28
|
-
{
|
|
29
|
-
className: "tl-snap-point",
|
|
30
|
-
d: `M ${-l},${-l} L ${l},${l} M ${-l},${l} L ${l},${-l}`
|
|
31
|
-
}
|
|
32
|
-
) }, i))
|
|
33
|
-
] });
|
|
34
|
-
}
|
|
35
|
-
function GapsSnapIndicator({ gaps, direction, zoom }) {
|
|
36
|
-
const l = 3.5 / zoom;
|
|
37
|
-
let edgeIntersection = [-Infinity, Infinity];
|
|
38
|
-
let nextEdgeIntersection = null;
|
|
39
|
-
const horizontal = direction === "horizontal";
|
|
40
|
-
for (const gap of gaps) {
|
|
41
|
-
nextEdgeIntersection = rangeIntersection(
|
|
42
|
-
edgeIntersection[0],
|
|
43
|
-
edgeIntersection[1],
|
|
44
|
-
horizontal ? gap.startEdge[0].y : gap.startEdge[0].x,
|
|
45
|
-
horizontal ? gap.startEdge[1].y : gap.startEdge[1].x
|
|
46
|
-
);
|
|
47
|
-
if (nextEdgeIntersection) {
|
|
48
|
-
edgeIntersection = nextEdgeIntersection;
|
|
49
|
-
} else {
|
|
50
|
-
continue;
|
|
51
|
-
}
|
|
52
|
-
nextEdgeIntersection = rangeIntersection(
|
|
53
|
-
edgeIntersection[0],
|
|
54
|
-
edgeIntersection[1],
|
|
55
|
-
horizontal ? gap.endEdge[0].y : gap.endEdge[0].x,
|
|
56
|
-
horizontal ? gap.endEdge[1].y : gap.endEdge[1].x
|
|
57
|
-
);
|
|
58
|
-
if (nextEdgeIntersection) {
|
|
59
|
-
edgeIntersection = nextEdgeIntersection;
|
|
60
|
-
} else {
|
|
61
|
-
continue;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
if (edgeIntersection === null) {
|
|
65
|
-
return null;
|
|
66
|
-
}
|
|
67
|
-
const midPoint = (edgeIntersection[0] + edgeIntersection[1]) / 2;
|
|
68
|
-
return (
|
|
69
|
-
/* @__PURE__ */ jsx("g", { className: "tl-snap-indicator", stroke: "cyan", children: gaps.map(({ startEdge, endEdge }, i) => /* @__PURE__ */ jsx(React.Fragment, { children: horizontal ? (
|
|
70
|
-
// horizontal gap
|
|
71
|
-
/* @__PURE__ */ (jsxs(Fragment, { children: [
|
|
72
|
-
/* @__PURE__ */ jsx(
|
|
73
|
-
"line",
|
|
74
|
-
{
|
|
75
|
-
x1: startEdge[0].x,
|
|
76
|
-
y1: midPoint - 2 * l,
|
|
77
|
-
x2: startEdge[1].x,
|
|
78
|
-
y2: midPoint + 2 * l
|
|
79
|
-
}
|
|
80
|
-
),
|
|
81
|
-
/* @__PURE__ */ jsx(
|
|
82
|
-
"line",
|
|
83
|
-
{
|
|
84
|
-
x1: endEdge[0].x,
|
|
85
|
-
y1: midPoint - 2 * l,
|
|
86
|
-
x2: endEdge[1].x,
|
|
87
|
-
y2: midPoint + 2 * l
|
|
88
|
-
}
|
|
89
|
-
),
|
|
90
|
-
/* @__PURE__ */ jsx("line", { x1: startEdge[0].x, y1: midPoint, x2: endEdge[0].x, y2: midPoint }),
|
|
91
|
-
/* @__PURE__ */ jsx(
|
|
92
|
-
"line",
|
|
93
|
-
{
|
|
94
|
-
x1: (startEdge[0].x + endEdge[0].x) / 2,
|
|
95
|
-
y1: midPoint - l,
|
|
96
|
-
x2: (startEdge[0].x + endEdge[0].x) / 2,
|
|
97
|
-
y2: midPoint + l
|
|
98
|
-
}
|
|
99
|
-
)
|
|
100
|
-
] }))
|
|
101
|
-
) : (
|
|
102
|
-
// vertical gap
|
|
103
|
-
/* @__PURE__ */ (jsxs(Fragment, { children: [
|
|
104
|
-
/* @__PURE__ */ jsx(
|
|
105
|
-
"line",
|
|
106
|
-
{
|
|
107
|
-
x1: midPoint - 2 * l,
|
|
108
|
-
y1: startEdge[0].y,
|
|
109
|
-
x2: midPoint + 2 * l,
|
|
110
|
-
y2: startEdge[1].y
|
|
111
|
-
}
|
|
112
|
-
),
|
|
113
|
-
/* @__PURE__ */ jsx(
|
|
114
|
-
"line",
|
|
115
|
-
{
|
|
116
|
-
x1: midPoint - 2 * l,
|
|
117
|
-
y1: endEdge[0].y,
|
|
118
|
-
x2: midPoint + 2 * l,
|
|
119
|
-
y2: endEdge[1].y
|
|
120
|
-
}
|
|
121
|
-
),
|
|
122
|
-
/* @__PURE__ */ jsx("line", { x1: midPoint, y1: startEdge[0].y, x2: midPoint, y2: endEdge[0].y }),
|
|
123
|
-
/* @__PURE__ */ jsx(
|
|
124
|
-
"line",
|
|
125
|
-
{
|
|
126
|
-
x1: midPoint - l,
|
|
127
|
-
y1: (startEdge[0].y + endEdge[0].y) / 2,
|
|
128
|
-
x2: midPoint + l,
|
|
129
|
-
y2: (startEdge[0].y + endEdge[0].y) / 2
|
|
130
|
-
}
|
|
131
|
-
)
|
|
132
|
-
] }))
|
|
133
|
-
) }, i)) })
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
function DefaultSnapIndicator({ className, line, zoom }) {
|
|
137
|
-
return /* @__PURE__ */ jsx("svg", { className: classNames("tl-overlays__item", className), "aria-hidden": "true", children: line.type === "points" ? /* @__PURE__ */ jsx(PointsSnapIndicator, { ...line, zoom }) : line.type === "gaps" ? /* @__PURE__ */ jsx(GapsSnapIndicator, { ...line, zoom }) : null });
|
|
138
|
-
}
|
|
139
|
-
export {
|
|
140
|
-
DefaultSnapIndicator
|
|
141
|
-
};
|
|
142
|
-
//# sourceMappingURL=DefaultSnapIndictor.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/lib/components/default-components/DefaultSnapIndictor.tsx"],
|
|
4
|
-
"sourcesContent": ["import classNames from 'classnames'\nimport * as React from 'react'\nimport {\n\ttype GapsSnapIndicator,\n\ttype PointsSnapIndicator,\n\ttype SnapIndicator,\n} from '../../editor/managers/SnapManager/SnapManager'\nimport { rangeIntersection } from '../../primitives/utils'\n\nfunction PointsSnapIndicator({ points, zoom }: { zoom: number } & PointsSnapIndicator) {\n\tconst l = 2.5 / zoom\n\n\tconst minX = points.reduce((acc, p) => Math.min(acc, p.x), Infinity)\n\tconst maxX = points.reduce((acc, p) => Math.max(acc, p.x), -Infinity)\n\tconst minY = points.reduce((acc, p) => Math.min(acc, p.y), Infinity)\n\tconst maxY = points.reduce((acc, p) => Math.max(acc, p.y), -Infinity)\n\n\tconst useNWtoSEdireciton = points.some((p) => p.x === minX && p.y === minY)\n\tlet firstX: number, firstY: number, secondX: number, secondY: number\n\tif (useNWtoSEdireciton) {\n\t\tfirstX = minX\n\t\tfirstY = minY\n\t\tsecondX = maxX\n\t\tsecondY = maxY\n\t} else {\n\t\tfirstX = minX\n\t\tfirstY = maxY\n\t\tsecondX = maxX\n\t\tsecondY = minY\n\t}\n\n\treturn (\n\t\t<g className=\"tl-snap-indicator\" stroke=\"lime\">\n\t\t\t<line x1={firstX} y1={firstY} x2={secondX} y2={secondY} />\n\t\t\t{points.map((p, i) => (\n\t\t\t\t<g transform={`translate(${p.x},${p.y})`} key={i}>\n\t\t\t\t\t<path\n\t\t\t\t\t\tclassName=\"tl-snap-point\"\n\t\t\t\t\t\td={`M ${-l},${-l} L ${l},${l} M ${-l},${l} L ${l},${-l}`}\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t))}\n\t\t</g>\n\t)\n}\n\nfunction GapsSnapIndicator({ gaps, direction, zoom }: { zoom: number } & GapsSnapIndicator) {\n\tconst l = 3.5 / zoom\n\n\tlet edgeIntersection: number[] | null = [-Infinity, +Infinity]\n\tlet nextEdgeIntersection: number[] | null = null\n\n\tconst horizontal = direction === 'horizontal'\n\n\t// find intersection of all gaps so we can render a straight line through it;\n\t// some range intersections may return null, in which case we skip that gap.\n\tfor (const gap of gaps) {\n\t\tnextEdgeIntersection = rangeIntersection(\n\t\t\tedgeIntersection[0],\n\t\t\tedgeIntersection[1],\n\t\t\thorizontal ? gap.startEdge[0].y : gap.startEdge[0].x,\n\t\t\thorizontal ? gap.startEdge[1].y : gap.startEdge[1].x\n\t\t)\n\n\t\tif (nextEdgeIntersection) {\n\t\t\tedgeIntersection = nextEdgeIntersection\n\t\t} else {\n\t\t\tcontinue\n\t\t}\n\n\t\tnextEdgeIntersection = rangeIntersection(\n\t\t\tedgeIntersection[0],\n\t\t\tedgeIntersection[1],\n\t\t\thorizontal ? gap.endEdge[0].y : gap.endEdge[0].x,\n\t\t\thorizontal ? gap.endEdge[1].y : gap.endEdge[1].x\n\t\t)\n\n\t\tif (nextEdgeIntersection) {\n\t\t\tedgeIntersection = nextEdgeIntersection\n\t\t} else {\n\t\t\tcontinue\n\t\t}\n\t}\n\n\tif (edgeIntersection === null) {\n\t\treturn null\n\t}\n\n\tconst midPoint = (edgeIntersection[0] + edgeIntersection[1]) / 2\n\n\treturn (\n\t\t<g className=\"tl-snap-indicator\" stroke=\"cyan\">\n\t\t\t{gaps.map(({ startEdge, endEdge }, i) => (\n\t\t\t\t<React.Fragment key={i}>\n\t\t\t\t\t{horizontal ? (\n\t\t\t\t\t\t// horizontal gap\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* start edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={startEdge[0].x}\n\t\t\t\t\t\t\t\ty1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\tx2={startEdge[1].x}\n\t\t\t\t\t\t\t\ty2={midPoint + 2 * l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* end edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={endEdge[0].x}\n\t\t\t\t\t\t\t\ty1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\tx2={endEdge[1].x}\n\t\t\t\t\t\t\t\ty2={midPoint + 2 * l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* joining line */}\n\t\t\t\t\t\t\t<line x1={startEdge[0].x} y1={midPoint} x2={endEdge[0].x} y2={midPoint} />\n\t\t\t\t\t\t\t{/* center point marker */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={(startEdge[0].x + endEdge[0].x) / 2}\n\t\t\t\t\t\t\t\ty1={midPoint - l}\n\t\t\t\t\t\t\t\tx2={(startEdge[0].x + endEdge[0].x) / 2}\n\t\t\t\t\t\t\t\ty2={midPoint + l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// vertical gap\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* start edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\ty1={startEdge[0].y}\n\t\t\t\t\t\t\t\tx2={midPoint + 2 * l}\n\t\t\t\t\t\t\t\ty2={startEdge[1].y}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* end edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\ty1={endEdge[0].y}\n\t\t\t\t\t\t\t\tx2={midPoint + 2 * l}\n\t\t\t\t\t\t\t\ty2={endEdge[1].y}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* joining line */}\n\t\t\t\t\t\t\t<line x1={midPoint} y1={startEdge[0].y} x2={midPoint} y2={endEdge[0].y} />\n\t\t\t\t\t\t\t{/* center point marker */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - l}\n\t\t\t\t\t\t\t\ty1={(startEdge[0].y + endEdge[0].y) / 2}\n\t\t\t\t\t\t\t\tx2={midPoint + l}\n\t\t\t\t\t\t\t\ty2={(startEdge[0].y + endEdge[0].y) / 2}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</React.Fragment>\n\t\t\t))}\n\t\t</g>\n\t)\n}\n\n/** @public */\nexport interface TLSnapIndicatorProps {\n\tclassName?: string\n\tline: SnapIndicator\n\tzoom: number\n}\n\n/** @public @react */\nexport function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {\n\treturn (\n\t\t<svg className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t{line.type === 'points' ? (\n\t\t\t\t<PointsSnapIndicator {...line} zoom={zoom} />\n\t\t\t) : line.type === 'gaps' ? (\n\t\t\t\t<GapsSnapIndicator {...line} zoom={zoom} />\n\t\t\t) : null}\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from "../utils/dom.mjs";
|
|
3
|
-
import { getPointerInfo } from "../utils/getPointerInfo.mjs";
|
|
4
|
-
import { useEditor } from "./useEditor.mjs";
|
|
5
|
-
function getHandle(editor, id, handleId) {
|
|
6
|
-
const shape = editor.getShape(id);
|
|
7
|
-
const handles = editor.getShapeHandles(shape);
|
|
8
|
-
return { shape, handle: handles.find((h) => h.id === handleId) };
|
|
9
|
-
}
|
|
10
|
-
function useHandleEvents(id, handleId) {
|
|
11
|
-
const editor = useEditor();
|
|
12
|
-
return React.useMemo(() => {
|
|
13
|
-
const onPointerDown = (e) => {
|
|
14
|
-
if (editor.wasEventAlreadyHandled(e)) return;
|
|
15
|
-
const target = loopToHtmlElement(e.currentTarget);
|
|
16
|
-
setPointerCapture(target, e);
|
|
17
|
-
const { shape, handle } = getHandle(editor, id, handleId);
|
|
18
|
-
if (!handle) return;
|
|
19
|
-
editor.dispatch({
|
|
20
|
-
type: "pointer",
|
|
21
|
-
target: "handle",
|
|
22
|
-
handle,
|
|
23
|
-
shape,
|
|
24
|
-
name: "pointer_down",
|
|
25
|
-
...getPointerInfo(editor, e)
|
|
26
|
-
});
|
|
27
|
-
};
|
|
28
|
-
let lastX, lastY;
|
|
29
|
-
const onPointerMove = (e) => {
|
|
30
|
-
if (editor.wasEventAlreadyHandled(e)) return;
|
|
31
|
-
if (e.clientX === lastX && e.clientY === lastY) return;
|
|
32
|
-
lastX = e.clientX;
|
|
33
|
-
lastY = e.clientY;
|
|
34
|
-
const { shape, handle } = getHandle(editor, id, handleId);
|
|
35
|
-
if (!handle) return;
|
|
36
|
-
editor.dispatch({
|
|
37
|
-
type: "pointer",
|
|
38
|
-
target: "handle",
|
|
39
|
-
handle,
|
|
40
|
-
shape,
|
|
41
|
-
name: "pointer_move",
|
|
42
|
-
...getPointerInfo(editor, e)
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
const onPointerUp = (e) => {
|
|
46
|
-
if (editor.wasEventAlreadyHandled(e)) return;
|
|
47
|
-
const target = loopToHtmlElement(e.currentTarget);
|
|
48
|
-
releasePointerCapture(target, e);
|
|
49
|
-
const { shape, handle } = getHandle(editor, id, handleId);
|
|
50
|
-
if (!handle) return;
|
|
51
|
-
editor.dispatch({
|
|
52
|
-
type: "pointer",
|
|
53
|
-
target: "handle",
|
|
54
|
-
handle,
|
|
55
|
-
shape,
|
|
56
|
-
name: "pointer_up",
|
|
57
|
-
...getPointerInfo(editor, e)
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
|
-
return {
|
|
61
|
-
onPointerDown,
|
|
62
|
-
onPointerMove,
|
|
63
|
-
onPointerUp
|
|
64
|
-
};
|
|
65
|
-
}, [editor, id, handleId]);
|
|
66
|
-
}
|
|
67
|
-
export {
|
|
68
|
-
useHandleEvents
|
|
69
|
-
};
|
|
70
|
-
//# sourceMappingURL=useHandleEvents.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/lib/hooks/useHandleEvents.ts"],
|
|
4
|
-
"sourcesContent": ["import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'\nimport * as React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\nfunction getHandle(editor: Editor, id: TLShapeId, handleId: string) {\n\tconst shape = editor.getShape<TLArrowShape | TLLineShape>(id)!\n\tconst handles = editor.getShapeHandles(shape)!\n\treturn { shape, handle: handles.find((h) => h.id === handleId) }\n}\n\nexport function useHandleEvents(id: TLShapeId, handleId: string) {\n\tconst editor = useEditor()\n\n\treturn React.useMemo(() => {\n\t\tconst onPointerDown = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t// Must set pointer capture on an HTML element!\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\tsetPointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_down',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\t// Track the last screen point\n\t\tlet lastX: number, lastY: number\n\n\t\tconst onPointerMove = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\tconst onPointerUp = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\treleasePointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonPointerDown,\n\t\t\tonPointerMove,\n\t\t\tonPointerUp,\n\t\t}\n\t}, [editor, id, handleId])\n}\n"],
|
|
5
|
-
"mappings": "AACA,YAAY,WAAW;AAEvB,SAAS,mBAAmB,uBAAuB,yBAAyB;AAC5E,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAE1B,SAAS,UAAU,QAAgB,IAAe,UAAkB;AACnE,QAAM,QAAQ,OAAO,SAAqC,EAAE;AAC5D,QAAM,UAAU,OAAO,gBAAgB,KAAK;AAC5C,SAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,EAAE;AAChE;AAEO,SAAS,gBAAgB,IAAe,UAAkB;AAChE,QAAM,SAAS,UAAU;AAEzB,SAAO,MAAM,QAAQ,MAAM;AAC1B,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAI,OAAO,uBAAuB,CAAC,EAAG;AAGtC,YAAM,SAAS,kBAAkB,EAAE,aAAa;AAChD,wBAAkB,QAAQ,CAAC;AAE3B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,GAAG,eAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAGA,QAAI,OAAe;AAEnB,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,UAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,cAAQ,EAAE;AACV,cAAQ,EAAE;AAEV,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,GAAG,eAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,MAA0B;AAC9C,UAAI,OAAO,uBAAuB,CAAC,EAAG;AAEtC,YAAM,SAAS,kBAAkB,EAAE,aAAa;AAChD,4BAAsB,QAAQ,CAAC;AAE/B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,GAAG,eAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAEA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC;AAC1B;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { useMemo } from "react";
|
|
2
|
-
import { RIGHT_MOUSE_BUTTON } from "../constants.mjs";
|
|
3
|
-
import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from "../utils/dom.mjs";
|
|
4
|
-
import { getPointerInfo } from "../utils/getPointerInfo.mjs";
|
|
5
|
-
import { useEditor } from "./useEditor.mjs";
|
|
6
|
-
function useSelectionEvents(handle) {
|
|
7
|
-
const editor = useEditor();
|
|
8
|
-
const events = useMemo(
|
|
9
|
-
function selectionEvents() {
|
|
10
|
-
const onPointerDown = (e) => {
|
|
11
|
-
if (editor.wasEventAlreadyHandled(e)) return;
|
|
12
|
-
if (e.button === RIGHT_MOUSE_BUTTON) {
|
|
13
|
-
editor.dispatch({
|
|
14
|
-
type: "pointer",
|
|
15
|
-
target: "selection",
|
|
16
|
-
handle,
|
|
17
|
-
name: "right_click",
|
|
18
|
-
...getPointerInfo(editor, e)
|
|
19
|
-
});
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
if (e.button !== 0) return;
|
|
23
|
-
const elm = loopToHtmlElement(e.currentTarget);
|
|
24
|
-
function releaseCapture() {
|
|
25
|
-
elm.removeEventListener("pointerup", releaseCapture);
|
|
26
|
-
releasePointerCapture(elm, e);
|
|
27
|
-
}
|
|
28
|
-
setPointerCapture(elm, e);
|
|
29
|
-
elm.addEventListener("pointerup", releaseCapture);
|
|
30
|
-
editor.dispatch({
|
|
31
|
-
name: "pointer_down",
|
|
32
|
-
type: "pointer",
|
|
33
|
-
target: "selection",
|
|
34
|
-
handle,
|
|
35
|
-
...getPointerInfo(editor, e)
|
|
36
|
-
});
|
|
37
|
-
editor.markEventAsHandled(e);
|
|
38
|
-
};
|
|
39
|
-
let lastX, lastY;
|
|
40
|
-
function onPointerMove(e) {
|
|
41
|
-
if (editor.wasEventAlreadyHandled(e)) return;
|
|
42
|
-
if (e.button !== 0) return;
|
|
43
|
-
if (e.clientX === lastX && e.clientY === lastY) return;
|
|
44
|
-
lastX = e.clientX;
|
|
45
|
-
lastY = e.clientY;
|
|
46
|
-
editor.dispatch({
|
|
47
|
-
name: "pointer_move",
|
|
48
|
-
type: "pointer",
|
|
49
|
-
target: "selection",
|
|
50
|
-
handle,
|
|
51
|
-
...getPointerInfo(editor, e)
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
const onPointerUp = (e) => {
|
|
55
|
-
if (editor.wasEventAlreadyHandled(e)) return;
|
|
56
|
-
if (e.button !== 0) return;
|
|
57
|
-
editor.dispatch({
|
|
58
|
-
name: "pointer_up",
|
|
59
|
-
type: "pointer",
|
|
60
|
-
target: "selection",
|
|
61
|
-
handle,
|
|
62
|
-
...getPointerInfo(editor, e)
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
|
-
return {
|
|
66
|
-
onPointerDown,
|
|
67
|
-
onPointerMove,
|
|
68
|
-
onPointerUp
|
|
69
|
-
};
|
|
70
|
-
},
|
|
71
|
-
[editor, handle]
|
|
72
|
-
);
|
|
73
|
-
return events;
|
|
74
|
-
}
|
|
75
|
-
export {
|
|
76
|
-
useSelectionEvents
|
|
77
|
-
};
|
|
78
|
-
//# sourceMappingURL=useSelectionEvents.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/lib/hooks/useSelectionEvents.ts"],
|
|
4
|
-
"sourcesContent": ["import { useMemo } from 'react'\nimport { RIGHT_MOUSE_BUTTON } from '../constants'\nimport { TLSelectionHandle } from '../editor/types/selection-types'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\n/** @public */\nexport function useSelectionEvents(handle: TLSelectionHandle) {\n\tconst editor = useEditor()\n\n\tconst events = useMemo(\n\t\tfunction selectionEvents() {\n\t\t\tconst onPointerDown: React.PointerEventHandler = (e) => {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t\tif (e.button === RIGHT_MOUSE_BUTTON) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\t\thandle,\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\t// Because the events are probably set on SVG elements,\n\t\t\t\t// we need to instead place pointer capture on the first HTML\n\t\t\t\t// element above the event's target; and set a listener to\n\t\t\t\t// remove pointer capture when the pointer is released.\n\n\t\t\t\tconst elm = loopToHtmlElement(e.currentTarget)\n\n\t\t\t\tfunction releaseCapture() {\n\t\t\t\t\telm.removeEventListener('pointerup', releaseCapture)\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\n\t\t\t\tsetPointerCapture(elm, e)\n\t\t\t\telm.addEventListener('pointerup', releaseCapture)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t}\n\n\t\t\t// Track the last screen point\n\t\t\tlet lastX: number, lastY: number\n\n\t\t\tfunction onPointerMove(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0) return\n\t\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\t\tlastX = e.clientX\n\t\t\t\tlastY = e.clientY\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst onPointerUp: React.PointerEventHandler = (e) => {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerMove,\n\t\t\t\tonPointerUp,\n\t\t\t}\n\t\t},\n\t\t[editor, handle]\n\t)\n\n\treturn events\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB,uBAAuB,yBAAyB;AAC5E,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAGnB,SAAS,mBAAmB,QAA2B;AAC7D,QAAM,SAAS,UAAU;AAEzB,QAAM,SAAS;AAAA,IACd,SAAS,kBAAkB;AAC1B,YAAM,gBAA2C,CAAC,MAAM;AACvD,YAAI,OAAO,uBAAuB,CAAC,EAAG;AAEtC,YAAI,EAAE,WAAW,oBAAoB;AACpC,iBAAO,SAAS;AAAA,YACf,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,YACA,MAAM;AAAA,YACN,GAAG,eAAe,QAAQ,CAAC;AAAA,UAC5B,CAAC;AACD;AAAA,QACD;AAEA,YAAI,EAAE,WAAW,EAAG;AAOpB,cAAM,MAAM,kBAAkB,EAAE,aAAa;AAE7C,iBAAS,iBAAiB;AACzB,cAAI,oBAAoB,aAAa,cAAc;AACnD,gCAAsB,KAAK,CAAC;AAAA,QAC7B;AAEA,0BAAkB,KAAK,CAAC;AACxB,YAAI,iBAAiB,aAAa,cAAc;AAEhD,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,GAAG,eAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AACD,eAAO,mBAAmB,CAAC;AAAA,MAC5B;AAGA,UAAI,OAAe;AAEnB,eAAS,cAAc,GAAuB;AAC7C,YAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,YAAI,EAAE,WAAW,EAAG;AACpB,YAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,gBAAQ,EAAE;AACV,gBAAQ,EAAE;AAEV,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,GAAG,eAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAEA,YAAM,cAAyC,CAAC,MAAM;AACrD,YAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,YAAI,EAAE,WAAW,EAAG;AAEpB,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,GAAG,eAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAEA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,MAAM;AAAA,EAChB;AAEA,SAAO;AACR;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|