npm - tldraw - Versions diffs - 3.15.0-canary.e3f6387b7e04 → 3.15.0-canary.ee0606e7631e - Mend

tldraw 3.15.0-canary.e3f6387b7e04 → 3.15.0-canary.ee0606e7631e

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.

Files changed (45) hide show

package/dist-cjs/lib/canvas/TldrawSelectionForeground.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawSelectionForeground.tsx"],
-  "sourcesContent": ["import {\n\tBox,\n\tRotateCorner,\n\tTLEmbedShape,\n\tTLSelectionForegroundProps,\n\tTLTextShape,\n\tgetCursor,\n\ttlenv,\n\ttoDomPrecision,\n\ttrack,\n\tuseEditor,\n\tuseSelectionEvents,\n\tuseTransform,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { PointerEventHandler, useRef } from 'react'\nimport { useReadonly } from '../ui/hooks/useReadonly'\nimport { useTranslation } from '../ui/hooks/useTranslation/useTranslation'\nimport { TldrawCropHandles } from './TldrawCropHandles'\n\n/** @public */\nexport const TldrawSelectionForeground = track(function TldrawSelectionForeground({\n\tbounds,\n\trotation,\n}: TLSelectionForegroundProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tconst isReadonlyMode = useReadonly()\n\tconst topEvents = useSelectionEvents('top')\n\tconst rightEvents = useSelectionEvents('right')\n\tconst bottomEvents = useSelectionEvents('bottom')\n\tconst leftEvents = useSelectionEvents('left')\n\tconst topLeftEvents = useSelectionEvents('top_left')\n\tconst topRightEvents = useSelectionEvents('top_right')\n\tconst bottomRightEvents = useSelectionEvents('bottom_right')\n\tconst bottomLeftEvents = useSelectionEvents('bottom_left')\n\n\tconst isDefaultCursor = editor.getInstanceState().cursor.type === 'default'\n\tconst isCoarsePointer = editor.getInstanceState().isCoarsePointer\n\n\tconst onlyShape = editor.getOnlySelectedShape()\n\tconst isLockedShape = onlyShape && editor.isShapeOrAncestorLocked(onlyShape)\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\tconst expandedBounds =\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\tuseTransform(rSvg, bounds?.x, bounds?.y, 1, editor.getSelectionRotation(), {\n\t\tx: expandedBounds.x - bounds.x,\n\t\ty: expandedBounds.y - bounds.y,\n\t})\n\n\tif (onlyShape && editor.isShapeHidden(onlyShape)) return null\n\n\tconst zoom = editor.getZoomLevel()\n\tconst isChangingStyle = editor.getInstanceState().isChangingStyle\n\n\tconst width = expandedBounds.width\n\tconst height = expandedBounds.height\n\n\tconst size = 8 / zoom\n\tconst isTinyX = width < size * 2\n\tconst isTinyY = height < size * 2\n\n\tconst isSmallX = width < size * 4\n\tconst isSmallY = height < size * 4\n\tconst isSmallCropX = width < size * 5\n\tconst isSmallCropY = height < size * 5\n\n\tconst mobileHandleMultiplier = isCoarsePointer ? 1.75 : 1\n\tconst targetSize = (6 / zoom) * mobileHandleMultiplier\n\n\tconst targetSizeX = (isSmallX ? targetSize / 2 : targetSize) * (mobileHandleMultiplier * 0.75)\n\tconst targetSizeY = (isSmallY ? targetSize / 2 : targetSize) * (mobileHandleMultiplier * 0.75)\n\n\tconst showSelectionBounds =\n\t\t(onlyShape ? !editor.getShapeUtil(onlyShape).hideSelectionBoundsFg(onlyShape) : true) &&\n\t\t!isChangingStyle\n\n\tlet shouldDisplayBox =\n\t\t(showSelectionBounds &&\n\t\t\teditor.isInAny(\n\t\t\t\t'select.idle',\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_canvas',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.crop.idle',\n\t\t\t\t'select.crop.pointing_crop',\n\t\t\t\t'select.crop.pointing_crop_handle',\n\t\t\t\t'select.pointing_resize_handle'\n\t\t\t)) ||\n\t\t(showSelectionBounds &&\n\t\t\teditor.isIn('select.resizing') &&\n\t\t\tonlyShape &&\n\t\t\teditor.isShapeOfType<TLTextShape>(onlyShape, 'text'))\n\n\tif (onlyShape && shouldDisplayBox) {\n\t\tif (tlenv.isFirefox && editor.isShapeOfType<TLEmbedShape>(onlyShape, 'embed')) {\n\t\t\tshouldDisplayBox = false\n\t\t}\n\t}\n\n\tconst showCropHandles =\n\t\teditor.isInAny(\n\t\t\t'select.crop.idle',\n\t\t\t'select.crop.pointing_crop',\n\t\t\t'select.crop.pointing_crop_handle'\n\t\t) &&\n\t\t!isChangingStyle &&\n\t\t!isReadonlyMode\n\n\tconst shouldDisplayControls =\n\t\teditor.isInAny(\n\t\t\t'select.idle',\n\t\t\t'select.pointing_selection',\n\t\t\t'select.pointing_shape',\n\t\t\t'select.crop.idle'\n\t\t) &&\n\t\t!isChangingStyle &&\n\t\t!isReadonlyMode\n\n\tconst showCornerRotateHandles =\n\t\t!isCoarsePointer &&\n\t\t!(isTinyX || isTinyY) &&\n\t\t(shouldDisplayControls || showCropHandles) &&\n\t\t(onlyShape ? !editor.getShapeUtil(onlyShape).hideRotateHandle(onlyShape) : true) &&\n\t\t!isLockedShape\n\n\tconst showMobileRotateHandle =\n\t\tisCoarsePointer &&\n\t\t(!isSmallX || !isSmallY) &&\n\t\t(shouldDisplayControls || showCropHandles) &&\n\t\t(onlyShape ? !editor.getShapeUtil(onlyShape).hideRotateHandle(onlyShape) : true) &&\n\t\t!isLockedShape\n\n\tconst showResizeHandles =\n\t\tshouldDisplayControls &&\n\t\t(onlyShape\n\t\t\t? editor.getShapeUtil(onlyShape).canResize(onlyShape) &&\n\t\t\t\t!editor.getShapeUtil(onlyShape).hideResizeHandles(onlyShape)\n\t\t\t: true) &&\n\t\t!showCropHandles &&\n\t\t!isLockedShape\n\n\tconst hideAlternateCornerHandles = isTinyX || isTinyY\n\tconst showOnlyOneHandle = isTinyX && isTinyY\n\tconst hideAlternateCropHandles = isSmallCropX || isSmallCropY\n\n\tconst showHandles = showResizeHandles || showCropHandles\n\tconst hideRotateCornerHandles = !showCornerRotateHandles\n\tconst hideMobileRotateHandle = !shouldDisplayControls || !showMobileRotateHandle\n\tconst hideTopLeftCorner = !shouldDisplayControls || !showHandles\n\tconst hideTopRightCorner = !shouldDisplayControls || !showHandles || hideAlternateCornerHandles\n\tconst hideBottomLeftCorner = !shouldDisplayControls || !showHandles || hideAlternateCornerHandles\n\tconst hideBottomRightCorner =\n\t\t!shouldDisplayControls || !showHandles || (showOnlyOneHandle && !showCropHandles)\n\n\t// If we're showing crop handles, then show the edges too.\n\t// If we're showing resize handles, then show the edges only\n\t// if we're not hiding them for some other reason.\n\tlet hideVerticalEdgeTargets = true\n\t// The same logic above applies here, except another nuance is that\n\t// we enable resizing for text on mobile (coarse).\n\tlet hideHorizontalEdgeTargets = true\n\n\tif (showCropHandles) {\n\t\thideVerticalEdgeTargets = hideAlternateCropHandles\n\t\thideHorizontalEdgeTargets = hideAlternateCropHandles\n\t} else if (showResizeHandles) {\n\t\thideVerticalEdgeTargets = hideAlternateCornerHandles || showOnlyOneHandle || isCoarsePointer\n\t\tconst isMobileAndTextShape = isCoarsePointer && onlyShape && onlyShape.type === 'text'\n\t\thideHorizontalEdgeTargets = hideVerticalEdgeTargets && !isMobileAndTextShape\n\t}\n\n\tconst textHandleHeight = Math.min(24 / zoom, height - targetSizeY * 3)\n\tconst showTextResizeHandles =\n\t\tshouldDisplayControls &&\n\t\tisCoarsePointer &&\n\t\tonlyShape &&\n\t\teditor.isShapeOfType<TLTextShape>(onlyShape, 'text') &&\n\t\ttextHandleHeight * zoom >= 4\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item tl-selection__fg\" data-testid=\"selection-foreground\">\n\t\t\t<g ref={rSvg}>\n\t\t\t\t{shouldDisplayBox && (\n\t\t\t\t\t<rect\n\t\t\t\t\t\tclassName=\"tl-selection__fg__outline\"\n\t\t\t\t\t\twidth={toDomPrecision(width)}\n\t\t\t\t\t\theight={toDomPrecision(height)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<RotateCornerHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.top-left\"\n\t\t\t\t\tcx={0}\n\t\t\t\t\tcy={0}\n\t\t\t\t\ttargetSize={targetSize}\n\t\t\t\t\tcorner=\"top_left_rotate\"\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nwse-rotate', rotation) : undefined}\n\t\t\t\t\tisHidden={hideRotateCornerHandles}\n\t\t\t\t/>\n\t\t\t\t<RotateCornerHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.top-right\"\n\t\t\t\t\tcx={width + targetSize * 3}\n\t\t\t\t\tcy={0}\n\t\t\t\t\ttargetSize={targetSize}\n\t\t\t\t\tcorner=\"top_right_rotate\"\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nesw-rotate', rotation) : undefined}\n\t\t\t\t\tisHidden={hideRotateCornerHandles}\n\t\t\t\t/>\n\t\t\t\t<RotateCornerHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.bottom-left\"\n\t\t\t\t\tcx={0}\n\t\t\t\t\tcy={height + targetSize * 3}\n\t\t\t\t\ttargetSize={targetSize}\n\t\t\t\t\tcorner=\"bottom_left_rotate\"\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('swne-rotate', rotation) : undefined}\n\t\t\t\t\tisHidden={hideRotateCornerHandles}\n\t\t\t\t/>\n\t\t\t\t<RotateCornerHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.bottom-right\"\n\t\t\t\t\tcx={width + targetSize * 3}\n\t\t\t\t\tcy={height + targetSize * 3}\n\t\t\t\t\ttargetSize={targetSize}\n\t\t\t\t\tcorner=\"bottom_right_rotate\"\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('senw-rotate', rotation) : undefined}\n\t\t\t\t\tisHidden={hideRotateCornerHandles}\n\t\t\t\t/>\n\t\t\t\t<MobileRotateHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.mobile\"\n\t\t\t\t\tcx={isSmallX ? -targetSize * 1.5 : width / 2}\n\t\t\t\t\tcy={isSmallX ? height / 2 : -targetSize * 1.5}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tisHidden={hideMobileRotateHandle}\n\t\t\t\t/>\n\t\t\t\t{/* Targets */}\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideVerticalEdgeTargets}\n\t\t\t\t\tdataTestId=\"selection.resize.top\"\n\t\t\t\t\tariaLabel={msg('handle.resize-top')}\n\t\t\t\t\tx={0}\n\t\t\t\t\ty={toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY))}\n\t\t\t\t\twidth={toDomPrecision(width)}\n\t\t\t\t\theight={toDomPrecision(Math.max(1, targetSizeY * 2))}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('ns-resize', rotation) : undefined}\n\t\t\t\t\tevents={topEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideHorizontalEdgeTargets}\n\t\t\t\t\tdataTestId=\"selection.resize.right\"\n\t\t\t\t\tariaLabel={msg('handle.resize-right')}\n\t\t\t\t\tx={toDomPrecision(width - (isSmallX ? 0 : targetSizeX))}\n\t\t\t\t\ty={0}\n\t\t\t\t\theight={toDomPrecision(height)}\n\t\t\t\t\twidth={toDomPrecision(Math.max(1, targetSizeX * 2))}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('ew-resize', rotation) : undefined}\n\t\t\t\t\tevents={rightEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideVerticalEdgeTargets}\n\t\t\t\t\tdataTestId=\"selection.resize.bottom\"\n\t\t\t\t\tariaLabel={msg('handle.resize-bottom')}\n\t\t\t\t\tx={0}\n\t\t\t\t\ty={toDomPrecision(height - (isSmallY ? 0 : targetSizeY))}\n\t\t\t\t\twidth={toDomPrecision(width)}\n\t\t\t\t\theight={toDomPrecision(Math.max(1, targetSizeY * 2))}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('ns-resize', rotation) : undefined}\n\t\t\t\t\tevents={bottomEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideHorizontalEdgeTargets}\n\t\t\t\t\tdataTestId=\"selection.resize.left\"\n\t\t\t\t\tariaLabel={msg('handle.resize-left')}\n\t\t\t\t\tx={toDomPrecision(0 - (isSmallX ? targetSizeX * 2 : targetSizeX))}\n\t\t\t\t\ty={0}\n\t\t\t\t\theight={toDomPrecision(height)}\n\t\t\t\t\twidth={toDomPrecision(Math.max(1, targetSizeX * 2))}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('ew-resize', rotation) : undefined}\n\t\t\t\t\tevents={leftEvents}\n\t\t\t\t/>\n\t\t\t\t{/* Corner Targets */}\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideTopLeftCorner}\n\t\t\t\t\tdataTestId=\"selection.target.top-left\"\n\t\t\t\t\tariaLabel={msg('handle.resize-top-left')}\n\t\t\t\t\tx={toDomPrecision(0 - (isSmallX ? targetSizeX * 2 : targetSizeX * 1.5))}\n\t\t\t\t\ty={toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY * 1.5))}\n\t\t\t\t\twidth={toDomPrecision(targetSizeX * 3)}\n\t\t\t\t\theight={toDomPrecision(targetSizeY * 3)}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nwse-resize', rotation) : undefined}\n\t\t\t\t\tevents={topLeftEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideTopRightCorner}\n\t\t\t\t\tdataTestId=\"selection.target.top-right\"\n\t\t\t\t\tariaLabel={msg('handle.resize-top-right')}\n\t\t\t\t\tx={toDomPrecision(width - (isSmallX ? 0 : targetSizeX * 1.5))}\n\t\t\t\t\ty={toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY * 1.5))}\n\t\t\t\t\twidth={toDomPrecision(targetSizeX * 3)}\n\t\t\t\t\theight={toDomPrecision(targetSizeY * 3)}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nesw-resize', rotation) : undefined}\n\t\t\t\t\tevents={topRightEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideBottomRightCorner}\n\t\t\t\t\tdataTestId=\"selection.target.bottom-right\"\n\t\t\t\t\tariaLabel={msg('handle.resize-bottom-right')}\n\t\t\t\t\tx={toDomPrecision(width - (isSmallX ? targetSizeX : targetSizeX * 1.5))}\n\t\t\t\t\ty={toDomPrecision(height - (isSmallY ? targetSizeY : targetSizeY * 1.5))}\n\t\t\t\t\twidth={toDomPrecision(targetSizeX * 3)}\n\t\t\t\t\theight={toDomPrecision(targetSizeY * 3)}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nwse-resize', rotation) : undefined}\n\t\t\t\t\tevents={bottomRightEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideBottomLeftCorner}\n\t\t\t\t\tdataTestId=\"selection.target.bottom-left\"\n\t\t\t\t\tariaLabel={msg('handle.resize-bottom-left')}\n\t\t\t\t\tx={toDomPrecision(0 - (isSmallX ? targetSizeX * 3 : targetSizeX * 1.5))}\n\t\t\t\t\ty={toDomPrecision(height - (isSmallY ? 0 : targetSizeY * 1.5))}\n\t\t\t\t\twidth={toDomPrecision(targetSizeX * 3)}\n\t\t\t\t\theight={toDomPrecision(targetSizeY * 3)}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nesw-resize', rotation) : undefined}\n\t\t\t\t\tevents={bottomLeftEvents}\n\t\t\t\t/>\n\t\t\t\t{/* Resize Handles */}\n\t\t\t\t{showResizeHandles && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.resize.top-left\"\n\t\t\t\t\t\t\tclassName={classNames('tl-corner-handle', {\n\t\t\t\t\t\t\t\t'tl-hidden': hideTopLeftCorner,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tx={toDomPrecision(0 - size / 2)}\n\t\t\t\t\t\t\ty={toDomPrecision(0 - size / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size)}\n\t\t\t\t\t\t\theight={toDomPrecision(size)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.resize.top-right\"\n\t\t\t\t\t\t\tclassName={classNames('tl-corner-handle', {\n\t\t\t\t\t\t\t\t'tl-hidden': hideTopRightCorner,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tx={toDomPrecision(width - size / 2)}\n\t\t\t\t\t\t\ty={toDomPrecision(0 - size / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size)}\n\t\t\t\t\t\t\theight={toDomPrecision(size)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.resize.bottom-right\"\n\t\t\t\t\t\t\tclassName={classNames('tl-corner-handle', {\n\t\t\t\t\t\t\t\t'tl-hidden': hideBottomRightCorner,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tx={toDomPrecision(width - size / 2)}\n\t\t\t\t\t\t\ty={toDomPrecision(height - size / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size)}\n\t\t\t\t\t\t\theight={toDomPrecision(size)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.resize.bottom-left\"\n\t\t\t\t\t\t\tclassName={classNames('tl-corner-handle', {\n\t\t\t\t\t\t\t\t'tl-hidden': hideBottomLeftCorner,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tx={toDomPrecision(0 - size / 2)}\n\t\t\t\t\t\t\ty={toDomPrecision(height - size / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size)}\n\t\t\t\t\t\t\theight={toDomPrecision(size)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{showTextResizeHandles && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.text-resize.left.handle\"\n\t\t\t\t\t\t\tclassName=\"tl-text-handle\"\n\t\t\t\t\t\t\tx={toDomPrecision(0 - size / 4)}\n\t\t\t\t\t\t\ty={toDomPrecision(height / 2 - textHandleHeight / 2)}\n\t\t\t\t\t\t\trx={size / 4}\n\t\t\t\t\t\t\twidth={toDomPrecision(size / 2)}\n\t\t\t\t\t\t\theight={toDomPrecision(textHandleHeight)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.text-resize.right.handle\"\n\t\t\t\t\t\t\tclassName=\"tl-text-handle\"\n\t\t\t\t\t\t\trx={size / 4}\n\t\t\t\t\t\t\tx={toDomPrecision(width - size / 4)}\n\t\t\t\t\t\t\ty={toDomPrecision(height / 2 - textHandleHeight / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size / 2)}\n\t\t\t\t\t\t\theight={toDomPrecision(textHandleHeight)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{/* Crop Handles */}\n\t\t\t\t{showCropHandles && (\n\t\t\t\t\t<TldrawCropHandles\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tsize,\n\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\thideAlternateHandles: hideAlternateCropHandles,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n\nexport const ResizeHandle = function ResizeHandle({\n\thide,\n\tdataTestId,\n\tariaLabel,\n\tx,\n\ty,\n\twidth,\n\theight,\n\tcursor,\n\tevents,\n}: {\n\thide: boolean\n\tdataTestId: string\n\tariaLabel: string\n\tx: number\n\ty: number\n\twidth: number\n\theight: number\n\tcursor?: string\n\tevents: {\n\t\tonPointerUp: PointerEventHandler<Element>\n\t\tonPointerMove(e: React.PointerEvent<Element>): void\n\t\tonPointerDown: PointerEventHandler<Element>\n\t}\n}) {\n\treturn (\n\t\t<rect\n\t\t\tclassName={classNames('tl-resize-handle', 'tl-transparent', {\n\t\t\t\t'tl-hidden': hide,\n\t\t\t})}\n\t\t\tdata-testid={dataTestId}\n\t\t\trole=\"button\"\n\t\t\taria-label={ariaLabel}\n\t\t\tpointerEvents=\"all\"\n\t\t\tx={x}\n\t\t\ty={y}\n\t\t\twidth={width}\n\t\t\theight={height}\n\t\t\tcursor={cursor}\n\t\t\t{...events}\n\t\t/>\n\t)\n}\n\nexport const RotateCornerHandle = function RotateCornerHandle({\n\tcx,\n\tcy,\n\ttargetSize,\n\tcorner,\n\tcursor,\n\tisHidden,\n\t'data-testid': testId,\n}: {\n\tcx: number\n\tcy: number\n\ttargetSize: number\n\tcorner: RotateCorner\n\tcursor?: string\n\tisHidden: boolean\n\t'data-testid'?: string\n}) {\n\tconst events = useSelectionEvents(corner)\n\tconst msg = useTranslation()\n\tconst label = msg(`handle.rotate.${corner}`)\n\n\treturn (\n\t\t<rect\n\t\t\tclassName={classNames('tl-transparent', 'tl-rotate-corner', { 'tl-hidden': isHidden })}\n\t\t\tdata-testid={testId}\n\t\t\trole=\"button\"\n\t\t\taria-label={label}\n\t\t\tpointerEvents=\"all\"\n\t\t\tx={toDomPrecision(cx - targetSize * 3)}\n\t\t\ty={toDomPrecision(cy - targetSize * 3)}\n\t\t\twidth={toDomPrecision(Math.max(1, targetSize * 3))}\n\t\t\theight={toDomPrecision(Math.max(1, targetSize * 3))}\n\t\t\tcursor={cursor}\n\t\t\t{...events}\n\t\t/>\n\t)\n}\n\nconst SQUARE_ROOT_PI = Math.sqrt(Math.PI)\n\nexport const MobileRotateHandle = function RotateHandle({\n\tcx,\n\tcy,\n\tsize,\n\tisHidden,\n\t'data-testid': testId,\n}: {\n\tcx: number\n\tcy: number\n\tsize: number\n\tisHidden: boolean\n\t'data-testid'?: string\n}) {\n\tconst events = useSelectionEvents('mobile_rotate')\n\n\tconst editor = useEditor()\n\tconst zoom = useValue('zoom level', () => editor.getZoomLevel(), [editor])\n\tconst bgRadius = Math.max(14 * (1 / zoom), 20 / Math.max(1, zoom))\n\tconst msg = useTranslation()\n\treturn (\n\t\t<g role=\"button\" aria-label={msg('handle.rotate.mobile_rotate')}>\n\t\t\t<circle\n\t\t\t\tdata-testid={testId}\n\t\t\t\tpointerEvents=\"all\"\n\t\t\t\tclassName={classNames('tl-transparent', 'tl-mobile-rotate__bg', { 'tl-hidden': isHidden })}\n\t\t\t\tcx={cx}\n\t\t\t\tcy={cy}\n\t\t\t\tr={bgRadius}\n\t\t\t\t{...events}\n\t\t\t/>\n\t\t\t<circle\n\t\t\t\tclassName={classNames('tl-mobile-rotate__fg', { 'tl-hidden': isHidden })}\n\t\t\t\tcx={cx}\n\t\t\t\tcy={cy}\n\t\t\t\tr={size / SQUARE_ROOT_PI}\n\t\t\t/>\n\t\t</g>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tRotateCorner,\n\tTLEmbedShape,\n\tTLSelectionForegroundProps,\n\tTLTextShape,\n\tgetCursor,\n\ttlenv,\n\ttoDomPrecision,\n\ttrack,\n\tuseEditor,\n\tuseSelectionEvents,\n\tuseTransform,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { PointerEventHandler, useRef } from 'react'\nimport { useReadonly } from '../ui/hooks/useReadonly'\nimport { useTranslation } from '../ui/hooks/useTranslation/useTranslation'\nimport { TldrawCropHandles } from './TldrawCropHandles'\n\n/** @public */\nexport const TldrawSelectionForeground = track(function TldrawSelectionForeground({\n\tbounds,\n\trotation,\n}: TLSelectionForegroundProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tconst isReadonlyMode = useReadonly()\n\tconst topEvents = useSelectionEvents('top')\n\tconst rightEvents = useSelectionEvents('right')\n\tconst bottomEvents = useSelectionEvents('bottom')\n\tconst leftEvents = useSelectionEvents('left')\n\tconst topLeftEvents = useSelectionEvents('top_left')\n\tconst topRightEvents = useSelectionEvents('top_right')\n\tconst bottomRightEvents = useSelectionEvents('bottom_right')\n\tconst bottomLeftEvents = useSelectionEvents('bottom_left')\n\n\tconst isDefaultCursor = editor.getInstanceState().cursor.type === 'default'\n\tconst isCoarsePointer = editor.getInstanceState().isCoarsePointer\n\n\tconst onlyShape = editor.getOnlySelectedShape()\n\tconst isLockedShape = onlyShape && editor.isShapeOrAncestorLocked(onlyShape)\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\tconst expandedBounds =\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\tuseTransform(rSvg, bounds?.x, bounds?.y, 1, editor.getSelectionRotation(), {\n\t\tx: expandedBounds.x - bounds.x,\n\t\ty: expandedBounds.y - bounds.y,\n\t})\n\n\tif (onlyShape && editor.isShapeHidden(onlyShape)) return null\n\n\tconst zoom = editor.getZoomLevel()\n\tconst isChangingStyle = editor.getInstanceState().isChangingStyle\n\n\tconst width = expandedBounds.width\n\tconst height = expandedBounds.height\n\n\tconst size = 8 / zoom\n\tconst isTinyX = width < size * 2\n\tconst isTinyY = height < size * 2\n\n\tconst isSmallX = width < size * 4\n\tconst isSmallY = height < size * 4\n\tconst isSmallCropX = width < size * 5\n\tconst isSmallCropY = height < size * 5\n\n\tconst mobileHandleMultiplier = isCoarsePointer ? 1.75 : 1\n\tconst targetSize = (6 / zoom) * mobileHandleMultiplier\n\n\tconst targetSizeX = (isSmallX ? targetSize / 2 : targetSize) * (mobileHandleMultiplier * 0.75)\n\tconst targetSizeY = (isSmallY ? targetSize / 2 : targetSize) * (mobileHandleMultiplier * 0.75)\n\n\tconst showSelectionBounds =\n\t\t(onlyShape ? !editor.getShapeUtil(onlyShape).hideSelectionBoundsFg(onlyShape) : true) &&\n\t\t!isChangingStyle\n\n\tlet shouldDisplayBox =\n\t\t(showSelectionBounds &&\n\t\t\teditor.isInAny(\n\t\t\t\t'select.idle',\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_canvas',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.crop.idle',\n\t\t\t\t'select.crop.pointing_crop',\n\t\t\t\t'select.crop.pointing_crop_handle',\n\t\t\t\t'select.pointing_resize_handle'\n\t\t\t)) ||\n\t\t(showSelectionBounds &&\n\t\t\teditor.isIn('select.resizing') &&\n\t\t\tonlyShape &&\n\t\t\teditor.isShapeOfType<TLTextShape>(onlyShape, 'text'))\n\n\tif (onlyShape && shouldDisplayBox) {\n\t\tif (tlenv.isFirefox && editor.isShapeOfType<TLEmbedShape>(onlyShape, 'embed')) {\n\t\t\tshouldDisplayBox = false\n\t\t}\n\t}\n\n\tconst showCropHandles =\n\t\teditor.isInAny(\n\t\t\t'select.crop.idle',\n\t\t\t'select.crop.pointing_crop',\n\t\t\t'select.crop.pointing_crop_handle'\n\t\t) &&\n\t\t!isChangingStyle &&\n\t\t!isReadonlyMode\n\n\tconst shouldDisplayControls =\n\t\teditor.isInAny(\n\t\t\t'select.idle',\n\t\t\t'select.pointing_selection',\n\t\t\t'select.pointing_shape',\n\t\t\t'select.crop.idle'\n\t\t) &&\n\t\t!isChangingStyle &&\n\t\t!isReadonlyMode\n\n\tconst showCornerRotateHandles =\n\t\t!isCoarsePointer &&\n\t\t!(isTinyX || isTinyY) &&\n\t\t(shouldDisplayControls || showCropHandles) &&\n\t\t(onlyShape ? !editor.getShapeUtil(onlyShape).hideRotateHandle(onlyShape) : true) &&\n\t\t!isLockedShape\n\n\tconst showMobileRotateHandle =\n\t\tisCoarsePointer &&\n\t\t(!isSmallX || !isSmallY) &&\n\t\t(shouldDisplayControls || showCropHandles) &&\n\t\t(onlyShape ? !editor.getShapeUtil(onlyShape).hideRotateHandle(onlyShape) : true) &&\n\t\t!isLockedShape\n\n\tconst showResizeHandles =\n\t\tshouldDisplayControls &&\n\t\t(onlyShape\n\t\t\t? editor.getShapeUtil(onlyShape).canResize(onlyShape) &&\n\t\t\t\t!editor.getShapeUtil(onlyShape).hideResizeHandles(onlyShape)\n\t\t\t: true) &&\n\t\t!showCropHandles &&\n\t\t!isLockedShape\n\n\tconst hideAlternateCornerHandles = isTinyX || isTinyY\n\tconst showOnlyOneHandle = isTinyX && isTinyY\n\tconst hideAlternateCropHandles = isSmallCropX || isSmallCropY\n\n\tconst showHandles = showResizeHandles || showCropHandles\n\tconst hideRotateCornerHandles = !showCornerRotateHandles\n\tconst hideMobileRotateHandle = !shouldDisplayControls || !showMobileRotateHandle\n\tconst hideTopLeftCorner = !shouldDisplayControls || !showHandles\n\tconst hideTopRightCorner = !shouldDisplayControls || !showHandles || hideAlternateCornerHandles\n\tconst hideBottomLeftCorner = !shouldDisplayControls || !showHandles || hideAlternateCornerHandles\n\tconst hideBottomRightCorner =\n\t\t!shouldDisplayControls || !showHandles || (showOnlyOneHandle && !showCropHandles)\n\n\t// If we're showing crop handles, then show the edges too.\n\t// If we're showing resize handles, then show the edges only\n\t// if we're not hiding them for some other reason.\n\tlet hideVerticalEdgeTargets = true\n\t// The same logic above applies here, except another nuance is that\n\t// we enable resizing for text on mobile (coarse).\n\tlet hideHorizontalEdgeTargets = true\n\n\tif (showCropHandles) {\n\t\thideVerticalEdgeTargets = hideAlternateCropHandles\n\t\thideHorizontalEdgeTargets = hideAlternateCropHandles\n\t} else if (showResizeHandles) {\n\t\thideVerticalEdgeTargets = hideAlternateCornerHandles || showOnlyOneHandle || isCoarsePointer\n\t\tconst isMobileAndTextShape = isCoarsePointer && onlyShape && onlyShape.type === 'text'\n\t\thideHorizontalEdgeTargets = hideVerticalEdgeTargets && !isMobileAndTextShape\n\t}\n\n\tconst textHandleHeight = Math.min(24 / zoom, height - targetSizeY * 3)\n\tconst showTextResizeHandles =\n\t\tshouldDisplayControls &&\n\t\tisCoarsePointer &&\n\t\tonlyShape &&\n\t\teditor.isShapeOfType<TLTextShape>(onlyShape, 'text') &&\n\t\ttextHandleHeight * zoom >= 4\n\n\treturn (\n\t\t<svg\n\t\t\tclassName=\"tl-overlays__item tl-selection__fg\"\n\t\t\tdata-testid=\"selection-foreground\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<g ref={rSvg}>\n\t\t\t\t{shouldDisplayBox && (\n\t\t\t\t\t<rect\n\t\t\t\t\t\tclassName=\"tl-selection__fg__outline\"\n\t\t\t\t\t\twidth={toDomPrecision(width)}\n\t\t\t\t\t\theight={toDomPrecision(height)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<RotateCornerHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.top-left\"\n\t\t\t\t\tcx={0}\n\t\t\t\t\tcy={0}\n\t\t\t\t\ttargetSize={targetSize}\n\t\t\t\t\tcorner=\"top_left_rotate\"\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nwse-rotate', rotation) : undefined}\n\t\t\t\t\tisHidden={hideRotateCornerHandles}\n\t\t\t\t/>\n\t\t\t\t<RotateCornerHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.top-right\"\n\t\t\t\t\tcx={width + targetSize * 3}\n\t\t\t\t\tcy={0}\n\t\t\t\t\ttargetSize={targetSize}\n\t\t\t\t\tcorner=\"top_right_rotate\"\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nesw-rotate', rotation) : undefined}\n\t\t\t\t\tisHidden={hideRotateCornerHandles}\n\t\t\t\t/>\n\t\t\t\t<RotateCornerHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.bottom-left\"\n\t\t\t\t\tcx={0}\n\t\t\t\t\tcy={height + targetSize * 3}\n\t\t\t\t\ttargetSize={targetSize}\n\t\t\t\t\tcorner=\"bottom_left_rotate\"\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('swne-rotate', rotation) : undefined}\n\t\t\t\t\tisHidden={hideRotateCornerHandles}\n\t\t\t\t/>\n\t\t\t\t<RotateCornerHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.bottom-right\"\n\t\t\t\t\tcx={width + targetSize * 3}\n\t\t\t\t\tcy={height + targetSize * 3}\n\t\t\t\t\ttargetSize={targetSize}\n\t\t\t\t\tcorner=\"bottom_right_rotate\"\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('senw-rotate', rotation) : undefined}\n\t\t\t\t\tisHidden={hideRotateCornerHandles}\n\t\t\t\t/>\n\t\t\t\t<MobileRotateHandle\n\t\t\t\t\tdata-testid=\"selection.rotate.mobile\"\n\t\t\t\t\tcx={isSmallX ? -targetSize * 1.5 : width / 2}\n\t\t\t\t\tcy={isSmallX ? height / 2 : -targetSize * 1.5}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tisHidden={hideMobileRotateHandle}\n\t\t\t\t/>\n\t\t\t\t{/* Targets */}\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideVerticalEdgeTargets}\n\t\t\t\t\tdataTestId=\"selection.resize.top\"\n\t\t\t\t\tariaLabel={msg('handle.resize-top')}\n\t\t\t\t\tx={0}\n\t\t\t\t\ty={toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY))}\n\t\t\t\t\twidth={toDomPrecision(width)}\n\t\t\t\t\theight={toDomPrecision(Math.max(1, targetSizeY * 2))}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('ns-resize', rotation) : undefined}\n\t\t\t\t\tevents={topEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideHorizontalEdgeTargets}\n\t\t\t\t\tdataTestId=\"selection.resize.right\"\n\t\t\t\t\tariaLabel={msg('handle.resize-right')}\n\t\t\t\t\tx={toDomPrecision(width - (isSmallX ? 0 : targetSizeX))}\n\t\t\t\t\ty={0}\n\t\t\t\t\theight={toDomPrecision(height)}\n\t\t\t\t\twidth={toDomPrecision(Math.max(1, targetSizeX * 2))}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('ew-resize', rotation) : undefined}\n\t\t\t\t\tevents={rightEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideVerticalEdgeTargets}\n\t\t\t\t\tdataTestId=\"selection.resize.bottom\"\n\t\t\t\t\tariaLabel={msg('handle.resize-bottom')}\n\t\t\t\t\tx={0}\n\t\t\t\t\ty={toDomPrecision(height - (isSmallY ? 0 : targetSizeY))}\n\t\t\t\t\twidth={toDomPrecision(width)}\n\t\t\t\t\theight={toDomPrecision(Math.max(1, targetSizeY * 2))}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('ns-resize', rotation) : undefined}\n\t\t\t\t\tevents={bottomEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideHorizontalEdgeTargets}\n\t\t\t\t\tdataTestId=\"selection.resize.left\"\n\t\t\t\t\tariaLabel={msg('handle.resize-left')}\n\t\t\t\t\tx={toDomPrecision(0 - (isSmallX ? targetSizeX * 2 : targetSizeX))}\n\t\t\t\t\ty={0}\n\t\t\t\t\theight={toDomPrecision(height)}\n\t\t\t\t\twidth={toDomPrecision(Math.max(1, targetSizeX * 2))}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('ew-resize', rotation) : undefined}\n\t\t\t\t\tevents={leftEvents}\n\t\t\t\t/>\n\t\t\t\t{/* Corner Targets */}\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideTopLeftCorner}\n\t\t\t\t\tdataTestId=\"selection.target.top-left\"\n\t\t\t\t\tariaLabel={msg('handle.resize-top-left')}\n\t\t\t\t\tx={toDomPrecision(0 - (isSmallX ? targetSizeX * 2 : targetSizeX * 1.5))}\n\t\t\t\t\ty={toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY * 1.5))}\n\t\t\t\t\twidth={toDomPrecision(targetSizeX * 3)}\n\t\t\t\t\theight={toDomPrecision(targetSizeY * 3)}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nwse-resize', rotation) : undefined}\n\t\t\t\t\tevents={topLeftEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideTopRightCorner}\n\t\t\t\t\tdataTestId=\"selection.target.top-right\"\n\t\t\t\t\tariaLabel={msg('handle.resize-top-right')}\n\t\t\t\t\tx={toDomPrecision(width - (isSmallX ? 0 : targetSizeX * 1.5))}\n\t\t\t\t\ty={toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY * 1.5))}\n\t\t\t\t\twidth={toDomPrecision(targetSizeX * 3)}\n\t\t\t\t\theight={toDomPrecision(targetSizeY * 3)}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nesw-resize', rotation) : undefined}\n\t\t\t\t\tevents={topRightEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideBottomRightCorner}\n\t\t\t\t\tdataTestId=\"selection.target.bottom-right\"\n\t\t\t\t\tariaLabel={msg('handle.resize-bottom-right')}\n\t\t\t\t\tx={toDomPrecision(width - (isSmallX ? targetSizeX : targetSizeX * 1.5))}\n\t\t\t\t\ty={toDomPrecision(height - (isSmallY ? targetSizeY : targetSizeY * 1.5))}\n\t\t\t\t\twidth={toDomPrecision(targetSizeX * 3)}\n\t\t\t\t\theight={toDomPrecision(targetSizeY * 3)}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nwse-resize', rotation) : undefined}\n\t\t\t\t\tevents={bottomRightEvents}\n\t\t\t\t/>\n\t\t\t\t<ResizeHandle\n\t\t\t\t\thide={hideBottomLeftCorner}\n\t\t\t\t\tdataTestId=\"selection.target.bottom-left\"\n\t\t\t\t\tariaLabel={msg('handle.resize-bottom-left')}\n\t\t\t\t\tx={toDomPrecision(0 - (isSmallX ? targetSizeX * 3 : targetSizeX * 1.5))}\n\t\t\t\t\ty={toDomPrecision(height - (isSmallY ? 0 : targetSizeY * 1.5))}\n\t\t\t\t\twidth={toDomPrecision(targetSizeX * 3)}\n\t\t\t\t\theight={toDomPrecision(targetSizeY * 3)}\n\t\t\t\t\tcursor={isDefaultCursor ? getCursor('nesw-resize', rotation) : undefined}\n\t\t\t\t\tevents={bottomLeftEvents}\n\t\t\t\t/>\n\t\t\t\t{/* Resize Handles */}\n\t\t\t\t{showResizeHandles && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.resize.top-left\"\n\t\t\t\t\t\t\tclassName={classNames('tl-corner-handle', {\n\t\t\t\t\t\t\t\t'tl-hidden': hideTopLeftCorner,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tx={toDomPrecision(0 - size / 2)}\n\t\t\t\t\t\t\ty={toDomPrecision(0 - size / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size)}\n\t\t\t\t\t\t\theight={toDomPrecision(size)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.resize.top-right\"\n\t\t\t\t\t\t\tclassName={classNames('tl-corner-handle', {\n\t\t\t\t\t\t\t\t'tl-hidden': hideTopRightCorner,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tx={toDomPrecision(width - size / 2)}\n\t\t\t\t\t\t\ty={toDomPrecision(0 - size / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size)}\n\t\t\t\t\t\t\theight={toDomPrecision(size)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.resize.bottom-right\"\n\t\t\t\t\t\t\tclassName={classNames('tl-corner-handle', {\n\t\t\t\t\t\t\t\t'tl-hidden': hideBottomRightCorner,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tx={toDomPrecision(width - size / 2)}\n\t\t\t\t\t\t\ty={toDomPrecision(height - size / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size)}\n\t\t\t\t\t\t\theight={toDomPrecision(size)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.resize.bottom-left\"\n\t\t\t\t\t\t\tclassName={classNames('tl-corner-handle', {\n\t\t\t\t\t\t\t\t'tl-hidden': hideBottomLeftCorner,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tx={toDomPrecision(0 - size / 2)}\n\t\t\t\t\t\t\ty={toDomPrecision(height - size / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size)}\n\t\t\t\t\t\t\theight={toDomPrecision(size)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{showTextResizeHandles && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.text-resize.left.handle\"\n\t\t\t\t\t\t\tclassName=\"tl-text-handle\"\n\t\t\t\t\t\t\tx={toDomPrecision(0 - size / 4)}\n\t\t\t\t\t\t\ty={toDomPrecision(height / 2 - textHandleHeight / 2)}\n\t\t\t\t\t\t\trx={size / 4}\n\t\t\t\t\t\t\twidth={toDomPrecision(size / 2)}\n\t\t\t\t\t\t\theight={toDomPrecision(textHandleHeight)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-testid=\"selection.text-resize.right.handle\"\n\t\t\t\t\t\t\tclassName=\"tl-text-handle\"\n\t\t\t\t\t\t\trx={size / 4}\n\t\t\t\t\t\t\tx={toDomPrecision(width - size / 4)}\n\t\t\t\t\t\t\ty={toDomPrecision(height / 2 - textHandleHeight / 2)}\n\t\t\t\t\t\t\twidth={toDomPrecision(size / 2)}\n\t\t\t\t\t\t\theight={toDomPrecision(textHandleHeight)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{/* Crop Handles */}\n\t\t\t\t{showCropHandles && (\n\t\t\t\t\t<TldrawCropHandles\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tsize,\n\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\thideAlternateHandles: hideAlternateCropHandles,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n\nexport const ResizeHandle = function ResizeHandle({\n\thide,\n\tdataTestId,\n\tariaLabel,\n\tx,\n\ty,\n\twidth,\n\theight,\n\tcursor,\n\tevents,\n}: {\n\thide: boolean\n\tdataTestId: string\n\tariaLabel: string\n\tx: number\n\ty: number\n\twidth: number\n\theight: number\n\tcursor?: string\n\tevents: {\n\t\tonPointerUp: PointerEventHandler<Element>\n\t\tonPointerMove(e: React.PointerEvent<Element>): void\n\t\tonPointerDown: PointerEventHandler<Element>\n\t}\n}) {\n\treturn (\n\t\t<rect\n\t\t\tclassName={classNames('tl-resize-handle', 'tl-transparent', {\n\t\t\t\t'tl-hidden': hide,\n\t\t\t})}\n\t\t\tdata-testid={dataTestId}\n\t\t\trole=\"button\"\n\t\t\taria-label={ariaLabel}\n\t\t\tpointerEvents=\"all\"\n\t\t\tx={x}\n\t\t\ty={y}\n\t\t\twidth={width}\n\t\t\theight={height}\n\t\t\tcursor={cursor}\n\t\t\t{...events}\n\t\t/>\n\t)\n}\n\nexport const RotateCornerHandle = function RotateCornerHandle({\n\tcx,\n\tcy,\n\ttargetSize,\n\tcorner,\n\tcursor,\n\tisHidden,\n\t'data-testid': testId,\n}: {\n\tcx: number\n\tcy: number\n\ttargetSize: number\n\tcorner: RotateCorner\n\tcursor?: string\n\tisHidden: boolean\n\t'data-testid'?: string\n}) {\n\tconst events = useSelectionEvents(corner)\n\tconst msg = useTranslation()\n\tconst label = msg(`handle.rotate.${corner}`)\n\n\treturn (\n\t\t<rect\n\t\t\tclassName={classNames('tl-transparent', 'tl-rotate-corner', { 'tl-hidden': isHidden })}\n\t\t\tdata-testid={testId}\n\t\t\trole=\"button\"\n\t\t\taria-label={label}\n\t\t\tpointerEvents=\"all\"\n\t\t\tx={toDomPrecision(cx - targetSize * 3)}\n\t\t\ty={toDomPrecision(cy - targetSize * 3)}\n\t\t\twidth={toDomPrecision(Math.max(1, targetSize * 3))}\n\t\t\theight={toDomPrecision(Math.max(1, targetSize * 3))}\n\t\t\tcursor={cursor}\n\t\t\t{...events}\n\t\t/>\n\t)\n}\n\nconst SQUARE_ROOT_PI = Math.sqrt(Math.PI)\n\nexport const MobileRotateHandle = function RotateHandle({\n\tcx,\n\tcy,\n\tsize,\n\tisHidden,\n\t'data-testid': testId,\n}: {\n\tcx: number\n\tcy: number\n\tsize: number\n\tisHidden: boolean\n\t'data-testid'?: string\n}) {\n\tconst events = useSelectionEvents('mobile_rotate')\n\n\tconst editor = useEditor()\n\tconst zoom = useValue('zoom level', () => editor.getZoomLevel(), [editor])\n\tconst bgRadius = Math.max(14 * (1 / zoom), 20 / Math.max(1, zoom))\n\tconst msg = useTranslation()\n\treturn (\n\t\t<g role=\"button\" aria-label={msg('handle.rotate.mobile_rotate')}>\n\t\t\t<circle\n\t\t\t\tdata-testid={testId}\n\t\t\t\tpointerEvents=\"all\"\n\t\t\t\tclassName={classNames('tl-transparent', 'tl-mobile-rotate__bg', { 'tl-hidden': isHidden })}\n\t\t\t\tcx={cx}\n\t\t\t\tcy={cy}\n\t\t\t\tr={bgRadius}\n\t\t\t\t{...events}\n\t\t\t/>\n\t\t\t<circle\n\t\t\t\tclassName={classNames('tl-mobile-rotate__fg', { 'tl-hidden': isHidden })}\n\t\t\t\tcx={cx}\n\t\t\t\tcy={cy}\n\t\t\t\tr={size / SQUARE_ROOT_PI}\n\t\t\t/>\n\t\t</g>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["TldrawSelectionForeground", "classNames", "ResizeHandle", "RotateCornerHandle"]
 }

