npm - tldraw - Versions diffs - 3.15.0-next.f1dfcef63951 → 3.15.1 - Mend

tldraw 3.15.0-next.f1dfcef63951 → 3.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs.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", "ResizeHandle", "RotateCornerHandle"]
 }

package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs CHANGED Viewed

@@ -150,7 +150,6 @@ class FrameShapeUtil extends BaseBoxShapeUtil {
       },
       [shape.id]
     );
-    const zoomLevel = useValue("zoom level", () => this.editor.getZoomLevel(), [this.editor]);
     const showFrameColors = this.options.showColors;
     const color = theme[shape.props.color];
     const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill;
@@ -163,12 +162,13 @@ class FrameShapeUtil extends BaseBoxShapeUtil {
         "rect",
         {
           className: classNames("tl-frame__body", { "tl-frame__creating": isCreating }),
-          width: shape.props.w + 1 / zoomLevel,
-          height: shape.props.h + 1 / zoomLevel,
           fill: frameFill,
           stroke: frameStroke,
-          y: -0.5 / zoomLevel,
-          x: -0.5 / zoomLevel
+          style: {
+            width: `calc(${shape.props.w}px + 1px / var(--tl-zoom))`,
+            height: `calc(${shape.props.h}px + 1px / var(--tl-zoom))`,
+            transform: `translate(calc(-0.5px / var(--tl-zoom)), calc(-0.5px / var(--tl-zoom)))`
+          }
         }
       ) }),
       isCreating ? null : /* @__PURE__ */ jsx(

package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/frame/FrameShapeUtil.tsx"],
-  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tDefaultColorStyle,\n\tGeometry2d,\n\tGroup2d,\n\tRectangle2d,\n\tSVGContainer,\n\tSvgExportContext,\n\tTLClickEventInfo,\n\tTLDragShapesOutInfo,\n\tTLDragShapesOverInfo,\n\tTLFrameShape,\n\tTLFrameShapeProps,\n\tTLResizeInfo,\n\tTLShape,\n\tTLShapePartial,\n\tTLShapeUtilConstructor,\n\tclamp,\n\tcompact,\n\tframeShapeMigrations,\n\tframeShapeProps,\n\tgetDefaultColorTheme,\n\tlerp,\n\tresizeBox,\n\ttoDomPrecision,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { fitFrameToContent, getFrameChildrenBounds } from '../../utils/frames/frames'\nimport {\n\tTLCreateTextJsxFromSpansOpts,\n\tcreateTextJsxFromSpans,\n} from '../shared/createTextJsxFromSpans'\nimport { useDefaultColorTheme } from '../shared/useDefaultColorTheme'\nimport { FrameHeading } from './components/FrameHeading'\nimport {\n\tgetFrameHeadingOpts,\n\tgetFrameHeadingSide,\n\tgetFrameHeadingSize,\n\tgetFrameHeadingTranslation,\n} from './frameHelpers'\n\n// Some of these values are repeated in CSS and need to match\nconst FRAME_HEADING_EXTRA_WIDTH = 12\nconst FRAME_HEADING_MIN_WIDTH = 32\nconst FRAME_HEADING_NOCOLORS_OFFSET_X = -7\nconst FRAME_HEADING_OFFSET_Y = 4\n\n/** @public */\nexport interface FrameShapeOptions {\n\t/**\n\t * When true, the frame will display colors for the shape's headings and background.\n\t */\n\tshowColors: boolean\n}\n\nexport function defaultEmptyAs(str: string, dflt: string) {\n\tif (str.match(/^\\s*$/)) {\n\t\treturn dflt\n\t}\n\treturn str\n}\n\n/** @public */\nexport class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {\n\tstatic override type = 'frame' as const\n\tstatic override props = frameShapeProps\n\tstatic override migrations = frameShapeMigrations\n\n\toverride options: FrameShapeOptions = {\n\t\tshowColors: false,\n\t}\n\n\t// evil crimes :)\n\t// By default, showColors is off. Because they use style props, which are picked up\n\t// automatically, we don't have DefaultColorStyle in the props in the schema by default.\n\t// Instead, when someone calls .configure to turn the option on, we manually add in the color\n\t// style here so it plays nicely with the other editor APIs.\n\tstatic override configure<T extends TLShapeUtilConstructor<any, any>>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\tconst withOptions = super.configure.call(this, options) as T\n\t\tif ((options as any).showColors) {\n\t\t\t;(withOptions as any).props = { ...withOptions.props, color: DefaultColorStyle }\n\t\t}\n\t\treturn withOptions\n\t}\n\n\toverride canEdit() {\n\t\treturn true\n\t}\n\n\toverride canResize() {\n\t\treturn true\n\t}\n\n\toverride canResizeChildren() {\n\t\treturn false\n\t}\n\n\toverride getDefaultProps(): TLFrameShape['props'] {\n\t\treturn { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }\n\t}\n\n\toverride getAriaDescriptor(shape: TLFrameShape) {\n\t\treturn shape.props.name\n\t}\n\n\toverride getGeometry(shape: TLFrameShape): Geometry2d {\n\t\tconst { editor } = this\n\n\t\tconst z = editor.getZoomLevel()\n\n\t\t// Which dimension measures the top edge after rotation?\n\t\tconst labelSide = getFrameHeadingSide(editor, shape)\n\t\tconst isVertical = labelSide % 2 === 1\n\t\tconst rotatedTopEdgeWidth = isVertical ? shape.props.h : shape.props.w\n\n\t\t// Get the size of the heading (max width equal to the rotatedTopEdgeWidth)\n\t\tconst opts = getFrameHeadingOpts(rotatedTopEdgeWidth, false)\n\t\tconst headingSize = getFrameHeadingSize(editor, shape, opts)\n\n\t\t// If NOT showing frame colors, we need to offset the label\n\t\t// to the left so that the title is in line with the shape edge\n\t\t// and add that extra width to the right side of the label\n\t\tconst isShowingFrameColors = this.options.showColors\n\n\t\t// Scale everything into **screen space**\n\t\tconst extraWidth = FRAME_HEADING_EXTRA_WIDTH / z\n\t\tconst minWidth = FRAME_HEADING_MIN_WIDTH / z\n\t\tconst maxWidth = rotatedTopEdgeWidth + (isShowingFrameColors ? 1 : extraWidth)\n\n\t\tconst labelWidth = headingSize.w / z\n\t\tconst labelHeight = headingSize.h / z\n\n\t\tconst clampedLabelWidth = clamp(labelWidth + extraWidth, minWidth, maxWidth)\n\n\t\tconst offsetX = (isShowingFrameColors ? -1 : FRAME_HEADING_NOCOLORS_OFFSET_X) / z\n\t\tconst offsetY = FRAME_HEADING_OFFSET_Y / z\n\n\t\t// In page space\n\t\tconst width = isVertical ? labelHeight : clampedLabelWidth\n\t\tconst height = isVertical ? clampedLabelWidth : labelHeight\n\n\t\t// Calculate label position based on side. The position needs to always appear\n\t\t// at the top left of the shape, regardless of rotation. The label must be\n\t\t// between a minimum and maximum. The minimum is arbitrary; the maximum is the\n\t\t// width of the edge of the frame where the label will be shown.\n\n\t\tlet x: number, y: number\n\n\t\tswitch (labelSide) {\n\t\t\tcase 0: {\n\t\t\t\t// top\n\t\t\t\tx = offsetX\n\t\t\t\ty = -(labelHeight + offsetY)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 1: {\n\t\t\t\t// right\n\t\t\t\tx = -(labelHeight + offsetY)\n\t\t\t\ty = shape.props.h - (offsetX + clampedLabelWidth)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 2: {\n\t\t\t\t// bottom\n\t\t\t\tx = shape.props.w - (offsetX + clampedLabelWidth)\n\t\t\t\ty = shape.props.h + offsetY\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 3: {\n\t\t\t\t// left\n\t\t\t\tx = shape.props.w + offsetY\n\t\t\t\ty = offsetX\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\treturn new Group2d({\n\t\t\tchildren: [\n\t\t\t\tnew Rectangle2d({\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tisFilled: false,\n\t\t\t\t}),\n\t\t\t\tnew Rectangle2d({\n\t\t\t\t\tx,\n\t\t\t\t\ty,\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t\tisFilled: true,\n\t\t\t\t\tisLabel: true,\n\t\t\t\t}),\n\t\t\t],\n\t\t})\n\t}\n\n\toverride getText(shape: TLFrameShape): string | undefined {\n\t\treturn shape.props.name\n\t}\n\n\toverride component(shape: TLFrameShape) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst theme = useDefaultColorTheme()\n\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst isCreating = useValue(\n\t\t\t'is creating this shape',\n\t\t\t() => {\n\t\t\t\tconst resizingState = this.editor.getStateDescendant('select.resizing')\n\t\t\t\tif (!resizingState) return false\n\t\t\t\tif (!resizingState.getIsActive()) return false\n\t\t\t\tconst info = (resizingState as typeof resizingState & { info: { isCreating: boolean } })\n\t\t\t\t\t?.info\n\t\t\t\tif (!info) return false\n\t\t\t\treturn info.isCreating && this.editor.getOnlySelectedShapeId() === shape.id\n\t\t\t},\n\t\t\t[shape.id]\n\t\t)\n\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst zoomLevel = useValue('zoom level', () => this.editor.getZoomLevel(), [this.editor])\n\n\t\tconst showFrameColors = this.options.showColors\n\n\t\tconst color = theme[shape.props.color]\n\t\tconst frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill\n\t\tconst frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke\n\t\tconst frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background\n\t\tconst frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background\n\t\tconst frameHeadingText = showFrameColors ? color.frame.text : theme.text\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SVGContainer>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tclassName={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}\n\t\t\t\t\t\twidth={shape.props.w + 1 / zoomLevel}\n\t\t\t\t\t\theight={shape.props.h + 1 / zoomLevel}\n\t\t\t\t\t\tfill={frameFill}\n\t\t\t\t\t\tstroke={frameStroke}\n\t\t\t\t\t\ty={-0.5 / zoomLevel}\n\t\t\t\t\t\tx={-0.5 / zoomLevel}\n\t\t\t\t\t/>\n\t\t\t\t</SVGContainer>\n\t\t\t\t{isCreating ? null : (\n\t\t\t\t\t<FrameHeading\n\t\t\t\t\t\tid={shape.id}\n\t\t\t\t\t\tname={shape.props.name}\n\t\t\t\t\t\tfill={frameHeadingFill}\n\t\t\t\t\t\tstroke={frameHeadingStroke}\n\t\t\t\t\t\tcolor={frameHeadingText}\n\t\t\t\t\t\twidth={shape.props.w}\n\t\t\t\t\t\theight={shape.props.h}\n\t\t\t\t\t\toffsetX={showFrameColors ? -1 : -7}\n\t\t\t\t\t\tshowColors={this.options.showColors}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)\n\t}\n\n\toverride toSvg(shape: TLFrameShape, ctx: SvgExportContext) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: ctx.isDarkMode })\n\n\t\t// rotate right 45 deg\n\t\tconst labelSide = getFrameHeadingSide(this.editor, shape)\n\t\tconst isVertical = labelSide % 2 === 1\n\t\tconst rotatedTopEdgeWidth = isVertical ? shape.props.h : shape.props.w\n\t\tconst labelTranslate = getFrameHeadingTranslation(shape, labelSide, true)\n\n\t\t// Truncate with ellipsis\n\t\tconst opts: TLCreateTextJsxFromSpansOpts = getFrameHeadingOpts(rotatedTopEdgeWidth - 12, true)\n\n\t\tconst frameTitle = defaultEmptyAs(shape.props.name, 'Frame') + String.fromCharCode(8203)\n\t\tconst labelBounds = getFrameHeadingSize(this.editor, shape, opts)\n\t\tconst spans = this.editor.textMeasure.measureTextSpans(frameTitle, opts)\n\t\tconst text = createTextJsxFromSpans(this.editor, spans, opts)\n\n\t\tconst showFrameColors = this.options.showColors\n\n\t\tconst color = theme[shape.props.color]\n\t\tconst frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill\n\t\tconst frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke\n\t\tconst frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background\n\t\tconst frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background\n\t\tconst frameHeadingText = showFrameColors ? color.frame.text : theme.text\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<rect\n\t\t\t\t\twidth={shape.props.w}\n\t\t\t\t\theight={shape.props.h}\n\t\t\t\t\tfill={frameFill}\n\t\t\t\t\tstroke={frameStroke}\n\t\t\t\t\tstrokeWidth={1}\n\t\t\t\t\tx={0}\n\t\t\t\t\trx={0}\n\t\t\t\t\try={0}\n\t\t\t\t/>\n\t\t\t\t<g fill={frameHeadingText} transform={labelTranslate}>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tx={labelBounds.x - (showFrameColors ? 0 : 6)}\n\t\t\t\t\t\ty={labelBounds.y - 6}\n\t\t\t\t\t\twidth={Math.min(rotatedTopEdgeWidth, labelBounds.width + 12)}\n\t\t\t\t\t\theight={labelBounds.height}\n\t\t\t\t\t\tfill={frameHeadingFill}\n\t\t\t\t\t\tstroke={frameHeadingStroke}\n\t\t\t\t\t\trx={4}\n\t\t\t\t\t\try={4}\n\t\t\t\t\t/>\n\t\t\t\t\t<g transform={`translate(${showFrameColors ? 8 : 0}, 4)`}>{text}</g>\n\t\t\t\t</g>\n\t\t\t</>\n\t\t)\n\t}\n\n\tindicator(shape: TLFrameShape) {\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\tclassName={`tl-frame-indicator`}\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride canReceiveNewChildrenOfType(shape: TLShape) {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride onResize(shape: any, info: TLResizeInfo<any>) {\n\t\treturn resizeBox(shape, info)\n\t}\n\n\toverride getInterpolatedProps(\n\t\tstartShape: TLFrameShape,\n\t\tendShape: TLFrameShape,\n\t\tt: number\n\t): TLFrameShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n\n\toverride onDoubleClickEdge(shape: TLFrameShape, info: TLClickEventInfo) {\n\t\tif (info.target !== 'selection') return\n\t\tconst { handle } = info\n\n\t\t// If handle is missing, we can't determine which edge was clicked\n\t\tif (!handle) return\n\n\t\tconst isHorizontalEdge = handle === 'left' || handle === 'right'\n\t\tconst isVerticalEdge = handle === 'top' || handle === 'bottom'\n\n\t\tconst childIds = this.editor.getSortedChildIdsForParent(shape.id)\n\t\tconst children = compact(childIds.map((id) => this.editor.getShape(id)))\n\t\tif (!children.length) return\n\n\t\tconst { dx, dy, w, h } = getFrameChildrenBounds(children, this.editor, { padding: 10 })\n\n\t\tthis.editor.run(() => {\n\t\t\tconst changes: TLShapePartial[] = childIds.map((childId) => {\n\t\t\t\tconst childShape = this.editor.getShape(childId)!\n\t\t\t\treturn {\n\t\t\t\t\tid: childShape.id,\n\t\t\t\t\ttype: childShape.type,\n\t\t\t\t\tx: isHorizontalEdge ? childShape.x + dx : childShape.x,\n\t\t\t\t\ty: isVerticalEdge ? childShape.y + dy : childShape.y,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tthis.editor.updateShapes(changes)\n\t\t})\n\n\t\treturn {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tprops: {\n\t\t\t\tw: isHorizontalEdge ? w : shape.props.w,\n\t\t\t\th: isVerticalEdge ? h : shape.props.h,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride onDoubleClickCorner(shape: TLFrameShape) {\n\t\tfitFrameToContent(this.editor, shape.id, { padding: 10 })\n\t\treturn {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t}\n\t}\n\n\toverride onDragShapesIn(\n\t\tshape: TLFrameShape,\n\t\tdraggingShapes: TLShape[],\n\t\t{ initialParentIds, initialIndices }: TLDragShapesOverInfo\n\t) {\n\t\tconst { editor } = this\n\n\t\tif (draggingShapes.every((s) => s.parentId === shape.id)) return\n\n\t\t// Check to see whether any of the shapes can have their old index restored\n\t\tlet canRestoreOriginalIndices = false\n\t\tconst previousChildren = draggingShapes.filter((s) => shape.id === initialParentIds.get(s.id))\n\n\t\tif (previousChildren.length > 0) {\n\t\t\tconst currentChildren = compact(\n\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t)\n\t\t\tif (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {\n\t\t\t\tcanRestoreOriginalIndices = true\n\t\t\t}\n\t\t}\n\n\t\t// I can't imagine this happening, but if any of the children are the ancestor of the frame, quit here\n\t\tif (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return\n\n\t\t// Reparent the shapes to the new parent\n\t\teditor.reparentShapes(draggingShapes, shape.id)\n\n\t\t// If we can restore the original indices, then do so\n\t\tif (canRestoreOriginalIndices) {\n\t\t\tfor (const shape of previousChildren) {\n\t\t\t\teditor.updateShape({\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tindex: initialIndices.get(shape.id),\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDragShapesOut(\n\t\tshape: TLFrameShape,\n\t\tdraggingShapes: TLShape[],\n\t\tinfo: TLDragShapesOutInfo\n\t): void {\n\t\tconst { editor } = this\n\t\t// When a user drags shapes out of a frame, and if we're not dragging into a new shape, then reparent\n\t\t// the dragging shapes (that are current children of the frame) onto the current page instead\n\t\tif (!info.nextDraggingOverShapeId) {\n\t\t\teditor.reparentShapes(\n\t\t\t\tdraggingShapes.filter(\n\t\t\t\t\t(s) => s.parentId === shape.id && this.canReceiveNewChildrenOfType(s)\n\t\t\t\t),\n\t\t\t\teditor.getCurrentPageId()\n\t\t\t)\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tDefaultColorStyle,\n\tGeometry2d,\n\tGroup2d,\n\tRectangle2d,\n\tSVGContainer,\n\tSvgExportContext,\n\tTLClickEventInfo,\n\tTLDragShapesOutInfo,\n\tTLDragShapesOverInfo,\n\tTLFrameShape,\n\tTLFrameShapeProps,\n\tTLResizeInfo,\n\tTLShape,\n\tTLShapePartial,\n\tTLShapeUtilConstructor,\n\tclamp,\n\tcompact,\n\tframeShapeMigrations,\n\tframeShapeProps,\n\tgetDefaultColorTheme,\n\tlerp,\n\tresizeBox,\n\ttoDomPrecision,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { fitFrameToContent, getFrameChildrenBounds } from '../../utils/frames/frames'\nimport {\n\tTLCreateTextJsxFromSpansOpts,\n\tcreateTextJsxFromSpans,\n} from '../shared/createTextJsxFromSpans'\nimport { useDefaultColorTheme } from '../shared/useDefaultColorTheme'\nimport { FrameHeading } from './components/FrameHeading'\nimport {\n\tgetFrameHeadingOpts,\n\tgetFrameHeadingSide,\n\tgetFrameHeadingSize,\n\tgetFrameHeadingTranslation,\n} from './frameHelpers'\n\n// Some of these values are repeated in CSS and need to match\nconst FRAME_HEADING_EXTRA_WIDTH = 12\nconst FRAME_HEADING_MIN_WIDTH = 32\nconst FRAME_HEADING_NOCOLORS_OFFSET_X = -7\nconst FRAME_HEADING_OFFSET_Y = 4\n\n/** @public */\nexport interface FrameShapeOptions {\n\t/**\n\t * When true, the frame will display colors for the shape's headings and background.\n\t */\n\tshowColors: boolean\n}\n\nexport function defaultEmptyAs(str: string, dflt: string) {\n\tif (str.match(/^\\s*$/)) {\n\t\treturn dflt\n\t}\n\treturn str\n}\n\n/** @public */\nexport class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {\n\tstatic override type = 'frame' as const\n\tstatic override props = frameShapeProps\n\tstatic override migrations = frameShapeMigrations\n\n\toverride options: FrameShapeOptions = {\n\t\tshowColors: false,\n\t}\n\n\t// evil crimes :)\n\t// By default, showColors is off. Because they use style props, which are picked up\n\t// automatically, we don't have DefaultColorStyle in the props in the schema by default.\n\t// Instead, when someone calls .configure to turn the option on, we manually add in the color\n\t// style here so it plays nicely with the other editor APIs.\n\tstatic override configure<T extends TLShapeUtilConstructor<any, any>>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\tconst withOptions = super.configure.call(this, options) as T\n\t\tif ((options as any).showColors) {\n\t\t\t;(withOptions as any).props = { ...withOptions.props, color: DefaultColorStyle }\n\t\t}\n\t\treturn withOptions\n\t}\n\n\toverride canEdit() {\n\t\treturn true\n\t}\n\n\toverride canResize() {\n\t\treturn true\n\t}\n\n\toverride canResizeChildren() {\n\t\treturn false\n\t}\n\n\toverride getDefaultProps(): TLFrameShape['props'] {\n\t\treturn { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }\n\t}\n\n\toverride getAriaDescriptor(shape: TLFrameShape) {\n\t\treturn shape.props.name\n\t}\n\n\toverride getGeometry(shape: TLFrameShape): Geometry2d {\n\t\tconst { editor } = this\n\n\t\tconst z = editor.getZoomLevel()\n\n\t\t// Which dimension measures the top edge after rotation?\n\t\tconst labelSide = getFrameHeadingSide(editor, shape)\n\t\tconst isVertical = labelSide % 2 === 1\n\t\tconst rotatedTopEdgeWidth = isVertical ? shape.props.h : shape.props.w\n\n\t\t// Get the size of the heading (max width equal to the rotatedTopEdgeWidth)\n\t\tconst opts = getFrameHeadingOpts(rotatedTopEdgeWidth, false)\n\t\tconst headingSize = getFrameHeadingSize(editor, shape, opts)\n\n\t\t// If NOT showing frame colors, we need to offset the label\n\t\t// to the left so that the title is in line with the shape edge\n\t\t// and add that extra width to the right side of the label\n\t\tconst isShowingFrameColors = this.options.showColors\n\n\t\t// Scale everything into **screen space**\n\t\tconst extraWidth = FRAME_HEADING_EXTRA_WIDTH / z\n\t\tconst minWidth = FRAME_HEADING_MIN_WIDTH / z\n\t\tconst maxWidth = rotatedTopEdgeWidth + (isShowingFrameColors ? 1 : extraWidth)\n\n\t\tconst labelWidth = headingSize.w / z\n\t\tconst labelHeight = headingSize.h / z\n\n\t\tconst clampedLabelWidth = clamp(labelWidth + extraWidth, minWidth, maxWidth)\n\n\t\tconst offsetX = (isShowingFrameColors ? -1 : FRAME_HEADING_NOCOLORS_OFFSET_X) / z\n\t\tconst offsetY = FRAME_HEADING_OFFSET_Y / z\n\n\t\t// In page space\n\t\tconst width = isVertical ? labelHeight : clampedLabelWidth\n\t\tconst height = isVertical ? clampedLabelWidth : labelHeight\n\n\t\t// Calculate label position based on side. The position needs to always appear\n\t\t// at the top left of the shape, regardless of rotation. The label must be\n\t\t// between a minimum and maximum. The minimum is arbitrary; the maximum is the\n\t\t// width of the edge of the frame where the label will be shown.\n\n\t\tlet x: number, y: number\n\n\t\tswitch (labelSide) {\n\t\t\tcase 0: {\n\t\t\t\t// top\n\t\t\t\tx = offsetX\n\t\t\t\ty = -(labelHeight + offsetY)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 1: {\n\t\t\t\t// right\n\t\t\t\tx = -(labelHeight + offsetY)\n\t\t\t\ty = shape.props.h - (offsetX + clampedLabelWidth)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 2: {\n\t\t\t\t// bottom\n\t\t\t\tx = shape.props.w - (offsetX + clampedLabelWidth)\n\t\t\t\ty = shape.props.h + offsetY\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 3: {\n\t\t\t\t// left\n\t\t\t\tx = shape.props.w + offsetY\n\t\t\t\ty = offsetX\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\treturn new Group2d({\n\t\t\tchildren: [\n\t\t\t\tnew Rectangle2d({\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tisFilled: false,\n\t\t\t\t}),\n\t\t\t\tnew Rectangle2d({\n\t\t\t\t\tx,\n\t\t\t\t\ty,\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t\tisFilled: true,\n\t\t\t\t\tisLabel: true,\n\t\t\t\t}),\n\t\t\t],\n\t\t})\n\t}\n\n\toverride getText(shape: TLFrameShape): string | undefined {\n\t\treturn shape.props.name\n\t}\n\n\toverride component(shape: TLFrameShape) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst theme = useDefaultColorTheme()\n\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst isCreating = useValue(\n\t\t\t'is creating this shape',\n\t\t\t() => {\n\t\t\t\tconst resizingState = this.editor.getStateDescendant('select.resizing')\n\t\t\t\tif (!resizingState) return false\n\t\t\t\tif (!resizingState.getIsActive()) return false\n\t\t\t\tconst info = (resizingState as typeof resizingState & { info: { isCreating: boolean } })\n\t\t\t\t\t?.info\n\t\t\t\tif (!info) return false\n\t\t\t\treturn info.isCreating && this.editor.getOnlySelectedShapeId() === shape.id\n\t\t\t},\n\t\t\t[shape.id]\n\t\t)\n\n\t\tconst showFrameColors = this.options.showColors\n\n\t\tconst color = theme[shape.props.color]\n\t\tconst frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill\n\t\tconst frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke\n\t\tconst frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background\n\t\tconst frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background\n\t\tconst frameHeadingText = showFrameColors ? color.frame.text : theme.text\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SVGContainer>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tclassName={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}\n\t\t\t\t\t\tfill={frameFill}\n\t\t\t\t\t\tstroke={frameStroke}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: `calc(${shape.props.w}px + 1px / var(--tl-zoom))`,\n\t\t\t\t\t\t\theight: `calc(${shape.props.h}px + 1px / var(--tl-zoom))`,\n\t\t\t\t\t\t\ttransform: `translate(calc(-0.5px / var(--tl-zoom)), calc(-0.5px / var(--tl-zoom)))`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</SVGContainer>\n\t\t\t\t{isCreating ? null : (\n\t\t\t\t\t<FrameHeading\n\t\t\t\t\t\tid={shape.id}\n\t\t\t\t\t\tname={shape.props.name}\n\t\t\t\t\t\tfill={frameHeadingFill}\n\t\t\t\t\t\tstroke={frameHeadingStroke}\n\t\t\t\t\t\tcolor={frameHeadingText}\n\t\t\t\t\t\twidth={shape.props.w}\n\t\t\t\t\t\theight={shape.props.h}\n\t\t\t\t\t\toffsetX={showFrameColors ? -1 : -7}\n\t\t\t\t\t\tshowColors={this.options.showColors}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)\n\t}\n\n\toverride toSvg(shape: TLFrameShape, ctx: SvgExportContext) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: ctx.isDarkMode })\n\n\t\t// rotate right 45 deg\n\t\tconst labelSide = getFrameHeadingSide(this.editor, shape)\n\t\tconst isVertical = labelSide % 2 === 1\n\t\tconst rotatedTopEdgeWidth = isVertical ? shape.props.h : shape.props.w\n\t\tconst labelTranslate = getFrameHeadingTranslation(shape, labelSide, true)\n\n\t\t// Truncate with ellipsis\n\t\tconst opts: TLCreateTextJsxFromSpansOpts = getFrameHeadingOpts(rotatedTopEdgeWidth - 12, true)\n\n\t\tconst frameTitle = defaultEmptyAs(shape.props.name, 'Frame') + String.fromCharCode(8203)\n\t\tconst labelBounds = getFrameHeadingSize(this.editor, shape, opts)\n\t\tconst spans = this.editor.textMeasure.measureTextSpans(frameTitle, opts)\n\t\tconst text = createTextJsxFromSpans(this.editor, spans, opts)\n\n\t\tconst showFrameColors = this.options.showColors\n\n\t\tconst color = theme[shape.props.color]\n\t\tconst frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill\n\t\tconst frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke\n\t\tconst frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background\n\t\tconst frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background\n\t\tconst frameHeadingText = showFrameColors ? color.frame.text : theme.text\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<rect\n\t\t\t\t\twidth={shape.props.w}\n\t\t\t\t\theight={shape.props.h}\n\t\t\t\t\tfill={frameFill}\n\t\t\t\t\tstroke={frameStroke}\n\t\t\t\t\tstrokeWidth={1}\n\t\t\t\t\tx={0}\n\t\t\t\t\trx={0}\n\t\t\t\t\try={0}\n\t\t\t\t/>\n\t\t\t\t<g fill={frameHeadingText} transform={labelTranslate}>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tx={labelBounds.x - (showFrameColors ? 0 : 6)}\n\t\t\t\t\t\ty={labelBounds.y - 6}\n\t\t\t\t\t\twidth={Math.min(rotatedTopEdgeWidth, labelBounds.width + 12)}\n\t\t\t\t\t\theight={labelBounds.height}\n\t\t\t\t\t\tfill={frameHeadingFill}\n\t\t\t\t\t\tstroke={frameHeadingStroke}\n\t\t\t\t\t\trx={4}\n\t\t\t\t\t\try={4}\n\t\t\t\t\t/>\n\t\t\t\t\t<g transform={`translate(${showFrameColors ? 8 : 0}, 4)`}>{text}</g>\n\t\t\t\t</g>\n\t\t\t</>\n\t\t)\n\t}\n\n\tindicator(shape: TLFrameShape) {\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\tclassName={`tl-frame-indicator`}\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride canReceiveNewChildrenOfType(shape: TLShape) {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride onResize(shape: any, info: TLResizeInfo<any>) {\n\t\treturn resizeBox(shape, info)\n\t}\n\n\toverride getInterpolatedProps(\n\t\tstartShape: TLFrameShape,\n\t\tendShape: TLFrameShape,\n\t\tt: number\n\t): TLFrameShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n\n\toverride onDoubleClickEdge(shape: TLFrameShape, info: TLClickEventInfo) {\n\t\tif (info.target !== 'selection') return\n\t\tconst { handle } = info\n\n\t\t// If handle is missing, we can't determine which edge was clicked\n\t\tif (!handle) return\n\n\t\tconst isHorizontalEdge = handle === 'left' || handle === 'right'\n\t\tconst isVerticalEdge = handle === 'top' || handle === 'bottom'\n\n\t\tconst childIds = this.editor.getSortedChildIdsForParent(shape.id)\n\t\tconst children = compact(childIds.map((id) => this.editor.getShape(id)))\n\t\tif (!children.length) return\n\n\t\tconst { dx, dy, w, h } = getFrameChildrenBounds(children, this.editor, { padding: 10 })\n\n\t\tthis.editor.run(() => {\n\t\t\tconst changes: TLShapePartial[] = childIds.map((childId) => {\n\t\t\t\tconst childShape = this.editor.getShape(childId)!\n\t\t\t\treturn {\n\t\t\t\t\tid: childShape.id,\n\t\t\t\t\ttype: childShape.type,\n\t\t\t\t\tx: isHorizontalEdge ? childShape.x + dx : childShape.x,\n\t\t\t\t\ty: isVerticalEdge ? childShape.y + dy : childShape.y,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tthis.editor.updateShapes(changes)\n\t\t})\n\n\t\treturn {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tprops: {\n\t\t\t\tw: isHorizontalEdge ? w : shape.props.w,\n\t\t\t\th: isVerticalEdge ? h : shape.props.h,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride onDoubleClickCorner(shape: TLFrameShape) {\n\t\tfitFrameToContent(this.editor, shape.id, { padding: 10 })\n\t\treturn {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t}\n\t}\n\n\toverride onDragShapesIn(\n\t\tshape: TLFrameShape,\n\t\tdraggingShapes: TLShape[],\n\t\t{ initialParentIds, initialIndices }: TLDragShapesOverInfo\n\t) {\n\t\tconst { editor } = this\n\n\t\tif (draggingShapes.every((s) => s.parentId === shape.id)) return\n\n\t\t// Check to see whether any of the shapes can have their old index restored\n\t\tlet canRestoreOriginalIndices = false\n\t\tconst previousChildren = draggingShapes.filter((s) => shape.id === initialParentIds.get(s.id))\n\n\t\tif (previousChildren.length > 0) {\n\t\t\tconst currentChildren = compact(\n\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t)\n\t\t\tif (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {\n\t\t\t\tcanRestoreOriginalIndices = true\n\t\t\t}\n\t\t}\n\n\t\t// I can't imagine this happening, but if any of the children are the ancestor of the frame, quit here\n\t\tif (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return\n\n\t\t// Reparent the shapes to the new parent\n\t\teditor.reparentShapes(draggingShapes, shape.id)\n\n\t\t// If we can restore the original indices, then do so\n\t\tif (canRestoreOriginalIndices) {\n\t\t\tfor (const shape of previousChildren) {\n\t\t\t\teditor.updateShape({\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tindex: initialIndices.get(shape.id),\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDragShapesOut(\n\t\tshape: TLFrameShape,\n\t\tdraggingShapes: TLShape[],\n\t\tinfo: TLDragShapesOutInfo\n\t): void {\n\t\tconst { editor } = this\n\t\t// When a user drags shapes out of a frame, and if we're not dragging into a new shape, then reparent\n\t\t// the dragging shapes (that are current children of the frame) onto the current page instead\n\t\tif (!info.nextDraggingOverShapeId) {\n\t\t\teditor.reparentShapes(\n\t\t\t\tdraggingShapes.filter(\n\t\t\t\t\t(s) => s.parentId === shape.id && this.canReceiveNewChildrenOfType(s)\n\t\t\t\t),\n\t\t\t\teditor.getCurrentPageId()\n\t\t\t)\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": ["shape"]
 }

