npm - tldraw - Versions diffs - 3.16.0-canary.ffdf566dd0a8 → 3.16.0-next.282b7be564ae - Mend

tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-next.282b7be564ae

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

Files changed (229) hide show

package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/video/VideoShapeUtil.tsx"],
-  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tMediaHelpers,\n\tSvgExportContext,\n\tTLAsset,\n\tTLVideoShape,\n\tWeakCache,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseEditorComponents,\n\tuseIsEditing,\n\tvideoShapeMigrations,\n\tvideoShapeProps,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactEventHandler, memo, useCallback, useEffect, useRef, useState } from 'react'\nimport { BrokenAssetIcon } from '../shared/BrokenAssetIcon'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { useImageOrVideoAsset } from '../shared/useImageOrVideoAsset'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nconst videoSvgExportCache = new WeakCache<TLAsset, Promise<string | null>>()\n\n/** @public */\nexport interface VideoShapeOptions {\n\t/**\n\t * Should videos play automatically?\n\t */\n\tautoplay: boolean\n}\n\n/** @public */\nexport class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {\n\tstatic override type = 'video' as const\n\tstatic override props = videoShapeProps\n\tstatic override migrations = videoShapeMigrations\n\n\toverride options: VideoShapeOptions = {\n\t\tautoplay: true,\n\t}\n\n\toverride canEdit() {\n\t\treturn true\n\t}\n\toverride isAspectRatioLocked() {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLVideoShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tautoplay: this.options.autoplay,\n\t\t\turl: '',\n\t\t\taltText: '',\n\t\t\t// Not used, but once upon a time were used to sync video state between users\n\t\t\ttime: 0,\n\t\t\tplaying: true,\n\t\t}\n\t}\n\n\toverride getAriaDescriptor(shape: TLVideoShape) {\n\t\treturn shape.props.altText\n\t}\n\n\tcomponent(shape: TLVideoShape) {\n\t\treturn <VideoShape shape={shape} />\n\t}\n\n\tindicator(shape: TLVideoShape) {\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLVideoShape, ctx: SvgExportContext) {\n\t\tconst props = shape.props\n\t\tif (!props.assetId) return null\n\n\t\tconst asset = this.editor.getAsset<TLAsset>(props.assetId)\n\t\tif (!asset) return null\n\n\t\tconst src = await videoSvgExportCache.get(asset, async () => {\n\t\t\tconst assetUrl = await ctx.resolveAssetUrl(asset.id, props.w)\n\t\t\tif (!assetUrl) return null\n\t\t\tconst video = await MediaHelpers.loadVideo(assetUrl)\n\t\t\treturn await MediaHelpers.getVideoFrameAsDataUrl(video, 0)\n\t\t})\n\n\t\tif (!src) return null\n\n\t\treturn <image href={src} width={props.w} height={props.h} aria-label={shape.props.altText} />\n\t}\n}\n\nconst VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape }) {\n\tconst editor = useEditor()\n\tconst showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110\n\tconst isEditing = useIsEditing(shape.id)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst { Spinner } = useEditorComponents()\n\n\tconst { asset, url } = useImageOrVideoAsset({\n\t\tshapeId: shape.id,\n\t\tassetId: shape.props.assetId,\n\t\twidth: shape.props.w,\n\t})\n\n\tconst rVideo = useRef<HTMLVideoElement>(null!)\n\n\tconst [isLoaded, setIsLoaded] = useState(false)\n\n\tconst handleLoadedData = useCallback<ReactEventHandler<HTMLVideoElement>>((e) => {\n\t\tconst video = e.currentTarget\n\t\tif (!video) return\n\t\tsetIsLoaded(true)\n\t}, [])\n\n\tconst [isFullscreen, setIsFullscreen] = useState(false)\n\n\tuseEffect(() => {\n\t\tconst fullscreenChange = () => setIsFullscreen(document.fullscreenElement === rVideo.current)\n\t\tdocument.addEventListener('fullscreenchange', fullscreenChange)\n\n\t\treturn () => document.removeEventListener('fullscreenchange', fullscreenChange)\n\t})\n\n\t// Focus the video when editing\n\tuseEffect(() => {\n\t\tconst video = rVideo.current\n\t\tif (!video) return\n\n\t\tif (isEditing) {\n\t\t\tif (document.activeElement !== video) {\n\t\t\t\tvideo.focus()\n\t\t\t}\n\t\t}\n\t}, [isEditing, isLoaded])\n\n\treturn (\n\t\t<>\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'var(--color-text-3)',\n\t\t\t\t\tbackgroundColor: asset ? 'transparent' : 'var(--color-low)',\n\t\t\t\t\tborder: asset ? 'none' : '1px solid var(--color-low-border)',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"tl-counter-scaled\">\n\t\t\t\t\t<div className=\"tl-video-container\">\n\t\t\t\t\t\t{!asset ? (\n\t\t\t\t\t\t\t<BrokenAssetIcon />\n\t\t\t\t\t\t) : Spinner && !asset.props.src ? (\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t) : url ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<video\n\t\t\t\t\t\t\t\t\tkey={url}\n\t\t\t\t\t\t\t\t\tref={rVideo}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tisEditing\n\t\t\t\t\t\t\t\t\t\t\t? { pointerEvents: 'all' }\n\t\t\t\t\t\t\t\t\t\t\t: !isLoaded\n\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'none' }\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={classNames('tl-video', `tl-video-shape-${shape.id.split(':')[1]}`, {\n\t\t\t\t\t\t\t\t\t\t'tl-video-is-fullscreen': isFullscreen,\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\t\t\t\tautoPlay={shape.props.autoplay && !prefersReducedMotion}\n\t\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\t\t\tdisableRemotePlayback\n\t\t\t\t\t\t\t\t\tdisablePictureInPicture\n\t\t\t\t\t\t\t\t\tcontrols={isEditing && showControls}\n\t\t\t\t\t\t\t\t\tonLoadedData={handleLoadedData}\n\t\t\t\t\t\t\t\t\thidden={!isLoaded}\n\t\t\t\t\t\t\t\t\taria-label={shape.props.altText}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<source src={url} />\n\t\t\t\t\t\t\t\t</video>\n\t\t\t\t\t\t\t\t{!isLoaded && Spinner && <Spinner />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t\t{'url' in shape.props && shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t</>\n\t)\n})\n"],
+  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tMediaHelpers,\n\tSvgExportContext,\n\tTLAsset,\n\tTLVideoShape,\n\tWeakCache,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseEditorComponents,\n\tuseIsEditing,\n\tvideoShapeMigrations,\n\tvideoShapeProps,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactEventHandler, memo, useCallback, useEffect, useRef, useState } from 'react'\nimport { BrokenAssetIcon } from '../shared/BrokenAssetIcon'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { useImageOrVideoAsset } from '../shared/useImageOrVideoAsset'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nconst videoSvgExportCache = new WeakCache<TLAsset, Promise<string | null>>()\n\n/** @public */\nexport interface VideoShapeOptions {\n\t/**\n\t * Should videos play automatically?\n\t */\n\tautoplay: boolean\n}\n\n/** @public */\nexport class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {\n\tstatic override type = 'video' as const\n\tstatic override props = videoShapeProps\n\tstatic override migrations = videoShapeMigrations\n\n\toverride options: VideoShapeOptions = {\n\t\tautoplay: true,\n\t}\n\n\toverride canEdit() {\n\t\treturn true\n\t}\n\toverride isAspectRatioLocked() {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLVideoShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tautoplay: this.options.autoplay,\n\t\t\turl: '',\n\t\t\taltText: '',\n\t\t\t// Not used, but once upon a time were used to sync video state between users\n\t\t\ttime: 0,\n\t\t\tplaying: true,\n\t\t}\n\t}\n\n\toverride getAriaDescriptor(shape: TLVideoShape) {\n\t\treturn shape.props.altText\n\t}\n\n\tcomponent(shape: TLVideoShape) {\n\t\treturn <VideoShape shape={shape} />\n\t}\n\n\tindicator(shape: TLVideoShape) {\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLVideoShape, ctx: SvgExportContext) {\n\t\tconst props = shape.props\n\t\tif (!props.assetId) return null\n\n\t\tconst asset = this.editor.getAsset<TLAsset>(props.assetId)\n\t\tif (!asset) return null\n\n\t\tconst src = await videoSvgExportCache.get(asset, async () => {\n\t\t\tconst assetUrl = await ctx.resolveAssetUrl(asset.id, props.w)\n\t\t\tif (!assetUrl) return null\n\t\t\tconst video = await MediaHelpers.loadVideo(assetUrl)\n\t\t\treturn await MediaHelpers.getVideoFrameAsDataUrl(video, 0)\n\t\t})\n\n\t\tif (!src) return null\n\n\t\treturn <image href={src} width={props.w} height={props.h} aria-label={shape.props.altText} />\n\t}\n}\n\nconst VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape }) {\n\tconst editor = useEditor()\n\tconst showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110\n\tconst isEditing = useIsEditing(shape.id)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst { Spinner } = useEditorComponents()\n\n\tconst { asset, url } = useImageOrVideoAsset({\n\t\tshapeId: shape.id,\n\t\tassetId: shape.props.assetId,\n\t\twidth: shape.props.w,\n\t})\n\n\tconst rVideo = useRef<HTMLVideoElement>(null!)\n\n\tconst [isLoaded, setIsLoaded] = useState(false)\n\n\tconst handleLoadedData = useCallback<ReactEventHandler<HTMLVideoElement>>((e) => {\n\t\tconst video = e.currentTarget\n\t\tif (!video) return\n\t\tsetIsLoaded(true)\n\t}, [])\n\n\tconst [isFullscreen, setIsFullscreen] = useState(false)\n\n\tuseEffect(() => {\n\t\tconst fullscreenChange = () => setIsFullscreen(document.fullscreenElement === rVideo.current)\n\t\tdocument.addEventListener('fullscreenchange', fullscreenChange)\n\n\t\treturn () => document.removeEventListener('fullscreenchange', fullscreenChange)\n\t})\n\n\t// Focus the video when editing\n\tuseEffect(() => {\n\t\tconst video = rVideo.current\n\t\tif (!video) return\n\n\t\tif (isEditing) {\n\t\t\tif (document.activeElement !== video) {\n\t\t\t\tvideo.focus()\n\t\t\t}\n\t\t}\n\t}, [isEditing, isLoaded])\n\n\treturn (\n\t\t<>\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'var(--tl-color-text-3)',\n\t\t\t\t\tbackgroundColor: asset ? 'transparent' : 'var(--tl-color-low)',\n\t\t\t\t\tborder: asset ? 'none' : '1px solid var(--tl-color-low-border)',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"tl-counter-scaled\">\n\t\t\t\t\t<div className=\"tl-video-container\">\n\t\t\t\t\t\t{!asset ? (\n\t\t\t\t\t\t\t<BrokenAssetIcon />\n\t\t\t\t\t\t) : Spinner && !asset.props.src ? (\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t) : url ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<video\n\t\t\t\t\t\t\t\t\tkey={url}\n\t\t\t\t\t\t\t\t\tref={rVideo}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tisEditing\n\t\t\t\t\t\t\t\t\t\t\t? { pointerEvents: 'all' }\n\t\t\t\t\t\t\t\t\t\t\t: !isLoaded\n\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'none' }\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={classNames('tl-video', `tl-video-shape-${shape.id.split(':')[1]}`, {\n\t\t\t\t\t\t\t\t\t\t'tl-video-is-fullscreen': isFullscreen,\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\t\t\t\tautoPlay={shape.props.autoplay && !prefersReducedMotion}\n\t\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\t\t\tdisableRemotePlayback\n\t\t\t\t\t\t\t\t\tdisablePictureInPicture\n\t\t\t\t\t\t\t\t\tcontrols={isEditing && showControls}\n\t\t\t\t\t\t\t\t\tonLoadedData={handleLoadedData}\n\t\t\t\t\t\t\t\t\thidden={!isLoaded}\n\t\t\t\t\t\t\t\t\taria-label={shape.props.altText}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<source src={url} />\n\t\t\t\t\t\t\t\t</video>\n\t\t\t\t\t\t\t\t{!isLoaded && Spinner && <Spinner />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t\t{'url' in shape.props && shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t</>\n\t)\n})\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoES;AApET,oBAcO;AACP,wBAAuB;AACvB,mBAAkF;AAClF,6BAAgC;AAChC,6BAAgC;AAChC,kCAAqC;AACrC,qCAAwC;AAExC,MAAM,sBAAsB,IAAI,wBAA2C;AAWpE,MAAM,uBAAuB,+BAA+B;AAAA,EAClE,OAAgB,OAAO;AAAA,EACvB,OAAgB,QAAQ;AAAA,EACxB,OAAgB,aAAa;AAAA,EAEpB,UAA6B;AAAA,IACrC,UAAU;AAAA,EACX;AAAA,EAES,UAAU;AAClB,WAAO;AAAA,EACR;AAAA,EACS,sBAAsB;AAC9B,WAAO;AAAA,EACR;AAAA,EAES,kBAAyC;AACjD,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,UAAU,KAAK,QAAQ;AAAA,MACvB,KAAK;AAAA,MACL,SAAS;AAAA;AAAA,MAET,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACD;AAAA,EAES,kBAAkB,OAAqB;AAC/C,WAAO,MAAM,MAAM;AAAA,EACpB;AAAA,EAEA,UAAU,OAAqB;AAC9B,WAAO,4CAAC,cAAW,OAAc;AAAA,EAClC;AAAA,EAEA,UAAU,OAAqB;AAC9B,WAAO,4CAAC,UAAK,WAAO,8BAAe,MAAM,MAAM,CAAC,GAAG,YAAQ,8BAAe,MAAM,MAAM,CAAC,GAAG;AAAA,EAC3F;AAAA,EAEA,MAAe,MAAM,OAAqB,KAAuB;AAChE,UAAM,QAAQ,MAAM;AACpB,QAAI,CAAC,MAAM,QAAS,QAAO;AAE3B,UAAM,QAAQ,KAAK,OAAO,SAAkB,MAAM,OAAO;AACzD,QAAI,CAAC,MAAO,QAAO;AAEnB,UAAM,MAAM,MAAM,oBAAoB,IAAI,OAAO,YAAY;AAC5D,YAAM,WAAW,MAAM,IAAI,gBAAgB,MAAM,IAAI,MAAM,CAAC;AAC5D,UAAI,CAAC,SAAU,QAAO;AACtB,YAAM,QAAQ,MAAM,2BAAa,UAAU,QAAQ;AACnD,aAAO,MAAM,2BAAa,uBAAuB,OAAO,CAAC;AAAA,IAC1D,CAAC;AAED,QAAI,CAAC,IAAK,QAAO;AAEjB,WAAO,4CAAC,WAAM,MAAM,KAAK,OAAO,MAAM,GAAG,QAAQ,MAAM,GAAG,cAAY,MAAM,MAAM,SAAS;AAAA,EAC5F;AACD;AAEA,MAAM,iBAAa,mBAAK,SAASA,YAAW,EAAE,MAAM,GAA4B;AAC/E,QAAM,aAAS,yBAAU;AACzB,QAAM,eAAe,OAAO,iBAAiB,KAAK,EAAE,OAAO,IAAI,OAAO,aAAa,KAAK;AACxF,QAAM,gBAAY,4BAAa,MAAM,EAAE;AACvC,QAAM,2BAAuB,wDAAwB;AACrD,QAAM,EAAE,QAAQ,QAAI,mCAAoB;AAExC,QAAM,EAAE,OAAO,IAAI,QAAI,kDAAqB;AAAA,IAC3C,SAAS,MAAM;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IACrB,OAAO,MAAM,MAAM;AAAA,EACpB,CAAC;AAED,QAAM,aAAS,qBAAyB,IAAK;AAE7C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,QAAM,uBAAmB,0BAAiD,CAAC,MAAM;AAChF,UAAM,QAAQ,EAAE;AAChB,QAAI,CAAC,MAAO;AACZ,gBAAY,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,8BAAU,MAAM;AACf,UAAM,mBAAmB,MAAM,gBAAgB,SAAS,sBAAsB,OAAO,OAAO;AAC5F,aAAS,iBAAiB,oBAAoB,gBAAgB;AAE9D,WAAO,MAAM,SAAS,oBAAoB,oBAAoB,gBAAgB;AAAA,EAC/E,CAAC;AAGD,8BAAU,MAAM;AACf,UAAM,QAAQ,OAAO;AACrB,QAAI,CAAC,MAAO;AAEZ,QAAI,WAAW;AACd,UAAI,SAAS,kBAAkB,OAAO;AACrC,cAAM,MAAM;AAAA,MACb;AAAA,IACD;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,OAAO;AAAA,UACP,iBAAiB,QAAQ,gBAAgB;AAAA,UACzC,QAAQ,QAAQ,SAAS;AAAA,QAC1B;AAAA,QAEA,sDAAC,SAAI,WAAU,qBACd,sDAAC,SAAI,WAAU,sBACb,WAAC,QACD,4CAAC,0CAAgB,IACd,WAAW,CAAC,MAAM,MAAM,MAC3B,4CAAC,WAAQ,IACN,MACH,4EACC;AAAA;AAAA,YAAC;AAAA;AAAA,cAEA,KAAK;AAAA,cACL,OACC,YACG,EAAE,eAAe,MAAM,IACvB,CAAC,WACA,EAAE,SAAS,OAAO,IAClB;AAAA,cAEL,eAAW,kBAAAC,SAAW,YAAY,kBAAkB,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,CAAC,IAAI;AAAA,gBAC7E,0BAA0B;AAAA,cAC3B,CAAC;AAAA,cACD,OAAM;AAAA,cACN,QAAO;AAAA,cACP,WAAW;AAAA,cACX,aAAW;AAAA,cACX,UAAU,MAAM,MAAM,YAAY,CAAC;AAAA,cACnC,OAAK;AAAA,cACL,MAAI;AAAA,cACJ,uBAAqB;AAAA,cACrB,yBAAuB;AAAA,cACvB,UAAU,aAAa;AAAA,cACvB,cAAc;AAAA,cACd,QAAQ,CAAC;AAAA,cACT,cAAY,MAAM,MAAM;AAAA,cAExB,sDAAC,YAAO,KAAK,KAAK;AAAA;AAAA,YA1Bb;AAAA,UA2BN;AAAA,UACC,CAAC,YAAY,WAAW,4CAAC,WAAQ;AAAA,WACnC,IACG,MACL,GACD;AAAA;AAAA,IACD;AAAA,IACC,SAAS,MAAM,SAAS,MAAM,MAAM,OAAO,4CAAC,0CAAgB,KAAK,MAAM,MAAM,KAAK;AAAA,KACpF;AAEF,CAAC;",
   "names": ["VideoShape", "classNames"]
 }

package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/tools/SelectTool/childStates/Translating.ts"],
-  "sourcesContent": ["import {\n\tBoundsSnapPoint,\n\tEditor,\n\tMat,\n\tMatModel,\n\tPageRecordType,\n\tStateNode,\n\tTLNoteShape,\n\tTLPointerEventInfo,\n\tTLShape,\n\tTLShapePartial,\n\tTLTickEventInfo,\n\tVec,\n\tbind,\n\tcompact,\n\tisPageId,\n\tkickoutOccludedShapes,\n} from '@tldraw/editor'\nimport {\n\tNOTE_ADJACENT_POSITION_SNAP_RADIUS,\n\tNOTE_CENTER_OFFSET,\n\tgetAvailableNoteAdjacentPositions,\n} from '../../../shapes/note/noteHelpers'\nimport { DragAndDropManager } from '../DragAndDropManager'\n\nexport type TranslatingInfo = TLPointerEventInfo & {\n\ttarget: 'shape'\n\tisCreating?: boolean\n\tcreatingMarkId?: string\n\tonCreate?(): void\n\tdidStartInPit?: boolean\n\tonInteractionEnd?: string\n}\n\nexport class Translating extends StateNode {\n\tstatic override id = 'translating'\n\n\tinfo = {} as TranslatingInfo\n\n\tselectionSnapshot: TranslatingSnapshot = {} as any\n\n\tsnapshot: TranslatingSnapshot = {} as any\n\n\tmarkId = ''\n\n\tisCloning = false\n\tisCreating = false\n\tonCreate(_shape: TLShape | null): void {\n\t\treturn\n\t}\n\n\tdragAndDropManager = new DragAndDropManager(this.editor)\n\n\toverride onEnter(info: TranslatingInfo) {\n\t\tconst { isCreating = false, creatingMarkId, onCreate = () => void null } = info\n\n\t\tif (!this.editor.getSelectedShapeIds()?.length) {\n\t\t\tthis.parent.transition('idle')\n\t\t\treturn\n\t\t}\n\n\t\tthis.info = info\n\t\tthis.parent.setCurrentToolIdMask(info.onInteractionEnd)\n\t\tthis.isCreating = isCreating\n\n\t\tthis.markId = ''\n\n\t\tif (isCreating) {\n\t\t\tif (creatingMarkId) {\n\t\t\t\tthis.markId = creatingMarkId\n\t\t\t} else {\n\t\t\t\t// handle legacy implicit `creating:{shapeId}` marks\n\t\t\t\tconst markId = this.editor.getMarkIdMatching(\n\t\t\t\t\t`creating:${this.editor.getOnlySelectedShapeId()}`\n\t\t\t\t)\n\t\t\t\tif (markId) {\n\t\t\t\t\tthis.markId = markId\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthis.markId = this.editor.markHistoryStoppingPoint('translating')\n\t\t}\n\n\t\tthis.onCreate = onCreate\n\n\t\tthis.isCloning = false\n\t\tthis.info = info\n\n\t\tthis.editor.setCursor({ type: 'move', rotation: 0 })\n\t\tthis.selectionSnapshot = getTranslatingSnapshot(this.editor)\n\n\t\t// Don't clone on create; otherwise clone on altKey\n\t\tif (!this.isCreating) {\n\t\t\tif (this.editor.inputs.altKey) {\n\t\t\t\tthis.startCloning()\n\t\t\t\tif (this.isCloning) return\n\t\t\t}\n\t\t}\n\n\t\tthis.snapshot = this.selectionSnapshot\n\t\tthis.handleStart()\n\t\tthis.updateShapes()\n\t}\n\n\toverride onExit() {\n\t\tthis.parent.setCurrentToolIdMask(undefined)\n\t\tthis.selectionSnapshot = {} as any\n\t\tthis.snapshot = {} as any\n\t\tthis.editor.snaps.clearIndicators()\n\t\tthis.editor.setCursor({ type: 'default', rotation: 0 })\n\t\tthis.dragAndDropManager.clear()\n\t}\n\n\toverride onTick({ elapsed }: TLTickEventInfo) {\n\t\tconst { editor } = this\n\t\teditor.edgeScrollManager.updateEdgeScrolling(elapsed)\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyDown() {\n\t\tif (this.editor.inputs.altKey && !this.isCloning) {\n\t\t\tthis.startCloning()\n\t\t\tif (this.isCloning) return\n\t\t}\n\n\t\t// need to update in case user pressed a different modifier key\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyUp() {\n\t\tif (!this.editor.inputs.altKey && this.isCloning) {\n\t\t\tthis.stopCloning()\n\t\t\treturn\n\t\t}\n\n\t\t// need to update in case user pressed a different modifier key\n\t\tthis.updateShapes()\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\tprotected startCloning() {\n\t\tif (this.isCreating) return\n\t\tconst shapeIds = Array.from(this.editor.getSelectedShapeIds())\n\n\t\t// If we can't create the shapes, don't even start cloning\n\t\tif (!this.editor.canCreateShapes(shapeIds)) return\n\n\t\tthis.isCloning = true\n\t\tthis.reset()\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('translate cloning')\n\n\t\tthis.editor.duplicateShapes(Array.from(this.editor.getSelectedShapeIds()))\n\n\t\tthis.snapshot = getTranslatingSnapshot(this.editor)\n\t\tthis.handleStart()\n\t\tthis.updateShapes()\n\t}\n\n\tprotected stopCloning() {\n\t\tthis.isCloning = false\n\t\tthis.snapshot = this.selectionSnapshot\n\t\tthis.reset()\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('translate')\n\t\tthis.updateShapes()\n\t}\n\n\treset() {\n\t\tthis.editor.bailToMark(this.markId)\n\t}\n\n\tprotected complete() {\n\t\tthis.updateShapes()\n\t\tthis.dragAndDropManager.dropShapes(this.snapshot.movingShapes)\n\t\tthis.handleEnd()\n\t\tkickoutOccludedShapes(\n\t\t\tthis.editor,\n\t\t\tthis.snapshot.movingShapes.map((s) => s.id)\n\t\t)\n\n\t\tif (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd)\n\t\t} else {\n\t\t\tif (this.isCreating) {\n\t\t\t\tthis.onCreate?.(this.editor.getOnlySelectedShape())\n\t\t\t} else {\n\t\t\t\tthis.parent.transition('idle')\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate cancel() {\n\t\t// Call onTranslateCancel callback before resetting\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)\n\t\t\tif (current) {\n\t\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\t\tutil.onTranslateCancel?.(shape, current)\n\t\t\t}\n\t\t})\n\n\t\tthis.reset()\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd)\n\t\t} else {\n\t\t\tthis.parent.transition('idle', this.info)\n\t\t}\n\t}\n\n\tprotected handleStart() {\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslateStart?.(shape)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\n\t\tthis.dragAndDropManager.startDraggingShapes(\n\t\t\t// Get fresh shapes from the snapshot, in case onTranslateStart mutates the shape\n\t\t\tcompact(this.snapshot.movingShapes.map((s) => this.editor.getShape(s.id))),\n\t\t\t// Start from the place where the user started dragging\n\t\t\tthis.editor.inputs.originPagePoint,\n\t\t\tthis.updateParentTransforms\n\t\t)\n\n\t\tthis.editor.setHoveredShape(null)\n\t}\n\n\tprotected handleEnd() {\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tif (this.isCloning && movingShapes.length > 0) {\n\t\t\tconst currentAveragePagePoint = Vec.Average(\n\t\t\t\tmovingShapes.map((s) => this.editor.getShapePageTransform(s.id)!.point())\n\t\t\t)\n\t\t\tconst offset = Vec.Sub(currentAveragePagePoint, this.selectionSnapshot.averagePagePoint)\n\t\t\tif (!Vec.IsNaN(offset)) {\n\t\t\t\tthis.editor.updateInstanceState({\n\t\t\t\t\tduplicateProps: {\n\t\t\t\t\t\tshapeIds: movingShapes.map((s) => s.id),\n\t\t\t\t\t\toffset: { x: offset.x, y: offset.y },\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslateEnd?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\tprotected updateShapes() {\n\t\tconst { snapshot } = this\n\n\t\t// We should have started already, but hey\n\t\tthis.dragAndDropManager.startDraggingShapes(\n\t\t\tsnapshot.movingShapes,\n\t\t\tthis.editor.inputs.originPagePoint,\n\t\t\tthis.updateParentTransforms\n\t\t)\n\n\t\tmoveShapesToPoint({\n\t\t\teditor: this.editor,\n\t\t\tsnapshot,\n\t\t})\n\n\t\tconst { movingShapes } = snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslate?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\t@bind\n\tprotected updateParentTransforms() {\n\t\tconst {\n\t\t\teditor,\n\t\t\tsnapshot: { shapeSnapshots },\n\t\t} = this\n\t\tconst movingShapes: TLShape[] = []\n\n\t\tshapeSnapshots.forEach((shapeSnapshot) => {\n\t\t\tconst shape = editor.getShape(shapeSnapshot.shape.id)\n\t\t\tif (!shape) return null\n\t\t\tmovingShapes.push(shape)\n\n\t\t\tconst parentTransform = isPageId(shape.parentId)\n\t\t\t\t? null\n\t\t\t\t: Mat.Inverse(editor.getShapePageTransform(shape.parentId)!)\n\n\t\t\tshapeSnapshot.parentTransform = parentTransform\n\t\t})\n\t}\n}\n\nfunction getTranslatingSnapshot(editor: Editor) {\n\tconst movingShapes: TLShape[] = []\n\tconst pagePoints: Vec[] = []\n\n\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\tconst shapeSnapshots = compact(\n\t\tselectedShapeIds.map((id): null | MovingShapeSnapshot => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return null\n\t\t\tmovingShapes.push(shape)\n\n\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\tconst pagePoint = pageTransform.point()\n\t\t\tconst pageRotation = pageTransform.rotation()\n\n\t\t\tpagePoints.push(pagePoint)\n\n\t\t\tconst parentTransform = PageRecordType.isId(shape.parentId)\n\t\t\t\t? null\n\t\t\t\t: Mat.Inverse(editor.getShapePageTransform(shape.parentId)!)\n\n\t\t\treturn {\n\t\t\t\tshape,\n\t\t\t\tpagePoint,\n\t\t\t\tpageRotation,\n\t\t\t\tparentTransform,\n\t\t\t}\n\t\t})\n\t)\n\n\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\tlet initialSnapPoints: BoundsSnapPoint[] = []\n\n\tif (onlySelectedShape) {\n\t\tinitialSnapPoints = editor.snaps.shapeBounds.getSnapPoints(onlySelectedShape.id)!\n\t} else {\n\t\tconst selectionPageBounds = editor.getSelectionPageBounds()\n\t\tif (selectionPageBounds) {\n\t\t\tinitialSnapPoints = selectionPageBounds.cornersAndCenter.map((p, i) => ({\n\t\t\t\tid: 'selection:' + i,\n\t\t\t\tx: p.x,\n\t\t\t\ty: p.y,\n\t\t\t}))\n\t\t}\n\t}\n\n\tlet noteAdjacentPositions: Vec[] | undefined\n\tlet noteSnapshot: (MovingShapeSnapshot & { shape: TLNoteShape }) | undefined\n\n\tconst { originPagePoint } = editor.inputs\n\n\tconst allHoveredNotes = shapeSnapshots.filter(\n\t\t(s) =>\n\t\t\teditor.isShapeOfType<TLNoteShape>(s.shape, 'note') &&\n\t\t\teditor.isPointInShape(s.shape, originPagePoint)\n\t) as (MovingShapeSnapshot & { shape: TLNoteShape })[]\n\n\tif (allHoveredNotes.length === 0) {\n\t\t// noop\n\t} else if (allHoveredNotes.length === 1) {\n\t\t// just one, easy\n\t\tnoteSnapshot = allHoveredNotes[0]\n\t} else {\n\t\t// More than one under the cursor, so we need to find the highest shape in z-order\n\t\tconst allShapesSorted = editor.getCurrentPageShapesSorted()\n\t\tnoteSnapshot = allHoveredNotes\n\t\t\t.map((s) => ({\n\t\t\t\tsnapshot: s,\n\t\t\t\tindex: allShapesSorted.findIndex((shape) => shape.id === s.shape.id),\n\t\t\t}))\n\t\t\t.sort((a, b) => b.index - a.index)[0]?.snapshot // highest up first\n\t}\n\n\tif (noteSnapshot) {\n\t\tnoteAdjacentPositions = getAvailableNoteAdjacentPositions(\n\t\t\teditor,\n\t\t\tnoteSnapshot.pageRotation,\n\t\t\tnoteSnapshot.shape.props.scale,\n\t\t\tnoteSnapshot.shape.props.growY ?? 0\n\t\t)\n\t}\n\n\treturn {\n\t\taveragePagePoint: Vec.Average(pagePoints),\n\t\tmovingShapes,\n\t\tshapeSnapshots,\n\t\tinitialPageBounds: editor.getSelectionPageBounds()!,\n\t\tinitialSnapPoints,\n\t\tnoteAdjacentPositions,\n\t\tnoteSnapshot,\n\t}\n}\n\nexport type TranslatingSnapshot = ReturnType<typeof getTranslatingSnapshot>\n\nexport interface MovingShapeSnapshot {\n\tshape: TLShape\n\tpagePoint: Vec\n\tpageRotation: number\n\tparentTransform: MatModel | null\n}\n\nexport function moveShapesToPoint({\n\teditor,\n\tsnapshot,\n}: {\n\teditor: Editor\n\tsnapshot: TranslatingSnapshot\n}) {\n\tconst { inputs } = editor\n\n\tconst {\n\t\tnoteSnapshot,\n\t\tnoteAdjacentPositions,\n\t\tinitialPageBounds,\n\t\tinitialSnapPoints,\n\t\tshapeSnapshots,\n\t\taveragePagePoint,\n\t} = snapshot\n\n\tconst isGridMode = editor.getInstanceState().isGridMode\n\n\tconst gridSize = editor.getDocumentSettings().gridSize\n\n\tconst delta = Vec.Sub(inputs.currentPagePoint, inputs.originPagePoint)\n\n\tconst flatten: 'x' | 'y' | null = editor.inputs.shiftKey\n\t\t? Math.abs(delta.x) < Math.abs(delta.y)\n\t\t\t? 'x'\n\t\t\t: 'y'\n\t\t: null\n\n\tif (flatten === 'x') {\n\t\tdelta.x = 0\n\t} else if (flatten === 'y') {\n\t\tdelta.y = 0\n\t}\n\n\t// Provisional snapping\n\teditor.snaps.clearIndicators()\n\n\t// If the user isn't moving super quick\n\tconst isSnapping = editor.user.getIsSnapMode() ? !inputs.ctrlKey : inputs.ctrlKey\n\tlet snappedToPit = false\n\tif (isSnapping && editor.inputs.pointerVelocity.len() < 0.5) {\n\t\t// snapping\n\t\tconst { nudge } = editor.snaps.shapeBounds.snapTranslateShapes({\n\t\t\tdragDelta: delta,\n\t\t\tinitialSelectionPageBounds: initialPageBounds,\n\t\t\tlockedAxis: flatten,\n\t\t\tinitialSelectionSnapPoints: initialSnapPoints,\n\t\t})\n\n\t\tdelta.add(nudge)\n\t} else {\n\t\t// for sticky notes, snap to grid position next to other notes\n\t\tif (noteSnapshot && noteAdjacentPositions) {\n\t\t\tconst { scale } = noteSnapshot.shape.props\n\t\t\tconst pageCenter = noteSnapshot.pagePoint\n\t\t\t\t.clone()\n\t\t\t\t.add(delta)\n\t\t\t\t// use the middle of the note, disregarding extra height\n\t\t\t\t.add(NOTE_CENTER_OFFSET.clone().mul(scale).rot(noteSnapshot.pageRotation))\n\n\t\t\t// Find the pit with the center closest to the put center\n\t\t\tlet min = NOTE_ADJACENT_POSITION_SNAP_RADIUS / editor.getZoomLevel() // in screen space\n\t\t\tlet offset = new Vec(0, 0)\n\t\t\tfor (const pit of noteAdjacentPositions) {\n\t\t\t\t// We've already filtered pits with the same page rotation\n\t\t\t\tconst deltaToPit = Vec.Sub(pageCenter, pit)\n\t\t\t\tconst dist = deltaToPit.len()\n\t\t\t\tif (dist < min) {\n\t\t\t\t\tsnappedToPit = true\n\t\t\t\t\tmin = dist\n\t\t\t\t\toffset = deltaToPit\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdelta.sub(offset)\n\t\t}\n\t}\n\n\tconst averageSnappedPoint = Vec.Add(averagePagePoint, delta)\n\n\t// we don't want to snap to the grid if we're holding the ctrl key, if we've already snapped into a pit, or if we're showing snapping indicators\n\tconst snapIndicators = editor.snaps.getIndicators()\n\tif (isGridMode && !inputs.ctrlKey && !snappedToPit && snapIndicators.length === 0) {\n\t\taverageSnappedPoint.snapToGrid(gridSize)\n\t}\n\n\tconst averageSnap = Vec.Sub(averageSnappedPoint, averagePagePoint)\n\n\teditor.updateShapes(\n\t\tcompact(\n\t\t\tshapeSnapshots.map(({ shape, pagePoint, parentTransform }): TLShapePartial | null => {\n\t\t\t\tconst newPagePoint = Vec.Add(pagePoint, averageSnap)\n\n\t\t\t\tconst newLocalPoint = parentTransform\n\t\t\t\t\t? Mat.applyToPoint(parentTransform, newPagePoint)\n\t\t\t\t\t: newPagePoint\n\n\t\t\t\treturn {\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tx: newLocalPoint.x,\n\t\t\t\t\ty: newLocalPoint.y,\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBoundsSnapPoint,\n\tEditor,\n\tMat,\n\tMatModel,\n\tPageRecordType,\n\tStateNode,\n\tTLNoteShape,\n\tTLPointerEventInfo,\n\tTLShape,\n\tTLShapePartial,\n\tTLTickEventInfo,\n\tVec,\n\tbind,\n\tcompact,\n\tisPageId,\n\tkickoutOccludedShapes,\n} from '@tldraw/editor'\nimport {\n\tNOTE_ADJACENT_POSITION_SNAP_RADIUS,\n\tNOTE_CENTER_OFFSET,\n\tgetAvailableNoteAdjacentPositions,\n} from '../../../shapes/note/noteHelpers'\nimport { DragAndDropManager } from '../DragAndDropManager'\n\nexport type TranslatingInfo = TLPointerEventInfo & {\n\ttarget: 'shape'\n\tisCreating?: boolean\n\tcreatingMarkId?: string\n\tonCreate?(): void\n\tonInteractionEnd?: string\n}\n\nexport class Translating extends StateNode {\n\tstatic override id = 'translating'\n\n\tinfo = {} as TranslatingInfo\n\n\tselectionSnapshot: TranslatingSnapshot = {} as any\n\n\tsnapshot: TranslatingSnapshot = {} as any\n\n\tmarkId = ''\n\n\tisCloning = false\n\tisCreating = false\n\tonCreate(_shape: TLShape | null): void {\n\t\treturn\n\t}\n\n\tdragAndDropManager = new DragAndDropManager(this.editor)\n\n\toverride onEnter(info: TranslatingInfo) {\n\t\tconst { isCreating = false, creatingMarkId, onCreate = () => void null } = info\n\n\t\tif (!this.editor.getSelectedShapeIds()?.length) {\n\t\t\tthis.parent.transition('idle')\n\t\t\treturn\n\t\t}\n\n\t\tthis.info = info\n\t\tthis.parent.setCurrentToolIdMask(info.onInteractionEnd)\n\t\tthis.isCreating = isCreating\n\n\t\tthis.markId = ''\n\n\t\tif (isCreating) {\n\t\t\tif (creatingMarkId) {\n\t\t\t\tthis.markId = creatingMarkId\n\t\t\t} else {\n\t\t\t\t// handle legacy implicit `creating:{shapeId}` marks\n\t\t\t\tconst markId = this.editor.getMarkIdMatching(\n\t\t\t\t\t`creating:${this.editor.getOnlySelectedShapeId()}`\n\t\t\t\t)\n\t\t\t\tif (markId) {\n\t\t\t\t\tthis.markId = markId\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthis.markId = this.editor.markHistoryStoppingPoint('translating')\n\t\t}\n\n\t\tthis.onCreate = onCreate\n\n\t\tthis.isCloning = false\n\t\tthis.info = info\n\n\t\tthis.editor.setCursor({ type: 'move', rotation: 0 })\n\t\tthis.selectionSnapshot = getTranslatingSnapshot(this.editor)\n\n\t\t// Don't clone on create; otherwise clone on altKey\n\t\tif (!this.isCreating) {\n\t\t\tif (this.editor.inputs.altKey) {\n\t\t\t\tthis.startCloning()\n\t\t\t\tif (this.isCloning) return\n\t\t\t}\n\t\t}\n\n\t\tthis.snapshot = this.selectionSnapshot\n\t\tthis.handleStart()\n\t\tthis.updateShapes()\n\t}\n\n\toverride onExit() {\n\t\tthis.parent.setCurrentToolIdMask(undefined)\n\t\tthis.selectionSnapshot = {} as any\n\t\tthis.snapshot = {} as any\n\t\tthis.editor.snaps.clearIndicators()\n\t\tthis.editor.setCursor({ type: 'default', rotation: 0 })\n\t\tthis.dragAndDropManager.clear()\n\t}\n\n\toverride onTick({ elapsed }: TLTickEventInfo) {\n\t\tconst { editor } = this\n\t\teditor.edgeScrollManager.updateEdgeScrolling(elapsed)\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyDown() {\n\t\tif (this.editor.inputs.altKey && !this.isCloning) {\n\t\t\tthis.startCloning()\n\t\t\tif (this.isCloning) return\n\t\t}\n\n\t\t// need to update in case user pressed a different modifier key\n\t\tthis.updateShapes()\n\t}\n\n\toverride onKeyUp() {\n\t\tif (!this.editor.inputs.altKey && this.isCloning) {\n\t\t\tthis.stopCloning()\n\t\t\treturn\n\t\t}\n\n\t\t// need to update in case user pressed a different modifier key\n\t\tthis.updateShapes()\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\tprotected startCloning() {\n\t\tif (this.isCreating) return\n\t\tconst shapeIds = Array.from(this.editor.getSelectedShapeIds())\n\n\t\t// If we can't create the shapes, don't even start cloning\n\t\tif (!this.editor.canCreateShapes(shapeIds)) return\n\n\t\tthis.isCloning = true\n\t\tthis.reset()\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('translate cloning')\n\n\t\tthis.editor.duplicateShapes(Array.from(this.editor.getSelectedShapeIds()))\n\n\t\tthis.snapshot = getTranslatingSnapshot(this.editor)\n\t\tthis.handleStart()\n\t\tthis.updateShapes()\n\t}\n\n\tprotected stopCloning() {\n\t\tthis.isCloning = false\n\t\tthis.snapshot = this.selectionSnapshot\n\t\tthis.reset()\n\t\tthis.markId = this.editor.markHistoryStoppingPoint('translate')\n\t\tthis.updateShapes()\n\t}\n\n\treset() {\n\t\tthis.editor.bailToMark(this.markId)\n\t}\n\n\tprotected complete() {\n\t\tthis.updateShapes()\n\t\tthis.dragAndDropManager.dropShapes(this.snapshot.movingShapes)\n\t\tthis.handleEnd()\n\t\tkickoutOccludedShapes(\n\t\t\tthis.editor,\n\t\t\tthis.snapshot.movingShapes.map((s) => s.id)\n\t\t)\n\n\t\tif (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd)\n\t\t} else {\n\t\t\tif (this.isCreating) {\n\t\t\t\tthis.onCreate?.(this.editor.getOnlySelectedShape())\n\t\t\t} else {\n\t\t\t\tthis.parent.transition('idle')\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate cancel() {\n\t\t// Call onTranslateCancel callback before resetting\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)\n\t\t\tif (current) {\n\t\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\t\tutil.onTranslateCancel?.(shape, current)\n\t\t\t}\n\t\t})\n\n\t\tthis.reset()\n\t\tif (this.info.onInteractionEnd) {\n\t\t\tthis.editor.setCurrentTool(this.info.onInteractionEnd)\n\t\t} else {\n\t\t\tthis.parent.transition('idle', this.info)\n\t\t}\n\t}\n\n\tprotected handleStart() {\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslateStart?.(shape)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\n\t\tthis.dragAndDropManager.startDraggingShapes(\n\t\t\t// Get fresh shapes from the snapshot, in case onTranslateStart mutates the shape\n\t\t\tcompact(this.snapshot.movingShapes.map((s) => this.editor.getShape(s.id))),\n\t\t\t// Start from the place where the user started dragging\n\t\t\tthis.editor.inputs.originPagePoint,\n\t\t\tthis.updateParentTransforms\n\t\t)\n\n\t\tthis.editor.setHoveredShape(null)\n\t}\n\n\tprotected handleEnd() {\n\t\tconst { movingShapes } = this.snapshot\n\n\t\tif (this.isCloning && movingShapes.length > 0) {\n\t\t\tconst currentAveragePagePoint = Vec.Average(\n\t\t\t\tmovingShapes.map((s) => this.editor.getShapePageTransform(s.id)!.point())\n\t\t\t)\n\t\t\tconst offset = Vec.Sub(currentAveragePagePoint, this.selectionSnapshot.averagePagePoint)\n\t\t\tif (!Vec.IsNaN(offset)) {\n\t\t\t\tthis.editor.updateInstanceState({\n\t\t\t\t\tduplicateProps: {\n\t\t\t\t\t\tshapeIds: movingShapes.map((s) => s.id),\n\t\t\t\t\t\toffset: { x: offset.x, y: offset.y },\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslateEnd?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\tprotected updateShapes() {\n\t\tconst { snapshot } = this\n\n\t\t// We should have started already, but hey\n\t\tthis.dragAndDropManager.startDraggingShapes(\n\t\t\tsnapshot.movingShapes,\n\t\t\tthis.editor.inputs.originPagePoint,\n\t\t\tthis.updateParentTransforms\n\t\t)\n\n\t\tmoveShapesToPoint({\n\t\t\teditor: this.editor,\n\t\t\tsnapshot,\n\t\t})\n\n\t\tconst { movingShapes } = snapshot\n\n\t\tconst changes: TLShapePartial[] = []\n\n\t\tmovingShapes.forEach((shape) => {\n\t\t\tconst current = this.editor.getShape(shape.id)!\n\t\t\tconst util = this.editor.getShapeUtil(shape)\n\t\t\tconst change = util.onTranslate?.(shape, current)\n\t\t\tif (change) {\n\t\t\t\tchanges.push(change)\n\t\t\t}\n\t\t})\n\n\t\tif (changes.length > 0) {\n\t\t\tthis.editor.updateShapes(changes)\n\t\t}\n\t}\n\n\t@bind\n\tprotected updateParentTransforms() {\n\t\tconst {\n\t\t\teditor,\n\t\t\tsnapshot: { shapeSnapshots },\n\t\t} = this\n\t\tconst movingShapes: TLShape[] = []\n\n\t\tshapeSnapshots.forEach((shapeSnapshot) => {\n\t\t\tconst shape = editor.getShape(shapeSnapshot.shape.id)\n\t\t\tif (!shape) return null\n\t\t\tmovingShapes.push(shape)\n\n\t\t\tconst parentTransform = isPageId(shape.parentId)\n\t\t\t\t? null\n\t\t\t\t: Mat.Inverse(editor.getShapePageTransform(shape.parentId)!)\n\n\t\t\tshapeSnapshot.parentTransform = parentTransform\n\t\t})\n\t}\n}\n\nfunction getTranslatingSnapshot(editor: Editor) {\n\tconst movingShapes: TLShape[] = []\n\tconst pagePoints: Vec[] = []\n\n\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\tconst shapeSnapshots = compact(\n\t\tselectedShapeIds.map((id): null | MovingShapeSnapshot => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return null\n\t\t\tmovingShapes.push(shape)\n\n\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\tconst pagePoint = pageTransform.point()\n\t\t\tconst pageRotation = pageTransform.rotation()\n\n\t\t\tpagePoints.push(pagePoint)\n\n\t\t\tconst parentTransform = PageRecordType.isId(shape.parentId)\n\t\t\t\t? null\n\t\t\t\t: Mat.Inverse(editor.getShapePageTransform(shape.parentId)!)\n\n\t\t\treturn {\n\t\t\t\tshape,\n\t\t\t\tpagePoint,\n\t\t\t\tpageRotation,\n\t\t\t\tparentTransform,\n\t\t\t}\n\t\t})\n\t)\n\n\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\tlet initialSnapPoints: BoundsSnapPoint[] = []\n\n\tif (onlySelectedShape) {\n\t\tinitialSnapPoints = editor.snaps.shapeBounds.getSnapPoints(onlySelectedShape.id)!\n\t} else {\n\t\tconst selectionPageBounds = editor.getSelectionPageBounds()\n\t\tif (selectionPageBounds) {\n\t\t\tinitialSnapPoints = selectionPageBounds.cornersAndCenter.map((p, i) => ({\n\t\t\t\tid: 'selection:' + i,\n\t\t\t\tx: p.x,\n\t\t\t\ty: p.y,\n\t\t\t}))\n\t\t}\n\t}\n\n\tlet noteAdjacentPositions: Vec[] | undefined\n\tlet noteSnapshot: (MovingShapeSnapshot & { shape: TLNoteShape }) | undefined\n\n\tconst { originPagePoint } = editor.inputs\n\n\tconst allHoveredNotes = shapeSnapshots.filter(\n\t\t(s) =>\n\t\t\teditor.isShapeOfType<TLNoteShape>(s.shape, 'note') &&\n\t\t\teditor.isPointInShape(s.shape, originPagePoint)\n\t) as (MovingShapeSnapshot & { shape: TLNoteShape })[]\n\n\tif (allHoveredNotes.length === 0) {\n\t\t// noop\n\t} else if (allHoveredNotes.length === 1) {\n\t\t// just one, easy\n\t\tnoteSnapshot = allHoveredNotes[0]\n\t} else {\n\t\t// More than one under the cursor, so we need to find the highest shape in z-order\n\t\tconst allShapesSorted = editor.getCurrentPageShapesSorted()\n\t\tnoteSnapshot = allHoveredNotes\n\t\t\t.map((s) => ({\n\t\t\t\tsnapshot: s,\n\t\t\t\tindex: allShapesSorted.findIndex((shape) => shape.id === s.shape.id),\n\t\t\t}))\n\t\t\t.sort((a, b) => b.index - a.index)[0]?.snapshot // highest up first\n\t}\n\n\tif (noteSnapshot) {\n\t\tnoteAdjacentPositions = getAvailableNoteAdjacentPositions(\n\t\t\teditor,\n\t\t\tnoteSnapshot.pageRotation,\n\t\t\tnoteSnapshot.shape.props.scale,\n\t\t\tnoteSnapshot.shape.props.growY ?? 0\n\t\t)\n\t}\n\n\treturn {\n\t\taveragePagePoint: Vec.Average(pagePoints),\n\t\tmovingShapes,\n\t\tshapeSnapshots,\n\t\tinitialPageBounds: editor.getSelectionPageBounds()!,\n\t\tinitialSnapPoints,\n\t\tnoteAdjacentPositions,\n\t\tnoteSnapshot,\n\t}\n}\n\nexport type TranslatingSnapshot = ReturnType<typeof getTranslatingSnapshot>\n\nexport interface MovingShapeSnapshot {\n\tshape: TLShape\n\tpagePoint: Vec\n\tpageRotation: number\n\tparentTransform: MatModel | null\n}\n\nexport function moveShapesToPoint({\n\teditor,\n\tsnapshot,\n}: {\n\teditor: Editor\n\tsnapshot: TranslatingSnapshot\n}) {\n\tconst { inputs } = editor\n\n\tconst {\n\t\tnoteSnapshot,\n\t\tnoteAdjacentPositions,\n\t\tinitialPageBounds,\n\t\tinitialSnapPoints,\n\t\tshapeSnapshots,\n\t\taveragePagePoint,\n\t} = snapshot\n\n\tconst isGridMode = editor.getInstanceState().isGridMode\n\n\tconst gridSize = editor.getDocumentSettings().gridSize\n\n\tconst delta = Vec.Sub(inputs.currentPagePoint, inputs.originPagePoint)\n\n\tconst flatten: 'x' | 'y' | null = editor.inputs.shiftKey\n\t\t? Math.abs(delta.x) < Math.abs(delta.y)\n\t\t\t? 'x'\n\t\t\t: 'y'\n\t\t: null\n\n\tif (flatten === 'x') {\n\t\tdelta.x = 0\n\t} else if (flatten === 'y') {\n\t\tdelta.y = 0\n\t}\n\n\t// Provisional snapping\n\teditor.snaps.clearIndicators()\n\n\t// If the user isn't moving super quick\n\tconst isSnapping = editor.user.getIsSnapMode() ? !inputs.ctrlKey : inputs.ctrlKey\n\tlet snappedToPit = false\n\tif (isSnapping && editor.inputs.pointerVelocity.len() < 0.5) {\n\t\t// snapping\n\t\tconst { nudge } = editor.snaps.shapeBounds.snapTranslateShapes({\n\t\t\tdragDelta: delta,\n\t\t\tinitialSelectionPageBounds: initialPageBounds,\n\t\t\tlockedAxis: flatten,\n\t\t\tinitialSelectionSnapPoints: initialSnapPoints,\n\t\t})\n\n\t\tdelta.add(nudge)\n\t} else {\n\t\t// for sticky notes, snap to grid position next to other notes\n\t\tif (noteSnapshot && noteAdjacentPositions) {\n\t\t\tconst { scale } = noteSnapshot.shape.props\n\t\t\tconst pageCenter = noteSnapshot.pagePoint\n\t\t\t\t.clone()\n\t\t\t\t.add(delta)\n\t\t\t\t// use the middle of the note, disregarding extra height\n\t\t\t\t.add(NOTE_CENTER_OFFSET.clone().mul(scale).rot(noteSnapshot.pageRotation))\n\n\t\t\t// Find the pit with the center closest to the put center\n\t\t\tlet min = NOTE_ADJACENT_POSITION_SNAP_RADIUS / editor.getZoomLevel() // in screen space\n\t\t\tlet offset = new Vec(0, 0)\n\t\t\tfor (const pit of noteAdjacentPositions) {\n\t\t\t\t// We've already filtered pits with the same page rotation\n\t\t\t\tconst deltaToPit = Vec.Sub(pageCenter, pit)\n\t\t\t\tconst dist = deltaToPit.len()\n\t\t\t\tif (dist < min) {\n\t\t\t\t\tsnappedToPit = true\n\t\t\t\t\tmin = dist\n\t\t\t\t\toffset = deltaToPit\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdelta.sub(offset)\n\t\t}\n\t}\n\n\tconst averageSnappedPoint = Vec.Add(averagePagePoint, delta)\n\n\t// we don't want to snap to the grid if we're holding the ctrl key, if we've already snapped into a pit, or if we're showing snapping indicators\n\tconst snapIndicators = editor.snaps.getIndicators()\n\tif (isGridMode && !inputs.ctrlKey && !snappedToPit && snapIndicators.length === 0) {\n\t\taverageSnappedPoint.snapToGrid(gridSize)\n\t}\n\n\tconst averageSnap = Vec.Sub(averageSnappedPoint, averagePagePoint)\n\n\teditor.updateShapes(\n\t\tcompact(\n\t\t\tshapeSnapshots.map(({ shape, pagePoint, parentTransform }): TLShapePartial | null => {\n\t\t\t\tconst newPagePoint = Vec.Add(pagePoint, averageSnap)\n\n\t\t\t\tconst newLocalPoint = parentTransform\n\t\t\t\t\t? Mat.applyToPoint(parentTransform, newPagePoint)\n\t\t\t\t\t: newPagePoint\n\n\t\t\t\treturn {\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tx: newLocalPoint.x,\n\t\t\t\t\ty: newLocalPoint.y,\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -128,6 +128,18 @@ const TldrawUiContent = import_react.default.memo(function TldrawUI() {
     []
   );
   const { "toggle-focus-mode": toggleFocus } = (0, import_actions.useActions)();
+  const { breakpointsAbove, breakpointsBelow } = (0, import_react.useMemo)(() => {
+    const breakpointsAbove2 = [];
+    const breakpointsBelow2 = [];
+    for (let bp = 0; bp < import_constants.PORTRAIT_BREAKPOINTS.length; bp++) {
+      if (bp <= breakpoint) {
+        breakpointsAbove2.push(bp);
+      } else {
+        breakpointsBelow2.push(bp);
+      }
+    }
+    return { breakpointsAbove: breakpointsAbove2, breakpointsBelow: breakpointsBelow2 };
+  }, [breakpoint]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -136,6 +148,8 @@ const TldrawUiContent = import_react.default.memo(function TldrawUI() {
       }),
       "data-iseditinganything": hideToolbarWhileEditing,
       "data-breakpoint": breakpoint,
+      "data-breakpoints-above": breakpointsAbove.join(" "),
+      "data-breakpoints-below": breakpointsBelow.join(" "),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11y.SkipToMainContent, {}),
         isFocusMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-layout__top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/TldrawUi.tsx"],
-  "sourcesContent": ["import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { ReactNode, useRef, useState } from 'react'\nimport { TLUiAssetUrlOverrides } from './assetUrls'\nimport { SkipToMainContent } from './components/A11y'\nimport { FollowingIndicator } from './components/FollowingIndicator'\nimport { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'\nimport { PORTRAIT_BREAKPOINT } 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\tCursorChatBubble,\n\t\tRichTextToolbar,\n\t\tImageToolbar,\n\t\tVideoToolbar,\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\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>\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{RichTextToolbar && <RichTextToolbar />}\n\t\t\t{ImageToolbar && <ImageToolbar />}\n\t\t\t{VideoToolbar && <VideoToolbar />}\n\t\t\t{Toasts && <Toasts />}\n\t\t\t{Dialogs && <Dialogs />}\n\t\t\t<FollowingIndicator />\n\t\t\t{CursorChatBubble && <CursorChatBubble />}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "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",
-  "names": ["React", "TldrawUi", "TldrawUiInner", "classNames"]
+  "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 { FollowingIndicator } from './components/FollowingIndicator'\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\tCursorChatBubble,\n\t\tRichTextToolbar,\n\t\tImageToolbar,\n\t\tVideoToolbar,\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{RichTextToolbar && <RichTextToolbar />}\n\t\t\t{ImageToolbar && <ImageToolbar />}\n\t\t\t{VideoToolbar && <VideoToolbar />}\n\t\t\t{Toasts && <Toasts />}\n\t\t\t{Dialogs && <Dialogs />}\n\t\t\t<FollowingIndicator />\n\t\t\t{CursorChatBubble && <CursorChatBubble />}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "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",
+  "names": ["React", "TldrawUi", "TldrawUiInner", "breakpointsAbove", "breakpointsBelow", "classNames"]
 }

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

@@ -31,6 +31,7 @@ var import_useTranslation = require("../../hooks/useTranslation/useTranslation")
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");
 var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
+var import_layout = require("../primitives/layout");
 var import_TldrawUiMenuContext = require("../primitives/menus/TldrawUiMenuContext");
 var import_DefaultActionsMenuContent = require("./DefaultActionsMenuContent");
 const DefaultActionsMenu = (0, import_react.memo)(function DefaultActionsMenu2({
@@ -39,6 +40,7 @@ const DefaultActionsMenu = (0, import_react.memo)(function DefaultActionsMenu2({
   const msg = (0, import_useTranslation.useTranslation)();
   const breakpoint = (0, import_breakpoints.useBreakpoint)();
   const isReadonlyMode = (0, import_useReadonly.useReadonly)();
+  const { orientation } = (0, import_layout.useTldrawUiOrientation)();
   const ref = (0, import_react.useRef)(null);
   (0, import_editor.usePassThroughWheelEvents)(ref);
   const editor = (0, import_editor.useEditor)();
@@ -56,21 +58,28 @@ const DefaultActionsMenu = (0, import_react.memo)(function DefaultActionsMenu2({
         type: "icon",
         "data-testid": "actions-menu.button",
         title: msg("actions-menu.title"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "dots-vertical", small: true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiButtonIcon.TldrawUiButtonIcon,
+          {
+            icon: orientation === "horizontal" ? "dots-vertical" : "dots-horizontal",
+            small: true
+          }
+        )
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_TldrawUiPopover.TldrawUiPopoverContent,
       {
-        side: breakpoint >= import_constants.PORTRAIT_BREAKPOINT.TABLET ? "bottom" : "top",
+        side: orientation === "horizontal" ? breakpoint >= import_constants.PORTRAIT_BREAKPOINT.TABLET ? "bottom" : "top" : "right",
         sideOffset: 6,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_TldrawUiToolbar.TldrawUiToolbar,
           {
             ref,
             label: msg("actions-menu.title"),
-            className: "tlui-actions-menu tlui-buttons__grid",
+            className: "tlui-actions-menu",
             "data-testid": "actions-menu.content",
+            orientation: "grid",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "actions-menu", children: content })
           }
         )

package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx"],
-  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { ReactNode, memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultActionsMenuContent } from './DefaultActionsMenuContent'\n\n/** @public */\nexport interface TLUiActionsMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultActionsMenu = memo(function DefaultActionsMenu({\n\tchildren,\n}: TLUiActionsMenuProps) {\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst editor = useEditor()\n\tconst isInAcceptableReadonlyState = useValue(\n\t\t'should display quick actions when in readonly',\n\t\t() => editor.isInAny('hand', 'zoom'),\n\t\t[editor]\n\t)\n\n\t// Get the actions menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\n\tconst content = children ?? <DefaultActionsMenuContent />\n\tif (isReadonlyMode && !isInAcceptableReadonlyState) return\n\n\treturn (\n\t\t<TldrawUiPopover id=\"actions-menu\">\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tdata-testid=\"actions-menu.button\"\n\t\t\t\t\ttitle={msg('actions-menu.title')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"dots-vertical\" small />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside={breakpoint >= PORTRAIT_BREAKPOINT.TABLET ? 'bottom' : 'top'}\n\t\t\t\tsideOffset={6}\n\t\t\t>\n\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\tref={ref}\n\t\t\t\t\tlabel={msg('actions-menu.title')}\n\t\t\t\t\tclassName=\"tlui-actions-menu tlui-buttons__grid\"\n\t\t\t\t\tdata-testid=\"actions-menu.content\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"actions-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2C6B;AA3C7B,oBAA+D;AAC/D,mBAAwC;AACxC,uBAAoC;AACpC,yBAA8B;AAC9B,yBAA4B;AAC5B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAC5C,uCAA0C;AAQnC,MAAM,yBAAqB,mBAAK,SAASA,oBAAmB;AAAA,EAClE;AACD,GAAyB;AACxB,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,kCAAc;AACjC,QAAM,qBAAiB,gCAAY;AAEnC,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,aAAS,yBAAU;AACzB,QAAM,kCAA8B;AAAA,IACnC;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,MAAM;AAAA,IACnC,CAAC,MAAM;AAAA,EACR;AAMA,QAAM,UAAU,YAAY,4CAAC,8DAA0B;AACvD,MAAI,kBAAkB,CAAC,4BAA6B;AAEpD,SACC,6CAAC,0CAAgB,IAAG,gBACnB;AAAA,gDAAC,iDACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO,IAAI,oBAAoB;AAAA,QAE/B,sDAAC,gDAAmB,MAAK,iBAAgB,OAAK,MAAC;AAAA;AAAA,IAChD,GACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,cAAc,qCAAoB,SAAS,WAAW;AAAA,QAC5D,YAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,OAAO,IAAI,oBAAoB;AAAA,YAC/B,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,gBACjD,mBACF;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF,CAAC;",
+  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { ReactNode, memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { useTldrawUiOrientation } from '../primitives/layout'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultActionsMenuContent } from './DefaultActionsMenuContent'\n\n/** @public */\nexport interface TLUiActionsMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultActionsMenu = memo(function DefaultActionsMenu({\n\tchildren,\n}: TLUiActionsMenuProps) {\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst { orientation } = useTldrawUiOrientation()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst editor = useEditor()\n\tconst isInAcceptableReadonlyState = useValue(\n\t\t'should display quick actions when in readonly',\n\t\t() => editor.isInAny('hand', 'zoom'),\n\t\t[editor]\n\t)\n\n\t// Get the actions menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\n\tconst content = children ?? <DefaultActionsMenuContent />\n\tif (isReadonlyMode && !isInAcceptableReadonlyState) return\n\n\treturn (\n\t\t<TldrawUiPopover id=\"actions-menu\">\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tdata-testid=\"actions-menu.button\"\n\t\t\t\t\ttitle={msg('actions-menu.title')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\t\ticon={orientation === 'horizontal' ? 'dots-vertical' : 'dots-horizontal'}\n\t\t\t\t\t\tsmall\n\t\t\t\t\t/>\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside={\n\t\t\t\t\torientation === 'horizontal'\n\t\t\t\t\t\t? breakpoint >= PORTRAIT_BREAKPOINT.TABLET\n\t\t\t\t\t\t\t? 'bottom'\n\t\t\t\t\t\t\t: 'top'\n\t\t\t\t\t\t: 'right'\n\t\t\t\t}\n\t\t\t\tsideOffset={6}\n\t\t\t>\n\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\tref={ref}\n\t\t\t\t\tlabel={msg('actions-menu.title')}\n\t\t\t\t\tclassName=\"tlui-actions-menu\"\n\t\t\t\t\tdata-testid=\"actions-menu.content\"\n\t\t\t\t\torientation=\"grid\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"actions-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C6B;AA7C7B,oBAA+D;AAC/D,mBAAwC;AACxC,uBAAoC;AACpC,yBAA8B;AAC9B,yBAA4B;AAC5B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAIO;AACP,6BAAuD;AACvD,oBAAuC;AACvC,iCAA4C;AAC5C,uCAA0C;AAQnC,MAAM,yBAAqB,mBAAK,SAASA,oBAAmB;AAAA,EAClE;AACD,GAAyB;AACxB,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,kCAAc;AACjC,QAAM,qBAAiB,gCAAY;AACnC,QAAM,EAAE,YAAY,QAAI,sCAAuB;AAE/C,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,aAAS,yBAAU;AACzB,QAAM,kCAA8B;AAAA,IACnC;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,MAAM;AAAA,IACnC,CAAC,MAAM;AAAA,EACR;AAMA,QAAM,UAAU,YAAY,4CAAC,8DAA0B;AACvD,MAAI,kBAAkB,CAAC,4BAA6B;AAEpD,SACC,6CAAC,0CAAgB,IAAG,gBACnB;AAAA,gDAAC,iDACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO,IAAI,oBAAoB;AAAA,QAE/B;AAAA,UAAC;AAAA;AAAA,YACA,MAAM,gBAAgB,eAAe,kBAAkB;AAAA,YACvD,OAAK;AAAA;AAAA,QACN;AAAA;AAAA,IACD,GACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,MACC,gBAAgB,eACb,cAAc,qCAAoB,SACjC,WACA,QACD;AAAA,QAEJ,YAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,OAAO,IAAI,oBAAoB;AAAA,YAC/B,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,aAAY;AAAA,YAEZ,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,gBACjD,mBACF;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF,CAAC;",
   "names": ["DefaultActionsMenu"]
 }

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

@@ -29,6 +29,7 @@ var import_breakpoints = require("../context/breakpoints");
 var import_components = require("../context/components");
 var import_useTranslation = require("../hooks/useTranslation/useTranslation");
 var import_TldrawUiToolbar = require("./primitives/TldrawUiToolbar");
+var import_layout = require("./primitives/layout");
 const DefaultMenuPanel = (0, import_react.memo)(function MenuPanel() {
   const breakpoint = (0, import_breakpoints.useBreakpoint)();
   const msg = (0, import_useTranslation.useTranslation)();
@@ -41,10 +42,10 @@ const DefaultMenuPanel = (0, import_react.memo)(function MenuPanel() {
   ]);
   const showQuickActions = editor.options.actionShortcutsLocation === "menu" ? true : editor.options.actionShortcutsLocation === "toolbar" ? false : breakpoint >= import_constants.PORTRAIT_BREAKPOINT.TABLET;
   if (!MainMenu && !PageMenu && !showQuickActions) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { ref, className: "tlui-menu-zone", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-buttons__horizontal", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { ref, className: "tlui-menu-zone", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.TldrawUiRow, { children: [
     MainMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MainMenu, {}),
     PageMenu && !isSinglePageMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageMenu, {}),
-    showQuickActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { className: "tlui-buttons__horizontal", label: msg("actions-menu.title"), children: [
+    showQuickActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("actions-menu.title"), children: [
       QuickActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QuickActions, {}),
       ActionsMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsMenu, {})
     ] }) : null

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/DefaultMenuPanel.tsx"],
-  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../constants'\nimport { useBreakpoint } from '../context/breakpoints'\nimport { useTldrawUiComponents } from '../context/components'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiToolbar } from './primitives/TldrawUiToolbar'\n\n/** @public @react */\nexport const DefaultMenuPanel = memo(function MenuPanel() {\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst { MainMenu, QuickActions, ActionsMenu, PageMenu } = useTldrawUiComponents()\n\n\tconst editor = useEditor()\n\tconst isSinglePageMode = useValue('isSinglePageMode', () => editor.options.maxPages <= 1, [\n\t\teditor,\n\t])\n\n\tconst showQuickActions =\n\t\teditor.options.actionShortcutsLocation === 'menu'\n\t\t\t? true\n\t\t\t: editor.options.actionShortcutsLocation === 'toolbar'\n\t\t\t\t? false\n\t\t\t\t: breakpoint >= PORTRAIT_BREAKPOINT.TABLET\n\n\tif (!MainMenu && !PageMenu && !showQuickActions) return null\n\n\treturn (\n\t\t<nav ref={ref} className=\"tlui-menu-zone\">\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t{MainMenu && <MainMenu />}\n\t\t\t\t{PageMenu && !isSinglePageMode && <PageMenu />}\n\t\t\t\t{showQuickActions ? (\n\t\t\t\t\t<TldrawUiToolbar className=\"tlui-buttons__horizontal\" label={msg('actions-menu.title')}>\n\t\t\t\t\t\t{QuickActions && <QuickActions />}\n\t\t\t\t\t\t{ActionsMenu && <ActionsMenu />}\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</nav>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCiB;AAnCjB,oBAA+D;AAC/D,mBAA6B;AAC7B,uBAAoC;AACpC,yBAA8B;AAC9B,wBAAsC;AACtC,4BAA+B;AAC/B,6BAAgC;AAGzB,MAAM,uBAAmB,mBAAK,SAAS,YAAY;AACzD,QAAM,iBAAa,kCAAc;AACjC,QAAM,UAAM,sCAAe;AAE3B,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,EAAE,UAAU,cAAc,aAAa,SAAS,QAAI,yCAAsB;AAEhF,QAAM,aAAS,yBAAU;AACzB,QAAM,uBAAmB,wBAAS,oBAAoB,MAAM,OAAO,QAAQ,YAAY,GAAG;AAAA,IACzF;AAAA,EACD,CAAC;AAED,QAAM,mBACL,OAAO,QAAQ,4BAA4B,SACxC,OACA,OAAO,QAAQ,4BAA4B,YAC1C,QACA,cAAc,qCAAoB;AAEvC,MAAI,CAAC,YAAY,CAAC,YAAY,CAAC,iBAAkB,QAAO;AAExD,SACC,4CAAC,SAAI,KAAU,WAAU,kBACxB,uDAAC,SAAI,WAAU,4BACb;AAAA,gBAAY,4CAAC,YAAS;AAAA,IACtB,YAAY,CAAC,oBAAoB,4CAAC,YAAS;AAAA,IAC3C,mBACA,6CAAC,0CAAgB,WAAU,4BAA2B,OAAO,IAAI,oBAAoB,GACnF;AAAA,sBAAgB,4CAAC,gBAAa;AAAA,MAC9B,eAAe,4CAAC,eAAY;AAAA,OAC9B,IACG;AAAA,KACL,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../constants'\nimport { useBreakpoint } from '../context/breakpoints'\nimport { useTldrawUiComponents } from '../context/components'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiToolbar } from './primitives/TldrawUiToolbar'\nimport { TldrawUiRow } from './primitives/layout'\n\n/** @public @react */\nexport const DefaultMenuPanel = memo(function MenuPanel() {\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst { MainMenu, QuickActions, ActionsMenu, PageMenu } = useTldrawUiComponents()\n\n\tconst editor = useEditor()\n\tconst isSinglePageMode = useValue('isSinglePageMode', () => editor.options.maxPages <= 1, [\n\t\teditor,\n\t])\n\n\tconst showQuickActions =\n\t\teditor.options.actionShortcutsLocation === 'menu'\n\t\t\t? true\n\t\t\t: editor.options.actionShortcutsLocation === 'toolbar'\n\t\t\t\t? false\n\t\t\t\t: breakpoint >= PORTRAIT_BREAKPOINT.TABLET\n\n\tif (!MainMenu && !PageMenu && !showQuickActions) return null\n\n\treturn (\n\t\t<nav ref={ref} className=\"tlui-menu-zone\">\n\t\t\t<TldrawUiRow>\n\t\t\t\t{MainMenu && <MainMenu />}\n\t\t\t\t{PageMenu && !isSinglePageMode && <PageMenu />}\n\t\t\t\t{showQuickActions ? (\n\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('actions-menu.title')}>\n\t\t\t\t\t\t{QuickActions && <QuickActions />}\n\t\t\t\t\t\t{ActionsMenu && <ActionsMenu />}\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t) : null}\n\t\t\t</TldrawUiRow>\n\t\t</nav>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCiB;AApCjB,oBAA+D;AAC/D,mBAA6B;AAC7B,uBAAoC;AACpC,yBAA8B;AAC9B,wBAAsC;AACtC,4BAA+B;AAC/B,6BAAgC;AAChC,oBAA4B;AAGrB,MAAM,uBAAmB,mBAAK,SAAS,YAAY;AACzD,QAAM,iBAAa,kCAAc;AACjC,QAAM,UAAM,sCAAe;AAE3B,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,EAAE,UAAU,cAAc,aAAa,SAAS,QAAI,yCAAsB;AAEhF,QAAM,aAAS,yBAAU;AACzB,QAAM,uBAAmB,wBAAS,oBAAoB,MAAM,OAAO,QAAQ,YAAY,GAAG;AAAA,IACzF;AAAA,EACD,CAAC;AAED,QAAM,mBACL,OAAO,QAAQ,4BAA4B,SACxC,OACA,OAAO,QAAQ,4BAA4B,YAC1C,QACA,cAAc,qCAAoB;AAEvC,MAAI,CAAC,YAAY,CAAC,YAAY,CAAC,iBAAkB,QAAO;AAExD,SACC,4CAAC,SAAI,KAAU,WAAU,kBACxB,uDAAC,6BACC;AAAA,gBAAY,4CAAC,YAAS;AAAA,IACtB,YAAY,CAAC,oBAAoB,4CAAC,YAAS;AAAA,IAC3C,mBACA,6CAAC,0CAAgB,aAAY,cAAa,OAAO,IAAI,oBAAoB,GACvE;AAAA,sBAAgB,4CAAC,gBAAa;AAAA,MAC9B,eAAe,4CAAC,eAAY;AAAA,OAC9B,IACG;AAAA,KACL,GACD;AAEF,CAAC;",
   "names": []
 }

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

@@ -105,10 +105,10 @@ class MinimapManager {
   _getColors() {
     const style = getComputedStyle(this.editor.getContainer());
     return {
-      shapeFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--color-text-3").trim()),
-      selectFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--color-selected").trim()),
-      viewportFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--color-muted-1").trim()),
-      background: (0, import_getRgba.getRgba)(style.getPropertyValue("--color-low").trim())
+      shapeFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--tl-color-text-3").trim()),
+      selectFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--tl-color-selected").trim()),
+      viewportFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--tl-color-muted-1").trim()),
+      background: (0, import_getRgba.getRgba)(style.getPropertyValue("--tl-color-low").trim())
     };
   }
   // this should be called after dark/light mode changes have propagated to the dom

package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Minimap/MinimapManager.ts"],
-  "sourcesContent": ["import {\n\tBox,\n\tComputedCache,\n\tEditor,\n\tTLShape,\n\tVec,\n\tatom,\n\tbind,\n\tclamp,\n\tcomputed,\n\treact,\n\ttlenv,\n\tuniqueId,\n} from '@tldraw/editor'\nimport { getRgba } from './getRgba'\nimport { BufferStuff, appendVertices, setupWebGl } from './minimap-webgl-setup'\nimport { pie, rectangle, roundedRectangle } from './minimap-webgl-shapes'\n\nexport class MinimapManager {\n\tdisposables = [] as (() => void)[]\n\n\t@bind\n\tclose() {\n\t\treturn this.disposables.forEach((d) => d())\n\t}\n\tgl: ReturnType<typeof setupWebGl>\n\tshapeGeometryCache: ComputedCache<Float32Array | null, TLShape>\n\tconstructor(\n\t\tpublic editor: Editor,\n\t\tpublic readonly elem: HTMLCanvasElement,\n\t\tpublic readonly container: HTMLElement\n\t) {\n\t\tthis.gl = setupWebGl(elem)\n\t\tthis.shapeGeometryCache = editor.store.createComputedCache('webgl-geometry', (r: TLShape) => {\n\t\t\tconst bounds = editor.getShapeMaskedPageBounds(r.id)\n\t\t\tif (!bounds) return null\n\t\t\tconst arr = new Float32Array(12)\n\t\t\trectangle(arr, 0, bounds.x, bounds.y, bounds.w, bounds.h)\n\t\t\treturn arr\n\t\t})\n\t\tthis.colors = this._getColors()\n\t\tthis.disposables.push(this._listenForCanvasResize(), react('minimap render', this.render))\n\t}\n\n\tprivate _getColors() {\n\t\tconst style = getComputedStyle(this.editor.getContainer())\n\n\t\treturn {\n\t\t\tshapeFill: getRgba(style.getPropertyValue('--color-text-3').trim()),\n\t\t\tselectFill: getRgba(style.getPropertyValue('--color-selected').trim()),\n\t\t\tviewportFill: getRgba(style.getPropertyValue('--color-muted-1').trim()),\n\t\t\tbackground: getRgba(style.getPropertyValue('--color-low').trim()),\n\t\t}\n\t}\n\n\tprivate colors: ReturnType<MinimapManager['_getColors']>\n\t// this should be called after dark/light mode changes have propagated to the dom\n\tupdateColors() {\n\t\tthis.colors = this._getColors()\n\t}\n\n\treadonly id = uniqueId()\n\t@computed\n\tgetDpr() {\n\t\treturn this.editor.getInstanceState().devicePixelRatio\n\t}\n\n\t@computed\n\tgetContentPageBounds() {\n\t\tconst viewportPageBounds = this.editor.getViewportPageBounds()\n\t\tconst commonShapeBounds = this.editor.getCurrentPageBounds()\n\t\treturn commonShapeBounds\n\t\t\t? Box.Expand(commonShapeBounds, viewportPageBounds)\n\t\t\t: viewportPageBounds\n\t}\n\n\t@computed\n\tgetContentScreenBounds() {\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\t\tconst topLeft = this.editor.pageToScreen(contentPageBounds.point)\n\t\tconst bottomRight = this.editor.pageToScreen(\n\t\t\tnew Vec(contentPageBounds.maxX, contentPageBounds.maxY)\n\t\t)\n\t\treturn new Box(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)\n\t}\n\n\tprivate _getCanvasBoundingRect() {\n\t\tconst { x, y, width, height } = this.elem.getBoundingClientRect()\n\t\treturn new Box(x, y, width, height)\n\t}\n\n\tprivate readonly canvasBoundingClientRect = atom('canvasBoundingClientRect', new Box())\n\n\tgetCanvasScreenBounds() {\n\t\treturn this.canvasBoundingClientRect.get()\n\t}\n\n\tprivate _listenForCanvasResize() {\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tconst rect = this._getCanvasBoundingRect()\n\t\t\tthis.canvasBoundingClientRect.set(rect)\n\t\t})\n\t\tobserver.observe(this.elem)\n\t\tobserver.observe(this.container)\n\t\treturn () => observer.disconnect()\n\t}\n\n\t@computed\n\tgetCanvasSize() {\n\t\tconst rect = this.canvasBoundingClientRect.get()\n\t\tconst dpr = this.getDpr()\n\t\treturn new Vec(rect.width * dpr, rect.height * dpr)\n\t}\n\n\t@computed\n\tgetCanvasClientPosition() {\n\t\treturn this.canvasBoundingClientRect.get().point\n\t}\n\n\toriginPagePoint = new Vec()\n\toriginPageCenter = new Vec()\n\n\tisInViewport = false\n\n\t/** Get the canvas's true bounds converted to page bounds. */\n\t@computed getCanvasPageBounds() {\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\n\t\tconst aspectRatio = canvasScreenBounds.width / canvasScreenBounds.height\n\n\t\tlet targetWidth = contentPageBounds.width\n\t\tlet targetHeight = targetWidth / aspectRatio\n\t\tif (targetHeight < contentPageBounds.height) {\n\t\t\ttargetHeight = contentPageBounds.height\n\t\t\ttargetWidth = targetHeight * aspectRatio\n\t\t}\n\n\t\tconst box = new Box(0, 0, targetWidth, targetHeight)\n\t\tbox.center = contentPageBounds.center\n\t\treturn box\n\t}\n\n\t@computed getZoom() {\n\t\treturn this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width\n\t}\n\n\t@computed getCanvasPageBoundsArray() {\n\t\tconst { x, y, w, h } = this.getCanvasPageBounds()\n\t\treturn new Float32Array([x, y, w, h])\n\t}\n\n\tgetMinimapPagePoint(clientX: number, clientY: number) {\n\t\tconst canvasPageBounds = this.getCanvasPageBounds()\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\n\t\t// first offset the canvas position\n\t\tlet x = clientX - canvasScreenBounds.x\n\t\tlet y = clientY - canvasScreenBounds.y\n\n\t\t// then multiply by the ratio between the page and screen bounds\n\t\tx *= canvasPageBounds.width / canvasScreenBounds.width\n\t\ty *= canvasPageBounds.height / canvasScreenBounds.height\n\n\t\t// then add the canvas page bounds' offset\n\t\tx += canvasPageBounds.minX\n\t\ty += canvasPageBounds.minY\n\n\t\treturn new Vec(x, y, 1)\n\t}\n\n\tminimapScreenPointToPagePoint(x: number, y: number, shiftKey = false, clampToBounds = false) {\n\t\tconst { editor } = this\n\t\tconst vpPageBounds = editor.getViewportPageBounds()\n\n\t\tlet { x: px, y: py } = this.getMinimapPagePoint(x, y)\n\n\t\tif (clampToBounds) {\n\t\t\tconst shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()\n\n\t\t\tconst minX = shapesPageBounds.minX - vpPageBounds.width / 2\n\t\t\tconst maxX = shapesPageBounds.maxX + vpPageBounds.width / 2\n\t\t\tconst minY = shapesPageBounds.minY - vpPageBounds.height / 2\n\t\t\tconst maxY = shapesPageBounds.maxY + vpPageBounds.height / 2\n\n\t\t\tconst lx = Math.max(0, minX + vpPageBounds.width - px)\n\t\t\tconst rx = Math.max(0, -(maxX - vpPageBounds.width - px))\n\t\t\tconst ly = Math.max(0, minY + vpPageBounds.height - py)\n\t\t\tconst ry = Math.max(0, -(maxY - vpPageBounds.height - py))\n\n\t\t\tpx += (lx - rx) / 2\n\t\t\tpy += (ly - ry) / 2\n\n\t\t\tpx = clamp(px, minX, maxX)\n\t\t\tpy = clamp(py, minY, maxY)\n\t\t}\n\n\t\tif (shiftKey) {\n\t\t\tconst { originPagePoint } = this\n\t\t\tconst dx = Math.abs(px - originPagePoint.x)\n\t\t\tconst dy = Math.abs(py - originPagePoint.y)\n\t\t\tif (dx > dy) {\n\t\t\t\tpy = originPagePoint.y\n\t\t\t} else {\n\t\t\t\tpx = originPagePoint.x\n\t\t\t}\n\t\t}\n\n\t\treturn new Vec(px, py)\n\t}\n\n\t@bind\n\trender() {\n\t\t// make sure we update when dark mode switches\n\t\tconst context = this.gl.context\n\t\tconst canvasSize = this.getCanvasSize()\n\n\t\tthis.gl.setCanvasPageBounds(this.getCanvasPageBoundsArray())\n\n\t\tthis.elem.width = canvasSize.x\n\t\tthis.elem.height = canvasSize.y\n\t\tcontext.viewport(0, 0, canvasSize.x, canvasSize.y)\n\n\t\t// this affects which color transparent shapes are blended with\n\t\t// during rendering. If we were to invert this any shapes narrower\n\t\t// than 1 px in screen space would have much lower contrast. e.g.\n\t\t// draw shapes on a large canvas.\n\t\tcontext.clearColor(\n\t\t\tthis.colors.background[0],\n\t\t\tthis.colors.background[1],\n\t\t\tthis.colors.background[2],\n\t\t\t1\n\t\t)\n\n\t\tcontext.clear(context.COLOR_BUFFER_BIT)\n\n\t\tconst selectedShapes = new Set(this.editor.getSelectedShapeIds())\n\n\t\tconst colors = this.colors\n\t\tlet selectedShapeOffset = 0\n\t\tlet unselectedShapeOffset = 0\n\n\t\tconst ids = this.editor.getCurrentPageShapeIdsSorted()\n\n\t\tfor (let i = 0, len = ids.length; i < len; i++) {\n\t\t\tconst shapeId = ids[i]\n\t\t\tconst geometry = this.shapeGeometryCache.get(shapeId)\n\t\t\tif (!geometry) continue\n\n\t\t\tconst len = geometry.length\n\n\t\t\tif (selectedShapes.has(shapeId)) {\n\t\t\t\tappendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)\n\t\t\t\tselectedShapeOffset += len\n\t\t\t} else {\n\t\t\t\tappendVertices(this.gl.unselectedShapes, unselectedShapeOffset, geometry)\n\t\t\t\tunselectedShapeOffset += len\n\t\t\t}\n\t\t}\n\n\t\tthis.drawShapes(this.gl.unselectedShapes, unselectedShapeOffset, colors.shapeFill)\n\t\tthis.drawShapes(this.gl.selectedShapes, selectedShapeOffset, colors.selectFill)\n\n\t\tthis.drawViewport()\n\t\tthis.drawCollaborators()\n\t}\n\n\tprivate drawShapes(stuff: BufferStuff, len: number, color: Float32Array) {\n\t\tthis.gl.prepareTriangles(stuff, len)\n\t\tthis.gl.setFillColor(color)\n\t\tthis.gl.drawTriangles(len)\n\t}\n\n\tprivate drawViewport() {\n\t\tconst viewport = this.editor.getViewportPageBounds()\n\t\tconst len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * this.getZoom())\n\n\t\tthis.gl.prepareTriangles(this.gl.viewport, len)\n\t\tthis.gl.setFillColor(this.colors.viewportFill)\n\t\tthis.gl.drawTrianglesTransparently(len)\n\t\tif (tlenv.isSafari) {\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t}\n\t}\n\n\tdrawCollaborators() {\n\t\tconst collaborators = this.editor.getCollaboratorsOnCurrentPage()\n\t\tif (!collaborators.length) return\n\n\t\t// just draw a little circle for each collaborator\n\t\tconst numSegmentsPerCircle = 20\n\t\tconst dataSizePerCircle = numSegmentsPerCircle * 6\n\t\tconst totalSize = dataSizePerCircle * collaborators.length\n\n\t\t// expand vertex array if needed\n\t\tif (this.gl.collaborators.vertices.length < totalSize) {\n\t\t\tthis.gl.collaborators.vertices = new Float32Array(totalSize)\n\t\t}\n\n\t\tconst vertices = this.gl.collaborators.vertices\n\t\tlet offset = 0\n\t\tconst zoom = this.getZoom()\n\t\tfor (const { cursor } of collaborators) {\n\t\t\tif (!cursor) continue\n\t\t\tpie(vertices, {\n\t\t\t\tcenter: Vec.From(cursor),\n\t\t\t\tradius: 3 * zoom,\n\t\t\t\toffset,\n\t\t\t\tnumArcSegments: numSegmentsPerCircle,\n\t\t\t})\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\n\t\tthis.gl.prepareTriangles(this.gl.collaborators, totalSize)\n\n\t\toffset = 0\n\t\tfor (const { color } of collaborators) {\n\t\t\tthis.gl.setFillColor(getRgba(color))\n\t\t\tthis.gl.context.drawArrays(this.gl.context.TRIANGLES, offset / 2, dataSizePerCircle / 2)\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tComputedCache,\n\tEditor,\n\tTLShape,\n\tVec,\n\tatom,\n\tbind,\n\tclamp,\n\tcomputed,\n\treact,\n\ttlenv,\n\tuniqueId,\n} from '@tldraw/editor'\nimport { getRgba } from './getRgba'\nimport { BufferStuff, appendVertices, setupWebGl } from './minimap-webgl-setup'\nimport { pie, rectangle, roundedRectangle } from './minimap-webgl-shapes'\n\nexport class MinimapManager {\n\tdisposables = [] as (() => void)[]\n\n\t@bind\n\tclose() {\n\t\treturn this.disposables.forEach((d) => d())\n\t}\n\tgl: ReturnType<typeof setupWebGl>\n\tshapeGeometryCache: ComputedCache<Float32Array | null, TLShape>\n\tconstructor(\n\t\tpublic editor: Editor,\n\t\tpublic readonly elem: HTMLCanvasElement,\n\t\tpublic readonly container: HTMLElement\n\t) {\n\t\tthis.gl = setupWebGl(elem)\n\t\tthis.shapeGeometryCache = editor.store.createComputedCache('webgl-geometry', (r: TLShape) => {\n\t\t\tconst bounds = editor.getShapeMaskedPageBounds(r.id)\n\t\t\tif (!bounds) return null\n\t\t\tconst arr = new Float32Array(12)\n\t\t\trectangle(arr, 0, bounds.x, bounds.y, bounds.w, bounds.h)\n\t\t\treturn arr\n\t\t})\n\t\tthis.colors = this._getColors()\n\t\tthis.disposables.push(this._listenForCanvasResize(), react('minimap render', this.render))\n\t}\n\n\tprivate _getColors() {\n\t\tconst style = getComputedStyle(this.editor.getContainer())\n\n\t\treturn {\n\t\t\tshapeFill: getRgba(style.getPropertyValue('--tl-color-text-3').trim()),\n\t\t\tselectFill: getRgba(style.getPropertyValue('--tl-color-selected').trim()),\n\t\t\tviewportFill: getRgba(style.getPropertyValue('--tl-color-muted-1').trim()),\n\t\t\tbackground: getRgba(style.getPropertyValue('--tl-color-low').trim()),\n\t\t}\n\t}\n\n\tprivate colors: ReturnType<MinimapManager['_getColors']>\n\t// this should be called after dark/light mode changes have propagated to the dom\n\tupdateColors() {\n\t\tthis.colors = this._getColors()\n\t}\n\n\treadonly id = uniqueId()\n\t@computed\n\tgetDpr() {\n\t\treturn this.editor.getInstanceState().devicePixelRatio\n\t}\n\n\t@computed\n\tgetContentPageBounds() {\n\t\tconst viewportPageBounds = this.editor.getViewportPageBounds()\n\t\tconst commonShapeBounds = this.editor.getCurrentPageBounds()\n\t\treturn commonShapeBounds\n\t\t\t? Box.Expand(commonShapeBounds, viewportPageBounds)\n\t\t\t: viewportPageBounds\n\t}\n\n\t@computed\n\tgetContentScreenBounds() {\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\t\tconst topLeft = this.editor.pageToScreen(contentPageBounds.point)\n\t\tconst bottomRight = this.editor.pageToScreen(\n\t\t\tnew Vec(contentPageBounds.maxX, contentPageBounds.maxY)\n\t\t)\n\t\treturn new Box(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)\n\t}\n\n\tprivate _getCanvasBoundingRect() {\n\t\tconst { x, y, width, height } = this.elem.getBoundingClientRect()\n\t\treturn new Box(x, y, width, height)\n\t}\n\n\tprivate readonly canvasBoundingClientRect = atom('canvasBoundingClientRect', new Box())\n\n\tgetCanvasScreenBounds() {\n\t\treturn this.canvasBoundingClientRect.get()\n\t}\n\n\tprivate _listenForCanvasResize() {\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tconst rect = this._getCanvasBoundingRect()\n\t\t\tthis.canvasBoundingClientRect.set(rect)\n\t\t})\n\t\tobserver.observe(this.elem)\n\t\tobserver.observe(this.container)\n\t\treturn () => observer.disconnect()\n\t}\n\n\t@computed\n\tgetCanvasSize() {\n\t\tconst rect = this.canvasBoundingClientRect.get()\n\t\tconst dpr = this.getDpr()\n\t\treturn new Vec(rect.width * dpr, rect.height * dpr)\n\t}\n\n\t@computed\n\tgetCanvasClientPosition() {\n\t\treturn this.canvasBoundingClientRect.get().point\n\t}\n\n\toriginPagePoint = new Vec()\n\toriginPageCenter = new Vec()\n\n\tisInViewport = false\n\n\t/** Get the canvas's true bounds converted to page bounds. */\n\t@computed getCanvasPageBounds() {\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\n\t\tconst aspectRatio = canvasScreenBounds.width / canvasScreenBounds.height\n\n\t\tlet targetWidth = contentPageBounds.width\n\t\tlet targetHeight = targetWidth / aspectRatio\n\t\tif (targetHeight < contentPageBounds.height) {\n\t\t\ttargetHeight = contentPageBounds.height\n\t\t\ttargetWidth = targetHeight * aspectRatio\n\t\t}\n\n\t\tconst box = new Box(0, 0, targetWidth, targetHeight)\n\t\tbox.center = contentPageBounds.center\n\t\treturn box\n\t}\n\n\t@computed getZoom() {\n\t\treturn this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width\n\t}\n\n\t@computed getCanvasPageBoundsArray() {\n\t\tconst { x, y, w, h } = this.getCanvasPageBounds()\n\t\treturn new Float32Array([x, y, w, h])\n\t}\n\n\tgetMinimapPagePoint(clientX: number, clientY: number) {\n\t\tconst canvasPageBounds = this.getCanvasPageBounds()\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\n\t\t// first offset the canvas position\n\t\tlet x = clientX - canvasScreenBounds.x\n\t\tlet y = clientY - canvasScreenBounds.y\n\n\t\t// then multiply by the ratio between the page and screen bounds\n\t\tx *= canvasPageBounds.width / canvasScreenBounds.width\n\t\ty *= canvasPageBounds.height / canvasScreenBounds.height\n\n\t\t// then add the canvas page bounds' offset\n\t\tx += canvasPageBounds.minX\n\t\ty += canvasPageBounds.minY\n\n\t\treturn new Vec(x, y, 1)\n\t}\n\n\tminimapScreenPointToPagePoint(x: number, y: number, shiftKey = false, clampToBounds = false) {\n\t\tconst { editor } = this\n\t\tconst vpPageBounds = editor.getViewportPageBounds()\n\n\t\tlet { x: px, y: py } = this.getMinimapPagePoint(x, y)\n\n\t\tif (clampToBounds) {\n\t\t\tconst shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()\n\n\t\t\tconst minX = shapesPageBounds.minX - vpPageBounds.width / 2\n\t\t\tconst maxX = shapesPageBounds.maxX + vpPageBounds.width / 2\n\t\t\tconst minY = shapesPageBounds.minY - vpPageBounds.height / 2\n\t\t\tconst maxY = shapesPageBounds.maxY + vpPageBounds.height / 2\n\n\t\t\tconst lx = Math.max(0, minX + vpPageBounds.width - px)\n\t\t\tconst rx = Math.max(0, -(maxX - vpPageBounds.width - px))\n\t\t\tconst ly = Math.max(0, minY + vpPageBounds.height - py)\n\t\t\tconst ry = Math.max(0, -(maxY - vpPageBounds.height - py))\n\n\t\t\tpx += (lx - rx) / 2\n\t\t\tpy += (ly - ry) / 2\n\n\t\t\tpx = clamp(px, minX, maxX)\n\t\t\tpy = clamp(py, minY, maxY)\n\t\t}\n\n\t\tif (shiftKey) {\n\t\t\tconst { originPagePoint } = this\n\t\t\tconst dx = Math.abs(px - originPagePoint.x)\n\t\t\tconst dy = Math.abs(py - originPagePoint.y)\n\t\t\tif (dx > dy) {\n\t\t\t\tpy = originPagePoint.y\n\t\t\t} else {\n\t\t\t\tpx = originPagePoint.x\n\t\t\t}\n\t\t}\n\n\t\treturn new Vec(px, py)\n\t}\n\n\t@bind\n\trender() {\n\t\t// make sure we update when dark mode switches\n\t\tconst context = this.gl.context\n\t\tconst canvasSize = this.getCanvasSize()\n\n\t\tthis.gl.setCanvasPageBounds(this.getCanvasPageBoundsArray())\n\n\t\tthis.elem.width = canvasSize.x\n\t\tthis.elem.height = canvasSize.y\n\t\tcontext.viewport(0, 0, canvasSize.x, canvasSize.y)\n\n\t\t// this affects which color transparent shapes are blended with\n\t\t// during rendering. If we were to invert this any shapes narrower\n\t\t// than 1 px in screen space would have much lower contrast. e.g.\n\t\t// draw shapes on a large canvas.\n\t\tcontext.clearColor(\n\t\t\tthis.colors.background[0],\n\t\t\tthis.colors.background[1],\n\t\t\tthis.colors.background[2],\n\t\t\t1\n\t\t)\n\n\t\tcontext.clear(context.COLOR_BUFFER_BIT)\n\n\t\tconst selectedShapes = new Set(this.editor.getSelectedShapeIds())\n\n\t\tconst colors = this.colors\n\t\tlet selectedShapeOffset = 0\n\t\tlet unselectedShapeOffset = 0\n\n\t\tconst ids = this.editor.getCurrentPageShapeIdsSorted()\n\n\t\tfor (let i = 0, len = ids.length; i < len; i++) {\n\t\t\tconst shapeId = ids[i]\n\t\t\tconst geometry = this.shapeGeometryCache.get(shapeId)\n\t\t\tif (!geometry) continue\n\n\t\t\tconst len = geometry.length\n\n\t\t\tif (selectedShapes.has(shapeId)) {\n\t\t\t\tappendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)\n\t\t\t\tselectedShapeOffset += len\n\t\t\t} else {\n\t\t\t\tappendVertices(this.gl.unselectedShapes, unselectedShapeOffset, geometry)\n\t\t\t\tunselectedShapeOffset += len\n\t\t\t}\n\t\t}\n\n\t\tthis.drawShapes(this.gl.unselectedShapes, unselectedShapeOffset, colors.shapeFill)\n\t\tthis.drawShapes(this.gl.selectedShapes, selectedShapeOffset, colors.selectFill)\n\n\t\tthis.drawViewport()\n\t\tthis.drawCollaborators()\n\t}\n\n\tprivate drawShapes(stuff: BufferStuff, len: number, color: Float32Array) {\n\t\tthis.gl.prepareTriangles(stuff, len)\n\t\tthis.gl.setFillColor(color)\n\t\tthis.gl.drawTriangles(len)\n\t}\n\n\tprivate drawViewport() {\n\t\tconst viewport = this.editor.getViewportPageBounds()\n\t\tconst len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * this.getZoom())\n\n\t\tthis.gl.prepareTriangles(this.gl.viewport, len)\n\t\tthis.gl.setFillColor(this.colors.viewportFill)\n\t\tthis.gl.drawTrianglesTransparently(len)\n\t\tif (tlenv.isSafari) {\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t}\n\t}\n\n\tdrawCollaborators() {\n\t\tconst collaborators = this.editor.getCollaboratorsOnCurrentPage()\n\t\tif (!collaborators.length) return\n\n\t\t// just draw a little circle for each collaborator\n\t\tconst numSegmentsPerCircle = 20\n\t\tconst dataSizePerCircle = numSegmentsPerCircle * 6\n\t\tconst totalSize = dataSizePerCircle * collaborators.length\n\n\t\t// expand vertex array if needed\n\t\tif (this.gl.collaborators.vertices.length < totalSize) {\n\t\t\tthis.gl.collaborators.vertices = new Float32Array(totalSize)\n\t\t}\n\n\t\tconst vertices = this.gl.collaborators.vertices\n\t\tlet offset = 0\n\t\tconst zoom = this.getZoom()\n\t\tfor (const { cursor } of collaborators) {\n\t\t\tif (!cursor) continue\n\t\t\tpie(vertices, {\n\t\t\t\tcenter: Vec.From(cursor),\n\t\t\t\tradius: 3 * zoom,\n\t\t\t\toffset,\n\t\t\t\tnumArcSegments: numSegmentsPerCircle,\n\t\t\t})\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\n\t\tthis.gl.prepareTriangles(this.gl.collaborators, totalSize)\n\n\t\toffset = 0\n\t\tfor (const { color } of collaborators) {\n\t\t\tthis.gl.setFillColor(getRgba(color))\n\t\t\tthis.gl.context.drawArrays(this.gl.context.TRIANGLES, offset / 2, dataSizePerCircle / 2)\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": ["len"]
 }

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

@@ -30,13 +30,15 @@ var import_useTranslation = require("../hooks/useTranslation/useTranslation");
 var import_TldrawUiButton = require("./primitives/Button/TldrawUiButton");
 var import_TldrawUiButtonIcon = require("./primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiPopover = require("./primitives/TldrawUiPopover");
+var import_layout = require("./primitives/layout");
 function MobileStylePanel() {
   const editor = (0, import_editor.useEditor)();
   const msg = (0, import_useTranslation.useTranslation)();
+  const { orientation } = (0, import_layout.useTldrawUiOrientation)();
   const relevantStyles = (0, import_useRelevantStyles.useRelevantStyles)();
   const color = relevantStyles?.get(import_editor.DefaultColorStyle);
   const theme = (0, import_editor.getDefaultColorTheme)({ isDarkMode: editor.user.getIsDarkMode() });
-  const currentColor = (color?.type === "shared" ? theme[color.value] : theme.black).solid;
+  const currentColor = color?.type === "shared" ? (0, import_editor.getColorValue)(theme, color.value, "solid") : (0, import_editor.getColorValue)(theme, "black", "solid");
   const disableStylePanel = (0, import_editor.useValue)(
     "disable style panel",
     () => editor.isInAny("hand", "zoom", "eraser", "laser"),
@@ -59,7 +61,7 @@ function MobileStylePanel() {
         type: "tool",
         "data-testid": "mobile-styles.button",
         style: {
-          color: disableStylePanel ? "var(--color-muted-1)" : currentColor
+          color: disableStylePanel ? "var(--tl-color-muted-1)" : currentColor
         },
         title: msg("style-panel.title"),
         disabled: disableStylePanel,
@@ -71,7 +73,7 @@ function MobileStylePanel() {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "top", align: "end", children: StylePanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanel, { isMobile: true }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: orientation === "horizontal" ? "top" : "right", align: "end", children: StylePanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanel, { isMobile: true }) })
   ] });
 }
 //# sourceMappingURL=MobileStylePanel.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/MobileStylePanel.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tTLDefaultColorStyle,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useTldrawUiComponents } from '../context/components'\nimport { useRelevantStyles } from '../hooks/useRelevantStyles'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from './primitives/TldrawUiPopover'\n\n/** @public @react */\nexport function MobileStylePanel() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst relevantStyles = useRelevantStyles()\n\tconst color = relevantStyles?.get(DefaultColorStyle)\n\tconst theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })\n\tconst currentColor = (\n\t\tcolor?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black\n\t).solid\n\n\tconst disableStylePanel = useValue(\n\t\t'disable style panel',\n\t\t() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),\n\t\t[editor]\n\t)\n\n\tconst handleStylesOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst { StylePanel } = useTldrawUiComponents()\n\tif (!StylePanel) return null\n\n\treturn (\n\t\t<TldrawUiPopover id=\"mobile style menu\" onOpenChange={handleStylesOpenChange}>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\tdata-testid=\"mobile-styles.button\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: disableStylePanel ? 'var(--color-muted-1)' : currentColor,\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={msg('style-panel.title')}\n\t\t\t\t\tdisabled={disableStylePanel}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\t\ticon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'}\n\t\t\t\t\t/>\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"top\" align=\"end\">\n\t\t\t\t{StylePanel && <StylePanel isMobile />}\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDE;AAlDF,oBAMO;AACP,mBAA4B;AAC5B,wBAAsC;AACtC,+BAAkC;AAClC,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAIO;AAGA,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAE3B,QAAM,qBAAiB,4CAAkB;AACzC,QAAM,QAAQ,gBAAgB,IAAI,+BAAiB;AACnD,QAAM,YAAQ,oCAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAC9E,QAAM,gBACL,OAAO,SAAS,WAAW,MAAM,MAAM,KAA4B,IAAI,MAAM,OAC5E;AAEF,QAAM,wBAAoB;AAAA,IACzB;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,IACtD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,6BAAyB;AAAA,IAC9B,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,eAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,MACtD;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,EAAE,WAAW,QAAI,yCAAsB;AAC7C,MAAI,CAAC,WAAY,QAAO;AAExB,SACC,6CAAC,0CAAgB,IAAG,qBAAoB,cAAc,wBACrD;AAAA,gDAAC,iDACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO;AAAA,UACN,OAAO,oBAAoB,yBAAyB;AAAA,QACrD;AAAA,QACA,OAAO,IAAI,mBAAmB;AAAA,QAC9B,UAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACA,MAAM,oBAAoB,SAAS,OAAO,SAAS,UAAU,UAAU;AAAA;AAAA,QACxE;AAAA;AAAA,IACD,GACD;AAAA,IACA,4CAAC,iDAAuB,MAAK,OAAM,OAAM,OACvC,wBAAc,4CAAC,cAAW,UAAQ,MAAC,GACrC;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tTLDefaultColorStyle,\n\tgetColorValue,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useTldrawUiComponents } from '../context/components'\nimport { useRelevantStyles } from '../hooks/useRelevantStyles'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from './primitives/TldrawUiPopover'\nimport { useTldrawUiOrientation } from './primitives/layout'\n\n/** @public @react */\nexport function MobileStylePanel() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst { orientation } = useTldrawUiOrientation()\n\tconst relevantStyles = useRelevantStyles()\n\tconst color = relevantStyles?.get(DefaultColorStyle)\n\tconst theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })\n\tconst currentColor =\n\t\tcolor?.type === 'shared'\n\t\t\t? getColorValue(theme, color.value as TLDefaultColorStyle, 'solid')\n\t\t\t: getColorValue(theme, 'black', 'solid')\n\n\tconst disableStylePanel = useValue(\n\t\t'disable style panel',\n\t\t() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),\n\t\t[editor]\n\t)\n\n\tconst handleStylesOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst { StylePanel } = useTldrawUiComponents()\n\tif (!StylePanel) return null\n\n\treturn (\n\t\t<TldrawUiPopover id=\"mobile style menu\" onOpenChange={handleStylesOpenChange}>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\tdata-testid=\"mobile-styles.button\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: disableStylePanel ? 'var(--tl-color-muted-1)' : currentColor,\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={msg('style-panel.title')}\n\t\t\t\t\tdisabled={disableStylePanel}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\t\ticon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'}\n\t\t\t\t\t/>\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side={orientation === 'horizontal' ? 'top' : 'right'} align=\"end\">\n\t\t\t\t{StylePanel && <StylePanel isMobile />}\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDE;AArDF,oBAOO;AACP,mBAA4B;AAC5B,wBAAsC;AACtC,+BAAkC;AAClC,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAIO;AACP,oBAAuC;AAGhC,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAC3B,QAAM,EAAE,YAAY,QAAI,sCAAuB;AAC/C,QAAM,qBAAiB,4CAAkB;AACzC,QAAM,QAAQ,gBAAgB,IAAI,+BAAiB;AACnD,QAAM,YAAQ,oCAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAC9E,QAAM,eACL,OAAO,SAAS,eACb,6BAAc,OAAO,MAAM,OAA8B,OAAO,QAChE,6BAAc,OAAO,SAAS,OAAO;AAEzC,QAAM,wBAAoB;AAAA,IACzB;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,IACtD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,6BAAyB;AAAA,IAC9B,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,eAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,MACtD;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,EAAE,WAAW,QAAI,yCAAsB;AAC7C,MAAI,CAAC,WAAY,QAAO;AAExB,SACC,6CAAC,0CAAgB,IAAG,qBAAoB,cAAc,wBACrD;AAAA,gDAAC,iDACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO;AAAA,UACN,OAAO,oBAAoB,4BAA4B;AAAA,QACxD;AAAA,QACA,OAAO,IAAI,mBAAmB;AAAA,QAC9B,UAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACA,MAAM,oBAAoB,SAAS,OAAO,SAAS,UAAU,UAAU;AAAA;AAAA,QACxE;AAAA;AAAA,IACD,GACD;AAAA,IACA,4CAAC,iDAAuB,MAAM,gBAAgB,eAAe,QAAQ,SAAS,OAAM,OAClF,wBAAc,4CAAC,cAAW,UAAQ,MAAC,GACrC;AAAA,KACD;AAEF;",
   "names": []
 }

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

@@ -48,7 +48,7 @@ const DefaultNavigationPanel = (0, import_react.memo)(function DefaultNavigation
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: "tlui-navigation-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { className: "tlui-buttons__horizontal", label: msg("navigation-zone.title"), children: ZoomMenu && breakpoint < import_constants.PORTRAIT_BREAKPOINT.TABLET ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomMenu, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("navigation-zone.title"), children: ZoomMenu && breakpoint < import_constants.PORTRAIT_BREAKPOINT.TABLET ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomMenu, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_TldrawUiToolbar.TldrawUiToolbarButton,
         {