package/dist-cjs/lib/shapes/shared/PlainTextLabel.js CHANGED Viewed

@@ -69,6 +69,7 @@ const PlainTextLabel = import_react.default.memo(function PlainTextLabel2({
     "div",
     {
       className: `${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`,
+      "aria-hidden": "true",
       "data-font": font,
       "data-align": align,
       "data-hastext": !isEmpty,

package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/shared/PlainTextLabel.tsx"],
-  "sourcesContent": ["import {\n\tBox,\n\tTLDefaultFillStyle,\n\tTLDefaultFontStyle,\n\tTLDefaultHorizontalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n\tTLShapeId,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { PlainTextArea } from '../text/PlainTextArea'\nimport { TextHelpers } from './TextHelpers'\nimport { isLegacyAlign } from './legacyProps'\nimport { useEditablePlainText } from './useEditablePlainText'\n\n/** @public */\nexport interface PlainTextLabelProps {\n\tshapeId: TLShapeId\n\ttype: string\n\tfont: TLDefaultFontStyle\n\tfontSize: number\n\tlineHeight: number\n\tfill?: TLDefaultFillStyle\n\talign: TLDefaultHorizontalAlignStyle\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\twrap?: boolean\n\ttext?: string\n\tlabelColor: string\n\tbounds?: Box\n\tisSelected: boolean\n\tonKeyDown?(e: KeyboardEvent): void\n\tclassNamePrefix?: string\n\tstyle?: React.CSSProperties\n\ttextWidth?: number\n\ttextHeight?: number\n\tpadding?: number\n}\n\n/**\n * Renders a text label that can be used inside of shapes.\n * The component has the ability to be edited in place and furthermore\n * supports rich text editing.\n *\n * @public @react\n */\nexport const PlainTextLabel = React.memo(function PlainTextLabel({\n\tshapeId,\n\ttype,\n\ttext: plaintext,\n\tlabelColor,\n\tfont,\n\tfontSize,\n\tlineHeight,\n\talign,\n\tverticalAlign,\n\twrap,\n\tisSelected,\n\tpadding = 0,\n\tonKeyDown: handleKeyDownCustom,\n\tclassNamePrefix,\n\tstyle,\n\ttextWidth,\n\ttextHeight,\n}: PlainTextLabelProps) {\n\tconst { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =\n\t\tuseEditablePlainText(shapeId, type, plaintext)\n\n\tconst finalPlainText = TextHelpers.normalizeTextForDom(plaintext || '')\n\tconst hasText = finalPlainText.length > 0\n\n\tconst legacyAlign = isLegacyAlign(align)\n\n\tif (!isEditing && !hasText) {\n\t\treturn null\n\t}\n\n\t// TODO: probably combine tl-text and tl-arrow eventually\n\t// In case you're grepping for this, it breaks down as follows:\n\t// tl-text-label, tl-text-label__inner, tl-text-shape-label, tl-text\n\t// tl-arrow-label, tl-arrow-label__inner, tl-arrow\n\tconst cssPrefix = classNamePrefix || 'tl-text'\n\treturn (\n\t\t<div\n\t\t\tclassName={`${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`}\n\t\t\tdata-font={font}\n\t\t\tdata-align={align}\n\t\t\tdata-hastext={!isEmpty}\n\t\t\tdata-isediting={isEditing}\n\t\t\tdata-is-ready-for-editing={isReadyForEditing}\n\t\t\tdata-textwrap={!!wrap}\n\t\t\tdata-isselected={isSelected}\n\t\t\tstyle={{\n\t\t\t\tjustifyContent: align === 'middle' || legacyAlign ? 'center' : align,\n\t\t\t\talignItems: verticalAlign === 'middle' ? 'center' : verticalAlign,\n\t\t\t\tpadding,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`${cssPrefix}-label__inner tl-text-content__wrapper`}\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize,\n\t\t\t\t\tlineHeight: lineHeight.toString(),\n\t\t\t\t\tminHeight: Math.floor(fontSize * lineHeight) + 'px',\n\t\t\t\t\tminWidth: Math.ceil(textWidth || 0),\n\t\t\t\t\tcolor: labelColor,\n\t\t\t\t\twidth: textWidth ? Math.ceil(textWidth) : undefined,\n\t\t\t\t\theight: textHeight ? Math.ceil(textHeight) : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={`${cssPrefix} tl-text tl-text-content`} dir=\"auto\">\n\t\t\t\t\t{finalPlainText.split('\\n').map((lineOfText, index) => (\n\t\t\t\t\t\t<div key={index} dir=\"auto\">\n\t\t\t\t\t\t\t{lineOfText}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t{(isReadyForEditing || isSelected) && (\n\t\t\t\t\t<PlainTextArea\n\t\t\t\t\t\t// Fudge the ref type because we're using forwardRef and it's not typed correctly.\n\t\t\t\t\t\tref={rInput as any}\n\t\t\t\t\t\ttext={plaintext}\n\t\t\t\t\t\tisEditing={isEditing}\n\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t{...editableTextRest}\n\t\t\t\t\t\thandleKeyDown={handleKeyDownCustom ?? editableTextRest.handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\n/**\n * @deprecated Use `PlainTextLabel` instead.\n * @public\n */\nexport const TextLabel = PlainTextLabel\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiGG;AAzFH,mBAAkB;AAClB,2BAA8B;AAC9B,yBAA4B;AAC5B,yBAA8B;AAC9B,kCAAqC;AAgC9B,MAAM,iBAAiB,aAAAA,QAAM,KAAK,SAASC,gBAAe;AAAA,EAChE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,EAAE,QAAQ,SAAS,WAAW,mBAAmB,GAAG,iBAAiB,QAC1E,kDAAqB,SAAS,MAAM,SAAS;AAE9C,QAAM,iBAAiB,+BAAY,oBAAoB,aAAa,EAAE;AACtE,QAAM,UAAU,eAAe,SAAS;AAExC,QAAM,kBAAc,kCAAc,KAAK;AAEvC,MAAI,CAAC,aAAa,CAAC,SAAS;AAC3B,WAAO;AAAA,EACR;AAMA,QAAM,YAAY,mBAAmB;AACrC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,gBAAc,CAAC;AAAA,MACf,kBAAgB;AAAA,MAChB,6BAA2B;AAAA,MAC3B,iBAAe,CAAC,CAAC;AAAA,MACjB,mBAAiB;AAAA,MACjB,OAAO;AAAA,QACN,gBAAgB,UAAU,YAAY,cAAc,WAAW;AAAA,QAC/D,YAAY,kBAAkB,WAAW,WAAW;AAAA,QACpD;AAAA,QACA,GAAG;AAAA,MACJ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,SAAS;AAAA,UACvB,OAAO;AAAA,YACN;AAAA,YACA,YAAY,WAAW,SAAS;AAAA,YAChC,WAAW,KAAK,MAAM,WAAW,UAAU,IAAI;AAAA,YAC/C,UAAU,KAAK,KAAK,aAAa,CAAC;AAAA,YAClC,OAAO;AAAA,YACP,OAAO,YAAY,KAAK,KAAK,SAAS,IAAI;AAAA,YAC1C,QAAQ,aAAa,KAAK,KAAK,UAAU,IAAI;AAAA,UAC9C;AAAA,UAEA;AAAA,wDAAC,SAAI,WAAW,GAAG,SAAS,4BAA4B,KAAI,QAC1D,yBAAe,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,UAC5C,4CAAC,SAAgB,KAAI,QACnB,wBADQ,KAEV,CACA,GACF;AAAA,aACE,qBAAqB,eACtB;AAAA,cAAC;AAAA;AAAA,gBAEA,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA,gBACJ,eAAe,uBAAuB,iBAAiB;AAAA;AAAA,YACxD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD;AAEF,CAAC;AAMM,MAAM,YAAY;",
+  "sourcesContent": ["import {\n\tBox,\n\tTLDefaultFillStyle,\n\tTLDefaultFontStyle,\n\tTLDefaultHorizontalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n\tTLShapeId,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { PlainTextArea } from '../text/PlainTextArea'\nimport { TextHelpers } from './TextHelpers'\nimport { isLegacyAlign } from './legacyProps'\nimport { useEditablePlainText } from './useEditablePlainText'\n\n/** @public */\nexport interface PlainTextLabelProps {\n\tshapeId: TLShapeId\n\ttype: string\n\tfont: TLDefaultFontStyle\n\tfontSize: number\n\tlineHeight: number\n\tfill?: TLDefaultFillStyle\n\talign: TLDefaultHorizontalAlignStyle\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\twrap?: boolean\n\ttext?: string\n\tlabelColor: string\n\tbounds?: Box\n\tisSelected: boolean\n\tonKeyDown?(e: KeyboardEvent): void\n\tclassNamePrefix?: string\n\tstyle?: React.CSSProperties\n\ttextWidth?: number\n\ttextHeight?: number\n\tpadding?: number\n}\n\n/**\n * Renders a text label that can be used inside of shapes.\n * The component has the ability to be edited in place and furthermore\n * supports rich text editing.\n *\n * @public @react\n */\nexport const PlainTextLabel = React.memo(function PlainTextLabel({\n\tshapeId,\n\ttype,\n\ttext: plaintext,\n\tlabelColor,\n\tfont,\n\tfontSize,\n\tlineHeight,\n\talign,\n\tverticalAlign,\n\twrap,\n\tisSelected,\n\tpadding = 0,\n\tonKeyDown: handleKeyDownCustom,\n\tclassNamePrefix,\n\tstyle,\n\ttextWidth,\n\ttextHeight,\n}: PlainTextLabelProps) {\n\tconst { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =\n\t\tuseEditablePlainText(shapeId, type, plaintext)\n\n\tconst finalPlainText = TextHelpers.normalizeTextForDom(plaintext || '')\n\tconst hasText = finalPlainText.length > 0\n\n\tconst legacyAlign = isLegacyAlign(align)\n\n\tif (!isEditing && !hasText) {\n\t\treturn null\n\t}\n\n\t// TODO: probably combine tl-text and tl-arrow eventually\n\t// In case you're grepping for this, it breaks down as follows:\n\t// tl-text-label, tl-text-label__inner, tl-text-shape-label, tl-text\n\t// tl-arrow-label, tl-arrow-label__inner, tl-arrow\n\tconst cssPrefix = classNamePrefix || 'tl-text'\n\treturn (\n\t\t<div\n\t\t\tclassName={`${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`}\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-font={font}\n\t\t\tdata-align={align}\n\t\t\tdata-hastext={!isEmpty}\n\t\t\tdata-isediting={isEditing}\n\t\t\tdata-is-ready-for-editing={isReadyForEditing}\n\t\t\tdata-textwrap={!!wrap}\n\t\t\tdata-isselected={isSelected}\n\t\t\tstyle={{\n\t\t\t\tjustifyContent: align === 'middle' || legacyAlign ? 'center' : align,\n\t\t\t\talignItems: verticalAlign === 'middle' ? 'center' : verticalAlign,\n\t\t\t\tpadding,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`${cssPrefix}-label__inner tl-text-content__wrapper`}\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize,\n\t\t\t\t\tlineHeight: lineHeight.toString(),\n\t\t\t\t\tminHeight: Math.floor(fontSize * lineHeight) + 'px',\n\t\t\t\t\tminWidth: Math.ceil(textWidth || 0),\n\t\t\t\t\tcolor: labelColor,\n\t\t\t\t\twidth: textWidth ? Math.ceil(textWidth) : undefined,\n\t\t\t\t\theight: textHeight ? Math.ceil(textHeight) : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={`${cssPrefix} tl-text tl-text-content`} dir=\"auto\">\n\t\t\t\t\t{finalPlainText.split('\\n').map((lineOfText, index) => (\n\t\t\t\t\t\t<div key={index} dir=\"auto\">\n\t\t\t\t\t\t\t{lineOfText}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t{(isReadyForEditing || isSelected) && (\n\t\t\t\t\t<PlainTextArea\n\t\t\t\t\t\t// Fudge the ref type because we're using forwardRef and it's not typed correctly.\n\t\t\t\t\t\tref={rInput as any}\n\t\t\t\t\t\ttext={plaintext}\n\t\t\t\t\t\tisEditing={isEditing}\n\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t{...editableTextRest}\n\t\t\t\t\t\thandleKeyDown={handleKeyDownCustom ?? editableTextRest.handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\n/**\n * @deprecated Use `PlainTextLabel` instead.\n * @public\n */\nexport const TextLabel = PlainTextLabel\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkGG;AA1FH,mBAAkB;AAClB,2BAA8B;AAC9B,yBAA4B;AAC5B,yBAA8B;AAC9B,kCAAqC;AAgC9B,MAAM,iBAAiB,aAAAA,QAAM,KAAK,SAASC,gBAAe;AAAA,EAChE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,EAAE,QAAQ,SAAS,WAAW,mBAAmB,GAAG,iBAAiB,QAC1E,kDAAqB,SAAS,MAAM,SAAS;AAE9C,QAAM,iBAAiB,+BAAY,oBAAoB,aAAa,EAAE;AACtE,QAAM,UAAU,eAAe,SAAS;AAExC,QAAM,kBAAc,kCAAc,KAAK;AAEvC,MAAI,CAAC,aAAa,CAAC,SAAS;AAC3B,WAAO;AAAA,EACR;AAMA,QAAM,YAAY,mBAAmB;AACrC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB,eAAY;AAAA,MACZ,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,gBAAc,CAAC;AAAA,MACf,kBAAgB;AAAA,MAChB,6BAA2B;AAAA,MAC3B,iBAAe,CAAC,CAAC;AAAA,MACjB,mBAAiB;AAAA,MACjB,OAAO;AAAA,QACN,gBAAgB,UAAU,YAAY,cAAc,WAAW;AAAA,QAC/D,YAAY,kBAAkB,WAAW,WAAW;AAAA,QACpD;AAAA,QACA,GAAG;AAAA,MACJ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,SAAS;AAAA,UACvB,OAAO;AAAA,YACN;AAAA,YACA,YAAY,WAAW,SAAS;AAAA,YAChC,WAAW,KAAK,MAAM,WAAW,UAAU,IAAI;AAAA,YAC/C,UAAU,KAAK,KAAK,aAAa,CAAC;AAAA,YAClC,OAAO;AAAA,YACP,OAAO,YAAY,KAAK,KAAK,SAAS,IAAI;AAAA,YAC1C,QAAQ,aAAa,KAAK,KAAK,UAAU,IAAI;AAAA,UAC9C;AAAA,UAEA;AAAA,wDAAC,SAAI,WAAW,GAAG,SAAS,4BAA4B,KAAI,QAC1D,yBAAe,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,UAC5C,4CAAC,SAAgB,KAAI,QACnB,wBADQ,KAEV,CACA,GACF;AAAA,aACE,qBAAqB,eACtB;AAAA,cAAC;AAAA;AAAA,gBAEA,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA,gBACJ,eAAe,uBAAuB,iBAAiB;AAAA;AAAA,YACxD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD;AAEF,CAAC;AAMM,MAAM,YAAY;",
   "names": ["React", "PlainTextLabel"]
 }

package/dist-cjs/lib/shapes/shared/RichTextLabel.js CHANGED Viewed

@@ -103,6 +103,7 @@ const RichTextLabel = import_react.default.memo(function RichTextLabel2({
     "div",
     {
       className: `${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`,
+      "aria-hidden": "true",
       "data-font": font,
       "data-align": align,
       "data-hastext": !isEmpty,

package/dist-cjs/lib/shapes/shared/RichTextLabel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/shared/RichTextLabel.tsx"],
-  "sourcesContent": ["import {\n\tBox,\n\tDefaultFontFamilies,\n\tTLDefaultFillStyle,\n\tTLDefaultFontStyle,\n\tTLDefaultHorizontalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n\tTLEventInfo,\n\tTLRichText,\n\tTLShapeId,\n\tpreventDefault,\n\tuseEditor,\n\tuseReactor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React, { useMemo } from 'react'\nimport { renderHtmlFromRichText } from '../../utils/text/richText'\nimport { RichTextArea } from '../text/RichTextArea'\nimport { TEXT_PROPS } from './default-shape-constants'\nimport { isLegacyAlign } from './legacyProps'\nimport { useEditableRichText } from './useEditableRichText'\n\n/** @public */\nexport interface RichTextLabelProps {\n\tshapeId: TLShapeId\n\ttype: string\n\tfont: TLDefaultFontStyle\n\tfontSize: number\n\tlineHeight: number\n\tfill?: TLDefaultFillStyle\n\talign: TLDefaultHorizontalAlignStyle\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\twrap?: boolean\n\trichText?: TLRichText\n\tlabelColor: string\n\tbounds?: Box\n\tisSelected: boolean\n\tonKeyDown?(e: KeyboardEvent): void\n\tclassNamePrefix?: string\n\tstyle?: React.CSSProperties\n\ttextWidth?: number\n\ttextHeight?: number\n\tpadding?: number\n\thasCustomTabBehavior?: boolean\n}\n\n/**\n * Renders a text label that can be used inside of shapes.\n * The component has the ability to be edited in place and furthermore\n * supports rich text editing.\n *\n * @public @react\n */\nexport const RichTextLabel = React.memo(function RichTextLabel({\n\tshapeId,\n\ttype,\n\trichText,\n\tlabelColor,\n\tfont,\n\tfontSize,\n\tlineHeight,\n\talign,\n\tverticalAlign,\n\twrap,\n\tisSelected,\n\tpadding = 0,\n\tonKeyDown: handleKeyDownCustom,\n\tclassNamePrefix,\n\tstyle,\n\ttextWidth,\n\ttextHeight,\n\thasCustomTabBehavior,\n}: RichTextLabelProps) {\n\tconst editor = useEditor()\n\tconst isDragging = React.useRef(false)\n\tconst { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =\n\t\tuseEditableRichText(shapeId, type, richText)\n\n\tconst html = useMemo(() => {\n\t\tif (richText) {\n\t\t\treturn renderHtmlFromRichText(editor, richText)\n\t\t}\n\t}, [editor, richText])\n\n\tconst selectToolActive = useValue(\n\t\t'isSelectToolActive',\n\t\t() => editor.getCurrentToolId() === 'select',\n\t\t[editor]\n\t)\n\n\tuseReactor(\n\t\t'isDragging',\n\t\t() => {\n\t\t\teditor.getInstanceState()\n\t\t\tisDragging.current = editor.inputs.isDragging\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst legacyAlign = isLegacyAlign(align)\n\n\tconst handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (e.target instanceof HTMLElement && (e.target.tagName === 'A' || e.target.closest('a'))) {\n\t\t\t// This mousedown prevent default is to let dragging when over a link work.\n\t\t\tpreventDefault(e)\n\n\t\t\tif (!selectToolActive) return\n\t\t\tconst link = e.target.closest('a')?.getAttribute('href') ?? ''\n\t\t\t// We don't get the mouseup event later because we preventDefault\n\t\t\t// so we have to do it manually.\n\t\t\tconst handlePointerUp = (e: TLEventInfo) => {\n\t\t\t\tif (e.name !== 'pointer_up') return\n\n\t\t\t\tif (!isDragging.current) {\n\t\t\t\t\twindow.open(link, '_blank', 'noopener, noreferrer')\n\t\t\t\t}\n\t\t\t\teditor.off('event', handlePointerUp)\n\t\t\t}\n\t\t\teditor.on('event', handlePointerUp)\n\t\t}\n\t}\n\n\t// Should be guarded higher up so that this doesn't render... but repeated here. This should never be true.\n\tif (!isEditing && isEmpty) return null\n\n\t// TODO: probably combine tl-text and tl-arrow eventually\n\tconst cssPrefix = classNamePrefix || 'tl-text'\n\treturn (\n\t\t<div\n\t\t\tclassName={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}\n\t\t\tdata-font={font}\n\t\t\tdata-align={align}\n\t\t\tdata-hastext={!isEmpty}\n\t\t\tdata-isediting={isEditing}\n\t\t\tdata-textwrap={!!wrap}\n\t\t\tdata-isselected={isSelected}\n\t\t\tstyle={{\n\t\t\t\tjustifyContent: align === 'middle' || legacyAlign ? 'center' : align,\n\t\t\t\talignItems: verticalAlign === 'middle' ? 'center' : verticalAlign,\n\t\t\t\tpadding,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`${cssPrefix}-label__inner tl-text-content__wrapper`}\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize,\n\t\t\t\t\tlineHeight: lineHeight.toString(),\n\t\t\t\t\tminHeight: Math.floor(fontSize * lineHeight) + 'px',\n\t\t\t\t\tminWidth: Math.ceil(textWidth || 0),\n\t\t\t\t\tcolor: labelColor,\n\t\t\t\t\twidth: textWidth ? Math.ceil(textWidth) : undefined,\n\t\t\t\t\theight: textHeight ? Math.ceil(textHeight) : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={`${cssPrefix} tl-text tl-text-content`} dir=\"auto\">\n\t\t\t\t\t{richText && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"tl-rich-text\"\n\t\t\t\t\t\t\tdata-is-select-tool-active={selectToolActive}\n\t\t\t\t\t\t\t// todo: see if I can abuse this\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: html || '' }}\n\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\tdata-is-ready-for-editing={isReadyForEditing}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{(isReadyForEditing || isSelected) && (\n\t\t\t\t\t<RichTextArea\n\t\t\t\t\t\t// Fudge the ref type because we're using forwardRef and it's not typed correctly.\n\t\t\t\t\t\tref={rInput as any}\n\t\t\t\t\t\trichText={richText}\n\t\t\t\t\t\tisEditing={isEditing}\n\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t{...editableTextRest}\n\t\t\t\t\t\thasCustomTabBehavior={hasCustomTabBehavior}\n\t\t\t\t\t\thandleKeyDown={handleKeyDownCustom ?? editableTextRest.handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\n/** @public */\nexport interface RichTextSVGProps {\n\tbounds: Box\n\trichText: TLRichText\n\tfontSize: number\n\tfont: TLDefaultFontStyle\n\talign: TLDefaultHorizontalAlignStyle\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\twrap?: boolean\n\tlabelColor: string\n\tpadding: number\n\tshowTextOutline?: boolean\n}\n\n/**\n * Renders a rich text string as SVG given bounds and text properties.\n *\n * @public @react\n */\nexport function RichTextSVG({\n\tbounds,\n\trichText,\n\tfontSize,\n\tfont,\n\talign,\n\tverticalAlign,\n\twrap,\n\tlabelColor,\n\tpadding,\n\tshowTextOutline = true,\n}: RichTextSVGProps) {\n\tconst editor = useEditor()\n\tconst html = renderHtmlFromRichText(editor, richText)\n\tconst textAlign =\n\t\talign === 'middle'\n\t\t\t? ('center' as const)\n\t\t\t: align === 'start'\n\t\t\t\t? ('start' as const)\n\t\t\t\t: ('end' as const)\n\tconst justifyContent =\n\t\talign === 'middle'\n\t\t\t? ('center' as const)\n\t\t\t: align === 'start'\n\t\t\t\t? ('flex-start' as const)\n\t\t\t\t: ('flex-end' as const)\n\tconst alignItems =\n\t\tverticalAlign === 'middle' ? 'center' : verticalAlign === 'start' ? 'flex-start' : 'flex-end'\n\tconst wrapperStyle = {\n\t\tdisplay: 'flex',\n\t\tfontFamily: DefaultFontFamilies[font],\n\t\theight: `100%`,\n\t\tjustifyContent,\n\t\talignItems,\n\t\tpadding: `${padding}px`,\n\t}\n\tconst style = {\n\t\tfontSize: `${fontSize}px`,\n\t\twrap: wrap ? 'wrap' : 'nowrap',\n\t\tcolor: labelColor,\n\t\tlineHeight: TEXT_PROPS.lineHeight,\n\t\ttextAlign,\n\t\twidth: '100%',\n\t\twordWrap: 'break-word' as const,\n\t\toverflowWrap: 'break-word' as const,\n\t\twhiteSpace: 'pre-wrap',\n\t\ttextShadow: showTextOutline ? 'var(--tl-text-outline)' : 'none',\n\t}\n\n\treturn (\n\t\t<foreignObject\n\t\t\tx={bounds.minX}\n\t\t\ty={bounds.minY}\n\t\t\twidth={bounds.w}\n\t\t\theight={bounds.h}\n\t\t\tclassName=\"tl-export-embed-styles tl-rich-text tl-rich-text-svg\"\n\t\t>\n\t\t\t<div style={wrapperStyle}>\n\t\t\t\t<div dangerouslySetInnerHTML={{ __html: html }} style={style} />\n\t\t\t</div>\n\t\t</foreignObject>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tDefaultFontFamilies,\n\tTLDefaultFillStyle,\n\tTLDefaultFontStyle,\n\tTLDefaultHorizontalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n\tTLEventInfo,\n\tTLRichText,\n\tTLShapeId,\n\tpreventDefault,\n\tuseEditor,\n\tuseReactor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React, { useMemo } from 'react'\nimport { renderHtmlFromRichText } from '../../utils/text/richText'\nimport { RichTextArea } from '../text/RichTextArea'\nimport { TEXT_PROPS } from './default-shape-constants'\nimport { isLegacyAlign } from './legacyProps'\nimport { useEditableRichText } from './useEditableRichText'\n\n/** @public */\nexport interface RichTextLabelProps {\n\tshapeId: TLShapeId\n\ttype: string\n\tfont: TLDefaultFontStyle\n\tfontSize: number\n\tlineHeight: number\n\tfill?: TLDefaultFillStyle\n\talign: TLDefaultHorizontalAlignStyle\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\twrap?: boolean\n\trichText?: TLRichText\n\tlabelColor: string\n\tbounds?: Box\n\tisSelected: boolean\n\tonKeyDown?(e: KeyboardEvent): void\n\tclassNamePrefix?: string\n\tstyle?: React.CSSProperties\n\ttextWidth?: number\n\ttextHeight?: number\n\tpadding?: number\n\thasCustomTabBehavior?: boolean\n}\n\n/**\n * Renders a text label that can be used inside of shapes.\n * The component has the ability to be edited in place and furthermore\n * supports rich text editing.\n *\n * @public @react\n */\nexport const RichTextLabel = React.memo(function RichTextLabel({\n\tshapeId,\n\ttype,\n\trichText,\n\tlabelColor,\n\tfont,\n\tfontSize,\n\tlineHeight,\n\talign,\n\tverticalAlign,\n\twrap,\n\tisSelected,\n\tpadding = 0,\n\tonKeyDown: handleKeyDownCustom,\n\tclassNamePrefix,\n\tstyle,\n\ttextWidth,\n\ttextHeight,\n\thasCustomTabBehavior,\n}: RichTextLabelProps) {\n\tconst editor = useEditor()\n\tconst isDragging = React.useRef(false)\n\tconst { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =\n\t\tuseEditableRichText(shapeId, type, richText)\n\n\tconst html = useMemo(() => {\n\t\tif (richText) {\n\t\t\treturn renderHtmlFromRichText(editor, richText)\n\t\t}\n\t}, [editor, richText])\n\n\tconst selectToolActive = useValue(\n\t\t'isSelectToolActive',\n\t\t() => editor.getCurrentToolId() === 'select',\n\t\t[editor]\n\t)\n\n\tuseReactor(\n\t\t'isDragging',\n\t\t() => {\n\t\t\teditor.getInstanceState()\n\t\t\tisDragging.current = editor.inputs.isDragging\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst legacyAlign = isLegacyAlign(align)\n\n\tconst handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (e.target instanceof HTMLElement && (e.target.tagName === 'A' || e.target.closest('a'))) {\n\t\t\t// This mousedown prevent default is to let dragging when over a link work.\n\t\t\tpreventDefault(e)\n\n\t\t\tif (!selectToolActive) return\n\t\t\tconst link = e.target.closest('a')?.getAttribute('href') ?? ''\n\t\t\t// We don't get the mouseup event later because we preventDefault\n\t\t\t// so we have to do it manually.\n\t\t\tconst handlePointerUp = (e: TLEventInfo) => {\n\t\t\t\tif (e.name !== 'pointer_up') return\n\n\t\t\t\tif (!isDragging.current) {\n\t\t\t\t\twindow.open(link, '_blank', 'noopener, noreferrer')\n\t\t\t\t}\n\t\t\t\teditor.off('event', handlePointerUp)\n\t\t\t}\n\t\t\teditor.on('event', handlePointerUp)\n\t\t}\n\t}\n\n\t// Should be guarded higher up so that this doesn't render... but repeated here. This should never be true.\n\tif (!isEditing && isEmpty) return null\n\n\t// TODO: probably combine tl-text and tl-arrow eventually\n\tconst cssPrefix = classNamePrefix || 'tl-text'\n\treturn (\n\t\t<div\n\t\t\tclassName={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-font={font}\n\t\t\tdata-align={align}\n\t\t\tdata-hastext={!isEmpty}\n\t\t\tdata-isediting={isEditing}\n\t\t\tdata-textwrap={!!wrap}\n\t\t\tdata-isselected={isSelected}\n\t\t\tstyle={{\n\t\t\t\tjustifyContent: align === 'middle' || legacyAlign ? 'center' : align,\n\t\t\t\talignItems: verticalAlign === 'middle' ? 'center' : verticalAlign,\n\t\t\t\tpadding,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`${cssPrefix}-label__inner tl-text-content__wrapper`}\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize,\n\t\t\t\t\tlineHeight: lineHeight.toString(),\n\t\t\t\t\tminHeight: Math.floor(fontSize * lineHeight) + 'px',\n\t\t\t\t\tminWidth: Math.ceil(textWidth || 0),\n\t\t\t\t\tcolor: labelColor,\n\t\t\t\t\twidth: textWidth ? Math.ceil(textWidth) : undefined,\n\t\t\t\t\theight: textHeight ? Math.ceil(textHeight) : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={`${cssPrefix} tl-text tl-text-content`} dir=\"auto\">\n\t\t\t\t\t{richText && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"tl-rich-text\"\n\t\t\t\t\t\t\tdata-is-select-tool-active={selectToolActive}\n\t\t\t\t\t\t\t// todo: see if I can abuse this\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: html || '' }}\n\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\tdata-is-ready-for-editing={isReadyForEditing}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{(isReadyForEditing || isSelected) && (\n\t\t\t\t\t<RichTextArea\n\t\t\t\t\t\t// Fudge the ref type because we're using forwardRef and it's not typed correctly.\n\t\t\t\t\t\tref={rInput as any}\n\t\t\t\t\t\trichText={richText}\n\t\t\t\t\t\tisEditing={isEditing}\n\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t{...editableTextRest}\n\t\t\t\t\t\thasCustomTabBehavior={hasCustomTabBehavior}\n\t\t\t\t\t\thandleKeyDown={handleKeyDownCustom ?? editableTextRest.handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\n/** @public */\nexport interface RichTextSVGProps {\n\tbounds: Box\n\trichText: TLRichText\n\tfontSize: number\n\tfont: TLDefaultFontStyle\n\talign: TLDefaultHorizontalAlignStyle\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\twrap?: boolean\n\tlabelColor: string\n\tpadding: number\n\tshowTextOutline?: boolean\n}\n\n/**\n * Renders a rich text string as SVG given bounds and text properties.\n *\n * @public @react\n */\nexport function RichTextSVG({\n\tbounds,\n\trichText,\n\tfontSize,\n\tfont,\n\talign,\n\tverticalAlign,\n\twrap,\n\tlabelColor,\n\tpadding,\n\tshowTextOutline = true,\n}: RichTextSVGProps) {\n\tconst editor = useEditor()\n\tconst html = renderHtmlFromRichText(editor, richText)\n\tconst textAlign =\n\t\talign === 'middle'\n\t\t\t? ('center' as const)\n\t\t\t: align === 'start'\n\t\t\t\t? ('start' as const)\n\t\t\t\t: ('end' as const)\n\tconst justifyContent =\n\t\talign === 'middle'\n\t\t\t? ('center' as const)\n\t\t\t: align === 'start'\n\t\t\t\t? ('flex-start' as const)\n\t\t\t\t: ('flex-end' as const)\n\tconst alignItems =\n\t\tverticalAlign === 'middle' ? 'center' : verticalAlign === 'start' ? 'flex-start' : 'flex-end'\n\tconst wrapperStyle = {\n\t\tdisplay: 'flex',\n\t\tfontFamily: DefaultFontFamilies[font],\n\t\theight: `100%`,\n\t\tjustifyContent,\n\t\talignItems,\n\t\tpadding: `${padding}px`,\n\t}\n\tconst style = {\n\t\tfontSize: `${fontSize}px`,\n\t\twrap: wrap ? 'wrap' : 'nowrap',\n\t\tcolor: labelColor,\n\t\tlineHeight: TEXT_PROPS.lineHeight,\n\t\ttextAlign,\n\t\twidth: '100%',\n\t\twordWrap: 'break-word' as const,\n\t\toverflowWrap: 'break-word' as const,\n\t\twhiteSpace: 'pre-wrap',\n\t\ttextShadow: showTextOutline ? 'var(--tl-text-outline)' : 'none',\n\t}\n\n\treturn (\n\t\t<foreignObject\n\t\t\tx={bounds.minX}\n\t\t\ty={bounds.minY}\n\t\t\twidth={bounds.w}\n\t\t\theight={bounds.h}\n\t\t\tclassName=\"tl-export-embed-styles tl-rich-text tl-rich-text-svg\"\n\t\t>\n\t\t\t<div style={wrapperStyle}>\n\t\t\t\t<div dangerouslySetInnerHTML={{ __html: html }} style={style} />\n\t\t\t</div>\n\t\t</foreignObject>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["React", "RichTextLabel", "e"]
 }

package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js CHANGED Viewed

@@ -56,7 +56,7 @@ const DefaultNavigationPanel = (0, import_react.memo)(function DefaultNavigation
           "data-testid": "minimap.zoom-out",
           title: `${msg((0, import_actions.unwrapLabel)(actions["zoom-out"].label))} ${(0, import_kbd_utils.kbdStr)(actions["zoom-out"].kbd)}`,
           onClick: () => actions["zoom-out"].onSelect("navigation-zone"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "minus" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "minus" })
         }
       ),
       ZoomMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomMenu, {}, "zoom-menu"),
@@ -67,7 +67,7 @@ const DefaultNavigationPanel = (0, import_react.memo)(function DefaultNavigation
           "data-testid": "minimap.zoom-in",
           title: `${msg((0, import_actions.unwrapLabel)(actions["zoom-in"].label))} ${(0, import_kbd_utils.kbdStr)(actions["zoom-in"].kbd)}`,
           onClick: () => actions["zoom-in"].onSelect("navigation-zone"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "plus" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "plus" })
         }
       ),
       Minimap && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -76,9 +76,8 @@ const DefaultNavigationPanel = (0, import_react.memo)(function DefaultNavigation
           type: "icon",
           "data-testid": "minimap.toggle-button",
           title: msg("navigation-zone.toggle-minimap"),
-          className: "tlui-navigation-panel__toggle",
           onClick: toggleMinimap,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: collapsed ? "chevrons-ne" : "chevrons-sw" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: collapsed ? "chevron-right" : "chevron-left" })
         }
       )
     ] }) }),