package/dist-esm/lib/shapes/shared/PathBuilder.mjs CHANGED Viewed

@@ -9,6 +9,7 @@ import {
   exhaustiveSwitchError,
   Geometry2d,
   getPerfectDashProps,
+  getVerticesCountForArcLength,
   Group2d,
   modulate,
   rng,
@@ -126,7 +127,11 @@ class PathBuilder {
       endAngle += 2 * Math.PI;
     }
     const sweepAngle = endAngle - startAngle;
+    const approximateArcLength = Math.max(rx1, ry1) * Math.abs(sweepAngle);
     const numSegments = Math.min(4, Math.ceil(Math.abs(sweepAngle) / (Math.PI / 2)));
+    const resolutionPerSegment = Math.ceil(
+      getVerticesCountForArcLength(approximateArcLength) / numSegments
+    );
     const anglePerSegment = sweepAngle / numSegments;
     const ellipsePoint = (angle) => {
       return {
@@ -154,11 +159,23 @@ class PathBuilder {
       const cp2x = end.x - handleScale * d2.x;
       const cp2y = end.y - handleScale * d2.y;
       const bezierOpts = i === 0 ? opts : { ...opts, mergeWithPrevious: true };
-      this.cubicBezierTo(end.x, end.y, cp1x, cp1y, cp2x, cp2y, bezierOpts);
+      this.cubicBezierToWithResolution(
+        end.x,
+        end.y,
+        cp1x,
+        cp1y,
+        cp2x,
+        cp2y,
+        bezierOpts,
+        resolutionPerSegment
+      );
     }
     return this;
   }
   cubicBezierTo(x, y, cp1X, cp1Y, cp2X, cp2Y, opts) {
+    return this.cubicBezierToWithResolution(x, y, cp1X, cp1Y, cp2X, cp2Y, opts);
+  }
+  cubicBezierToWithResolution(x, y, cp1X, cp1Y, cp2X, cp2Y, opts, resolution) {
     this.assertHasMoveTo();
     this.commands.push({
       type: "cubic",
@@ -167,7 +184,8 @@ class PathBuilder {
       cp1: { x: cp1X, y: cp1Y },
       cp2: { x: cp2X, y: cp2Y },
       isClose: false,
-      opts
+      opts,
+      resolution
     });
     return this;
   }
@@ -630,7 +648,8 @@ class PathBuilderGeometry2d extends Geometry2d {
               start: Vec.From(last),
               cp1: Vec.From(command.cp1),
               cp2: Vec.From(command.cp2),
-              end: Vec.From(command)
+              end: Vec.From(command),
+              resolution: command.resolution
             })
           );
           break;