tldraw 3.15.0-next.39f008bfb627 → 3.15.0-next.82ffd490a4f1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +16 -8
- package/dist-cjs/index.js +2 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/TldrawImage.js +5 -2
- package/dist-cjs/lib/TldrawImage.js.map +3 -3
- package/dist-cjs/lib/canvas/TldrawCropHandles.js +1 -1
- package/dist-cjs/lib/canvas/TldrawCropHandles.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawHandles.js +1 -1
- package/dist-cjs/lib/canvas/TldrawHandles.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawOverlays.js +1 -1
- package/dist-cjs/lib/canvas/TldrawOverlays.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawSelectionForeground.js +279 -271
- package/dist-cjs/lib/canvas/TldrawSelectionForeground.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/PathBuilder.js +21 -3
- package/dist-cjs/lib/shapes/shared/PathBuilder.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -0
- package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/RichTextLabel.js +1 -0
- package/dist-cjs/lib/shapes/shared/RichTextLabel.js.map +2 -2
- package/dist-cjs/lib/styles.js.map +2 -2
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +3 -4
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/Spinner.js +2 -25
- package/dist-cjs/lib/ui/components/Spinner.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +2 -1
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/Button/TldrawUiButtonIcon.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js +1 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js +35 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +5 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +1 -0
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js.map +1 -1
- package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +24 -7
- package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-esm/index.d.mts +16 -8
- package/dist-esm/index.mjs +6 -2
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawImage.mjs +5 -2
- package/dist-esm/lib/TldrawImage.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawCropHandles.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawCropHandles.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawHandles.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawHandles.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawOverlays.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawOverlays.mjs.map +2 -2
- package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs +279 -271
- package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/PathBuilder.mjs +22 -3
- package/dist-esm/lib/shapes/shared/PathBuilder.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -0
- package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/RichTextLabel.mjs +1 -0
- package/dist-esm/lib/shapes/shared/RichTextLabel.mjs.map +2 -2
- package/dist-esm/lib/styles.mjs.map +2 -2
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +3 -4
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Spinner.mjs +3 -26
- package/dist-esm/lib/ui/components/Spinner.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +2 -1
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/Button/TldrawUiButtonIcon.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs +1 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs +36 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +5 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +1 -0
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs.map +1 -1
- package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +24 -7
- package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/package.json +4 -3
- package/src/index.ts +6 -1
- package/src/lib/TldrawImage.tsx +6 -2
- package/src/lib/canvas/TldrawCropHandles.tsx +1 -1
- package/src/lib/canvas/TldrawHandles.tsx +5 -1
- package/src/lib/canvas/TldrawOverlays.tsx +1 -1
- package/src/lib/canvas/TldrawSelectionForeground.tsx +5 -1
- package/src/lib/shapes/shared/PathBuilder.test.tsx +1 -1
- package/src/lib/shapes/shared/PathBuilder.tsx +35 -1
- package/src/lib/shapes/shared/PlainTextLabel.tsx +1 -0
- package/src/lib/shapes/shared/RichTextLabel.tsx +1 -0
- package/src/lib/styles.tsx +3 -1
- package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +3 -4
- package/src/lib/ui/components/Spinner.tsx +2 -24
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +1 -0
- package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx +2 -2
- package/src/lib/ui/components/primitives/TldrawUiDialog.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiIcon.tsx +41 -3
- package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +5 -1
- package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +4 -0
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +2 -2
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +3 -2
- package/src/lib/ui/context/actions.tsx +1 -1
- package/src/lib/ui/hooks/useClipboardEvents.ts +31 -10
- package/src/lib/ui/hooks/useTools.tsx +2 -1
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +8 -22
- package/src/test/navigation.test.ts +254 -0
- package/tldraw.css +25 -26
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
import { memo, useEffect, useLayoutEffect, useMemo, useState } from "react";
|
|
9
9
|
import { defaultBindingUtils } from "./defaultBindingUtils.mjs";
|
|
10
10
|
import { defaultShapeUtils } from "./defaultShapeUtils.mjs";
|
|
11
|
+
import { useDefaultEditorAssetsWithOverrides } from "./utils/static-assets/assetUrls.mjs";
|
|
11
12
|
import { defaultAddFontsFromNode, tipTapDefaultExtensions } from "./utils/text/richText.mjs";
|
|
12
13
|
const defaultTextOptions = {
|
|
13
14
|
tipTapConfig: {
|
|
@@ -43,6 +44,7 @@ const TldrawImage = memo(function TldrawImage2(props) {
|
|
|
43
44
|
assetUrls,
|
|
44
45
|
textOptions = defaultTextOptions
|
|
45
46
|
} = props;
|
|
47
|
+
const assetUrlsWithOverrides = useDefaultEditorAssetsWithOverrides(assetUrls);
|
|
46
48
|
useLayoutEffect(() => {
|
|
47
49
|
if (!container) return;
|
|
48
50
|
if (!store) return;
|
|
@@ -57,12 +59,13 @@ const TldrawImage = memo(function TldrawImage2(props) {
|
|
|
57
59
|
tools: [],
|
|
58
60
|
getContainer: () => tempElm,
|
|
59
61
|
licenseKey,
|
|
60
|
-
fontAssetUrls:
|
|
62
|
+
fontAssetUrls: assetUrlsWithOverrides.fonts,
|
|
61
63
|
textOptions
|
|
62
64
|
});
|
|
63
65
|
if (pageId) editor.setCurrentPage(pageId);
|
|
64
66
|
const shapeIds = editor.getCurrentPageShapeIds();
|
|
65
67
|
async function setSvg() {
|
|
68
|
+
await editor.fonts.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender);
|
|
66
69
|
const imageResult = await editor.toImage([...shapeIds], {
|
|
67
70
|
bounds,
|
|
68
71
|
scale,
|
|
@@ -96,7 +99,7 @@ const TldrawImage = memo(function TldrawImage2(props) {
|
|
|
96
99
|
preserveAspectRatio,
|
|
97
100
|
licenseKey,
|
|
98
101
|
pixelRatio,
|
|
99
|
-
|
|
102
|
+
assetUrlsWithOverrides,
|
|
100
103
|
textOptions
|
|
101
104
|
]);
|
|
102
105
|
useEffect(() => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/lib/TldrawImage.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tEditor,\n\tTLAnyBindingUtilConstructor,\n\tTLAnyShapeUtilConstructor,\n\tTLEditorSnapshot,\n\tTLImageExportOptions,\n\tTLPageId,\n\tTLStoreSnapshot,\n\tTLTextOptions,\n\tmergeArraysAndReplaceDefaults,\n\tuseShallowArrayIdentity,\n\tuseTLStore,\n} from '@tldraw/editor'\nimport { memo, useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { defaultBindingUtils } from './defaultBindingUtils'\nimport { defaultShapeUtils } from './defaultShapeUtils'\nimport { TLUiAssetUrlOverrides } from './ui/assetUrls'\nimport { defaultAddFontsFromNode, tipTapDefaultExtensions } from './utils/text/richText'\n\n/** @public */\nexport interface TldrawImageProps extends TLImageExportOptions {\n\t/**\n\t * The snapshot to display.\n\t */\n\tsnapshot: Partial<TLEditorSnapshot> | TLStoreSnapshot\n\n\t/**\n\t * The image format to use. Defaults to 'svg'.\n\t */\n\tformat?: 'svg' | 'png'\n\n\t/**\n\t * The page to display. Defaults to the first page.\n\t */\n\tpageId?: TLPageId\n\n\t/**\n\t * Additional shape utils to use.\n\t */\n\tshapeUtils?: readonly TLAnyShapeUtilConstructor[]\n\t/**\n\t * Additional binding utils to use.\n\t */\n\tbindingUtils?: readonly TLAnyBindingUtilConstructor[]\n\t/**\n\t * The license key.\n\t */\n\tlicenseKey?: string\n\t/**\n\t * Asset URL overrides.\n\t */\n\tassetUrls?: TLUiAssetUrlOverrides\n\t/**\n\t * Text options for the editor.\n\t */\n\ttextOptions?: TLTextOptions\n}\n\nconst defaultTextOptions = {\n\ttipTapConfig: {\n\t\textensions: tipTapDefaultExtensions,\n\t},\n\taddFontsFromNode: defaultAddFontsFromNode,\n}\n\n/**\n * A rendered SVG image of a Tldraw snapshot.\n *\n * @example\n * ```tsx\n * <TldrawImage\n * \tsnapshot={snapshot}\n * \tpageId={pageId}\n * \tbackground={false}\n * darkMode={true}\n * bounds={new Box(0,0,600,400)}\n * scale={1}\n * />\n * ```\n *\n * @public\n * @react\n */\nexport const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {\n\tconst [url, setUrl] = useState<string | null>(null)\n\tconst [container, setContainer] = useState<HTMLDivElement | null>(null)\n\n\tconst _shapeUtils = useShallowArrayIdentity(props.shapeUtils ?? [])\n\tconst shapeUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _shapeUtils, defaultShapeUtils),\n\t\t[_shapeUtils]\n\t)\n\tconst _bindingUtils = useShallowArrayIdentity(props.bindingUtils ?? [])\n\tconst bindingUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _bindingUtils, defaultBindingUtils),\n\t\t[_bindingUtils]\n\t)\n\tconst store = useTLStore({ snapshot: props.snapshot, shapeUtils: shapeUtilsWithDefaults })\n\n\tconst {\n\t\tpageId,\n\t\tbounds,\n\t\tscale,\n\t\tpixelRatio,\n\t\tbackground,\n\t\tpadding,\n\t\tdarkMode,\n\t\tpreserveAspectRatio,\n\t\tformat = 'svg',\n\t\tlicenseKey,\n\t\tassetUrls,\n\t\ttextOptions = defaultTextOptions,\n\t} = props\n\n\tuseLayoutEffect(() => {\n\t\tif (!container) return\n\t\tif (!store) return\n\n\t\tlet isCancelled = false\n\n\t\tconst tempElm = document.createElement('div')\n\t\tcontainer.appendChild(tempElm)\n\t\tcontainer.classList.add('tl-container', 'tl-theme__light')\n\n\t\tconst editor = new Editor({\n\t\t\tstore,\n\t\t\tshapeUtils: shapeUtilsWithDefaults,\n\t\t\tbindingUtils: bindingUtilsWithDefaults,\n\t\t\ttools: [],\n\t\t\tgetContainer: () => tempElm,\n\t\t\tlicenseKey,\n\t\t\tfontAssetUrls:
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n\tEditor,\n\tTLAnyBindingUtilConstructor,\n\tTLAnyShapeUtilConstructor,\n\tTLEditorSnapshot,\n\tTLImageExportOptions,\n\tTLPageId,\n\tTLStoreSnapshot,\n\tTLTextOptions,\n\tmergeArraysAndReplaceDefaults,\n\tuseShallowArrayIdentity,\n\tuseTLStore,\n} from '@tldraw/editor'\nimport { memo, useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { defaultBindingUtils } from './defaultBindingUtils'\nimport { defaultShapeUtils } from './defaultShapeUtils'\nimport { TLUiAssetUrlOverrides } from './ui/assetUrls'\nimport { useDefaultEditorAssetsWithOverrides } from './utils/static-assets/assetUrls'\nimport { defaultAddFontsFromNode, tipTapDefaultExtensions } from './utils/text/richText'\n\n/** @public */\nexport interface TldrawImageProps extends TLImageExportOptions {\n\t/**\n\t * The snapshot to display.\n\t */\n\tsnapshot: Partial<TLEditorSnapshot> | TLStoreSnapshot\n\n\t/**\n\t * The image format to use. Defaults to 'svg'.\n\t */\n\tformat?: 'svg' | 'png'\n\n\t/**\n\t * The page to display. Defaults to the first page.\n\t */\n\tpageId?: TLPageId\n\n\t/**\n\t * Additional shape utils to use.\n\t */\n\tshapeUtils?: readonly TLAnyShapeUtilConstructor[]\n\t/**\n\t * Additional binding utils to use.\n\t */\n\tbindingUtils?: readonly TLAnyBindingUtilConstructor[]\n\t/**\n\t * The license key.\n\t */\n\tlicenseKey?: string\n\t/**\n\t * Asset URL overrides.\n\t */\n\tassetUrls?: TLUiAssetUrlOverrides\n\t/**\n\t * Text options for the editor.\n\t */\n\ttextOptions?: TLTextOptions\n}\n\nconst defaultTextOptions = {\n\ttipTapConfig: {\n\t\textensions: tipTapDefaultExtensions,\n\t},\n\taddFontsFromNode: defaultAddFontsFromNode,\n}\n\n/**\n * A rendered SVG image of a Tldraw snapshot.\n *\n * @example\n * ```tsx\n * <TldrawImage\n * \tsnapshot={snapshot}\n * \tpageId={pageId}\n * \tbackground={false}\n * darkMode={true}\n * bounds={new Box(0,0,600,400)}\n * scale={1}\n * />\n * ```\n *\n * @public\n * @react\n */\nexport const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {\n\tconst [url, setUrl] = useState<string | null>(null)\n\tconst [container, setContainer] = useState<HTMLDivElement | null>(null)\n\n\tconst _shapeUtils = useShallowArrayIdentity(props.shapeUtils ?? [])\n\tconst shapeUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _shapeUtils, defaultShapeUtils),\n\t\t[_shapeUtils]\n\t)\n\tconst _bindingUtils = useShallowArrayIdentity(props.bindingUtils ?? [])\n\tconst bindingUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _bindingUtils, defaultBindingUtils),\n\t\t[_bindingUtils]\n\t)\n\tconst store = useTLStore({ snapshot: props.snapshot, shapeUtils: shapeUtilsWithDefaults })\n\n\tconst {\n\t\tpageId,\n\t\tbounds,\n\t\tscale,\n\t\tpixelRatio,\n\t\tbackground,\n\t\tpadding,\n\t\tdarkMode,\n\t\tpreserveAspectRatio,\n\t\tformat = 'svg',\n\t\tlicenseKey,\n\t\tassetUrls,\n\t\ttextOptions = defaultTextOptions,\n\t} = props\n\tconst assetUrlsWithOverrides = useDefaultEditorAssetsWithOverrides(assetUrls)\n\n\tuseLayoutEffect(() => {\n\t\tif (!container) return\n\t\tif (!store) return\n\n\t\tlet isCancelled = false\n\n\t\tconst tempElm = document.createElement('div')\n\t\tcontainer.appendChild(tempElm)\n\t\tcontainer.classList.add('tl-container', 'tl-theme__light')\n\n\t\tconst editor = new Editor({\n\t\t\tstore,\n\t\t\tshapeUtils: shapeUtilsWithDefaults,\n\t\t\tbindingUtils: bindingUtilsWithDefaults,\n\t\t\ttools: [],\n\t\t\tgetContainer: () => tempElm,\n\t\t\tlicenseKey,\n\t\t\tfontAssetUrls: assetUrlsWithOverrides.fonts,\n\t\t\ttextOptions,\n\t\t})\n\n\t\tif (pageId) editor.setCurrentPage(pageId)\n\n\t\tconst shapeIds = editor.getCurrentPageShapeIds()\n\n\t\tasync function setSvg() {\n\t\t\t// We have to wait for the fonts to load so that we can correctly measure text sizes\n\t\t\tawait editor.fonts.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)\n\t\t\tconst imageResult = await editor.toImage([...shapeIds], {\n\t\t\t\tbounds,\n\t\t\t\tscale,\n\t\t\t\tbackground,\n\t\t\t\tpadding,\n\t\t\t\tdarkMode,\n\t\t\t\tpreserveAspectRatio,\n\t\t\t\tformat,\n\t\t\t})\n\t\t\tif (!imageResult || isCancelled) return\n\n\t\t\tconst url = URL.createObjectURL(imageResult.blob)\n\t\t\tsetUrl(url)\n\n\t\t\teditor.dispose()\n\t\t}\n\n\t\tsetSvg()\n\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t}\n\t}, [\n\t\tformat,\n\t\tcontainer,\n\t\tstore,\n\t\tshapeUtilsWithDefaults,\n\t\tbindingUtilsWithDefaults,\n\t\tpageId,\n\t\tbounds,\n\t\tscale,\n\t\tbackground,\n\t\tpadding,\n\t\tdarkMode,\n\t\tpreserveAspectRatio,\n\t\tlicenseKey,\n\t\tpixelRatio,\n\t\tassetUrlsWithOverrides,\n\t\ttextOptions,\n\t])\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (url) URL.revokeObjectURL(url)\n\t\t}\n\t}, [url])\n\n\treturn (\n\t\t<div ref={setContainer} style={{ position: 'relative', width: '100%', height: '100%' }}>\n\t\t\t{url && (\n\t\t\t\t<img\n\t\t\t\t\tsrc={url}\n\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\tstyle={{ width: '100%', height: '100%' }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["TldrawImage", "url"]
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ function TldrawCropHandles({
|
|
|
11
11
|
const cropStrokeWidth = toDomPrecision(size / 3);
|
|
12
12
|
const offset = cropStrokeWidth / 2;
|
|
13
13
|
const msg = useTranslation();
|
|
14
|
-
return /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", children: [
|
|
14
|
+
return /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: [
|
|
15
15
|
/* @__PURE__ */ jsx(
|
|
16
16
|
"polyline",
|
|
17
17
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/canvas/TldrawCropHandles.tsx"],
|
|
4
|
-
"sourcesContent": ["import { toDomPrecision } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { useTranslation } from '../ui/hooks/useTranslation/useTranslation'\n\nexport interface TldrawCropHandlesProps {\n\tsize: number\n\twidth: number\n\theight: number\n\thideAlternateHandles: boolean\n}\n\nexport function TldrawCropHandles({\n\tsize,\n\twidth,\n\theight,\n\thideAlternateHandles,\n}: TldrawCropHandlesProps) {\n\tconst cropStrokeWidth = toDomPrecision(size / 3)\n\tconst offset = cropStrokeWidth / 2\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\">\n\t\t\t{/* Top left */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(size)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(size)},${toDomPrecision(0 - offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-left')}\n\t\t\t/>\n\t\t\t{/* Top */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(0 - offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(0 - offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top')}\n\t\t\t/>\n\t\t\t{/* Top right */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-right')}\n\t\t\t/>\n\t\t\t{/* Right */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width + offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(width + offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.right')}\n\t\t\t/>\n\t\t\t{/* Bottom right */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height - size)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(height + offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-right')}\n\t\t\t/>\n\t\t\t{/* Bottom */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(height + offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(height + offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom')}\n\t\t\t/>\n\t\t\t{/* Bottom left */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 + size)},${toDomPrecision(height + offset)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height - size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-left')}\n\t\t\t/>\n\t\t\t{/* Left */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(0 - offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(0 - offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.left')}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
-
"mappings": "AAsBE,SAEC,KAFD;AAtBF,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AACvB,SAAS,sBAAsB;AASxB,SAAS,kBAAkB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,kBAAkB,eAAe,OAAO,CAAC;AAC/C,QAAM,SAAS,kBAAkB;AACjC,QAAM,MAAM,eAAe;AAE3B,SACC,qBAAC,SAAI,WAAU,
|
|
4
|
+
"sourcesContent": ["import { toDomPrecision } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { useTranslation } from '../ui/hooks/useTranslation/useTranslation'\n\nexport interface TldrawCropHandlesProps {\n\tsize: number\n\twidth: number\n\theight: number\n\thideAlternateHandles: boolean\n}\n\nexport function TldrawCropHandles({\n\tsize,\n\twidth,\n\theight,\n\thideAlternateHandles,\n}: TldrawCropHandlesProps) {\n\tconst cropStrokeWidth = toDomPrecision(size / 3)\n\tconst offset = cropStrokeWidth / 2\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t{/* Top left */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(size)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(size)},${toDomPrecision(0 - offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-left')}\n\t\t\t/>\n\t\t\t{/* Top */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(0 - offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(0 - offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top')}\n\t\t\t/>\n\t\t\t{/* Top right */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-right')}\n\t\t\t/>\n\t\t\t{/* Right */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width + offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(width + offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.right')}\n\t\t\t/>\n\t\t\t{/* Bottom right */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height - size)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(height + offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-right')}\n\t\t\t/>\n\t\t\t{/* Bottom */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(height + offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(height + offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom')}\n\t\t\t/>\n\t\t\t{/* Bottom left */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 + size)},${toDomPrecision(height + offset)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height - size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-left')}\n\t\t\t/>\n\t\t\t{/* Left */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(0 - offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(0 - offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.left')}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
+
"mappings": "AAsBE,SAEC,KAFD;AAtBF,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AACvB,SAAS,sBAAsB;AASxB,SAAS,kBAAkB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,kBAAkB,eAAe,OAAO,CAAC;AAC/C,QAAM,SAAS,kBAAkB;AACjC,QAAM,MAAM,eAAe;AAE3B,SACC,qBAAC,SAAI,WAAU,qBAAoB,eAAY,QAE9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,QAAQ;AAAA,QACJ,eAAe,IAAI,MAAM,CAAC,IAAI,eAAe,IAAI,CAAC;AAAA,QAClD,eAAe,IAAI,MAAM,CAAC,IAAI,eAAe,IAAI,MAAM,CAAC;AAAA,QACxD,eAAe,IAAI,CAAC,IAAI,eAAe,IAAI,MAAM,CAAC;AAAA,QACtD,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,IAAI,sBAAsB;AAAA;AAAA,IACvC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,8BAA8B;AAAA,UACnD,aAAa;AAAA,QACd,CAAC;AAAA,QACD,IAAI,eAAe,QAAQ,IAAI,IAAI;AAAA,QACnC,IAAI,eAAe,IAAI,MAAM;AAAA,QAC7B,IAAI,eAAe,QAAQ,IAAI,IAAI;AAAA,QACnC,IAAI,eAAe,IAAI,MAAM;AAAA,QAC7B,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,IAAI,iBAAiB;AAAA;AAAA,IAClC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,yBAAyB;AAAA,UAC9C,aAAa;AAAA,QACd,CAAC;AAAA,QACD,QAAQ;AAAA,QACJ,eAAe,QAAQ,IAAI,CAAC,IAAI,eAAe,IAAI,MAAM,CAAC;AAAA,QAC1D,eAAe,QAAQ,MAAM,CAAC,IAAI,eAAe,IAAI,MAAM,CAAC;AAAA,QAC5D,eAAe,QAAQ,MAAM,CAAC,IAAI,eAAe,IAAI,CAAC;AAAA,QAC1D,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,IAAI,uBAAuB;AAAA;AAAA,IACxC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,8BAA8B;AAAA,UACnD,aAAa;AAAA,QACd,CAAC;AAAA,QACD,IAAI,eAAe,QAAQ,MAAM;AAAA,QACjC,IAAI,eAAe,SAAS,IAAI,IAAI;AAAA,QACpC,IAAI,eAAe,QAAQ,MAAM;AAAA,QACjC,IAAI,eAAe,SAAS,IAAI,IAAI;AAAA,QACpC,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,IAAI,mBAAmB;AAAA;AAAA,IACpC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,QAAQ;AAAA,QACJ,eAAe,QAAQ,MAAM,CAAC,IAAI,eAAe,SAAS,IAAI,CAAC;AAAA,QAC/D,eAAe,QAAQ,MAAM,CAAC,IAAI,eAAe,SAAS,MAAM,CAAC;AAAA,QACjE,eAAe,QAAQ,IAAI,CAAC,IAAI,eAAe,SAAS,MAAM,CAAC;AAAA,QACnE,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,IAAI,0BAA0B;AAAA;AAAA,IAC3C;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,8BAA8B;AAAA,UACnD,aAAa;AAAA,QACd,CAAC;AAAA,QACD,IAAI,eAAe,QAAQ,IAAI,IAAI;AAAA,QACnC,IAAI,eAAe,SAAS,MAAM;AAAA,QAClC,IAAI,eAAe,QAAQ,IAAI,IAAI;AAAA,QACnC,IAAI,eAAe,SAAS,MAAM;AAAA,QAClC,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,IAAI,oBAAoB;AAAA;AAAA,IACrC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,yBAAyB;AAAA,UAC9C,aAAa;AAAA,QACd,CAAC;AAAA,QACD,QAAQ;AAAA,QACJ,eAAe,IAAI,IAAI,CAAC,IAAI,eAAe,SAAS,MAAM,CAAC;AAAA,QAC3D,eAAe,IAAI,MAAM,CAAC,IAAI,eAAe,SAAS,MAAM,CAAC;AAAA,QAC7D,eAAe,IAAI,MAAM,CAAC,IAAI,eAAe,SAAS,IAAI,CAAC;AAAA,QAC/D,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,IAAI,yBAAyB;AAAA;AAAA,IAC1C;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,8BAA8B;AAAA,UACnD,aAAa;AAAA,QACd,CAAC;AAAA,QACD,IAAI,eAAe,IAAI,MAAM;AAAA,QAC7B,IAAI,eAAe,SAAS,IAAI,IAAI;AAAA,QACpC,IAAI,eAAe,IAAI,MAAM;AAAA,QAC7B,IAAI,eAAe,SAAS,IAAI,IAAI;AAAA,QACpC,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,IAAI,kBAAkB;AAAA;AAAA,IACnC;AAAA,KACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ function TldrawHandles({ children }) {
|
|
|
17
17
|
[editor]
|
|
18
18
|
);
|
|
19
19
|
if (!shouldDisplayHandles) return null;
|
|
20
|
-
return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", children });
|
|
20
|
+
return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", "aria-hidden": "true", children });
|
|
21
21
|
}
|
|
22
22
|
export {
|
|
23
23
|
TldrawHandles
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/canvas/TldrawHandles.tsx"],
|
|
4
|
-
"sourcesContent": ["import { TLHandlesProps, useEditor, useValue } from '@tldraw/editor'\n\n/** @public @react */\nexport function TldrawHandles({ children }: TLHandlesProps) {\n\tconst editor = useEditor()\n\n\t// todo: maybe display note shape handles here?\n\n\tconst shouldDisplayHandles = useValue(\n\t\t'shouldDisplayHandles',\n\t\t() => {\n\t\t\tif (editor.isInAny('select.idle', 'select.pointing_handle', 'select.pointing_shape')) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (editor.isInAny('select.editing_shape')) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\t\treturn onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'note')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldDisplayHandles) return null\n\n\treturn <svg className=\"tl-user-handles tl-overlays__item\"
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { TLHandlesProps, useEditor, useValue } from '@tldraw/editor'\n\n/** @public @react */\nexport function TldrawHandles({ children }: TLHandlesProps) {\n\tconst editor = useEditor()\n\n\t// todo: maybe display note shape handles here?\n\n\tconst shouldDisplayHandles = useValue(\n\t\t'shouldDisplayHandles',\n\t\t() => {\n\t\t\tif (editor.isInAny('select.idle', 'select.pointing_handle', 'select.pointing_shape')) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (editor.isInAny('select.editing_shape')) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\t\treturn onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'note')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldDisplayHandles) return null\n\n\treturn (\n\t\t<svg className=\"tl-user-handles tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t{children}\n\t\t</svg>\n\t)\n}\n"],
|
|
5
|
+
"mappings": "AA0BE;AA1BF,SAAyB,WAAW,gBAAgB;AAG7C,SAAS,cAAc,EAAE,SAAS,GAAmB;AAC3D,QAAM,SAAS,UAAU;AAIzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,eAAe,0BAA0B,uBAAuB,GAAG;AACrF,eAAO;AAAA,MACR;AACA,UAAI,OAAO,QAAQ,sBAAsB,GAAG;AAC3C,cAAM,oBAAoB,OAAO,qBAAqB;AACtD,eAAO,qBAAqB,OAAO,cAAc,mBAAmB,MAAM;AAAA,MAC3E;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SACC,oBAAC,SAAI,WAAU,qCAAoC,eAAY,QAC7D,UACF;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,7 +35,7 @@ function TldrawArrowHints() {
|
|
|
35
35
|
const showEdgeHints = !isExact && arrowKind === "elbow";
|
|
36
36
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
37
37
|
ShapeIndicator && /* @__PURE__ */ jsx(ShapeIndicator, { shapeId: targetInfo.target.id }),
|
|
38
|
-
showEdgeHints && /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", children: [
|
|
38
|
+
showEdgeHints && /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: [
|
|
39
39
|
/* @__PURE__ */ jsx(
|
|
40
40
|
"circle",
|
|
41
41
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/canvas/TldrawOverlays.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'\nimport { getArrowTargetState } from '../shapes/arrow/arrowTargetState'\nimport { DraggingHandle } from '../tools/SelectTool/childStates/DraggingHandle'\nimport { PointingHandle } from '../tools/SelectTool/childStates/PointingHandle'\n\n/** @public @react */\nexport function TldrawOverlays() {\n\tconst editor = useEditor()\n\n\tconst shouldShowArrowHints = useValue(\n\t\t'should show arrow hints',\n\t\t() => {\n\t\t\tif (editor.isInAny('arrow.idle', 'arrow.pointing')) return true\n\n\t\t\tif (editor.isIn('select.pointing_handle')) {\n\t\t\t\tconst node: PointingHandle = editor.getStateDescendant('select.pointing_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (editor.isIn('select.dragging_handle')) {\n\t\t\t\tconst node: DraggingHandle = editor.getStateDescendant('select.dragging_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldShowArrowHints) return null\n\n\treturn <TldrawArrowHints />\n}\n\n/** @public @react */\nexport function TldrawArrowHints() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst targetInfo = useValue('arrow target info', () => getArrowTargetState(editor), [editor])\n\n\tif (!targetInfo) return null\n\n\tconst { handlesInPageSpace, snap, anchorInPageSpace, arrowKind, isExact, isPrecise } = targetInfo\n\n\tconst showEdgeHints = !isExact && arrowKind === 'elbow'\n\n\treturn (\n\t\t<>\n\t\t\t{ShapeIndicator && <ShapeIndicator shapeId={targetInfo.target.id} />}\n\n\t\t\t{showEdgeHints && (\n\t\t\t\t<svg className=\"tl-overlays__item\">\n\t\t\t\t\t<circle\n\t\t\t\t\t\tcx={anchorInPageSpace.x}\n\t\t\t\t\t\tcy={anchorInPageSpace.y}\n\t\t\t\t\t\tclassName={`tl-arrow-hint-snap tl-arrow-hint-snap__${isPrecise ? (snap ?? 'none') : 'none'}`}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{Object.entries(handlesInPageSpace).map(([side, handle]) => {\n\t\t\t\t\t\tif (!handle.isEnabled) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tkey={side}\n\t\t\t\t\t\t\t\tcx={handle.point.x}\n\t\t\t\t\t\t\t\tcy={handle.point.y}\n\t\t\t\t\t\t\t\tclassName=\"tl-arrow-hint-handle\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
|
|
5
|
-
"mappings": "AAyCQ,SAiBN,UAjBM,KAqBJ,YArBI;AAzCR,SAAS,WAAW,qBAAqB,gBAAgB;AACzD,SAAS,2BAA2B;AAK7B,SAAS,iBAAiB;AAChC,QAAM,SAAS,UAAU;AAEzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,cAAc,gBAAgB,EAAG,QAAO;AAE3D,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SAAO,oBAAC,oBAAiB;AAC1B;AAGO,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAE/C,QAAM,aAAa,SAAS,qBAAqB,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAE5F,MAAI,CAAC,WAAY,QAAO;AAExB,QAAM,EAAE,oBAAoB,MAAM,mBAAmB,WAAW,SAAS,UAAU,IAAI;AAEvF,QAAM,gBAAgB,CAAC,WAAW,cAAc;AAEhD,SACC,iCACE;AAAA,sBAAkB,oBAAC,kBAAe,SAAS,WAAW,OAAO,IAAI;AAAA,IAEjE,iBACA,qBAAC,SAAI,WAAU,
|
|
4
|
+
"sourcesContent": ["import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'\nimport { getArrowTargetState } from '../shapes/arrow/arrowTargetState'\nimport { DraggingHandle } from '../tools/SelectTool/childStates/DraggingHandle'\nimport { PointingHandle } from '../tools/SelectTool/childStates/PointingHandle'\n\n/** @public @react */\nexport function TldrawOverlays() {\n\tconst editor = useEditor()\n\n\tconst shouldShowArrowHints = useValue(\n\t\t'should show arrow hints',\n\t\t() => {\n\t\t\tif (editor.isInAny('arrow.idle', 'arrow.pointing')) return true\n\n\t\t\tif (editor.isIn('select.pointing_handle')) {\n\t\t\t\tconst node: PointingHandle = editor.getStateDescendant('select.pointing_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (editor.isIn('select.dragging_handle')) {\n\t\t\t\tconst node: DraggingHandle = editor.getStateDescendant('select.dragging_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldShowArrowHints) return null\n\n\treturn <TldrawArrowHints />\n}\n\n/** @public @react */\nexport function TldrawArrowHints() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst targetInfo = useValue('arrow target info', () => getArrowTargetState(editor), [editor])\n\n\tif (!targetInfo) return null\n\n\tconst { handlesInPageSpace, snap, anchorInPageSpace, arrowKind, isExact, isPrecise } = targetInfo\n\n\tconst showEdgeHints = !isExact && arrowKind === 'elbow'\n\n\treturn (\n\t\t<>\n\t\t\t{ShapeIndicator && <ShapeIndicator shapeId={targetInfo.target.id} />}\n\n\t\t\t{showEdgeHints && (\n\t\t\t\t<svg className=\"tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t\t\t<circle\n\t\t\t\t\t\tcx={anchorInPageSpace.x}\n\t\t\t\t\t\tcy={anchorInPageSpace.y}\n\t\t\t\t\t\tclassName={`tl-arrow-hint-snap tl-arrow-hint-snap__${isPrecise ? (snap ?? 'none') : 'none'}`}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{Object.entries(handlesInPageSpace).map(([side, handle]) => {\n\t\t\t\t\t\tif (!handle.isEnabled) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tkey={side}\n\t\t\t\t\t\t\t\tcx={handle.point.x}\n\t\t\t\t\t\t\t\tcy={handle.point.y}\n\t\t\t\t\t\t\t\tclassName=\"tl-arrow-hint-handle\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
|
|
5
|
+
"mappings": "AAyCQ,SAiBN,UAjBM,KAqBJ,YArBI;AAzCR,SAAS,WAAW,qBAAqB,gBAAgB;AACzD,SAAS,2BAA2B;AAK7B,SAAS,iBAAiB;AAChC,QAAM,SAAS,UAAU;AAEzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,cAAc,gBAAgB,EAAG,QAAO;AAE3D,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SAAO,oBAAC,oBAAiB;AAC1B;AAGO,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAE/C,QAAM,aAAa,SAAS,qBAAqB,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAE5F,MAAI,CAAC,WAAY,QAAO;AAExB,QAAM,EAAE,oBAAoB,MAAM,mBAAmB,WAAW,SAAS,UAAU,IAAI;AAEvF,QAAM,gBAAgB,CAAC,WAAW,cAAc;AAEhD,SACC,iCACE;AAAA,sBAAkB,oBAAC,kBAAe,SAAS,WAAW,OAAO,IAAI;AAAA,IAEjE,iBACA,qBAAC,SAAI,WAAU,qBAAoB,eAAY,QAC9C;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,kBAAkB;AAAA,UACtB,IAAI,kBAAkB;AAAA,UACtB,WAAW,0CAA0C,YAAa,QAAQ,SAAU,MAAM;AAAA;AAAA,MAC3F;AAAA,MAEC,OAAO,QAAQ,kBAAkB,EAAE,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM;AAC3D,YAAI,CAAC,OAAO,UAAW,QAAO;AAC9B,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAI,OAAO,MAAM;AAAA,YACjB,IAAI,OAAO,MAAM;AAAA,YACjB,WAAU;AAAA;AAAA,UAHL;AAAA,QAIN;AAAA,MAEF,CAAC;AAAA,OACF;AAAA,KAEF;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|