tldraw 4.3.0-canary.35392ae6dc0d → 4.3.0-canary.37e6bf0fa8c6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +9 -0
- package/dist-cjs/index.js +1 -1
- package/dist-cjs/lib/canvas/TldrawSelectionForeground.js +2 -2
- package/dist-cjs/lib/canvas/TldrawSelectionForeground.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +9 -12
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/arrow-types.js.map +1 -1
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +1 -1
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +10 -6
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +1 -1
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +5 -5
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/HyperlinkButton.js +2 -1
- package/dist-cjs/lib/shapes/shared/HyperlinkButton.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +14 -2
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +3 -3
- package/dist-cjs/lib/shapes/shared/RichTextLabel.js +11 -3
- package/dist-cjs/lib/shapes/shared/RichTextLabel.js.map +3 -3
- package/dist-cjs/lib/shapes/shared/ShapeFill.js +2 -2
- package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/{useForceSolid.js → useEfficientZoomThreshold.js} +10 -7
- package/dist-cjs/lib/shapes/shared/useEfficientZoomThreshold.js.map +7 -0
- package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +1 -1
- package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js +5 -2
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +1 -1
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/EditingShape.js +30 -10
- package/dist-cjs/lib/tools/SelectTool/childStates/EditingShape.js.map +2 -2
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.js +3 -9
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/ZoomMenu/DefaultZoomMenu.js +1 -1
- package/dist-cjs/lib/ui/components/ZoomMenu/DefaultZoomMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/menu-items.js +3 -1
- package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +1 -13
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-cjs/lib/utils/text/richText.js +7 -17
- package/dist-cjs/lib/utils/text/richText.js.map +3 -3
- package/dist-esm/index.d.mts +9 -0
- package/dist-esm/index.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs +2 -2
- package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs +10 -14
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs +3 -3
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +1 -1
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +10 -6
- package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +1 -1
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +5 -5
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs +3 -2
- package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +14 -2
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/RichTextLabel.mjs +11 -3
- package/dist-esm/lib/shapes/shared/RichTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs +2 -2
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/useEfficientZoomThreshold.mjs +12 -0
- package/dist-esm/lib/shapes/shared/useEfficientZoomThreshold.mjs.map +7 -0
- package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +1 -1
- package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +5 -2
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +1 -1
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/EditingShape.mjs +30 -10
- package/dist-esm/lib/tools/SelectTool/childStates/EditingShape.mjs.map +2 -2
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs +2 -8
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/ZoomMenu/DefaultZoomMenu.mjs +1 -1
- package/dist-esm/lib/ui/components/ZoomMenu/DefaultZoomMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/menu-items.mjs +3 -1
- package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +9 -14
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/dist-esm/lib/utils/text/richText.mjs +3 -3
- package/dist-esm/lib/utils/text/richText.mjs.map +2 -2
- package/package.json +3 -3
- package/src/lib/canvas/TldrawSelectionForeground.tsx +2 -2
- package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +10 -12
- package/src/lib/shapes/arrow/arrow-types.ts +2 -0
- package/src/lib/shapes/draw/DrawShapeUtil.tsx +3 -3
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +1 -1
- package/src/lib/shapes/geo/GeoShapeUtil.tsx +9 -4
- package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +1 -1
- package/src/lib/shapes/note/NoteShapeUtil.tsx +7 -8
- package/src/lib/shapes/shared/HyperlinkButton.tsx +3 -2
- package/src/lib/shapes/shared/PlainTextLabel.tsx +10 -1
- package/src/lib/shapes/shared/RichTextLabel.tsx +11 -2
- package/src/lib/shapes/shared/ShapeFill.tsx +2 -2
- package/src/lib/shapes/shared/useEfficientZoomThreshold.ts +10 -0
- package/src/lib/shapes/shared/useImageOrVideoAsset.ts +1 -1
- package/src/lib/shapes/text/TextShapeUtil.tsx +5 -0
- package/src/lib/shapes/video/VideoShapeUtil.tsx +2 -1
- package/src/lib/tools/SelectTool/childStates/EditingShape.ts +44 -11
- package/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx +1 -9
- package/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx +1 -1
- package/src/lib/ui/components/menu-items.tsx +3 -1
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +10 -15
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/utils/text/richText.ts +3 -3
- package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +2 -2
- package/src/test/commands/cameraState.test.ts +299 -0
- package/tldraw.css +8 -4
- package/dist-cjs/lib/shapes/shared/useForceSolid.js.map +0 -7
- package/dist-esm/lib/shapes/shared/useForceSolid.mjs +0 -9
- package/dist-esm/lib/shapes/shared/useForceSolid.mjs.map +0 -7
- package/src/lib/shapes/shared/useForceSolid.ts +0 -6
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport {\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseHasLinkShapeSelected,\n\tuseIsInSelectState,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../../hooks/menu-hooks'\nimport { ZoomTo100MenuItem } from '../menu-items'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\n\n/** @public @react */\nexport function DefaultActionsMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<AlignMenuItems />\n\t\t\t<DistributeMenuItems />\n\t\t\t<StackMenuItems />\n\t\t\t<ReorderMenuItems />\n\t\t\t<ZoomOrRotateMenuItem />\n\t\t\t<RotateCWMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<GroupOrUngroupMenuItem />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function AlignMenuItems() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function DistributeMenuItems() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StackMenuItems() {\n\tconst threeStackableItems = useThreeStackableItems()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeStackableItems && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuItems() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\n\nexport function ZoomOrRotateMenuItem() {\n\tconst breakpoint = useBreakpoint()\n\treturn breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? <ZoomTo100MenuItem /> : <RotateCCWMenuItem />\n}\n/** @public @react */\n\nexport function RotateCCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-ccw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function RotateCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-cw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function EditLinkMenuItem() {\n\tconst showEditLink = useHasLinkShapeSelected()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = showEditLink && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function GroupOrUngroupMenuItem() {\n\tconst allowGroup = useAllowGroup()\n\tconst allowUngroup = useAllowUngroup()\n\treturn allowGroup ? <GroupMenuItem /> : allowUngroup ? <UngroupMenuItem /> : <GroupMenuItem />\n}\n/** @public @react */\n\nexport function GroupMenuItem() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function UngroupMenuItem() {\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,7 +55,7 @@ const DefaultZoomMenu = (0, import_react.memo)(function DefaultZoomMenu2({ child
|
|
|
55
55
|
const ZoomTriggerButton = () => {
|
|
56
56
|
const editor = (0, import_editor.useEditor)();
|
|
57
57
|
const breakpoint = (0, import_breakpoints.useBreakpoint)();
|
|
58
|
-
const zoom = (0, import_editor.useValue)("zoom", () => editor.
|
|
58
|
+
const zoom = (0, import_editor.useValue)("zoom", () => editor.getEfficientZoomLevel(), [editor]);
|
|
59
59
|
const msg = (0, import_useTranslation.useTranslation)();
|
|
60
60
|
const handleDoubleClick = (0, import_react.useCallback)(() => {
|
|
61
61
|
editor.resetZoom(editor.getViewportScreenCenter(), {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useContainer, useEditor, useValue } from '@tldraw/editor'\nimport { DropdownMenu as _DropdownMenu } from 'radix-ui'\nimport { ReactNode, memo, useCallback } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultZoomMenuContent } from './DefaultZoomMenuContent'\n\n/** @public */\nexport interface TLUiZoomMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZoomMenuProps) {\n\tconst container = useContainer()\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('zoom menu')\n\n\t// Get the zoom 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\tconst content = children ?? <DefaultZoomMenuContent />\n\n\treturn (\n\t\t<_DropdownMenu.Root dir=\"ltr\" open={isOpen} onOpenChange={onOpenChange} modal={false}>\n\t\t\t<ZoomTriggerButton />\n\t\t\t<_DropdownMenu.Portal container={container}>\n\t\t\t\t<_DropdownMenu.Content\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"top\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\talignOffset={0}\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"zoom-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</_DropdownMenu.Content>\n\t\t\t</_DropdownMenu.Portal>\n\t\t</_DropdownMenu.Root>\n\t)\n})\n\nconst ZoomTriggerButton = () => {\n\tconst editor = useEditor()\n\tconst breakpoint = useBreakpoint()\n\tconst zoom = useValue('zoom', () => editor.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwB6B;AAxB7B,oBAAkD;AAClD,sBAA8C;AAC9C,mBAA6C;AAC7C,uBAAoC;AACpC,yBAA8B;AAC9B,2BAA8B;AAC9B,4BAA+B;AAC/B,6BAAsC;AACtC,iCAA4C;AAC5C,oCAAuC;AAQhC,MAAM,sBAAkB,mBAAK,SAASA,iBAAgB,EAAE,SAAS,GAAsB;AAC7F,QAAM,gBAAY,4BAAa;AAC/B,QAAM,CAAC,QAAQ,YAAY,QAAI,oCAAc,WAAW;AAKxD,QAAM,UAAU,YAAY,4CAAC,wDAAuB;AAEpD,SACC,6CAAC,gBAAAC,aAAc,MAAd,EAAmB,KAAI,OAAM,MAAM,QAAQ,cAA4B,OAAO,OAC9E;AAAA,gDAAC,qBAAkB;AAAA,IACnB,4CAAC,gBAAAA,aAAc,QAAd,EAAqB,WACrB;AAAA,MAAC,gBAAAA,aAAc;AAAA,MAAd;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,sDAAC,0DAA4B,MAAK,QAAO,UAAS,aAChD,mBACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF,CAAC;AAED,MAAM,oBAAoB,MAAM;AAC/B,QAAM,aAAS,yBAAU;AACzB,QAAM,iBAAa,kCAAc;AACjC,QAAM,WAAO,wBAAS,QAAQ,MAAM,OAAO,
|
|
4
|
+
"sourcesContent": ["import { useContainer, useEditor, useValue } from '@tldraw/editor'\nimport { DropdownMenu as _DropdownMenu } from 'radix-ui'\nimport { ReactNode, memo, useCallback } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultZoomMenuContent } from './DefaultZoomMenuContent'\n\n/** @public */\nexport interface TLUiZoomMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZoomMenuProps) {\n\tconst container = useContainer()\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('zoom menu')\n\n\t// Get the zoom 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\tconst content = children ?? <DefaultZoomMenuContent />\n\n\treturn (\n\t\t<_DropdownMenu.Root dir=\"ltr\" open={isOpen} onOpenChange={onOpenChange} modal={false}>\n\t\t\t<ZoomTriggerButton />\n\t\t\t<_DropdownMenu.Portal container={container}>\n\t\t\t\t<_DropdownMenu.Content\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"top\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\talignOffset={0}\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"zoom-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</_DropdownMenu.Content>\n\t\t\t</_DropdownMenu.Portal>\n\t\t</_DropdownMenu.Root>\n\t)\n})\n\nconst ZoomTriggerButton = () => {\n\tconst editor = useEditor()\n\tconst breakpoint = useBreakpoint()\n\tconst zoom = useValue('zoom', () => editor.getEfficientZoomLevel(), [editor])\n\tconst msg = useTranslation()\n\n\tconst handleDoubleClick = useCallback(() => {\n\t\teditor.resetZoom(editor.getViewportScreenCenter(), {\n\t\t\tanimation: { duration: editor.options.animationMediumMs },\n\t\t})\n\t}, [editor])\n\n\tconst value = `${Math.floor(zoom * 100)}%`\n\treturn (\n\t\t<TldrawUiToolbarButton\n\t\t\tasChild\n\t\t\ttype=\"icon\"\n\t\t\taria-label={`${msg('navigation-zone.zoom')} \u2014 ${value}`}\n\t\t\ttitle={`${msg('navigation-zone.zoom')} \u2014 ${value}`}\n\t\t\tdata-testid=\"minimap.zoom-menu-button\"\n\t\t\tclassName=\"tlui-zoom-menu__button\"\n\t\t\tonDoubleClick={handleDoubleClick}\n\t\t>\n\t\t\t<_DropdownMenu.Trigger dir=\"ltr\">\n\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.MOBILE ? null : (\n\t\t\t\t\t<span style={{ flexGrow: 0, textAlign: 'center' }}>{value}</span>\n\t\t\t\t)}\n\t\t\t</_DropdownMenu.Trigger>\n\t\t</TldrawUiToolbarButton>\n\t)\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwB6B;AAxB7B,oBAAkD;AAClD,sBAA8C;AAC9C,mBAA6C;AAC7C,uBAAoC;AACpC,yBAA8B;AAC9B,2BAA8B;AAC9B,4BAA+B;AAC/B,6BAAsC;AACtC,iCAA4C;AAC5C,oCAAuC;AAQhC,MAAM,sBAAkB,mBAAK,SAASA,iBAAgB,EAAE,SAAS,GAAsB;AAC7F,QAAM,gBAAY,4BAAa;AAC/B,QAAM,CAAC,QAAQ,YAAY,QAAI,oCAAc,WAAW;AAKxD,QAAM,UAAU,YAAY,4CAAC,wDAAuB;AAEpD,SACC,6CAAC,gBAAAC,aAAc,MAAd,EAAmB,KAAI,OAAM,MAAM,QAAQ,cAA4B,OAAO,OAC9E;AAAA,gDAAC,qBAAkB;AAAA,IACnB,4CAAC,gBAAAA,aAAc,QAAd,EAAqB,WACrB;AAAA,MAAC,gBAAAA,aAAc;AAAA,MAAd;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,sDAAC,0DAA4B,MAAK,QAAO,UAAS,aAChD,mBACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF,CAAC;AAED,MAAM,oBAAoB,MAAM;AAC/B,QAAM,aAAS,yBAAU;AACzB,QAAM,iBAAa,kCAAc;AACjC,QAAM,WAAO,wBAAS,QAAQ,MAAM,OAAO,sBAAsB,GAAG,CAAC,MAAM,CAAC;AAC5E,QAAM,UAAM,sCAAe;AAE3B,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,WAAO,UAAU,OAAO,wBAAwB,GAAG;AAAA,MAClD,WAAW,EAAE,UAAU,OAAO,QAAQ,kBAAkB;AAAA,IACzD,CAAC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAQ,GAAG,KAAK,MAAM,OAAO,GAAG,CAAC;AACvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAO;AAAA,MACP,MAAK;AAAA,MACL,cAAY,GAAG,IAAI,sBAAsB,CAAC,WAAM,KAAK;AAAA,MACrD,OAAO,GAAG,IAAI,sBAAsB,CAAC,WAAM,KAAK;AAAA,MAChD,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,eAAe;AAAA,MAEf,sDAAC,gBAAAA,aAAc,SAAd,EAAsB,KAAI,OACzB,uBAAa,qCAAoB,SAAS,OAC1C,4CAAC,UAAK,OAAO,EAAE,UAAU,GAAG,WAAW,SAAS,GAAI,iBAAM,GAE5D;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": ["DefaultZoomMenu", "_DropdownMenu"]
|
|
7
7
|
}
|
|
@@ -195,7 +195,9 @@ function UnlockAllMenuItem() {
|
|
|
195
195
|
}
|
|
196
196
|
function ZoomTo100MenuItem() {
|
|
197
197
|
const editor = (0, import_editor.useEditor)();
|
|
198
|
-
const isZoomedTo100 = (0, import_editor.useValue)("zoomed to 100", () => editor.
|
|
198
|
+
const isZoomedTo100 = (0, import_editor.useValue)("zoomed to 100", () => editor.getEfficientZoomLevel() === 1, [
|
|
199
|
+
editor
|
|
200
|
+
]);
|
|
199
201
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuActionItem.TldrawUiMenuActionItem, { actionId: "zoom-to-100", noClose: true, disabled: isZoomedTo100 });
|
|
200
202
|
}
|
|
201
203
|
function ZoomToFitMenuItem() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/ui/components/menu-items.tsx"],
|
|
4
|
-
"sourcesContent": ["import { TLPageId, useEditor, useValue } from '@tldraw/editor'\nimport { supportsDownloadingOriginal } from '../context/actions'\nimport { useUiEvents } from '../context/events'\nimport { useToasts } from '../context/toasts'\nimport {\n\tshowMenuPaste,\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseAnySelectedShapesCount,\n\tuseHasLinkShapeSelected,\n\tuseOnlyFlippableShape,\n\tuseShowAutoSizeToggle,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../hooks/menu-hooks'\nimport { useGetEmbedDefinition } from '../hooks/useGetEmbedDefinition'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TldrawUiMenuActionCheckboxItem } from './primitives/menus/TldrawUiMenuActionCheckboxItem'\nimport { TldrawUiMenuActionItem } from './primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\n/* -------------------- Selection ------------------- */\n\n/** @public @react */\nexport function ToggleAutoSizeMenuItem() {\n\tconst shouldDisplay = useShowAutoSizeToggle()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-auto-size\" />\n}\n\n/** @public @react */\nexport function EditLinkMenuItem() {\n\tconst shouldDisplay = useHasLinkShapeSelected()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" />\n}\n\n/** @public @react */\nexport function DuplicateMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"duplicate\" />\n}\n\n/** @public @react */\nexport function FlattenMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display flatten option',\n\t\t() => {\n\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\tif (selectedShapeIds.length === 0) return false\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'image')) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"flatten-to-image\" />\n}\n\n/** @public @react */\nexport function DownloadOriginalMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display download original option',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.some((shape) => supportsDownloadingOriginal(shape, editor))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"download-original\" />\n}\n\n/** @public @react */\nexport function GroupMenuItem() {\n\tconst shouldDisplay = useAllowGroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" />\n}\n\n/** @public @react */\nexport function UngroupMenuItem() {\n\tconst shouldDisplay = useAllowUngroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n\n/** @public @react */\nexport function RemoveFrameMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow unframe',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"remove-frame\" />\n}\n\n/** @public @react */\nexport function FitFrameToContentMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow fit frame to content',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn (\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'frame') &&\n\t\t\t\teditor.getSortedChildIdsForParent(onlySelectedShape).length > 0\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"fit-frame-to-content\" />\n}\n\n/** @public @react */\nexport function ToggleLockMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('selected shapes', () => editor.getSelectedShapes().length > 0, [\n\t\teditor,\n\t])\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-lock\" />\n}\n\n/** @public @react */\nexport function ToggleTransparentBgMenuItem() {\n\tconst editor = useEditor()\n\tconst isTransparentBg = useValue(\n\t\t'isTransparentBg',\n\t\t() => !editor.getInstanceState().exportBackground,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-transparent\"\n\t\t\tchecked={isTransparentBg}\n\t\t\ttoggle\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function UnlockAllMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('any shapes', () => editor.getCurrentPageShapeIds().size > 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"unlock-all\" disabled={!shouldDisplay} />\n}\n\n/* ---------------------- Zoom ---------------------- */\n\n/** @public @react */\nexport function ZoomTo100MenuItem() {\n\tconst editor = useEditor()\n\tconst isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])\n\n\treturn <TldrawUiMenuActionItem actionId=\"zoom-to-100\" noClose disabled={isZoomedTo100} />\n}\n\n/** @public @react */\nexport function ZoomToFitMenuItem() {\n\tconst editor = useEditor()\n\tconst hasShapes = useValue('has shapes', () => editor.getCurrentPageShapeIds().size > 0, [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-fit\"\n\t\t\tdisabled={!hasShapes}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-fit\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ZoomToSelectionMenuItem() {\n\tconst editor = useEditor()\n\tconst hasSelected = useValue('has shapes', () => editor.getSelectedShapeIds().length > 0, [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-selection\"\n\t\t\tdisabled={!hasSelected}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-selection\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/* -------------------- Clipboard ------------------- */\n\n/** @public @react */\nexport function ClipboardMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"clipboard\">\n\t\t\t<CutMenuItem />\n\t\t\t<CopyMenuItem />\n\t\t\t<PasteMenuItem />\n\t\t\t<DuplicateMenuItem />\n\t\t\t<DeleteMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function CopyAsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu\n\t\t\tid=\"copy-as\"\n\t\t\tlabel=\"context-menu.copy-as\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={!atLeastOneShapeOnPage}\n\t\t>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-svg\" />\n\t\t\t\t{Boolean(window.navigator.clipboard?.write) && (\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-png\" />\n\t\t\t\t)}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function CutMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"cut\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function CopyMenuItem() {\n\tconst shouldDisplay = useAnySelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"copy\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function PasteMenuItem() {\n\tconst shouldDisplay = showMenuPaste\n\n\treturn <TldrawUiMenuActionItem actionId=\"paste\" disabled={!shouldDisplay} />\n}\n\n/* ------------------- Conversions ------------------ */\n\n/** @public @react */\nexport function ConversionsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\tif (!atLeastOneShapeOnPage) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"conversions\">\n\t\t\t<CopyAsMenuGroup />\n\t\t\t<TldrawUiMenuSubmenu id=\"export-as\" label=\"context-menu.export-as\" size=\"small\">\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-group\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-svg\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-png\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-bg\">\n\t\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<DownloadOriginalMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/* ------------------ Set Selection ----------------- */\n/** @public @react */\nexport function SelectAllMenuItem() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn <TldrawUiMenuActionItem actionId=\"select-all\" disabled={!atLeastOneShapeOnPage} />\n}\n\n/* ------------------ Delete Group ------------------ */\n\n/** @public @react */\nexport function DeleteMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"delete\" disabled={!oneSelected} />\n}\n\n/* --------------------- Modify --------------------- */\n\n/** @public @react */\nexport function EditMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tif (!useAnySelectedShapesCount(1)) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"context-menu.edit\" size=\"small\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<ToggleLockMenuItem />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ArrangeMenuSubmenu() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst onlyFlippableShapeSelected = useOnlyFlippableShape()\n\tconst isReadonlyMode = useReadonly()\n\n\tif (isReadonlyMode) return null\n\tif (!(twoSelected || onlyFlippableShapeSelected)) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"arrange\" label=\"context-menu.arrange\" size=\"small\">\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"align\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<DistributeMenuGroup />\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"stretch\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t{(twoSelected || onlyFlippableShapeSelected) && (\n\t\t\t\t<TldrawUiMenuGroup id=\"flip\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<OrderMenuGroup />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\nfunction DistributeMenuGroup() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tif (!threeSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"distribute\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\nfunction OrderMenuGroup() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst threeStackableItems = useThreeStackableItems()\n\tif (!twoSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"order\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"pack\" />\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-horizontal\" />}\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-vertical\" />}\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tif (isReadonlyMode) return null\n\tif (!oneSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"reorder\" label=\"context-menu.reorder\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"reorder\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MoveToPageMenu() {\n\tconst editor = useEditor()\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPageId = useValue('current page id', () => editor.getCurrentPageId(), [editor])\n\tconst { addToast } = useToasts()\n\tconst trackEvent = useUiEvents()\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\tif (!oneSelected) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"move-to-page\" label=\"context-menu.move-to-page\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"pages\">\n\t\t\t\t{pages.map((page) => (\n\t\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\tdisabled={currentPageId === page.id}\n\t\t\t\t\t\tlabel={page.name.length > 30 ? `${page.name.slice(0, 30)}\u2026` : page.name}\n\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('move_shapes_to_page')\n\t\t\t\t\t\t\teditor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)\n\n\t\t\t\t\t\t\tconst toPage = editor.getPage(page.id)\n\n\t\t\t\t\t\t\tif (toPage) {\n\t\t\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\t\t\ttitle: 'Changed page',\n\t\t\t\t\t\t\t\t\tdescription: `Moved to ${toPage.name}.`,\n\t\t\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Go back',\n\t\t\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('change-page')\n\t\t\t\t\t\t\t\t\t\t\t\teditor.setCurrentPage(currentPageId)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttrackEvent('move-to-page', { source: 'context-menu' })\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"new-page\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"move-to-new-page\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ConvertToBookmarkMenuItem() {\n\tconst editor = useEditor()\n\n\tconst oneEmbedSelected = useValue(\n\t\t'oneEmbedSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'embed') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbedSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-bookmark\" />\n}\n\n/** @public @react */\nexport function ConvertToEmbedMenuItem() {\n\tconst editor = useEditor()\n\tconst getEmbedDefinition = useGetEmbedDefinition()\n\n\tconst oneEmbeddableBookmarkSelected = useValue(\n\t\t'oneEmbeddableBookmarkSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'bookmark') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\tgetEmbedDefinition(onlySelectedShape.props.url) &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbeddableBookmarkSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-embed\" />\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function ToggleSnapModeItem() {\n\tconst editor = useEditor()\n\tconst isSnapMode = useValue('isSnapMode', () => editor.user.getIsSnapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-snap-mode\" checked={isSnapMode} />\n}\n\n/** @public @react */\nexport function ToggleToolLockItem() {\n\tconst editor = useEditor()\n\tconst isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-tool-lock\" checked={isToolLock} />\n}\n\n/** @public @react */\nexport function ToggleGridItem() {\n\tconst editor = useEditor()\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-grid\" checked={isGridMode} />\n}\n\n/** @public @react */\nexport function ToggleWrapModeItem() {\n\tconst editor = useEditor()\n\tconst isWrapMode = useValue('isWrapMode', () => editor.user.getIsWrapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-wrap-mode\" checked={isWrapMode} />\n}\n\n/** @public @react */\nexport function ToggleDarkModeItem() {\n\tconst editor = useEditor()\n\tconst isDarkMode = useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-dark-mode\" checked={isDarkMode} />\n}\n\n/** @public @react */\nexport function ToggleFocusModeItem() {\n\tconst editor = useEditor()\n\tconst isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-focus-mode\" checked={isFocusMode} />\n}\n\n/** @public @react */\nexport function ToggleEdgeScrollingItem() {\n\tconst editor = useEditor()\n\tconst edgeScrollSpeed = useValue('edgeScrollSpeed', () => editor.user.getEdgeScrollSpeed(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-edge-scrolling\"\n\t\t\tchecked={edgeScrollSpeed === 1}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleReduceMotionItem() {\n\tconst editor = useEditor()\n\tconst animationSpeed = useValue('animationSpeed', () => editor.user.getAnimationSpeed(), [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-reduce-motion\"\n\t\t\tchecked={animationSpeed === 0}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleKeyboardShortcutsItem() {\n\tconst editor = useEditor()\n\tconst keyboardShortcuts = useValue(\n\t\t'keyboardShortcuts',\n\t\t() => editor.user.getAreKeyboardShortcutsEnabled(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-keyboard-shortcuts\"\n\t\t\tchecked={keyboardShortcuts}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleEnhancedA11yModeItem() {\n\tconst editor = useEditor()\n\tconst enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"enhanced-a11y-mode\" checked={enhancedA11yMode} />\n}\n\n/** @public @react */\nexport function ToggleDebugModeItem() {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('isDebugMode', () => editor.getInstanceState().isDebugMode, [editor])\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-debug-mode\" checked={isDebugMode} />\n}\n\n/** @public @react */\nexport function ToggleDynamicSizeModeItem() {\n\tconst editor = useEditor()\n\tconst isDynamicResizeMode = useValue(\n\t\t'dynamic resize',\n\t\t() => editor.user.getIsDynamicResizeMode(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-dynamic-size-mode\"\n\t\t\tchecked={isDynamicResizeMode}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function TogglePasteAtCursorItem() {\n\tconst editor = useEditor()\n\tconst pasteAtCursor = useValue('paste at cursor', () => editor.user.getIsPasteAtCursorMode(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem actionId=\"toggle-paste-at-cursor\" checked={pasteAtCursor} />\n\t)\n}\n\n/* ---------------------- Print --------------------- */\n\n/** @public @react */\nexport function PrintItem() {\n\tconst editor = useEditor()\n\tconst emptyPage = useValue('emptyPage', () => editor.getCurrentPageShapeIds().size === 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"print\" disabled={emptyPage} />\n}\n\n/* ---------------------- Multiplayer --------------------- */\n\n/** @public @react */\nexport function CursorChatItem() {\n\tconst editor = useEditor()\n\tconst shouldShow = useValue(\n\t\t'show cursor chat',\n\t\t() => editor.getCurrentToolId() === 'select' && !editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\tif (!shouldShow) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["import { TLPageId, useEditor, useValue } from '@tldraw/editor'\nimport { supportsDownloadingOriginal } from '../context/actions'\nimport { useUiEvents } from '../context/events'\nimport { useToasts } from '../context/toasts'\nimport {\n\tshowMenuPaste,\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseAnySelectedShapesCount,\n\tuseHasLinkShapeSelected,\n\tuseOnlyFlippableShape,\n\tuseShowAutoSizeToggle,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../hooks/menu-hooks'\nimport { useGetEmbedDefinition } from '../hooks/useGetEmbedDefinition'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TldrawUiMenuActionCheckboxItem } from './primitives/menus/TldrawUiMenuActionCheckboxItem'\nimport { TldrawUiMenuActionItem } from './primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\n/* -------------------- Selection ------------------- */\n\n/** @public @react */\nexport function ToggleAutoSizeMenuItem() {\n\tconst shouldDisplay = useShowAutoSizeToggle()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-auto-size\" />\n}\n\n/** @public @react */\nexport function EditLinkMenuItem() {\n\tconst shouldDisplay = useHasLinkShapeSelected()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" />\n}\n\n/** @public @react */\nexport function DuplicateMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"duplicate\" />\n}\n\n/** @public @react */\nexport function FlattenMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display flatten option',\n\t\t() => {\n\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\tif (selectedShapeIds.length === 0) return false\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'image')) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"flatten-to-image\" />\n}\n\n/** @public @react */\nexport function DownloadOriginalMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display download original option',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.some((shape) => supportsDownloadingOriginal(shape, editor))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"download-original\" />\n}\n\n/** @public @react */\nexport function GroupMenuItem() {\n\tconst shouldDisplay = useAllowGroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" />\n}\n\n/** @public @react */\nexport function UngroupMenuItem() {\n\tconst shouldDisplay = useAllowUngroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n\n/** @public @react */\nexport function RemoveFrameMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow unframe',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"remove-frame\" />\n}\n\n/** @public @react */\nexport function FitFrameToContentMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow fit frame to content',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn (\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'frame') &&\n\t\t\t\teditor.getSortedChildIdsForParent(onlySelectedShape).length > 0\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"fit-frame-to-content\" />\n}\n\n/** @public @react */\nexport function ToggleLockMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('selected shapes', () => editor.getSelectedShapes().length > 0, [\n\t\teditor,\n\t])\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-lock\" />\n}\n\n/** @public @react */\nexport function ToggleTransparentBgMenuItem() {\n\tconst editor = useEditor()\n\tconst isTransparentBg = useValue(\n\t\t'isTransparentBg',\n\t\t() => !editor.getInstanceState().exportBackground,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-transparent\"\n\t\t\tchecked={isTransparentBg}\n\t\t\ttoggle\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function UnlockAllMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('any shapes', () => editor.getCurrentPageShapeIds().size > 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"unlock-all\" disabled={!shouldDisplay} />\n}\n\n/* ---------------------- Zoom ---------------------- */\n\n/** @public @react */\nexport function ZoomTo100MenuItem() {\n\tconst editor = useEditor()\n\tconst isZoomedTo100 = useValue('zoomed to 100', () => editor.getEfficientZoomLevel() === 1, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"zoom-to-100\" noClose disabled={isZoomedTo100} />\n}\n\n/** @public @react */\nexport function ZoomToFitMenuItem() {\n\tconst editor = useEditor()\n\tconst hasShapes = useValue('has shapes', () => editor.getCurrentPageShapeIds().size > 0, [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-fit\"\n\t\t\tdisabled={!hasShapes}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-fit\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ZoomToSelectionMenuItem() {\n\tconst editor = useEditor()\n\tconst hasSelected = useValue('has shapes', () => editor.getSelectedShapeIds().length > 0, [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-selection\"\n\t\t\tdisabled={!hasSelected}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-selection\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/* -------------------- Clipboard ------------------- */\n\n/** @public @react */\nexport function ClipboardMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"clipboard\">\n\t\t\t<CutMenuItem />\n\t\t\t<CopyMenuItem />\n\t\t\t<PasteMenuItem />\n\t\t\t<DuplicateMenuItem />\n\t\t\t<DeleteMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function CopyAsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu\n\t\t\tid=\"copy-as\"\n\t\t\tlabel=\"context-menu.copy-as\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={!atLeastOneShapeOnPage}\n\t\t>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-svg\" />\n\t\t\t\t{Boolean(window.navigator.clipboard?.write) && (\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-png\" />\n\t\t\t\t)}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function CutMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"cut\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function CopyMenuItem() {\n\tconst shouldDisplay = useAnySelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"copy\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function PasteMenuItem() {\n\tconst shouldDisplay = showMenuPaste\n\n\treturn <TldrawUiMenuActionItem actionId=\"paste\" disabled={!shouldDisplay} />\n}\n\n/* ------------------- Conversions ------------------ */\n\n/** @public @react */\nexport function ConversionsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\tif (!atLeastOneShapeOnPage) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"conversions\">\n\t\t\t<CopyAsMenuGroup />\n\t\t\t<TldrawUiMenuSubmenu id=\"export-as\" label=\"context-menu.export-as\" size=\"small\">\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-group\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-svg\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-png\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-bg\">\n\t\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<DownloadOriginalMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/* ------------------ Set Selection ----------------- */\n/** @public @react */\nexport function SelectAllMenuItem() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn <TldrawUiMenuActionItem actionId=\"select-all\" disabled={!atLeastOneShapeOnPage} />\n}\n\n/* ------------------ Delete Group ------------------ */\n\n/** @public @react */\nexport function DeleteMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"delete\" disabled={!oneSelected} />\n}\n\n/* --------------------- Modify --------------------- */\n\n/** @public @react */\nexport function EditMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tif (!useAnySelectedShapesCount(1)) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"context-menu.edit\" size=\"small\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<ToggleLockMenuItem />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ArrangeMenuSubmenu() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst onlyFlippableShapeSelected = useOnlyFlippableShape()\n\tconst isReadonlyMode = useReadonly()\n\n\tif (isReadonlyMode) return null\n\tif (!(twoSelected || onlyFlippableShapeSelected)) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"arrange\" label=\"context-menu.arrange\" size=\"small\">\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"align\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<DistributeMenuGroup />\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"stretch\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t{(twoSelected || onlyFlippableShapeSelected) && (\n\t\t\t\t<TldrawUiMenuGroup id=\"flip\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<OrderMenuGroup />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\nfunction DistributeMenuGroup() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tif (!threeSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"distribute\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\nfunction OrderMenuGroup() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst threeStackableItems = useThreeStackableItems()\n\tif (!twoSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"order\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"pack\" />\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-horizontal\" />}\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-vertical\" />}\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tif (isReadonlyMode) return null\n\tif (!oneSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"reorder\" label=\"context-menu.reorder\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"reorder\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MoveToPageMenu() {\n\tconst editor = useEditor()\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPageId = useValue('current page id', () => editor.getCurrentPageId(), [editor])\n\tconst { addToast } = useToasts()\n\tconst trackEvent = useUiEvents()\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\tif (!oneSelected) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"move-to-page\" label=\"context-menu.move-to-page\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"pages\">\n\t\t\t\t{pages.map((page) => (\n\t\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\tdisabled={currentPageId === page.id}\n\t\t\t\t\t\tlabel={page.name.length > 30 ? `${page.name.slice(0, 30)}\u2026` : page.name}\n\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('move_shapes_to_page')\n\t\t\t\t\t\t\teditor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)\n\n\t\t\t\t\t\t\tconst toPage = editor.getPage(page.id)\n\n\t\t\t\t\t\t\tif (toPage) {\n\t\t\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\t\t\ttitle: 'Changed page',\n\t\t\t\t\t\t\t\t\tdescription: `Moved to ${toPage.name}.`,\n\t\t\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Go back',\n\t\t\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('change-page')\n\t\t\t\t\t\t\t\t\t\t\t\teditor.setCurrentPage(currentPageId)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttrackEvent('move-to-page', { source: 'context-menu' })\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"new-page\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"move-to-new-page\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ConvertToBookmarkMenuItem() {\n\tconst editor = useEditor()\n\n\tconst oneEmbedSelected = useValue(\n\t\t'oneEmbedSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'embed') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbedSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-bookmark\" />\n}\n\n/** @public @react */\nexport function ConvertToEmbedMenuItem() {\n\tconst editor = useEditor()\n\tconst getEmbedDefinition = useGetEmbedDefinition()\n\n\tconst oneEmbeddableBookmarkSelected = useValue(\n\t\t'oneEmbeddableBookmarkSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'bookmark') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\tgetEmbedDefinition(onlySelectedShape.props.url) &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbeddableBookmarkSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-embed\" />\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function ToggleSnapModeItem() {\n\tconst editor = useEditor()\n\tconst isSnapMode = useValue('isSnapMode', () => editor.user.getIsSnapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-snap-mode\" checked={isSnapMode} />\n}\n\n/** @public @react */\nexport function ToggleToolLockItem() {\n\tconst editor = useEditor()\n\tconst isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-tool-lock\" checked={isToolLock} />\n}\n\n/** @public @react */\nexport function ToggleGridItem() {\n\tconst editor = useEditor()\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-grid\" checked={isGridMode} />\n}\n\n/** @public @react */\nexport function ToggleWrapModeItem() {\n\tconst editor = useEditor()\n\tconst isWrapMode = useValue('isWrapMode', () => editor.user.getIsWrapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-wrap-mode\" checked={isWrapMode} />\n}\n\n/** @public @react */\nexport function ToggleDarkModeItem() {\n\tconst editor = useEditor()\n\tconst isDarkMode = useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-dark-mode\" checked={isDarkMode} />\n}\n\n/** @public @react */\nexport function ToggleFocusModeItem() {\n\tconst editor = useEditor()\n\tconst isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-focus-mode\" checked={isFocusMode} />\n}\n\n/** @public @react */\nexport function ToggleEdgeScrollingItem() {\n\tconst editor = useEditor()\n\tconst edgeScrollSpeed = useValue('edgeScrollSpeed', () => editor.user.getEdgeScrollSpeed(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-edge-scrolling\"\n\t\t\tchecked={edgeScrollSpeed === 1}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleReduceMotionItem() {\n\tconst editor = useEditor()\n\tconst animationSpeed = useValue('animationSpeed', () => editor.user.getAnimationSpeed(), [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-reduce-motion\"\n\t\t\tchecked={animationSpeed === 0}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleKeyboardShortcutsItem() {\n\tconst editor = useEditor()\n\tconst keyboardShortcuts = useValue(\n\t\t'keyboardShortcuts',\n\t\t() => editor.user.getAreKeyboardShortcutsEnabled(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-keyboard-shortcuts\"\n\t\t\tchecked={keyboardShortcuts}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleEnhancedA11yModeItem() {\n\tconst editor = useEditor()\n\tconst enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"enhanced-a11y-mode\" checked={enhancedA11yMode} />\n}\n\n/** @public @react */\nexport function ToggleDebugModeItem() {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('isDebugMode', () => editor.getInstanceState().isDebugMode, [editor])\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-debug-mode\" checked={isDebugMode} />\n}\n\n/** @public @react */\nexport function ToggleDynamicSizeModeItem() {\n\tconst editor = useEditor()\n\tconst isDynamicResizeMode = useValue(\n\t\t'dynamic resize',\n\t\t() => editor.user.getIsDynamicResizeMode(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-dynamic-size-mode\"\n\t\t\tchecked={isDynamicResizeMode}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function TogglePasteAtCursorItem() {\n\tconst editor = useEditor()\n\tconst pasteAtCursor = useValue('paste at cursor', () => editor.user.getIsPasteAtCursorMode(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem actionId=\"toggle-paste-at-cursor\" checked={pasteAtCursor} />\n\t)\n}\n\n/* ---------------------- Print --------------------- */\n\n/** @public @react */\nexport function PrintItem() {\n\tconst editor = useEditor()\n\tconst emptyPage = useValue('emptyPage', () => editor.getCurrentPageShapeIds().size === 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"print\" disabled={emptyPage} />\n}\n\n/* ---------------------- Multiplayer --------------------- */\n\n/** @public @react */\nexport function CursorChatItem() {\n\tconst editor = useEditor()\n\tconst shouldShow = useValue(\n\t\t'show cursor chat',\n\t\t() => editor.getCurrentToolId() === 'select' && !editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\tif (!shouldShow) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -124,21 +124,9 @@ class TooltipManager {
|
|
|
124
124
|
tooltip = currentState.tooltip;
|
|
125
125
|
}
|
|
126
126
|
if (!tooltip) return null;
|
|
127
|
-
if (
|
|
127
|
+
if (import_editor.tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null;
|
|
128
128
|
return tooltip;
|
|
129
129
|
}
|
|
130
|
-
supportsHoverAtom = null;
|
|
131
|
-
supportsHover() {
|
|
132
|
-
if (!this.supportsHoverAtom) {
|
|
133
|
-
const mediaQuery = window.matchMedia("(hover: hover)");
|
|
134
|
-
const supportsHover = (0, import_editor.atom)("has hover", mediaQuery.matches);
|
|
135
|
-
this.supportsHoverAtom = supportsHover;
|
|
136
|
-
mediaQuery.addEventListener("change", (e) => {
|
|
137
|
-
supportsHover.set(e.matches);
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
return this.supportsHoverAtom.get();
|
|
141
|
-
}
|
|
142
130
|
}
|
|
143
131
|
const tooltipManager = TooltipManager.getInstance();
|
|
144
132
|
function hideAllTooltips() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, {\n\tcreateContext,\n\tforwardRef,\n\tReactNode,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTldrawUiOrientation } from './layout'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n\tshowOnMobile?: boolean\n\tdelayDuration?: number\n}\n\ninterface TooltipData {\n\tid: string\n\tcontent: ReactNode\n\tside: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset: number\n\tshowOnMobile: boolean\n\ttargetElement: HTMLElement\n\tdelayDuration: number\n}\n\n// State machine states\ntype TooltipState =\n\t| { name: 'idle' }\n\t| { name: 'pointer_down' }\n\t| { name: 'showing'; tooltip: TooltipData }\n\t| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }\n\n// State machine events\ntype TooltipEvent =\n\t| { type: 'pointer_down' }\n\t| { type: 'pointer_up' }\n\t| { type: 'show'; tooltip: TooltipData }\n\t| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }\n\t| { type: 'hide_all' }\n\n// Singleton tooltip manager using explicit state machine\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate state = atom<TooltipState>('tooltip state', { name: 'idle' })\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\thideAllTooltips() {\n\t\tthis.handleEvent({ type: 'hide_all' })\n\t}\n\n\thandleEvent(event: TooltipEvent) {\n\t\tconst currentState = this.state.get()\n\n\t\tswitch (event.type) {\n\t\t\tcase 'pointer_down': {\n\t\t\t\t// Transition to pointer_down from any state\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'pointer_down' })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'pointer_up': {\n\t\t\t\t// Only transition from pointer_down to idle\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'show': {\n\t\t\t\t// Don't show tooltips while pointer is down\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// Clear any existing timeout if transitioning from waiting_to_hide\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\n\t\t\t\t// Transition to showing state\n\t\t\t\tthis.state.set({ name: 'showing', tooltip: event.tooltip })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide': {\n\t\t\t\tconst { tooltipId, editor, instant } = event\n\n\t\t\t\t// Only hide if the tooltip matches\n\t\t\t\tif (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {\n\t\t\t\t\tif (editor && !instant) {\n\t\t\t\t\t\t// Transition to waiting_to_hide state\n\t\t\t\t\t\tconst timeoutId = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tconst state = this.state.get()\n\t\t\t\t\t\t\tif (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {\n\t\t\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 300)\n\t\t\t\t\t\tthis.state.set({\n\t\t\t\t\t\t\tname: 'waiting_to_hide',\n\t\t\t\t\t\t\ttooltip: currentState.tooltip,\n\t\t\t\t\t\t\ttimeoutId,\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t} else if (\n\t\t\t\t\tcurrentState.name === 'waiting_to_hide' &&\n\t\t\t\t\tcurrentState.tooltip.id === tooltipId\n\t\t\t\t) {\n\t\t\t\t\t// Already waiting to hide, make it instant if requested\n\t\t\t\t\tif (instant) {\n\t\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide_all': {\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\t// Preserve pointer_down state if that's the current state\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\tgetCurrentTooltipData(): TooltipData | null {\n\t\tconst currentState = this.state.get()\n\t\tlet tooltip: TooltipData | null = null\n\n\t\tif (currentState.name === 'showing') {\n\t\t\ttooltip = currentState.tooltip\n\t\t} else if (currentState.name === 'waiting_to_hide') {\n\t\t\ttooltip = currentState.tooltip\n\t\t}\n\n\t\tif (!tooltip) return null\n\t\tif (!this.supportsHover() && !tooltip.showOnMobile) return null\n\t\treturn tooltip\n\t}\n\n\tprivate supportsHoverAtom: Atom<boolean> | null = null\n\tsupportsHover() {\n\t\tif (!this.supportsHoverAtom) {\n\t\t\tconst mediaQuery = window.matchMedia('(hover: hover)')\n\t\t\tconst supportsHover = atom('has hover', mediaQuery.matches)\n\t\t\tthis.supportsHoverAtom = supportsHover\n\t\t\tmediaQuery.addEventListener('change', (e) => {\n\t\t\t\tsupportsHover.set(e.matches)\n\t\t\t})\n\t\t}\n\t\treturn this.supportsHoverAtom.get()\n\t}\n}\n\nconst tooltipManager = TooltipManager.getInstance()\n\n/** @public */\nexport function hideAllTooltips() {\n\ttooltipManager.hideAllTooltips()\n}\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\n\tconst editor = useMaybeEditor()\n\n\tconst currentTooltip = useValue(\n\t\t'current tooltip',\n\t\t() => tooltipManager.getCurrentTooltipData(),\n\t\t[]\n\t)\n\n\tconst cameraState = useValue('camera state', () => editor?.getCameraState(), [editor])\n\n\t// Hide tooltip when camera is moving (panning/zooming)\n\tuseEffect(() => {\n\t\tif (cameraState === 'moving' && isOpen && currentTooltip) {\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: currentTooltip.id,\n\t\t\t\teditor,\n\t\t\t\tinstant: true,\n\t\t\t})\n\t\t}\n\t}, [cameraState, isOpen, currentTooltip, editor])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape' && currentTooltip && isOpen) {\n\t\t\t\thideAllTooltips()\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [currentTooltip, isOpen])\n\n\t// Hide tooltip and prevent new ones from opening while pointer is down\n\tuseEffect(() => {\n\t\tfunction handlePointerDown() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_down' })\n\t\t}\n\n\t\tfunction handlePointerUp() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\n\t\t}\n\n\t\tdocument.addEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\tdocument.addEventListener('pointerup', handlePointerUp, { capture: true })\n\t\tdocument.addEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\t\tdocument.removeEventListener('pointerup', handlePointerUp, { capture: true })\n\t\t\tdocument.removeEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\t\t// Reset pointer state on unmount to prevent stuck state\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\n\t\t}\n\t}, [])\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout> | null = null\n\t\tif (currentTooltip && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = currentTooltip.targetElement.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current) {\n\t\t\t\t// eslint-disable-next-line no-restricted-globals\n\t\t\t\ttimer = setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, currentTooltip.delayDuration)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (timer !== null) {\n\t\t\t\tclearTimeout(timer)\n\t\t\t}\n\t\t}\n\t}, [currentTooltip])\n\n\tif (!currentTooltip) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tside={currentTooltip.side}\n\t\t\t\tsideOffset={currentTooltip.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{currentTooltip.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset = 5,\n\t\t\tdisabled = false,\n\t\t\tshowOnMobile = false,\n\t\t\tdelayDuration,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst editor = useMaybeEditor()\n\t\tconst tooltipId = useRef<string>(uniqueId())\n\t\tconst hasProvider = useContext(TooltipSingletonContext)\n\t\tconst enhancedA11yMode = useValue(\n\t\t\t'enhancedA11yMode',\n\t\t\t() => editor?.user.getEnhancedA11yMode(),\n\t\t\t[editor]\n\t\t)\n\n\t\tconst orientationCtx = useTldrawUiOrientation()\n\t\tconst sideToUse = side ?? orientationCtx.tooltipSide\n\n\t\tuseEffect(() => {\n\t\t\tconst currentTooltipId = tooltipId.current\n\t\t\treturn () => {\n\t\t\t\tif (hasProvider) {\n\t\t\t\t\ttooltipManager.handleEvent({\n\t\t\t\t\t\ttype: 'hide',\n\t\t\t\t\t\ttooltipId: currentTooltipId,\n\t\t\t\t\t\teditor,\n\t\t\t\t\t\tinstant: true,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t}, [editor, hasProvider])\n\n\t\t// Don't show tooltip if disabled, no content, or enhanced accessibility mode is disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tlet delayDurationToUse\n\t\tif (enhancedA11yMode) {\n\t\t\tdelayDurationToUse = 0\n\t\t} else {\n\t\t\tdelayDurationToUse =\n\t\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\n\t\t}\n\n\t\t// Fallback to old behavior if no provider\n\t\tif (!hasProvider || enhancedA11yMode) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root\n\t\t\t\t\tdelayDuration={delayDurationToUse}\n\t\t\t\t\tdisableHoverableContent={!enhancedA11yMode}\n\t\t\t\t>\n\t\t\t\t\t<_Tooltip.Trigger asChild ref={ref}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</_Tooltip.Trigger>\n\t\t\t\t\t<_Tooltip.Content\n\t\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\t\tside={sideToUse}\n\t\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t\t</_Tooltip.Content>\n\t\t\t\t</_Tooltip.Root>\n\t\t\t)\n\t\t}\n\n\t\tconst child = React.Children.only(children)\n\t\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onFocus?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onBlur?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\t\tonMouseEnter: handleMouseEnter,\n\t\t\tonMouseLeave: handleMouseLeave,\n\t\t\tonFocus: handleFocus,\n\t\t\tonBlur: handleBlur,\n\t\t})\n\n\t\treturn childrenWithHandlers\n\t}\n)\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n\tassert,\n\tatom,\n\tEditor,\n\ttlenvReactive,\n\tuniqueId,\n\tuseMaybeEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, {\n\tcreateContext,\n\tforwardRef,\n\tReactNode,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTldrawUiOrientation } from './layout'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n\tshowOnMobile?: boolean\n\tdelayDuration?: number\n}\n\ninterface TooltipData {\n\tid: string\n\tcontent: ReactNode\n\tside: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset: number\n\tshowOnMobile: boolean\n\ttargetElement: HTMLElement\n\tdelayDuration: number\n}\n\n// State machine states\ntype TooltipState =\n\t| { name: 'idle' }\n\t| { name: 'pointer_down' }\n\t| { name: 'showing'; tooltip: TooltipData }\n\t| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }\n\n// State machine events\ntype TooltipEvent =\n\t| { type: 'pointer_down' }\n\t| { type: 'pointer_up' }\n\t| { type: 'show'; tooltip: TooltipData }\n\t| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }\n\t| { type: 'hide_all' }\n\n// Singleton tooltip manager using explicit state machine\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate state = atom<TooltipState>('tooltip state', { name: 'idle' })\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\thideAllTooltips() {\n\t\tthis.handleEvent({ type: 'hide_all' })\n\t}\n\n\thandleEvent(event: TooltipEvent) {\n\t\tconst currentState = this.state.get()\n\n\t\tswitch (event.type) {\n\t\t\tcase 'pointer_down': {\n\t\t\t\t// Transition to pointer_down from any state\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'pointer_down' })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'pointer_up': {\n\t\t\t\t// Only transition from pointer_down to idle\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'show': {\n\t\t\t\t// Don't show tooltips while pointer is down\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// Clear any existing timeout if transitioning from waiting_to_hide\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\n\t\t\t\t// Transition to showing state\n\t\t\t\tthis.state.set({ name: 'showing', tooltip: event.tooltip })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide': {\n\t\t\t\tconst { tooltipId, editor, instant } = event\n\n\t\t\t\t// Only hide if the tooltip matches\n\t\t\t\tif (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {\n\t\t\t\t\tif (editor && !instant) {\n\t\t\t\t\t\t// Transition to waiting_to_hide state\n\t\t\t\t\t\tconst timeoutId = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tconst state = this.state.get()\n\t\t\t\t\t\t\tif (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {\n\t\t\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 300)\n\t\t\t\t\t\tthis.state.set({\n\t\t\t\t\t\t\tname: 'waiting_to_hide',\n\t\t\t\t\t\t\ttooltip: currentState.tooltip,\n\t\t\t\t\t\t\ttimeoutId,\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t} else if (\n\t\t\t\t\tcurrentState.name === 'waiting_to_hide' &&\n\t\t\t\t\tcurrentState.tooltip.id === tooltipId\n\t\t\t\t) {\n\t\t\t\t\t// Already waiting to hide, make it instant if requested\n\t\t\t\t\tif (instant) {\n\t\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide_all': {\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\t// Preserve pointer_down state if that's the current state\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\tgetCurrentTooltipData(): TooltipData | null {\n\t\tconst currentState = this.state.get()\n\t\tlet tooltip: TooltipData | null = null\n\n\t\tif (currentState.name === 'showing') {\n\t\t\ttooltip = currentState.tooltip\n\t\t} else if (currentState.name === 'waiting_to_hide') {\n\t\t\ttooltip = currentState.tooltip\n\t\t}\n\n\t\tif (!tooltip) return null\n\t\tif (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null\n\t\treturn tooltip\n\t}\n}\n\nconst tooltipManager = TooltipManager.getInstance()\n\n/** @public */\nexport function hideAllTooltips() {\n\ttooltipManager.hideAllTooltips()\n}\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\n\tconst editor = useMaybeEditor()\n\n\tconst currentTooltip = useValue(\n\t\t'current tooltip',\n\t\t() => tooltipManager.getCurrentTooltipData(),\n\t\t[]\n\t)\n\n\tconst cameraState = useValue('camera state', () => editor?.getCameraState(), [editor])\n\n\t// Hide tooltip when camera is moving (panning/zooming)\n\tuseEffect(() => {\n\t\tif (cameraState === 'moving' && isOpen && currentTooltip) {\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: currentTooltip.id,\n\t\t\t\teditor,\n\t\t\t\tinstant: true,\n\t\t\t})\n\t\t}\n\t}, [cameraState, isOpen, currentTooltip, editor])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape' && currentTooltip && isOpen) {\n\t\t\t\thideAllTooltips()\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [currentTooltip, isOpen])\n\n\t// Hide tooltip and prevent new ones from opening while pointer is down\n\tuseEffect(() => {\n\t\tfunction handlePointerDown() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_down' })\n\t\t}\n\n\t\tfunction handlePointerUp() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\n\t\t}\n\n\t\tdocument.addEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\tdocument.addEventListener('pointerup', handlePointerUp, { capture: true })\n\t\tdocument.addEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\t\tdocument.removeEventListener('pointerup', handlePointerUp, { capture: true })\n\t\t\tdocument.removeEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\t\t// Reset pointer state on unmount to prevent stuck state\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\n\t\t}\n\t}, [])\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout> | null = null\n\t\tif (currentTooltip && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = currentTooltip.targetElement.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current) {\n\t\t\t\t// eslint-disable-next-line no-restricted-globals\n\t\t\t\ttimer = setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, currentTooltip.delayDuration)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (timer !== null) {\n\t\t\t\tclearTimeout(timer)\n\t\t\t}\n\t\t}\n\t}, [currentTooltip])\n\n\tif (!currentTooltip) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tside={currentTooltip.side}\n\t\t\t\tsideOffset={currentTooltip.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{currentTooltip.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset = 5,\n\t\t\tdisabled = false,\n\t\t\tshowOnMobile = false,\n\t\t\tdelayDuration,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst editor = useMaybeEditor()\n\t\tconst tooltipId = useRef<string>(uniqueId())\n\t\tconst hasProvider = useContext(TooltipSingletonContext)\n\t\tconst enhancedA11yMode = useValue(\n\t\t\t'enhancedA11yMode',\n\t\t\t() => editor?.user.getEnhancedA11yMode(),\n\t\t\t[editor]\n\t\t)\n\n\t\tconst orientationCtx = useTldrawUiOrientation()\n\t\tconst sideToUse = side ?? orientationCtx.tooltipSide\n\n\t\tuseEffect(() => {\n\t\t\tconst currentTooltipId = tooltipId.current\n\t\t\treturn () => {\n\t\t\t\tif (hasProvider) {\n\t\t\t\t\ttooltipManager.handleEvent({\n\t\t\t\t\t\ttype: 'hide',\n\t\t\t\t\t\ttooltipId: currentTooltipId,\n\t\t\t\t\t\teditor,\n\t\t\t\t\t\tinstant: true,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t}, [editor, hasProvider])\n\n\t\t// Don't show tooltip if disabled, no content, or enhanced accessibility mode is disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tlet delayDurationToUse\n\t\tif (enhancedA11yMode) {\n\t\t\tdelayDurationToUse = 0\n\t\t} else {\n\t\t\tdelayDurationToUse =\n\t\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\n\t\t}\n\n\t\t// Fallback to old behavior if no provider\n\t\tif (!hasProvider || enhancedA11yMode) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root\n\t\t\t\t\tdelayDuration={delayDurationToUse}\n\t\t\t\t\tdisableHoverableContent={!enhancedA11yMode}\n\t\t\t\t>\n\t\t\t\t\t<_Tooltip.Trigger asChild ref={ref}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</_Tooltip.Trigger>\n\t\t\t\t\t<_Tooltip.Content\n\t\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\t\tside={sideToUse}\n\t\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t\t</_Tooltip.Content>\n\t\t\t\t</_Tooltip.Root>\n\t\t\t)\n\t\t}\n\n\t\tconst child = React.Children.only(children)\n\t\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onFocus?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onBlur?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\t\tonMouseEnter: handleMouseEnter,\n\t\t\tonMouseLeave: handleMouseLeave,\n\t\t\tonFocus: handleFocus,\n\t\t\tonBlur: handleBlur,\n\t\t})\n\n\t\treturn childrenWithHandlers\n\t}\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_Tooltip", "React"]
|
|
7
7
|
}
|
|
@@ -22,10 +22,10 @@ __export(version_exports, {
|
|
|
22
22
|
version: () => version
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(version_exports);
|
|
25
|
-
const version = "4.3.0-canary.
|
|
25
|
+
const version = "4.3.0-canary.37e6bf0fa8c6";
|
|
26
26
|
const publishDates = {
|
|
27
27
|
major: "2025-09-18T14:39:22.803Z",
|
|
28
|
-
minor: "2025-12-
|
|
29
|
-
patch: "2025-12-
|
|
28
|
+
minor: "2025-12-09T10:38:11.018Z",
|
|
29
|
+
patch: "2025-12-09T10:38:11.018Z"
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=version.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/ui/version.ts"],
|
|
4
|
-
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.3.0-canary.
|
|
4
|
+
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.3.0-canary.37e6bf0fa8c6'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-12-09T10:38:11.018Z',\n\tpatch: '2025-12-09T10:38:11.018Z',\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
19
|
var richText_exports = {};
|
|
30
20
|
__export(richText_exports, {
|
|
@@ -39,9 +29,9 @@ __export(richText_exports, {
|
|
|
39
29
|
});
|
|
40
30
|
module.exports = __toCommonJS(richText_exports);
|
|
41
31
|
var import_core = require("@tiptap/core");
|
|
42
|
-
var import_extension_code =
|
|
43
|
-
var import_extension_highlight =
|
|
44
|
-
var import_starter_kit =
|
|
32
|
+
var import_extension_code = require("@tiptap/extension-code");
|
|
33
|
+
var import_extension_highlight = require("@tiptap/extension-highlight");
|
|
34
|
+
var import_starter_kit = require("@tiptap/starter-kit");
|
|
45
35
|
var import_editor = require("@tldraw/editor");
|
|
46
36
|
var import_defaultFonts = require("../../shapes/shared/defaultFonts");
|
|
47
37
|
var import_textDirection = require("./textDirection");
|
|
@@ -54,10 +44,10 @@ const KeyboardShiftEnterTweakExtension = import_core.Extension.create({
|
|
|
54
44
|
};
|
|
55
45
|
}
|
|
56
46
|
});
|
|
57
|
-
import_extension_code.
|
|
58
|
-
import_extension_highlight.
|
|
47
|
+
import_extension_code.Code.config.excludes = void 0;
|
|
48
|
+
import_extension_highlight.Highlight.config.priority = 1100;
|
|
59
49
|
const tipTapDefaultExtensions = [
|
|
60
|
-
import_starter_kit.
|
|
50
|
+
import_starter_kit.StarterKit.configure({
|
|
61
51
|
blockquote: false,
|
|
62
52
|
codeBlock: false,
|
|
63
53
|
horizontalRule: false,
|
|
@@ -66,7 +56,7 @@ const tipTapDefaultExtensions = [
|
|
|
66
56
|
autolink: true
|
|
67
57
|
}
|
|
68
58
|
}),
|
|
69
|
-
import_extension_highlight.
|
|
59
|
+
import_extension_highlight.Highlight,
|
|
70
60
|
KeyboardShiftEnterTweakExtension,
|
|
71
61
|
import_textDirection.TextDirection
|
|
72
62
|
];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/utils/text/richText.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n\tExtension,\n\tExtensions,\n\tgenerateHTML,\n\tgenerateJSON,\n\tgenerateText,\n\tJSONContent,\n} from '@tiptap/core'\nimport Code from '@tiptap/extension-code'\nimport Highlight from '@tiptap/extension-highlight'\nimport { Node } from '@tiptap/pm/model'\nimport StarterKit from '@tiptap/starter-kit'\nimport {\n\tEditor,\n\tgetOwnProperty,\n\tRichTextFontVisitorState,\n\tTLFontFace,\n\tTLRichText,\n\tWeakCache,\n} from '@tldraw/editor'\nimport { DefaultFontFaces } from '../../shapes/shared/defaultFonts'\nimport { TextDirection } from './textDirection'\n\n/** @public */\nexport const KeyboardShiftEnterTweakExtension = Extension.create({\n\tname: 'keyboardShiftEnterHandler',\n\taddKeyboardShortcuts() {\n\t\treturn {\n\t\t\t// We don't support soft breaks, so we just use the default enter command.\n\t\t\t'Shift-Enter': ({ editor }) => editor.commands.enter(),\n\t\t}\n\t},\n})\n\n// We change the default Code to override what's in the StarterKit.\n// It allows for other attributes/extensions.\n// @ts-ignore this is fine.\nCode.config.excludes = undefined\n\n// We want the highlighting to take precedence over bolding/italics/links\n// as far as rendering is concerned. Otherwise, the highlighting\n// looks broken up.\nHighlight.config.priority = 1100\n\n/**\n * Default extensions for the TipTap editor.\n *\n * @public\n */\nexport const tipTapDefaultExtensions: Extensions = [\n\tStarterKit.configure({\n\t\tblockquote: false,\n\t\tcodeBlock: false,\n\t\thorizontalRule: false,\n\t\tlink: {\n\t\t\topenOnClick: false,\n\t\t\tautolink: true,\n\t\t},\n\t}),\n\tHighlight,\n\tKeyboardShiftEnterTweakExtension,\n\tTextDirection,\n]\n\n// todo: bust this if the editor changes, too\nconst htmlCache = new WeakCache<TLRichText, string>()\n\n/**\n * Renders HTML from a rich text string.\n *\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {\n\treturn htmlCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\tconst html = generateHTML(richText as JSONContent, tipTapExtensions)\n\t\t// We replace empty paragraphs with a single line break to prevent the browser from collapsing them.\n\t\treturn html.replaceAll('<p dir=\"auto\"></p>', '<p><br /></p>') ?? ''\n\t})\n}\n\n/**\n * Renders HTML from a rich text string for measurement.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {\n\tconst html = renderHtmlFromRichText(editor, richText)\n\treturn `<div class=\"tl-rich-text\">${html}</div>`\n}\n\n// A weak cache used to store plaintext that's been extracted from rich text.\nconst plainTextFromRichTextCache = new WeakCache<TLRichText, string>()\n\nexport function isEmptyRichText(richText: TLRichText) {\n\tif (richText.content.length === 1) {\n\t\tif (!(richText.content[0] as any).content) return true\n\t}\n\treturn false\n}\n\n/**\n * Renders plaintext from a rich text string.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {\n\tif (isEmptyRichText(richText)) return ''\n\n\treturn plainTextFromRichTextCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\treturn generateText(richText as JSONContent, tipTapExtensions, {\n\t\t\tblockSeparator: '\\n',\n\t\t})\n\t})\n}\n\n/**\n * Renders JSONContent from html.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {\n\tconst tipTapExtensions =\n\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\treturn generateJSON(html, tipTapExtensions) as TLRichText\n}\n\n/** @public */\nexport function defaultAddFontsFromNode(\n\tnode: Node,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) {\n\tfor (const mark of node.marks) {\n\t\tif (mark.type.name === 'bold' && state.weight !== 'bold') {\n\t\t\tstate = { ...state, weight: 'bold' }\n\t\t}\n\t\tif (mark.type.name === 'italic' && state.style !== 'italic') {\n\t\t\tstate = { ...state, style: 'italic' }\n\t\t}\n\t\tif (mark.type.name === 'code' && state.family !== 'tldraw_mono') {\n\t\t\tstate = { ...state, family: 'tldraw_mono' }\n\t\t}\n\t}\n\n\tconst fontsForFamily = getOwnProperty(DefaultFontFaces, state.family)\n\tif (!fontsForFamily) return state\n\n\tconst fontsForStyle = getOwnProperty(fontsForFamily, state.style)\n\tif (!fontsForStyle) return state\n\n\tconst fontsForWeight = getOwnProperty(fontsForStyle, state.weight)\n\tif (!fontsForWeight) return state\n\n\taddFont(fontsForWeight)\n\n\treturn state\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["import {\n\tExtension,\n\tExtensions,\n\tgenerateHTML,\n\tgenerateJSON,\n\tgenerateText,\n\tJSONContent,\n} from '@tiptap/core'\nimport { Code } from '@tiptap/extension-code'\nimport { Highlight } from '@tiptap/extension-highlight'\nimport { Node } from '@tiptap/pm/model'\nimport { StarterKit } from '@tiptap/starter-kit'\nimport {\n\tEditor,\n\tgetOwnProperty,\n\tRichTextFontVisitorState,\n\tTLFontFace,\n\tTLRichText,\n\tWeakCache,\n} from '@tldraw/editor'\nimport { DefaultFontFaces } from '../../shapes/shared/defaultFonts'\nimport { TextDirection } from './textDirection'\n\n/** @public */\nexport const KeyboardShiftEnterTweakExtension = Extension.create({\n\tname: 'keyboardShiftEnterHandler',\n\taddKeyboardShortcuts() {\n\t\treturn {\n\t\t\t// We don't support soft breaks, so we just use the default enter command.\n\t\t\t'Shift-Enter': ({ editor }) => editor.commands.enter(),\n\t\t}\n\t},\n})\n\n// We change the default Code to override what's in the StarterKit.\n// It allows for other attributes/extensions.\n// @ts-ignore this is fine.\nCode.config.excludes = undefined\n\n// We want the highlighting to take precedence over bolding/italics/links\n// as far as rendering is concerned. Otherwise, the highlighting\n// looks broken up.\nHighlight.config.priority = 1100\n\n/**\n * Default extensions for the TipTap editor.\n *\n * @public\n */\nexport const tipTapDefaultExtensions: Extensions = [\n\tStarterKit.configure({\n\t\tblockquote: false,\n\t\tcodeBlock: false,\n\t\thorizontalRule: false,\n\t\tlink: {\n\t\t\topenOnClick: false,\n\t\t\tautolink: true,\n\t\t},\n\t}),\n\tHighlight,\n\tKeyboardShiftEnterTweakExtension,\n\tTextDirection,\n]\n\n// todo: bust this if the editor changes, too\nconst htmlCache = new WeakCache<TLRichText, string>()\n\n/**\n * Renders HTML from a rich text string.\n *\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {\n\treturn htmlCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\tconst html = generateHTML(richText as JSONContent, tipTapExtensions)\n\t\t// We replace empty paragraphs with a single line break to prevent the browser from collapsing them.\n\t\treturn html.replaceAll('<p dir=\"auto\"></p>', '<p><br /></p>') ?? ''\n\t})\n}\n\n/**\n * Renders HTML from a rich text string for measurement.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {\n\tconst html = renderHtmlFromRichText(editor, richText)\n\treturn `<div class=\"tl-rich-text\">${html}</div>`\n}\n\n// A weak cache used to store plaintext that's been extracted from rich text.\nconst plainTextFromRichTextCache = new WeakCache<TLRichText, string>()\n\nexport function isEmptyRichText(richText: TLRichText) {\n\tif (richText.content.length === 1) {\n\t\tif (!(richText.content[0] as any).content) return true\n\t}\n\treturn false\n}\n\n/**\n * Renders plaintext from a rich text string.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {\n\tif (isEmptyRichText(richText)) return ''\n\n\treturn plainTextFromRichTextCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\treturn generateText(richText as JSONContent, tipTapExtensions, {\n\t\t\tblockSeparator: '\\n',\n\t\t})\n\t})\n}\n\n/**\n * Renders JSONContent from html.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {\n\tconst tipTapExtensions =\n\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\treturn generateJSON(html, tipTapExtensions) as TLRichText\n}\n\n/** @public */\nexport function defaultAddFontsFromNode(\n\tnode: Node,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) {\n\tfor (const mark of node.marks) {\n\t\tif (mark.type.name === 'bold' && state.weight !== 'bold') {\n\t\t\tstate = { ...state, weight: 'bold' }\n\t\t}\n\t\tif (mark.type.name === 'italic' && state.style !== 'italic') {\n\t\t\tstate = { ...state, style: 'italic' }\n\t\t}\n\t\tif (mark.type.name === 'code' && state.family !== 'tldraw_mono') {\n\t\t\tstate = { ...state, family: 'tldraw_mono' }\n\t\t}\n\t}\n\n\tconst fontsForFamily = getOwnProperty(DefaultFontFaces, state.family)\n\tif (!fontsForFamily) return state\n\n\tconst fontsForStyle = getOwnProperty(fontsForFamily, state.style)\n\tif (!fontsForStyle) return state\n\n\tconst fontsForWeight = getOwnProperty(fontsForStyle, state.weight)\n\tif (!fontsForWeight) return state\n\n\taddFont(fontsForWeight)\n\n\treturn state\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOO;AACP,4BAAqB;AACrB,iCAA0B;AAE1B,yBAA2B;AAC3B,oBAOO;AACP,0BAAiC;AACjC,2BAA8B;AAGvB,MAAM,mCAAmC,sBAAU,OAAO;AAAA,EAChE,MAAM;AAAA,EACN,uBAAuB;AACtB,WAAO;AAAA;AAAA,MAEN,eAAe,CAAC,EAAE,OAAO,MAAM,OAAO,SAAS,MAAM;AAAA,IACtD;AAAA,EACD;AACD,CAAC;AAKD,2BAAK,OAAO,WAAW;AAKvB,qCAAU,OAAO,WAAW;AAOrB,MAAM,0BAAsC;AAAA,EAClD,8BAAW,UAAU;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,MAAM;AAAA,MACL,aAAa;AAAA,MACb,UAAU;AAAA,IACX;AAAA,EACD,CAAC;AAAA,EACD;AAAA,EACA;AAAA,EACA;AACD;AAGA,MAAM,YAAY,IAAI,wBAA8B;AAU7C,SAAS,uBAAuB,QAAgB,UAAsB;AAC5E,SAAO,UAAU,IAAI,UAAU,MAAM;AACpC,UAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,UAAM,WAAO,0BAAa,UAAyB,gBAAgB;AAEnE,WAAO,KAAK,WAAW,sBAAsB,eAAe,KAAK;AAAA,EAClE,CAAC;AACF;AAUO,SAAS,qCAAqC,QAAgB,UAAsB;AAC1F,QAAM,OAAO,uBAAuB,QAAQ,QAAQ;AACpD,SAAO,6BAA6B,IAAI;AACzC;AAGA,MAAM,6BAA6B,IAAI,wBAA8B;AAE9D,SAAS,gBAAgB,UAAsB;AACrD,MAAI,SAAS,QAAQ,WAAW,GAAG;AAClC,QAAI,CAAE,SAAS,QAAQ,CAAC,EAAU,QAAS,QAAO;AAAA,EACnD;AACA,SAAO;AACR;AAUO,SAAS,4BAA4B,QAAgB,UAAsB;AACjF,MAAI,gBAAgB,QAAQ,EAAG,QAAO;AAEtC,SAAO,2BAA2B,IAAI,UAAU,MAAM;AACrD,UAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,eAAO,0BAAa,UAAyB,kBAAkB;AAAA,MAC9D,gBAAgB;AAAA,IACjB,CAAC;AAAA,EACF,CAAC;AACF;AAUO,SAAS,uBAAuB,QAAgB,MAA0B;AAChF,QAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,aAAO,0BAAa,MAAM,gBAAgB;AAC3C;AAGO,SAAS,wBACf,MACA,OACA,SACC;AACD,aAAW,QAAQ,KAAK,OAAO;AAC9B,QAAI,KAAK,KAAK,SAAS,UAAU,MAAM,WAAW,QAAQ;AACzD,cAAQ,EAAE,GAAG,OAAO,QAAQ,OAAO;AAAA,IACpC;AACA,QAAI,KAAK,KAAK,SAAS,YAAY,MAAM,UAAU,UAAU;AAC5D,cAAQ,EAAE,GAAG,OAAO,OAAO,SAAS;AAAA,IACrC;AACA,QAAI,KAAK,KAAK,SAAS,UAAU,MAAM,WAAW,eAAe;AAChE,cAAQ,EAAE,GAAG,OAAO,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACD;AAEA,QAAM,qBAAiB,8BAAe,sCAAkB,MAAM,MAAM;AACpE,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,oBAAgB,8BAAe,gBAAgB,MAAM,KAAK;AAChE,MAAI,CAAC,cAAe,QAAO;AAE3B,QAAM,qBAAiB,8BAAe,eAAe,MAAM,MAAM;AACjE,MAAI,CAAC,eAAgB,QAAO;AAE5B,UAAQ,cAAc;AAEtB,SAAO;AACR;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/dist-esm/index.d.mts
CHANGED
|
@@ -291,6 +291,8 @@ export declare interface ArrowShapeOptions {
|
|
|
291
291
|
* When creating an arrow, should it bind to the target shape.
|
|
292
292
|
*/
|
|
293
293
|
shouldIgnoreTargets(editor: Editor): boolean;
|
|
294
|
+
/** Whether to show the outline of the arrow shape's label (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
|
|
295
|
+
readonly showTextOutline: boolean;
|
|
294
296
|
}
|
|
295
297
|
|
|
296
298
|
/** @public */
|
|
@@ -1677,6 +1679,9 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
|
|
|
1677
1679
|
static type: "geo";
|
|
1678
1680
|
static props: RecordProps<TLGeoShape>;
|
|
1679
1681
|
static migrations: TLPropsMigrations;
|
|
1682
|
+
options: {
|
|
1683
|
+
showTextOutline: boolean;
|
|
1684
|
+
};
|
|
1680
1685
|
canEdit(): boolean;
|
|
1681
1686
|
getDefaultProps(): TLGeoShape['props'];
|
|
1682
1687
|
getGeometry(shape: TLGeoShape): Group2d;
|
|
@@ -2438,6 +2443,7 @@ export declare interface PlainTextLabelProps {
|
|
|
2438
2443
|
textWidth?: number;
|
|
2439
2444
|
textHeight?: number;
|
|
2440
2445
|
padding?: number;
|
|
2446
|
+
showTextOutline?: boolean;
|
|
2441
2447
|
}
|
|
2442
2448
|
|
|
2443
2449
|
/** @public */
|
|
@@ -2583,6 +2589,7 @@ export declare interface RichTextLabelProps {
|
|
|
2583
2589
|
textHeight?: number;
|
|
2584
2590
|
padding?: number;
|
|
2585
2591
|
hasCustomTabBehavior?: boolean;
|
|
2592
|
+
showTextOutline?: boolean;
|
|
2586
2593
|
}
|
|
2587
2594
|
|
|
2588
2595
|
/**
|
|
@@ -2871,6 +2878,8 @@ export declare const TextDirection: Extension<any, any>;
|
|
|
2871
2878
|
export declare interface TextShapeOptions {
|
|
2872
2879
|
/** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
|
|
2873
2880
|
extraArrowHorizontalPadding: number;
|
|
2881
|
+
/** Whether to show the outline of the text shape (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
|
|
2882
|
+
showTextOutline: boolean;
|
|
2874
2883
|
}
|
|
2875
2884
|
|
|
2876
2885
|
/** @public */
|