package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx"],
-  "sourcesContent": ["import { usePassThroughWheelEvents } from '@tldraw/editor'\nimport { memo, useCallback, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { unwrapLabel, useActions } from '../../context/actions'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useLocalStorageState } from '../../hooks/useLocalStorageState'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../kbd-utils'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public @react */\nexport const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst [collapsed, setCollapsed] = useLocalStorageState('minimap', true)\n\n\tconst toggleMinimap = useCallback(() => {\n\t\tsetCollapsed((s) => !s)\n\t}, [setCollapsed])\n\n\tconst { ZoomMenu, Minimap } = useTldrawUiComponents()\n\n\tif (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-navigation-panel\">\n\t\t\t<TldrawUiToolbar className=\"tlui-buttons__horizontal\" label={msg('navigation-zone.title')}>\n\t\t\t\t{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (\n\t\t\t\t\t<ZoomMenu />\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-out\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-out'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"minus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ZoomMenu && <ZoomMenu key=\"zoom-menu\" />}\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-in\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-in'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"plus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{Minimap && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.toggle-button\"\n\t\t\t\t\t\t\t\ttitle={msg('navigation-zone.toggle-minimap')}\n\t\t\t\t\t\t\t\tclassName=\"tlui-navigation-panel__toggle\"\n\t\t\t\t\t\t\t\tonClick={toggleMinimap}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t\t{Minimap && breakpoint >= PORTRAIT_BREAKPOINT.TABLET && !collapsed && <Minimap />}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCK;AArCL,oBAA0C;AAC1C,mBAA0C;AAC1C,uBAAoC;AACpC,qBAAwC;AACxC,yBAA8B;AAC9B,wBAAsC;AACtC,kCAAqC;AACrC,4BAA+B;AAC/B,uBAAuB;AACvB,gCAAmC;AACnC,6BAAuD;AAGhD,MAAM,6BAAyB,mBAAK,SAASA,0BAAyB;AAC5E,QAAM,cAAU,2BAAW;AAC3B,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,kCAAc;AAEjC,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,CAAC,WAAW,YAAY,QAAI,kDAAqB,WAAW,IAAI;AAEtE,QAAM,oBAAgB,0BAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,EAAE,UAAU,QAAQ,QAAI,yCAAsB;AAEpD,MAAI,aAAa,qCAAoB,QAAQ;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,6CAAC,SAAI,KAAU,WAAU,yBACxB;AAAA,gDAAC,0CAAgB,WAAU,4BAA2B,OAAO,IAAI,uBAAuB,GACtF,sBAAY,aAAa,qCAAoB,SAC7C,4CAAC,YAAS,IAEV,4EACE;AAAA,OAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,QAAI,4BAAY,QAAQ,UAAU,EAAE,KAAK,CAAC,CAAC,QAAI,yBAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UACzF,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA,UAE7D,sDAAC,gDAAmB,MAAK,SAAQ;AAAA;AAAA,MAClC;AAAA,MAEA,YAAY,4CAAC,cAAa,WAAY;AAAA,MACtC,CAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,QAAI,4BAAY,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,QAAI,yBAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UACvF,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA,UAE5D,sDAAC,gDAAmB,MAAK,QAAO;AAAA;AAAA,MACjC;AAAA,MAEA,WACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,IAAI,gCAAgC;AAAA,UAC3C,WAAU;AAAA,UACV,SAAS;AAAA,UAET,sDAAC,gDAAmB,MAAM,YAAY,gBAAgB,eAAe;AAAA;AAAA,MACtE;AAAA,OAEF,GAEF;AAAA,IACC,WAAW,cAAc,qCAAoB,UAAU,CAAC,aAAa,4CAAC,WAAQ;AAAA,KAChF;AAEF,CAAC;",
+  "sourcesContent": ["import { usePassThroughWheelEvents } from '@tldraw/editor'\nimport { memo, useCallback, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { unwrapLabel, useActions } from '../../context/actions'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useLocalStorageState } from '../../hooks/useLocalStorageState'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../kbd-utils'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public @react */\nexport const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst [collapsed, setCollapsed] = useLocalStorageState('minimap', true)\n\n\tconst toggleMinimap = useCallback(() => {\n\t\tsetCollapsed((s) => !s)\n\t}, [setCollapsed])\n\n\tconst { ZoomMenu, Minimap } = useTldrawUiComponents()\n\n\tif (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-navigation-panel\">\n\t\t\t<TldrawUiToolbar className=\"tlui-buttons__horizontal\" label={msg('navigation-zone.title')}>\n\t\t\t\t{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (\n\t\t\t\t\t<ZoomMenu />\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-out\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-out'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon=\"minus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ZoomMenu && <ZoomMenu key=\"zoom-menu\" />}\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-in\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-in'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon=\"plus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{Minimap && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.toggle-button\"\n\t\t\t\t\t\t\t\ttitle={msg('navigation-zone.toggle-minimap')}\n\t\t\t\t\t\t\t\tonClick={toggleMinimap}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t\t{Minimap && breakpoint >= PORTRAIT_BREAKPOINT.TABLET && !collapsed && <Minimap />}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCK;AArCL,oBAA0C;AAC1C,mBAA0C;AAC1C,uBAAoC;AACpC,qBAAwC;AACxC,yBAA8B;AAC9B,wBAAsC;AACtC,kCAAqC;AACrC,4BAA+B;AAC/B,uBAAuB;AACvB,gCAAmC;AACnC,6BAAuD;AAGhD,MAAM,6BAAyB,mBAAK,SAASA,0BAAyB;AAC5E,QAAM,cAAU,2BAAW;AAC3B,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,kCAAc;AAEjC,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,CAAC,WAAW,YAAY,QAAI,kDAAqB,WAAW,IAAI;AAEtE,QAAM,oBAAgB,0BAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,EAAE,UAAU,QAAQ,QAAI,yCAAsB;AAEpD,MAAI,aAAa,qCAAoB,QAAQ;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,6CAAC,SAAI,KAAU,WAAU,yBACxB;AAAA,gDAAC,0CAAgB,WAAU,4BAA2B,OAAO,IAAI,uBAAuB,GACtF,sBAAY,aAAa,qCAAoB,SAC7C,4CAAC,YAAS,IAEV,4EACE;AAAA,OAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,QAAI,4BAAY,QAAQ,UAAU,EAAE,KAAK,CAAC,CAAC,QAAI,yBAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UACzF,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA,UAE7D,sDAAC,gDAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,MACxC;AAAA,MAEA,YAAY,4CAAC,cAAa,WAAY;AAAA,MACtC,CAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,QAAI,4BAAY,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,QAAI,yBAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UACvF,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA,UAE5D,sDAAC,gDAAmB,OAAK,MAAC,MAAK,QAAO;AAAA;AAAA,MACvC;AAAA,MAEA,WACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,IAAI,gCAAgC;AAAA,UAC3C,SAAS;AAAA,UAET,sDAAC,gDAAmB,OAAK,MAAC,MAAM,YAAY,kBAAkB,gBAAgB;AAAA;AAAA,MAC/E;AAAA,OAEF,GAEF;AAAA,IACC,WAAW,cAAc,qCAAoB,UAAU,CAAC,aAAa,4CAAC,WAAQ;AAAA,KAChF;AAEF,CAAC;",
   "names": ["DefaultNavigationPanel"]
 }

package/dist-cjs/lib/ui/version.js CHANGED Viewed

@@ -22,10 +22,10 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "3.15.0-canary.e3f6387b7e04";
+const version = "3.15.0-canary.ee0606e7631e";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-07-14T11:01:29.466Z",
-  patch: "2025-07-14T11:01:29.466Z"
+  minor: "2025-07-14T15:28:44.028Z",
+  patch: "2025-07-14T15:28:44.028Z"
 };
 //# sourceMappingURL=version.js.map

package/dist-cjs/lib/ui/version.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.15.0-canary.e3f6387b7e04'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-07-14T11:01:29.466Z',\n\tpatch: '2025-07-14T11:01:29.466Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.15.0-canary.ee0606e7631e'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-07-14T15:28:44.028Z',\n\tpatch: '2025-07-14T15:28:44.028Z',\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/dist-esm/index.mjs CHANGED Viewed

@@ -482,7 +482,7 @@ import {
 } from "./lib/utils/tldr/file.mjs";
 registerTldrawLibraryVersion(
   "tldraw",
-  "3.15.0-canary.e3f6387b7e04",
+  "3.15.0-canary.ee0606e7631e",
   "esm"
 );
 export {

package/dist-esm/lib/canvas/TldrawCropHandles.mjs CHANGED Viewed

@@ -11,7 +11,7 @@ function TldrawCropHandles({
   const cropStrokeWidth = toDomPrecision(size / 3);
   const offset = cropStrokeWidth / 2;
   const msg = useTranslation();
-  return /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", children: [
+  return /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx(
       "polyline",
       {

package/dist-esm/lib/canvas/TldrawCropHandles.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawCropHandles.tsx"],
-  "sourcesContent": ["import { toDomPrecision } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { useTranslation } from '../ui/hooks/useTranslation/useTranslation'\n\nexport interface TldrawCropHandlesProps {\n\tsize: number\n\twidth: number\n\theight: number\n\thideAlternateHandles: boolean\n}\n\nexport function TldrawCropHandles({\n\tsize,\n\twidth,\n\theight,\n\thideAlternateHandles,\n}: TldrawCropHandlesProps) {\n\tconst cropStrokeWidth = toDomPrecision(size / 3)\n\tconst offset = cropStrokeWidth / 2\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\">\n\t\t\t{/* Top left */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(size)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(size)},${toDomPrecision(0 - offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-left')}\n\t\t\t/>\n\t\t\t{/* Top */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(0 - offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(0 - offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top')}\n\t\t\t/>\n\t\t\t{/* Top right */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-right')}\n\t\t\t/>\n\t\t\t{/* Right */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width + offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(width + offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.right')}\n\t\t\t/>\n\t\t\t{/* Bottom right */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height - size)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(height + offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-right')}\n\t\t\t/>\n\t\t\t{/* Bottom */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(height + offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(height + offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom')}\n\t\t\t/>\n\t\t\t{/* Bottom left */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 + size)},${toDomPrecision(height + offset)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height - size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-left')}\n\t\t\t/>\n\t\t\t{/* Left */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(0 - offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(0 - offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.left')}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { toDomPrecision } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { useTranslation } from '../ui/hooks/useTranslation/useTranslation'\n\nexport interface TldrawCropHandlesProps {\n\tsize: number\n\twidth: number\n\theight: number\n\thideAlternateHandles: boolean\n}\n\nexport function TldrawCropHandles({\n\tsize,\n\twidth,\n\theight,\n\thideAlternateHandles,\n}: TldrawCropHandlesProps) {\n\tconst cropStrokeWidth = toDomPrecision(size / 3)\n\tconst offset = cropStrokeWidth / 2\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t{/* Top left */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(size)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(size)},${toDomPrecision(0 - offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-left')}\n\t\t\t/>\n\t\t\t{/* Top */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(0 - offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(0 - offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top')}\n\t\t\t/>\n\t\t\t{/* Top right */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-right')}\n\t\t\t/>\n\t\t\t{/* Right */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width + offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(width + offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.right')}\n\t\t\t/>\n\t\t\t{/* Bottom right */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height - size)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(height + offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-right')}\n\t\t\t/>\n\t\t\t{/* Bottom */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(height + offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(height + offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom')}\n\t\t\t/>\n\t\t\t{/* Bottom left */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 + size)},${toDomPrecision(height + offset)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height - size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-left')}\n\t\t\t/>\n\t\t\t{/* Left */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(0 - offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(0 - offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.left')}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/canvas/TldrawHandles.mjs CHANGED Viewed

@@ -17,7 +17,7 @@ function TldrawHandles({ children }) {
     [editor]
   );
   if (!shouldDisplayHandles) return null;
-  return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", children });
+  return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", "aria-hidden": "true", children });
 }
 export {
   TldrawHandles

package/dist-esm/lib/canvas/TldrawHandles.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawHandles.tsx"],
-  "sourcesContent": ["import { TLHandlesProps, useEditor, useValue } from '@tldraw/editor'\n\n/** @public @react */\nexport function TldrawHandles({ children }: TLHandlesProps) {\n\tconst editor = useEditor()\n\n\t// todo: maybe display note shape handles here?\n\n\tconst shouldDisplayHandles = useValue(\n\t\t'shouldDisplayHandles',\n\t\t() => {\n\t\t\tif (editor.isInAny('select.idle', 'select.pointing_handle', 'select.pointing_shape')) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (editor.isInAny('select.editing_shape')) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\t\treturn onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'note')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldDisplayHandles) return null\n\n\treturn <svg className=\"tl-user-handles tl-overlays__item\">{children}</svg>\n}\n"],
-  "mappings": "AAyBQ;AAzBR,SAAyB,WAAW,gBAAgB;AAG7C,SAAS,cAAc,EAAE,SAAS,GAAmB;AAC3D,QAAM,SAAS,UAAU;AAIzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,eAAe,0BAA0B,uBAAuB,GAAG;AACrF,eAAO;AAAA,MACR;AACA,UAAI,OAAO,QAAQ,sBAAsB,GAAG;AAC3C,cAAM,oBAAoB,OAAO,qBAAqB;AACtD,eAAO,qBAAqB,OAAO,cAAc,mBAAmB,MAAM;AAAA,MAC3E;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SAAO,oBAAC,SAAI,WAAU,qCAAqC,UAAS;AACrE;",
+  "sourcesContent": ["import { TLHandlesProps, useEditor, useValue } from '@tldraw/editor'\n\n/** @public @react */\nexport function TldrawHandles({ children }: TLHandlesProps) {\n\tconst editor = useEditor()\n\n\t// todo: maybe display note shape handles here?\n\n\tconst shouldDisplayHandles = useValue(\n\t\t'shouldDisplayHandles',\n\t\t() => {\n\t\t\tif (editor.isInAny('select.idle', 'select.pointing_handle', 'select.pointing_shape')) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (editor.isInAny('select.editing_shape')) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\t\treturn onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'note')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldDisplayHandles) return null\n\n\treturn (\n\t\t<svg className=\"tl-user-handles tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t{children}\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AA0BE;AA1BF,SAAyB,WAAW,gBAAgB;AAG7C,SAAS,cAAc,EAAE,SAAS,GAAmB;AAC3D,QAAM,SAAS,UAAU;AAIzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,eAAe,0BAA0B,uBAAuB,GAAG;AACrF,eAAO;AAAA,MACR;AACA,UAAI,OAAO,QAAQ,sBAAsB,GAAG;AAC3C,cAAM,oBAAoB,OAAO,qBAAqB;AACtD,eAAO,qBAAqB,OAAO,cAAc,mBAAmB,MAAM;AAAA,MAC3E;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SACC,oBAAC,SAAI,WAAU,qCAAoC,eAAY,QAC7D,UACF;AAEF;",
   "names": []
 }

package/dist-esm/lib/canvas/TldrawOverlays.mjs CHANGED Viewed

@@ -35,7 +35,7 @@ function TldrawArrowHints() {
   const showEdgeHints = !isExact && arrowKind === "elbow";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ShapeIndicator && /* @__PURE__ */ jsx(ShapeIndicator, { shapeId: targetInfo.target.id }),
-    showEdgeHints && /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", children: [
+    showEdgeHints && /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx(
         "circle",
         {

package/dist-esm/lib/canvas/TldrawOverlays.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawOverlays.tsx"],
-  "sourcesContent": ["import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'\nimport { getArrowTargetState } from '../shapes/arrow/arrowTargetState'\nimport { DraggingHandle } from '../tools/SelectTool/childStates/DraggingHandle'\nimport { PointingHandle } from '../tools/SelectTool/childStates/PointingHandle'\n\n/** @public @react */\nexport function TldrawOverlays() {\n\tconst editor = useEditor()\n\n\tconst shouldShowArrowHints = useValue(\n\t\t'should show arrow hints',\n\t\t() => {\n\t\t\tif (editor.isInAny('arrow.idle', 'arrow.pointing')) return true\n\n\t\t\tif (editor.isIn('select.pointing_handle')) {\n\t\t\t\tconst node: PointingHandle = editor.getStateDescendant('select.pointing_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (editor.isIn('select.dragging_handle')) {\n\t\t\t\tconst node: DraggingHandle = editor.getStateDescendant('select.dragging_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldShowArrowHints) return null\n\n\treturn <TldrawArrowHints />\n}\n\n/** @public @react */\nexport function TldrawArrowHints() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst targetInfo = useValue('arrow target info', () => getArrowTargetState(editor), [editor])\n\n\tif (!targetInfo) return null\n\n\tconst { handlesInPageSpace, snap, anchorInPageSpace, arrowKind, isExact, isPrecise } = targetInfo\n\n\tconst showEdgeHints = !isExact && arrowKind === 'elbow'\n\n\treturn (\n\t\t<>\n\t\t\t{ShapeIndicator && <ShapeIndicator shapeId={targetInfo.target.id} />}\n\n\t\t\t{showEdgeHints && (\n\t\t\t\t<svg className=\"tl-overlays__item\">\n\t\t\t\t\t<circle\n\t\t\t\t\t\tcx={anchorInPageSpace.x}\n\t\t\t\t\t\tcy={anchorInPageSpace.y}\n\t\t\t\t\t\tclassName={`tl-arrow-hint-snap tl-arrow-hint-snap__${isPrecise ? (snap ?? 'none') : 'none'}`}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{Object.entries(handlesInPageSpace).map(([side, handle]) => {\n\t\t\t\t\t\tif (!handle.isEnabled) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tkey={side}\n\t\t\t\t\t\t\t\tcx={handle.point.x}\n\t\t\t\t\t\t\t\tcy={handle.point.y}\n\t\t\t\t\t\t\t\tclassName=\"tl-arrow-hint-handle\"\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</svg>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
-  "mappings": "AAyCQ,SAiBN,UAjBM,KAqBJ,YArBI;AAzCR,SAAS,WAAW,qBAAqB,gBAAgB;AACzD,SAAS,2BAA2B;AAK7B,SAAS,iBAAiB;AAChC,QAAM,SAAS,UAAU;AAEzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,cAAc,gBAAgB,EAAG,QAAO;AAE3D,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SAAO,oBAAC,oBAAiB;AAC1B;AAGO,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAE/C,QAAM,aAAa,SAAS,qBAAqB,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAE5F,MAAI,CAAC,WAAY,QAAO;AAExB,QAAM,EAAE,oBAAoB,MAAM,mBAAmB,WAAW,SAAS,UAAU,IAAI;AAEvF,QAAM,gBAAgB,CAAC,WAAW,cAAc;AAEhD,SACC,iCACE;AAAA,sBAAkB,oBAAC,kBAAe,SAAS,WAAW,OAAO,IAAI;AAAA,IAEjE,iBACA,qBAAC,SAAI,WAAU,qBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,kBAAkB;AAAA,UACtB,IAAI,kBAAkB;AAAA,UACtB,WAAW,0CAA0C,YAAa,QAAQ,SAAU,MAAM;AAAA;AAAA,MAC3F;AAAA,MAEC,OAAO,QAAQ,kBAAkB,EAAE,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM;AAC3D,YAAI,CAAC,OAAO,UAAW,QAAO;AAC9B,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAI,OAAO,MAAM;AAAA,YACjB,IAAI,OAAO,MAAM;AAAA,YACjB,WAAU;AAAA;AAAA,UAHL;AAAA,QAIN;AAAA,MAEF,CAAC;AAAA,OACF;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'\nimport { getArrowTargetState } from '../shapes/arrow/arrowTargetState'\nimport { DraggingHandle } from '../tools/SelectTool/childStates/DraggingHandle'\nimport { PointingHandle } from '../tools/SelectTool/childStates/PointingHandle'\n\n/** @public @react */\nexport function TldrawOverlays() {\n\tconst editor = useEditor()\n\n\tconst shouldShowArrowHints = useValue(\n\t\t'should show arrow hints',\n\t\t() => {\n\t\t\tif (editor.isInAny('arrow.idle', 'arrow.pointing')) return true\n\n\t\t\tif (editor.isIn('select.pointing_handle')) {\n\t\t\t\tconst node: PointingHandle = editor.getStateDescendant('select.pointing_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (editor.isIn('select.dragging_handle')) {\n\t\t\t\tconst node: DraggingHandle = editor.getStateDescendant('select.dragging_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldShowArrowHints) return null\n\n\treturn <TldrawArrowHints />\n}\n\n/** @public @react */\nexport function TldrawArrowHints() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst targetInfo = useValue('arrow target info', () => getArrowTargetState(editor), [editor])\n\n\tif (!targetInfo) return null\n\n\tconst { handlesInPageSpace, snap, anchorInPageSpace, arrowKind, isExact, isPrecise } = targetInfo\n\n\tconst showEdgeHints = !isExact && arrowKind === 'elbow'\n\n\treturn (\n\t\t<>\n\t\t\t{ShapeIndicator && <ShapeIndicator shapeId={targetInfo.target.id} />}\n\n\t\t\t{showEdgeHints && (\n\t\t\t\t<svg className=\"tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t\t\t<circle\n\t\t\t\t\t\tcx={anchorInPageSpace.x}\n\t\t\t\t\t\tcy={anchorInPageSpace.y}\n\t\t\t\t\t\tclassName={`tl-arrow-hint-snap tl-arrow-hint-snap__${isPrecise ? (snap ?? 'none') : 'none'}`}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{Object.entries(handlesInPageSpace).map(([side, handle]) => {\n\t\t\t\t\t\tif (!handle.isEnabled) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tkey={side}\n\t\t\t\t\t\t\t\tcx={handle.point.x}\n\t\t\t\t\t\t\t\tcy={handle.point.y}\n\t\t\t\t\t\t\t\tclassName=\"tl-arrow-hint-handle\"\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</svg>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
+  "mappings": "AAyCQ,SAiBN,UAjBM,KAqBJ,YArBI;AAzCR,SAAS,WAAW,qBAAqB,gBAAgB;AACzD,SAAS,2BAA2B;AAK7B,SAAS,iBAAiB;AAChC,QAAM,SAAS,UAAU;AAEzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,cAAc,gBAAgB,EAAG,QAAO;AAE3D,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SAAO,oBAAC,oBAAiB;AAC1B;AAGO,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAE/C,QAAM,aAAa,SAAS,qBAAqB,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAE5F,MAAI,CAAC,WAAY,QAAO;AAExB,QAAM,EAAE,oBAAoB,MAAM,mBAAmB,WAAW,SAAS,UAAU,IAAI;AAEvF,QAAM,gBAAgB,CAAC,WAAW,cAAc;AAEhD,SACC,iCACE;AAAA,sBAAkB,oBAAC,kBAAe,SAAS,WAAW,OAAO,IAAI;AAAA,IAEjE,iBACA,qBAAC,SAAI,WAAU,qBAAoB,eAAY,QAC9C;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,kBAAkB;AAAA,UACtB,IAAI,kBAAkB;AAAA,UACtB,WAAW,0CAA0C,YAAa,QAAQ,SAAU,MAAM;AAAA;AAAA,MAC3F;AAAA,MAEC,OAAO,QAAQ,kBAAkB,EAAE,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM;AAC3D,YAAI,CAAC,OAAO,UAAW,QAAO;AAC9B,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAI,OAAO,MAAM;AAAA,YACjB,IAAI,OAAO,MAAM;AAAA,YACjB,WAAU;AAAA;AAAA,UAHL;AAAA,QAIN;AAAA,MAEF,CAAC;AAAA,OACF;AAAA,KAEF;AAEF;",
   "names": []
 }