npm - @tldraw/editor - Versions diffs - 5.5.0-next.b6a9f7cd7be2 → 5.5.0-next.c91b2de0a423 - Mend

@tldraw/editor 5.5.0-next.b6a9f7cd7be2 → 5.5.0-next.c91b2de0a423

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

Files changed (96) hide show

package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js CHANGED Viewed

@@ -43,10 +43,7 @@ var import_dom = require("../../utils/dom");
 var import_runtime = require("../../utils/runtime");
 var import_ErrorBoundary = require("../ErrorBoundary");
 const BASE_ERROR_URL = "https://github.com/tldraw/tldraw/issues/new";
-const DefaultErrorFallback = function DefaultErrorFallback2({
-  error,
-  editor
-}) {
+function DefaultErrorFallback({ error, editor }) {
   const containerRef = (0, import_react.useRef)(null);
   const [shouldShowError, setShouldShowError] = (0, import_react.useState)(process.env.NODE_ENV === "development");
   const [didCopy, setDidCopy] = (0, import_react.useState)(false);
@@ -207,5 +204,5 @@ My browser: ${navigator.userAgent}`
       ]
     }
   );
-};
+}
 //# sourceMappingURL=DefaultErrorFallback.js.map

package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultErrorFallback.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { noop } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { getOwnerDocument } from '../../exports/domUtils'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { EditorProvider } from '../../hooks/useEditor'\nimport { getGlobalWindow } from '../../utils/dom'\nimport { hardResetEditor, refreshPage } from '../../utils/runtime'\nimport { ErrorBoundary } from '../ErrorBoundary'\n\nconst BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'\n\n/** @public */\nexport type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>\n\n/** @public @react */\nexport const DefaultErrorFallback: TLErrorFallbackComponent = function DefaultErrorFallback({\n\terror,\n\teditor,\n}) {\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')\n\tconst [didCopy, setDidCopy] = useState(false)\n\tconst [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false)\n\n\tlet Canvas: React.ComponentType | null = null\n\ttry {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst components = useEditorComponents()\n\t\tCanvas = components.Canvas ?? null\n\t} catch {\n\t\t// allow this to fail silently\n\t}\n\n\tconst errorMessage = error instanceof Error ? error.message : String(error)\n\tconst errorStack = error instanceof Error ? error.stack : null\n\n\tconst isDarkModeFromApp = useValue(\n\t\t'isDarkMode',\n\t\t() => {\n\t\t\ttry {\n\t\t\t\tif (editor) {\n\t\t\t\t\treturn editor.user.getIsDarkMode()\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// we're in a funky error state so this might not work for spooky\n\t\t\t\t// reasons. if not, we'll have another attempt later:\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t\t[editor]\n\t)\n\tconst [isDarkMode, setIsDarkMode] = useState<null | boolean>(null)\n\tuseLayoutEffect(() => {\n\t\t// if we found a theme class from the app, we can just use that\n\t\tif (isDarkModeFromApp !== null) {\n\t\t\tsetIsDarkMode(isDarkModeFromApp)\n\t\t}\n\n\t\t// do any of our parents have a theme class? if yes then we can just\n\t\t// rely on that and don't need to set our own class\n\t\tlet parent = containerRef.current?.parentElement\n\t\tlet foundParentThemeClass = false\n\t\twhile (parent) {\n\t\t\tif (\n\t\t\t\tparent.classList.contains('tl-theme__dark') ||\n\t\t\t\tparent.classList.contains('tl-theme__light')\n\t\t\t) {\n\t\t\t\tfoundParentThemeClass = true\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tparent = parent.parentElement\n\t\t}\n\t\tif (foundParentThemeClass) {\n\t\t\tsetIsDarkMode(null)\n\t\t\treturn\n\t\t}\n\n\t\t// if we can't find a theme class from the app or from a parent, we have\n\t\t// to fall back on using a media query:\n\t\tif (typeof window !== 'undefined' && getGlobalWindow().matchMedia) {\n\t\t\tsetIsDarkMode(getGlobalWindow().matchMedia('(prefers-color-scheme: dark)').matches)\n\t\t}\n\t}, [isDarkModeFromApp])\n\n\tuseEffect(() => {\n\t\tif (didCopy) {\n\t\t\tconst timeout = editor?.timers.setTimeout(() => {\n\t\t\t\tsetDidCopy(false)\n\t\t\t}, 2000)\n\t\t\treturn () => clearTimeout(timeout)\n\t\t}\n\t}, [didCopy, editor])\n\n\tconst copyError = () => {\n\t\tconst doc = getOwnerDocument(containerRef.current)\n\t\tconst textarea = doc.createElement('textarea')\n\t\ttextarea.value = errorStack ?? errorMessage\n\t\tdoc.body.appendChild(textarea)\n\t\ttextarea.select()\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\tdoc.execCommand('copy')\n\t\ttextarea.remove()\n\t\tsetDidCopy(true)\n\t}\n\n\tconst refresh = () => {\n\t\trefreshPage()\n\t}\n\n\tconst resetLocalState = async () => {\n\t\thardResetEditor()\n\t}\n\n\tconst url = new URL(BASE_ERROR_URL)\n\turl.searchParams.set('title', errorMessage)\n\turl.searchParams.set('labels', `bug`)\n\turl.searchParams.set(\n\t\t'body',\n\t\t`Hey, I ran into an error while using tldraw:\n\n\\`\\`\\`js\n${errorStack ?? errorMessage}\n\\`\\`\\`\n\nMy browser: ${navigator.userAgent}`\n\t)\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={classNames(\n\t\t\t\t'tl-container tl-error-boundary',\n\t\t\t\t// error-boundary is sometimes used outside of the theme\n\t\t\t\t// container, so we need to provide it with a theme for our\n\t\t\t\t// styles to work correctly\n\t\t\t\tisDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"tl-error-boundary__overlay\" />\n\t\t\t{editor && (\n\t\t\t\t// opportunistically attempt to render the canvas to reassure\n\t\t\t\t// the user that their document is still there. there's a good\n\t\t\t\t// chance this won't work (ie the error that we're currently\n\t\t\t\t// notifying the user about originates in the canvas) so it's\n\t\t\t\t// not a big deal if it doesn't work - in that case we just have\n\t\t\t\t// a plain grey background.\n\t\t\t\t<ErrorBoundary onError={noop} fallback={() => null}>\n\t\t\t\t\t<EditorProvider editor={editor}>\n\t\t\t\t\t\t<div className=\"tl-overlay tl-error-boundary__canvas\">{Canvas ? <Canvas /> : null}</div>\n\t\t\t\t\t</EditorProvider>\n\t\t\t\t</ErrorBoundary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={classNames('tl-modal', 'tl-error-boundary__content', {\n\t\t\t\t\t'tl-error-boundary__content__expanded': shouldShowError && !shouldShowResetConfirmation,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{shouldShowResetConfirmation ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Are you sure?</h2>\n\t\t\t\t\t\t<p>Resetting your data will delete your drawing and cannot be undone.</p>\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={() => setShouldShowResetConfirmation(false)}>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button className=\"tlui-button tl-error-boundary__reset\" onClick={resetLocalState}>\n\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Something went wrong</h2>\n\t\t\t\t\t\t<p>Please refresh your browser.</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf the issue continues after refreshing, you may need to reset the tldraw data stored\n\t\t\t\t\t\t\ton your device.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Note:</strong> Resetting will erase your current project and any unsaved work.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t{process.env.NODE_ENV !== 'production' && (\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tIf you&apos;re developing with the SDK and need help, join us on{' '}\n\t\t\t\t\t\t\t\t<a href=\"https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen\">\n\t\t\t\t\t\t\t\t\tDiscord\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{shouldShowError && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\tMessage:\n\t\t\t\t\t\t\t\t<h4>\n\t\t\t\t\t\t\t\t\t<code>{errorMessage}</code>\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\tStack trace:\n\t\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__error\">\n\t\t\t\t\t\t\t\t\t<pre>\n\t\t\t\t\t\t\t\t\t\t<code>{errorStack ?? errorMessage}</code>\n\t\t\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={copyError}>\n\t\t\t\t\t\t\t\t\t\t{didCopy ? 'Copied!' : 'Copy'}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={() => setShouldShowError(!shouldShowError)}>\n\t\t\t\t\t\t\t\t{shouldShowError ? 'Hide details' : 'Show details'}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions__group\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-button tl-error-boundary__reset\"\n\t\t\t\t\t\t\t\t\tonClick={() => setShouldShowResetConfirmation(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button className=\"tlui-button tl-error-boundary__refresh\" onClick={refresh}>\n\t\t\t\t\t\t\t\t\tRefresh page\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "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",
-  "names": ["DefaultErrorFallback", "classNames"]
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { noop } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { getOwnerDocument } from '../../exports/domUtils'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { EditorProvider } from '../../hooks/useEditor'\nimport { getGlobalWindow } from '../../utils/dom'\nimport { hardResetEditor, refreshPage } from '../../utils/runtime'\nimport { ErrorBoundary } from '../ErrorBoundary'\n\nconst BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'\n\n/** @public */\nexport interface TLErrorFallbackProps {\n\t/** The error that was caught. */\n\terror: unknown\n\t/**\n\t * Only set when the caller renders the fallback with an editor; the editor's own error\n\t * boundaries pass just `error`.\n\t */\n\teditor?: Editor\n}\n\n/** @public */\nexport type TLErrorFallbackComponent = ComponentType<TLErrorFallbackProps>\n\n/** @public @react */\nexport function DefaultErrorFallback({ error, editor }: TLErrorFallbackProps) {\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')\n\tconst [didCopy, setDidCopy] = useState(false)\n\tconst [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false)\n\n\tlet Canvas: React.ComponentType | null = null\n\ttry {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst components = useEditorComponents()\n\t\tCanvas = components.Canvas ?? null\n\t} catch {\n\t\t// allow this to fail silently\n\t}\n\n\tconst errorMessage = error instanceof Error ? error.message : String(error)\n\tconst errorStack = error instanceof Error ? error.stack : null\n\n\tconst isDarkModeFromApp = useValue(\n\t\t'isDarkMode',\n\t\t() => {\n\t\t\ttry {\n\t\t\t\tif (editor) {\n\t\t\t\t\treturn editor.user.getIsDarkMode()\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// we're in a funky error state so this might not work for spooky\n\t\t\t\t// reasons. if not, we'll have another attempt later:\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t\t[editor]\n\t)\n\tconst [isDarkMode, setIsDarkMode] = useState<null | boolean>(null)\n\tuseLayoutEffect(() => {\n\t\t// if we found a theme class from the app, we can just use that\n\t\tif (isDarkModeFromApp !== null) {\n\t\t\tsetIsDarkMode(isDarkModeFromApp)\n\t\t}\n\n\t\t// do any of our parents have a theme class? if yes then we can just\n\t\t// rely on that and don't need to set our own class\n\t\tlet parent = containerRef.current?.parentElement\n\t\tlet foundParentThemeClass = false\n\t\twhile (parent) {\n\t\t\tif (\n\t\t\t\tparent.classList.contains('tl-theme__dark') ||\n\t\t\t\tparent.classList.contains('tl-theme__light')\n\t\t\t) {\n\t\t\t\tfoundParentThemeClass = true\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tparent = parent.parentElement\n\t\t}\n\t\tif (foundParentThemeClass) {\n\t\t\tsetIsDarkMode(null)\n\t\t\treturn\n\t\t}\n\n\t\t// if we can't find a theme class from the app or from a parent, we have\n\t\t// to fall back on using a media query:\n\t\tif (typeof window !== 'undefined' && getGlobalWindow().matchMedia) {\n\t\t\tsetIsDarkMode(getGlobalWindow().matchMedia('(prefers-color-scheme: dark)').matches)\n\t\t}\n\t}, [isDarkModeFromApp])\n\n\tuseEffect(() => {\n\t\tif (didCopy) {\n\t\t\tconst timeout = editor?.timers.setTimeout(() => {\n\t\t\t\tsetDidCopy(false)\n\t\t\t}, 2000)\n\t\t\treturn () => clearTimeout(timeout)\n\t\t}\n\t}, [didCopy, editor])\n\n\tconst copyError = () => {\n\t\tconst doc = getOwnerDocument(containerRef.current)\n\t\tconst textarea = doc.createElement('textarea')\n\t\ttextarea.value = errorStack ?? errorMessage\n\t\tdoc.body.appendChild(textarea)\n\t\ttextarea.select()\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\tdoc.execCommand('copy')\n\t\ttextarea.remove()\n\t\tsetDidCopy(true)\n\t}\n\n\tconst refresh = () => {\n\t\trefreshPage()\n\t}\n\n\tconst resetLocalState = async () => {\n\t\thardResetEditor()\n\t}\n\n\tconst url = new URL(BASE_ERROR_URL)\n\turl.searchParams.set('title', errorMessage)\n\turl.searchParams.set('labels', `bug`)\n\turl.searchParams.set(\n\t\t'body',\n\t\t`Hey, I ran into an error while using tldraw:\n\n\\`\\`\\`js\n${errorStack ?? errorMessage}\n\\`\\`\\`\n\nMy browser: ${navigator.userAgent}`\n\t)\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={classNames(\n\t\t\t\t'tl-container tl-error-boundary',\n\t\t\t\t// error-boundary is sometimes used outside of the theme\n\t\t\t\t// container, so we need to provide it with a theme for our\n\t\t\t\t// styles to work correctly\n\t\t\t\tisDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"tl-error-boundary__overlay\" />\n\t\t\t{editor && (\n\t\t\t\t// opportunistically attempt to render the canvas to reassure\n\t\t\t\t// the user that their document is still there. there's a good\n\t\t\t\t// chance this won't work (ie the error that we're currently\n\t\t\t\t// notifying the user about originates in the canvas) so it's\n\t\t\t\t// not a big deal if it doesn't work - in that case we just have\n\t\t\t\t// a plain grey background.\n\t\t\t\t<ErrorBoundary onError={noop} fallback={() => null}>\n\t\t\t\t\t<EditorProvider editor={editor}>\n\t\t\t\t\t\t<div className=\"tl-overlay tl-error-boundary__canvas\">{Canvas ? <Canvas /> : null}</div>\n\t\t\t\t\t</EditorProvider>\n\t\t\t\t</ErrorBoundary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={classNames('tl-modal', 'tl-error-boundary__content', {\n\t\t\t\t\t'tl-error-boundary__content__expanded': shouldShowError && !shouldShowResetConfirmation,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{shouldShowResetConfirmation ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Are you sure?</h2>\n\t\t\t\t\t\t<p>Resetting your data will delete your drawing and cannot be undone.</p>\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={() => setShouldShowResetConfirmation(false)}>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button className=\"tlui-button tl-error-boundary__reset\" onClick={resetLocalState}>\n\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Something went wrong</h2>\n\t\t\t\t\t\t<p>Please refresh your browser.</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf the issue continues after refreshing, you may need to reset the tldraw data stored\n\t\t\t\t\t\t\ton your device.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Note:</strong> Resetting will erase your current project and any unsaved work.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t{process.env.NODE_ENV !== 'production' && (\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tIf you&apos;re developing with the SDK and need help, join us on{' '}\n\t\t\t\t\t\t\t\t<a href=\"https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen\">\n\t\t\t\t\t\t\t\t\tDiscord\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{shouldShowError && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\tMessage:\n\t\t\t\t\t\t\t\t<h4>\n\t\t\t\t\t\t\t\t\t<code>{errorMessage}</code>\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\tStack trace:\n\t\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__error\">\n\t\t\t\t\t\t\t\t\t<pre>\n\t\t\t\t\t\t\t\t\t\t<code>{errorStack ?? errorMessage}</code>\n\t\t\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={copyError}>\n\t\t\t\t\t\t\t\t\t\t{didCopy ? 'Copied!' : 'Copy'}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={() => setShouldShowError(!shouldShowError)}>\n\t\t\t\t\t\t\t\t{shouldShowError ? 'Hide details' : 'Show details'}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions__group\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-button tl-error-boundary__reset\"\n\t\t\t\t\t\t\t\t\tonClick={() => setShouldShowResetConfirmation(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button className=\"tlui-button tl-error-boundary__refresh\" onClick={refresh}>\n\t\t\t\t\t\t\t\t\tRefresh page\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": ["classNames"]
 }

package/dist-cjs/lib/components/default-components/DefaultSpinner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultSpinner.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\n\n/** @public @react */\nexport function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg\n\t\t\twidth={16}\n\t\t\theight={16}\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"false\"\n\t\t\t{...props}\n\t\t\tclassName={classNames('tl-spinner', props.className)}\n\t\t>\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\" />\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaG;AAbH,wBAAuB;AAGhB,SAAS,eAAe,OAAsC;AACpE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,eAAY;AAAA,MACX,GAAG;AAAA,MACJ,eAAW,kBAAAA,SAAW,cAAc,MAAM,SAAS;AAAA,MAEnD,uDAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,oDAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,QACvE,4CAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAAe;AAAA,SAC7E;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import classNames from 'classnames'\n\n/** @public */\nexport type TLSpinnerProps = React.SVGProps<SVGSVGElement>\n\n/** @public @react */\nexport function DefaultSpinner(props: TLSpinnerProps) {\n\treturn (\n\t\t<svg\n\t\t\twidth={16}\n\t\t\theight={16}\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"false\"\n\t\t\t{...props}\n\t\t\tclassName={classNames('tl-spinner', props.className)}\n\t\t>\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\" />\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBG;AAhBH,wBAAuB;AAMhB,SAAS,eAAe,OAAuB;AACrD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,eAAY;AAAA,MACX,GAAG;AAAA,MACJ,eAAW,kBAAAA,SAAW,cAAc,MAAM,SAAS;AAAA,MAEnD,uDAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,oDAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,QACvE,4CAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAAe;AAAA,SAC7E;AAAA;AAAA,EACD;AAEF;",
   "names": ["classNames"]
 }

package/dist-cjs/lib/editor/Editor.js CHANGED Viewed

@@ -1408,7 +1408,7 @@ class Editor extends import_eventemitter3.default {
   updateInstanceState(partial, historyOptions) {
     this._updateInstanceState(partial, { history: "ignore", ...historyOptions });
     if (partial.isChangingStyle !== void 0) {
-      clearTimeout(this._isChangingStyleTimeout);
+      this.timers.clearTimeout(this._isChangingStyleTimeout);
       if (partial.isChangingStyle === true) {
         this._isChangingStyleTimeout = this.timers.setTimeout(() => {
           this._updateInstanceState({ isChangingStyle: false }, { history: "ignore" });
@@ -7822,22 +7822,22 @@ class Editor extends import_eventemitter3.default {
     const releaseCtrl = this._ctrlKeyTimeout !== -1;
     const releaseMeta = this._metaKeyTimeout !== -1;
     if (releaseShift) {
-      clearTimeout(this._shiftKeyTimeout);
+      this.timers.clearTimeout(this._shiftKeyTimeout);
       this._shiftKeyTimeout = -1;
       this.inputs.setShiftKey(false);
     }
     if (releaseAlt) {
-      clearTimeout(this._altKeyTimeout);
+      this.timers.clearTimeout(this._altKeyTimeout);
       this._altKeyTimeout = -1;
       this.inputs.setAltKey(false);
     }
     if (releaseCtrl) {
-      clearTimeout(this._ctrlKeyTimeout);
+      this.timers.clearTimeout(this._ctrlKeyTimeout);
       this._ctrlKeyTimeout = -1;
       this.inputs.setCtrlKey(false);
     }
     if (releaseMeta) {
-      clearTimeout(this._metaKeyTimeout);
+      this.timers.clearTimeout(this._metaKeyTimeout);
       this._metaKeyTimeout = -1;
       this.inputs.setMetaKey(false);
     }
@@ -7951,28 +7951,28 @@ class Editor extends import_eventemitter3.default {
       return;
     }
     if (info.shiftKey) {
-      clearTimeout(this._shiftKeyTimeout);
+      this.timers.clearTimeout(this._shiftKeyTimeout);
       this._shiftKeyTimeout = -1;
       inputs.setShiftKey(true);
     } else if (!info.shiftKey && inputs.getShiftKey() && this._shiftKeyTimeout === -1) {
       this._shiftKeyTimeout = this.timers.setTimeout(this._releaseShiftKey, 150);
     }
     if (info.altKey) {
-      clearTimeout(this._altKeyTimeout);
+      this.timers.clearTimeout(this._altKeyTimeout);
       this._altKeyTimeout = -1;
       inputs.setAltKey(true);
     } else if (!info.altKey && inputs.getAltKey() && this._altKeyTimeout === -1) {
       this._altKeyTimeout = this.timers.setTimeout(this._releaseAltKey, 150);
     }
     if (info.ctrlKey) {
-      clearTimeout(this._ctrlKeyTimeout);
+      this.timers.clearTimeout(this._ctrlKeyTimeout);
       this._ctrlKeyTimeout = -1;
       inputs.setCtrlKey(true);
     } else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
       this._ctrlKeyTimeout = this.timers.setTimeout(this._releaseCtrlKey, 150);
     }
     if (info.metaKey && info.name !== "key_up") {
-      clearTimeout(this._metaKeyTimeout);
+      this.timers.clearTimeout(this._metaKeyTimeout);
       this._metaKeyTimeout = -1;
       inputs.setMetaKey(true);
     } else if (!info.metaKey && inputs.getMetaKey() && this._metaKeyTimeout === -1) {
@@ -7986,8 +7986,7 @@ class Editor extends import_eventemitter3.default {
     const cameraOptions = this._cameraOptions.__unsafe__getWithoutCapture();
     switch (type) {
       case "pinch": {
-        if (cameraOptions.isLocked) return;
-        clearTimeout(this._longPressTimeout);
+        this.timers.clearTimeout(this._longPressTimeout);
         this.inputs.updateFromEvent(info);
         switch (info.name) {
           case "pinch_start": {
@@ -8008,6 +8007,7 @@ class Editor extends import_eventemitter3.default {
           }
           case "pinch": {
             if (!inputs.getIsPinching()) return;
+            if (cameraOptions.isLocked) return;
             const {
               point: { z = 1 },
               delta: { x: dx, y: dy }
@@ -8063,7 +8063,7 @@ class Editor extends import_eventemitter3.default {
         const { panSpeed, zoomSpeed } = cameraOptions;
         let wheelBehavior = cameraOptions.wheelBehavior;
         const inputMode = this.user.getUserPreferences().inputMode;
-        if (inputMode !== null) {
+        if (inputMode !== null && wheelBehavior !== "none") {
           wheelBehavior = inputMode === "trackpad" ? "pan" : "zoom";
         }
         if (wheelBehavior !== "none") {
@@ -8115,12 +8115,12 @@ class Editor extends import_eventemitter3.default {
       }
       case "pointer": {
         if (inputs.getIsPinching()) return;
-        this.inputs.updateFromEvent(info);
         const { isPen } = info;
         const { isPenMode } = instanceState;
+        if (isPenMode && !isPen) return;
+        this.inputs.updateFromEvent(info);
         switch (info.name) {
           case "pointer_down": {
-            if (isPenMode && !isPen) return;
             this._releaseDebouncedModifiers();
             if (!this.inputs.getIsPanning()) {
               this._longPressTimeout = this.timers.setTimeout(() => {
@@ -8149,7 +8149,7 @@ class Editor extends import_eventemitter3.default {
               this.updateInstanceState({ isPenMode: true });
               this.interrupt();
             }
-            if (info.button === import_constants.STYLUS_ERASER_BUTTON) {
+            if (info.button === import_constants.STYLUS_ERASER_BUTTON && this.getStateDescendant("eraser")) {
               this._restoreToolId = this.getCurrentToolId();
               this.complete();
               this.setCurrentTool("eraser");
@@ -8158,10 +8158,10 @@ class Editor extends import_eventemitter3.default {
                 this._prevCursor = this.getInstanceState().cursor.type;
               }
               this.inputs.setIsPanning(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
             } else if (info.button === import_constants.RIGHT_MOUSE_BUTTON && this.options.rightClickPanning) {
               this.inputs.setIsRightPointing(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
               return this;
             }
             if (this.inputs.getIsPanning()) {
@@ -8172,7 +8172,6 @@ class Editor extends import_eventemitter3.default {
             break;
           }
           case "pointer_move": {
-            if (!isPen && isPenMode) return;
             const { x: cx, y: cy, z: cz } = (0, import_state.unsafe__withoutCapture)(() => this.getCamera());
             if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
               const currentScreenPoint = this.inputs.getCurrentScreenPoint();
@@ -8203,16 +8202,15 @@ class Editor extends import_eventemitter3.default {
             }
             if (inputs.getIsPointing() && !inputs.getIsDragging() && import_Vec.Vec.Dist2(inputs.getOriginPagePoint(), inputs.getCurrentPagePoint()) * this.getZoomLevel() > (instanceState.isCoarsePointer ? this.options.coarseDragDistanceSquared : this.options.dragDistanceSquared) / cz) {
               inputs.setIsDragging(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
             }
             break;
           }
           case "pointer_up": {
             inputs.setIsDragging(false);
             inputs.setIsPointing(false);
-            clearTimeout(this._longPressTimeout);
+            this.timers.clearTimeout(this._longPressTimeout);
             inputs.buttons.delete(info.button);
-            if (instanceState.isPenMode && !isPen) return;
             if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
               this.inputs.setIsRightPointing(false);
               this._selectedShapeIdsAtPointerDown = [];
@@ -8268,7 +8266,7 @@ class Editor extends import_eventemitter3.default {
                 });
               }
             } else {
-              if (info.button === import_constants.STYLUS_ERASER_BUTTON) {
+              if (info.button === import_constants.STYLUS_ERASER_BUTTON && this.getStateDescendant("eraser")) {
                 this.complete();
                 this.setCurrentTool(this._restoreToolId);
               }
@@ -8295,7 +8293,7 @@ class Editor extends import_eventemitter3.default {
                 }
                 this.inputs.setIsPanning(true);
                 this.inputs.setIsSpacebarPanning(true);
-                clearTimeout(this._longPressTimeout);
+                this.timers.clearTimeout(this._longPressTimeout);
                 this.setCursor({
                   type: this.inputs.getIsPointing() ? "grabbing" : "grab",
                   rotation: 0
@@ -8321,7 +8319,7 @@ class Editor extends import_eventemitter3.default {
                     break;
                   }
                 }
-                if (offset) {
+                if (offset && !cameraOptions.isLocked) {
                   const bounds = this.getViewportPageBounds();
                   const next = bounds.clone().translate(offset.mulV({ x: bounds.w, y: bounds.h }));
                   this._animateToViewport(next, { animation: { duration: 320 } });
@@ -8361,7 +8359,7 @@ class Editor extends import_eventemitter3.default {
         this.setCurrentTool("select");
       }
       const { isPenMode } = this.store.unsafeGetWithoutCapture(import_tlschema.TLINSTANCE_ID);
-      if (info.isPen === isPenMode) {
+      if (!isPenMode || info.isPen) {
         const clickInfo = this._clickManager.handlePointerEvent(info);
         if (info.name !== clickInfo.name) {
           this.root.handleEvent(info);
@@ -8383,7 +8381,7 @@ class Editor extends import_eventemitter3.default {
   maybeTrackPerformance(name) {
     if (import_debug_flags.debugFlags.measurePerformance.get()) {
       if (this.performanceTracker.isStarted()) {
-        clearTimeout(this.performanceTrackerTimeout);
+        this.timers.clearTimeout(this.performanceTrackerTimeout);
       } else {
         this.performanceTracker.start(name);
       }