tldraw 3.16.0-canary.b802b60e813f → 3.16.0-canary.bcde131f3274
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +11 -2
- package/dist-cjs/index.js +4 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/Tldraw.js +12 -2
- package/dist-cjs/lib/Tldraw.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +3 -0
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -0
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
- package/dist-cjs/lib/ui/TldrawUi.js +13 -12
- package/dist-cjs/lib/ui/TldrawUi.js.map +2 -2
- package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
- package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +5 -5
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
- package/dist-cjs/lib/ui/context/components.js +2 -0
- package/dist-cjs/lib/ui/context/components.js.map +2 -2
- package/dist-cjs/lib/ui/context/events.js.map +1 -1
- package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +1 -0
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
- package/dist-cjs/lib/ui/kbd-utils.js +9 -3
- package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-esm/index.d.mts +11 -2
- package/dist-esm/index.mjs +5 -2
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/Tldraw.mjs +14 -4
- package/dist-esm/lib/Tldraw.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +3 -0
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -0
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/ui/TldrawUi.mjs +13 -12
- package/dist-esm/lib/ui/TldrawUi.mjs.map +2 -2
- package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
- package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +5 -5
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
- package/dist-esm/lib/ui/context/components.mjs +2 -0
- package/dist-esm/lib/ui/context/components.mjs.map +2 -2
- package/dist-esm/lib/ui/context/events.mjs.map +1 -1
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +1 -0
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
- package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
- package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +2 -1
- package/src/lib/Tldraw.tsx +15 -2
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +4 -0
- package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -0
- package/src/lib/ui/TldrawUi.tsx +16 -10
- package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
- package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +5 -5
- package/src/lib/ui/context/components.tsx +3 -0
- package/src/lib/ui/context/events.tsx +1 -1
- package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +1 -0
- package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +1 -0
- package/src/lib/ui/kbd-utils.ts +10 -3
- package/src/lib/ui/version.ts +3 -3
- package/tldraw.css +8 -0
- package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
- package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/shapes/image/ImageShapeUtil.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tEditor,\n\tEllipse2d,\n\tFileHelpers,\n\tGeometry2d,\n\tHTMLContainer,\n\tImage,\n\tMediaHelpers,\n\tRectangle2d,\n\tSvgExportContext,\n\tTLAsset,\n\tTLAssetId,\n\tTLImageShape,\n\tTLImageShapeProps,\n\tTLResizeInfo,\n\tTLShapePartial,\n\tVec,\n\tWeakCache,\n\tfetch,\n\timageShapeMigrations,\n\timageShapeProps,\n\tlerp,\n\tmodulate,\n\tresizeBox,\n\tstructuredClone,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseUniqueSafeId,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { memo, useEffect, useState } from 'react'\nimport { BrokenAssetIcon } from '../shared/BrokenAssetIcon'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { getUncroppedSize } from '../shared/crop'\nimport { useImageOrVideoAsset } from '../shared/useImageOrVideoAsset'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nasync function getDataURIFromURL(url: string): Promise<string> {\n\tconst response = await fetch(url)\n\tconst blob = await response.blob()\n\treturn FileHelpers.blobToDataUrl(blob)\n}\n\nconst imageSvgExportCache = new WeakCache<TLAsset, Promise<string | null>>()\n\n/** @public */\nexport class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {\n\tstatic override type = 'image' as const\n\tstatic override props = imageShapeProps\n\tstatic override migrations = imageShapeMigrations\n\n\toverride isAspectRatioLocked() {\n\t\treturn true\n\t}\n\toverride canCrop() {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLImageShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tplaying: true,\n\t\t\turl: '',\n\t\t\tcrop: null,\n\t\t\tflipX: false,\n\t\t\tflipY: false,\n\t\t\taltText: '',\n\t\t}\n\t}\n\n\toverride getGeometry(shape: TLImageShape): Geometry2d {\n\t\tif (shape.props.crop?.isCircle) {\n\t\t\treturn new Ellipse2d({\n\t\t\t\twidth: shape.props.w,\n\t\t\t\theight: shape.props.h,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\toverride getAriaDescriptor(shape: TLImageShape) {\n\t\treturn shape.props.altText\n\t}\n\n\toverride onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>) {\n\t\tlet resized: TLImageShape = resizeBox(shape, info)\n\t\tconst { flipX, flipY } = info.initialShape.props\n\t\tconst { scaleX, scaleY, mode } = info\n\n\t\tresized = {\n\t\t\t...resized,\n\t\t\tprops: {\n\t\t\t\t...resized.props,\n\t\t\t\tflipX: scaleX < 0 !== flipX,\n\t\t\t\tflipY: scaleY < 0 !== flipY,\n\t\t\t},\n\t\t}\n\t\tif (!shape.props.crop) return resized\n\n\t\tconst flipCropHorizontally =\n\t\t\t// We used the flip horizontally feature\n\t\t\t(mode === 'scale_shape' && scaleX === -1) ||\n\t\t\t// We resized the shape past it's bounds, so it flipped\n\t\t\t(mode === 'resize_bounds' && flipX !== resized.props.flipX)\n\t\tconst flipCropVertically =\n\t\t\t// We used the flip vertically feature\n\t\t\t(mode === 'scale_shape' && scaleY === -1) ||\n\t\t\t// We resized the shape past it's bounds, so it flipped\n\t\t\t(mode === 'resize_bounds' && flipY !== resized.props.flipY)\n\n\t\tconst { topLeft, bottomRight } = shape.props.crop\n\t\tresized.props.crop = {\n\t\t\ttopLeft: {\n\t\t\t\tx: flipCropHorizontally ? 1 - bottomRight.x : topLeft.x,\n\t\t\t\ty: flipCropVertically ? 1 - bottomRight.y : topLeft.y,\n\t\t\t},\n\t\t\tbottomRight: {\n\t\t\t\tx: flipCropHorizontally ? 1 - topLeft.x : bottomRight.x,\n\t\t\t\ty: flipCropVertically ? 1 - topLeft.y : bottomRight.y,\n\t\t\t},\n\t\t\tisCircle: shape.props.crop.isCircle,\n\t\t}\n\t\treturn resized\n\t}\n\n\tcomponent(shape: TLImageShape) {\n\t\treturn <ImageShape shape={shape} />\n\t}\n\n\tindicator(shape: TLImageShape) {\n\t\tconst isCropping = this.editor.getCroppingShapeId() === shape.id\n\t\tif (isCropping) return null\n\n\t\tif (shape.props.crop?.isCircle) {\n\t\t\treturn (\n\t\t\t\t<ellipse\n\t\t\t\t\tcx={toDomPrecision(shape.props.w / 2)}\n\t\t\t\t\tcy={toDomPrecision(shape.props.h / 2)}\n\t\t\t\t\trx={toDomPrecision(shape.props.w / 2)}\n\t\t\t\t\try={toDomPrecision(shape.props.h / 2)}\n\t\t\t\t/>\n\t\t\t)\n\t\t}\n\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLImageShape, ctx: SvgExportContext) {\n\t\tconst props = shape.props\n\t\tif (!props.assetId) return null\n\n\t\tconst asset = this.editor.getAsset(props.assetId)\n\n\t\tif (!asset) return null\n\n\t\tconst { w } = getUncroppedSize(shape.props, props.crop)\n\n\t\tconst src = await imageSvgExportCache.get(asset, async () => {\n\t\t\tlet src = await ctx.resolveAssetUrl(asset.id, w)\n\t\t\tif (!src) return null\n\t\t\tif (\n\t\t\t\tsrc.startsWith('blob:') ||\n\t\t\t\tsrc.startsWith('http') ||\n\t\t\t\tsrc.startsWith('/') ||\n\t\t\t\tsrc.startsWith('./')\n\t\t\t) {\n\t\t\t\t// If it's a remote image, we need to fetch it and convert it to a data URI\n\t\t\t\tsrc = (await getDataURIFromURL(src)) || ''\n\t\t\t}\n\n\t\t\t// If it's animated then we need to get the first frame\n\t\t\tif (getIsAnimated(this.editor, asset.id)) {\n\t\t\t\tconst { promise } = getFirstFrameOfAnimatedImage(src)\n\t\t\t\tsrc = await promise\n\t\t\t}\n\t\t\treturn src\n\t\t})\n\n\t\tif (!src) return null\n\n\t\treturn <SvgImage shape={shape} src={src} />\n\t}\n\n\toverride onDoubleClickEdge(shape: TLImageShape) {\n\t\tconst props = shape.props\n\t\tif (!props) return\n\n\t\tif (this.editor.getCroppingShapeId() !== shape.id) {\n\t\t\treturn\n\t\t}\n\n\t\tconst crop = structuredClone(props.crop) || {\n\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t}\n\n\t\t// The true asset dimensions\n\t\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\n\t\tconst pointDelta = new Vec(crop.topLeft.x * w, crop.topLeft.y * h).rot(shape.rotation)\n\n\t\tconst partial: TLShapePartial<TLImageShape> = {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tx: shape.x - pointDelta.x,\n\t\t\ty: shape.y - pointDelta.y,\n\t\t\tprops: {\n\t\t\t\tcrop: {\n\t\t\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t\t\t},\n\t\t\t\tw,\n\t\t\t\th,\n\t\t\t},\n\t\t}\n\n\t\tthis.editor.updateShapes([partial])\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLImageShape,\n\t\tendShape: TLImageShape,\n\t\tt: number\n\t): TLImageShapeProps {\n\t\tfunction interpolateCrop(\n\t\t\tstartShape: TLImageShape,\n\t\t\tendShape: TLImageShape\n\t\t): TLImageShapeProps['crop'] {\n\t\t\tif (startShape.props.crop === null && endShape.props.crop === null) return null\n\n\t\t\tconst startTL = startShape.props.crop?.topLeft || { x: 0, y: 0 }\n\t\t\tconst startBR = startShape.props.crop?.bottomRight || { x: 1, y: 1 }\n\t\t\tconst endTL = endShape.props.crop?.topLeft || { x: 0, y: 0 }\n\t\t\tconst endBR = endShape.props.crop?.bottomRight || { x: 1, y: 1 }\n\n\t\t\treturn {\n\t\t\t\ttopLeft: { x: lerp(startTL.x, endTL.x, t), y: lerp(startTL.y, endTL.y, t) },\n\t\t\t\tbottomRight: { x: lerp(startBR.x, endBR.x, t), y: lerp(startBR.y, endBR.y, t) },\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t\tcrop: interpolateCrop(startShape, endShape),\n\t\t}\n\t}\n}\n\nconst ImageShape = memo(function ImageShape({ shape }: { shape: TLImageShape }) {\n\tconst editor = useEditor()\n\n\tconst { w } = getUncroppedSize(shape.props, shape.props.crop)\n\tconst { asset, url } = useImageOrVideoAsset({\n\t\tshapeId: shape.id,\n\t\tassetId: shape.props.assetId,\n\t\twidth: w,\n\t})\n\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst [staticFrameSrc, setStaticFrameSrc] = useState('')\n\tconst [loadedUrl, setLoadedUrl] = useState<null | string>(null)\n\tconst isAnimated = asset && getIsAnimated(editor, asset.id)\n\n\tuseEffect(() => {\n\t\tif (url && isAnimated) {\n\t\t\tconst { promise, cancel } = getFirstFrameOfAnimatedImage(url)\n\n\t\t\tpromise.then((dataUrl) => {\n\t\t\t\tsetStaticFrameSrc(dataUrl)\n\t\t\t\tsetLoadedUrl(url)\n\t\t\t})\n\n\t\t\treturn () => {\n\t\t\t\tcancel()\n\t\t\t}\n\t\t}\n\t}, [editor, isAnimated, prefersReducedMotion, url])\n\n\tconst showCropPreview = useValue(\n\t\t'show crop preview',\n\t\t() =>\n\t\t\tshape.id === editor.getOnlySelectedShapeId() &&\n\t\t\teditor.getCroppingShapeId() === shape.id &&\n\t\t\teditor.isIn('select.crop'),\n\t\t[editor, shape.id]\n\t)\n\n\t// We only want to reduce motion for mimeTypes that have motion\n\tconst reduceMotion =\n\t\tprefersReducedMotion && (asset?.props.mimeType?.includes('video') || isAnimated)\n\n\tconst containerStyle = getCroppedContainerStyle(shape)\n\n\tconst nextSrc = url === loadedUrl ? null : url\n\tconst loadedSrc = reduceMotion ? staticFrameSrc : loadedUrl\n\n\t// This logic path is for when it's broken/missing asset.\n\tif (!url && !asset?.props.src) {\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tcolor: 'var(--tl-color-text-3)',\n\t\t\t\t\tbackgroundColor: 'var(--tl-color-low)',\n\t\t\t\t\tborder: '1px solid var(--tl-color-low-border)',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames('tl-image-container', asset && 'tl-image-container-loading')}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t>\n\t\t\t\t\t{asset ? null : <BrokenAssetIcon />}\n\t\t\t\t</div>\n\t\t\t\t{'url' in shape.props && shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\t// We don't set crossOrigin for non-animated images because for Cloudflare we don't currently\n\t// have that set up.\n\tconst crossOrigin = isAnimated ? 'anonymous' : undefined\n\n\treturn (\n\t\t<>\n\t\t\t{showCropPreview && loadedSrc && (\n\t\t\t\t<div style={containerStyle}>\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\tstyle={{ ...getFlipStyle(shape), opacity: 0.1 }}\n\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\tsrc={loadedSrc}\n\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tborderRadius: shape.props.crop?.isCircle ? '50%' : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={classNames('tl-image-container')} style={containerStyle}>\n\t\t\t\t\t{/* We have two images: the currently loaded image, and the next image that\n\t\t\t\t\twe're waiting to load. we keep the loaded image mounted while we're waiting\n\t\t\t\t\tfor the next one by storing the loaded URL in state. We use `key` props with\n\t\t\t\t\tthe src of the image so that when the next image is ready, the previous one will\n\t\t\t\t\tbe unmounted and the next will be shown with the browser having to remount a\n\t\t\t\t\tfresh image and decoded it again from the cache. */}\n\t\t\t\t\t{loadedSrc && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={loadedSrc}\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={getFlipStyle(shape)}\n\t\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\t\tsrc={loadedSrc}\n\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{nextSrc && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={nextSrc}\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={getFlipStyle(shape)}\n\t\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\t\tsrc={nextSrc}\n\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\talt={shape.props.altText}\n\t\t\t\t\t\t\tonLoad={() => setLoadedUrl(nextSrc)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t\t</HTMLContainer>\n\t\t</>\n\t)\n})\n\nfunction getIsAnimated(editor: Editor, assetId: TLAssetId) {\n\tconst asset = assetId ? editor.getAsset(assetId) : undefined\n\n\tif (!asset) return false\n\n\treturn (\n\t\t('mimeType' in asset.props && MediaHelpers.isAnimatedImageType(asset?.props.mimeType)) ||\n\t\t('isAnimated' in asset.props && asset.props.isAnimated)\n\t)\n}\n\n/**\n * When an image is cropped we need to translate the image to show the portion withing the cropped\n * area. We do this by translating the image by the negative of the top left corner of the crop\n * area.\n *\n * @param shape - Shape The image shape for which to get the container style\n * @returns - Styles to apply to the image container\n */\nfunction getCroppedContainerStyle(shape: TLImageShape) {\n\tconst crop = shape.props.crop\n\tconst topLeft = crop?.topLeft\n\tif (!topLeft) {\n\t\treturn {\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t}\n\t}\n\n\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\tconst offsetX = -topLeft.x * w\n\tconst offsetY = -topLeft.y * h\n\treturn {\n\t\ttransform: `translate(${offsetX}px, ${offsetY}px)`,\n\t\twidth: w,\n\t\theight: h,\n\t}\n}\n\nfunction getFlipStyle(shape: TLImageShape, size?: { width: number; height: number }) {\n\tconst { flipX, flipY, crop } = shape.props\n\tif (!flipX && !flipY) return undefined\n\n\tlet cropOffsetX\n\tlet cropOffsetY\n\tif (crop) {\n\t\t// We have to do all this extra math because of the whole transform origin around 0,0\n\t\t// instead of center in SVG-land, ugh.\n\t\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\n\t\t// Find the resulting w/h of the crop in normalized (0-1) coordinates\n\t\tconst cropWidth = crop.bottomRight.x - crop.topLeft.x\n\t\tconst cropHeight = crop.bottomRight.y - crop.topLeft.y\n\n\t\t// Map from the normalized crop coordinate space to shape pixel space\n\t\tcropOffsetX = modulate(crop.topLeft.x, [0, 1 - cropWidth], [0, w - shape.props.w])\n\t\tcropOffsetY = modulate(crop.topLeft.y, [0, 1 - cropHeight], [0, h - shape.props.h])\n\t}\n\n\tconst scale = `scale(${flipX ? -1 : 1}, ${flipY ? -1 : 1})`\n\tconst translate = size\n\t\t? `translate(${(flipX ? size.width : 0) - (cropOffsetX ? cropOffsetX : 0)}px,\n\t\t ${(flipY ? size.height : 0) - (cropOffsetY ? cropOffsetY : 0)}px)`\n\t\t: ''\n\n\treturn {\n\t\ttransform: `${translate} ${scale}`,\n\t\t// in SVG, flipping around the center doesn't work so we use explicit width/height\n\t\ttransformOrigin: size ? '0 0' : 'center center',\n\t}\n}\n\nfunction SvgImage({ shape, src }: { shape: TLImageShape; src: string }) {\n\tconst cropClipId = useUniqueSafeId()\n\tconst containerStyle = getCroppedContainerStyle(shape)\n\tconst crop = shape.props.crop\n\n\tif (containerStyle.transform && crop) {\n\t\tconst { transform: cropTransform, width, height } = containerStyle\n\t\tconst croppedWidth = (crop.bottomRight.x - crop.topLeft.x) * width\n\t\tconst croppedHeight = (crop.bottomRight.y - crop.topLeft.y) * height\n\n\t\tconst points = [\n\t\t\tnew Vec(0, 0),\n\t\t\tnew Vec(croppedWidth, 0),\n\t\t\tnew Vec(croppedWidth, croppedHeight),\n\t\t\tnew Vec(0, croppedHeight),\n\t\t]\n\n\t\tconst flip = getFlipStyle(shape, { width, height })\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<defs>\n\t\t\t\t\t<clipPath id={cropClipId}>\n\t\t\t\t\t\t{crop.isCircle ? (\n\t\t\t\t\t\t\t<ellipse\n\t\t\t\t\t\t\t\tcx={croppedWidth / 2}\n\t\t\t\t\t\t\t\tcy={croppedHeight / 2}\n\t\t\t\t\t\t\t\trx={croppedWidth / 2}\n\t\t\t\t\t\t\t\try={croppedHeight / 2}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<polygon points={points.map((p) => `${p.x},${p.y}`).join(' ')} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</clipPath>\n\t\t\t\t</defs>\n\t\t\t\t<g clipPath={`url(#${cropClipId})`}>\n\t\t\t\t\t<image\n\t\t\t\t\t\thref={src}\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\theight={height}\n\t\t\t\t\t\taria-label={shape.props.altText}\n\t\t\t\t\t\tstyle={flip ? { ...flip } : { transform: cropTransform }}\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t</>\n\t\t)\n\t} else {\n\t\treturn (\n\t\t\t<image\n\t\t\t\thref={src}\n\t\t\t\twidth={shape.props.w}\n\t\t\t\theight={shape.props.h}\n\t\t\t\taria-label={shape.props.altText}\n\t\t\t\tstyle={getFlipStyle(shape, { width: shape.props.w, height: shape.props.h })}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nfunction getFirstFrameOfAnimatedImage(url: string) {\n\tlet cancelled = false\n\n\tconst promise = new Promise<string>((resolve) => {\n\t\tconst image = Image()\n\t\timage.onload = () => {\n\t\t\tif (cancelled) return\n\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = image.width\n\t\t\tcanvas.height = image.height\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tctx.drawImage(image, 0, 0)\n\t\t\tresolve(canvas.toDataURL())\n\t\t}\n\t\timage.crossOrigin = 'anonymous'\n\t\timage.src = url\n\t})\n\n\treturn { promise, cancel: () => (cancelled = true) }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tEditor,\n\tEllipse2d,\n\tFileHelpers,\n\tGeometry2d,\n\tHTMLContainer,\n\tImage,\n\tMediaHelpers,\n\tRectangle2d,\n\tSvgExportContext,\n\tTLAsset,\n\tTLAssetId,\n\tTLImageShape,\n\tTLImageShapeProps,\n\tTLResizeInfo,\n\tTLShapePartial,\n\tVec,\n\tWeakCache,\n\tfetch,\n\timageShapeMigrations,\n\timageShapeProps,\n\tlerp,\n\tmodulate,\n\tresizeBox,\n\tstructuredClone,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseUniqueSafeId,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { memo, useEffect, useState } from 'react'\nimport { BrokenAssetIcon } from '../shared/BrokenAssetIcon'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { getUncroppedSize } from '../shared/crop'\nimport { useImageOrVideoAsset } from '../shared/useImageOrVideoAsset'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nasync function getDataURIFromURL(url: string): Promise<string> {\n\tconst response = await fetch(url)\n\tconst blob = await response.blob()\n\treturn FileHelpers.blobToDataUrl(blob)\n}\n\nconst imageSvgExportCache = new WeakCache<TLAsset, Promise<string | null>>()\n\n/** @public */\nexport class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {\n\tstatic override type = 'image' as const\n\tstatic override props = imageShapeProps\n\tstatic override migrations = imageShapeMigrations\n\n\toverride isAspectRatioLocked() {\n\t\treturn true\n\t}\n\toverride canCrop() {\n\t\treturn true\n\t}\n\toverride isExportBoundsContainer(): boolean {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLImageShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tplaying: true,\n\t\t\turl: '',\n\t\t\tcrop: null,\n\t\t\tflipX: false,\n\t\t\tflipY: false,\n\t\t\taltText: '',\n\t\t}\n\t}\n\n\toverride getGeometry(shape: TLImageShape): Geometry2d {\n\t\tif (shape.props.crop?.isCircle) {\n\t\t\treturn new Ellipse2d({\n\t\t\t\twidth: shape.props.w,\n\t\t\t\theight: shape.props.h,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\toverride getAriaDescriptor(shape: TLImageShape) {\n\t\treturn shape.props.altText\n\t}\n\n\toverride onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>) {\n\t\tlet resized: TLImageShape = resizeBox(shape, info)\n\t\tconst { flipX, flipY } = info.initialShape.props\n\t\tconst { scaleX, scaleY, mode } = info\n\n\t\tresized = {\n\t\t\t...resized,\n\t\t\tprops: {\n\t\t\t\t...resized.props,\n\t\t\t\tflipX: scaleX < 0 !== flipX,\n\t\t\t\tflipY: scaleY < 0 !== flipY,\n\t\t\t},\n\t\t}\n\t\tif (!shape.props.crop) return resized\n\n\t\tconst flipCropHorizontally =\n\t\t\t// We used the flip horizontally feature\n\t\t\t(mode === 'scale_shape' && scaleX === -1) ||\n\t\t\t// We resized the shape past it's bounds, so it flipped\n\t\t\t(mode === 'resize_bounds' && flipX !== resized.props.flipX)\n\t\tconst flipCropVertically =\n\t\t\t// We used the flip vertically feature\n\t\t\t(mode === 'scale_shape' && scaleY === -1) ||\n\t\t\t// We resized the shape past it's bounds, so it flipped\n\t\t\t(mode === 'resize_bounds' && flipY !== resized.props.flipY)\n\n\t\tconst { topLeft, bottomRight } = shape.props.crop\n\t\tresized.props.crop = {\n\t\t\ttopLeft: {\n\t\t\t\tx: flipCropHorizontally ? 1 - bottomRight.x : topLeft.x,\n\t\t\t\ty: flipCropVertically ? 1 - bottomRight.y : topLeft.y,\n\t\t\t},\n\t\t\tbottomRight: {\n\t\t\t\tx: flipCropHorizontally ? 1 - topLeft.x : bottomRight.x,\n\t\t\t\ty: flipCropVertically ? 1 - topLeft.y : bottomRight.y,\n\t\t\t},\n\t\t\tisCircle: shape.props.crop.isCircle,\n\t\t}\n\t\treturn resized\n\t}\n\n\tcomponent(shape: TLImageShape) {\n\t\treturn <ImageShape shape={shape} />\n\t}\n\n\tindicator(shape: TLImageShape) {\n\t\tconst isCropping = this.editor.getCroppingShapeId() === shape.id\n\t\tif (isCropping) return null\n\n\t\tif (shape.props.crop?.isCircle) {\n\t\t\treturn (\n\t\t\t\t<ellipse\n\t\t\t\t\tcx={toDomPrecision(shape.props.w / 2)}\n\t\t\t\t\tcy={toDomPrecision(shape.props.h / 2)}\n\t\t\t\t\trx={toDomPrecision(shape.props.w / 2)}\n\t\t\t\t\try={toDomPrecision(shape.props.h / 2)}\n\t\t\t\t/>\n\t\t\t)\n\t\t}\n\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLImageShape, ctx: SvgExportContext) {\n\t\tconst props = shape.props\n\t\tif (!props.assetId) return null\n\n\t\tconst asset = this.editor.getAsset(props.assetId)\n\n\t\tif (!asset) return null\n\n\t\tconst { w } = getUncroppedSize(shape.props, props.crop)\n\n\t\tconst src = await imageSvgExportCache.get(asset, async () => {\n\t\t\tlet src = await ctx.resolveAssetUrl(asset.id, w)\n\t\t\tif (!src) return null\n\t\t\tif (\n\t\t\t\tsrc.startsWith('blob:') ||\n\t\t\t\tsrc.startsWith('http') ||\n\t\t\t\tsrc.startsWith('/') ||\n\t\t\t\tsrc.startsWith('./')\n\t\t\t) {\n\t\t\t\t// If it's a remote image, we need to fetch it and convert it to a data URI\n\t\t\t\tsrc = (await getDataURIFromURL(src)) || ''\n\t\t\t}\n\n\t\t\t// If it's animated then we need to get the first frame\n\t\t\tif (getIsAnimated(this.editor, asset.id)) {\n\t\t\t\tconst { promise } = getFirstFrameOfAnimatedImage(src)\n\t\t\t\tsrc = await promise\n\t\t\t}\n\t\t\treturn src\n\t\t})\n\n\t\tif (!src) return null\n\n\t\treturn <SvgImage shape={shape} src={src} />\n\t}\n\n\toverride onDoubleClickEdge(shape: TLImageShape) {\n\t\tconst props = shape.props\n\t\tif (!props) return\n\n\t\tif (this.editor.getCroppingShapeId() !== shape.id) {\n\t\t\treturn\n\t\t}\n\n\t\tconst crop = structuredClone(props.crop) || {\n\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t}\n\n\t\t// The true asset dimensions\n\t\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\n\t\tconst pointDelta = new Vec(crop.topLeft.x * w, crop.topLeft.y * h).rot(shape.rotation)\n\n\t\tconst partial: TLShapePartial<TLImageShape> = {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tx: shape.x - pointDelta.x,\n\t\t\ty: shape.y - pointDelta.y,\n\t\t\tprops: {\n\t\t\t\tcrop: {\n\t\t\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t\t\t},\n\t\t\t\tw,\n\t\t\t\th,\n\t\t\t},\n\t\t}\n\n\t\tthis.editor.updateShapes([partial])\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLImageShape,\n\t\tendShape: TLImageShape,\n\t\tt: number\n\t): TLImageShapeProps {\n\t\tfunction interpolateCrop(\n\t\t\tstartShape: TLImageShape,\n\t\t\tendShape: TLImageShape\n\t\t): TLImageShapeProps['crop'] {\n\t\t\tif (startShape.props.crop === null && endShape.props.crop === null) return null\n\n\t\t\tconst startTL = startShape.props.crop?.topLeft || { x: 0, y: 0 }\n\t\t\tconst startBR = startShape.props.crop?.bottomRight || { x: 1, y: 1 }\n\t\t\tconst endTL = endShape.props.crop?.topLeft || { x: 0, y: 0 }\n\t\t\tconst endBR = endShape.props.crop?.bottomRight || { x: 1, y: 1 }\n\n\t\t\treturn {\n\t\t\t\ttopLeft: { x: lerp(startTL.x, endTL.x, t), y: lerp(startTL.y, endTL.y, t) },\n\t\t\t\tbottomRight: { x: lerp(startBR.x, endBR.x, t), y: lerp(startBR.y, endBR.y, t) },\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t\tcrop: interpolateCrop(startShape, endShape),\n\t\t}\n\t}\n}\n\nconst ImageShape = memo(function ImageShape({ shape }: { shape: TLImageShape }) {\n\tconst editor = useEditor()\n\n\tconst { w } = getUncroppedSize(shape.props, shape.props.crop)\n\tconst { asset, url } = useImageOrVideoAsset({\n\t\tshapeId: shape.id,\n\t\tassetId: shape.props.assetId,\n\t\twidth: w,\n\t})\n\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst [staticFrameSrc, setStaticFrameSrc] = useState('')\n\tconst [loadedUrl, setLoadedUrl] = useState<null | string>(null)\n\tconst isAnimated = asset && getIsAnimated(editor, asset.id)\n\n\tuseEffect(() => {\n\t\tif (url && isAnimated) {\n\t\t\tconst { promise, cancel } = getFirstFrameOfAnimatedImage(url)\n\n\t\t\tpromise.then((dataUrl) => {\n\t\t\t\tsetStaticFrameSrc(dataUrl)\n\t\t\t\tsetLoadedUrl(url)\n\t\t\t})\n\n\t\t\treturn () => {\n\t\t\t\tcancel()\n\t\t\t}\n\t\t}\n\t}, [editor, isAnimated, prefersReducedMotion, url])\n\n\tconst showCropPreview = useValue(\n\t\t'show crop preview',\n\t\t() =>\n\t\t\tshape.id === editor.getOnlySelectedShapeId() &&\n\t\t\teditor.getCroppingShapeId() === shape.id &&\n\t\t\teditor.isIn('select.crop'),\n\t\t[editor, shape.id]\n\t)\n\n\t// We only want to reduce motion for mimeTypes that have motion\n\tconst reduceMotion =\n\t\tprefersReducedMotion && (asset?.props.mimeType?.includes('video') || isAnimated)\n\n\tconst containerStyle = getCroppedContainerStyle(shape)\n\n\tconst nextSrc = url === loadedUrl ? null : url\n\tconst loadedSrc = reduceMotion ? staticFrameSrc : loadedUrl\n\n\t// This logic path is for when it's broken/missing asset.\n\tif (!url && !asset?.props.src) {\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tcolor: 'var(--tl-color-text-3)',\n\t\t\t\t\tbackgroundColor: 'var(--tl-color-low)',\n\t\t\t\t\tborder: '1px solid var(--tl-color-low-border)',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames('tl-image-container', asset && 'tl-image-container-loading')}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t>\n\t\t\t\t\t{asset ? null : <BrokenAssetIcon />}\n\t\t\t\t</div>\n\t\t\t\t{'url' in shape.props && shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\t// We don't set crossOrigin for non-animated images because for Cloudflare we don't currently\n\t// have that set up.\n\tconst crossOrigin = isAnimated ? 'anonymous' : undefined\n\n\treturn (\n\t\t<>\n\t\t\t{showCropPreview && loadedSrc && (\n\t\t\t\t<div style={containerStyle}>\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\tstyle={{ ...getFlipStyle(shape), opacity: 0.1 }}\n\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\tsrc={loadedSrc}\n\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\twidth: shape.props.w,\n\t\t\t\t\theight: shape.props.h,\n\t\t\t\t\tborderRadius: shape.props.crop?.isCircle ? '50%' : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={classNames('tl-image-container')} style={containerStyle}>\n\t\t\t\t\t{/* We have two images: the currently loaded image, and the next image that\n\t\t\t\t\twe're waiting to load. we keep the loaded image mounted while we're waiting\n\t\t\t\t\tfor the next one by storing the loaded URL in state. We use `key` props with\n\t\t\t\t\tthe src of the image so that when the next image is ready, the previous one will\n\t\t\t\t\tbe unmounted and the next will be shown with the browser having to remount a\n\t\t\t\t\tfresh image and decoded it again from the cache. */}\n\t\t\t\t\t{loadedSrc && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={loadedSrc}\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={getFlipStyle(shape)}\n\t\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\t\tsrc={loadedSrc}\n\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{nextSrc && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={nextSrc}\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={getFlipStyle(shape)}\n\t\t\t\t\t\t\tcrossOrigin={crossOrigin}\n\t\t\t\t\t\t\tsrc={nextSrc}\n\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\talt={shape.props.altText}\n\t\t\t\t\t\t\tonLoad={() => setLoadedUrl(nextSrc)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t\t</HTMLContainer>\n\t\t</>\n\t)\n})\n\nfunction getIsAnimated(editor: Editor, assetId: TLAssetId) {\n\tconst asset = assetId ? editor.getAsset(assetId) : undefined\n\n\tif (!asset) return false\n\n\treturn (\n\t\t('mimeType' in asset.props && MediaHelpers.isAnimatedImageType(asset?.props.mimeType)) ||\n\t\t('isAnimated' in asset.props && asset.props.isAnimated)\n\t)\n}\n\n/**\n * When an image is cropped we need to translate the image to show the portion withing the cropped\n * area. We do this by translating the image by the negative of the top left corner of the crop\n * area.\n *\n * @param shape - Shape The image shape for which to get the container style\n * @returns - Styles to apply to the image container\n */\nfunction getCroppedContainerStyle(shape: TLImageShape) {\n\tconst crop = shape.props.crop\n\tconst topLeft = crop?.topLeft\n\tif (!topLeft) {\n\t\treturn {\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t}\n\t}\n\n\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\tconst offsetX = -topLeft.x * w\n\tconst offsetY = -topLeft.y * h\n\treturn {\n\t\ttransform: `translate(${offsetX}px, ${offsetY}px)`,\n\t\twidth: w,\n\t\theight: h,\n\t}\n}\n\nfunction getFlipStyle(shape: TLImageShape, size?: { width: number; height: number }) {\n\tconst { flipX, flipY, crop } = shape.props\n\tif (!flipX && !flipY) return undefined\n\n\tlet cropOffsetX\n\tlet cropOffsetY\n\tif (crop) {\n\t\t// We have to do all this extra math because of the whole transform origin around 0,0\n\t\t// instead of center in SVG-land, ugh.\n\t\tconst { w, h } = getUncroppedSize(shape.props, crop)\n\n\t\t// Find the resulting w/h of the crop in normalized (0-1) coordinates\n\t\tconst cropWidth = crop.bottomRight.x - crop.topLeft.x\n\t\tconst cropHeight = crop.bottomRight.y - crop.topLeft.y\n\n\t\t// Map from the normalized crop coordinate space to shape pixel space\n\t\tcropOffsetX = modulate(crop.topLeft.x, [0, 1 - cropWidth], [0, w - shape.props.w])\n\t\tcropOffsetY = modulate(crop.topLeft.y, [0, 1 - cropHeight], [0, h - shape.props.h])\n\t}\n\n\tconst scale = `scale(${flipX ? -1 : 1}, ${flipY ? -1 : 1})`\n\tconst translate = size\n\t\t? `translate(${(flipX ? size.width : 0) - (cropOffsetX ? cropOffsetX : 0)}px,\n\t\t ${(flipY ? size.height : 0) - (cropOffsetY ? cropOffsetY : 0)}px)`\n\t\t: ''\n\n\treturn {\n\t\ttransform: `${translate} ${scale}`,\n\t\t// in SVG, flipping around the center doesn't work so we use explicit width/height\n\t\ttransformOrigin: size ? '0 0' : 'center center',\n\t}\n}\n\nfunction SvgImage({ shape, src }: { shape: TLImageShape; src: string }) {\n\tconst cropClipId = useUniqueSafeId()\n\tconst containerStyle = getCroppedContainerStyle(shape)\n\tconst crop = shape.props.crop\n\n\tif (containerStyle.transform && crop) {\n\t\tconst { transform: cropTransform, width, height } = containerStyle\n\t\tconst croppedWidth = (crop.bottomRight.x - crop.topLeft.x) * width\n\t\tconst croppedHeight = (crop.bottomRight.y - crop.topLeft.y) * height\n\n\t\tconst points = [\n\t\t\tnew Vec(0, 0),\n\t\t\tnew Vec(croppedWidth, 0),\n\t\t\tnew Vec(croppedWidth, croppedHeight),\n\t\t\tnew Vec(0, croppedHeight),\n\t\t]\n\n\t\tconst flip = getFlipStyle(shape, { width, height })\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<defs>\n\t\t\t\t\t<clipPath id={cropClipId}>\n\t\t\t\t\t\t{crop.isCircle ? (\n\t\t\t\t\t\t\t<ellipse\n\t\t\t\t\t\t\t\tcx={croppedWidth / 2}\n\t\t\t\t\t\t\t\tcy={croppedHeight / 2}\n\t\t\t\t\t\t\t\trx={croppedWidth / 2}\n\t\t\t\t\t\t\t\try={croppedHeight / 2}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<polygon points={points.map((p) => `${p.x},${p.y}`).join(' ')} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</clipPath>\n\t\t\t\t</defs>\n\t\t\t\t<g clipPath={`url(#${cropClipId})`}>\n\t\t\t\t\t<image\n\t\t\t\t\t\thref={src}\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\theight={height}\n\t\t\t\t\t\taria-label={shape.props.altText}\n\t\t\t\t\t\tstyle={flip ? { ...flip } : { transform: cropTransform }}\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t</>\n\t\t)\n\t} else {\n\t\treturn (\n\t\t\t<image\n\t\t\t\thref={src}\n\t\t\t\twidth={shape.props.w}\n\t\t\t\theight={shape.props.h}\n\t\t\t\taria-label={shape.props.altText}\n\t\t\t\tstyle={getFlipStyle(shape, { width: shape.props.w, height: shape.props.h })}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nfunction getFirstFrameOfAnimatedImage(url: string) {\n\tlet cancelled = false\n\n\tconst promise = new Promise<string>((resolve) => {\n\t\tconst image = Image()\n\t\timage.onload = () => {\n\t\t\tif (cancelled) return\n\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = image.width\n\t\t\tcanvas.height = image.height\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tctx.drawImage(image, 0, 0)\n\t\t\tresolve(canvas.toDataURL())\n\t\t}\n\t\timage.crossOrigin = 'anonymous'\n\t\timage.src = url\n\t})\n\n\treturn { promise, cancel: () => (cancelled = true) }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["src", "startShape", "endShape", "ImageShape", "classNames"]
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var TldrawUi_exports = {};
|
|
30
30
|
__export(TldrawUi_exports, {
|
|
31
|
-
TldrawUi: () => TldrawUi
|
|
31
|
+
TldrawUi: () => TldrawUi,
|
|
32
|
+
TldrawUiInFrontOfTheCanvas: () => TldrawUiInFrontOfTheCanvas
|
|
32
33
|
});
|
|
33
34
|
module.exports = __toCommonJS(TldrawUi_exports);
|
|
34
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -36,7 +37,6 @@ var import_editor = require("@tldraw/editor");
|
|
|
36
37
|
var import_classnames = __toESM(require("classnames"));
|
|
37
38
|
var import_react = __toESM(require("react"));
|
|
38
39
|
var import_A11y = require("./components/A11y");
|
|
39
|
-
var import_FollowingIndicator = require("./components/FollowingIndicator");
|
|
40
40
|
var import_TldrawUiButton = require("./components/primitives/Button/TldrawUiButton");
|
|
41
41
|
var import_TldrawUiButtonIcon = require("./components/primitives/Button/TldrawUiButtonIcon");
|
|
42
42
|
var import_constants = require("./constants");
|
|
@@ -85,10 +85,6 @@ const TldrawUiContent = import_react.default.memo(function TldrawUI() {
|
|
|
85
85
|
NavigationPanel,
|
|
86
86
|
HelperButtons,
|
|
87
87
|
DebugPanel,
|
|
88
|
-
CursorChatBubble,
|
|
89
|
-
RichTextToolbar,
|
|
90
|
-
ImageToolbar,
|
|
91
|
-
VideoToolbar,
|
|
92
88
|
Toasts,
|
|
93
89
|
Dialogs,
|
|
94
90
|
A11y
|
|
@@ -183,15 +179,20 @@ const TldrawUiContent = import_react.default.memo(function TldrawUI() {
|
|
|
183
179
|
A11y && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(A11y, {})
|
|
184
180
|
] })
|
|
185
181
|
] }),
|
|
186
|
-
RichTextToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichTextToolbar, {}),
|
|
187
|
-
ImageToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageToolbar, {}),
|
|
188
|
-
VideoToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoToolbar, {}),
|
|
189
182
|
Toasts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toasts, {}),
|
|
190
|
-
Dialogs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialogs, {})
|
|
191
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FollowingIndicator.FollowingIndicator, {}),
|
|
192
|
-
CursorChatBubble && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CursorChatBubble, {})
|
|
183
|
+
Dialogs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialogs, {})
|
|
193
184
|
]
|
|
194
185
|
}
|
|
195
186
|
);
|
|
196
187
|
});
|
|
188
|
+
function TldrawUiInFrontOfTheCanvas() {
|
|
189
|
+
const { RichTextToolbar, ImageToolbar, VideoToolbar, CursorChatBubble, FollowingIndicator } = (0, import_components.useTldrawUiComponents)();
|
|
190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
191
|
+
RichTextToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichTextToolbar, {}),
|
|
192
|
+
ImageToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageToolbar, {}),
|
|
193
|
+
VideoToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoToolbar, {}),
|
|
194
|
+
FollowingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FollowingIndicator, {}),
|
|
195
|
+
CursorChatBubble && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CursorChatBubble, {})
|
|
196
|
+
] });
|
|
197
|
+
}
|
|
197
198
|
//# sourceMappingURL=TldrawUi.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/ui/TldrawUi.tsx"],
|
|
4
|
-
"sourcesContent": ["import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { ReactNode, useMemo, useRef, useState } from 'react'\nimport { TLUiAssetUrlOverrides } from './assetUrls'\nimport { SkipToMainContent } from './components/A11y'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { ReactNode, useMemo, useRef, useState } from 'react'\nimport { TLUiAssetUrlOverrides } from './assetUrls'\nimport { SkipToMainContent } from './components/A11y'\nimport { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'\nimport { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from './constants'\nimport {\n\tTLUiContextProviderProps,\n\tTldrawUiContextProvider,\n} from './context/TldrawUiContextProvider'\nimport { useActions } from './context/actions'\nimport { useBreakpoint } from './context/breakpoints'\nimport { TLUiComponents, useTldrawUiComponents } from './context/components'\nimport { useNativeClipboardEvents } from './hooks/useClipboardEvents'\nimport { useEditorEvents } from './hooks/useEditorEvents'\nimport { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'\nimport { useReadonly } from './hooks/useReadonly'\nimport { useTranslation } from './hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TldrawUiProps extends TLUiContextProviderProps {\n\t/**\n\t * The component's children.\n\t */\n\tchildren?: ReactNode\n\n\t/**\n\t * Whether to hide the user interface and only display the canvas.\n\t */\n\thideUi?: boolean\n\n\t/**\n\t * Overrides for the UI components.\n\t */\n\tcomponents?: TLUiComponents\n\n\t/**\n\t * Additional items to add to the debug menu (will be deprecated)\n\t */\n\trenderDebugMenuItems?(): React.ReactNode\n\n\t/** Asset URL override. */\n\tassetUrls?: TLUiAssetUrlOverrides\n}\n\n/**\n * @public\n * @react\n */\nexport const TldrawUi = React.memo(function TldrawUi({\n\trenderDebugMenuItems,\n\tchildren,\n\thideUi,\n\tcomponents,\n\t...rest\n}: TldrawUiProps) {\n\treturn (\n\t\t<TldrawUiContextProvider {...rest} components={components}>\n\t\t\t<TldrawUiInner hideUi={hideUi} renderDebugMenuItems={renderDebugMenuItems}>\n\t\t\t\t{children}\n\t\t\t</TldrawUiInner>\n\t\t</TldrawUiContextProvider>\n\t)\n})\n\ninterface TldrawUiContentProps {\n\thideUi?: boolean\n\tshareZone?: ReactNode\n\ttopZone?: ReactNode\n\trenderDebugMenuItems?(): React.ReactNode\n}\n\nconst TldrawUiInner = React.memo(function TldrawUiInner({\n\tchildren,\n\thideUi,\n\t...rest\n}: TldrawUiContentProps & { children: ReactNode }) {\n\t// The hideUi prop should prevent the UI from mounting.\n\t// If we ever need want the UI to mount and preserve state, then\n\t// we should change this behavior and hide the UI via CSS instead.\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t{hideUi ? null : <TldrawUiContent {...rest} />}\n\t\t</>\n\t)\n})\n\nconst TldrawUiContent = React.memo(function TldrawUI() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst isFocusMode = useValue('focus', () => editor.getInstanceState().isFocusMode, [editor])\n\tconst isDebugMode = useValue('debug', () => editor.getInstanceState().isDebugMode, [editor])\n\n\tconst {\n\t\tSharePanel,\n\t\tTopPanel,\n\t\tMenuPanel,\n\t\tStylePanel,\n\t\tToolbar,\n\t\tHelpMenu,\n\t\tNavigationPanel,\n\t\tHelperButtons,\n\t\tDebugPanel,\n\t\tToasts,\n\t\tDialogs,\n\t\tA11y,\n\t} = useTldrawUiComponents()\n\n\tuseKeyboardShortcuts()\n\tuseNativeClipboardEvents()\n\tuseEditorEvents()\n\n\tconst rIsEditingAnything = useRef(false)\n\tconst rHidingTimeout = useRef(-1 as any)\n\tconst [hideToolbarWhileEditing, setHideToolbarWhileEditing] = useState(false)\n\n\tuseReactor(\n\t\t'update hide toolbar while delayed',\n\t\t() => {\n\t\t\tconst isMobileEnvironment = tlenv.isIos || tlenv.isAndroid\n\t\t\tif (!isMobileEnvironment) return\n\n\t\t\tconst editingShape = editor.getEditingShapeId()\n\t\t\tif (editingShape === null) {\n\t\t\t\tif (rIsEditingAnything.current) {\n\t\t\t\t\trIsEditingAnything.current = false\n\t\t\t\t\tclearTimeout(rHidingTimeout.current)\n\t\t\t\t\tif (tlenv.isAndroid) {\n\t\t\t\t\t\t// On Android, hide it after 150ms\n\t\t\t\t\t\trHidingTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tsetHideToolbarWhileEditing(false)\n\t\t\t\t\t\t}, 150)\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// On iOS, just hide it immediately\n\t\t\t\t\t\tsetHideToolbarWhileEditing(false)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (!rIsEditingAnything.current) {\n\t\t\t\trIsEditingAnything.current = true\n\t\t\t\tclearTimeout(rHidingTimeout.current)\n\t\t\t\tsetHideToolbarWhileEditing(true)\n\t\t\t}\n\t\t},\n\t\t[]\n\t)\n\n\tconst { 'toggle-focus-mode': toggleFocus } = useActions()\n\n\tconst { breakpointsAbove, breakpointsBelow } = useMemo(() => {\n\t\tconst breakpointsAbove = []\n\t\tconst breakpointsBelow = []\n\t\tfor (let bp = 0; bp < PORTRAIT_BREAKPOINTS.length; bp++) {\n\t\t\tif (bp <= breakpoint) {\n\t\t\t\tbreakpointsAbove.push(bp)\n\t\t\t} else {\n\t\t\t\tbreakpointsBelow.push(bp)\n\t\t\t}\n\t\t}\n\t\treturn { breakpointsAbove, breakpointsBelow }\n\t}, [breakpoint])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tlui-layout', {\n\t\t\t\t'tlui-layout__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t})}\n\t\t\t// When the virtual keyboard is opening we want it to hide immediately.\n\t\t\t// But when the virtual keyboard is closing we want to wait a bit before showing it again.\n\t\t\tdata-iseditinganything={hideToolbarWhileEditing}\n\t\t\tdata-breakpoint={breakpoint}\n\t\t\tdata-breakpoints-above={breakpointsAbove.join(' ')}\n\t\t\tdata-breakpoints-below={breakpointsBelow.join(' ')}\n\t\t>\n\t\t\t<SkipToMainContent />\n\t\t\t{isFocusMode ? (\n\t\t\t\t<div className=\"tlui-layout__top\">\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-focus-button\"\n\t\t\t\t\t\ttitle={msg('focus-mode.toggle-focus-mode')}\n\t\t\t\t\t\tonClick={() => toggleFocus.onSelect('menu')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"dot\" />\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"tlui-layout__top\">\n\t\t\t\t\t\t<div className=\"tlui-layout__top__left\">\n\t\t\t\t\t\t\t{MenuPanel && <MenuPanel />}\n\t\t\t\t\t\t\t{HelperButtons && <HelperButtons />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"tlui-layout__top__center\">{TopPanel && <TopPanel />}</div>\n\t\t\t\t\t\t<div className=\"tlui-layout__top__right\">\n\t\t\t\t\t\t\t{SharePanel && <SharePanel />}\n\t\t\t\t\t\t\t{StylePanel && breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (\n\t\t\t\t\t\t\t\t<StylePanel />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"tlui-layout__bottom\">\n\t\t\t\t\t\t<div className=\"tlui-layout__bottom__main\">\n\t\t\t\t\t\t\t{NavigationPanel && <NavigationPanel />}\n\t\t\t\t\t\t\t{Toolbar && <Toolbar />}\n\t\t\t\t\t\t\t{HelpMenu && <HelpMenu />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{isDebugMode && DebugPanel && <DebugPanel />}\n\t\t\t\t\t\t{A11y && <A11y />}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{Toasts && <Toasts />}\n\t\t\t{Dialogs && <Dialogs />}\n\t\t</div>\n\t)\n})\n\n/** @public @react */\nexport function TldrawUiInFrontOfTheCanvas() {\n\tconst { RichTextToolbar, ImageToolbar, VideoToolbar, CursorChatBubble, FollowingIndicator } =\n\t\tuseTldrawUiComponents()\n\n\treturn (\n\t\t<>\n\t\t\t{RichTextToolbar && <RichTextToolbar />}\n\t\t\t{ImageToolbar && <ImageToolbar />}\n\t\t\t{VideoToolbar && <VideoToolbar />}\n\t\t\t{FollowingIndicator && <FollowingIndicator />}\n\t\t\t{CursorChatBubble && <CursorChatBubble />}\n\t\t</>\n\t)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "TldrawUi", "TldrawUiInner", "breakpointsAbove", "breakpointsBelow", "classNames"]
|
|
7
7
|
}
|
|
@@ -16,14 +16,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
return to;
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var
|
|
20
|
-
__export(
|
|
21
|
-
|
|
19
|
+
var DefaultFollowingIndicator_exports = {};
|
|
20
|
+
__export(DefaultFollowingIndicator_exports, {
|
|
21
|
+
DefaultFollowingIndicator: () => DefaultFollowingIndicator
|
|
22
22
|
});
|
|
23
|
-
module.exports = __toCommonJS(
|
|
23
|
+
module.exports = __toCommonJS(DefaultFollowingIndicator_exports);
|
|
24
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
25
|
var import_editor = require("@tldraw/editor");
|
|
26
|
-
function
|
|
26
|
+
function DefaultFollowingIndicator() {
|
|
27
27
|
const editor = (0, import_editor.useEditor)();
|
|
28
28
|
const followingUserId = (0, import_editor.useValue)("follow", () => editor.getInstanceState().followingUserId, [
|
|
29
29
|
editor
|
|
@@ -36,4 +36,4 @@ function FollowingIndicatorInner({ userId }) {
|
|
|
36
36
|
if (!presence) return null;
|
|
37
37
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-following-indicator", style: { borderColor: presence.color } });
|
|
38
38
|
}
|
|
39
|
-
//# sourceMappingURL=
|
|
39
|
+
//# sourceMappingURL=DefaultFollowingIndicator.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/lib/ui/components/DefaultFollowingIndicator.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useEditor, usePresence, useValue } from '@tldraw/editor'\n\n/** @public @react */\nexport function DefaultFollowingIndicator() {\n\tconst editor = useEditor()\n\tconst followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [\n\t\teditor,\n\t])\n\tif (!followingUserId) return null\n\treturn <FollowingIndicatorInner userId={followingUserId} />\n}\n\nfunction FollowingIndicatorInner({ userId }: { userId: string }) {\n\tconst presence = usePresence(userId)\n\tif (!presence) return null\n\treturn <div className=\"tlui-following-indicator\" style={{ borderColor: presence.color }} />\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASQ;AATR,oBAAiD;AAG1C,SAAS,4BAA4B;AAC3C,QAAM,aAAS,yBAAU;AACzB,QAAM,sBAAkB,wBAAS,UAAU,MAAM,OAAO,iBAAiB,EAAE,iBAAiB;AAAA,IAC3F;AAAA,EACD,CAAC;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,SAAO,4CAAC,2BAAwB,QAAQ,iBAAiB;AAC1D;AAEA,SAAS,wBAAwB,EAAE,OAAO,GAAuB;AAChE,QAAM,eAAW,2BAAY,MAAM;AACnC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,4CAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,aAAa,SAAS,MAAM,GAAG;AAC1F;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js
CHANGED
|
@@ -202,7 +202,7 @@ function DefaultKeyboardShortcutsDialogContent() {
|
|
|
202
202
|
{
|
|
203
203
|
id: "a11y-select-next-shape-direction",
|
|
204
204
|
label: "a11y.select-shape-direction",
|
|
205
|
-
kbd: "cmd
|
|
205
|
+
kbd: "cmd+[[\u2191\u2192\u2193\u2190]]",
|
|
206
206
|
onSelect: () => {
|
|
207
207
|
}
|
|
208
208
|
}
|
|
@@ -212,7 +212,7 @@ function DefaultKeyboardShortcutsDialogContent() {
|
|
|
212
212
|
{
|
|
213
213
|
id: "a11y-select-next-shape-container",
|
|
214
214
|
label: "a11y.enter-leave-container",
|
|
215
|
-
kbd: "cmd+shift
|
|
215
|
+
kbd: "cmd+shift+[[\u2191\u2192]]",
|
|
216
216
|
onSelect: () => {
|
|
217
217
|
}
|
|
218
218
|
}
|
|
@@ -222,7 +222,7 @@ function DefaultKeyboardShortcutsDialogContent() {
|
|
|
222
222
|
{
|
|
223
223
|
id: "a11y-pan-camera",
|
|
224
224
|
label: "a11y.pan-camera",
|
|
225
|
-
kbd: "[[Space]]
|
|
225
|
+
kbd: "[[Space]]+[[\u2191\u2192\u2193\u2190]]",
|
|
226
226
|
onSelect: () => {
|
|
227
227
|
}
|
|
228
228
|
}
|
|
@@ -252,7 +252,7 @@ function DefaultKeyboardShortcutsDialogContent() {
|
|
|
252
252
|
{
|
|
253
253
|
id: "a11y-move-shape",
|
|
254
254
|
label: "a11y.move-shape",
|
|
255
|
-
kbd: "\u2191\u2192\u2193\u2190",
|
|
255
|
+
kbd: "[[\u2191\u2192\u2193\u2190]]",
|
|
256
256
|
onSelect: () => {
|
|
257
257
|
}
|
|
258
258
|
}
|
|
@@ -262,7 +262,7 @@ function DefaultKeyboardShortcutsDialogContent() {
|
|
|
262
262
|
{
|
|
263
263
|
id: "a11y-move-shape-faster",
|
|
264
264
|
label: "a11y.move-shape-faster",
|
|
265
|
-
kbd: "shift
|
|
265
|
+
kbd: "shift+[[\u2191\u2192\u2193\u2190]]",
|
|
266
266
|
onSelect: () => {
|
|
267
267
|
}
|
|
268
268
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useShowCollaborationUi } from '../../hooks/useCollaborationStatus'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuToolItem } from '../primitives/menus/TldrawUiMenuToolItem'\n\n/** @public @react */\nexport function DefaultKeyboardShortcutsDialogContent() {\n\tconst showCollaborationUi = useShowCollaborationUi()\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.tools\" id=\"tools\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-tool-lock\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"insert-media\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"select\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"draw\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"eraser\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"hand\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"rectangle\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"ellipse\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"arrow\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"line\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"text\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"frame\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"note\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"laser\" />\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"pointer-down\"\n\t\t\t\t\tlabel=\"tool.pointer-down\"\n\t\t\t\t\tkbd=\",\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.preferences\" id=\"preferences\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-dark-mode\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-focus-mode\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-grid\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.edit\" id=\"edit\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"undo\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"redo\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"cut\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"paste\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"select-all\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"delete\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"duplicate\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.view\" id=\"view\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-in\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-out\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-100\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-fit\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-selection\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.transform\" id=\"transform\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"group\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"ungroup\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.text-formatting\" id=\"text\">\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-bold\"\n\t\t\t\t\tlabel=\"tool.rich-text-bold\"\n\t\t\t\t\tkbd=\"cmd+b\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-italic\"\n\t\t\t\t\tlabel=\"tool.rich-text-italic\"\n\t\t\t\t\tkbd=\"cmd+i\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-code\"\n\t\t\t\t\tlabel=\"tool.rich-text-code\"\n\t\t\t\t\tkbd=\"cmd+e\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-highlight\"\n\t\t\t\t\tlabel=\"tool.rich-text-highlight\"\n\t\t\t\t\tkbd=\"cmd+shift+h\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-strikethrough\"\n\t\t\t\t\tlabel=\"tool.rich-text-strikethrough\"\n\t\t\t\t\tkbd=\"cmd+shift+s\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-link\"\n\t\t\t\t\tlabel=\"tool.rich-text-link\"\n\t\t\t\t\tkbd=\"cmd+shift+k\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-header\"\n\t\t\t\t\tlabel=\"tool.rich-text-header\"\n\t\t\t\t\tkbd=\"cmd+alt+[[1-6]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-orderedList\"\n\t\t\t\t\tlabel=\"tool.rich-text-orderedList\"\n\t\t\t\t\tkbd=\"cmd+shift+7\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-bulletedlist\"\n\t\t\t\t\tlabel=\"tool.rich-text-bulletList\"\n\t\t\t\t\tkbd=\"cmd+shift+8\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.a11y\" id=\"a11y\">\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape\"\n\t\t\t\t\tlabel=\"a11y.select-shape\"\n\t\t\t\t\tkbd=\"[[Tab]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape-direction\"\n\t\t\t\t\tlabel=\"a11y.select-shape-direction\"\n\t\t\t\t\tkbd=\"cmd
|
|
4
|
+
"sourcesContent": ["import { useShowCollaborationUi } from '../../hooks/useCollaborationStatus'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuToolItem } from '../primitives/menus/TldrawUiMenuToolItem'\n\n/** @public @react */\nexport function DefaultKeyboardShortcutsDialogContent() {\n\tconst showCollaborationUi = useShowCollaborationUi()\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.tools\" id=\"tools\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-tool-lock\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"insert-media\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"select\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"draw\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"eraser\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"hand\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"rectangle\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"ellipse\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"arrow\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"line\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"text\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"frame\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"note\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"laser\" />\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"pointer-down\"\n\t\t\t\t\tlabel=\"tool.pointer-down\"\n\t\t\t\t\tkbd=\",\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.preferences\" id=\"preferences\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-dark-mode\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-focus-mode\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-grid\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.edit\" id=\"edit\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"undo\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"redo\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"cut\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"paste\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"select-all\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"delete\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"duplicate\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.view\" id=\"view\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-in\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-out\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-100\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-fit\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-selection\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.transform\" id=\"transform\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"group\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"ungroup\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.text-formatting\" id=\"text\">\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-bold\"\n\t\t\t\t\tlabel=\"tool.rich-text-bold\"\n\t\t\t\t\tkbd=\"cmd+b\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-italic\"\n\t\t\t\t\tlabel=\"tool.rich-text-italic\"\n\t\t\t\t\tkbd=\"cmd+i\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-code\"\n\t\t\t\t\tlabel=\"tool.rich-text-code\"\n\t\t\t\t\tkbd=\"cmd+e\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-highlight\"\n\t\t\t\t\tlabel=\"tool.rich-text-highlight\"\n\t\t\t\t\tkbd=\"cmd+shift+h\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-strikethrough\"\n\t\t\t\t\tlabel=\"tool.rich-text-strikethrough\"\n\t\t\t\t\tkbd=\"cmd+shift+s\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-link\"\n\t\t\t\t\tlabel=\"tool.rich-text-link\"\n\t\t\t\t\tkbd=\"cmd+shift+k\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-header\"\n\t\t\t\t\tlabel=\"tool.rich-text-header\"\n\t\t\t\t\tkbd=\"cmd+alt+[[1-6]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-orderedList\"\n\t\t\t\t\tlabel=\"tool.rich-text-orderedList\"\n\t\t\t\t\tkbd=\"cmd+shift+7\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-bulletedlist\"\n\t\t\t\t\tlabel=\"tool.rich-text-bulletList\"\n\t\t\t\t\tkbd=\"cmd+shift+8\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.a11y\" id=\"a11y\">\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape\"\n\t\t\t\t\tlabel=\"a11y.select-shape\"\n\t\t\t\t\tkbd=\"[[Tab]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape-direction\"\n\t\t\t\t\tlabel=\"a11y.select-shape-direction\"\n\t\t\t\t\tkbd=\"cmd+[[\u2191\u2192\u2193\u2190]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape-container\"\n\t\t\t\t\tlabel=\"a11y.enter-leave-container\"\n\t\t\t\t\tkbd=\"cmd+shift+[[\u2191\u2192]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-pan-camera\"\n\t\t\t\t\tlabel=\"a11y.pan-camera\"\n\t\t\t\t\tkbd=\"[[Space]]+[[\u2191\u2192\u2193\u2190]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"adjust-shape-styles\"\n\t\t\t\t\tlabel=\"a11y.adjust-shape-styles\"\n\t\t\t\t\tkbd=\"cmd+[[Enter]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"open-context-menu\"\n\t\t\t\t\tlabel=\"a11y.open-context-menu\"\n\t\t\t\t\tkbd=\"cmd+shift+[[Enter]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-move-shape\"\n\t\t\t\t\tlabel=\"a11y.move-shape\"\n\t\t\t\t\tkbd=\"[[\u2191\u2192\u2193\u2190]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-move-shape-faster\"\n\t\t\t\t\tlabel=\"a11y.move-shape-faster\"\n\t\t\t\t\tkbd=\"shift+[[\u2191\u2192\u2193\u2190]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-cw\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-cw\"\n\t\t\t\t\tkbd=\"shift+\uFE65\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-cw-fine\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-cw-fine\"\n\t\t\t\t\tkbd=\"shift+alt+\uFE65\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-ccw\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-ccw\"\n\t\t\t\t\tkbd=\"shift+\uFE64\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-ccw-fine\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-ccw-fine\"\n\t\t\t\t\tkbd=\"shift+alt+\uFE64\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"enlarge-shapes\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"shrink-shapes\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"a11y-repeat-shape-announce\" />\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-open-keyboard-shortcuts\"\n\t\t\t\t\tlabel=\"a11y.open-keyboard-shortcuts\"\n\t\t\t\t\tkbd=\"cmd+alt+/\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t{showCollaborationUi && (\n\t\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.collaboration\" id=\"collaboration\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,6 +31,7 @@ var import_DefaultContextMenu = require("../components/ContextMenu/DefaultContex
|
|
|
31
31
|
var import_CursorChatBubble = require("../components/CursorChatBubble");
|
|
32
32
|
var import_DefaultDebugMenu = require("../components/DebugMenu/DefaultDebugMenu");
|
|
33
33
|
var import_DefaultDebugPanel = require("../components/DefaultDebugPanel");
|
|
34
|
+
var import_DefaultFollowingIndicator = require("../components/DefaultFollowingIndicator");
|
|
34
35
|
var import_DefaultMenuPanel = require("../components/DefaultMenuPanel");
|
|
35
36
|
var import_Dialogs = require("../components/Dialogs");
|
|
36
37
|
var import_DefaultHelperButtons = require("../components/HelperButtons/DefaultHelperButtons");
|
|
@@ -87,6 +88,7 @@ function TldrawUiComponentsProvider({
|
|
|
87
88
|
Dialogs: import_Dialogs.DefaultDialogs,
|
|
88
89
|
Toasts: import_Toasts.DefaultToasts,
|
|
89
90
|
A11y: import_A11y.DefaultA11yAnnouncer,
|
|
91
|
+
FollowingIndicator: import_DefaultFollowingIndicator.DefaultFollowingIndicator,
|
|
90
92
|
..._overrides
|
|
91
93
|
}),
|
|
92
94
|
[_overrides, showCollaborationUi]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/ui/context/components.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useShallowObjectIdentity } from '@tldraw/editor'\nimport { ComponentType, ReactNode, createContext, useContext, useMemo } from 'react'\nimport { DefaultA11yAnnouncer } from '../components/A11y'\nimport {\n\tDefaultActionsMenu,\n\tTLUiActionsMenuProps,\n} from '../components/ActionsMenu/DefaultActionsMenu'\nimport {\n\tDefaultContextMenu,\n\tTLUiContextMenuProps,\n} from '../components/ContextMenu/DefaultContextMenu'\nimport { CursorChatBubble } from '../components/CursorChatBubble'\nimport { DefaultDebugMenu } from '../components/DebugMenu/DefaultDebugMenu'\nimport { DefaultDebugPanel } from '../components/DefaultDebugPanel'\nimport { DefaultMenuPanel } from '../components/DefaultMenuPanel'\nimport { DefaultDialogs } from '../components/Dialogs'\nimport { TLUiHelpMenuProps } from '../components/HelpMenu/DefaultHelpMenu'\nimport {\n\tDefaultHelperButtons,\n\tTLUiHelperButtonsProps,\n} from '../components/HelperButtons/DefaultHelperButtons'\nimport {\n\tDefaultKeyboardShortcutsDialog,\n\tTLUiKeyboardShortcutsDialogProps,\n} from '../components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog'\nimport { DefaultMainMenu, TLUiMainMenuProps } from '../components/MainMenu/DefaultMainMenu'\nimport { DefaultMinimap } from '../components/Minimap/DefaultMinimap'\nimport { DefaultNavigationPanel } from '../components/NavigationPanel/DefaultNavigationPanel'\nimport { DefaultPageMenu } from '../components/PageMenu/DefaultPageMenu'\nimport {\n\tDefaultQuickActions,\n\tTLUiQuickActionsProps,\n} from '../components/QuickActions/DefaultQuickActions'\nimport { DefaultSharePanel } from '../components/SharePanel/DefaultSharePanel'\nimport { DefaultStylePanel, TLUiStylePanelProps } from '../components/StylePanel/DefaultStylePanel'\nimport { DefaultToasts } from '../components/Toasts'\nimport { DefaultImageToolbar } from '../components/Toolbar/DefaultImageToolbar'\nimport {\n\tDefaultRichTextToolbar,\n\tTLUiRichTextToolbarProps,\n} from '../components/Toolbar/DefaultRichTextToolbar'\nimport { DefaultToolbar } from '../components/Toolbar/DefaultToolbar'\nimport { DefaultVideoToolbar } from '../components/Toolbar/DefaultVideoToolbar'\nimport { DefaultTopPanel } from '../components/TopPanel/DefaultTopPanel'\nimport { DefaultZoomMenu, TLUiZoomMenuProps } from '../components/ZoomMenu/DefaultZoomMenu'\nimport { useShowCollaborationUi } from '../hooks/useCollaborationStatus'\n\n/** @public */\nexport interface TLUiComponents {\n\tContextMenu?: ComponentType<TLUiContextMenuProps> | null\n\tActionsMenu?: ComponentType<TLUiActionsMenuProps> | null\n\tHelpMenu?: ComponentType<TLUiHelpMenuProps> | null\n\tZoomMenu?: ComponentType<TLUiZoomMenuProps> | null\n\tMainMenu?: ComponentType<TLUiMainMenuProps> | null\n\tMinimap?: ComponentType | null\n\tStylePanel?: ComponentType<TLUiStylePanelProps> | null\n\tPageMenu?: ComponentType | null\n\tNavigationPanel?: ComponentType | null\n\tToolbar?: ComponentType | null\n\tRichTextToolbar?: ComponentType<TLUiRichTextToolbarProps> | null\n\tImageToolbar?: ComponentType | null\n\tVideoToolbar?: ComponentType | null\n\tKeyboardShortcutsDialog?: ComponentType<TLUiKeyboardShortcutsDialogProps> | null\n\tQuickActions?: ComponentType<TLUiQuickActionsProps> | null\n\tHelperButtons?: ComponentType<TLUiHelperButtonsProps> | null\n\tDebugPanel?: ComponentType | null\n\tDebugMenu?: ComponentType | null\n\tMenuPanel?: ComponentType | null\n\tTopPanel?: ComponentType | null\n\tSharePanel?: ComponentType | null\n\tCursorChatBubble?: ComponentType | null\n\tDialogs?: ComponentType | null\n\tToasts?: ComponentType | null\n\tA11y?: ComponentType | null\n}\n\nconst TldrawUiComponentsContext = createContext<TLUiComponents | null>(null)\n\n/** @public */\nexport interface TLUiComponentsProviderProps {\n\toverrides?: TLUiComponents\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiComponentsProvider({\n\toverrides = {},\n\tchildren,\n}: TLUiComponentsProviderProps) {\n\tconst _overrides = useShallowObjectIdentity(overrides)\n\tconst showCollaborationUi = useShowCollaborationUi()\n\n\treturn (\n\t\t<TldrawUiComponentsContext.Provider\n\t\t\tvalue={useMemo(\n\t\t\t\t() => ({\n\t\t\t\t\tContextMenu: DefaultContextMenu,\n\t\t\t\t\tActionsMenu: DefaultActionsMenu,\n\t\t\t\t\tHelpMenu: null,\n\t\t\t\t\tZoomMenu: DefaultZoomMenu,\n\t\t\t\t\tMainMenu: DefaultMainMenu,\n\t\t\t\t\tMinimap: DefaultMinimap,\n\t\t\t\t\tStylePanel: DefaultStylePanel,\n\t\t\t\t\tPageMenu: DefaultPageMenu,\n\t\t\t\t\tNavigationPanel: DefaultNavigationPanel,\n\t\t\t\t\tToolbar: DefaultToolbar,\n\t\t\t\t\tRichTextToolbar: DefaultRichTextToolbar,\n\t\t\t\t\tImageToolbar: DefaultImageToolbar,\n\t\t\t\t\tVideoToolbar: DefaultVideoToolbar,\n\t\t\t\t\tKeyboardShortcutsDialog: DefaultKeyboardShortcutsDialog,\n\t\t\t\t\tQuickActions: DefaultQuickActions,\n\t\t\t\t\tHelperButtons: DefaultHelperButtons,\n\t\t\t\t\tDebugPanel: DefaultDebugPanel,\n\t\t\t\t\tDebugMenu: DefaultDebugMenu,\n\t\t\t\t\tMenuPanel: DefaultMenuPanel,\n\t\t\t\t\tSharePanel: showCollaborationUi ? DefaultSharePanel : null,\n\t\t\t\t\tCursorChatBubble: showCollaborationUi ? CursorChatBubble : null,\n\t\t\t\t\tTopPanel: showCollaborationUi ? DefaultTopPanel : null,\n\t\t\t\t\tDialogs: DefaultDialogs,\n\t\t\t\t\tToasts: DefaultToasts,\n\t\t\t\t\tA11y: DefaultA11yAnnouncer,\n\t\t\t\t\t..._overrides,\n\t\t\t\t}),\n\t\t\t\t[_overrides, showCollaborationUi]\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</TldrawUiComponentsContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useTldrawUiComponents() {\n\tconst components = useContext(TldrawUiComponentsContext)\n\tif (!components) {\n\t\tthrow new Error('useTldrawUiComponents must be used within a TldrawUiComponentsProvider')\n\t}\n\treturn components\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useShallowObjectIdentity } from '@tldraw/editor'\nimport { ComponentType, ReactNode, createContext, useContext, useMemo } from 'react'\nimport { DefaultA11yAnnouncer } from '../components/A11y'\nimport {\n\tDefaultActionsMenu,\n\tTLUiActionsMenuProps,\n} from '../components/ActionsMenu/DefaultActionsMenu'\nimport {\n\tDefaultContextMenu,\n\tTLUiContextMenuProps,\n} from '../components/ContextMenu/DefaultContextMenu'\nimport { CursorChatBubble } from '../components/CursorChatBubble'\nimport { DefaultDebugMenu } from '../components/DebugMenu/DefaultDebugMenu'\nimport { DefaultDebugPanel } from '../components/DefaultDebugPanel'\nimport { DefaultFollowingIndicator } from '../components/DefaultFollowingIndicator'\nimport { DefaultMenuPanel } from '../components/DefaultMenuPanel'\nimport { DefaultDialogs } from '../components/Dialogs'\nimport { TLUiHelpMenuProps } from '../components/HelpMenu/DefaultHelpMenu'\nimport {\n\tDefaultHelperButtons,\n\tTLUiHelperButtonsProps,\n} from '../components/HelperButtons/DefaultHelperButtons'\nimport {\n\tDefaultKeyboardShortcutsDialog,\n\tTLUiKeyboardShortcutsDialogProps,\n} from '../components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog'\nimport { DefaultMainMenu, TLUiMainMenuProps } from '../components/MainMenu/DefaultMainMenu'\nimport { DefaultMinimap } from '../components/Minimap/DefaultMinimap'\nimport { DefaultNavigationPanel } from '../components/NavigationPanel/DefaultNavigationPanel'\nimport { DefaultPageMenu } from '../components/PageMenu/DefaultPageMenu'\nimport {\n\tDefaultQuickActions,\n\tTLUiQuickActionsProps,\n} from '../components/QuickActions/DefaultQuickActions'\nimport { DefaultSharePanel } from '../components/SharePanel/DefaultSharePanel'\nimport { DefaultStylePanel, TLUiStylePanelProps } from '../components/StylePanel/DefaultStylePanel'\nimport { DefaultToasts } from '../components/Toasts'\nimport { DefaultImageToolbar } from '../components/Toolbar/DefaultImageToolbar'\nimport {\n\tDefaultRichTextToolbar,\n\tTLUiRichTextToolbarProps,\n} from '../components/Toolbar/DefaultRichTextToolbar'\nimport { DefaultToolbar } from '../components/Toolbar/DefaultToolbar'\nimport { DefaultVideoToolbar } from '../components/Toolbar/DefaultVideoToolbar'\nimport { DefaultTopPanel } from '../components/TopPanel/DefaultTopPanel'\nimport { DefaultZoomMenu, TLUiZoomMenuProps } from '../components/ZoomMenu/DefaultZoomMenu'\nimport { useShowCollaborationUi } from '../hooks/useCollaborationStatus'\n\n/** @public */\nexport interface TLUiComponents {\n\tContextMenu?: ComponentType<TLUiContextMenuProps> | null\n\tActionsMenu?: ComponentType<TLUiActionsMenuProps> | null\n\tHelpMenu?: ComponentType<TLUiHelpMenuProps> | null\n\tZoomMenu?: ComponentType<TLUiZoomMenuProps> | null\n\tMainMenu?: ComponentType<TLUiMainMenuProps> | null\n\tMinimap?: ComponentType | null\n\tStylePanel?: ComponentType<TLUiStylePanelProps> | null\n\tPageMenu?: ComponentType | null\n\tNavigationPanel?: ComponentType | null\n\tToolbar?: ComponentType | null\n\tRichTextToolbar?: ComponentType<TLUiRichTextToolbarProps> | null\n\tImageToolbar?: ComponentType | null\n\tVideoToolbar?: ComponentType | null\n\tKeyboardShortcutsDialog?: ComponentType<TLUiKeyboardShortcutsDialogProps> | null\n\tQuickActions?: ComponentType<TLUiQuickActionsProps> | null\n\tHelperButtons?: ComponentType<TLUiHelperButtonsProps> | null\n\tDebugPanel?: ComponentType | null\n\tDebugMenu?: ComponentType | null\n\tMenuPanel?: ComponentType | null\n\tTopPanel?: ComponentType | null\n\tSharePanel?: ComponentType | null\n\tCursorChatBubble?: ComponentType | null\n\tDialogs?: ComponentType | null\n\tToasts?: ComponentType | null\n\tA11y?: ComponentType | null\n\tFollowingIndicator?: ComponentType | null\n}\n\nconst TldrawUiComponentsContext = createContext<TLUiComponents | null>(null)\n\n/** @public */\nexport interface TLUiComponentsProviderProps {\n\toverrides?: TLUiComponents\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiComponentsProvider({\n\toverrides = {},\n\tchildren,\n}: TLUiComponentsProviderProps) {\n\tconst _overrides = useShallowObjectIdentity(overrides)\n\tconst showCollaborationUi = useShowCollaborationUi()\n\n\treturn (\n\t\t<TldrawUiComponentsContext.Provider\n\t\t\tvalue={useMemo(\n\t\t\t\t() => ({\n\t\t\t\t\tContextMenu: DefaultContextMenu,\n\t\t\t\t\tActionsMenu: DefaultActionsMenu,\n\t\t\t\t\tHelpMenu: null,\n\t\t\t\t\tZoomMenu: DefaultZoomMenu,\n\t\t\t\t\tMainMenu: DefaultMainMenu,\n\t\t\t\t\tMinimap: DefaultMinimap,\n\t\t\t\t\tStylePanel: DefaultStylePanel,\n\t\t\t\t\tPageMenu: DefaultPageMenu,\n\t\t\t\t\tNavigationPanel: DefaultNavigationPanel,\n\t\t\t\t\tToolbar: DefaultToolbar,\n\t\t\t\t\tRichTextToolbar: DefaultRichTextToolbar,\n\t\t\t\t\tImageToolbar: DefaultImageToolbar,\n\t\t\t\t\tVideoToolbar: DefaultVideoToolbar,\n\t\t\t\t\tKeyboardShortcutsDialog: DefaultKeyboardShortcutsDialog,\n\t\t\t\t\tQuickActions: DefaultQuickActions,\n\t\t\t\t\tHelperButtons: DefaultHelperButtons,\n\t\t\t\t\tDebugPanel: DefaultDebugPanel,\n\t\t\t\t\tDebugMenu: DefaultDebugMenu,\n\t\t\t\t\tMenuPanel: DefaultMenuPanel,\n\t\t\t\t\tSharePanel: showCollaborationUi ? DefaultSharePanel : null,\n\t\t\t\t\tCursorChatBubble: showCollaborationUi ? CursorChatBubble : null,\n\t\t\t\t\tTopPanel: showCollaborationUi ? DefaultTopPanel : null,\n\t\t\t\t\tDialogs: DefaultDialogs,\n\t\t\t\t\tToasts: DefaultToasts,\n\t\t\t\t\tA11y: DefaultA11yAnnouncer,\n\t\t\t\t\tFollowingIndicator: DefaultFollowingIndicator,\n\t\t\t\t\t..._overrides,\n\t\t\t\t}),\n\t\t\t\t[_overrides, showCollaborationUi]\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</TldrawUiComponentsContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useTldrawUiComponents() {\n\tconst components = useContext(TldrawUiComponentsContext)\n\tif (!components) {\n\t\tthrow new Error('useTldrawUiComponents must be used within a TldrawUiComponentsProvider')\n\t}\n\treturn components\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+FE;AA/FF,oBAAyC;AACzC,mBAA6E;AAC7E,kBAAqC;AACrC,gCAGO;AACP,gCAGO;AACP,8BAAiC;AACjC,8BAAiC;AACjC,+BAAkC;AAClC,uCAA0C;AAC1C,8BAAiC;AACjC,qBAA+B;AAE/B,kCAGO;AACP,4CAGO;AACP,6BAAmD;AACnD,4BAA+B;AAC/B,oCAAuC;AACvC,6BAAgC;AAChC,iCAGO;AACP,+BAAkC;AAClC,+BAAuD;AACvD,oBAA8B;AAC9B,iCAAoC;AACpC,oCAGO;AACP,4BAA+B;AAC/B,iCAAoC;AACpC,6BAAgC;AAChC,6BAAmD;AACnD,oCAAuC;AAgCvC,MAAM,gCAA4B,4BAAqC,IAAI;AASpE,SAAS,2BAA2B;AAAA,EAC1C,YAAY,CAAC;AAAA,EACb;AACD,GAAgC;AAC/B,QAAM,iBAAa,wCAAyB,SAAS;AACrD,QAAM,0BAAsB,sDAAuB;AAEnD,SACC;AAAA,IAAC,0BAA0B;AAAA,IAA1B;AAAA,MACA,WAAO;AAAA,QACN,OAAO;AAAA,UACN,aAAa;AAAA,UACb,aAAa;AAAA,UACb,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,cAAc;AAAA,UACd,yBAAyB;AAAA,UACzB,cAAc;AAAA,UACd,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,WAAW;AAAA,UACX,YAAY,sBAAsB,6CAAoB;AAAA,UACtD,kBAAkB,sBAAsB,2CAAmB;AAAA,UAC3D,UAAU,sBAAsB,yCAAkB;AAAA,UAClD,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,oBAAoB;AAAA,UACpB,GAAG;AAAA,QACJ;AAAA,QACA,CAAC,YAAY,mBAAmB;AAAA,MACjC;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,wBAAwB;AACvC,QAAM,iBAAa,yBAAW,yBAAyB;AACvD,MAAI,CAAC,YAAY;AAChB,UAAM,IAAI,MAAM,wEAAwE;AAAA,EACzF;AACA,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/ui/context/events.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\n\n/** @public */\nexport type TLUiEventSource =\n\t| 'menu'\n\t| 'main-menu'\n\t| 'context-menu'\n\t| 'zoom-menu'\n\t| 'document-name'\n\t| 'navigation-zone'\n\t| 'quick-actions'\n\t| 'actions-menu'\n\t| 'kbd'\n\t| 'debug-panel'\n\t| 'page-menu'\n\t| 'share-menu'\n\t| 'export-menu'\n\t| 'toolbar'\n\t| 'people-menu'\n\t| 'dialog'\n\t| 'help-menu'\n\t| 'helper-buttons'\n\t| 'style-panel'\n\t| 'rich-text-menu'\n\t| 'image-toolbar'\n\t| 'video-toolbar'\n\t| 'unknown'\n\n/** @public */\nexport interface TLUiEventMap {\n\t// Actions\n\tundo: null\n\tredo: null\n\t'change-language': { locale: string }\n\t'change-page': { direction?: 'prev' | 'next' }\n\t'select-adjacent-shape': { direction: 'prev' | 'next' | 'left' | 'right' | 'up' | 'down' }\n\t'delete-page': null\n\t'duplicate-page': null\n\t'move-page': null\n\t'new-page': null\n\t'rename-page': null\n\t'move-to-page': null\n\t'move-to-new-page': null\n\t'rename-document': null\n\t'group-shapes': null\n\t'ungroup-shapes': null\n\t'remove-frame': null\n\t'fit-frame-to-content': null\n\t'convert-to-embed': null\n\t'convert-to-bookmark': null\n\t'open-embed-link': null\n\t'toggle-auto-size': null\n\t'copy-as': { format: 'svg' | 'png' | 'json' }\n\t'export-as': { format: 'svg' | 'png' | 'json' }\n\t'export-all-as': { format: 'svg' | 'png' | 'json' }\n\t'download-original': null\n\t'edit-link': null\n\t'insert-embed': null\n\t'insert-media': null\n\t'replace-media': null\n\t'image-manipulate': null\n\t'alt-text-start': null\n\t'set-alt-text': null\n\t'align-shapes': {\n\t\toperation: 'left' | 'center-horizontal' | 'right' | 'top' | 'center-vertical' | 'bottom'\n\t}\n\t'duplicate-shapes': null\n\t'pack-shapes': null\n\t'stack-shapes': { operation: 'horizontal' | 'vertical' }\n\t'flip-shapes': { operation: 'horizontal' | 'vertical' }\n\t'distribute-shapes': { operation: 'horizontal' | 'vertical' }\n\t'stretch-shapes': { operation: 'horizontal' | 'vertical' }\n\t'reorder-shapes': {\n\t\toperation: 'toBack' | 'toFront' | 'forward' | 'backward'\n\t}\n\t'delete-shapes': null\n\t'select-all-shapes': null\n\t'select-none-shapes': null\n\t'rotate-ccw': { fine: boolean }\n\t'rotate-cw': { fine: boolean }\n\t'zoom-in': { towardsCursor: boolean }\n\t'zoom-out': { towardsCursor: boolean }\n\t'zoom-to-fit': null\n\t'zoom-to-selection': null\n\t'reset-zoom': null\n\t'zoom-into-view': null\n\t'zoom-to-content': null\n\t'open-menu': { id: string }\n\t'close-menu': { id: string }\n\t'create-new-project': null\n\t'save-project-to-file': null\n\t'open-file': null\n\t'select-tool': { id: string }\n\tprint: null\n\tcopy: null\n\tpaste: null\n\tcut: null\n\t'set-style': { id: string; value: string | number }\n\t'toggle-transparent': null\n\t'toggle-snap-mode': null\n\t'toggle-tool-lock': null\n\t'toggle-grid-mode': null\n\t'toggle-wrap-mode': null\n\t'toggle-focus-mode': null\n\t'toggle-debug-mode': null\n\t'toggle-dynamic-size-mode': null\n\t'toggle-paste-at-cursor': null\n\t'toggle-lock': null\n\t'toggle-reduce-motion': null\n\t'toggle-keyboard-shortcuts': null\n\t'toggle-ui-labels': null\n\t'toggle-edge-scrolling': null\n\t'color-scheme': { value: string }\n\t'exit-pen-mode': null\n\t'start-following': null\n\t'stop-following': null\n\t'set-color': null\n\t'change-user-name': null\n\t'open-cursor-chat': null\n\t'zoom-tool': null\n\t'unlock-all': null\n\t'enlarge-shapes': null\n\t'shrink-shapes': null\n\t'flatten-to-image': null\n\t'a11y-repeat-shape-announce': null\n\t'open-url': {
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\n\n/** @public */\nexport type TLUiEventSource =\n\t| 'menu'\n\t| 'main-menu'\n\t| 'context-menu'\n\t| 'zoom-menu'\n\t| 'document-name'\n\t| 'navigation-zone'\n\t| 'quick-actions'\n\t| 'actions-menu'\n\t| 'kbd'\n\t| 'debug-panel'\n\t| 'page-menu'\n\t| 'share-menu'\n\t| 'export-menu'\n\t| 'toolbar'\n\t| 'people-menu'\n\t| 'dialog'\n\t| 'help-menu'\n\t| 'helper-buttons'\n\t| 'style-panel'\n\t| 'rich-text-menu'\n\t| 'image-toolbar'\n\t| 'video-toolbar'\n\t| 'unknown'\n\n/** @public */\nexport interface TLUiEventMap {\n\t// Actions\n\tundo: null\n\tredo: null\n\t'change-language': { locale: string }\n\t'change-page': { direction?: 'prev' | 'next' }\n\t'select-adjacent-shape': { direction: 'prev' | 'next' | 'left' | 'right' | 'up' | 'down' }\n\t'delete-page': null\n\t'duplicate-page': null\n\t'move-page': null\n\t'new-page': null\n\t'rename-page': null\n\t'move-to-page': null\n\t'move-to-new-page': null\n\t'rename-document': null\n\t'group-shapes': null\n\t'ungroup-shapes': null\n\t'remove-frame': null\n\t'fit-frame-to-content': null\n\t'convert-to-embed': null\n\t'convert-to-bookmark': null\n\t'open-embed-link': null\n\t'toggle-auto-size': null\n\t'copy-as': { format: 'svg' | 'png' | 'json' }\n\t'export-as': { format: 'svg' | 'png' | 'json' }\n\t'export-all-as': { format: 'svg' | 'png' | 'json' }\n\t'download-original': null\n\t'edit-link': null\n\t'insert-embed': null\n\t'insert-media': null\n\t'replace-media': null\n\t'image-manipulate': null\n\t'alt-text-start': null\n\t'set-alt-text': null\n\t'align-shapes': {\n\t\toperation: 'left' | 'center-horizontal' | 'right' | 'top' | 'center-vertical' | 'bottom'\n\t}\n\t'duplicate-shapes': null\n\t'pack-shapes': null\n\t'stack-shapes': { operation: 'horizontal' | 'vertical' }\n\t'flip-shapes': { operation: 'horizontal' | 'vertical' }\n\t'distribute-shapes': { operation: 'horizontal' | 'vertical' }\n\t'stretch-shapes': { operation: 'horizontal' | 'vertical' }\n\t'reorder-shapes': {\n\t\toperation: 'toBack' | 'toFront' | 'forward' | 'backward'\n\t}\n\t'delete-shapes': null\n\t'select-all-shapes': null\n\t'select-none-shapes': null\n\t'rotate-ccw': { fine: boolean }\n\t'rotate-cw': { fine: boolean }\n\t'zoom-in': { towardsCursor: boolean }\n\t'zoom-out': { towardsCursor: boolean }\n\t'zoom-to-fit': null\n\t'zoom-to-selection': null\n\t'reset-zoom': null\n\t'zoom-into-view': null\n\t'zoom-to-content': null\n\t'open-menu': { id: string }\n\t'close-menu': { id: string }\n\t'create-new-project': null\n\t'save-project-to-file': null\n\t'open-file': null\n\t'select-tool': { id: string }\n\tprint: null\n\tcopy: null\n\tpaste: null\n\tcut: null\n\t'set-style': { id: string; value: string | number }\n\t'toggle-transparent': null\n\t'toggle-snap-mode': null\n\t'toggle-tool-lock': null\n\t'toggle-grid-mode': null\n\t'toggle-wrap-mode': null\n\t'toggle-focus-mode': null\n\t'toggle-debug-mode': null\n\t'toggle-dynamic-size-mode': null\n\t'toggle-paste-at-cursor': null\n\t'toggle-lock': null\n\t'toggle-reduce-motion': null\n\t'toggle-keyboard-shortcuts': null\n\t'toggle-ui-labels': null\n\t'toggle-edge-scrolling': null\n\t'color-scheme': { value: string }\n\t'exit-pen-mode': null\n\t'start-following': null\n\t'stop-following': null\n\t'set-color': null\n\t'change-user-name': null\n\t'open-cursor-chat': null\n\t'zoom-tool': null\n\t'unlock-all': null\n\t'enlarge-shapes': null\n\t'shrink-shapes': null\n\t'flatten-to-image': null\n\t'a11y-repeat-shape-announce': null\n\t'open-url': { destinationUrl: string }\n\t'open-context-menu': null\n\t'adjust-shape-styles': null\n\t'copy-link': null\n\t'drag-tool': { id: string }\n\t'image-replace': null\n\t'video-replace': null\n\t'open-kbd-shortcuts': null\n\t'rich-text': {\n\t\toperation:\n\t\t\t| 'bold'\n\t\t\t| 'strike'\n\t\t\t| 'link'\n\t\t\t| 'link-edit'\n\t\t\t| 'link-visit'\n\t\t\t| 'link-remove'\n\t\t\t| 'heading'\n\t\t\t| 'bulletList'\n\t}\n\tedit: null\n}\n\n/** @public */\nexport type TLUiEventData<K> = K extends null\n\t? { source: TLUiEventSource }\n\t: { source: TLUiEventSource } & K\n\n/** @public */\nexport type TLUiEventHandler = <T extends keyof TLUiEventMap>(\n\tname: T,\n\tdata: TLUiEventData<TLUiEventMap[T]>\n) => void\n\n/** @public */\nexport type TLUiEventContextType = TLUiEventHandler\n\n/** @internal */\nconst defaultEventHandler: TLUiEventContextType = () => void null\n\n/** @internal */\nexport const EventsContext = React.createContext<TLUiEventContextType | null>(null)\n\n/** @public */\nexport interface EventsProviderProps {\n\tonEvent?: TLUiEventHandler\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiEventsProvider({ onEvent, children }: EventsProviderProps) {\n\treturn (\n\t\t<EventsContext.Provider value={onEvent ?? defaultEventHandler}>\n\t\t\t{children}\n\t\t</EventsContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useUiEvents(): TLUiEventContextType {\n\tconst eventHandler = React.useContext(EventsContext)\n\treturn eventHandler ?? defaultEventHandler\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgLE;AAhLF,YAAuB;AAkKvB,MAAM,sBAA4C,MAAM;AAGjD,MAAM,gBAAgB,MAAM,cAA2C,IAAI;AAS3E,SAAS,uBAAuB,EAAE,SAAS,SAAS,GAAwB;AAClF,SACC,4CAAC,cAAc,UAAd,EAAuB,OAAO,WAAW,qBACxC,UACF;AAEF;AAGO,SAAS,cAAoC;AACnD,QAAM,eAAe,MAAM,WAAW,aAAa;AACnD,SAAO,gBAAgB;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|