npm - tldraw - Versions diffs - 3.16.0-canary.4c3f2b4783e6 → 3.16.0-canary.5170ef6b6e20 - Mend

tldraw 3.16.0-canary.4c3f2b4783e6 → 3.16.0-canary.5170ef6b6e20

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 (102) hide show

package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx"],
-  "sourcesContent": ["import {\n\tapproximately,\n\tisEqual,\n\tkickoutOccludedShapes,\n\tmodulate,\n\tTLImageShape,\n\tTLShapePartial,\n\ttrack,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport {\n\tASPECT_RATIO_OPTION,\n\tASPECT_RATIO_OPTIONS,\n\tASPECT_RATIO_TO_VALUE,\n\tgetCroppedImageDataForAspectRatio,\n\tgetCroppedImageDataWhenZooming,\n\tgetDefaultCrop,\n\tMAX_ZOOM,\n} from '../../../shapes/shared/crop'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDropdownMenuCheckboxItem,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n} from '../primitives/TldrawUiDropdownMenu'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\n\n/** @public */\nexport interface DefaultImageToolbarContentProps {\n\timageShapeId: TLImageShape['id']\n\tisManipulating: boolean\n\tonEditAltTextStart(): void\n\tonManipulatingStart(): void\n\tonManipulatingEnd(): void\n}\n\n/** @public @react */\nexport const DefaultImageToolbarContent = track(function DefaultImageToolbarContent({\n\timageShapeId,\n\tisManipulating,\n\tonEditAltTextStart,\n\tonManipulatingStart,\n\tonManipulatingEnd,\n}: DefaultImageToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'image-toolbar'\n\tconst sliderRef = useRef<HTMLDivElement>(null)\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst crop = useValue('crop', () => editor.getShape<TLImageShape>(imageShapeId)!.props.crop, [\n\t\teditor,\n\t\timageShapeId,\n\t])\n\tconst zoom = crop\n\t\t? Math.min(1 - (crop.bottomRight.x - crop.topLeft.x), 1 - (crop.bottomRight.y - crop.topLeft.y))\n\t\t: 0\n\tconst [maxZoom, setMaxZoom] = useState<number | undefined>(\n\t\tcrop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM\n\t)\n\tconst actions = useActions()\n\n\t// So, we set a maxZoom here in case there's been a manual crop applied.\n\t// Typically, you can zoom 3x into the image size (MAX_ZOOM's value).\n\t// If you go deeper than that zoom level, we need to set that as the new 100%\n\t// value on the zoom slider (otherwise you could zoom into infinity).\n\t// This balances usage of the zoom slider with manual cropping.\n\tuseEffect(() => {\n\t\tsetMaxZoom(crop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM)\n\t}, [crop, zoom, maxZoom])\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\t// Apply an easing function to smooth out the zoom curve,\n\t// otherwise the zoom slider has a cubic drag feel to it which feels off.\n\tconst easeZoom = useCallback((value: number, maxValue: number): number => {\n\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t// Use an easing function for a more natural zoom feel\n\t\treturn Math.pow(value / maxValue, maxRatioConversion) * maxValue\n\t}, [])\n\n\tconst displayValue =\n\t\tcrop && maxZoom\n\t\t\t? modulate(easeZoom(zoom, maxZoom), [0, maxZoom], [0, 100], true /* clamp */)\n\t\t\t: 0\n\n\tconst handleZoomChange = useCallback(\n\t\t(value: number) => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\t// Convert the eased slider value back to the actual zoom value\n\t\t\tconst sliderPercent = value / 100\n\n\t\t\t// Convert the slider position back into the \"zoom\" value expected by\n\t\t\t// getCroppedImageDataWhenZooming.\n\t\t\t// 1. Undo the easing: z_out = sliderPercent^(1/maxRatioConversion) * maxZoom\n\t\t\t// 2. Translate z_out into the function's input domain. The helper computes\n\t\t\t//    the *resulting* zoom (z_out) using:\n\t\t\t//        z_out = 2 * z_in / (1 + 2 * z_in)\n\t\t\t//    Solving for z_in gives:\n\t\t\t//        z_in = z_out / (2 * (1 - z_out))\n\t\t\tconst maxDimension = 1 - 1 / MAX_ZOOM\n\t\t\tconst clampedMaxZoom = Math.min(maxDimension, maxZoom ?? maxDimension)\n\t\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t\tconst zOut = Math.pow(sliderPercent, 1 / maxRatioConversion) * clampedMaxZoom\n\t\t\tconst zoom = zOut >= 1 ? 1 : zOut / (2 * (1 - zOut))\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\t\tif (!imageShape) return\n\n\t\t\tconst change = getCroppedImageDataWhenZooming(zoom, imageShape, maxZoom)\n\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShape.id,\n\t\t\t\ttype: imageShape.type,\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\n\t\t\ttrackEvent('set-style', { source: 'image-toolbar', id: 'zoom', value })\n\t\t},\n\t\t[editor, trackEvent, imageShapeId, maxZoom]\n\t)\n\n\tconst handleImageReplace = useCallback(\n\t\t() => actions['image-replace'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleImageDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleAspectRatioChange = (aspectRatio: ASPECT_RATIO_OPTION) => {\n\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\tif (!imageShape) return\n\t\teditor.run(() => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\tconst change = getCroppedImageDataForAspectRatio(aspectRatio, imageShape)\n\t\t\teditor.markHistoryStoppingPoint('aspect ratio')\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShapeId,\n\t\t\t\ttype: 'image',\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\t\t\tkickoutOccludedShapes(editor, [imageShapeId])\n\t\t})\n\t}\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLImageShape>(imageShapeId)!.props.altText,\n\t\t[editor, imageShapeId]\n\t)\n\tconst shapeAspectRatio = useValue(\n\t\t'shapeAspectRatio',\n\t\t() => {\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)!\n\t\t\treturn imageShape.props.w / imageShape.props.h\n\t\t},\n\t\t[editor, imageShapeId]\n\t)\n\tconst isOriginalCrop = !crop || isEqual(crop, getDefaultCrop())\n\n\tuseEffect(() => {\n\t\tif (isManipulating) {\n\t\t\teditor.timers.setTimeout(() => sliderRef.current?.focus(), 0)\n\t\t}\n\t}, [editor, isManipulating])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\t\tif (isManipulating) {\n\t\t\t\tif (e.key === 'Escape') {\n\t\t\t\t\teditor.cancel()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\teditor.complete()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tconst elm = sliderRef.current\n\t\tif (elm) {\n\t\t\telm.addEventListener('keydown', handleKeyDown)\n\t\t}\n\t\treturn () => {\n\t\t\tif (elm) {\n\t\t\t\telm.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t}\n\t}, [editor, isManipulating, onManipulatingEnd])\n\n\tif (isManipulating) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<TldrawUiSlider\n\t\t\t\t\tref={sliderRef}\n\t\t\t\t\tvalue={displayValue}\n\t\t\t\t\tlabel=\"tool.image-zoom\"\n\t\t\t\t\tonValueChange={handleZoomChange}\n\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tsteps={100}\n\t\t\t\t\tdata-testid=\"tool.image-zoom\"\n\t\t\t\t\ttitle={msg('tool.image-zoom')}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiDropdownMenuRoot id=\"image-toolbar-aspect-ratio\">\n\t\t\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t\t<TldrawUiButton title={msg('tool.aspect-ratio')} type=\"icon\">\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"corners\" />\n\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t<TldrawUiDropdownMenuContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {\n\t\t\t\t\t\t\tlet checked = false\n\t\t\t\t\t\t\tif (isOriginalCrop) {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = true\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'circle') {\n\t\t\t\t\t\t\t\t\tchecked = !!crop.isCircle\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'square') {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!crop?.isCircle &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.1)\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = false\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!isOriginalCrop &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.01)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiDropdownMenuCheckboxItem\n\t\t\t\t\t\t\t\t\tkey={aspectRatio}\n\t\t\t\t\t\t\t\t\tonSelect={() => handleAspectRatioChange(aspectRatio as ASPECT_RATIO_OPTION)}\n\t\t\t\t\t\t\t\t\tchecked={checked}\n\t\t\t\t\t\t\t\t\ttitle={msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t{msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t\t</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t</TldrawUiDropdownMenuCheckboxItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiDropdownMenuContent>\n\t\t\t\t</TldrawUiDropdownMenuRoot>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonClick={onManipulatingEnd}\n\t\t\t\t\tdata-testid=\"tool.image-confirm\"\n\t\t\t\t\tstyle={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</>\n\t\t)\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.replace-media')} onClick={handleImageReplace}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.image-crop')} onClick={onManipulatingStart}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"crop\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleImageDownload}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tapproximately,\n\tisEqual,\n\tkickoutOccludedShapes,\n\tmodulate,\n\tTLImageShape,\n\tTLShapePartial,\n\ttrack,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport {\n\tASPECT_RATIO_OPTION,\n\tASPECT_RATIO_OPTIONS,\n\tASPECT_RATIO_TO_VALUE,\n\tgetCroppedImageDataForAspectRatio,\n\tgetCroppedImageDataWhenZooming,\n\tgetDefaultCrop,\n\tMAX_ZOOM,\n} from '../../../shapes/shared/crop'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDropdownMenuCheckboxItem,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n} from '../primitives/TldrawUiDropdownMenu'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public */\nexport interface DefaultImageToolbarContentProps {\n\timageShapeId: TLImageShape['id']\n\tisManipulating: boolean\n\tonEditAltTextStart(): void\n\tonManipulatingStart(): void\n\tonManipulatingEnd(): void\n}\n\n/** @public @react */\nexport const DefaultImageToolbarContent = track(function DefaultImageToolbarContent({\n\timageShapeId,\n\tisManipulating,\n\tonEditAltTextStart,\n\tonManipulatingStart,\n\tonManipulatingEnd,\n}: DefaultImageToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'image-toolbar'\n\tconst sliderRef = useRef<HTMLDivElement>(null)\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst crop = useValue('crop', () => editor.getShape<TLImageShape>(imageShapeId)!.props.crop, [\n\t\teditor,\n\t\timageShapeId,\n\t])\n\tconst zoom = crop\n\t\t? Math.min(1 - (crop.bottomRight.x - crop.topLeft.x), 1 - (crop.bottomRight.y - crop.topLeft.y))\n\t\t: 0\n\tconst [maxZoom, setMaxZoom] = useState<number | undefined>(\n\t\tcrop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM\n\t)\n\tconst actions = useActions()\n\n\t// So, we set a maxZoom here in case there's been a manual crop applied.\n\t// Typically, you can zoom 3x into the image size (MAX_ZOOM's value).\n\t// If you go deeper than that zoom level, we need to set that as the new 100%\n\t// value on the zoom slider (otherwise you could zoom into infinity).\n\t// This balances usage of the zoom slider with manual cropping.\n\tuseEffect(() => {\n\t\tsetMaxZoom(crop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM)\n\t}, [crop, zoom, maxZoom])\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\t// Apply an easing function to smooth out the zoom curve,\n\t// otherwise the zoom slider has a cubic drag feel to it which feels off.\n\tconst easeZoom = useCallback((value: number, maxValue: number): number => {\n\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t// Use an easing function for a more natural zoom feel\n\t\treturn Math.pow(value / maxValue, maxRatioConversion) * maxValue\n\t}, [])\n\n\tconst displayValue =\n\t\tcrop && maxZoom\n\t\t\t? modulate(easeZoom(zoom, maxZoom), [0, maxZoom], [0, 100], true /* clamp */)\n\t\t\t: 0\n\n\tconst handleZoomChange = useCallback(\n\t\t(value: number) => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\t// Convert the eased slider value back to the actual zoom value\n\t\t\tconst sliderPercent = value / 100\n\n\t\t\t// Convert the slider position back into the \"zoom\" value expected by\n\t\t\t// getCroppedImageDataWhenZooming.\n\t\t\t// 1. Undo the easing: z_out = sliderPercent^(1/maxRatioConversion) * maxZoom\n\t\t\t// 2. Translate z_out into the function's input domain. The helper computes\n\t\t\t//    the *resulting* zoom (z_out) using:\n\t\t\t//        z_out = 2 * z_in / (1 + 2 * z_in)\n\t\t\t//    Solving for z_in gives:\n\t\t\t//        z_in = z_out / (2 * (1 - z_out))\n\t\t\tconst maxDimension = 1 - 1 / MAX_ZOOM\n\t\t\tconst clampedMaxZoom = Math.min(maxDimension, maxZoom ?? maxDimension)\n\t\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t\tconst zOut = Math.pow(sliderPercent, 1 / maxRatioConversion) * clampedMaxZoom\n\t\t\tconst zoom = zOut >= 1 ? 1 : zOut / (2 * (1 - zOut))\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\t\tif (!imageShape) return\n\n\t\t\tconst change = getCroppedImageDataWhenZooming(zoom, imageShape, maxZoom)\n\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShape.id,\n\t\t\t\ttype: imageShape.type,\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\n\t\t\ttrackEvent('set-style', { source: 'image-toolbar', id: 'zoom', value })\n\t\t},\n\t\t[editor, trackEvent, imageShapeId, maxZoom]\n\t)\n\n\tconst handleImageReplace = useCallback(\n\t\t() => actions['image-replace'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleImageDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleAspectRatioChange = (aspectRatio: ASPECT_RATIO_OPTION) => {\n\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\tif (!imageShape) return\n\t\teditor.run(() => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\tconst change = getCroppedImageDataForAspectRatio(aspectRatio, imageShape)\n\t\t\teditor.markHistoryStoppingPoint('aspect ratio')\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShapeId,\n\t\t\t\ttype: 'image',\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\t\t\tkickoutOccludedShapes(editor, [imageShapeId])\n\t\t})\n\t}\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLImageShape>(imageShapeId)!.props.altText,\n\t\t[editor, imageShapeId]\n\t)\n\tconst shapeAspectRatio = useValue(\n\t\t'shapeAspectRatio',\n\t\t() => {\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)!\n\t\t\treturn imageShape.props.w / imageShape.props.h\n\t\t},\n\t\t[editor, imageShapeId]\n\t)\n\tconst isOriginalCrop = !crop || isEqual(crop, getDefaultCrop())\n\n\tuseEffect(() => {\n\t\tif (isManipulating) {\n\t\t\teditor.timers.setTimeout(() => sliderRef.current?.focus(), 0)\n\t\t}\n\t}, [editor, isManipulating])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\t\tif (isManipulating) {\n\t\t\t\tif (e.key === 'Escape') {\n\t\t\t\t\teditor.cancel()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\teditor.complete()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tconst elm = sliderRef.current\n\t\tif (elm) {\n\t\t\telm.addEventListener('keydown', handleKeyDown)\n\t\t}\n\t\treturn () => {\n\t\t\tif (elm) {\n\t\t\t\telm.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t}\n\t}, [editor, isManipulating, onManipulatingEnd])\n\n\tif (isManipulating) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<TldrawUiSlider\n\t\t\t\t\tref={sliderRef}\n\t\t\t\t\tvalue={displayValue}\n\t\t\t\t\tlabel=\"tool.image-zoom\"\n\t\t\t\t\tonValueChange={handleZoomChange}\n\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tsteps={100}\n\t\t\t\t\tdata-testid=\"tool.image-zoom\"\n\t\t\t\t\ttitle={msg('tool.image-zoom')}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiDropdownMenuRoot id=\"image-toolbar-aspect-ratio\">\n\t\t\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttitle={msg('tool.aspect-ratio')}\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid=\"tool.image-aspect-ratio\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"corners\" />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t<TldrawUiDropdownMenuContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {\n\t\t\t\t\t\t\tlet checked = false\n\t\t\t\t\t\t\tif (isOriginalCrop) {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = true\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'circle') {\n\t\t\t\t\t\t\t\t\tchecked = !!crop.isCircle\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'square') {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!crop?.isCircle &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.1)\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = false\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!isOriginalCrop &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.01)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiDropdownMenuCheckboxItem\n\t\t\t\t\t\t\t\t\tkey={aspectRatio}\n\t\t\t\t\t\t\t\t\tonSelect={() => handleAspectRatioChange(aspectRatio as ASPECT_RATIO_OPTION)}\n\t\t\t\t\t\t\t\t\tchecked={checked}\n\t\t\t\t\t\t\t\t\ttitle={msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t{msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t\t</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t</TldrawUiDropdownMenuCheckboxItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiDropdownMenuContent>\n\t\t\t\t</TldrawUiDropdownMenuRoot>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonClick={onManipulatingEnd}\n\t\t\t\t\tdata-testid=\"tool.image-crop-confirm\"\n\t\t\t\t\tstyle={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}\n\t\t\t\t\ttitle={msg('tool.image-crop-confirm')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</>\n\t\t)\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tdata-testid=\"tool.image-replace\"\n\t\t\t\t\tonClick={handleImageReplace}\n\t\t\t\t\ttitle={msg('tool.replace-media')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('tool.image-crop')}\n\t\t\t\t\tonClick={onManipulatingStart}\n\t\t\t\t\tdata-testid=\"tool.image-crop\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"crop\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleImageDownload}\n\t\t\t\tdata-testid=\"tool.image-download\"\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tdata-testid=\"tool.image-alt-text\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["DefaultImageToolbarContent", "zoom"]
 }

package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js CHANGED Viewed

@@ -29,6 +29,7 @@ var import_events = require("../../context/events");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiButton = require("../primitives/Button/TldrawUiButton");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
+var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 const DefaultVideoToolbarContent = (0, import_editor.track)(function DefaultVideoToolbarContent2({
   videoShapeId,
   onEditAltTextStart
@@ -53,22 +54,33 @@ const DefaultVideoToolbarContent = (0, import_editor.track)(function DefaultVide
     [editor, videoShapeId]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButton.TldrawUiButton, { type: "icon", title: msg("tool.replace-media"), onClick: handleVideoReplace, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "tool-media" }) }),
+    !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TldrawUiButton.TldrawUiButton,
+      {
+        type: "icon",
+        title: msg("tool.replace-media"),
+        onClick: handleVideoReplace,
+        "data-testid": "tool.video-replace",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "tool-media" })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_TldrawUiButton.TldrawUiButton,
       {
         type: "icon",
         title: msg("action.download-original"),
         onClick: handleVideoDownload,
+        "data-testid": "tool.video-download",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "download" })
       }
     ),
     (altText || !isReadonly) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiButton.TldrawUiButton,
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
       {
-        type: "normal",
+        type: "icon",
         isActive: !!altText,
         title: msg("tool.media-alt-text"),
+        "data-testid": "tool.video-alt-text",
         onClick: () => {
           trackEvent("alt-text-start", { source });
           onEditAltTextStart();

package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx"],
-  "sourcesContent": ["import { TLVideoShape, track, useEditor, useValue } from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\n\n/** @public */\nexport interface DefaultVideoToolbarContentProps {\n\tvideoShapeId: TLVideoShape['id']\n\tonEditAltTextStart(): void\n}\n\n/** @public @react */\nexport const DefaultVideoToolbarContent = track(function DefaultVideoToolbarContent({\n\tvideoShapeId,\n\tonEditAltTextStart,\n}: DefaultVideoToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'video-toolbar'\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst actions = useActions()\n\n\tconst handleVideoReplace = useCallback(\n\t\t() => actions['video-replace'].onSelect('video-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleVideoDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('video-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLVideoShape>(videoShapeId)!.props.altText,\n\t\t[editor, videoShapeId]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.replace-media')} onClick={handleVideoReplace}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleVideoDownload}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\tisActive={!!altText}\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CE;AA5CF,oBAAyD;AACzD,mBAA4B;AAC5B,qBAA2B;AAC3B,oBAA4B;AAC5B,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AAS5B,MAAM,iCAA6B,qBAAM,SAASA,4BAA2B;AAAA,EACnF;AAAA,EACA;AACD,GAAoC;AACnC,QAAM,aAAS,yBAAU;AACzB,QAAM,iBAAa,2BAAY;AAC/B,QAAM,UAAM,sCAAe;AAC3B,QAAM,SAAS;AACf,QAAM,aAAa,OAAO,cAAc;AAExC,QAAM,cAAU,2BAAW;AAE3B,QAAM,yBAAqB;AAAA,IAC1B,MAAM,QAAQ,eAAe,EAAE,SAAS,eAAe;AAAA,IACvD,CAAC,OAAO;AAAA,EACT;AAEA,QAAM,0BAAsB;AAAA,IAC3B,MAAM,QAAQ,mBAAmB,EAAE,SAAS,eAAe;AAAA,IAC3D,CAAC,OAAO;AAAA,EACT;AAEA,QAAM,cAAU;AAAA,IACf;AAAA,IACA,MAAM,OAAO,SAAuB,YAAY,EAAG,MAAM;AAAA,IACzD,CAAC,QAAQ,YAAY;AAAA,EACtB;AAEA,SACC,4EACE;AAAA,KAAC,cACD,4CAAC,wCAAe,MAAK,QAAO,OAAO,IAAI,oBAAoB,GAAG,SAAS,oBACtE,sDAAC,gDAAmB,OAAK,MAAC,MAAK,cAAa,GAC7C;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,IAAI,0BAA0B;AAAA,QACrC,SAAS;AAAA,QAET,sDAAC,gDAAmB,OAAK,MAAC,MAAK,YAAW;AAAA;AAAA,IAC3C;AAAA,KACE,WAAW,CAAC,eACb;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,UAAU,CAAC,CAAC;AAAA,QACZ,OAAO,IAAI,qBAAqB;AAAA,QAChC,SAAS,MAAM;AACd,qBAAW,kBAAkB,EAAE,OAAO,CAAC;AACvC,6BAAmB;AAAA,QACpB;AAAA,QAEA,sDAAC,gDAAmB,OAAK,MAAC,MAAK,OAAM;AAAA;AAAA,IACtC;AAAA,KAEF;AAEF,CAAC;",
+  "sourcesContent": ["import { TLVideoShape, track, useEditor, useValue } from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public */\nexport interface DefaultVideoToolbarContentProps {\n\tvideoShapeId: TLVideoShape['id']\n\tonEditAltTextStart(): void\n}\n\n/** @public @react */\nexport const DefaultVideoToolbarContent = track(function DefaultVideoToolbarContent({\n\tvideoShapeId,\n\tonEditAltTextStart,\n}: DefaultVideoToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'video-toolbar'\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst actions = useActions()\n\n\tconst handleVideoReplace = useCallback(\n\t\t() => actions['video-replace'].onSelect('video-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleVideoDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('video-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLVideoShape>(videoShapeId)!.props.altText,\n\t\t[editor, videoShapeId]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('tool.replace-media')}\n\t\t\t\t\tonClick={handleVideoReplace}\n\t\t\t\t\tdata-testid=\"tool.video-replace\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleVideoDownload}\n\t\t\t\tdata-testid=\"tool.video-download\"\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tisActive={!!altText}\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tdata-testid=\"tool.video-alt-text\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CE;AA7CF,oBAAyD;AACzD,mBAA4B;AAC5B,qBAA2B;AAC3B,oBAA4B;AAC5B,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAAsC;AAS/B,MAAM,iCAA6B,qBAAM,SAASA,4BAA2B;AAAA,EACnF;AAAA,EACA;AACD,GAAoC;AACnC,QAAM,aAAS,yBAAU;AACzB,QAAM,iBAAa,2BAAY;AAC/B,QAAM,UAAM,sCAAe;AAC3B,QAAM,SAAS;AACf,QAAM,aAAa,OAAO,cAAc;AAExC,QAAM,cAAU,2BAAW;AAE3B,QAAM,yBAAqB;AAAA,IAC1B,MAAM,QAAQ,eAAe,EAAE,SAAS,eAAe;AAAA,IACvD,CAAC,OAAO;AAAA,EACT;AAEA,QAAM,0BAAsB;AAAA,IAC3B,MAAM,QAAQ,mBAAmB,EAAE,SAAS,eAAe;AAAA,IAC3D,CAAC,OAAO;AAAA,EACT;AAEA,QAAM,cAAU;AAAA,IACf;AAAA,IACA,MAAM,OAAO,SAAuB,YAAY,EAAG,MAAM;AAAA,IACzD,CAAC,QAAQ,YAAY;AAAA,EACtB;AAEA,SACC,4EACE;AAAA,KAAC,cACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,IAAI,oBAAoB;AAAA,QAC/B,SAAS;AAAA,QACT,eAAY;AAAA,QAEZ,sDAAC,gDAAmB,OAAK,MAAC,MAAK,cAAa;AAAA;AAAA,IAC7C;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,IAAI,0BAA0B;AAAA,QACrC,SAAS;AAAA,QACT,eAAY;AAAA,QAEZ,sDAAC,gDAAmB,OAAK,MAAC,MAAK,YAAW;AAAA;AAAA,IAC3C;AAAA,KACE,WAAW,CAAC,eACb;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,UAAU,CAAC,CAAC;AAAA,QACZ,OAAO,IAAI,qBAAqB;AAAA,QAChC,eAAY;AAAA,QACZ,SAAS,MAAM;AACd,qBAAW,kBAAkB,EAAE,OAAO,CAAC;AACvC,6BAAmB;AAAA,QACpB;AAAA,QAEA,sDAAC,gDAAmB,OAAK,MAAC,MAAK,OAAM;AAAA;AAAA,IACtC;AAAA,KAEF;AAEF,CAAC;",
   "names": ["DefaultVideoToolbarContent"]
 }

package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js CHANGED Viewed

@@ -26,9 +26,9 @@ var import_editor = require("@tldraw/editor");
 var import_react = require("react");
 var import_events = require("../../context/events");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
-var import_TldrawUiButton = require("../primitives/Button/TldrawUiButton");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiInput = require("../primitives/TldrawUiInput");
+var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 function LinkEditor({ textEditor, value: initialValue, onClose }) {
   const editor = (0, import_editor.useEditor)();
   const [value, setValue] = (0, import_react.useState)(initialValue);
@@ -83,7 +83,7 @@ function LinkEditor({ textEditor, value: initialValue, onClose }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiButton.TldrawUiButton,
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
       {
         className: "tlui-rich-text__toolbar-link-visit",
         title: msg("tool.rich-text-link-visit"),
@@ -95,7 +95,7 @@ function LinkEditor({ textEditor, value: initialValue, onClose }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiButton.TldrawUiButton,
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
       {
         className: "tlui-rich-text__toolbar-link-remove",
         title: msg("tool.rich-text-link-remove"),

package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/LinkEditor.tsx"],
-  "sourcesContent": ["import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'\nimport { useEffect, useRef, useState } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\n\n/** @public */\nexport interface LinkEditorProps {\n\ttextEditor: TiptapEditor\n\tvalue: string\n\tonClose(): void\n}\n\n/** @public @react */\nexport function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEditorProps) {\n\tconst editor = useEditor()\n\tconst [value, setValue] = useState(initialValue)\n\tconst msg = useTranslation()\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst trackEvent = useUiEvents()\n\tconst source = 'rich-text-menu'\n\tconst linkifiedValue = value.startsWith('http') ? value : `https://${value}`\n\n\tconst handleValueChange = (value: string) => setValue(value)\n\n\tconst handleLinkComplete = (link: string) => {\n\t\ttrackEvent('rich-text', { operation: 'link-edit', source })\n\t\tif (!link.startsWith('http://') && !link.startsWith('https://')) {\n\t\t\tlink = `https://${link}`\n\t\t}\n\n\t\ttextEditor.commands.setLink({ href: link })\n\t\t// N.B. We shouldn't focus() on mobile because it causes the\n\t\t// Return key to replace the link with a newline :facepalm:\n\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\ttextEditor.commands.blur()\n\t\t} else {\n\t\t\ttextEditor.commands.focus()\n\t\t}\n\t\tonClose()\n\t}\n\n\tconst handleVisitLink = () => {\n\t\ttrackEvent('rich-text', { operation: 'link-visit', source })\n\t\twindow.open(linkifiedValue, '_blank', 'noopener, noreferrer')\n\t\tonClose()\n\t}\n\n\tconst handleRemoveLink = () => {\n\t\ttrackEvent('rich-text', { operation: 'link-remove', source })\n\t\ttextEditor.chain().unsetLink().focus().run()\n\t\tonClose()\n\t}\n\n\tconst handleLinkCancel = () => onClose()\n\n\tuseEffect(() => {\n\t\tref.current?.focus()\n\t}, [value])\n\n\tuseEffect(() => {\n\t\tsetValue(initialValue)\n\t}, [initialValue])\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiInput\n\t\t\t\tref={ref}\n\t\t\t\tdata-testid=\"rich-text.link-input\"\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-input\"\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonComplete={handleLinkComplete}\n\t\t\t\tonCancel={handleLinkCancel}\n\t\t\t\tplaceholder=\"example.com\"\n\t\t\t/>\n\t\t\t<TldrawUiButton\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-visit\"\n\t\t\t\ttitle={msg('tool.rich-text-link-visit')}\n\t\t\t\ttype=\"icon\"\n\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\tonClick={handleVisitLink}\n\t\t\t\tdisabled={!value}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"external-link\" />\n\t\t\t</TldrawUiButton>\n\t\t\t<TldrawUiButton\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-remove\"\n\t\t\t\ttitle={msg('tool.rich-text-link-remove')}\n\t\t\t\tdata-testid=\"rich-text.link-remove\"\n\t\t\t\ttype=\"icon\"\n\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\tonClick={handleRemoveLink}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"trash\" />\n\t\t\t</TldrawUiButton>\n\t\t</>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmEE;AAnEF,oBAAwD;AACxD,mBAA4C;AAC5C,oBAA4B;AAC5B,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,2BAA8B;AAUvB,SAAS,WAAW,EAAE,YAAY,OAAO,cAAc,QAAQ,GAAoB;AACzF,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAC/C,QAAM,UAAM,sCAAe;AAC3B,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,iBAAa,2BAAY;AAC/B,QAAM,SAAS;AACf,QAAM,iBAAiB,MAAM,WAAW,MAAM,IAAI,QAAQ,WAAW,KAAK;AAE1E,QAAM,oBAAoB,CAACA,WAAkB,SAASA,MAAK;AAE3D,QAAM,qBAAqB,CAAC,SAAiB;AAC5C,eAAW,aAAa,EAAE,WAAW,aAAa,OAAO,CAAC;AAC1D,QAAI,CAAC,KAAK,WAAW,SAAS,KAAK,CAAC,KAAK,WAAW,UAAU,GAAG;AAChE,aAAO,WAAW,IAAI;AAAA,IACvB;AAEA,eAAW,SAAS,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG1C,QAAI,OAAO,iBAAiB,EAAE,iBAAiB;AAC9C,iBAAW,SAAS,KAAK;AAAA,IAC1B,OAAO;AACN,iBAAW,SAAS,MAAM;AAAA,IAC3B;AACA,YAAQ;AAAA,EACT;AAEA,QAAM,kBAAkB,MAAM;AAC7B,eAAW,aAAa,EAAE,WAAW,cAAc,OAAO,CAAC;AAC3D,WAAO,KAAK,gBAAgB,UAAU,sBAAsB;AAC5D,YAAQ;AAAA,EACT;AAEA,QAAM,mBAAmB,MAAM;AAC9B,eAAW,aAAa,EAAE,WAAW,eAAe,OAAO,CAAC;AAC5D,eAAW,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI;AAC3C,YAAQ;AAAA,EACT;AAEA,QAAM,mBAAmB,MAAM,QAAQ;AAEvC,8BAAU,MAAM;AACf,QAAI,SAAS,MAAM;AAAA,EACpB,GAAG,CAAC,KAAK,CAAC;AAEV,8BAAU,MAAM;AACf,aAAS,YAAY;AAAA,EACtB,GAAG,CAAC,YAAY,CAAC;AAEjB,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ,WAAU;AAAA,QACV;AAAA,QACA,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,aAAY;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,IAAI,2BAA2B;AAAA,QACtC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QAEX,sDAAC,gDAAmB,OAAK,MAAC,MAAK,iBAAgB;AAAA;AAAA,IAChD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,IAAI,4BAA4B;AAAA,QACvC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QAET,sDAAC,gDAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,IACxC;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'\nimport { useEffect, useRef, useState } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public */\nexport interface LinkEditorProps {\n\ttextEditor: TiptapEditor\n\tvalue: string\n\tonClose(): void\n}\n\n/** @public @react */\nexport function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEditorProps) {\n\tconst editor = useEditor()\n\tconst [value, setValue] = useState(initialValue)\n\tconst msg = useTranslation()\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst trackEvent = useUiEvents()\n\tconst source = 'rich-text-menu'\n\tconst linkifiedValue = value.startsWith('http') ? value : `https://${value}`\n\n\tconst handleValueChange = (value: string) => setValue(value)\n\n\tconst handleLinkComplete = (link: string) => {\n\t\ttrackEvent('rich-text', { operation: 'link-edit', source })\n\t\tif (!link.startsWith('http://') && !link.startsWith('https://')) {\n\t\t\tlink = `https://${link}`\n\t\t}\n\n\t\ttextEditor.commands.setLink({ href: link })\n\t\t// N.B. We shouldn't focus() on mobile because it causes the\n\t\t// Return key to replace the link with a newline :facepalm:\n\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\ttextEditor.commands.blur()\n\t\t} else {\n\t\t\ttextEditor.commands.focus()\n\t\t}\n\t\tonClose()\n\t}\n\n\tconst handleVisitLink = () => {\n\t\ttrackEvent('rich-text', { operation: 'link-visit', source })\n\t\twindow.open(linkifiedValue, '_blank', 'noopener, noreferrer')\n\t\tonClose()\n\t}\n\n\tconst handleRemoveLink = () => {\n\t\ttrackEvent('rich-text', { operation: 'link-remove', source })\n\t\ttextEditor.chain().unsetLink().focus().run()\n\t\tonClose()\n\t}\n\n\tconst handleLinkCancel = () => onClose()\n\n\tuseEffect(() => {\n\t\tref.current?.focus()\n\t}, [value])\n\n\tuseEffect(() => {\n\t\tsetValue(initialValue)\n\t}, [initialValue])\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiInput\n\t\t\t\tref={ref}\n\t\t\t\tdata-testid=\"rich-text.link-input\"\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-input\"\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonComplete={handleLinkComplete}\n\t\t\t\tonCancel={handleLinkCancel}\n\t\t\t\tplaceholder=\"example.com\"\n\t\t\t/>\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-visit\"\n\t\t\t\ttitle={msg('tool.rich-text-link-visit')}\n\t\t\t\ttype=\"icon\"\n\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\tonClick={handleVisitLink}\n\t\t\t\tdisabled={!value}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"external-link\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-remove\"\n\t\t\t\ttitle={msg('tool.rich-text-link-remove')}\n\t\t\t\tdata-testid=\"rich-text.link-remove\"\n\t\t\t\ttype=\"icon\"\n\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\tonClick={handleRemoveLink}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"trash\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t</>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmEE;AAnEF,oBAAwD;AACxD,mBAA4C;AAC5C,oBAA4B;AAC5B,4BAA+B;AAC/B,gCAAmC;AACnC,2BAA8B;AAC9B,6BAAsC;AAU/B,SAAS,WAAW,EAAE,YAAY,OAAO,cAAc,QAAQ,GAAoB;AACzF,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAC/C,QAAM,UAAM,sCAAe;AAC3B,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,iBAAa,2BAAY;AAC/B,QAAM,SAAS;AACf,QAAM,iBAAiB,MAAM,WAAW,MAAM,IAAI,QAAQ,WAAW,KAAK;AAE1E,QAAM,oBAAoB,CAACA,WAAkB,SAASA,MAAK;AAE3D,QAAM,qBAAqB,CAAC,SAAiB;AAC5C,eAAW,aAAa,EAAE,WAAW,aAAa,OAAO,CAAC;AAC1D,QAAI,CAAC,KAAK,WAAW,SAAS,KAAK,CAAC,KAAK,WAAW,UAAU,GAAG;AAChE,aAAO,WAAW,IAAI;AAAA,IACvB;AAEA,eAAW,SAAS,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG1C,QAAI,OAAO,iBAAiB,EAAE,iBAAiB;AAC9C,iBAAW,SAAS,KAAK;AAAA,IAC1B,OAAO;AACN,iBAAW,SAAS,MAAM;AAAA,IAC3B;AACA,YAAQ;AAAA,EACT;AAEA,QAAM,kBAAkB,MAAM;AAC7B,eAAW,aAAa,EAAE,WAAW,cAAc,OAAO,CAAC;AAC3D,WAAO,KAAK,gBAAgB,UAAU,sBAAsB;AAC5D,YAAQ;AAAA,EACT;AAEA,QAAM,mBAAmB,MAAM;AAC9B,eAAW,aAAa,EAAE,WAAW,eAAe,OAAO,CAAC;AAC5D,eAAW,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI;AAC3C,YAAQ;AAAA,EACT;AAEA,QAAM,mBAAmB,MAAM,QAAQ;AAEvC,8BAAU,MAAM;AACf,QAAI,SAAS,MAAM;AAAA,EACpB,GAAG,CAAC,KAAK,CAAC;AAEV,8BAAU,MAAM;AACf,aAAS,YAAY;AAAA,EACtB,GAAG,CAAC,YAAY,CAAC;AAEjB,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ,WAAU;AAAA,QACV;AAAA,QACA,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,aAAY;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,IAAI,2BAA2B;AAAA,QACtC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QAEX,sDAAC,gDAAmB,OAAK,MAAC,MAAK,iBAAgB;AAAA;AAAA,IAChD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,IAAI,4BAA4B;AAAA,QACvC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QAET,sDAAC,gDAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,IACxC;AAAA,KACD;AAEF;",
   "names": ["value"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js CHANGED Viewed

@@ -139,7 +139,16 @@ const TldrawUiContextualToolbar = ({
       "data-testid": "contextual-toolbar",
       className: (0, import_classnames.default)("tlui-contextual-toolbar", className),
       onPointerDown: import_editor.stopEventPropagation,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", className: "tlui-menu", label, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TldrawUiToolbar.TldrawUiToolbar,
+        {
+          orientation: "horizontal",
+          className: "tlui-menu",
+          label,
+          tooltipSide: "top",
+          children
+        }
+      )
     }
   );
 };

package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx"],
-  "sourcesContent": ["import {\n\tassert,\n\tBox,\n\tclamp,\n\tEditor,\n\treact,\n\tstopEventPropagation,\n\tuseAtom,\n\tuseEditor,\n\tusePassThroughMouseOverEvents,\n\tusePassThroughWheelEvents,\n\tuseValue,\n\tVec,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport { TldrawUiToolbar } from './TldrawUiToolbar'\n\nconst MOVE_TIMEOUT = 150\nconst HIDE_VISIBILITY_TIMEOUT = 16\nconst SHOW_VISIBILITY_TIMEOUT = 16\nconst MIN_DISTANCE_TO_REPOSITION_SQUARED = 16 ** 2\nconst TOOLBAR_GAP = 8\nconst SCREEN_MARGIN = 16\nconst HIDE_TOOLBAR_WHEN_CAMERA_IS_MOVING = false\nconst LEFT_ALIGN_TOOLBAR = false\n\n/** @public */\nexport interface TLUiContextualToolbarProps {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tisMousingDown?: boolean\n\tgetSelectionBounds(): Box | undefined\n\tchangeOnlyWhenYChanges?: boolean\n\tlabel: string\n}\n\n/**\n * A generic floating toolbar that can be used for things\n * like rich text editing, image toolbars, etc.\n *\n * @public @react\n */\nexport const TldrawUiContextualToolbar = ({\n\tchildren,\n\tclassName,\n\tisMousingDown,\n\tgetSelectionBounds,\n\tchangeOnlyWhenYChanges = false,\n\tlabel,\n}: TLUiContextualToolbarProps) => {\n\tconst editor = useEditor()\n\tconst toolbarRef = useRef<HTMLDivElement>(null)\n\n\tusePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement>)\n\tusePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement>)\n\n\tconst { isVisible, isInteractive, hide, show, position, move } =\n\t\tuseToolbarVisibilityStateMachine(changeOnlyWhenYChanges)\n\n\t// annoying react stuff: we don't want the toolbar position function to depend on the react state so we'll double with a ref\n\tconst rCouldShowToolbar = useRef(false)\n\tconst [hasValidToolbarPosition, setHasValidToolbarPosition] = useState(false)\n\n\tconst contentSizeUpdateCounter = useAtom('content size update counter', 0)\n\n\tuseEffect(() => {\n\t\tassert(toolbarRef.current)\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tcontentSizeUpdateCounter.update((n) => n + 1)\n\t\t})\n\t\tobserver.observe(toolbarRef.current)\n\t\treturn () => observer.disconnect()\n\t}, [contentSizeUpdateCounter])\n\n\tuseEffect(() => {\n\t\tlet lastContentSizeUpdateCounter = contentSizeUpdateCounter.get()\n\t\treturn react('toolbar position', function updateToolbarPositionAndDisplay() {\n\t\t\tconst toolbarElm = toolbarRef.current\n\t\t\tif (!toolbarElm) return\n\n\t\t\tconst nextContentSizeUpdateCounter = contentSizeUpdateCounter.get()\n\n\t\t\t// capture / force this to update when...\n\t\t\teditor.getCamera() // the camera moves\n\t\t\tcontentSizeUpdateCounter.get() // the toolbar size changes\n\t\t\t// undefined here means that we can't show the toolbar due to an incompatible position\n\t\t\tconst position = getToolbarScreenPosition(editor, toolbarElm, getSelectionBounds)\n\n\t\t\t// todo: when the toolbar is hidden due to the selection being off screen, it should be hidden immediately\n\t\t\t// rather than waiting for the position to settle. This is different than when the position changes due to\n\t\t\t// a change in the user's selection.\n\t\t\tif (!position) {\n\t\t\t\tif (rCouldShowToolbar.current) {\n\t\t\t\t\t// If we don't have a position, then we're not showing the toolbar\n\t\t\t\t\trCouldShowToolbar.current = false\n\t\t\t\t\tsetHasValidToolbarPosition(false)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// If the camera state is moving, we want to immediately update the position\n\t\t\t\t// todo: consider hiding the toolbar while the camera is moving\n\t\t\t\tconst cameraState = editor.getCameraState()\n\t\t\t\tif (cameraState === 'moving') {\n\t\t\t\t\t// ...if we wanted this to avoid prematurely updating any positions, we'd need\n\t\t\t\t\t// to have the last updated position in page space, so that we could convert\n\t\t\t\t\t// it to screen space and update it here\n\t\t\t\t\tconst elm = toolbarRef.current\n\t\t\t\t\telm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)\n\t\t\t\t} else {\n\t\t\t\t\tconst moveImmediately = lastContentSizeUpdateCounter !== nextContentSizeUpdateCounter\n\t\t\t\t\t// Schedule a move to its next location\n\t\t\t\t\tmove(position.x, position.y, moveImmediately)\n\t\t\t\t}\n\n\t\t\t\t// Finally, if the toolbar was previously hidden, show it again\n\t\t\t\tif (!rCouldShowToolbar.current) {\n\t\t\t\t\trCouldShowToolbar.current = true\n\t\t\t\t\tsetHasValidToolbarPosition(true)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlastContentSizeUpdateCounter = nextContentSizeUpdateCounter\n\t\t})\n\t}, [editor, getSelectionBounds, contentSizeUpdateCounter, move])\n\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\t// Send the hide or show events based on whether the user is clicking\n\t// and whether the toolbar's position is valid\n\tuseEffect(() => {\n\t\tif (cameraState === 'moving' && HIDE_TOOLBAR_WHEN_CAMERA_IS_MOVING) {\n\t\t\thide(true)\n\t\t\treturn\n\t\t}\n\n\t\tif (isMousingDown || !hasValidToolbarPosition) {\n\t\t\thide()\n\t\t\treturn\n\t\t}\n\n\t\tshow()\n\t}, [hasValidToolbarPosition, cameraState, isMousingDown, show, hide])\n\n\t// When the visibility changes, update the toolbar's visibility\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.dataset.visible = `${isVisible}`\n\t}, [isVisible, position])\n\n\t// When the position changes, update the toolbar's position on screen\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)\n\t}, [position])\n\n\t// When the interactivity changes, update the toolbar's interactivity\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.dataset.interactive = `${isInteractive}`\n\t}, [isInteractive])\n\n\treturn (\n\t\t<div\n\t\t\tref={toolbarRef}\n\t\t\tdata-interactive={false}\n\t\t\tdata-visible={false}\n\t\t\tdata-testid=\"contextual-toolbar\"\n\t\t\tclassName={classNames('tlui-contextual-toolbar', className)}\n\t\t\tonPointerDown={stopEventPropagation}\n\t\t>\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" className=\"tlui-menu\" label={label}>\n\t\t\t\t{children}\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\n// For convenience, let's work just with boxes here\n/** @internal */\nexport function rectToBox(rect: DOMRect): Box {\n\treturn new Box(rect.x, rect.y, rect.width, rect.height)\n}\n\nexport function getToolbarScreenPosition(\n\teditor: Editor,\n\ttoolbarElm: HTMLElement,\n\tgetSelectionBounds: () => Box | undefined\n) {\n\tconst selectionBounds = getSelectionBounds()?.clone()\n\tif (!selectionBounds) return\n\n\t// Offset the selection bounds by the viewport screen bounds (if the editor is scrolled or inset, etc)\n\tconst vsb = editor.getViewportScreenBounds()\n\tselectionBounds.x -= vsb.x\n\tselectionBounds.y -= vsb.y\n\n\t// If the selection bounds are too far off of the screen, don't show the toolbar\n\tif (\n\t\tselectionBounds.midY < SCREEN_MARGIN ||\n\t\tselectionBounds.midY > vsb.h - SCREEN_MARGIN ||\n\t\tselectionBounds.midX < SCREEN_MARGIN ||\n\t\tselectionBounds.midX > vsb.w - SCREEN_MARGIN\n\t) {\n\t\treturn\n\t}\n\n\t// Get the toolbar's screen rect as a box. Do this after we verify that there is at least one selection.\n\tconst toolbarBounds = rectToBox(toolbarElm.getBoundingClientRect())\n\n\t// Chance these are NaN? Rare case.\n\tif (!toolbarBounds.width || !toolbarBounds.height) return\n\n\t// Thrashy, only do this if we're showing the toolbar\n\t// ! this might not be needed, the container never scrolls\n\tconst { scrollLeft, scrollTop } = editor.getContainer()\n\n\t// We want to position the toolbar so that it is centered over the selection\n\t// except in the cases where it would extend off the edge of the screen.\n\n\t// Start by placing the top left corner of the toolbar so that the\n\t// toolbar would be centered above the section bounds, bumped up by the\n\n\tlet x = LEFT_ALIGN_TOOLBAR ? selectionBounds.x : selectionBounds.midX - toolbarBounds.w / 2\n\tlet y = selectionBounds.y - toolbarBounds.h - TOOLBAR_GAP\n\n\t// Clamp the position on screen.\n\tx = clamp(x, SCREEN_MARGIN, vsb.w - toolbarBounds.w - SCREEN_MARGIN)\n\ty = clamp(y, SCREEN_MARGIN, vsb.h - toolbarBounds.h - SCREEN_MARGIN)\n\n\t// Offset the position by the container's scroll position\n\tx += scrollLeft\n\ty += scrollTop\n\n\t// Round the position to the nearest pixel\n\tx = Math.round(x)\n\ty = Math.round(y)\n\n\treturn { x, y }\n}\n\nfunction sufficientlyDistant(curr: Vec, next: Vec, changeOnlyWhenYChanges: boolean) {\n\tif (changeOnlyWhenYChanges) {\n\t\treturn Vec.Sub(next, curr).y ** 2 >= MIN_DISTANCE_TO_REPOSITION_SQUARED\n\t}\n\treturn Vec.Len2(Vec.Sub(next, curr)) >= MIN_DISTANCE_TO_REPOSITION_SQUARED\n}\n\nexport function useToolbarVisibilityStateMachine(changeOnlyWhenYChanges: boolean) {\n\tconst editor = useEditor()\n\n\tconst rState = useRef<\n\t\t{ name: 'hidden' } | { name: 'showing' } | { name: 'shown' } | { name: 'hiding' }\n\t>({ name: 'hidden' })\n\n\t// The toolbar should only be interactive when in the 'shown' state\n\tconst [isInteractive, setIsInteractive] = useState(false)\n\n\t// The toolbar is visible in the 'shown' and 'hiding' states\n\tconst [isVisible, setIsVisible] = useState(false)\n\n\t// The position is updated when entering the 'shown' state or when moving while in the 'shown' state\n\tconst [position, setPosition] = useState({ x: -1000, y: -1000 })\n\n\t// The toolbar's current position\n\tconst rCurrPosition = useRef(new Vec(-1000, -1000))\n\n\t// The toolbar's proposed next position\n\tconst rNextPosition = useRef(new Vec(-1000, -1000))\n\n\t// A timeout needs to be completed before the toolbar is shown or hidden\n\tconst rStableVisibilityTimeout = useRef<any>(-1)\n\n\t// A timeout needs to be completed before the toolbar's position changes moved\n\tconst rStablePositionTimeout = useRef<any>(-1)\n\n\t/**\n\t * Send the 'move' event whenever something happens that would cause the toolbar's position to change.\n\t * Any update here will cause\n\t * If the state is 'shown', it will start a new timeout that will update the toolbar's position after it completes.\n\t */\n\tconst move = useCallback(\n\t\t(x: number, y: number, immediate = false) => {\n\t\t\t// Update the next proposed position\n\t\t\trNextPosition.current.x = x\n\t\t\trNextPosition.current.y = y\n\n\t\t\t// If the toolbar is not yet visible, don't do anything\n\t\t\tif (rState.current.name === 'hidden' || rState.current.name === 'showing') return\n\n\t\t\t// If showing or hiding, cancel the position timeout and start a new one.\n\t\t\t// When the timeout ends, if we're in the 'shown' state and the position has changed sufficiently\n\t\t\t// from the last visible position, update the position.\n\t\t\tclearTimeout(rStablePositionTimeout.current)\n\n\t\t\tconst flushMove = () => {\n\t\t\t\tif (\n\t\t\t\t\trState.current.name === 'shown' &&\n\t\t\t\t\tsufficientlyDistant(rNextPosition.current, rCurrPosition.current, changeOnlyWhenYChanges)\n\t\t\t\t) {\n\t\t\t\t\tconst { x, y } = rNextPosition.current\n\t\t\t\t\trCurrPosition.current = new Vec(x, y)\n\t\t\t\t\tif (immediate) {\n\t\t\t\t\t\tflushSync(() => setPosition({ x, y }))\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetPosition({ x, y })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (immediate) {\n\t\t\t\tflushMove()\n\t\t\t} else {\n\t\t\t\trStablePositionTimeout.current = editor.timers.setTimeout(flushMove, MOVE_TIMEOUT)\n\t\t\t}\n\t\t},\n\t\t[editor, changeOnlyWhenYChanges]\n\t)\n\n\t/**\n\t * Send the hide event whenever a change occurs that would cause the toolbar to become invisible.\n\t * If the state is 'shown', it will enter 'hiding' and then 'hidden' after a timeout completes.\n\t * If the state is 'showing', it will cancel the visibility timeout and enter 'hidden' immediately.\n\t */\n\tconst hide = useCallback(\n\t\t(immediate = false) => {\n\t\t\tswitch (rState.current.name) {\n\t\t\t\tcase 'showing': {\n\t\t\t\t\tclearTimeout(rStableVisibilityTimeout.current)\n\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'shown': {\n\t\t\t\t\trState.current = { name: 'hiding' }\n\t\t\t\t\tsetIsInteractive(false) // when leaving shown, turn back on interactions\n\n\t\t\t\t\tif (immediate) {\n\t\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\t\tsetIsVisible(false)\n\t\t\t\t\t} else {\n\t\t\t\t\t\trStableVisibilityTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\t\t\tsetIsVisible(false)\n\t\t\t\t\t\t}, HIDE_VISIBILITY_TIMEOUT)\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\t// noop\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t/**\n\t * Send the show event whenever a change occurs that would cause the toolbar to become visible.\n\t * If the state is 'hidden', it will enter 'showing' and then 'shown' after a timeout completes.\n\t * If the state is 'hiding', it will cancel the visibility timeout and enter 'shown' immediately.\n\t */\n\tconst show = useCallback(() => {\n\t\tswitch (rState.current.name) {\n\t\t\tcase 'hidden': {\n\t\t\t\trState.current = { name: 'showing' }\n\t\t\t\trStableVisibilityTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t// position\n\t\t\t\t\tconst { x, y } = rNextPosition.current\n\t\t\t\t\trCurrPosition.current = new Vec(x, y)\n\t\t\t\t\tsetPosition({ x, y })\n\n\t\t\t\t\trState.current = { name: 'shown' }\n\t\t\t\t\tsetIsVisible(true)\n\t\t\t\t\tsetIsInteractive(true)\n\t\t\t\t}, SHOW_VISIBILITY_TIMEOUT)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'hiding': {\n\t\t\t\t// Go back to shown immediately\n\t\t\t\tclearTimeout(rStableVisibilityTimeout.current)\n\t\t\t\trState.current = { name: 'shown' }\n\t\t\t\tsetIsInteractive(true) // when entering shown, turn back on interactions\n\t\t\t\tmove(rNextPosition.current.x, rNextPosition.current.y)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\t// noop\n\t\t\t}\n\t\t}\n\t}, [editor, move])\n\n\treturn { isVisible, isInteractive, show, hide, move, position }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tassert,\n\tBox,\n\tclamp,\n\tEditor,\n\treact,\n\tstopEventPropagation,\n\tuseAtom,\n\tuseEditor,\n\tusePassThroughMouseOverEvents,\n\tusePassThroughWheelEvents,\n\tuseValue,\n\tVec,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport { TldrawUiToolbar } from './TldrawUiToolbar'\n\nconst MOVE_TIMEOUT = 150\nconst HIDE_VISIBILITY_TIMEOUT = 16\nconst SHOW_VISIBILITY_TIMEOUT = 16\nconst MIN_DISTANCE_TO_REPOSITION_SQUARED = 16 ** 2\nconst TOOLBAR_GAP = 8\nconst SCREEN_MARGIN = 16\nconst HIDE_TOOLBAR_WHEN_CAMERA_IS_MOVING = false\nconst LEFT_ALIGN_TOOLBAR = false\n\n/** @public */\nexport interface TLUiContextualToolbarProps {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tisMousingDown?: boolean\n\tgetSelectionBounds(): Box | undefined\n\tchangeOnlyWhenYChanges?: boolean\n\tlabel: string\n}\n\n/**\n * A generic floating toolbar that can be used for things\n * like rich text editing, image toolbars, etc.\n *\n * @public @react\n */\nexport const TldrawUiContextualToolbar = ({\n\tchildren,\n\tclassName,\n\tisMousingDown,\n\tgetSelectionBounds,\n\tchangeOnlyWhenYChanges = false,\n\tlabel,\n}: TLUiContextualToolbarProps) => {\n\tconst editor = useEditor()\n\tconst toolbarRef = useRef<HTMLDivElement>(null)\n\n\tusePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement>)\n\tusePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement>)\n\n\tconst { isVisible, isInteractive, hide, show, position, move } =\n\t\tuseToolbarVisibilityStateMachine(changeOnlyWhenYChanges)\n\n\t// annoying react stuff: we don't want the toolbar position function to depend on the react state so we'll double with a ref\n\tconst rCouldShowToolbar = useRef(false)\n\tconst [hasValidToolbarPosition, setHasValidToolbarPosition] = useState(false)\n\n\tconst contentSizeUpdateCounter = useAtom('content size update counter', 0)\n\n\tuseEffect(() => {\n\t\tassert(toolbarRef.current)\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tcontentSizeUpdateCounter.update((n) => n + 1)\n\t\t})\n\t\tobserver.observe(toolbarRef.current)\n\t\treturn () => observer.disconnect()\n\t}, [contentSizeUpdateCounter])\n\n\tuseEffect(() => {\n\t\tlet lastContentSizeUpdateCounter = contentSizeUpdateCounter.get()\n\t\treturn react('toolbar position', function updateToolbarPositionAndDisplay() {\n\t\t\tconst toolbarElm = toolbarRef.current\n\t\t\tif (!toolbarElm) return\n\n\t\t\tconst nextContentSizeUpdateCounter = contentSizeUpdateCounter.get()\n\n\t\t\t// capture / force this to update when...\n\t\t\teditor.getCamera() // the camera moves\n\t\t\tcontentSizeUpdateCounter.get() // the toolbar size changes\n\t\t\t// undefined here means that we can't show the toolbar due to an incompatible position\n\t\t\tconst position = getToolbarScreenPosition(editor, toolbarElm, getSelectionBounds)\n\n\t\t\t// todo: when the toolbar is hidden due to the selection being off screen, it should be hidden immediately\n\t\t\t// rather than waiting for the position to settle. This is different than when the position changes due to\n\t\t\t// a change in the user's selection.\n\t\t\tif (!position) {\n\t\t\t\tif (rCouldShowToolbar.current) {\n\t\t\t\t\t// If we don't have a position, then we're not showing the toolbar\n\t\t\t\t\trCouldShowToolbar.current = false\n\t\t\t\t\tsetHasValidToolbarPosition(false)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// If the camera state is moving, we want to immediately update the position\n\t\t\t\t// todo: consider hiding the toolbar while the camera is moving\n\t\t\t\tconst cameraState = editor.getCameraState()\n\t\t\t\tif (cameraState === 'moving') {\n\t\t\t\t\t// ...if we wanted this to avoid prematurely updating any positions, we'd need\n\t\t\t\t\t// to have the last updated position in page space, so that we could convert\n\t\t\t\t\t// it to screen space and update it here\n\t\t\t\t\tconst elm = toolbarRef.current\n\t\t\t\t\telm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)\n\t\t\t\t} else {\n\t\t\t\t\tconst moveImmediately = lastContentSizeUpdateCounter !== nextContentSizeUpdateCounter\n\t\t\t\t\t// Schedule a move to its next location\n\t\t\t\t\tmove(position.x, position.y, moveImmediately)\n\t\t\t\t}\n\n\t\t\t\t// Finally, if the toolbar was previously hidden, show it again\n\t\t\t\tif (!rCouldShowToolbar.current) {\n\t\t\t\t\trCouldShowToolbar.current = true\n\t\t\t\t\tsetHasValidToolbarPosition(true)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlastContentSizeUpdateCounter = nextContentSizeUpdateCounter\n\t\t})\n\t}, [editor, getSelectionBounds, contentSizeUpdateCounter, move])\n\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\t// Send the hide or show events based on whether the user is clicking\n\t// and whether the toolbar's position is valid\n\tuseEffect(() => {\n\t\tif (cameraState === 'moving' && HIDE_TOOLBAR_WHEN_CAMERA_IS_MOVING) {\n\t\t\thide(true)\n\t\t\treturn\n\t\t}\n\n\t\tif (isMousingDown || !hasValidToolbarPosition) {\n\t\t\thide()\n\t\t\treturn\n\t\t}\n\n\t\tshow()\n\t}, [hasValidToolbarPosition, cameraState, isMousingDown, show, hide])\n\n\t// When the visibility changes, update the toolbar's visibility\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.dataset.visible = `${isVisible}`\n\t}, [isVisible, position])\n\n\t// When the position changes, update the toolbar's position on screen\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)\n\t}, [position])\n\n\t// When the interactivity changes, update the toolbar's interactivity\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.dataset.interactive = `${isInteractive}`\n\t}, [isInteractive])\n\n\treturn (\n\t\t<div\n\t\t\tref={toolbarRef}\n\t\t\tdata-interactive={false}\n\t\t\tdata-visible={false}\n\t\t\tdata-testid=\"contextual-toolbar\"\n\t\t\tclassName={classNames('tlui-contextual-toolbar', className)}\n\t\t\tonPointerDown={stopEventPropagation}\n\t\t>\n\t\t\t<TldrawUiToolbar\n\t\t\t\torientation=\"horizontal\"\n\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\tlabel={label}\n\t\t\t\ttooltipSide=\"top\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\n// For convenience, let's work just with boxes here\n/** @internal */\nexport function rectToBox(rect: DOMRect): Box {\n\treturn new Box(rect.x, rect.y, rect.width, rect.height)\n}\n\nexport function getToolbarScreenPosition(\n\teditor: Editor,\n\ttoolbarElm: HTMLElement,\n\tgetSelectionBounds: () => Box | undefined\n) {\n\tconst selectionBounds = getSelectionBounds()?.clone()\n\tif (!selectionBounds) return\n\n\t// Offset the selection bounds by the viewport screen bounds (if the editor is scrolled or inset, etc)\n\tconst vsb = editor.getViewportScreenBounds()\n\tselectionBounds.x -= vsb.x\n\tselectionBounds.y -= vsb.y\n\n\t// If the selection bounds are too far off of the screen, don't show the toolbar\n\tif (\n\t\tselectionBounds.midY < SCREEN_MARGIN ||\n\t\tselectionBounds.midY > vsb.h - SCREEN_MARGIN ||\n\t\tselectionBounds.midX < SCREEN_MARGIN ||\n\t\tselectionBounds.midX > vsb.w - SCREEN_MARGIN\n\t) {\n\t\treturn\n\t}\n\n\t// Get the toolbar's screen rect as a box. Do this after we verify that there is at least one selection.\n\tconst toolbarBounds = rectToBox(toolbarElm.getBoundingClientRect())\n\n\t// Chance these are NaN? Rare case.\n\tif (!toolbarBounds.width || !toolbarBounds.height) return\n\n\t// Thrashy, only do this if we're showing the toolbar\n\t// ! this might not be needed, the container never scrolls\n\tconst { scrollLeft, scrollTop } = editor.getContainer()\n\n\t// We want to position the toolbar so that it is centered over the selection\n\t// except in the cases where it would extend off the edge of the screen.\n\n\t// Start by placing the top left corner of the toolbar so that the\n\t// toolbar would be centered above the section bounds, bumped up by the\n\n\tlet x = LEFT_ALIGN_TOOLBAR ? selectionBounds.x : selectionBounds.midX - toolbarBounds.w / 2\n\tlet y = selectionBounds.y - toolbarBounds.h - TOOLBAR_GAP\n\n\t// Clamp the position on screen.\n\tx = clamp(x, SCREEN_MARGIN, vsb.w - toolbarBounds.w - SCREEN_MARGIN)\n\ty = clamp(y, SCREEN_MARGIN, vsb.h - toolbarBounds.h - SCREEN_MARGIN)\n\n\t// Offset the position by the container's scroll position\n\tx += scrollLeft\n\ty += scrollTop\n\n\t// Round the position to the nearest pixel\n\tx = Math.round(x)\n\ty = Math.round(y)\n\n\treturn { x, y }\n}\n\nfunction sufficientlyDistant(curr: Vec, next: Vec, changeOnlyWhenYChanges: boolean) {\n\tif (changeOnlyWhenYChanges) {\n\t\treturn Vec.Sub(next, curr).y ** 2 >= MIN_DISTANCE_TO_REPOSITION_SQUARED\n\t}\n\treturn Vec.Len2(Vec.Sub(next, curr)) >= MIN_DISTANCE_TO_REPOSITION_SQUARED\n}\n\nexport function useToolbarVisibilityStateMachine(changeOnlyWhenYChanges: boolean) {\n\tconst editor = useEditor()\n\n\tconst rState = useRef<\n\t\t{ name: 'hidden' } | { name: 'showing' } | { name: 'shown' } | { name: 'hiding' }\n\t>({ name: 'hidden' })\n\n\t// The toolbar should only be interactive when in the 'shown' state\n\tconst [isInteractive, setIsInteractive] = useState(false)\n\n\t// The toolbar is visible in the 'shown' and 'hiding' states\n\tconst [isVisible, setIsVisible] = useState(false)\n\n\t// The position is updated when entering the 'shown' state or when moving while in the 'shown' state\n\tconst [position, setPosition] = useState({ x: -1000, y: -1000 })\n\n\t// The toolbar's current position\n\tconst rCurrPosition = useRef(new Vec(-1000, -1000))\n\n\t// The toolbar's proposed next position\n\tconst rNextPosition = useRef(new Vec(-1000, -1000))\n\n\t// A timeout needs to be completed before the toolbar is shown or hidden\n\tconst rStableVisibilityTimeout = useRef<any>(-1)\n\n\t// A timeout needs to be completed before the toolbar's position changes moved\n\tconst rStablePositionTimeout = useRef<any>(-1)\n\n\t/**\n\t * Send the 'move' event whenever something happens that would cause the toolbar's position to change.\n\t * Any update here will cause\n\t * If the state is 'shown', it will start a new timeout that will update the toolbar's position after it completes.\n\t */\n\tconst move = useCallback(\n\t\t(x: number, y: number, immediate = false) => {\n\t\t\t// Update the next proposed position\n\t\t\trNextPosition.current.x = x\n\t\t\trNextPosition.current.y = y\n\n\t\t\t// If the toolbar is not yet visible, don't do anything\n\t\t\tif (rState.current.name === 'hidden' || rState.current.name === 'showing') return\n\n\t\t\t// If showing or hiding, cancel the position timeout and start a new one.\n\t\t\t// When the timeout ends, if we're in the 'shown' state and the position has changed sufficiently\n\t\t\t// from the last visible position, update the position.\n\t\t\tclearTimeout(rStablePositionTimeout.current)\n\n\t\t\tconst flushMove = () => {\n\t\t\t\tif (\n\t\t\t\t\trState.current.name === 'shown' &&\n\t\t\t\t\tsufficientlyDistant(rNextPosition.current, rCurrPosition.current, changeOnlyWhenYChanges)\n\t\t\t\t) {\n\t\t\t\t\tconst { x, y } = rNextPosition.current\n\t\t\t\t\trCurrPosition.current = new Vec(x, y)\n\t\t\t\t\tif (immediate) {\n\t\t\t\t\t\tflushSync(() => setPosition({ x, y }))\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetPosition({ x, y })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (immediate) {\n\t\t\t\tflushMove()\n\t\t\t} else {\n\t\t\t\trStablePositionTimeout.current = editor.timers.setTimeout(flushMove, MOVE_TIMEOUT)\n\t\t\t}\n\t\t},\n\t\t[editor, changeOnlyWhenYChanges]\n\t)\n\n\t/**\n\t * Send the hide event whenever a change occurs that would cause the toolbar to become invisible.\n\t * If the state is 'shown', it will enter 'hiding' and then 'hidden' after a timeout completes.\n\t * If the state is 'showing', it will cancel the visibility timeout and enter 'hidden' immediately.\n\t */\n\tconst hide = useCallback(\n\t\t(immediate = false) => {\n\t\t\tswitch (rState.current.name) {\n\t\t\t\tcase 'showing': {\n\t\t\t\t\tclearTimeout(rStableVisibilityTimeout.current)\n\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'shown': {\n\t\t\t\t\trState.current = { name: 'hiding' }\n\t\t\t\t\tsetIsInteractive(false) // when leaving shown, turn back on interactions\n\n\t\t\t\t\tif (immediate) {\n\t\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\t\tsetIsVisible(false)\n\t\t\t\t\t} else {\n\t\t\t\t\t\trStableVisibilityTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\t\t\tsetIsVisible(false)\n\t\t\t\t\t\t}, HIDE_VISIBILITY_TIMEOUT)\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\t// noop\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t/**\n\t * Send the show event whenever a change occurs that would cause the toolbar to become visible.\n\t * If the state is 'hidden', it will enter 'showing' and then 'shown' after a timeout completes.\n\t * If the state is 'hiding', it will cancel the visibility timeout and enter 'shown' immediately.\n\t */\n\tconst show = useCallback(() => {\n\t\tswitch (rState.current.name) {\n\t\t\tcase 'hidden': {\n\t\t\t\trState.current = { name: 'showing' }\n\t\t\t\trStableVisibilityTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t// position\n\t\t\t\t\tconst { x, y } = rNextPosition.current\n\t\t\t\t\trCurrPosition.current = new Vec(x, y)\n\t\t\t\t\tsetPosition({ x, y })\n\n\t\t\t\t\trState.current = { name: 'shown' }\n\t\t\t\t\tsetIsVisible(true)\n\t\t\t\t\tsetIsInteractive(true)\n\t\t\t\t}, SHOW_VISIBILITY_TIMEOUT)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'hiding': {\n\t\t\t\t// Go back to shown immediately\n\t\t\t\tclearTimeout(rStableVisibilityTimeout.current)\n\t\t\t\trState.current = { name: 'shown' }\n\t\t\t\tsetIsInteractive(true) // when entering shown, turn back on interactions\n\t\t\t\tmove(rNextPosition.current.x, rNextPosition.current.y)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\t// noop\n\t\t\t}\n\t\t}\n\t}, [editor, move])\n\n\treturn { isVisible, isInteractive, show, hide, move, position }\n}\n"],
+  "mappings": "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",
   "names": ["position", "cameraState", "classNames", "x", "y"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js CHANGED Viewed

@@ -32,9 +32,11 @@ __export(TldrawUiSlider_exports, {
 });
 module.exports = __toCommonJS(TldrawUiSlider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@tldraw/editor");
 var import_radix_ui = require("radix-ui");
 var import_react = __toESM(require("react"));
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_TldrawUiTooltip = require("./TldrawUiTooltip");
 const TldrawUiSlider = import_react.default.forwardRef(function Slider({
   onHistoryMark,
   title,
@@ -47,6 +49,7 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
   ariaValueModifier = 1
 }, ref) {
   const msg = (0, import_useTranslation.useTranslation)();
+  const [titleAndLabel, setTitleAndLabel] = (0, import_react.useState)("");
   const [tabIndex, setTabIndex] = (0, import_react.useState)(-1);
   (0, import_react.useEffect)(() => {
     setTabIndex(0);
@@ -58,14 +61,25 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
     [onValueChange]
   );
   const handlePointerDown = (0, import_react.useCallback)(() => {
+    import_TldrawUiTooltip.tooltipManager.hideAllTooltips();
     onHistoryMark("click slider");
   }, [onHistoryMark]);
+  (0, import_react.useEffect)(() => {
+    const timeout = import_editor.tltime.setTimeout(
+      "set title and label",
+      () => {
+        setTitleAndLabel(title + " \u2014 " + msg(label));
+      },
+      0
+    );
+    return () => clearTimeout(timeout);
+  }, [label, msg, title]);
   const handleKeyEvent = (0, import_react.useCallback)((event) => {
     if (event.key === "Tab") {
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiTooltip.TldrawUiTooltip, { content: titleAndLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_radix_ui.Slider.Root,
     {
       "data-testid": testId,
@@ -79,7 +93,6 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
       onValueChange: handleValueChange,
       onKeyDownCapture: handleKeyEvent,
       onKeyUpCapture: handleKeyEvent,
-      title: title + " \u2014 " + msg(label),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slider.Track, { className: "tlui-slider__track", dir: "ltr", children: value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slider.Range, { className: "tlui-slider__range", dir: "ltr" }) }),
         value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -88,7 +101,7 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
             "aria-valuemin": (min ?? 0) * ariaValueModifier,
             "aria-valuenow": value * ariaValueModifier,
             "aria-valuemax": steps * ariaValueModifier,
-            "aria-label": title + " \u2014 " + msg(label),
+            "aria-label": titleAndLabel,
             className: "tlui-slider__thumb",
             dir: "ltr",
             ref,
@@ -97,6 +110,6 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
         )
       ]
     }
-  ) });
+  ) }) });
 });
 //# sourceMappingURL=TldrawUiSlider.js.map

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"],
-  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\taria-label={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkEG;AAlEH,sBAAkC;AAClC,mBAAwD;AAExD,4BAA+B;AAgBxB,MAAM,iBAAiB,aAAAA,QAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,UAAM,sCAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,8BAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,qBAAiB,0BAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,4CAAC,SAAI,WAAU,0BACd;AAAA,IAAC,gBAAAC,OAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,oDAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,4CAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,gBAAAA,OAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY,QAAQ,aAAQ,IAAI,KAA2B;AAAA,YAC3D,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { tltime } from '@tldraw/editor'\nimport { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\tconst [titleAndLabel, setTitleAndLabel] = useState('')\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\ttooltipManager.hideAllTooltips()\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. This is a bit silly. The Radix slider auto-focuses which\n\t// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,\n\t// which in turn makes the tooltip display prematurely.\n\t// This makes it wait until we've focused to show the tooltip.\n\tuseEffect(() => {\n\t\tconst timeout = tltime.setTimeout(\n\t\t\t'set title and label',\n\t\t\t() => {\n\t\t\t\tsetTitleAndLabel(title + ' \u2014 ' + msg(label as TLUiTranslationKey))\n\t\t\t},\n\t\t\t0\n\t\t)\n\t\treturn () => clearTimeout(timeout)\n\t}, [label, msg, title])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<TldrawUiTooltip content={titleAndLabel}>\n\t\t\t\t<_Slider.Root\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tmin={min ?? 0}\n\t\t\t\t\tmax={steps}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\t>\n\t\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t\t</_Slider.Track>\n\t\t\t\t\t{value !== null && (\n\t\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\t\taria-label={titleAndLabel}\n\t\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</_Slider.Root>\n\t\t\t</TldrawUiTooltip>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsFI;AAtFJ,oBAAuB;AACvB,sBAAkC;AAClC,mBAAwD;AAExD,4BAA+B;AAC/B,6BAAgD;AAgBzC,MAAM,iBAAiB,aAAAA,QAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,UAAM,sCAAe;AAC3B,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,EAAE;AAKrD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,8BAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,0CAAe,gBAAgB;AAC/B,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,8BAAU,MAAM;AACf,UAAM,UAAU,qBAAO;AAAA,MACtB;AAAA,MACA,MAAM;AACL,yBAAiB,QAAQ,aAAQ,IAAI,KAA2B,CAAC;AAAA,MAClE;AAAA,MACA;AAAA,IACD;AACA,WAAO,MAAM,aAAa,OAAO;AAAA,EAClC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC;AAMtB,QAAM,qBAAiB,0BAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,4CAAC,SAAI,WAAU,0BACd,sDAAC,0CAAgB,SAAS,eACzB;AAAA,IAAC,gBAAAC,OAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAEhB;AAAA,oDAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,4CAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,gBAAAA,OAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY;AAAA,YACZ,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD,GACD;AAEF,CAAC;",
   "names": ["React", "value", "_Slider"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js CHANGED Viewed

@@ -184,6 +184,7 @@ const TldrawUiTooltip = (0, import_react.forwardRef)(
     const hasProvider = (0, import_react.useContext)(TooltipSingletonContext);
     const orientationCtx = (0, import_layout.useTldrawUiOrientation)();
     const sideToUse = side ?? orientationCtx.tooltipSide;
+    const camera = (0, import_editor.useValue)("camera", () => editor?.getCamera(), []);
     (0, import_react.useEffect)(() => {
       const currentTooltipId = tooltipId.current;
       return () => {
@@ -192,6 +193,9 @@ const TldrawUiTooltip = (0, import_react.forwardRef)(
         }
       };
     }, [editor, hasProvider]);
+    (0, import_react.useEffect)(() => {
+      tooltipManager.hideTooltip(editor, tooltipId.current, true);
+    }, [editor, camera]);
     if (disabled || !content) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
     }

package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
-  "sourcesContent": ["import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, {\n\tcreateContext,\n\tforwardRef,\n\tReactNode,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTldrawUiOrientation } from './layout'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n\tshowOnMobile?: boolean\n\tdelayDuration?: number\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltip = atom<{\n\t\tid: string\n\t\tcontent: ReactNode\n\t\tside: 'top' | 'right' | 'bottom' | 'left'\n\t\tsideOffset: number\n\t\tshowOnMobile: boolean\n\t\ttargetElement: HTMLElement\n\t\tdelayDuration: number\n\t} | null>('current tooltip', null)\n\tprivate destroyTimeoutId: number | null = null\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\ttargetElement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left',\n\t\tsideOffset: number,\n\t\tshowOnMobile: boolean,\n\t\tdelayDuration: number\n\t) {\n\t\t// Clear any existing destroy timeout\n\t\tif (this.destroyTimeoutId) {\n\t\t\tclearTimeout(this.destroyTimeoutId)\n\t\t\tthis.destroyTimeoutId = null\n\t\t}\n\n\t\t// Update current tooltip\n\t\tthis.currentTooltip.set({\n\t\t\tid: tooltipId,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset,\n\t\t\tshowOnMobile,\n\t\t\ttargetElement,\n\t\t\tdelayDuration,\n\t\t})\n\t}\n\n\thideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {\n\t\tconst hide = () => {\n\t\t\t// Only hide if this is the current tooltip\n\t\t\tif (this.currentTooltip.get()?.id === tooltipId) {\n\t\t\t\tthis.currentTooltip.set(null)\n\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t}\n\t\t}\n\n\t\tif (editor && !instant) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tthis.destroyTimeoutId = editor.timers.setTimeout(hide, 300)\n\t\t} else {\n\t\t\thide()\n\t\t}\n\t}\n\n\thideAllTooltips() {\n\t\tthis.currentTooltip.set(null)\n\t\tthis.destroyTimeoutId = null\n\t}\n\n\tgetCurrentTooltipData() {\n\t\tconst currentTooltip = this.currentTooltip.get()\n\t\tif (!currentTooltip) return null\n\t\tif (!this.supportsHover() && !currentTooltip.showOnMobile) return null\n\t\treturn currentTooltip\n\t}\n\n\tprivate supportsHoverAtom: Atom<boolean> | null = null\n\tsupportsHover() {\n\t\tif (!this.supportsHoverAtom) {\n\t\t\tconst mediaQuery = window.matchMedia('(hover: hover)')\n\t\t\tconst supportsHover = atom('has hover', mediaQuery.matches)\n\t\t\tthis.supportsHoverAtom = supportsHover\n\t\t\tmediaQuery.addEventListener('change', (e) => {\n\t\t\t\tsupportsHover.set(e.matches)\n\t\t\t})\n\t\t}\n\t\treturn this.supportsHoverAtom.get()\n\t}\n}\n\nexport const tooltipManager = TooltipManager.getInstance()\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\n\n\tconst currentTooltip = useValue(\n\t\t'current tooltip',\n\t\t() => tooltipManager.getCurrentTooltipData(),\n\t\t[]\n\t)\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout> | null = null\n\t\tif (currentTooltip && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = currentTooltip.targetElement.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current) {\n\t\t\t\t// eslint-disable-next-line no-restricted-globals\n\t\t\t\ttimer = setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, currentTooltip.delayDuration)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (timer !== null) {\n\t\t\t\tclearTimeout(timer)\n\t\t\t}\n\t\t}\n\t}, [currentTooltip])\n\n\tif (!currentTooltip) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tside={currentTooltip.side}\n\t\t\t\tsideOffset={currentTooltip.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{currentTooltip.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset = 5,\n\t\t\tdisabled = false,\n\t\t\tshowOnMobile = false,\n\t\t\tdelayDuration,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst editor = useMaybeEditor()\n\t\tconst tooltipId = useRef<string>(uniqueId())\n\t\tconst hasProvider = useContext(TooltipSingletonContext)\n\n\t\tconst orientationCtx = useTldrawUiOrientation()\n\t\tconst sideToUse = side ?? orientationCtx.tooltipSide\n\n\t\tuseEffect(() => {\n\t\t\tconst currentTooltipId = tooltipId.current\n\t\t\treturn () => {\n\t\t\t\tif (hasProvider) {\n\t\t\t\t\ttooltipManager.hideTooltip(editor, currentTooltipId, true)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [editor, hasProvider])\n\n\t\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tconst delayDurationToUse =\n\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\n\n\t\t// Fallback to old behavior if no provider\n\t\tif (!hasProvider) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>\n\t\t\t\t\t<_Tooltip.Trigger asChild ref={ref}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</_Tooltip.Trigger>\n\t\t\t\t\t<_Tooltip.Content\n\t\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\t\tside={sideToUse}\n\t\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t\t</_Tooltip.Content>\n\t\t\t\t</_Tooltip.Root>\n\t\t\t)\n\t\t}\n\n\t\tconst child = React.Children.only(children)\n\t\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDurationToUse\n\t\t\t)\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onFocus?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDurationToUse\n\t\t\t)\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onBlur?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\t\tonMouseEnter: handleMouseEnter,\n\t\t\tonMouseLeave: handleMouseLeave,\n\t\t\tonFocus: handleFocus,\n\t\t\tonBlur: handleBlur,\n\t\t})\n\n\t\treturn childrenWithHandlers\n\t}\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, {\n\tcreateContext,\n\tforwardRef,\n\tReactNode,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTldrawUiOrientation } from './layout'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n\tshowOnMobile?: boolean\n\tdelayDuration?: number\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltip = atom<{\n\t\tid: string\n\t\tcontent: ReactNode\n\t\tside: 'top' | 'right' | 'bottom' | 'left'\n\t\tsideOffset: number\n\t\tshowOnMobile: boolean\n\t\ttargetElement: HTMLElement\n\t\tdelayDuration: number\n\t} | null>('current tooltip', null)\n\tprivate destroyTimeoutId: number | null = null\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\ttargetElement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left',\n\t\tsideOffset: number,\n\t\tshowOnMobile: boolean,\n\t\tdelayDuration: number\n\t) {\n\t\t// Clear any existing destroy timeout\n\t\tif (this.destroyTimeoutId) {\n\t\t\tclearTimeout(this.destroyTimeoutId)\n\t\t\tthis.destroyTimeoutId = null\n\t\t}\n\n\t\t// Update current tooltip\n\t\tthis.currentTooltip.set({\n\t\t\tid: tooltipId,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset,\n\t\t\tshowOnMobile,\n\t\t\ttargetElement,\n\t\t\tdelayDuration,\n\t\t})\n\t}\n\n\thideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {\n\t\tconst hide = () => {\n\t\t\t// Only hide if this is the current tooltip\n\t\t\tif (this.currentTooltip.get()?.id === tooltipId) {\n\t\t\t\tthis.currentTooltip.set(null)\n\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t}\n\t\t}\n\n\t\tif (editor && !instant) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tthis.destroyTimeoutId = editor.timers.setTimeout(hide, 300)\n\t\t} else {\n\t\t\thide()\n\t\t}\n\t}\n\n\thideAllTooltips() {\n\t\tthis.currentTooltip.set(null)\n\t\tthis.destroyTimeoutId = null\n\t}\n\n\tgetCurrentTooltipData() {\n\t\tconst currentTooltip = this.currentTooltip.get()\n\t\tif (!currentTooltip) return null\n\t\tif (!this.supportsHover() && !currentTooltip.showOnMobile) return null\n\t\treturn currentTooltip\n\t}\n\n\tprivate supportsHoverAtom: Atom<boolean> | null = null\n\tsupportsHover() {\n\t\tif (!this.supportsHoverAtom) {\n\t\t\tconst mediaQuery = window.matchMedia('(hover: hover)')\n\t\t\tconst supportsHover = atom('has hover', mediaQuery.matches)\n\t\t\tthis.supportsHoverAtom = supportsHover\n\t\t\tmediaQuery.addEventListener('change', (e) => {\n\t\t\t\tsupportsHover.set(e.matches)\n\t\t\t})\n\t\t}\n\t\treturn this.supportsHoverAtom.get()\n\t}\n}\n\nexport const tooltipManager = TooltipManager.getInstance()\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\n\n\tconst currentTooltip = useValue(\n\t\t'current tooltip',\n\t\t() => tooltipManager.getCurrentTooltipData(),\n\t\t[]\n\t)\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout> | null = null\n\t\tif (currentTooltip && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = currentTooltip.targetElement.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current) {\n\t\t\t\t// eslint-disable-next-line no-restricted-globals\n\t\t\t\ttimer = setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, currentTooltip.delayDuration)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (timer !== null) {\n\t\t\t\tclearTimeout(timer)\n\t\t\t}\n\t\t}\n\t}, [currentTooltip])\n\n\tif (!currentTooltip) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tside={currentTooltip.side}\n\t\t\t\tsideOffset={currentTooltip.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{currentTooltip.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset = 5,\n\t\t\tdisabled = false,\n\t\t\tshowOnMobile = false,\n\t\t\tdelayDuration,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst editor = useMaybeEditor()\n\t\tconst tooltipId = useRef<string>(uniqueId())\n\t\tconst hasProvider = useContext(TooltipSingletonContext)\n\n\t\tconst orientationCtx = useTldrawUiOrientation()\n\t\tconst sideToUse = side ?? orientationCtx.tooltipSide\n\n\t\tconst camera = useValue('camera', () => editor?.getCamera(), [])\n\n\t\tuseEffect(() => {\n\t\t\tconst currentTooltipId = tooltipId.current\n\t\t\treturn () => {\n\t\t\t\tif (hasProvider) {\n\t\t\t\t\ttooltipManager.hideTooltip(editor, currentTooltipId, true)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [editor, hasProvider])\n\n\t\tuseEffect(() => {\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current, true)\n\t\t}, [editor, camera])\n\n\t\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tconst delayDurationToUse =\n\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\n\n\t\t// Fallback to old behavior if no provider\n\t\tif (!hasProvider) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>\n\t\t\t\t\t<_Tooltip.Trigger asChild ref={ref}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</_Tooltip.Trigger>\n\t\t\t\t\t<_Tooltip.Content\n\t\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\t\tside={sideToUse}\n\t\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t\t</_Tooltip.Content>\n\t\t\t\t</_Tooltip.Root>\n\t\t\t)\n\t\t}\n\n\t\tconst child = React.Children.only(children)\n\t\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDurationToUse\n\t\t\t)\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onFocus?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDurationToUse\n\t\t\t)\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onBlur?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\t\tonMouseEnter: handleMouseEnter,\n\t\t\tonMouseLeave: handleMouseLeave,\n\t\t\tonFocus: handleFocus,\n\t\t\tonBlur: handleBlur,\n\t\t})\n\n\t\treturn childrenWithHandlers\n\t}\n)\n"],
+  "mappings": "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",
   "names": ["_Tooltip", "React"]
 }

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

@@ -31,6 +31,7 @@ var import_DefaultContextMenu = require("../components/ContextMenu/DefaultContex
 var import_CursorChatBubble = require("../components/CursorChatBubble");
 var import_DefaultDebugMenu = require("../components/DebugMenu/DefaultDebugMenu");
 var import_DefaultDebugPanel = require("../components/DefaultDebugPanel");
+var import_DefaultFollowingIndicator = require("../components/DefaultFollowingIndicator");
 var import_DefaultMenuPanel = require("../components/DefaultMenuPanel");
 var import_Dialogs = require("../components/Dialogs");
 var import_DefaultHelperButtons = require("../components/HelperButtons/DefaultHelperButtons");
@@ -87,6 +88,7 @@ function TldrawUiComponentsProvider({
           Dialogs: import_Dialogs.DefaultDialogs,
           Toasts: import_Toasts.DefaultToasts,
           A11y: import_A11y.DefaultA11yAnnouncer,
+          FollowingIndicator: import_DefaultFollowingIndicator.DefaultFollowingIndicator,
           ..._overrides
         }),
         [_overrides, showCollaborationUi]