@mocanvas/mocanvas 4.0.2 → 4.1.0
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/ARCHITECTURE.md +8 -2
- package/MIGRATION.md +46 -22
- package/README.md +27 -2
- package/UI.md +24 -2
- package/dist/{chunk-TWCVRVK2.js → chunk-3F2HKY37.js} +3 -3
- package/dist/{chunk-TWCVRVK2.js.map → chunk-3F2HKY37.js.map} +1 -1
- package/dist/{chunk-DMCI6V5Y.js → chunk-HRUFJLK5.js} +3 -3
- package/dist/{chunk-DMCI6V5Y.js.map → chunk-HRUFJLK5.js.map} +1 -1
- package/dist/{chunk-OCYJAMXT.js → chunk-S7FPGQAA.js} +22 -3
- package/dist/chunk-S7FPGQAA.js.map +1 -0
- package/dist/{chunk-QDUQZXE4.js → chunk-YMUR46N6.js} +456 -19
- package/dist/chunk-YMUR46N6.js.map +1 -0
- package/dist/{export-VQGOVONC.js → export-UA6X35ZW.js} +4 -4
- package/dist/{export-VQGOVONC.js.map → export-UA6X35ZW.js.map} +1 -1
- package/dist/index.d.ts +279 -35
- package/dist/index.js +404 -410
- package/dist/index.js.map +1 -1
- package/dist/{ui-4C5V5GYT.css → mocanvas.css} +73 -241
- package/dist/mocanvas.css.map +1 -0
- package/dist/panel-shortcuts-4GIFCQQR.js +4 -0
- package/dist/{panel-shortcuts-R2PDTDUN.js.map → panel-shortcuts-4GIFCQQR.js.map} +1 -1
- package/dist/urlContent-WYYVQYYN.js +4 -0
- package/dist/{urlContent-GC44EU52.js.map → urlContent-WYYVQYYN.js.map} +1 -1
- package/package.json +8 -4
- package/dist/chunk-OCYJAMXT.js.map +0 -1
- package/dist/chunk-QDUQZXE4.js.map +0 -1
- package/dist/panel-shortcuts-R2PDTDUN.js +0 -4
- package/dist/urlContent-GC44EU52.js +0 -4
package/dist/index.js
CHANGED
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
import { getSvgString, exportToBlob, getTextMeasure, copyBlobToClipboard, downloadBlob, DEFAULT_GEO_TYPE_DEFINITIONS, GeoShapeUtil, ArrowShapeUtil, TextShapeUtil, NoteShapeUtil, FrameShapeUtil, VideoShapeUtil, getRichTextExtensions, TextLabel, textToSvg, getFontFamily, getArrowTerminalsInArrowSpace, getArrowBindings, getElbowBody, getArrowBody, getBodyLength, getArrowheadLength, getArrowheadInset, shortenBody, getElbowRoute, getArrowBindingTargetAtPoint, getNormalizedAnchor, getThemeColors, getDashId, getFillRgba, getStrokeRgba } from './chunk-
|
|
2
|
-
export { ARROW_KINDS, ARROW_LABEL_PADDING, ARROW_TERMINAL_GAP_STROKES, AVG_CHAR_WIDTH, ArrowShapeUtil, DEFAULT_GEO_TYPE_DEFINITIONS, ELBOW_CORNER_STROKES, FALLBACK_THEME_COLORS, FRAME_FILL, FRAME_NAME_COLOR, FRAME_NAME_FONT_SIZE, FRAME_NAME_GAP, FRAME_NAME_HEIGHT, FRAME_NAME_OFFSET, FRAME_STROKE, FRAME_STROKE_WIDTH, FrameShapeUtil, GEO_DEFAULT_SIZE, GEO_LABEL_PADDING, GeoShapeUtil, LINE_HEIGHT, MAX_TEXT_TEXTURE_PX, NOTE_GRADIENT_TOP_SCALE, NOTE_PADDING, NOTE_SHADOW_BLUR, NOTE_SHADOW_COLOR, NOTE_SHADOW_OFFSET_Y, NOTE_SHADOW_OPACITY, NOTE_SHADOW_SPREAD, NOTE_SIZE, NoteShapeUtil, RICH_TEXT_BLOCK_CSS, SVG_DARK_BACKGROUND, SVG_EXPORT_DEFAULT_PADDING, SVG_LIGHT_BACKGROUND, TEXT_SHAPE_MIN_WIDTH, TextLabel, TextMeasure, TextShapeUtil, VIDEO_HEIGHT, VIDEO_PLACEHOLDER_FILL, VIDEO_PLACEHOLDER_STROKE, VIDEO_PLAY_COLOR, VIDEO_PLAY_SIZE, VIDEO_TIME_EPSILON, VIDEO_WIDTH, VideoShapeUtil, alignToJustify, alignToTextAlign, applyTransform, bodyToGeometry, computeGrowY, copyBlobToClipboard, dashArray, defaultShapeSvgRenderer, downloadBlob, escapeXml, estimateTextSize, exportToBlob, geoShapeMigrations, geoShapeVersions, geometryFallbackSvg, geometryToSvgPaths, getAnchorInShapeSpace, getArrowBindingTargetAtPoint, getArrowBindings, getArrowBody, getArrowDisplayValues, getArrowTerminalGap, getArrowTerminalsInArrowSpace, getArrowheadGeometry, getArrowheadInset, getArrowheadLength, getBendFromPoint, getBodyLength, getBoundElbowAxes, getDashId, getDominantAxis, getElbowBody, getElbowMidPointFromPoint, getElbowRoute, getExportBounds, getExportShapes, getFillRgba, getFontFamily, getFrameDisplayValues, getGeoDisplayValues, getGeoGrowY, getGeoTypeDefinition, getLabelFontFaces, getLabelOpticalLift, getNormalizedAnchor, getNoteBodyGradientCss, getNoteDisplayValues, getNoteFillCssColor, getNoteFillRgba, getNoteFontSize, getNoteGradientTopCssColor, getNoteGradientTopFrom, getNoteGrowY, getNoteShadowCss, getNoteShadowSvgRect, getNoteTextCssColor, getOutlineSegments, getPointOnBody, getRichTextExtensions, getStrokeRgba, getSvgString, getTangentOnBody, getTextCssColor, getTextDisplayValues, getTextMeasure, getTextShapeBox, getTextShapeHeight, getTextShapeSize, getTextShapeSizeFor, getTextShapeTextureSpec, getTextTextureKey, getTextTextureScale, getTheme, getThemeColors, getVideoDisplayValues, getVideoPlayTriangle, getVideoSource, hexToCssRgba, horizontalAlignToFlex, horizontalAlignToTextAlign, intersectSegments, isVideoAutoplayAllowed, labelFontFamily, labelFontStyle, labelGapOnBody, labelTextAlign, matrixAttr, measureGeoLabel, measureLabel, measureRichText, readArrowProps, readArrowShape, readGeoProps, readNoteProps, readTextProps, registerShapeSvgRenderer, renderHtmlFromRichTextForMeasurement, renderHtmlFromRichTextWithExtensions, renderTextToCanvas, rgbaToHex, roundElbowCorners, shapeSvgRenderers, shapeToBackgroundSvg, shapeToSvg, shortenBody, svgResultToMarkup, textTextureAlign, textTextureText, textToSvg, toDisplayText, trimTrailingWhitespace, verticalAlignToAlignItems, verticalAlignToFlex, wrapTextLines, wrapTextTextureLines, wrapTextTextureRuns } from './chunk-
|
|
1
|
+
import { getSvgString, exportToBlob, getTextMeasure, copyBlobToClipboard, downloadBlob, DEFAULT_GEO_TYPE_DEFINITIONS, GeoShapeUtil, ArrowShapeUtil, TextShapeUtil, NoteShapeUtil, FrameShapeUtil, VideoShapeUtil, getRichTextExtensions, TextLabel, textToSvg, getFontFamily, getArrowTerminalsInArrowSpace, getArrowBindings, getElbowBody, getArrowBody, getBodyLength, getArrowheadLength, getArrowheadInset, shortenBody, getElbowRoute, getArrowBindingTargetAtPoint, getNormalizedAnchor, getThemeColors, getDashId, getFillRgba, getStrokeRgba } from './chunk-HRUFJLK5.js';
|
|
2
|
+
export { ARROW_KINDS, ARROW_LABEL_PADDING, ARROW_TERMINAL_GAP_STROKES, AVG_CHAR_WIDTH, ArrowShapeUtil, DEFAULT_GEO_TYPE_DEFINITIONS, ELBOW_CORNER_STROKES, FALLBACK_THEME_COLORS, FRAME_FILL, FRAME_NAME_COLOR, FRAME_NAME_FONT_SIZE, FRAME_NAME_GAP, FRAME_NAME_HEIGHT, FRAME_NAME_OFFSET, FRAME_STROKE, FRAME_STROKE_WIDTH, FrameShapeUtil, GEO_DEFAULT_SIZE, GEO_LABEL_PADDING, GeoShapeUtil, LINE_HEIGHT, MAX_TEXT_TEXTURE_PX, NOTE_GRADIENT_TOP_SCALE, NOTE_PADDING, NOTE_SHADOW_BLUR, NOTE_SHADOW_COLOR, NOTE_SHADOW_OFFSET_Y, NOTE_SHADOW_OPACITY, NOTE_SHADOW_SPREAD, NOTE_SIZE, NoteShapeUtil, RICH_TEXT_BLOCK_CSS, SVG_DARK_BACKGROUND, SVG_EXPORT_DEFAULT_PADDING, SVG_LIGHT_BACKGROUND, TEXT_SHAPE_MIN_WIDTH, TextLabel, TextMeasure, TextShapeUtil, VIDEO_HEIGHT, VIDEO_PLACEHOLDER_FILL, VIDEO_PLACEHOLDER_STROKE, VIDEO_PLAY_COLOR, VIDEO_PLAY_SIZE, VIDEO_TIME_EPSILON, VIDEO_WIDTH, VideoShapeUtil, alignToJustify, alignToTextAlign, applyTransform, bodyToGeometry, computeGrowY, copyBlobToClipboard, dashArray, defaultShapeSvgRenderer, downloadBlob, escapeXml, estimateTextSize, exportToBlob, geoShapeMigrations, geoShapeVersions, geometryFallbackSvg, geometryToSvgPaths, getAnchorInShapeSpace, getArrowBindingTargetAtPoint, getArrowBindings, getArrowBody, getArrowDisplayValues, getArrowTerminalGap, getArrowTerminalsInArrowSpace, getArrowheadGeometry, getArrowheadInset, getArrowheadLength, getBendFromPoint, getBodyLength, getBoundElbowAxes, getDashId, getDominantAxis, getElbowBody, getElbowMidPointFromPoint, getElbowRoute, getExportBounds, getExportShapes, getFillRgba, getFontFamily, getFrameDisplayValues, getGeoDisplayValues, getGeoGrowY, getGeoTypeDefinition, getLabelFontFaces, getLabelOpticalLift, getNormalizedAnchor, getNoteBodyGradientCss, getNoteDisplayValues, getNoteFillCssColor, getNoteFillRgba, getNoteFontSize, getNoteGradientTopCssColor, getNoteGradientTopFrom, getNoteGrowY, getNoteShadowCss, getNoteShadowSvgRect, getNoteTextCssColor, getOutlineSegments, getPointOnBody, getRichTextExtensions, getStrokeRgba, getSvgString, getTangentOnBody, getTextCssColor, getTextDisplayValues, getTextMeasure, getTextShapeBox, getTextShapeHeight, getTextShapeSize, getTextShapeSizeFor, getTextShapeTextureSpec, getTextTextureKey, getTextTextureScale, getTheme, getThemeColors, getVideoDisplayValues, getVideoPlayTriangle, getVideoSource, hexToCssRgba, horizontalAlignToFlex, horizontalAlignToTextAlign, intersectSegments, isVideoAutoplayAllowed, labelFontFamily, labelFontStyle, labelGapOnBody, labelTextAlign, matrixAttr, measureGeoLabel, measureLabel, measureRichText, readArrowProps, readArrowShape, readGeoProps, readNoteProps, readTextProps, registerShapeSvgRenderer, renderHtmlFromRichTextForMeasurement, renderHtmlFromRichTextWithExtensions, renderTextToCanvas, rgbaToHex, roundElbowCorners, shapeSvgRenderers, shapeToBackgroundSvg, shapeToSvg, shortenBody, svgResultToMarkup, textTextureAlign, textTextureText, textToSvg, toDisplayText, trimTrailingWhitespace, verticalAlignToAlignItems, verticalAlignToFlex, wrapTextLines, wrapTextTextureLines, wrapTextTextureRuns } from './chunk-HRUFJLK5.js';
|
|
3
3
|
export { TLDRAW_FILE_EXTENSION, loadMocanvasFile, parseTldrawJsonFile, serializeMocanvasFile, serializeTldrawJson, serializeTldrawJsonBlob } from './chunk-GYF6AY4N.js';
|
|
4
|
-
import { registerDefaultExternalContentHandlers, createTextShapeAt, createImageAssetFromSvgText, defaultHandleExternalUrlContent, createBookmarkShape, readFileAsDataUrl, classifyExternalText } from './chunk-
|
|
5
|
-
export { BOOKMARK_UNFURL_FAILED, DEFAULT_MAX_IMAGE_DIMENSION, classifyExternalText, createBookmarkShape, createEmbedShape, createImageAssetFromFile, createImageAssetFromSvgText, createImageShapesForAssets, createTextShapeAt, defaultHandleExternalUrlContent, fitImageSize, getSvgTextSize, isAnimatedImageType, isImageFile, isSvgFile, loadImageSizeInBrowser, looksLikeSvg, looksLikeUrl, readFileAsDataUrl, registerDefaultExternalContentHandlers, svgTextToDataUrl } from './chunk-
|
|
6
|
-
import { registerRichTextEditorFactory, BookmarkShapeUtil, EmbedShapeUtil, richTextToHtml, richTextToText, asRichText, RICH_TEXT_NODES, RICH_TEXT_MARKS, readArray, propsOf, readNumber, readEnum, readBoolean, readStyle, drawShapeProps, drawShapeMigrations, polylinePath, highlightShapeProps, highlightShapeMigrations, readString, imageShapeProps, imageShapeMigrations, rectPath, lineShapeProps, lineShapeMigrations, svgPath, groupShapeProps, groupShapeMigrations, boxPath, toRichText } from './chunk-
|
|
7
|
-
export { BOOKMARK_BANNER_FILL, BOOKMARK_BANNER_HEIGHT, BOOKMARK_FAVICON_SIZE, BOOKMARK_FILL, BOOKMARK_GAP, BOOKMARK_HEIGHT, BOOKMARK_META_COLOR, BOOKMARK_META_FONT_SIZE, BOOKMARK_META_HEIGHT, BOOKMARK_MIN_BODY_HEIGHT, BOOKMARK_PADDING, BOOKMARK_RADIUS, BOOKMARK_STROKE, BOOKMARK_STROKE_WIDTH, BOOKMARK_TEXT_COLOR, BOOKMARK_TEXT_FONT_SIZE, BOOKMARK_TITLE_COLOR, BOOKMARK_TITLE_FONT_SIZE, BOOKMARK_TITLE_HEIGHT, BOOKMARK_WIDTH, BookmarkShapeUtil, DEFAULT_EMBED_DEFINITIONS, EMBED_HEIGHT, EMBED_PLACEHOLDER_FILL, EMBED_PLACEHOLDER_FONT_SIZE, EMBED_PLACEHOLDER_PADDING, EMBED_PLACEHOLDER_STROKE, EMBED_PLACEHOLDER_TEXT, EMBED_RADIUS, EMBED_SANDBOX, EMBED_SHAPE_PERMISSION_NAMES, EMBED_WIDTH, EmbedShapeUtil, RICH_TEXT_MARKS, RICH_TEXT_NODES, applyPlainTextToRichText, arrowBindingMigrations, arrowBindingProps, arrowShapeMigrations, arrowShapeProps, arrowShapeVersions, asRichText, bookmarkShapeMigrations, bookmarkShapeProps, boxPath, canBuildPath, createEmptyBookmarkShape, drawShapeMigrations, drawShapeProps, embedDefinitions, embedShapeMigrations, embedShapePermissionsToAllow, embedShapeProps, escapeHtml, frameShapeMigrations, frameShapeProps, geoShapeProps, getBookmarkAsset, getBookmarkCard, getBookmarkHostname, getBookmarkLayout, getEmbedDefinition, getEmbedDisplayValues, getEmbedInfo, getRichTextEditorFactory, groupShapeMigrations, groupShapeProps, highlightShapeMigrations, highlightShapeProps, imageShapeMigrations, imageShapeProps, isRichText, lineShapeMigrations, lineShapeProps, loadTipTapStarterExtensions, noteShapeMigrations, noteShapeProps, polylinePath, propsOf, readArray, readBoolean, readEnum, readNumber, readPoint, readRecord, readRichText, readString, readStyle, readText, rectPath, registerRichTextEditorFactory, richTextEquals, richTextToBlocks, richTextToHtml, richTextToText, richTextValidator, safeHref, svgPath, textShapeMigrations, textShapeProps, tipTapDefaultExtensions, toRichText, unknownEmbedShapePermissionOverrides, videoShapeMigrations, videoShapeProps } from './chunk-
|
|
8
|
-
import { Icon, Popover, TldrawUiMenuItem, TldrawUiMenuSubmenu, TldrawUiMenuGroup, TldrawUiMenuCheckboxItem,
|
|
9
|
-
export { DefaultDialogs, DefaultKeyboardShortcutsDialog, DefaultKeyboardShortcutsDialogContent, ExampleDialog, FloatingLayer, GEO_BOX, GEO_ICON_PATHS, ICONS, ICON_GRID, ICON_NAMES, Icon, KeyboardShortcutsDialogContents, LANGUAGES, Popover, RTL_LANGUAGES, TldrawUiButton, TldrawUiButtonCheck, TldrawUiButtonIcon, TldrawUiButtonLabel, TldrawUiDialogBody, TldrawUiDialogCloseButton, TldrawUiDialogFooter, TldrawUiDialogHeader, TldrawUiDialogTitle, TldrawUiDialogsProvider, TldrawUiDropdownMenuCheckboxItem, TldrawUiDropdownMenuContent, TldrawUiDropdownMenuGroup, TldrawUiDropdownMenuIndicator, TldrawUiDropdownMenuItem, TldrawUiDropdownMenuRoot, TldrawUiDropdownMenuSub, TldrawUiDropdownMenuSubContent, TldrawUiDropdownMenuSubTrigger, TldrawUiDropdownMenuTrigger, TldrawUiEventsProvider, TldrawUiIcon, TldrawUiKbd, TldrawUiMenuActionCheckboxItem, TldrawUiMenuActionItem, TldrawUiMenuCheckboxItem, TldrawUiMenuContextProvider, TldrawUiMenuGroup, TldrawUiMenuItem, TldrawUiMenuSubmenu, TldrawUiMenuToolItem, TldrawUiTranslationProvider, UiTooltip, getDefaultTranslationLocale, getGeoIconBox, isRtlLanguage, kbdToKeys, placeNear, useActionState, useAnchoredPosition, useCanApplySelectionAction, useCanRedo, useCanUndo, useCurrentTranslation, useDialogs, useDirection, useDismissable, useHasLockedShapes, useIsDarkMode, useIsGridMode, useMaybeCurrentTranslation, useMenuKeyboard, useMsg, useReadonly, useRelevantStyles, useTldrawUiMenuContext, useTranslation, useUiEvents, useUnlockedSelectedShapesCount } from './chunk-
|
|
4
|
+
import { registerDefaultExternalContentHandlers, createTextShapeAt, createImageAssetFromSvgText, defaultHandleExternalUrlContent, createBookmarkShape, readFileAsDataUrl, classifyExternalText } from './chunk-3F2HKY37.js';
|
|
5
|
+
export { BOOKMARK_UNFURL_FAILED, DEFAULT_MAX_IMAGE_DIMENSION, classifyExternalText, createBookmarkShape, createEmbedShape, createImageAssetFromFile, createImageAssetFromSvgText, createImageShapesForAssets, createTextShapeAt, defaultHandleExternalUrlContent, fitImageSize, getSvgTextSize, isAnimatedImageType, isImageFile, isSvgFile, loadImageSizeInBrowser, looksLikeSvg, looksLikeUrl, readFileAsDataUrl, registerDefaultExternalContentHandlers, svgTextToDataUrl } from './chunk-3F2HKY37.js';
|
|
6
|
+
import { registerRichTextEditorFactory, BookmarkShapeUtil, EmbedShapeUtil, richTextToHtml, richTextToText, asRichText, RICH_TEXT_NODES, RICH_TEXT_MARKS, readArray, propsOf, readNumber, readEnum, readBoolean, readStyle, drawShapeProps, drawShapeMigrations, polylinePath, highlightShapeProps, highlightShapeMigrations, readString, imageShapeProps, imageShapeMigrations, rectPath, lineShapeProps, lineShapeMigrations, svgPath, groupShapeProps, groupShapeMigrations, boxPath, toRichText } from './chunk-S7FPGQAA.js';
|
|
7
|
+
export { BOOKMARK_BANNER_FILL, BOOKMARK_BANNER_HEIGHT, BOOKMARK_FAVICON_SIZE, BOOKMARK_FILL, BOOKMARK_GAP, BOOKMARK_HEIGHT, BOOKMARK_META_COLOR, BOOKMARK_META_FONT_SIZE, BOOKMARK_META_HEIGHT, BOOKMARK_MIN_BODY_HEIGHT, BOOKMARK_PADDING, BOOKMARK_RADIUS, BOOKMARK_STROKE, BOOKMARK_STROKE_WIDTH, BOOKMARK_TEXT_COLOR, BOOKMARK_TEXT_FONT_SIZE, BOOKMARK_TITLE_COLOR, BOOKMARK_TITLE_FONT_SIZE, BOOKMARK_TITLE_HEIGHT, BOOKMARK_WIDTH, BookmarkShapeUtil, DEFAULT_EMBED_DEFINITIONS, EMBED_HEIGHT, EMBED_PLACEHOLDER_FILL, EMBED_PLACEHOLDER_FONT_SIZE, EMBED_PLACEHOLDER_PADDING, EMBED_PLACEHOLDER_STROKE, EMBED_PLACEHOLDER_TEXT, EMBED_RADIUS, EMBED_SANDBOX, EMBED_SHAPE_PERMISSION_NAMES, EMBED_WIDTH, EmbedShapeUtil, RICH_TEXT_MARKS, RICH_TEXT_NODES, applyPlainTextToRichText, arrowBindingMigrations, arrowBindingProps, arrowShapeMigrations, arrowShapeProps, arrowShapeVersions, asRichText, bookmarkShapeMigrations, bookmarkShapeProps, boxPath, canBuildPath, createEmptyBookmarkShape, drawShapeMigrations, drawShapeProps, embedDefinitions, embedShapeMigrations, embedShapePermissionsToAllow, embedShapeProps, escapeHtml, frameShapeMigrations, frameShapeProps, geoShapeProps, getBookmarkAsset, getBookmarkCard, getBookmarkHostname, getBookmarkLayout, getEmbedDefinition, getEmbedDisplayValues, getEmbedInfo, getRichTextEditorFactory, groupShapeMigrations, groupShapeProps, highlightShapeMigrations, highlightShapeProps, imageShapeMigrations, imageShapeProps, isRichText, lineShapeMigrations, lineShapeProps, loadTipTapStarterExtensions, noteShapeMigrations, noteShapeProps, polylinePath, propsOf, readArray, readBoolean, readEnum, readNumber, readPoint, readRecord, readRichText, readString, readStyle, readText, rectPath, registerRichTextEditorFactory, richTextEquals, richTextToBlocks, richTextToHtml, richTextToText, richTextValidator, safeHref, svgPath, textShapeMigrations, textShapeProps, tipTapDefaultExtensions, toRichText, unknownEmbedShapePermissionOverrides, videoShapeMigrations, videoShapeProps } from './chunk-S7FPGQAA.js';
|
|
8
|
+
import { Icon, Popover, TldrawUiMenuItem, TldrawUiMenuSubmenu, TldrawUiMenuGroup, TldrawUiMenuCheckboxItem, useAvailableTranslationLocales, TldrawUiDropdownMenuRoot, TldrawUiDropdownMenuTrigger, TldrawUiDropdownMenuContent, TldrawUiMenuContextProvider, useRelevantStyles, ICONS, ToolShortcuts, ActionShortcuts, TldrawUiMenuActionItem, TldrawUiDropdownMenuSub, TldrawUiDropdownMenuSubTrigger, TldrawUiDropdownMenuSubContent, FloatingLayer, TldrawUiIcon, DefaultDialogs, useUiEvents, useCanApplySelectionAction, useReadonly, useHasLockedShapes, TldrawUiMenuActionCheckboxItem, useDialogs, UiTooltip, ICON_NAMES, TldrawUiEventsProvider, TldrawUiTranslationProvider, TldrawUiDialogsProvider, useTranslation, useKeyboardShortcuts, debugStatsOpen } from './chunk-YMUR46N6.js';
|
|
9
|
+
export { ActionShortcuts, DefaultDialogs, DefaultKeyboardShortcutsDialog, DefaultKeyboardShortcutsDialogContent, ExampleDialog, FloatingLayer, GEO_BOX, GEO_ICON_PATHS, ICONS, ICON_GRID, ICON_NAMES, Icon, KEYBOARD_SHORTCUTS, KeyboardShortcutsDialogContents, LANGUAGES, Popover, RTL_LANGUAGES, TldrawUiButton, TldrawUiButtonCheck, TldrawUiButtonIcon, TldrawUiButtonLabel, TldrawUiDialogBody, TldrawUiDialogCloseButton, TldrawUiDialogFooter, TldrawUiDialogHeader, TldrawUiDialogTitle, TldrawUiDialogsProvider, TldrawUiDropdownMenuCheckboxItem, TldrawUiDropdownMenuContent, TldrawUiDropdownMenuGroup, TldrawUiDropdownMenuIndicator, TldrawUiDropdownMenuItem, TldrawUiDropdownMenuRoot, TldrawUiDropdownMenuSub, TldrawUiDropdownMenuSubContent, TldrawUiDropdownMenuSubTrigger, TldrawUiDropdownMenuTrigger, TldrawUiEventsProvider, TldrawUiIcon, TldrawUiKbd, TldrawUiMenuActionCheckboxItem, TldrawUiMenuActionItem, TldrawUiMenuCheckboxItem, TldrawUiMenuContextProvider, TldrawUiMenuGroup, TldrawUiMenuItem, TldrawUiMenuSubmenu, TldrawUiMenuToolItem, TldrawUiTranslationProvider, ToolShortcuts, UiTooltip, actionKeyMap, buildShortcutIndex, debugStatsOpen, getDefaultTranslationLocale, getGeoIconBox, groupKeyboardShortcuts, isRtlLanguage, kbdToKeys, normalizeKbd, placeNear, toolKeyMap, useActionShortcuts, useActionState, useAnchoredPosition, useAvailableTranslationLocales, useBoundActionShortcuts, useBoundToolShortcuts, useCanApplySelectionAction, useCanRedo, useCanUndo, useCurrentTranslation, useDialogs, useDirection, useDismissable, useHasLockedShapes, useIsDarkMode, useIsGridMode, useKeyboardShortcuts, useMaybeCurrentTranslation, useMenuKeyboard, useMsg, useReadonly, useRelevantStyles, useTldrawUiMenuContext, useToolShortcuts, useTranslation, useUiEvents, useUnlockedSelectedShapesCount } from './chunk-YMUR46N6.js';
|
|
10
10
|
import { catmullRomToBezier, pathWordsToSvgD } from './chunk-OMUOD53T.js';
|
|
11
11
|
export { HEXAGON_FLAT_SIDE_SPAN, STAR_INNER_RATIO, arcToCubicSegments, catmullRomToBezier, fitPointsToBox, getCloudSegments, getGeoDecorations, getGeoGeometry, getGeoPolygonPoints, getHeartSegments, getStadiumSegments, hasGeoFlip, lineSegment, mirrorPointsInBox, mirrorSegmentsInBox, pathWordsToSvgD, pointOnCubic, transformPathWords } from './chunk-OMUOD53T.js';
|
|
12
|
-
import { registerExportImplementation, registerTextMeasureImplementation, registerEngineProvider, getLoadedEngine, DEFAULT_COLORS, track, useEditor, GeoShapeGeoStyle, DefaultColorStyle, DefaultLabelColorStyle, DefaultFillStyle, DefaultDashStyle, DefaultSizeStyle, DefaultFontStyle, DefaultHorizontalAlignStyle, DefaultVerticalAlignStyle, GEO_SHAPE_KINDS, useTools, useGlobalMenuIsOpen, useIsToolSelected, DefaultFontFaces, LIGHT_THEME, useValue, EditorPortal, LineShapeSplineStyle, ArrowShapeKindStyle, ArrowShapeArrowheadStartStyle, ArrowShapeArrowheadEndStyle, DefaultTextAlignStyle, atom
|
|
12
|
+
import { registerExportImplementation, registerTextMeasureImplementation, registerEngineProvider, getLoadedEngine, DEFAULT_COLORS, track, useEditor, GeoShapeGeoStyle, DefaultColorStyle, DefaultLabelColorStyle, DefaultFillStyle, DefaultDashStyle, DefaultSizeStyle, DefaultFontStyle, DefaultHorizontalAlignStyle, DefaultVerticalAlignStyle, GEO_SHAPE_KINDS, useTools, useGlobalMenuIsOpen, useIsToolSelected, DefaultFontFaces, LIGHT_THEME, useValue, EditorPortal, LineShapeSplineStyle, ArrowShapeKindStyle, ArrowShapeArrowheadStartStyle, ArrowShapeArrowheadEndStyle, DefaultTextAlignStyle, atom, ShapeIndicatorCompositor, OverlayUtil, getOverlayDisplayValues, getSelectionHandlePositions, Rectangle2d, stopEventPropagation, MocanvasUiProvider, useContainerIfExists, BindingUtil, Vec, DIM_3D, DIM_2D, b64Vecs, getDefaultDisplayValues, ShapeUtil, Polygon2d, Polyline2d, STROKE_SIZES, getColorValue, hexToRgba, getUncroppedSize, BaseBoxShapeUtil, CubicSpline2d, Box, createStore, Editor as Editor$1, StateNode, loadEngine, Canvas, AssetUrlsProvider, EditorProvider, ContainerProvider, createShapeId, AssetRecordType, Geometry2d, PATH_OP, Group2d, Mat, useEditorComponents, useMaybeEditor, dropShapesOnFrameLike, getFrameLikeDropTarget } from '@mocanvas/editor';
|
|
13
13
|
export * from '@mocanvas/editor';
|
|
14
|
-
import { useState, useRef, Fragment,
|
|
14
|
+
import { createContext, useState, useRef, Fragment, useEffect, useMemo, useId, useCallback, useLayoutEffect, useContext, Children } from 'react';
|
|
15
15
|
import { Editor } from '@tiptap/core';
|
|
16
16
|
import StarterKit from '@tiptap/starter-kit';
|
|
17
|
-
import './ui-4C5V5GYT.css';
|
|
18
17
|
import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
19
|
-
import { atom } from '@mocanvas/state';
|
|
20
18
|
import { sortByIndex, getIndexBetween, getIndexAbove } from '@mocanvas/store';
|
|
21
19
|
|
|
22
20
|
// src/text/rich-text-render.ts
|
|
@@ -1583,7 +1581,9 @@ var TOOLBAR_GROUPS = [
|
|
|
1583
1581
|
],
|
|
1584
1582
|
[
|
|
1585
1583
|
{ id: "draw", tool: "draw", icon: "draw", label: "Draw", shortcut: "D", kbd: "d,p,b" },
|
|
1586
|
-
{ id: "
|
|
1584
|
+
{ id: "highlight", tool: "highlight", icon: "highlight", label: "Highlight", shortcut: "I", kbd: "i" },
|
|
1585
|
+
{ id: "eraser", tool: "eraser", icon: "eraser", label: "Eraser", shortcut: "E", kbd: "e" },
|
|
1586
|
+
{ id: "laser", tool: "laser", icon: "laser", label: "Laser", shortcut: "K", kbd: "k", readonlyOk: true }
|
|
1587
1587
|
],
|
|
1588
1588
|
[
|
|
1589
1589
|
{ id: "rectangle", tool: "geo", icon: "geo-rectangle", label: "Rectangle", shortcut: "R", kbd: "r", geo: "rectangle" },
|
|
@@ -1711,228 +1711,107 @@ function buildDefaultActionItems(editor) {
|
|
|
1711
1711
|
for (const entry of items) actions[entry.id] = entry;
|
|
1712
1712
|
return actions;
|
|
1713
1713
|
}
|
|
1714
|
-
|
|
1715
|
-
|
|
1714
|
+
var A11yContext = createContext(null);
|
|
1715
|
+
var NOOP = { announce: () => {
|
|
1716
|
+
}, currentMsg: null };
|
|
1717
|
+
function TldrawUiA11yProvider({ children }) {
|
|
1718
|
+
const [currentMsg, setCurrentMsg] = useState(null);
|
|
1719
|
+
const seq = useRef(0);
|
|
1720
|
+
const announce = useCallback((value2) => {
|
|
1721
|
+
seq.current += 1;
|
|
1722
|
+
setCurrentMsg({ ...value2, msg: seq.current % 2 === 0 ? `${value2.msg}\u200B` : value2.msg });
|
|
1723
|
+
}, []);
|
|
1724
|
+
const value = useMemo(() => ({ announce, currentMsg }), [announce, currentMsg]);
|
|
1725
|
+
return /* @__PURE__ */ jsx(A11yContext.Provider, { value, children });
|
|
1716
1726
|
}
|
|
1717
|
-
function
|
|
1718
|
-
|
|
1719
|
-
for (const tool of Object.values(tools)) {
|
|
1720
|
-
if (tool.disabled) continue;
|
|
1721
|
-
if (isReadonly && !tool.readonlyOk) continue;
|
|
1722
|
-
if (!tool.kbd) continue;
|
|
1723
|
-
for (const raw of tool.kbd.split(",")) {
|
|
1724
|
-
const key = raw.trim().toLowerCase();
|
|
1725
|
-
if (key === "" || key.includes("+")) continue;
|
|
1726
|
-
if (!map.has(key)) map.set(key, tool.id);
|
|
1727
|
-
}
|
|
1728
|
-
}
|
|
1729
|
-
return map;
|
|
1727
|
+
function useA11y() {
|
|
1728
|
+
return useContext(A11yContext) ?? NOOP;
|
|
1730
1729
|
}
|
|
1731
|
-
function
|
|
1730
|
+
function DefaultA11yAnnouncer() {
|
|
1731
|
+
const { currentMsg } = useA11y();
|
|
1732
|
+
const priority = currentMsg?.priority ?? "polite";
|
|
1733
|
+
const hidden = {
|
|
1734
|
+
position: "absolute",
|
|
1735
|
+
width: 1,
|
|
1736
|
+
height: 1,
|
|
1737
|
+
margin: -1,
|
|
1738
|
+
padding: 0,
|
|
1739
|
+
overflow: "hidden",
|
|
1740
|
+
clip: "rect(0 0 0 0)",
|
|
1741
|
+
whiteSpace: "nowrap",
|
|
1742
|
+
border: 0
|
|
1743
|
+
};
|
|
1744
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
1745
|
+
/* @__PURE__ */ jsx("div", { className: "mocanvas-a11y-announcer", role: "status", "aria-live": "polite", "aria-atomic": "true", style: hidden, children: priority === "polite" ? currentMsg?.msg : "" }),
|
|
1746
|
+
/* @__PURE__ */ jsx("div", { className: "mocanvas-a11y-announcer", role: "alert", "aria-live": "assertive", "aria-atomic": "true", style: hidden, children: priority === "assertive" ? currentMsg?.msg : "" })
|
|
1747
|
+
] });
|
|
1748
|
+
}
|
|
1749
|
+
function describeShape(shape) {
|
|
1750
|
+
if (shape.type !== "geo") return shape.type;
|
|
1751
|
+
const geo = shape.props?.["geo"];
|
|
1752
|
+
return typeof geo === "string" && geo !== "" ? geo : shape.type;
|
|
1753
|
+
}
|
|
1754
|
+
function useSelectedShapesAnnouncer() {
|
|
1732
1755
|
const editor = useEditor();
|
|
1733
|
-
const
|
|
1734
|
-
const
|
|
1735
|
-
|
|
1756
|
+
const { announce } = useA11y();
|
|
1757
|
+
const summary = useValue(
|
|
1758
|
+
"selection summary",
|
|
1759
|
+
() => {
|
|
1760
|
+
const shapes = editor.getSelectedShapes();
|
|
1761
|
+
if (shapes.length === 0) return "";
|
|
1762
|
+
const enhanced = editor.user.getIsEnhancedA11yMode();
|
|
1763
|
+
if (shapes.length === 1) {
|
|
1764
|
+
const shape = shapes[0];
|
|
1765
|
+
const name = describeShape(shape);
|
|
1766
|
+
if (!enhanced) return `${name} selected`;
|
|
1767
|
+
const bounds2 = editor.getShapePageBounds(shape);
|
|
1768
|
+
if (!bounds2) return `${name} selected`;
|
|
1769
|
+
return `${name} selected, at ${Math.round(bounds2.x)}, ${Math.round(bounds2.y)}, ${Math.round(bounds2.w)} by ${Math.round(bounds2.h)}`;
|
|
1770
|
+
}
|
|
1771
|
+
if (!enhanced) return `${shapes.length} shapes selected`;
|
|
1772
|
+
const bounds = editor.getSelectionPageBounds();
|
|
1773
|
+
if (!bounds) return `${shapes.length} shapes selected`;
|
|
1774
|
+
return `${shapes.length} shapes selected, ${Math.round(bounds.w)} by ${Math.round(bounds.h)}`;
|
|
1775
|
+
},
|
|
1776
|
+
[editor]
|
|
1777
|
+
);
|
|
1736
1778
|
useEffect(() => {
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
if (isEditable(e.target)) return;
|
|
1740
|
-
if (editor.getEditingShapeId()) return;
|
|
1741
|
-
const map = toolKeyMap(toolsRef.current, editor.getInstanceState().isReadonly);
|
|
1742
|
-
const id = map.get(e.key.toLowerCase());
|
|
1743
|
-
if (id === void 0) return;
|
|
1744
|
-
const tool = toolsRef.current[id];
|
|
1745
|
-
if (!tool) return;
|
|
1746
|
-
e.preventDefault();
|
|
1747
|
-
tool.onSelect("kbd");
|
|
1748
|
-
};
|
|
1749
|
-
window.addEventListener("keydown", onKeyDown);
|
|
1750
|
-
return () => window.removeEventListener("keydown", onKeyDown);
|
|
1751
|
-
}, [editor]);
|
|
1779
|
+
if (summary) announce({ msg: summary, priority: "polite" });
|
|
1780
|
+
}, [summary]);
|
|
1752
1781
|
}
|
|
1753
|
-
function
|
|
1754
|
-
|
|
1782
|
+
function SelectionAnnouncer() {
|
|
1783
|
+
useSelectedShapesAnnouncer();
|
|
1755
1784
|
return null;
|
|
1756
1785
|
}
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1786
|
+
function usePrefersReducedMotion() {
|
|
1787
|
+
const [os, setOs] = useState(false);
|
|
1788
|
+
useEffect(() => {
|
|
1789
|
+
if (typeof window === "undefined" || !window.matchMedia) return;
|
|
1790
|
+
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
1791
|
+
const update = () => setOs(mq.matches);
|
|
1792
|
+
update();
|
|
1793
|
+
mq.addEventListener("change", update);
|
|
1794
|
+
return () => mq.removeEventListener("change", update);
|
|
1795
|
+
}, []);
|
|
1796
|
+
return os;
|
|
1760
1797
|
}
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
const
|
|
1798
|
+
function useReduceMotion() {
|
|
1799
|
+
const editor = useEditor();
|
|
1800
|
+
const os = usePrefersReducedMotion();
|
|
1801
|
+
const preference = useValue("animationSpeed", () => editor.user.getUserPreferences().animationSpeed, [editor]);
|
|
1802
|
+
return preference === void 0 ? os : preference === 0;
|
|
1803
|
+
}
|
|
1804
|
+
function ReduceMotionAttribute() {
|
|
1805
|
+
const editor = useEditor();
|
|
1806
|
+
const reduced = useReduceMotion();
|
|
1764
1807
|
useEffect(() => {
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
if (accel) {
|
|
1773
|
-
switch (key) {
|
|
1774
|
-
case "z":
|
|
1775
|
-
e.preventDefault();
|
|
1776
|
-
if (e.shiftKey) editor.redo();
|
|
1777
|
-
else editor.undo();
|
|
1778
|
-
return;
|
|
1779
|
-
case "y":
|
|
1780
|
-
e.preventDefault();
|
|
1781
|
-
editor.redo();
|
|
1782
|
-
return;
|
|
1783
|
-
case "a":
|
|
1784
|
-
e.preventDefault();
|
|
1785
|
-
editor.selectAll();
|
|
1786
|
-
return;
|
|
1787
|
-
case "g": {
|
|
1788
|
-
e.preventDefault();
|
|
1789
|
-
const ids = editor.getSelectedShapeIds();
|
|
1790
|
-
if (!ids.length) return;
|
|
1791
|
-
editor.markHistoryStoppingPoint(e.shiftKey ? "ungroup" : "group");
|
|
1792
|
-
if (e.shiftKey) editor.ungroupShapes(ids);
|
|
1793
|
-
else editor.groupShapes(ids);
|
|
1794
|
-
return;
|
|
1795
|
-
}
|
|
1796
|
-
case "l": {
|
|
1797
|
-
e.preventDefault();
|
|
1798
|
-
if (e.shiftKey) {
|
|
1799
|
-
editor.markHistoryStoppingPoint("lock");
|
|
1800
|
-
editor.toggleLock();
|
|
1801
|
-
}
|
|
1802
|
-
return;
|
|
1803
|
-
}
|
|
1804
|
-
case "d": {
|
|
1805
|
-
e.preventDefault();
|
|
1806
|
-
const ids = editor.getSelectedShapeIds();
|
|
1807
|
-
if (ids.length) {
|
|
1808
|
-
editor.markHistoryStoppingPoint("duplicate");
|
|
1809
|
-
const copies = editor.duplicateShapes(ids);
|
|
1810
|
-
editor.setSelectedShapes(copies);
|
|
1811
|
-
}
|
|
1812
|
-
return;
|
|
1813
|
-
}
|
|
1814
|
-
case "c":
|
|
1815
|
-
case "x": {
|
|
1816
|
-
const ids = editor.getSelectedShapeIds();
|
|
1817
|
-
if (!ids.length) return;
|
|
1818
|
-
e.preventDefault();
|
|
1819
|
-
const content = editor.getContentFromCurrentPage(ids);
|
|
1820
|
-
if (content) {
|
|
1821
|
-
const text = JSON.stringify({ type: "application/mocanvas", ...content });
|
|
1822
|
-
navigator.clipboard?.writeText(text).catch(() => {
|
|
1823
|
-
});
|
|
1824
|
-
clipboardFallback = text;
|
|
1825
|
-
}
|
|
1826
|
-
if (key === "x") {
|
|
1827
|
-
editor.markHistoryStoppingPoint("cut");
|
|
1828
|
-
editor.deleteShapes(ids);
|
|
1829
|
-
}
|
|
1830
|
-
return;
|
|
1831
|
-
}
|
|
1832
|
-
case "v": {
|
|
1833
|
-
e.preventDefault();
|
|
1834
|
-
const paste = (text) => {
|
|
1835
|
-
try {
|
|
1836
|
-
const data = JSON.parse(text);
|
|
1837
|
-
if (data.type !== "application/mocanvas" || !Array.isArray(data.shapes)) return;
|
|
1838
|
-
editor.markHistoryStoppingPoint("paste");
|
|
1839
|
-
editor.putContentOntoCurrentPage(data, { point: editor.getViewportPageCenter() });
|
|
1840
|
-
} catch {
|
|
1841
|
-
}
|
|
1842
|
-
};
|
|
1843
|
-
if (navigator.clipboard?.readText) navigator.clipboard.readText().then(paste, () => clipboardFallback && paste(clipboardFallback));
|
|
1844
|
-
else if (clipboardFallback) paste(clipboardFallback);
|
|
1845
|
-
return;
|
|
1846
|
-
}
|
|
1847
|
-
case "=":
|
|
1848
|
-
case "+":
|
|
1849
|
-
e.preventDefault();
|
|
1850
|
-
editor.zoomIn();
|
|
1851
|
-
return;
|
|
1852
|
-
case "-":
|
|
1853
|
-
e.preventDefault();
|
|
1854
|
-
editor.zoomOut();
|
|
1855
|
-
return;
|
|
1856
|
-
case "0":
|
|
1857
|
-
e.preventDefault();
|
|
1858
|
-
editor.resetZoom();
|
|
1859
|
-
return;
|
|
1860
|
-
case "1":
|
|
1861
|
-
e.preventDefault();
|
|
1862
|
-
editor.zoomToFit();
|
|
1863
|
-
return;
|
|
1864
|
-
case "2":
|
|
1865
|
-
e.preventDefault();
|
|
1866
|
-
editor.zoomToSelection();
|
|
1867
|
-
return;
|
|
1868
|
-
case "]":
|
|
1869
|
-
e.preventDefault();
|
|
1870
|
-
if (e.altKey) editor.bringToFront();
|
|
1871
|
-
else editor.bringForward();
|
|
1872
|
-
return;
|
|
1873
|
-
case "[":
|
|
1874
|
-
e.preventDefault();
|
|
1875
|
-
if (e.altKey) editor.sendToBack();
|
|
1876
|
-
else editor.sendBackward();
|
|
1877
|
-
return;
|
|
1878
|
-
default:
|
|
1879
|
-
return;
|
|
1880
|
-
}
|
|
1881
|
-
}
|
|
1882
|
-
if (e.altKey) {
|
|
1883
|
-
if (e.code === "KeyD" || key === "d" || key === "\u2202") {
|
|
1884
|
-
e.preventDefault();
|
|
1885
|
-
debugStatsOpen.set(!debugStatsOpen.get());
|
|
1886
|
-
}
|
|
1887
|
-
return;
|
|
1888
|
-
}
|
|
1889
|
-
if (key === "q") {
|
|
1890
|
-
editor.updateInstanceState({ isToolLocked: !editor.getInstanceState().isToolLocked });
|
|
1891
|
-
return;
|
|
1892
|
-
}
|
|
1893
|
-
if (!bindTools) return;
|
|
1894
|
-
switch (key) {
|
|
1895
|
-
case "v":
|
|
1896
|
-
editor.setCurrentTool("select");
|
|
1897
|
-
break;
|
|
1898
|
-
case "h":
|
|
1899
|
-
editor.setCurrentTool("hand");
|
|
1900
|
-
break;
|
|
1901
|
-
case "r":
|
|
1902
|
-
editor.setCurrentTool("geo", { geo: "rectangle" });
|
|
1903
|
-
break;
|
|
1904
|
-
case "o":
|
|
1905
|
-
editor.setCurrentTool("geo", { geo: "ellipse" });
|
|
1906
|
-
break;
|
|
1907
|
-
case "d":
|
|
1908
|
-
case "p":
|
|
1909
|
-
case "b":
|
|
1910
|
-
editor.setCurrentTool("draw");
|
|
1911
|
-
break;
|
|
1912
|
-
case "e":
|
|
1913
|
-
editor.setCurrentTool("eraser");
|
|
1914
|
-
break;
|
|
1915
|
-
case "n":
|
|
1916
|
-
editor.setCurrentTool("note");
|
|
1917
|
-
break;
|
|
1918
|
-
case "t":
|
|
1919
|
-
editor.setCurrentTool("text");
|
|
1920
|
-
break;
|
|
1921
|
-
// arrow/line/frame are optional tools: apps may register a smaller set.
|
|
1922
|
-
case "a":
|
|
1923
|
-
if (editor.root.children?.["arrow"]) editor.setCurrentTool("arrow");
|
|
1924
|
-
break;
|
|
1925
|
-
case "l":
|
|
1926
|
-
if (editor.root.children?.["line"]) editor.setCurrentTool("line");
|
|
1927
|
-
break;
|
|
1928
|
-
case "f":
|
|
1929
|
-
if (editor.root.children?.["frame"]) editor.setCurrentTool("frame");
|
|
1930
|
-
break;
|
|
1931
|
-
}
|
|
1932
|
-
};
|
|
1933
|
-
window.addEventListener("keydown", onKeyDown);
|
|
1934
|
-
return () => window.removeEventListener("keydown", onKeyDown);
|
|
1935
|
-
}, [editor, bindTools]);
|
|
1808
|
+
const container = editor.getContainer();
|
|
1809
|
+
if (!container) return;
|
|
1810
|
+
if (reduced) container.setAttribute("data-reduce-motion", "true");
|
|
1811
|
+
else container.removeAttribute("data-reduce-motion");
|
|
1812
|
+
return () => container.removeAttribute("data-reduce-motion");
|
|
1813
|
+
}, [editor, reduced]);
|
|
1814
|
+
return null;
|
|
1936
1815
|
}
|
|
1937
1816
|
var IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
|
|
1938
1817
|
var MOD_KEY = IS_MAC ? "\u2318" : "Ctrl+";
|
|
@@ -2122,7 +2001,9 @@ function Chrome({ showStats, hidePanels }) {
|
|
|
2122
2001
|
c.Dialogs ? /* @__PURE__ */ jsx(c.Dialogs, {}) : null,
|
|
2123
2002
|
c.A11y ? /* @__PURE__ */ jsx(c.A11y, {}) : null,
|
|
2124
2003
|
c.Tooltip ? /* @__PURE__ */ jsx(c.Tooltip, {}) : null,
|
|
2125
|
-
/* @__PURE__ */ jsx(ToolShortcuts, {})
|
|
2004
|
+
/* @__PURE__ */ jsx(ToolShortcuts, {}),
|
|
2005
|
+
/* @__PURE__ */ jsx(ActionShortcuts, {}),
|
|
2006
|
+
/* @__PURE__ */ jsx(SelectionAnnouncer, {})
|
|
2126
2007
|
] });
|
|
2127
2008
|
}
|
|
2128
2009
|
function DefaultUi({ editor, components, overrides, showStats = true, canvas, hidePanels = false, children }) {
|
|
@@ -2194,70 +2075,6 @@ function useTldrawUiOrientation() {
|
|
|
2194
2075
|
const rtl = value.dir === "rtl";
|
|
2195
2076
|
return { ...value, prevKey: rtl ? "ArrowRight" : "ArrowLeft", nextKey: rtl ? "ArrowLeft" : "ArrowRight" };
|
|
2196
2077
|
}
|
|
2197
|
-
var A11yContext = createContext(null);
|
|
2198
|
-
var NOOP = { announce: () => {
|
|
2199
|
-
}, currentMsg: null };
|
|
2200
|
-
function TldrawUiA11yProvider({ children }) {
|
|
2201
|
-
const [currentMsg, setCurrentMsg] = useState(null);
|
|
2202
|
-
const seq = useRef(0);
|
|
2203
|
-
const announce = useCallback((value2) => {
|
|
2204
|
-
seq.current += 1;
|
|
2205
|
-
setCurrentMsg({ ...value2, msg: seq.current % 2 === 0 ? `${value2.msg}\u200B` : value2.msg });
|
|
2206
|
-
}, []);
|
|
2207
|
-
const value = useMemo(() => ({ announce, currentMsg }), [announce, currentMsg]);
|
|
2208
|
-
return /* @__PURE__ */ jsx(A11yContext.Provider, { value, children });
|
|
2209
|
-
}
|
|
2210
|
-
function useA11y() {
|
|
2211
|
-
return useContext(A11yContext) ?? NOOP;
|
|
2212
|
-
}
|
|
2213
|
-
function DefaultA11yAnnouncer() {
|
|
2214
|
-
const { currentMsg } = useA11y();
|
|
2215
|
-
const priority = currentMsg?.priority ?? "polite";
|
|
2216
|
-
const hidden = {
|
|
2217
|
-
position: "absolute",
|
|
2218
|
-
width: 1,
|
|
2219
|
-
height: 1,
|
|
2220
|
-
margin: -1,
|
|
2221
|
-
padding: 0,
|
|
2222
|
-
overflow: "hidden",
|
|
2223
|
-
clip: "rect(0 0 0 0)",
|
|
2224
|
-
whiteSpace: "nowrap",
|
|
2225
|
-
border: 0
|
|
2226
|
-
};
|
|
2227
|
-
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
2228
|
-
/* @__PURE__ */ jsx("div", { className: "mocanvas-a11y-announcer", role: "status", "aria-live": "polite", "aria-atomic": "true", style: hidden, children: priority === "polite" ? currentMsg?.msg : "" }),
|
|
2229
|
-
/* @__PURE__ */ jsx("div", { className: "mocanvas-a11y-announcer", role: "alert", "aria-live": "assertive", "aria-atomic": "true", style: hidden, children: priority === "assertive" ? currentMsg?.msg : "" })
|
|
2230
|
-
] });
|
|
2231
|
-
}
|
|
2232
|
-
function useSelectedShapesAnnouncer() {
|
|
2233
|
-
const editor = useEditor();
|
|
2234
|
-
const { announce } = useA11y();
|
|
2235
|
-
const summary = useValue(
|
|
2236
|
-
"selection summary",
|
|
2237
|
-
() => {
|
|
2238
|
-
const shapes = editor.getSelectedShapes();
|
|
2239
|
-
if (shapes.length === 0) return "";
|
|
2240
|
-
if (shapes.length === 1) return `${shapes[0].type} selected`;
|
|
2241
|
-
return `${shapes.length} shapes selected`;
|
|
2242
|
-
},
|
|
2243
|
-
[editor]
|
|
2244
|
-
);
|
|
2245
|
-
useEffect(() => {
|
|
2246
|
-
if (summary) announce({ msg: summary, priority: "polite" });
|
|
2247
|
-
}, [summary]);
|
|
2248
|
-
}
|
|
2249
|
-
function usePrefersReducedMotion() {
|
|
2250
|
-
const [os, setOs] = useState(false);
|
|
2251
|
-
useEffect(() => {
|
|
2252
|
-
if (typeof window === "undefined" || !window.matchMedia) return;
|
|
2253
|
-
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
2254
|
-
const update = () => setOs(mq.matches);
|
|
2255
|
-
update();
|
|
2256
|
-
mq.addEventListener("change", update);
|
|
2257
|
-
return () => mq.removeEventListener("change", update);
|
|
2258
|
-
}, []);
|
|
2259
|
-
return os;
|
|
2260
|
-
}
|
|
2261
2078
|
var ToastsContext = createContext(null);
|
|
2262
2079
|
var NOOP2 = { addToast: () => "", removeToast: () => {
|
|
2263
2080
|
}, clearToasts: () => {
|
|
@@ -2347,9 +2164,23 @@ function useTooltipSuppression() {
|
|
|
2347
2164
|
[ctx]
|
|
2348
2165
|
);
|
|
2349
2166
|
}
|
|
2167
|
+
function UiListsProvider({ overrides, children }) {
|
|
2168
|
+
const editor = useMaybeEditor();
|
|
2169
|
+
if (!editor) return /* @__PURE__ */ jsx(Fragment$1, { children });
|
|
2170
|
+
return /* @__PURE__ */ jsx(
|
|
2171
|
+
MocanvasUiProvider,
|
|
2172
|
+
{
|
|
2173
|
+
editor,
|
|
2174
|
+
defaultTools: buildDefaultToolItems,
|
|
2175
|
+
defaultActions: buildDefaultActionItems,
|
|
2176
|
+
...overrides ? { overrides } : {},
|
|
2177
|
+
children
|
|
2178
|
+
}
|
|
2179
|
+
);
|
|
2180
|
+
}
|
|
2350
2181
|
function TldrawUiContextProvider({ onUiEvent, components, overrides, forceMobile, children }) {
|
|
2351
2182
|
const translations = overrides?.translations;
|
|
2352
|
-
return /* @__PURE__ */ jsx(TldrawUiEventsProvider, { ...onUiEvent ? { onEvent: onUiEvent } : {}, children: /* @__PURE__ */ jsx(TldrawUiTranslationProvider, { ...translations ? { overrides: translations } : {}, children: /* @__PURE__ */ jsx(BreakPointProvider, { ...forceMobile ? { forceMobile } : {}, children: /* @__PURE__ */ jsx(TldrawUiA11yProvider, { children: /* @__PURE__ */ jsx(TldrawUiToastsProvider, { children: /* @__PURE__ */ jsx(TldrawUiDialogsProvider, { children: /* @__PURE__ */ jsx(TldrawUiComponentsProvider, { ...components ? { overrides: components } : {}, children: /* @__PURE__ */ jsx(TldrawUiTooltipProvider, { children }) }) }) }) }) }) }) });
|
|
2183
|
+
return /* @__PURE__ */ jsx(TldrawUiEventsProvider, { ...onUiEvent ? { onEvent: onUiEvent } : {}, children: /* @__PURE__ */ jsx(TldrawUiTranslationProvider, { ...translations ? { overrides: translations } : {}, children: /* @__PURE__ */ jsx(BreakPointProvider, { ...forceMobile ? { forceMobile } : {}, children: /* @__PURE__ */ jsx(TldrawUiA11yProvider, { children: /* @__PURE__ */ jsx(TldrawUiToastsProvider, { children: /* @__PURE__ */ jsx(TldrawUiDialogsProvider, { children: /* @__PURE__ */ jsx(TldrawUiComponentsProvider, { ...components ? { overrides: components } : {}, children: /* @__PURE__ */ jsx(UiListsProvider, { ...overrides ? { overrides } : {}, children: /* @__PURE__ */ jsx(TldrawUiTooltipProvider, { children }) }) }) }) }) }) }) }) });
|
|
2353
2184
|
}
|
|
2354
2185
|
function useDefaultHelpers() {
|
|
2355
2186
|
const editor = useEditor();
|
|
@@ -2580,7 +2411,7 @@ function TldrawUiPopover({ id, open: controlled, onOpenChange, side = "below", c
|
|
|
2580
2411
|
);
|
|
2581
2412
|
return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
|
|
2582
2413
|
}
|
|
2583
|
-
function TldrawUiPopoverTrigger({ className, children }) {
|
|
2414
|
+
function TldrawUiPopoverTrigger({ label, className, children }) {
|
|
2584
2415
|
const { id, open, setOpen, anchorRef } = usePopoverContext("TldrawUiPopoverTrigger");
|
|
2585
2416
|
return /* @__PURE__ */ jsx(
|
|
2586
2417
|
"button",
|
|
@@ -2590,6 +2421,7 @@ function TldrawUiPopoverTrigger({ className, children }) {
|
|
|
2590
2421
|
},
|
|
2591
2422
|
type: "button",
|
|
2592
2423
|
className: ["mocanvas-btn", className].filter(Boolean).join(" "),
|
|
2424
|
+
...label ? { "aria-label": label, "data-tooltip": label } : {},
|
|
2593
2425
|
"aria-haspopup": "dialog",
|
|
2594
2426
|
"aria-expanded": open,
|
|
2595
2427
|
"aria-controls": `${id}-content`,
|
|
@@ -2745,6 +2577,7 @@ function TldrawUiToolbar({ label, orientation = "horizontal", className, style,
|
|
|
2745
2577
|
}
|
|
2746
2578
|
function TldrawUiToolbarButton({ type = "icon", isActive, disabled, title, className, ref, onClick, children, ...rest }) {
|
|
2747
2579
|
const label = rest["aria-label"] ?? title;
|
|
2580
|
+
const tool = rest["data-tool"];
|
|
2748
2581
|
return /* @__PURE__ */ jsx(
|
|
2749
2582
|
"button",
|
|
2750
2583
|
{
|
|
@@ -2752,6 +2585,7 @@ function TldrawUiToolbarButton({ type = "icon", isActive, disabled, title, class
|
|
|
2752
2585
|
type: "button",
|
|
2753
2586
|
className: ["mocanvas-btn", `mocanvas-btn--${type}`, className].filter(Boolean).join(" "),
|
|
2754
2587
|
disabled,
|
|
2588
|
+
...tool ? { "data-tool": tool } : {},
|
|
2755
2589
|
...label ? { "aria-label": label, "data-tooltip": title ?? label } : {},
|
|
2756
2590
|
...isActive === void 0 ? {} : { "aria-pressed": isActive },
|
|
2757
2591
|
onClick,
|
|
@@ -2875,8 +2709,44 @@ async function exportAs(editor, format = "png", ids = editor.getSelectedShapeIds
|
|
|
2875
2709
|
const page = editor.getCurrentPage();
|
|
2876
2710
|
downloadBlob(blob, `${name ?? page?.name ?? "drawing"}.${format}`);
|
|
2877
2711
|
}
|
|
2878
|
-
function
|
|
2879
|
-
editor.
|
|
2712
|
+
function canPrint(editor) {
|
|
2713
|
+
return editor.getCurrentPageShapeIds().size > 0;
|
|
2714
|
+
}
|
|
2715
|
+
function printSelection(editor, ids) {
|
|
2716
|
+
const doc = editor.getContainerDocument();
|
|
2717
|
+
if (!doc?.body) return false;
|
|
2718
|
+
const rendered = getSvgString(editor, ids, {
|
|
2719
|
+
background: editor.getInstanceState().exportBackground,
|
|
2720
|
+
darkMode: false
|
|
2721
|
+
});
|
|
2722
|
+
if (!rendered) return false;
|
|
2723
|
+
const title = editor.getCurrentPage()?.name ?? "Drawing";
|
|
2724
|
+
const frame = doc.createElement("iframe");
|
|
2725
|
+
frame.setAttribute("aria-hidden", "true");
|
|
2726
|
+
frame.setAttribute("title", `Print ${title}`);
|
|
2727
|
+
frame.style.cssText = "position:fixed;left:-10000px;top:0;width:1px;height:1px;border:0;opacity:0";
|
|
2728
|
+
const cleanUp = () => frame.remove();
|
|
2729
|
+
frame.addEventListener("load", () => {
|
|
2730
|
+
const view = frame.contentWindow;
|
|
2731
|
+
if (!view) {
|
|
2732
|
+
cleanUp();
|
|
2733
|
+
return;
|
|
2734
|
+
}
|
|
2735
|
+
view.addEventListener("afterprint", cleanUp, { once: true });
|
|
2736
|
+
view.setTimeout(cleanUp, 6e4);
|
|
2737
|
+
view.focus();
|
|
2738
|
+
view.print();
|
|
2739
|
+
});
|
|
2740
|
+
frame.srcdoc = `<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml2(title)}</title><style>
|
|
2741
|
+
html,body{margin:0;padding:0;background:#fff}
|
|
2742
|
+
svg{display:block;width:100%;height:auto;max-width:100%}
|
|
2743
|
+
@page{margin:12mm}
|
|
2744
|
+
</style></head><body>${rendered.svg}</body></html>`;
|
|
2745
|
+
doc.body.appendChild(frame);
|
|
2746
|
+
return true;
|
|
2747
|
+
}
|
|
2748
|
+
function escapeHtml2(value) {
|
|
2749
|
+
return value.replace(/[&<>"]/g, (c) => c === "&" ? "&" : c === "<" ? "<" : c === ">" ? ">" : """);
|
|
2880
2750
|
}
|
|
2881
2751
|
function CutMenuItem() {
|
|
2882
2752
|
const editor = useEditor();
|
|
@@ -2924,11 +2794,10 @@ function ExportFileContentSubMenu() {
|
|
|
2924
2794
|
{
|
|
2925
2795
|
id: "save-file-copy",
|
|
2926
2796
|
label: "Save a copy",
|
|
2927
|
-
kbd: "mod+s",
|
|
2928
2797
|
onSelect: () => {
|
|
2929
2798
|
void import('./file-GEHTVI2G.js').then(({ serializeMocanvasFile: serializeMocanvasFile2 }) => {
|
|
2930
2799
|
const blob = new Blob([serializeMocanvasFile2(editor)], { type: "application/json" });
|
|
2931
|
-
void import('./export-
|
|
2800
|
+
void import('./export-UA6X35ZW.js').then(({ downloadBlob: downloadBlob2 }) => downloadBlob2(blob, `${editor.getCurrentPage()?.name ?? "drawing"}.mocanvas`));
|
|
2932
2801
|
});
|
|
2933
2802
|
}
|
|
2934
2803
|
}
|
|
@@ -2936,10 +2805,11 @@ function ExportFileContentSubMenu() {
|
|
|
2936
2805
|
/* @__PURE__ */ jsx(PrintItem, {})
|
|
2937
2806
|
] }) });
|
|
2938
2807
|
}
|
|
2939
|
-
|
|
2808
|
+
var PrintItem = track(function PrintItem2() {
|
|
2940
2809
|
const editor = useEditor();
|
|
2941
|
-
|
|
2942
|
-
}
|
|
2810
|
+
const enabled = canPrint(editor);
|
|
2811
|
+
return /* @__PURE__ */ jsx(TldrawUiMenuItem, { id: "print", label: "Print", disabled: !enabled, onSelect: () => void printSelection(editor) });
|
|
2812
|
+
});
|
|
2943
2813
|
function ConversionsMenuGroup() {
|
|
2944
2814
|
return /* @__PURE__ */ jsxs(TldrawUiMenuGroup, { id: "conversions", children: [
|
|
2945
2815
|
/* @__PURE__ */ jsx(CopyAsMenuGroup, {}),
|
|
@@ -3052,7 +2922,7 @@ var ConvertToEmbedMenuItem = track(function ConvertToEmbedMenuItem2() {
|
|
|
3052
2922
|
const url = shape.props.url;
|
|
3053
2923
|
if (!url) return;
|
|
3054
2924
|
editor.markHistoryStoppingPoint("convert to embed");
|
|
3055
|
-
void import('./urlContent-
|
|
2925
|
+
void import('./urlContent-WYYVQYYN.js').then(({ createEmbedShape: createEmbedShape2 }) => {
|
|
3056
2926
|
editor.deleteShapes([shape.id]);
|
|
3057
2927
|
createEmbedShape2(editor, url, { x: shape.x, y: shape.y });
|
|
3058
2928
|
});
|
|
@@ -3073,7 +2943,7 @@ var ConvertToBookmarkMenuItem = track(function ConvertToBookmarkMenuItem2() {
|
|
|
3073
2943
|
const url = shape.props.url;
|
|
3074
2944
|
if (!url) return;
|
|
3075
2945
|
editor.markHistoryStoppingPoint("convert to bookmark");
|
|
3076
|
-
void import('./urlContent-
|
|
2946
|
+
void import('./urlContent-WYYVQYYN.js').then(({ createBookmarkShape: createBookmarkShape2 }) => {
|
|
3077
2947
|
editor.deleteShapes([shape.id]);
|
|
3078
2948
|
createBookmarkShape2(editor, url, void 0, { x: shape.x, y: shape.y });
|
|
3079
2949
|
});
|
|
@@ -3201,15 +3071,14 @@ function ToggleTransparentBgMenuItem() {
|
|
|
3201
3071
|
}
|
|
3202
3072
|
function ToggleReduceMotionItem() {
|
|
3203
3073
|
const editor = useEditor();
|
|
3204
|
-
const
|
|
3205
|
-
const off = useValue("reduceMotion", () => editor.user.getAnimationSpeed() === 0, [editor]);
|
|
3074
|
+
const reduced = useReduceMotion();
|
|
3206
3075
|
return /* @__PURE__ */ jsx(
|
|
3207
3076
|
TldrawUiMenuCheckboxItem,
|
|
3208
3077
|
{
|
|
3209
3078
|
id: "toggle-reduce-motion",
|
|
3210
3079
|
label: "Reduce motion",
|
|
3211
|
-
checked:
|
|
3212
|
-
onSelect: () => editor.user.updateUserPreferences({ animationSpeed:
|
|
3080
|
+
checked: reduced,
|
|
3081
|
+
onSelect: () => editor.user.updateUserPreferences({ animationSpeed: reduced ? 1 : 0 })
|
|
3213
3082
|
}
|
|
3214
3083
|
);
|
|
3215
3084
|
}
|
|
@@ -3227,21 +3096,19 @@ var ToggleInvertZoomItem = track(function ToggleInvertZoomItem2() {
|
|
|
3227
3096
|
}
|
|
3228
3097
|
);
|
|
3229
3098
|
});
|
|
3230
|
-
var
|
|
3231
|
-
|
|
3232
|
-
const
|
|
3233
|
-
return
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3099
|
+
var ToggleEnhancedA11yModeItem = track(function ToggleEnhancedA11yModeItem2() {
|
|
3100
|
+
const editor = useEditor();
|
|
3101
|
+
const enabled = editor.user.getIsEnhancedA11yMode();
|
|
3102
|
+
return /* @__PURE__ */ jsx(
|
|
3103
|
+
TldrawUiMenuCheckboxItem,
|
|
3104
|
+
{
|
|
3105
|
+
id: "toggle-enhanced-a11y",
|
|
3106
|
+
label: "Enhanced accessibility",
|
|
3107
|
+
checked: enabled,
|
|
3108
|
+
onSelect: () => editor.user.updateUserPreferences({ isEnhancedA11yMode: !enabled })
|
|
3238
3109
|
}
|
|
3239
|
-
|
|
3240
|
-
}
|
|
3241
|
-
function ToggleEnhancedA11yModeItem() {
|
|
3242
|
-
const [enabled, setEnabled] = useEnhancedA11yMode();
|
|
3243
|
-
return /* @__PURE__ */ jsx(TldrawUiMenuCheckboxItem, { id: "toggle-enhanced-a11y", label: "Enhanced accessibility", checked: enabled, onSelect: () => setEnabled(!enabled) });
|
|
3244
|
-
}
|
|
3110
|
+
);
|
|
3111
|
+
});
|
|
3245
3112
|
function PreferencesGroup() {
|
|
3246
3113
|
return /* @__PURE__ */ jsxs(TldrawUiMenuGroup, { id: "preferences", label: "Preferences", children: [
|
|
3247
3114
|
/* @__PURE__ */ jsx(ToggleSnapModeItem, {}),
|
|
@@ -3261,22 +3128,27 @@ function PreferencesGroup() {
|
|
|
3261
3128
|
}
|
|
3262
3129
|
var ColorSchemeMenu = track(function ColorSchemeMenu2() {
|
|
3263
3130
|
const editor = useEditor();
|
|
3264
|
-
const current = editor.
|
|
3131
|
+
const current = editor.theme.getColorScheme();
|
|
3265
3132
|
return /* @__PURE__ */ jsx(TldrawUiMenuSubmenu, { id: "color-scheme", label: "Theme", children: /* @__PURE__ */ jsx(TldrawUiMenuGroup, { id: "color-scheme-group", children: ["light", "dark", "system"].map((scheme) => /* @__PURE__ */ jsx(
|
|
3266
3133
|
TldrawUiMenuCheckboxItem,
|
|
3267
3134
|
{
|
|
3268
3135
|
id: `color-scheme-${scheme}`,
|
|
3269
3136
|
label: scheme[0].toUpperCase() + scheme.slice(1),
|
|
3270
3137
|
checked: current === scheme,
|
|
3271
|
-
onSelect: () =>
|
|
3138
|
+
onSelect: () => {
|
|
3139
|
+
editor.setColorMode(scheme);
|
|
3140
|
+
editor.user.updateUserPreferences({ colorScheme: scheme });
|
|
3141
|
+
}
|
|
3272
3142
|
},
|
|
3273
3143
|
scheme
|
|
3274
3144
|
)) }) });
|
|
3275
3145
|
});
|
|
3276
3146
|
var LanguageMenu = track(function LanguageMenu2() {
|
|
3277
3147
|
const editor = useEditor();
|
|
3148
|
+
const languages = useAvailableTranslationLocales();
|
|
3278
3149
|
const current = editor.user.getLocale();
|
|
3279
|
-
|
|
3150
|
+
if (languages.length < 2) return null;
|
|
3151
|
+
return /* @__PURE__ */ jsx(TldrawUiMenuSubmenu, { id: "language", label: "Language", children: /* @__PURE__ */ jsx(TldrawUiMenuGroup, { id: "language-group", children: languages.map((language) => /* @__PURE__ */ jsx(
|
|
3280
3152
|
TldrawUiMenuCheckboxItem,
|
|
3281
3153
|
{
|
|
3282
3154
|
id: `language-${language.locale}`,
|
|
@@ -3343,9 +3215,8 @@ function KeyboardShortcutsMenuItem() {
|
|
|
3343
3215
|
{
|
|
3344
3216
|
id: "keyboard-shortcuts",
|
|
3345
3217
|
label: "Keyboard shortcuts",
|
|
3346
|
-
kbd: "mod+/",
|
|
3347
3218
|
onSelect: () => {
|
|
3348
|
-
void import('./panel-shortcuts-
|
|
3219
|
+
void import('./panel-shortcuts-4GIFCQQR.js').then(({ KeyboardShortcutsDialogContents: KeyboardShortcutsDialogContents2 }) => {
|
|
3349
3220
|
addDialog({ component: KeyboardShortcutsDialogContents2 });
|
|
3350
3221
|
});
|
|
3351
3222
|
}
|
|
@@ -3588,9 +3459,10 @@ function PageItemInput({ id, name, onCancel }) {
|
|
|
3588
3459
|
TldrawUiInput,
|
|
3589
3460
|
{
|
|
3590
3461
|
value: name,
|
|
3591
|
-
label:
|
|
3462
|
+
label: `Rename ${name}`,
|
|
3592
3463
|
autoFocus: true,
|
|
3593
3464
|
autoSelect: true,
|
|
3465
|
+
className: "mocanvas-page-rename",
|
|
3594
3466
|
onComplete: (next) => {
|
|
3595
3467
|
const trimmed = next.trim();
|
|
3596
3468
|
if (trimmed && trimmed !== name) {
|
|
@@ -3603,12 +3475,53 @@ function PageItemInput({ id, name, onCancel }) {
|
|
|
3603
3475
|
}
|
|
3604
3476
|
);
|
|
3605
3477
|
}
|
|
3606
|
-
function PageItemSubmenu({ id, total, onRename }) {
|
|
3478
|
+
function PageItemSubmenu({ id, total, name, onRename }) {
|
|
3607
3479
|
const editor = useEditor();
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
/* @__PURE__ */ jsx(
|
|
3480
|
+
const [open, setOpen] = useState(false);
|
|
3481
|
+
const label = name ? `Actions for ${name}` : "Page actions";
|
|
3482
|
+
return /* @__PURE__ */ jsxs(TldrawUiDropdownMenuSub, { id: `page-actions-${id}`, open, onOpenChange: setOpen, children: [
|
|
3483
|
+
/* @__PURE__ */ jsx(TldrawUiDropdownMenuSubTrigger, { label, className: "mocanvas-page-row-actions", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }) }),
|
|
3484
|
+
/* @__PURE__ */ jsx(TldrawUiDropdownMenuSubContent, { label, children: /* @__PURE__ */ jsxs(TldrawUiMenuGroup, { id: `page-actions-group-${id}`, children: [
|
|
3485
|
+
/* @__PURE__ */ jsx(
|
|
3486
|
+
TldrawUiMenuItem,
|
|
3487
|
+
{
|
|
3488
|
+
id: `rename-page-${id}`,
|
|
3489
|
+
label: "Rename",
|
|
3490
|
+
noClose: true,
|
|
3491
|
+
onSelect: () => {
|
|
3492
|
+
setOpen(false);
|
|
3493
|
+
onRename?.();
|
|
3494
|
+
}
|
|
3495
|
+
}
|
|
3496
|
+
),
|
|
3497
|
+
/* @__PURE__ */ jsx(
|
|
3498
|
+
TldrawUiMenuItem,
|
|
3499
|
+
{
|
|
3500
|
+
id: `duplicate-page-${id}`,
|
|
3501
|
+
label: "Duplicate",
|
|
3502
|
+
noClose: true,
|
|
3503
|
+
onSelect: () => {
|
|
3504
|
+
setOpen(false);
|
|
3505
|
+
editor.markHistoryStoppingPoint("duplicate page");
|
|
3506
|
+
editor.duplicatePage(id);
|
|
3507
|
+
}
|
|
3508
|
+
}
|
|
3509
|
+
),
|
|
3510
|
+
/* @__PURE__ */ jsx(
|
|
3511
|
+
TldrawUiMenuItem,
|
|
3512
|
+
{
|
|
3513
|
+
id: `delete-page-${id}`,
|
|
3514
|
+
label: "Delete",
|
|
3515
|
+
noClose: true,
|
|
3516
|
+
disabled: total < 2,
|
|
3517
|
+
onSelect: () => {
|
|
3518
|
+
setOpen(false);
|
|
3519
|
+
editor.markHistoryStoppingPoint("delete page");
|
|
3520
|
+
editor.deletePage(id);
|
|
3521
|
+
}
|
|
3522
|
+
}
|
|
3523
|
+
)
|
|
3524
|
+
] }) })
|
|
3612
3525
|
] });
|
|
3613
3526
|
}
|
|
3614
3527
|
var DefaultPageMenu = track(function DefaultPageMenu2() {
|
|
@@ -3618,43 +3531,57 @@ var DefaultPageMenu = track(function DefaultPageMenu2() {
|
|
|
3618
3531
|
const pages = editor.getPages();
|
|
3619
3532
|
const currentId = editor.getCurrentPageId();
|
|
3620
3533
|
const current = pages.find((page) => page.id === currentId);
|
|
3621
|
-
return /* @__PURE__ */ jsxs(
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3534
|
+
return /* @__PURE__ */ jsxs(
|
|
3535
|
+
TldrawUiDropdownMenuRoot,
|
|
3536
|
+
{
|
|
3537
|
+
id: "page-menu",
|
|
3538
|
+
open: isOpen,
|
|
3539
|
+
onOpenChange: (next) => {
|
|
3540
|
+
if (!next) setRenaming(null);
|
|
3541
|
+
setIsOpen(next);
|
|
3542
|
+
},
|
|
3543
|
+
children: [
|
|
3544
|
+
/* @__PURE__ */ jsx(TldrawUiDropdownMenuTrigger, { label: `Page: ${current?.name ?? "Untitled"}`, className: "mocanvas-btn--wide", children: current?.name ?? "Untitled" }),
|
|
3545
|
+
/* @__PURE__ */ jsx(TldrawUiDropdownMenuContent, { label: "Pages", side: "below", children: /* @__PURE__ */ jsxs(TldrawUiMenuContextProvider, { type: "menu", sourceId: "menu", children: [
|
|
3546
|
+
/* @__PURE__ */ jsx("div", { className: "mocanvas-page-list", role: "radiogroup", "aria-label": "Pages", children: pages.map((page) => /* @__PURE__ */ jsx("div", { className: "mocanvas-page-row", children: renaming === page.id ? /* @__PURE__ */ jsx(PageItemInput, { id: page.id, name: page.name, onCancel: () => setRenaming(null) }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
3547
|
+
/* @__PURE__ */ jsx(
|
|
3548
|
+
"button",
|
|
3549
|
+
{
|
|
3550
|
+
type: "button",
|
|
3551
|
+
role: "menuitemradio",
|
|
3552
|
+
"aria-checked": page.id === currentId,
|
|
3553
|
+
className: "mocanvas-menu-item mocanvas-page-row-name",
|
|
3554
|
+
"data-item": `page-${page.id}`,
|
|
3555
|
+
onDoubleClick: () => setRenaming(page.id),
|
|
3556
|
+
onClick: () => {
|
|
3557
|
+
editor.setCurrentPage(page.id);
|
|
3558
|
+
setIsOpen(false);
|
|
3559
|
+
},
|
|
3560
|
+
children: page.name
|
|
3561
|
+
}
|
|
3562
|
+
),
|
|
3563
|
+
/* @__PURE__ */ jsx(PageItemSubmenu, { id: page.id, index: pages.indexOf(page), total: pages.length, name: page.name, onRename: () => setRenaming(page.id) })
|
|
3564
|
+
] }) }, page.id)) }),
|
|
3565
|
+
/* @__PURE__ */ jsx(TldrawUiMenuGroup, { id: "page-menu-actions", children: /* @__PURE__ */ jsx(
|
|
3566
|
+
TldrawUiMenuItem,
|
|
3628
3567
|
{
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
"
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
editor.
|
|
3636
|
-
|
|
3637
|
-
|
|
3638
|
-
|
|
3568
|
+
id: "new-page",
|
|
3569
|
+
label: "New page",
|
|
3570
|
+
icon: "duplicate",
|
|
3571
|
+
noClose: true,
|
|
3572
|
+
onSelect: () => {
|
|
3573
|
+
const before = new Set(pages.map((page) => page.id));
|
|
3574
|
+
editor.markHistoryStoppingPoint("new page");
|
|
3575
|
+
editor.createPage({ name: `Page ${pages.length + 1}` });
|
|
3576
|
+
const created = editor.getPages().find((page) => !before.has(page.id));
|
|
3577
|
+
if (created) setRenaming(created.id);
|
|
3578
|
+
}
|
|
3639
3579
|
}
|
|
3640
|
-
)
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
|
|
3644
|
-
|
|
3645
|
-
TldrawUiMenuItem,
|
|
3646
|
-
{
|
|
3647
|
-
id: "new-page",
|
|
3648
|
-
label: "New page",
|
|
3649
|
-
icon: "duplicate",
|
|
3650
|
-
onSelect: () => {
|
|
3651
|
-
editor.markHistoryStoppingPoint("new page");
|
|
3652
|
-
editor.createPage({ name: `Page ${pages.length + 1}` });
|
|
3653
|
-
}
|
|
3654
|
-
}
|
|
3655
|
-
) })
|
|
3656
|
-
] }) })
|
|
3657
|
-
] });
|
|
3580
|
+
) })
|
|
3581
|
+
] }) })
|
|
3582
|
+
]
|
|
3583
|
+
}
|
|
3584
|
+
);
|
|
3658
3585
|
});
|
|
3659
3586
|
var DefaultMinimap = track(function DefaultMinimap2() {
|
|
3660
3587
|
const editor = useEditor();
|
|
@@ -4028,7 +3955,7 @@ var MobileStylePanel = track(function MobileStylePanel2() {
|
|
|
4028
3955
|
const disabled = editor.getIsReadonly();
|
|
4029
3956
|
if (!styles) return null;
|
|
4030
3957
|
return /* @__PURE__ */ jsxs(TldrawUiPopover, { id: "mobile-style-panel", side: "above", children: [
|
|
4031
|
-
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { className: disabled ? "mocanvas-btn mocanvas-btn--disabled" : "mocanvas-btn", children: /* @__PURE__ */ jsx(Icon, { name: "fill-solid" }) }),
|
|
3958
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { label: "Style", className: disabled ? "mocanvas-btn mocanvas-btn--disabled" : "mocanvas-btn", children: /* @__PURE__ */ jsx(Icon, { name: "fill-solid" }) }),
|
|
4032
3959
|
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { label: "Style", children: /* @__PURE__ */ jsx(StylePanelContextProvider, { isMobile: true, children: /* @__PURE__ */ jsx("div", { className: "mocanvas-stylepanel mocanvas-stylepanel--mobile", children: /* @__PURE__ */ jsx(DefaultStylePanelContent, {}) }) }) })
|
|
4033
3960
|
] });
|
|
4034
3961
|
});
|
|
@@ -4214,7 +4141,7 @@ var DefaultRichTextToolbar = track(function DefaultRichTextToolbar2({ children }
|
|
|
4214
4141
|
});
|
|
4215
4142
|
var registry = [];
|
|
4216
4143
|
function createDebugValue(name, defaultValue, shouldStore = true) {
|
|
4217
|
-
const flag = { name, defaultValue, shouldStore, value: atom
|
|
4144
|
+
const flag = { name, defaultValue, shouldStore, value: atom(`debug:${name}`, defaultValue) };
|
|
4218
4145
|
registry.push(flag);
|
|
4219
4146
|
return flag;
|
|
4220
4147
|
}
|
|
@@ -4301,6 +4228,7 @@ var TldrawUiToolbarItem = track(function TldrawUiToolbarItem2({ tool: toolId, la
|
|
|
4301
4228
|
type: "tool",
|
|
4302
4229
|
isActive: isSelected,
|
|
4303
4230
|
title: text,
|
|
4231
|
+
"data-tool": tool.id,
|
|
4304
4232
|
...tool.disabled ? { disabled: true } : {},
|
|
4305
4233
|
onClick: () => tool.onSelect("toolbar"),
|
|
4306
4234
|
children: known ? /* @__PURE__ */ jsx(Icon, { name }) : /* @__PURE__ */ jsx("span", { className: "mocanvas-btn-glyph", children: text.slice(0, 1).toUpperCase() })
|
|
@@ -4320,6 +4248,7 @@ var GeoToolbarItem = track(function GeoToolbarItem2({ geo, label }) {
|
|
|
4320
4248
|
type: "tool",
|
|
4321
4249
|
isActive: current === geo,
|
|
4322
4250
|
title: text,
|
|
4251
|
+
"data-tool": geo,
|
|
4323
4252
|
onClick: () => {
|
|
4324
4253
|
editor.setStyleForNextShapes(GeoShapeGeoStyle, geo);
|
|
4325
4254
|
editor.setCurrentTool("geo", { geo, force: true });
|
|
@@ -4375,56 +4304,86 @@ var ToggleToolLockedButton = track(function ToggleToolLockedButton2({ className
|
|
|
4375
4304
|
}
|
|
4376
4305
|
);
|
|
4377
4306
|
});
|
|
4307
|
+
var DEFAULT_TOOLBAR_ITEMS = [
|
|
4308
|
+
/* @__PURE__ */ jsx(SelectToolbarItem, {}, "select"),
|
|
4309
|
+
/* @__PURE__ */ jsx(HandToolbarItem, {}, "hand"),
|
|
4310
|
+
/* @__PURE__ */ jsx(DrawToolbarItem, {}, "draw"),
|
|
4311
|
+
/* @__PURE__ */ jsx(HighlightToolbarItem, {}, "highlight"),
|
|
4312
|
+
/* @__PURE__ */ jsx(EraserToolbarItem, {}, "eraser"),
|
|
4313
|
+
/* @__PURE__ */ jsx(LaserToolbarItem, {}, "laser"),
|
|
4314
|
+
/* @__PURE__ */ jsx(ArrowToolbarItem, {}, "arrow"),
|
|
4315
|
+
/* @__PURE__ */ jsx(TextToolbarItem, {}, "text"),
|
|
4316
|
+
/* @__PURE__ */ jsx(NoteToolbarItem, {}, "note"),
|
|
4317
|
+
/* @__PURE__ */ jsx(RectangleToolbarItem, {}, "rectangle"),
|
|
4318
|
+
/* @__PURE__ */ jsx(EllipseToolbarItem, {}, "ellipse"),
|
|
4319
|
+
/* @__PURE__ */ jsx(TriangleToolbarItem, {}, "triangle"),
|
|
4320
|
+
/* @__PURE__ */ jsx(DiamondToolbarItem, {}, "diamond"),
|
|
4321
|
+
/* @__PURE__ */ jsx(StarToolbarItem, {}, "star"),
|
|
4322
|
+
/* @__PURE__ */ jsx(LineToolbarItem, {}, "line"),
|
|
4323
|
+
/* @__PURE__ */ jsx(FrameToolbarItem, {}, "frame"),
|
|
4324
|
+
/* @__PURE__ */ jsx(AssetToolbarItem, {}, "asset")
|
|
4325
|
+
];
|
|
4378
4326
|
function DefaultToolbarContent() {
|
|
4379
|
-
return /* @__PURE__ */
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
|
|
4384
|
-
|
|
4385
|
-
|
|
4386
|
-
|
|
4387
|
-
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
|
|
4391
|
-
|
|
4392
|
-
|
|
4393
|
-
|
|
4394
|
-
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4327
|
+
return /* @__PURE__ */ jsx(Fragment$1, { children: DEFAULT_TOOLBAR_ITEMS });
|
|
4328
|
+
}
|
|
4329
|
+
var FALLBACK_METRICS = { slot: 42, reserved: 634 };
|
|
4330
|
+
function readBarMetrics(el) {
|
|
4331
|
+
if (typeof getComputedStyle !== "function") return FALLBACK_METRICS;
|
|
4332
|
+
const style = getComputedStyle(el);
|
|
4333
|
+
const px = (name, fallback) => {
|
|
4334
|
+
const value = Number.parseFloat(style.getPropertyValue(name));
|
|
4335
|
+
return Number.isFinite(value) ? value : fallback;
|
|
4336
|
+
};
|
|
4337
|
+
const pad = px("--mocanvas-ui-pad", 4);
|
|
4338
|
+
const inset = px("--mocanvas-ui-inset", 12);
|
|
4339
|
+
const dock = px("--mocanvas-ui-dock", 300);
|
|
4340
|
+
return {
|
|
4341
|
+
slot: px("--mocanvas-ui-btn", 40) + px("--mocanvas-ui-gap", 2),
|
|
4342
|
+
// Matches `.mocanvas-toolbar`'s `max-width`, plus the plate's own padding
|
|
4343
|
+
// and 1px border on each side.
|
|
4344
|
+
reserved: 2 * (inset + dock + pad + 1)
|
|
4345
|
+
};
|
|
4398
4346
|
}
|
|
4399
4347
|
function OverflowingToolbar({ label = "Tools", maxInline, children }) {
|
|
4400
4348
|
const barRef = useRef(null);
|
|
4401
|
-
const [
|
|
4349
|
+
const [available, setAvailable] = useState(null);
|
|
4350
|
+
const [metrics, setMetrics] = useState(FALLBACK_METRICS);
|
|
4351
|
+
const [moreOpen, setMoreOpen] = useState(false);
|
|
4402
4352
|
useEffect(() => {
|
|
4403
4353
|
const el = barRef.current;
|
|
4404
|
-
|
|
4405
|
-
|
|
4354
|
+
const container = el?.parentElement;
|
|
4355
|
+
if (!el || !container || typeof ResizeObserver === "undefined") return;
|
|
4356
|
+
const update = () => {
|
|
4357
|
+
setMetrics(readBarMetrics(el));
|
|
4358
|
+
const width = container.getBoundingClientRect().width;
|
|
4359
|
+
setAvailable(width > 0 ? width : null);
|
|
4360
|
+
};
|
|
4406
4361
|
update();
|
|
4407
4362
|
const ro = new ResizeObserver(update);
|
|
4408
|
-
ro.observe(
|
|
4363
|
+
ro.observe(container);
|
|
4409
4364
|
return () => ro.disconnect();
|
|
4410
4365
|
}, []);
|
|
4411
4366
|
const items = Children.toArray(children);
|
|
4412
|
-
const
|
|
4367
|
+
const room = available === null ? null : available - metrics.reserved;
|
|
4368
|
+
const fits = room === null || items.length * metrics.slot <= room ? items.length : (
|
|
4369
|
+
// One slot goes to the "more" button itself.
|
|
4370
|
+
Math.max(1, Math.floor(room / metrics.slot) - 1)
|
|
4371
|
+
);
|
|
4413
4372
|
const limit = Math.min(maxInline ?? items.length, fits);
|
|
4414
4373
|
const inline = items.slice(0, limit);
|
|
4415
4374
|
const overflow = items.slice(limit);
|
|
4416
4375
|
return /* @__PURE__ */ jsxs(TldrawUiToolbar, { ref: barRef, label, children: [
|
|
4417
4376
|
inline,
|
|
4418
|
-
overflow.length > 0 ? /* @__PURE__ */ jsxs(TldrawUiPopover, { id: "toolbar-overflow", side: "above", children: [
|
|
4419
|
-
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { className: "mocanvas-btn", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" }) }),
|
|
4420
|
-
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { label: "More tools", children: /* @__PURE__ */ jsx("div", { className: "mocanvas-toolbar-overflow", children: overflow }) })
|
|
4377
|
+
overflow.length > 0 ? /* @__PURE__ */ jsxs(TldrawUiPopover, { id: "toolbar-overflow", side: "above", open: moreOpen, onOpenChange: setMoreOpen, children: [
|
|
4378
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { className: "mocanvas-btn", label: "More tools", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" }) }),
|
|
4379
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { label: "More tools", children: /* @__PURE__ */ jsx("div", { className: "mocanvas-toolbar-overflow", onClick: () => setMoreOpen(false), children: overflow }) })
|
|
4421
4380
|
] }) : null
|
|
4422
4381
|
] });
|
|
4423
4382
|
}
|
|
4424
4383
|
function DefaultToolbarWithOverflow() {
|
|
4425
4384
|
const breakpoint = useBreakpoint();
|
|
4426
4385
|
return /* @__PURE__ */ jsxs(OverflowingToolbar, { label: "Tools", children: [
|
|
4427
|
-
|
|
4386
|
+
DEFAULT_TOOLBAR_ITEMS,
|
|
4428
4387
|
/* @__PURE__ */ jsx(ToggleToolLockedButton, {}),
|
|
4429
4388
|
breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? /* @__PURE__ */ jsx(MobileStylePanel, {}) : null
|
|
4430
4389
|
] });
|
|
@@ -4674,7 +4633,11 @@ var Layout = track(function Layout2({ children }) {
|
|
|
4674
4633
|
] }),
|
|
4675
4634
|
Toasts ? /* @__PURE__ */ jsx(Toasts, {}) : null,
|
|
4676
4635
|
Dialogs ? /* @__PURE__ */ jsx(Dialogs, {}) : null,
|
|
4677
|
-
A11y ? /* @__PURE__ */ jsx(A11y, {}) : null
|
|
4636
|
+
A11y ? /* @__PURE__ */ jsx(A11y, {}) : null,
|
|
4637
|
+
/* @__PURE__ */ jsx(ToolShortcuts, {}),
|
|
4638
|
+
/* @__PURE__ */ jsx(ActionShortcuts, {}),
|
|
4639
|
+
/* @__PURE__ */ jsx(SelectionAnnouncer, {}),
|
|
4640
|
+
/* @__PURE__ */ jsx(ReduceMotionAttribute, {})
|
|
4678
4641
|
] });
|
|
4679
4642
|
});
|
|
4680
4643
|
function TldrawUi({ components, overrides, onUiEvent, hideUi, forceMobile, children }) {
|
|
@@ -4814,7 +4777,7 @@ var targetStates = /* @__PURE__ */ new WeakMap();
|
|
|
4814
4777
|
function stateAtom(editor) {
|
|
4815
4778
|
let existing = targetStates.get(editor);
|
|
4816
4779
|
if (!existing) {
|
|
4817
|
-
existing = atom
|
|
4780
|
+
existing = atom("arrowTargetState", null);
|
|
4818
4781
|
targetStates.set(editor, existing);
|
|
4819
4782
|
}
|
|
4820
4783
|
return existing;
|
|
@@ -6789,6 +6752,21 @@ var RESIZE_CURSORS = {
|
|
|
6789
6752
|
function setCursor(editor, type) {
|
|
6790
6753
|
editor.updateInstanceState({ cursor: { type, rotation: 0 } });
|
|
6791
6754
|
}
|
|
6755
|
+
function startEdgeScrolling(node, update) {
|
|
6756
|
+
const editor = node.editor;
|
|
6757
|
+
editor.edgeScrollManager.start();
|
|
6758
|
+
let camera = editor.getCamera();
|
|
6759
|
+
const off = editor.on("tick", () => {
|
|
6760
|
+
const next = editor.getCamera();
|
|
6761
|
+
if (next.x === camera.x && next.y === camera.y && next.z === camera.z) return;
|
|
6762
|
+
camera = next;
|
|
6763
|
+
update();
|
|
6764
|
+
});
|
|
6765
|
+
return () => {
|
|
6766
|
+
off();
|
|
6767
|
+
editor.edgeScrollManager.stop();
|
|
6768
|
+
};
|
|
6769
|
+
}
|
|
6792
6770
|
var Idle10 = class extends StateNode {
|
|
6793
6771
|
static id = "idle";
|
|
6794
6772
|
onEnter() {
|
|
@@ -6919,8 +6897,10 @@ var PointingCanvas = class extends StateNode {
|
|
|
6919
6897
|
var Brushing = class extends StateNode {
|
|
6920
6898
|
static id = "brushing";
|
|
6921
6899
|
initialSelection = [];
|
|
6900
|
+
stopEdgeScrolling;
|
|
6922
6901
|
onEnter() {
|
|
6923
6902
|
this.initialSelection = this.editor.inputs.shiftKey ? this.editor.getSelectedShapeIds() : [];
|
|
6903
|
+
this.stopEdgeScrolling = startEdgeScrolling(this, () => this.update());
|
|
6924
6904
|
this.update();
|
|
6925
6905
|
}
|
|
6926
6906
|
onPointerMove() {
|
|
@@ -6934,6 +6914,8 @@ var Brushing = class extends StateNode {
|
|
|
6934
6914
|
this.finish();
|
|
6935
6915
|
}
|
|
6936
6916
|
onExit() {
|
|
6917
|
+
this.stopEdgeScrolling?.();
|
|
6918
|
+
this.stopEdgeScrolling = void 0;
|
|
6937
6919
|
this.editor.updateInstanceState({ brush: null });
|
|
6938
6920
|
}
|
|
6939
6921
|
update() {
|
|
@@ -6996,9 +6978,11 @@ var Translating = class extends StateNode {
|
|
|
6996
6978
|
static id = "translating";
|
|
6997
6979
|
initialShapes = /* @__PURE__ */ new Map();
|
|
6998
6980
|
markId = "";
|
|
6981
|
+
stopEdgeScrolling;
|
|
6999
6982
|
onEnter() {
|
|
7000
6983
|
const editor = this.editor;
|
|
7001
6984
|
this.markId = editor.markHistoryStoppingPoint("translate");
|
|
6985
|
+
this.stopEdgeScrolling = startEdgeScrolling(this, () => this.update());
|
|
7002
6986
|
this.initialShapes.clear();
|
|
7003
6987
|
for (const s of editor.getSelectedShapes()) {
|
|
7004
6988
|
this.initialShapes.set(s.id, s);
|
|
@@ -7114,6 +7098,8 @@ var Translating = class extends StateNode {
|
|
|
7114
7098
|
dropShapesOnFrameLike(editor, this.dropTarget, dragging);
|
|
7115
7099
|
}
|
|
7116
7100
|
onExit() {
|
|
7101
|
+
this.stopEdgeScrolling?.();
|
|
7102
|
+
this.stopEdgeScrolling = void 0;
|
|
7117
7103
|
this.editor.snaps.clearLines();
|
|
7118
7104
|
this.editor.setHintingShapes([]);
|
|
7119
7105
|
this.initialBounds = void 0;
|
|
@@ -7482,7 +7468,7 @@ var defaultShapeTools = [
|
|
|
7482
7468
|
FrameTool
|
|
7483
7469
|
];
|
|
7484
7470
|
var defaultTools = [SelectTool, HandTool, EraserTool, LaserTool, ...defaultShapeTools];
|
|
7485
|
-
function
|
|
7471
|
+
function isEditable(t) {
|
|
7486
7472
|
return t instanceof HTMLElement && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable);
|
|
7487
7473
|
}
|
|
7488
7474
|
function useExternalContent(editor, containerRef, options) {
|
|
@@ -7502,7 +7488,7 @@ function useExternalContent(editor, containerRef, options) {
|
|
|
7502
7488
|
void editor.putExternalContent(info);
|
|
7503
7489
|
return true;
|
|
7504
7490
|
};
|
|
7505
|
-
const isEditableContext = () => !!editor.getEditingShapeId() ||
|
|
7491
|
+
const isEditableContext = () => !!editor.getEditingShapeId() || isEditable(document.activeElement);
|
|
7506
7492
|
const onDragOver = (e) => {
|
|
7507
7493
|
if (!e.dataTransfer) return;
|
|
7508
7494
|
e.preventDefault();
|
|
@@ -7526,7 +7512,7 @@ function useExternalContent(editor, containerRef, options) {
|
|
|
7526
7512
|
handleText(dt.getData("text/plain"), point);
|
|
7527
7513
|
};
|
|
7528
7514
|
const onPaste = (e) => {
|
|
7529
|
-
if (
|
|
7515
|
+
if (isEditable(e.target) || isEditableContext()) return;
|
|
7530
7516
|
const cd = e.clipboardData;
|
|
7531
7517
|
if (!cd) return;
|
|
7532
7518
|
const files = Array.from(cd.files);
|
|
@@ -7540,7 +7526,7 @@ function useExternalContent(editor, containerRef, options) {
|
|
|
7540
7526
|
const onKeyDown = (e) => {
|
|
7541
7527
|
const isMac = /Mac|iPhone|iPad/.test(navigator.platform ?? "");
|
|
7542
7528
|
const accel = isMac ? e.metaKey : e.ctrlKey;
|
|
7543
|
-
if (!accel || e.key.toLowerCase() !== "v" ||
|
|
7529
|
+
if (!accel || e.key.toLowerCase() !== "v" || isEditable(e.target) || isEditableContext()) return;
|
|
7544
7530
|
setTimeout(() => {
|
|
7545
7531
|
if (!e.defaultPrevented || !navigator.clipboard?.read) return;
|
|
7546
7532
|
navigator.clipboard.read().then(
|
|
@@ -7665,7 +7651,14 @@ function Mocanvas(props) {
|
|
|
7665
7651
|
// `TldrawUi` is the documented chrome: it owns the context
|
|
7666
7652
|
// providers the component slots read from, and renders the canvas as
|
|
7667
7653
|
// its child rather than taking it as a prop.
|
|
7668
|
-
|
|
7654
|
+
//
|
|
7655
|
+
// `ContainerProvider` publishes the element above: the chrome needs
|
|
7656
|
+
// it to portal its floating layers out of whichever panel opened
|
|
7657
|
+
// them — a popover left inside the toolbar is trapped in that
|
|
7658
|
+
// panel's stacking context and paints *under* its neighbours — and
|
|
7659
|
+
// to measure the editor for the breakpoint, which is what makes the
|
|
7660
|
+
// chrome respond to an embed's width rather than the window's.
|
|
7661
|
+
/* @__PURE__ */ jsx(EditorProvider, { editor, children: /* @__PURE__ */ jsx(ContainerProvider, { container: editor.getContainer(), children: /* @__PURE__ */ jsx(
|
|
7669
7662
|
TldrawUi,
|
|
7670
7663
|
{
|
|
7671
7664
|
...components ? { components } : {},
|
|
@@ -7675,7 +7668,7 @@ function Mocanvas(props) {
|
|
|
7675
7668
|
hideUi: hideUi === true,
|
|
7676
7669
|
children: canvas
|
|
7677
7670
|
}
|
|
7678
|
-
) })
|
|
7671
|
+
) }) })
|
|
7679
7672
|
) : /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center", color: "#9ca3af", fontFamily: "system-ui" }, children: "loading engine\u2026" }) }) });
|
|
7680
7673
|
}
|
|
7681
7674
|
var FALLBACK_IMAGE_SIZE = { w: 100, h: 100 };
|
|
@@ -7941,7 +7934,7 @@ async function defaultHandleExternalEmbedContent(editor, info) {
|
|
|
7941
7934
|
return;
|
|
7942
7935
|
}
|
|
7943
7936
|
editor.markHistoryStoppingPoint("insert embed");
|
|
7944
|
-
const { createEmbedShape: createEmbedShape2 } = await import('./urlContent-
|
|
7937
|
+
const { createEmbedShape: createEmbedShape2 } = await import('./urlContent-WYYVQYYN.js');
|
|
7945
7938
|
createEmbedShape2(editor, info.url, info.point);
|
|
7946
7939
|
}
|
|
7947
7940
|
async function defaultHandleExternalTldrawContent(editor, info) {
|
|
@@ -8080,7 +8073,8 @@ async function putExcalidrawContent(editor, excalidrawClipboardContent, point) {
|
|
|
8080
8073
|
const x = (element.x ?? 0) + dx;
|
|
8081
8074
|
const y = (element.y ?? 0) + dy;
|
|
8082
8075
|
const rotation = element.angle ?? 0;
|
|
8083
|
-
const common = { color: colorFor(element.strokeColor),
|
|
8076
|
+
const common = { color: colorFor(element.strokeColor), size: sizeFor(element.strokeWidth) };
|
|
8077
|
+
const stroked = { ...common, dash: dashFor(element.strokeStyle) };
|
|
8084
8078
|
const geo = GEO_BY_EXCALIDRAW_TYPE[element.type ?? ""];
|
|
8085
8079
|
if (geo && editor.hasShapeUtil("geo")) {
|
|
8086
8080
|
const id = createShapeId();
|
|
@@ -8092,7 +8086,7 @@ async function putExcalidrawContent(editor, excalidrawClipboardContent, point) {
|
|
|
8092
8086
|
y,
|
|
8093
8087
|
rotation,
|
|
8094
8088
|
props: {
|
|
8095
|
-
...
|
|
8089
|
+
...stroked,
|
|
8096
8090
|
geo,
|
|
8097
8091
|
w: Math.max(1, element.width ?? 1),
|
|
8098
8092
|
h: Math.max(1, element.height ?? 1),
|
|
@@ -8128,7 +8122,7 @@ async function putExcalidrawContent(editor, excalidrawClipboardContent, point) {
|
|
|
8128
8122
|
x,
|
|
8129
8123
|
y,
|
|
8130
8124
|
rotation,
|
|
8131
|
-
props: { ...
|
|
8125
|
+
props: { ...stroked, start: { x: first[0], y: first[1] }, end: { x: last[0], y: last[1] } }
|
|
8132
8126
|
});
|
|
8133
8127
|
continue;
|
|
8134
8128
|
}
|
|
@@ -8141,7 +8135,7 @@ async function putExcalidrawContent(editor, excalidrawClipboardContent, point) {
|
|
|
8141
8135
|
x,
|
|
8142
8136
|
y,
|
|
8143
8137
|
rotation,
|
|
8144
|
-
props: { ...
|
|
8138
|
+
props: { ...stroked, points: Object.fromEntries(points.map((p, i) => [`a${i + 1}`, { id: `a${i + 1}`, index: `a${i + 1}`, x: p[0], y: p[1] }])) }
|
|
8145
8139
|
});
|
|
8146
8140
|
}
|
|
8147
8141
|
continue;
|
|
@@ -9308,6 +9302,6 @@ function getPointsFromDrawSegments(segments, scaleX = 1, scaleY = 1) {
|
|
|
9308
9302
|
return points;
|
|
9309
9303
|
}
|
|
9310
9304
|
|
|
9311
|
-
export { ASPECT_RATIO_OPTIONS, ASPECT_RATIO_TO_VALUE, AccessibilityMenu, AlignMenuItems, ArrangeMenuSubmenu, ArrowBindingHintOverlayUtil, ArrowBindingUtil, ArrowDownToolbarItem, ArrowHintOverlayUtil, ArrowLeftToolbarItem, ArrowRightToolbarItem, ArrowTool as ArrowShapeTool, ArrowTool, ArrowToolbarItem, ArrowUpToolbarItem, AssetToolbarItem, BaseBoxShapeTool, BookmarkAssetUtil, BreakPointProvider, BrushOverlayUtil, CenteredTopPanelContainer, CheckBoxToolbarItem, ClipboardMenuGroup, CloudToolbarItem, CollaboratorBrushOverlayUtil, CollaboratorCursorOverlayUtil, CollaboratorHintOverlayUtil, CollaboratorScribbleOverlayUtil, CollaboratorShapeIndicatorOverlayUtil, ColorSchemeMenu, CommentToolbarItem, ConversionsMenuGroup, ConvertToBookmarkMenuItem, ConvertToEmbedMenuItem, CopyAsMenuGroup, CopyMenuItem, CursorChatItem, CutMenuItem, DEFAULT_ARROW_BINDING_HINT_OVERLAY_OPTIONS, DEFAULT_ARROW_HINT_OVERLAY_OPTIONS, DEFAULT_BRUSH_OVERLAY_OPTIONS, DEFAULT_COLLABORATOR_OVERLAY_OPTIONS, DEFAULT_ELBOW_ARROW_OPTIONS, DEFAULT_MAX_ASSET_SIZE, DEFAULT_SCRIBBLE_OVERLAY_OPTIONS, DEFAULT_SELECTION_FOREGROUND_OVERLAY_OPTIONS, DEFAULT_SHAPE_HANDLE_OVERLAY_OPTIONS, DEFAULT_SNAP_INDICATOR_OVERLAY_OPTIONS, DEFAULT_SUPPORTED_IMAGE_TYPES, DEFAULT_SUPPORTED_VIDEO_TYPES, DebugFlagDefaults, DebugFlags, DebugStats, DefaultA11yAnnouncer, DefaultActionsMenu, DefaultActionsMenuContent, DefaultContextMenu, DefaultContextMenuContent, DefaultDebugMenu, DefaultDebugMenuContent, DefaultDebugPanel, DefaultFollowingIndicator, DefaultHelpMenu, DefaultHelpMenuContent, DefaultHelperButtons, DefaultHelperButtonsContent, DefaultImageToolbar, DefaultImageToolbarContent, DefaultMainMenu, DefaultMainMenuContent, DefaultMenuPanel, DefaultMinimap, DefaultNavigationPanel, DefaultPageMenu, DefaultPeopleMenu, DefaultPeopleMenuAvatar, DefaultPeopleMenuContent, DefaultPeopleMenuFacePile, DefaultPeopleMenuItem, DefaultQuickActions, DefaultQuickActionsContent, DefaultRichTextToolbar, DefaultRichTextToolbarContent, DefaultSharePanel, DefaultStylePanel, DefaultStylePanelContent, DefaultToasts, DefaultToolbar, DefaultToolbarContent, DefaultToolbarWithOverflow, DefaultUi, DefaultUserPresenceEditor, DefaultVideoToolbar, DefaultVideoToolbarContent, DefaultZoomMenu, DefaultZoomMenuContent, DeleteMenuItem, DiamondToolbarItem, DistributeMenuItems, DrawTool as DrawShapeTool, DrawShapeUtil, DrawTool, DrawToolbarItem, DuplicateMenuItem, ELBOW_ARROW_SIDES, EditLinkMenuItem, EditMenuSubmenu, EditSubmenu, EllipseToolbarItem, EraserTool, EraserToolbarItem, ExportAsMenuGroup, ExportFileContentSubMenu, ExtrasGroup, FeatureFlags, FitFrameToContentMenuItem, FrameTool as FrameShapeTool, FrameTool, FrameToolbarItem, GeoTool as GeoShapeTool, GeoTool, GeoToolbarItem, GroupMenuItem, GroupOrUngroupMenuItem, GroupShapeUtil, HIGHLIGHT_OPACITY, HIGHLIGHT_STROKE_SIZES, HandTool, HandToolbarItem, HeartToolbarItem, HexagonToolbarItem, HighlightShapeTool, HighlightShapeUtil, HighlightToolbarItem, IMAGE_PLACEHOLDER_FILL, IMAGE_PLACEHOLDER_STROKE, ImageAssetUtil, ImageShapeUtil, InputModeMenu, KeyboardShiftEnterTweakExtension, KeyboardShortcutsMenuItem, LanguageMenu, LaserTool, LaserToolbarItem, LineTool as LineShapeTool, LineShapeUtil, LineTool, LineToolbarItem, LockGroup, MOCANVAS_CLIPBOARD_TYPE, MOD_KEY, MORE_GEO_KINDS, MiscMenuGroup, MobileStylePanel, Mocanvas, MocanvasUiMenuItem, MoveToPageMenu, NoteTool as NoteShapeTool, NoteTool, NoteToolbarItem, OfflineIndicator, OvalToolbarItem, OverflowingToolbar, PORTRAIT_BREAKPOINT, PRIMARY_GEO_KINDS, PageItemInput, PageItemSubmenu, PasteMenuItem, PathBuilder, PathBuilderGeometry2d, PlainTextArea, PlainTextLabel, PreferencesGroup, PrintItem, RectangleToolbarItem, RemoveFrameMenuItem, ReorderMenuItems, ReorderMenuSubmenu, ResponsiveStylePanel, RhombusToolbarItem, RichTextArea, RichTextLabel, RichTextSVG, RotateCWMenuItem, ScribbleOverlayUtil, SelectAllMenuItem, SelectTool, SelectToolbarItem, SelectionForegroundOverlayUtil, ShapeHandleOverlayUtil, ShapeIndicatorOverlayUtil, SnapIndicatorOverlayUtil, StackMenuItems, StarToolbarItem, StylePanel, StylePanelArrowKindPicker, StylePanelArrowheadPicker, StylePanelButtonPicker, StylePanelButtonPickerInline, StylePanelColorPicker, StylePanelContextProvider, StylePanelDashPicker, StylePanelDoubleDropdownPicker, StylePanelDoubleDropdownPickerInline, StylePanelDropdownPicker, StylePanelDropdownPickerInline, StylePanelFillPicker, StylePanelFontPicker, StylePanelGeoShapePicker, StylePanelLabelAlignPicker, StylePanelOpacityPicker, StylePanelSection, StylePanelSizePicker, StylePanelSplinePicker, StylePanelSubheading, StylePanelTextAlignPicker, TOOLBAR_GROUPS, TextTool as TextShapeTool, TextTool, TextToolbarItem, TldrawImage, TldrawUi, TldrawUiA11yProvider, TldrawUiActionsProvider, TldrawUiColumn, TldrawUiComponentsProvider, TldrawUiContextProvider, TldrawUiContextualToolbar, TldrawUiGrid, TldrawUiInFrontOfTheCanvas, TldrawUiInput, TldrawUiOrientationProvider, TldrawUiPopover, TldrawUiPopoverContent, TldrawUiPopoverTrigger, TldrawUiRow, TldrawUiSelect, TldrawUiSelectContent, TldrawUiSelectItem, TldrawUiSelectTrigger, TldrawUiSelectValue, TldrawUiSlider, TldrawUiToastsProvider, TldrawUiToolbar, TldrawUiToolbarButton, TldrawUiToolbarItem, TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem, TldrawUiToolsProvider, TldrawUiTooltip, TldrawUiTooltipProvider, ToggleAutoSizeMenuItem, ToggleDebugModeItem, ToggleDynamicSizeModeItem, ToggleEdgeScrollingItem, ToggleEnhancedA11yModeItem, ToggleFocusModeItem, ToggleGridItem, ToggleInvertZoomItem, ToggleKeyboardShortcutsItem, ToggleLockMenuItem, TogglePasteAtCursorItem, ToggleReduceMotionItem, ToggleSnapModeItem, ToggleToolLockItem, ToggleToolLockedButton, ToggleTransparentBgMenuItem, ToggleWrapModeItem,
|
|
9305
|
+
export { ASPECT_RATIO_OPTIONS, ASPECT_RATIO_TO_VALUE, AccessibilityMenu, AlignMenuItems, ArrangeMenuSubmenu, ArrowBindingHintOverlayUtil, ArrowBindingUtil, ArrowDownToolbarItem, ArrowHintOverlayUtil, ArrowLeftToolbarItem, ArrowRightToolbarItem, ArrowTool as ArrowShapeTool, ArrowTool, ArrowToolbarItem, ArrowUpToolbarItem, AssetToolbarItem, BaseBoxShapeTool, BookmarkAssetUtil, BreakPointProvider, BrushOverlayUtil, CenteredTopPanelContainer, CheckBoxToolbarItem, ClipboardMenuGroup, CloudToolbarItem, CollaboratorBrushOverlayUtil, CollaboratorCursorOverlayUtil, CollaboratorHintOverlayUtil, CollaboratorScribbleOverlayUtil, CollaboratorShapeIndicatorOverlayUtil, ColorSchemeMenu, CommentToolbarItem, ConversionsMenuGroup, ConvertToBookmarkMenuItem, ConvertToEmbedMenuItem, CopyAsMenuGroup, CopyMenuItem, CursorChatItem, CutMenuItem, DEFAULT_ARROW_BINDING_HINT_OVERLAY_OPTIONS, DEFAULT_ARROW_HINT_OVERLAY_OPTIONS, DEFAULT_BRUSH_OVERLAY_OPTIONS, DEFAULT_COLLABORATOR_OVERLAY_OPTIONS, DEFAULT_ELBOW_ARROW_OPTIONS, DEFAULT_MAX_ASSET_SIZE, DEFAULT_SCRIBBLE_OVERLAY_OPTIONS, DEFAULT_SELECTION_FOREGROUND_OVERLAY_OPTIONS, DEFAULT_SHAPE_HANDLE_OVERLAY_OPTIONS, DEFAULT_SNAP_INDICATOR_OVERLAY_OPTIONS, DEFAULT_SUPPORTED_IMAGE_TYPES, DEFAULT_SUPPORTED_VIDEO_TYPES, DEFAULT_TOOLBAR_ITEMS, DebugFlagDefaults, DebugFlags, DebugStats, DefaultA11yAnnouncer, DefaultActionsMenu, DefaultActionsMenuContent, DefaultContextMenu, DefaultContextMenuContent, DefaultDebugMenu, DefaultDebugMenuContent, DefaultDebugPanel, DefaultFollowingIndicator, DefaultHelpMenu, DefaultHelpMenuContent, DefaultHelperButtons, DefaultHelperButtonsContent, DefaultImageToolbar, DefaultImageToolbarContent, DefaultMainMenu, DefaultMainMenuContent, DefaultMenuPanel, DefaultMinimap, DefaultNavigationPanel, DefaultPageMenu, DefaultPeopleMenu, DefaultPeopleMenuAvatar, DefaultPeopleMenuContent, DefaultPeopleMenuFacePile, DefaultPeopleMenuItem, DefaultQuickActions, DefaultQuickActionsContent, DefaultRichTextToolbar, DefaultRichTextToolbarContent, DefaultSharePanel, DefaultStylePanel, DefaultStylePanelContent, DefaultToasts, DefaultToolbar, DefaultToolbarContent, DefaultToolbarWithOverflow, DefaultUi, DefaultUserPresenceEditor, DefaultVideoToolbar, DefaultVideoToolbarContent, DefaultZoomMenu, DefaultZoomMenuContent, DeleteMenuItem, DiamondToolbarItem, DistributeMenuItems, DrawTool as DrawShapeTool, DrawShapeUtil, DrawTool, DrawToolbarItem, DuplicateMenuItem, ELBOW_ARROW_SIDES, EditLinkMenuItem, EditMenuSubmenu, EditSubmenu, EllipseToolbarItem, EraserTool, EraserToolbarItem, ExportAsMenuGroup, ExportFileContentSubMenu, ExtrasGroup, FeatureFlags, FitFrameToContentMenuItem, FrameTool as FrameShapeTool, FrameTool, FrameToolbarItem, GeoTool as GeoShapeTool, GeoTool, GeoToolbarItem, GroupMenuItem, GroupOrUngroupMenuItem, GroupShapeUtil, HIGHLIGHT_OPACITY, HIGHLIGHT_STROKE_SIZES, HandTool, HandToolbarItem, HeartToolbarItem, HexagonToolbarItem, HighlightShapeTool, HighlightShapeUtil, HighlightToolbarItem, IMAGE_PLACEHOLDER_FILL, IMAGE_PLACEHOLDER_STROKE, ImageAssetUtil, ImageShapeUtil, InputModeMenu, KeyboardShiftEnterTweakExtension, KeyboardShortcutsMenuItem, LanguageMenu, LaserTool, LaserToolbarItem, LineTool as LineShapeTool, LineShapeUtil, LineTool, LineToolbarItem, LockGroup, MOCANVAS_CLIPBOARD_TYPE, MOD_KEY, MORE_GEO_KINDS, MiscMenuGroup, MobileStylePanel, Mocanvas, MocanvasUiMenuItem, MoveToPageMenu, NoteTool as NoteShapeTool, NoteTool, NoteToolbarItem, OfflineIndicator, OvalToolbarItem, OverflowingToolbar, PORTRAIT_BREAKPOINT, PRIMARY_GEO_KINDS, PageItemInput, PageItemSubmenu, PasteMenuItem, PathBuilder, PathBuilderGeometry2d, PlainTextArea, PlainTextLabel, PreferencesGroup, PrintItem, RectangleToolbarItem, ReduceMotionAttribute, RemoveFrameMenuItem, ReorderMenuItems, ReorderMenuSubmenu, ResponsiveStylePanel, RhombusToolbarItem, RichTextArea, RichTextLabel, RichTextSVG, RotateCWMenuItem, ScribbleOverlayUtil, SelectAllMenuItem, SelectTool, SelectToolbarItem, SelectionAnnouncer, SelectionForegroundOverlayUtil, ShapeHandleOverlayUtil, ShapeIndicatorOverlayUtil, SnapIndicatorOverlayUtil, StackMenuItems, StarToolbarItem, StylePanel, StylePanelArrowKindPicker, StylePanelArrowheadPicker, StylePanelButtonPicker, StylePanelButtonPickerInline, StylePanelColorPicker, StylePanelContextProvider, StylePanelDashPicker, StylePanelDoubleDropdownPicker, StylePanelDoubleDropdownPickerInline, StylePanelDropdownPicker, StylePanelDropdownPickerInline, StylePanelFillPicker, StylePanelFontPicker, StylePanelGeoShapePicker, StylePanelLabelAlignPicker, StylePanelOpacityPicker, StylePanelSection, StylePanelSizePicker, StylePanelSplinePicker, StylePanelSubheading, StylePanelTextAlignPicker, TOOLBAR_GROUPS, TextTool as TextShapeTool, TextTool, TextToolbarItem, TldrawImage, TldrawUi, TldrawUiA11yProvider, TldrawUiActionsProvider, TldrawUiColumn, TldrawUiComponentsProvider, TldrawUiContextProvider, TldrawUiContextualToolbar, TldrawUiGrid, TldrawUiInFrontOfTheCanvas, TldrawUiInput, TldrawUiOrientationProvider, TldrawUiPopover, TldrawUiPopoverContent, TldrawUiPopoverTrigger, TldrawUiRow, TldrawUiSelect, TldrawUiSelectContent, TldrawUiSelectItem, TldrawUiSelectTrigger, TldrawUiSelectValue, TldrawUiSlider, TldrawUiToastsProvider, TldrawUiToolbar, TldrawUiToolbarButton, TldrawUiToolbarItem, TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem, TldrawUiToolsProvider, TldrawUiTooltip, TldrawUiTooltipProvider, ToggleAutoSizeMenuItem, ToggleDebugModeItem, ToggleDynamicSizeModeItem, ToggleEdgeScrollingItem, ToggleEnhancedA11yModeItem, ToggleFocusModeItem, ToggleGridItem, ToggleInvertZoomItem, ToggleKeyboardShortcutsItem, ToggleLockMenuItem, TogglePasteAtCursorItem, ToggleReduceMotionItem, ToggleSnapModeItem, ToggleToolLockItem, ToggleToolLockedButton, ToggleTransparentBgMenuItem, ToggleWrapModeItem, Toolbar, TrapezoidToolbarItem, TriangleToolbarItem, UndoRedoGroup, UngroupMenuItem, UnlockAllMenuItem, VideoAssetUtil, ViewSubmenu, XBoxToolbarItem, ZoomBar, ZoomBrushOverlayUtil, ZoomOrRotateMenuItem, ZoomTo100MenuItem, ZoomToFitMenuItem, ZoomToSelectionMenuItem, ZoomTool, allDefaultFontFaces, buildDefaultActionItems, buildDefaultToolItems, canPrint, canUploadImageTextures, centerSelectionAroundPoint, clearArrowTargetState, containBoxSize, copyAs, copySelectionToClipboard, createBookmarkFromUrl, createDebugFlag, createDebugValue, createFeatureFlag, createShapesForAssets, cutSelectionToClipboard, debugFlags, defaultAddFontsFromNode, defaultAssetUtils, defaultBindingUtils, defaultComponents, defaultEditorAssetUrls, defaultFonts, defaultGeoTypeDefinitions, defaultHandleExternalEmbedContent, defaultHandleExternalExcalidrawContent, defaultHandleExternalFileAsset, defaultHandleExternalFileContent, defaultHandleExternalFileReplaceContent, defaultHandleExternalSvgTextContent, defaultHandleExternalTextContent, defaultHandleExternalTldrawContent, defaultHandleExternalUrlAsset, defaultOverlayUtils, defaultShapeTools, defaultShapeUtils, defaultTools, downsizeDimensions, downsizeImage, drawLabelChip, embedPermissionsToAllowAttribute, embedShapePermissionDefaults, exportAs, featureFlags, fitFrameToContent, getArrowInfo, getArrowTargetState, getAssetInfo, getBreakpointForWidth, getClipboardTextForShapes, getColorStyleItems, getCropBox, getDebugFlags, getDrawDisplayValues, getDrawOutlinePoints, getElbowArrowBoxEdges, getElbowArrowBoxes, getElbowArrowInfo, getElbowArrowSideAxis, getElbowArrowSideTowards, getElbowArrowTargetBox, getFontStyleItems, getHighlightDisplayValues, getHighlightOutlinePoints, getHitShapeOnCanvasPointerDown, getImageCropStyle, getImageDisplayValues, getImageTextureKey, getImageTextureSource, getLineDisplayValues, getLinePoints, getPointsFromDrawSegment, getPointsFromDrawSegments, getStroke, getStrokeOutlinePoints, getStrokePoints, getStyleItemsForProp, getStylePanelSections, getSvgPathFromStrokePoints, getTipTapDefaultExtensions, hairline, handleNativeOrMenuCopy, hasAnyStyleSection, hideAllTooltips, iconTypes, isExcalidrawClipboardContent, isInElbowArrowRange, isolate, loadImageTextureSource, loadTipTapDefaultExtensions, notifyIfFileNotAllowed, onDragFromToolbarToCreateShape, pasteFromClipboard, preloadFont, printSelection, putExcalidrawContent, readDrawSegments, readImageSize, registerDefaultSideEffects, registeredToolIds, removeFrame, renderHtmlFromRichText, renderPlaintextFromRichText, renderRichTextFromHTML, resolveScribbleColor, sanitizeSvg, smoothPoints, startEditingShapeWithRichText, toElbowArrowRoute, traceCross, tracePolyline, traceRoundedRect, traceTaperedStroke, truncateStringWithEllipsis, unwrapLabel, updateArrowTargetState, useA11y, useActionsOverride, useAnyMenuIsOpen, useBreakpoint, useCollaborationStatus, useCopyAs, useDefaultHelpers, useEditablePlainText, useEditableRichText, useExportAs, useExternalContent, useImageOrVideoAsset, useLocalStorageState, useMenuClipboardEvents, useMenuIsOpen, useNativeClipboardEvents, usePeerIds, usePeers, usePrefersReducedMotion, usePresence, useReduceMotion, useSelectedShapesAnnouncer, useShowCollaborationUi, useStylePanelContext, useTldrawUiComponents, useTldrawUiOrientation, useToasts, useToolsOverride, useTooltipSuppression, useUiListsAreLive, withCamera };
|
|
9312
9306
|
//# sourceMappingURL=index.js.map
|
|
9313
9307
|
//# sourceMappingURL=index.js.map
|