UNPKG

tldraw

Version:

A tiny little drawing editor.

8 lines (7 loc) • 9.96 kB
{ "version": 3, "sources": ["../../src/lib/Tldraw.tsx"], "sourcesContent": ["import {\n\tDEFAULT_SUPPORTED_IMAGE_TYPES,\n\tDEFAULT_SUPPORT_VIDEO_TYPES,\n\tDefaultSpinner,\n\tErrorScreen,\n\tLoadingScreen,\n\tTLEditorComponents,\n\tTLOnMountHandler,\n\tTldrawEditor,\n\tTldrawEditorBaseProps,\n\tTldrawEditorStoreProps,\n\tuseEditor,\n\tuseEditorComponents,\n\tuseOnMount,\n\tuseShallowArrayIdentity,\n\tuseShallowObjectIdentity,\n} from '@tldraw/editor'\nimport { useMemo } from 'react'\nimport { TldrawHandles } from './canvas/TldrawHandles'\nimport { TldrawScribble } from './canvas/TldrawScribble'\nimport { TldrawSelectionBackground } from './canvas/TldrawSelectionBackground'\nimport { TldrawSelectionForeground } from './canvas/TldrawSelectionForeground'\nimport { TldrawShapeIndicators } from './canvas/TldrawShapeIndicators'\nimport { defaultBindingUtils } from './defaultBindingUtils'\nimport { TLEmbedDefinition } from './defaultEmbedDefinitions'\nimport {\n\tTLExternalContentProps,\n\tregisterDefaultExternalContentHandlers,\n} from './defaultExternalContentHandlers'\nimport { defaultShapeTools } from './defaultShapeTools'\nimport { defaultShapeUtils } from './defaultShapeUtils'\nimport { registerDefaultSideEffects } from './defaultSideEffects'\nimport { defaultTools } from './defaultTools'\nimport { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'\nimport { TldrawUi, TldrawUiProps } from './ui/TldrawUi'\nimport { TLUiComponents, useTldrawUiComponents } from './ui/context/components'\nimport { useToasts } from './ui/context/toasts'\nimport { usePreloadAssets } from './ui/hooks/usePreloadAssets'\nimport { useTranslation } from './ui/hooks/useTranslation/useTranslation'\nimport { useDefaultEditorAssetsWithOverrides } from './utils/static-assets/assetUrls'\n\n/**\n * Override the default react components used by the editor and UI. Set components to null to\n * disable them entirely.\n *\n * @example\n * ```tsx\n * import {Tldraw, TLComponents} from 'tldraw'\n *\n * const components: TLComponents = {\n * Scribble: MyCustomScribble,\n * }\n *\n * export function MyApp() {\n * return <Tldraw components={components} />\n * }\n * ```\n *\n *\n * @public\n */\nexport interface TLComponents extends TLEditorComponents, TLUiComponents {}\n\n/** @public */\nexport interface TldrawBaseProps\n\textends TldrawUiProps,\n\t\tTldrawEditorBaseProps,\n\t\tTLExternalContentProps {\n\tcomponents?: TLComponents\n\tembeds?: TLEmbedDefinition[]\n}\n\n/** @public */\nexport type TldrawProps = TldrawBaseProps & TldrawEditorStoreProps\n\n/** @public @react */\nexport function Tldraw(props: TldrawProps) {\n\tconst {\n\t\tchildren,\n\t\tmaxImageDimension,\n\t\tmaxAssetSize,\n\t\tacceptedImageMimeTypes,\n\t\tacceptedVideoMimeTypes,\n\t\tonMount,\n\t\tcomponents = {},\n\t\tshapeUtils = [],\n\t\tbindingUtils = [],\n\t\ttools = [],\n\t\tembeds,\n\t\t...rest\n\t} = props\n\n\tconst _components = useShallowObjectIdentity(components)\n\tconst componentsWithDefault = useMemo(\n\t\t() => ({\n\t\t\tScribble: TldrawScribble,\n\t\t\tShapeIndicators: TldrawShapeIndicators,\n\t\t\tCollaboratorScribble: TldrawScribble,\n\t\t\tSelectionForeground: TldrawSelectionForeground,\n\t\t\tSelectionBackground: TldrawSelectionBackground,\n\t\t\tHandles: TldrawHandles,\n\t\t\t..._components,\n\t\t}),\n\t\t[_components]\n\t)\n\n\tconst _shapeUtils = useShallowArrayIdentity(shapeUtils)\n\tconst shapeUtilsWithDefaults = useMemo(\n\t\t() => [...defaultShapeUtils, ..._shapeUtils],\n\t\t[_shapeUtils]\n\t)\n\n\tconst _bindingUtils = useShallowArrayIdentity(bindingUtils)\n\tconst bindingUtilsWithDefaults = useMemo(\n\t\t() => [...defaultBindingUtils, ..._bindingUtils],\n\t\t[_bindingUtils]\n\t)\n\n\tconst _tools = useShallowArrayIdentity(tools)\n\tconst toolsWithDefaults = useMemo(\n\t\t() => [...defaultTools, ...defaultShapeTools, ..._tools],\n\t\t[_tools]\n\t)\n\n\tconst _imageMimeTypes = useShallowArrayIdentity(\n\t\tacceptedImageMimeTypes ?? DEFAULT_SUPPORTED_IMAGE_TYPES\n\t)\n\tconst _videoMimeTypes = useShallowArrayIdentity(\n\t\tacceptedVideoMimeTypes ?? DEFAULT_SUPPORT_VIDEO_TYPES\n\t)\n\n\tconst mediaMimeTypes = useMemo(\n\t\t() => [..._imageMimeTypes, ..._videoMimeTypes],\n\t\t[_imageMimeTypes, _videoMimeTypes]\n\t)\n\n\tconst assets = useDefaultEditorAssetsWithOverrides(rest.assetUrls)\n\tconst { done: preloadingComplete, error: preloadingError } = usePreloadAssets(assets)\n\tif (preloadingError) {\n\t\treturn <ErrorScreen>Could not load assets. Please refresh the page.</ErrorScreen>\n\t}\n\tif (!preloadingComplete) {\n\t\treturn (\n\t\t\t<LoadingScreen>\n\t\t\t\t<DefaultSpinner />\n\t\t\t</LoadingScreen>\n\t\t)\n\t}\n\n\tconst embedShapeUtil = shapeUtilsWithDefaults.find((util) => util.type === 'embed')\n\tif (embedShapeUtil && embeds) {\n\t\tEmbedShapeUtil.setEmbedDefinitions(embeds)\n\t}\n\n\treturn (\n\t\t<TldrawEditor\n\t\t\tinitialState=\"select\"\n\t\t\t{...rest}\n\t\t\tcomponents={componentsWithDefault}\n\t\t\tshapeUtils={shapeUtilsWithDefaults}\n\t\t\tbindingUtils={bindingUtilsWithDefaults}\n\t\t\ttools={toolsWithDefaults}\n\t\t>\n\t\t\t<TldrawUi {...rest} components={componentsWithDefault} mediaMimeTypes={mediaMimeTypes}>\n\t\t\t\t<InsideOfEditorAndUiContext\n\t\t\t\t\tmaxImageDimension={maxImageDimension}\n\t\t\t\t\tmaxAssetSize={maxAssetSize}\n\t\t\t\t\tacceptedImageMimeTypes={_imageMimeTypes}\n\t\t\t\t\tacceptedVideoMimeTypes={_videoMimeTypes}\n\t\t\t\t\tonMount={onMount}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</TldrawUi>\n\t\t</TldrawEditor>\n\t)\n}\n\n// We put these hooks into a component here so that they can run inside of the context provided by TldrawEditor and TldrawUi.\nfunction InsideOfEditorAndUiContext({\n\tmaxImageDimension = 5000,\n\tmaxAssetSize = 10 * 1024 * 1024, // 10mb\n\tacceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,\n\tacceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,\n\tonMount,\n}: TLExternalContentProps & {\n\tonMount?: TLOnMountHandler\n}) {\n\tconst editor = useEditor()\n\tconst toasts = useToasts()\n\tconst msg = useTranslation()\n\n\tuseOnMount(() => {\n\t\tconst unsubs: (void | (() => void) | undefined)[] = []\n\n\t\tunsubs.push(registerDefaultSideEffects(editor))\n\n\t\t// for content handling, first we register the default handlers...\n\t\tregisterDefaultExternalContentHandlers(\n\t\t\teditor,\n\t\t\t{\n\t\t\t\tmaxImageDimension,\n\t\t\t\tmaxAssetSize,\n\t\t\t\tacceptedImageMimeTypes,\n\t\t\t\tacceptedVideoMimeTypes,\n\t\t\t},\n\t\t\t{\n\t\t\t\ttoasts,\n\t\t\t\tmsg,\n\t\t\t}\n\t\t)\n\n\t\t// ...then we call the store's on mount which may override them...\n\t\tunsubs.push(editor.store.props.onMount(editor))\n\n\t\t// ...then we run the user's onMount prop, which may override things again.\n\t\tunsubs.push(onMount?.(editor))\n\n\t\treturn () => {\n\t\t\tunsubs.forEach((fn) => fn?.())\n\t\t}\n\t})\n\n\tconst { Canvas } = useEditorComponents()\n\tconst { ContextMenu } = useTldrawUiComponents()\n\n\tif (ContextMenu) {\n\t\t// should wrap canvas\n\t\treturn <ContextMenu />\n\t}\n\n\tif (Canvas) {\n\t\treturn <Canvas />\n\t}\n\n\treturn null\n}\n"], "mappings": "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", "names": [] }