tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/test/ui/keyboardShortcuts.test.tsx

@@ -0,0 +1,266 @@
+import { act } from '@testing-library/react'
+import { createShapeId, Editor } from '@tldraw/editor'
+import { useEffect } from 'react'
+import { Tldraw } from '../../lib/Tldraw'
+import { DefaultKeyboardShortcutsDialogContent } from '../../lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent'
+import { TldrawUiMenuContextProvider } from '../../lib/ui/components/primitives/menus/TldrawUiMenuContext'
+import { useActions } from '../../lib/ui/context/actions'
+import {
+	getHotkeysStringFromKbd,
+	ParsedKbd,
+	parseKbd,
+} from '../../lib/ui/hooks/useKeyboardShortcuts'
+import { useTools } from '../../lib/ui/hooks/useTools'
+import {
+	renderTldrawComponent,
+	renderTldrawComponentWithEditor,
+} from '../testutils/renderTldrawComponent'
+
+// These kbds are intentionally not registered in the shortcut registry, they're handled by
+// useNativeClipboardEvents / the upload asset action instead. See SKIP_KBDS in useKeyboardShortcuts.
+const SKIP_KBDS = ['copy', 'cut', 'paste', 'asset']
+
+// Shortcuts that have a kbd but intentionally don't get their own row in the default keyboard
+// shortcuts dialog. If you add a shortcut that should be visible to users, add it to
+// DefaultKeyboardShortcutsDialogContent instead of this list.
+const NOT_IN_SHORTCUTS_DIALOG = new Set([
+	// Opening the shortcuts dialog is covered by the a11y "Open keyboard shortcuts" row.
+	'open-kbd-shortcuts',
+	// Covered by the a11y "Open context menu" row.
+	'a11y-open-context-menu',
+	// Cursor-targeted variants of zoom in/out that share a label with the rows already shown.
+	'zoom-in-on-cursor',
+	'zoom-out-on-cursor',
+	// Rotation is covered by the a11y "Rotate shape" rows.
+	'rotate-cw',
+	'rotate-ccw',
+	// Cursor-targeted paste variants of the paste row already shown.
+	'paste-at-cursor',
+	'paste-plain-text-at-cursor',
+	// Style-picking shortcuts that aren't surfaced in the dialog.
+	'select-white-color',
+	'select-fill-fill',
+	'select-fill-lined-fill',
+	// Re-selects the last geo tool; covered by the rectangle/ellipse tool rows.
+	'select-geo-tool',
+	// Page navigation shortcuts without dialog labels.
+	'change-page-prev',
+	'change-page-next',
+	// Only rendered when collaboration UI is enabled, which is off in this test.
+	'open-cursor-chat',
+])
+
+interface ShortcutEntry {
+	id: string
+	kbd: string
+}
+
+function serializeParsedKbd(parsed: ParsedKbd): string {
+	const modifiers: string[] = []
+	if (parsed.meta) modifiers.push('meta')
+	if (parsed.ctrl) modifiers.push('ctrl')
+	if (parsed.alt) modifiers.push('alt')
+	if (parsed.shift) modifiers.push('shift')
+	return [...modifiers, parsed.key].join('+')
+}
+
+export function getKbdKeyCombos(kbd: string): string[] {
+	return parseKbd(getHotkeysStringFromKbd(kbd)).map(serializeParsedKbd)
+}
+
+function ShortcutCapturer({ onCapture }: { onCapture(entries: ShortcutEntry[]): void }) {
+	const actions = useActions()
+	const tools = useTools()
+
+	useEffect(() => {
+		const entries: ShortcutEntry[] = []
+		for (const action of Object.values(actions)) {
+			if (!action.kbd || SKIP_KBDS.includes(action.id)) continue
+			entries.push({ id: `action.${action.id}`, kbd: action.kbd })
+		}
+		for (const tool of Object.values(tools)) {
+			if (!tool.kbd || SKIP_KBDS.includes(tool.id)) continue
+			entries.push({ id: `tool.${tool.id}`, kbd: tool.kbd })
+		}
+		onCapture(entries)
+	}, [actions, tools, onCapture])
+
+	return null
+}
+
+async function getDefaultShortcutEntries() {
+	let captured: ShortcutEntry[] = []
+	await renderTldrawComponent(
+		<Tldraw>
+			<ShortcutCapturer onCapture={(entries) => (captured = entries)} />
+		</Tldraw>,
+		{ waitForPatterns: false }
+	)
+	return captured
+}
+
+describe('default keyboard shortcuts', () => {
+	it('does not bind the same key combo to more than one action or tool', async () => {
+		const entries = await getDefaultShortcutEntries()
+
+		// Sanity check: we actually captured the default actions/tools.
+		expect(entries.length).toBeGreaterThan(0)
+
+		const comboToIds = new Map<string, string[]>()
+		for (const entry of entries) {
+			for (const combo of getKbdKeyCombos(entry.kbd)) {
+				const ids = comboToIds.get(combo) ?? []
+				ids.push(entry.id)
+				comboToIds.set(combo, ids)
+			}
+		}
+
+		const collisions = [...comboToIds.entries()]
+			.filter(([, ids]) => ids.length > 1)
+			.map(([combo, ids]) => `${combo} -> ${ids.join(', ')}`)
+
+		expect(collisions).toEqual([])
+	})
+
+	it('lists every shortcut in the keyboard shortcuts dialog (or marks it as intentionally omitted)', async () => {
+		let entries: ShortcutEntry[] = []
+		const rendered = await renderTldrawComponent(
+			<Tldraw>
+				<ShortcutCapturer onCapture={(captured) => (entries = captured)} />
+				<TldrawUiMenuContextProvider type="keyboard-shortcuts" sourceId="kbd">
+					<DefaultKeyboardShortcutsDialogContent />
+				</TldrawUiMenuContextProvider>
+			</Tldraw>,
+			{ waitForPatterns: false }
+		)
+
+		// The raw ids (without the `action.`/`tool.` prefix) rendered as rows in the dialog.
+		const idsInDialog = new Set(
+			[...rendered.container.querySelectorAll('[data-testid^="kbd."]')].map((el) =>
+				el.getAttribute('data-testid')!.slice('kbd.'.length)
+			)
+		)
+		expect(idsInDialog.size).toBeGreaterThan(0)
+
+		const missing = entries
+			.map((entry) => entry.id.replace(/^(action|tool)\./, ''))
+			.filter((id) => !idsInDialog.has(id) && !NOT_IN_SHORTCUTS_DIALOG.has(id))
+
+		expect(missing).toEqual([])
+	})
+})
+
+async function setupFocusedEditor() {
+	const { editor } = await renderTldrawComponentWithEditor(
+		(onMount) => <Tldraw onMount={onMount} />,
+		{ waitForPatterns: false }
+	)
+
+	// Shortcuts only register while the editor is focused.
+	act(() => {
+		editor.updateInstanceState({ isFocused: true })
+	})
+
+	return { editor }
+}
+
+function keydown(editor: Editor, init: KeyboardEventInit) {
+	act(() => {
+		editor
+			.getContainerDocument()
+			.body.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }))
+	})
+}
+
+function keyup(editor: Editor, init: KeyboardEventInit) {
+	act(() => {
+		editor
+			.getContainerDocument()
+			.body.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, ...init }))
+	})
+}
+
+describe('keyboard shortcuts with a held key', () => {
+	it('fires the plain shortcut on a fresh key press', async () => {
+		const { editor } = await setupFocusedEditor()
+		expect(editor.getInstanceState().isToolLocked).toBe(false)
+
+		// Plain `q` toggles tool lock.
+		keydown(editor, { key: 'q', code: 'KeyQ' })
+		expect(editor.getInstanceState().isToolLocked).toBe(true)
+	})
+
+	it('does not fall back to the plain shortcut when a modifier is released mid-hold', async () => {
+		const { editor } = await setupFocusedEditor()
+		expect(editor.getInstanceState().isToolLocked).toBe(false)
+
+		// Press shift+q (copy-hovered-styles), which does not toggle tool lock.
+		keydown(editor, { key: 'q', code: 'KeyQ', shiftKey: true })
+		expect(editor.getInstanceState().isToolLocked).toBe(false)
+
+		// Release shift but keep holding q. The auto-repeat keydown events should not start
+		// firing the adjacent plain `q` shortcut (toggle tool lock).
+		keydown(editor, { key: 'q', code: 'KeyQ', shiftKey: false, repeat: true })
+		keydown(editor, { key: 'q', code: 'KeyQ', shiftKey: false, repeat: true })
+		expect(editor.getInstanceState().isToolLocked).toBe(false)
+	})
+
+	it('fires the plain shortcut again after the held key is released and pressed fresh', async () => {
+		const { editor } = await setupFocusedEditor()
+
+		keydown(editor, { key: 'q', code: 'KeyQ', shiftKey: true })
+		keydown(editor, { key: 'q', code: 'KeyQ', shiftKey: false, repeat: true })
+		expect(editor.getInstanceState().isToolLocked).toBe(false)
+
+		// Releasing the physical key clears the held-key tracking, so a fresh press works again.
+		keyup(editor, { key: 'q', code: 'KeyQ' })
+		keydown(editor, { key: 'q', code: 'KeyQ' })
+		expect(editor.getInstanceState().isToolLocked).toBe(true)
+	})
+
+	it('releases the held key even when the keyup lands on a text input', async () => {
+		const { editor } = await setupFocusedEditor()
+
+		keydown(editor, { key: 'q', code: 'KeyQ', shiftKey: true })
+		expect(editor.getInstanceState().isToolLocked).toBe(false)
+
+		// The key is released while focus is inside a text input, so the keyup is otherwise
+		// skipped. It must still clear the held-key tracking.
+		const body = editor.getContainerDocument().body
+		const input = editor.getContainerDocument().createElement('input')
+		body.appendChild(input)
+		act(() => {
+			input.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, key: 'q', code: 'KeyQ' }))
+		})
+		body.removeChild(input)
+
+		// A fresh plain `q` press now works rather than being blocked by a stale entry.
+		keydown(editor, { key: 'q', code: 'KeyQ' })
+		expect(editor.getInstanceState().isToolLocked).toBe(true)
+	})
+
+	// Regression test for #9099: redo (cmd+shift+z) stopped firing after an undo (cmd+z) on
+	// macOS, where the browser swallows the `z` keyup while cmd stays held. The held-key
+	// tracking from #9099 never got cleared, so the stale undo registration blocked the redo
+	// on the same physical `KeyZ`. A fresh keypress must always be free to trigger its match.
+	it('fires redo after undo on the same physical key when the keyup is swallowed (cmd held)', async () => {
+		const { editor } = await setupFocusedEditor()
+
+		const id = createShapeId()
+		act(() => {
+			editor.markHistoryStoppingPoint()
+			editor.createShape({ id, type: 'geo', x: 0, y: 0 })
+		})
+		expect(editor.getCurrentPageShapeIds().has(id)).toBe(true)
+
+		// cmd+z undoes the shape creation. On macOS the `z` keyup is never delivered while cmd
+		// stays held, so we deliberately don't dispatch it.
+		keydown(editor, { key: 'z', code: 'KeyZ', metaKey: true })
+		expect(editor.getCurrentPageShapeIds().has(id)).toBe(false)
+
+		// Adding shift and pressing z again is a fresh keypress (not an auto-repeat), so it must
+		// trigger redo rather than being blocked by the stale undo registration on `KeyZ`.
+		keydown(editor, { key: 'z', code: 'KeyZ', metaKey: true, shiftKey: true })
+		expect(editor.getCurrentPageShapeIds().has(id)).toBe(true)
+	})
+})

package/tldraw.css

@@ -186,6 +186,7 @@
 	--tl-color-text-0: hsl(0, 0%, 11%);
 	--tl-color-text-1: hsl(0, 0%, 18%);
 	--tl-color-text-3: hsl(204, 4%, 45%);
+	--tl-color-text-disabled: hsl(204, 4%, 55%);
 	--tl-color-text-shadow: hsl(0, 0%, 100%);
 	--tl-color-text-highlight: hsl(52, 100%, 50%);
 	--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
@@ -240,6 +241,7 @@
 	--tl-color-text-0: hsl(0, 9%, 94%);
 	--tl-color-text-1: hsl(0, 0%, 85%);
 	--tl-color-text-3: hsl(204, 4%, 75%);
+	--tl-color-text-disabled: hsl(204, 4%, 50%);
 	--tl-color-text-shadow: hsl(210, 13%, 18%);
 	--tl-color-text-highlight: hsl(52, 100%, 41%);
 	--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
@@ -766,17 +768,17 @@ input,
 .tl-rich-text ol {
 	text-align: left;
 	margin: 0;
-	padding-left: 3.25ch;
+	padding-left: 1.625ch;
 	/* Some resets, like Tailwind, nix the list styling. */
 	list-style: revert;
 }
 
 .tl-rich-text ol:has(> li:nth-child(10)) {
-	padding-left: 4.25ch;
+	padding-left: 2.625ch;
 }
 
 .tl-rich-text ol:has(> li:nth-child(100)) {
-	padding-left: 5.25ch;
+	padding-left: 3.625ch;
 }
 
 .tl-rich-text h1,
@@ -815,6 +817,7 @@ input,
 .tl-theme__dark .tl-rich-text mark {
 	background-color: var(--tl-color-text-highlight);
 	color: currentColor;
+	text-shadow: none;
 }
 
 @supports (color: color(display-p3 1 1 1)) {
@@ -987,6 +990,15 @@ input,
 	color: var(--tl-color-text-1);
 }
 
+.tl-content-slot {
+	position: absolute;
+	inset: 0px;
+	height: 100%;
+	width: 100%;
+	pointer-events: none;
+	transform-origin: top left;
+}
+
 /* -------------------- Group shape ------------------ */
 
 .tl-group {
@@ -1573,9 +1585,8 @@ it from receiving any pointer events or affecting the cursor. */
 	 * (which creates its own stacking context at z-index 300), so their
 	 * z-indices are relative to the layout, not the container.
 	 *
-	 * cursor and following-indicator are rendered inside canvas-in-front
-	 * (stacking context at z-index 250), so their z-indices are relative
-	 * to that context.
+	 * cursor is rendered inside canvas-in-front (stacking context at
+	 * z-index 250), so their z-indices are relative to that context.
 	 */
 	--tl-layer-above: 1;
 	--tl-layer-focused-input: 10;
@@ -1585,7 +1596,6 @@ it from receiving any pointer events or affecting the cursor. */
 	--tl-layer-toasts: 650;
 	--tl-layer-cursor: 700;
 	--tl-layer-header-footer: 999;
-	--tl-layer-following-indicator: 1000;
 }
 
 /* Button */
@@ -1615,14 +1625,14 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-button:disabled,
 .tlui-button[data-disabled] {
-	color: var(--tl-color-text-3);
+	color: var(--tl-color-text-disabled);
 	text-shadow: none;
 	cursor: default;
 }
 
 .tlui-button:disabled .tlui-kbd,
 .tlui-button[data-disabled] .tlui-kbd {
-	color: var(--tl-color-text-3);
+	color: var(--tl-color-text-disabled);
 }
 
 .tlui-button > * {
@@ -1991,6 +2001,11 @@ it from receiving any pointer events or affecting the cursor. */
 	height: 15px;
 }
 
+.tlui-icon__tiny {
+	width: 12px;
+	height: 12px;
+}
+
 /* --------------------- Slider --------------------- */
 
 .tlui-slider__container {
@@ -2604,7 +2619,7 @@ it from receiving any pointer events or affecting the cursor. */
 	left: 8px;
 }
 
-/* 
+/*
  * focusing skip-to-main-content hide top ui buttons to make sure we avoid
  * z-index clashes on hover (see issue #8328)
  */
@@ -3251,8 +3266,17 @@ tldraw? probably.
 	height: 100%;
 	z-index: var(--tl-layer-canvas-overlays);
 	background-color: var(--tl-color-overlay);
-	pointer-events: all;
 	animation: tl-fade-in 0.12s ease-out;
+}
+
+.tlui-dialog__positioner {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	z-index: var(--tl-layer-canvas-overlays);
+	pointer-events: all;
 	display: grid;
 	place-items: center;
 	overflow-y: auto;
@@ -3742,7 +3766,6 @@ tldraw? probably.
 	inset: 0px;
 	border-width: 2px;
 	border-style: solid;
-	z-index: var(--tl-layer-following-indicator);
 	pointer-events: none;
 }
 

package/dist-cjs/lib/shapes/shared/freehand/setStrokePointRadii.js

@@ -1,100 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var setStrokePointRadii_exports = {};
-__export(setStrokePointRadii_exports, {
-  setStrokePointRadii: () => setStrokePointRadii
-});
-module.exports = __toCommonJS(setStrokePointRadii_exports);
-var import_editor = require("@tldraw/editor");
-const { min } = Math;
-const RATE_OF_PRESSURE_CHANGE = 0.275;
-function setStrokePointRadii(strokePoints, options) {
-  const {
-    size = 16,
-    thinning = 0.5,
-    simulatePressure = true,
-    easing = (t) => t,
-    start = {},
-    end = {}
-  } = options;
-  const { easing: taperStartEase = import_editor.EASINGS.easeOutQuad } = start;
-  const { easing: taperEndEase = import_editor.EASINGS.easeOutCubic } = end;
-  const totalLength = strokePoints[strokePoints.length - 1].runningLength;
-  let firstRadius;
-  let prevPressure = strokePoints[0].pressure;
-  let strokePoint;
-  if (!simulatePressure && totalLength < size) {
-    const max = strokePoints.reduce((max2, curr) => Math.max(max2, curr.pressure), 0.5);
-    strokePoints.forEach((sp) => {
-      sp.pressure = max;
-      sp.radius = size * easing(0.5 - thinning * (0.5 - sp.pressure));
-    });
-    return strokePoints;
-  } else {
-    let p;
-    for (let i = 0, n = strokePoints.length; i < n; i++) {
-      strokePoint = strokePoints[i];
-      if (strokePoint.runningLength > size * 5) break;
-      const sp = min(1, strokePoint.distance / size);
-      if (simulatePressure) {
-        const rp = min(1, 1 - sp);
-        p = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE));
-      } else {
-        p = min(1, prevPressure + (strokePoint.pressure - prevPressure) * 0.5);
-      }
-      prevPressure = prevPressure + (p - prevPressure) * 0.5;
-    }
-    for (let i = 0; i < strokePoints.length; i++) {
-      strokePoint = strokePoints[i];
-      if (thinning) {
-        let { pressure } = strokePoint;
-        const sp = min(1, strokePoint.distance / size);
-        if (simulatePressure) {
-          const rp = min(1, 1 - sp);
-          pressure = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE));
-        } else {
-          pressure = min(
-            1,
-            prevPressure + (pressure - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE)
-          );
-        }
-        strokePoint.radius = size * easing(0.5 - thinning * (0.5 - pressure));
-        prevPressure = pressure;
-      } else {
-        strokePoint.radius = size / 2;
-      }
-      if (firstRadius === void 0) {
-        firstRadius = strokePoint.radius;
-      }
-    }
-  }
-  const taperStart = start.taper === false ? 0 : start.taper === true ? Math.max(size, totalLength) : start.taper;
-  const taperEnd = end.taper === false ? 0 : end.taper === true ? Math.max(size, totalLength) : end.taper;
-  if (taperStart || taperEnd) {
-    for (let i = 0; i < strokePoints.length; i++) {
-      strokePoint = strokePoints[i];
-      const { runningLength } = strokePoint;
-      const ts = runningLength < taperStart ? taperStartEase(runningLength / taperStart) : 1;
-      const te = totalLength - runningLength < taperEnd ? taperEndEase((totalLength - runningLength) / taperEnd) : 1;
-      strokePoint.radius = Math.max(0.01, strokePoint.radius * Math.min(ts, te));
-    }
-  }
-  return strokePoints;
-}
-//# sourceMappingURL=setStrokePointRadii.js.map

package/dist-cjs/lib/shapes/shared/freehand/setStrokePointRadii.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/lib/shapes/shared/freehand/setStrokePointRadii.ts"],
-  "sourcesContent": ["import { EASINGS } from '@tldraw/editor'\nimport { StrokeOptions, StrokePoint } from './types'\n\nconst { min } = Math\n\n// This is the rate of change for simulated pressure. It could be an option.\nconst RATE_OF_PRESSURE_CHANGE = 0.275\n\n/** @public */\nexport function setStrokePointRadii(strokePoints: StrokePoint[], options: StrokeOptions) {\n\tconst {\n\t\tsize = 16,\n\t\tthinning = 0.5,\n\t\tsimulatePressure = true,\n\t\teasing = (t) => t,\n\t\tstart = {},\n\t\tend = {},\n\t} = options\n\n\tconst { easing: taperStartEase = EASINGS.easeOutQuad } = start\n\tconst { easing: taperEndEase = EASINGS.easeOutCubic } = end\n\n\tconst totalLength = strokePoints[strokePoints.length - 1].runningLength\n\n\tlet firstRadius: number | undefined\n\tlet prevPressure = strokePoints[0].pressure\n\tlet strokePoint: StrokePoint\n\n\tif (!simulatePressure && totalLength < size) {\n\t\tconst max = strokePoints.reduce((max, curr) => Math.max(max, curr.pressure), 0.5)\n\t\tstrokePoints.forEach((sp) => {\n\t\t\tsp.pressure = max\n\t\t\tsp.radius = size * easing(0.5 - thinning * (0.5 - sp.pressure))\n\t\t})\n\t\treturn strokePoints\n\t} else {\n\t\t// Calculate initial pressure based on the average of the first\n\t\t// n number of points. This prevents \"dots\" at the start of the\n\t\t// line. Drawn lines almost always start slow!\n\t\tlet p: number\n\t\tfor (let i = 0, n = strokePoints.length; i < n; i++) {\n\t\t\tstrokePoint = strokePoints[i]\n\t\t\tif (strokePoint.runningLength > size * 5) break\n\t\t\tconst sp = min(1, strokePoint.distance / size)\n\t\t\tif (simulatePressure) {\n\t\t\t\tconst rp = min(1, 1 - sp)\n\t\t\t\tp = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE))\n\t\t\t} else {\n\t\t\t\tp = min(1, prevPressure + (strokePoint.pressure - prevPressure) * 0.5)\n\t\t\t}\n\t\t\tprevPressure = prevPressure + (p - prevPressure) * 0.5\n\t\t}\n\n\t\t// Now calculate pressure and radius for each point\n\t\tfor (let i = 0; i < strokePoints.length; i++) {\n\t\t\tstrokePoint = strokePoints[i]\n\t\t\tif (thinning) {\n\t\t\t\tlet { pressure } = strokePoint\n\t\t\t\tconst sp = min(1, strokePoint.distance / size)\n\t\t\t\tif (simulatePressure) {\n\t\t\t\t\t// If we're simulating pressure, then do so based on the distance\n\t\t\t\t\t// between the current point and the previous point, and the size\n\t\t\t\t\t// of the stroke.\n\t\t\t\t\tconst rp = min(1, 1 - sp)\n\t\t\t\t\tpressure = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE))\n\t\t\t\t} else {\n\t\t\t\t\t// Otherwise, use the input pressure slightly smoothed based on the\n\t\t\t\t\t// distance between the current point and the previous point.\n\t\t\t\t\tpressure = min(\n\t\t\t\t\t\t1,\n\t\t\t\t\t\tprevPressure + (pressure - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tstrokePoint.radius = size * easing(0.5 - thinning * (0.5 - pressure))\n\n\t\t\t\tprevPressure = pressure\n\t\t\t} else {\n\t\t\t\tstrokePoint.radius = size / 2\n\t\t\t}\n\n\t\t\tif (firstRadius === undefined) {\n\t\t\t\tfirstRadius = strokePoint.radius\n\t\t\t}\n\t\t}\n\t}\n\n\tconst taperStart =\n\t\tstart.taper === false\n\t\t\t? 0\n\t\t\t: start.taper === true\n\t\t\t\t? Math.max(size, totalLength)\n\t\t\t\t: (start.taper as number)\n\n\tconst taperEnd =\n\t\tend.taper === false\n\t\t\t? 0\n\t\t\t: end.taper === true\n\t\t\t\t? Math.max(size, totalLength)\n\t\t\t\t: (end.taper as number)\n\n\tif (taperStart || taperEnd) {\n\t\tfor (let i = 0; i < strokePoints.length; i++) {\n\t\t\tstrokePoint = strokePoints[i]\n\t\t\t/*\n\t\t\t\tApply tapering\n\n\t\t\t\tIf the current length is within the taper distance at either the\n\t\t\t\tstart or the end, calculate the taper strengths. Apply the smaller \n\t\t\t\tof the two taper strengths to the radius.\n\t\t\t*/\n\n\t\t\tconst { runningLength } = strokePoint\n\n\t\t\tconst ts = runningLength < taperStart ? taperStartEase(runningLength / taperStart) : 1\n\n\t\t\tconst te =\n\t\t\t\ttotalLength - runningLength < taperEnd\n\t\t\t\t\t? taperEndEase((totalLength - runningLength) / taperEnd)\n\t\t\t\t\t: 1\n\n\t\t\tstrokePoint.radius = Math.max(0.01, strokePoint.radius * Math.min(ts, te))\n\t\t}\n\t}\n\n\treturn strokePoints\n}\n"],
-  "mappings": "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",
-  "names": ["max"]
-}

package/dist-esm/lib/shapes/shared/freehand/setStrokePointRadii.mjs

@@ -1,80 +0,0 @@
-import { EASINGS } from "@tldraw/editor";
-const { min } = Math;
-const RATE_OF_PRESSURE_CHANGE = 0.275;
-function setStrokePointRadii(strokePoints, options) {
-  const {
-    size = 16,
-    thinning = 0.5,
-    simulatePressure = true,
-    easing = (t) => t,
-    start = {},
-    end = {}
-  } = options;
-  const { easing: taperStartEase = EASINGS.easeOutQuad } = start;
-  const { easing: taperEndEase = EASINGS.easeOutCubic } = end;
-  const totalLength = strokePoints[strokePoints.length - 1].runningLength;
-  let firstRadius;
-  let prevPressure = strokePoints[0].pressure;
-  let strokePoint;
-  if (!simulatePressure && totalLength < size) {
-    const max = strokePoints.reduce((max2, curr) => Math.max(max2, curr.pressure), 0.5);
-    strokePoints.forEach((sp) => {
-      sp.pressure = max;
-      sp.radius = size * easing(0.5 - thinning * (0.5 - sp.pressure));
-    });
-    return strokePoints;
-  } else {
-    let p;
-    for (let i = 0, n = strokePoints.length; i < n; i++) {
-      strokePoint = strokePoints[i];
-      if (strokePoint.runningLength > size * 5) break;
-      const sp = min(1, strokePoint.distance / size);
-      if (simulatePressure) {
-        const rp = min(1, 1 - sp);
-        p = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE));
-      } else {
-        p = min(1, prevPressure + (strokePoint.pressure - prevPressure) * 0.5);
-      }
-      prevPressure = prevPressure + (p - prevPressure) * 0.5;
-    }
-    for (let i = 0; i < strokePoints.length; i++) {
-      strokePoint = strokePoints[i];
-      if (thinning) {
-        let { pressure } = strokePoint;
-        const sp = min(1, strokePoint.distance / size);
-        if (simulatePressure) {
-          const rp = min(1, 1 - sp);
-          pressure = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE));
-        } else {
-          pressure = min(
-            1,
-            prevPressure + (pressure - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE)
-          );
-        }
-        strokePoint.radius = size * easing(0.5 - thinning * (0.5 - pressure));
-        prevPressure = pressure;
-      } else {
-        strokePoint.radius = size / 2;
-      }
-      if (firstRadius === void 0) {
-        firstRadius = strokePoint.radius;
-      }
-    }
-  }
-  const taperStart = start.taper === false ? 0 : start.taper === true ? Math.max(size, totalLength) : start.taper;
-  const taperEnd = end.taper === false ? 0 : end.taper === true ? Math.max(size, totalLength) : end.taper;
-  if (taperStart || taperEnd) {
-    for (let i = 0; i < strokePoints.length; i++) {
-      strokePoint = strokePoints[i];
-      const { runningLength } = strokePoint;
-      const ts = runningLength < taperStart ? taperStartEase(runningLength / taperStart) : 1;
-      const te = totalLength - runningLength < taperEnd ? taperEndEase((totalLength - runningLength) / taperEnd) : 1;
-      strokePoint.radius = Math.max(0.01, strokePoint.radius * Math.min(ts, te));
-    }
-  }
-  return strokePoints;
-}
-export {
-  setStrokePointRadii
-};
-//# sourceMappingURL=setStrokePointRadii.mjs.map

package/dist-esm/lib/shapes/shared/freehand/setStrokePointRadii.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/lib/shapes/shared/freehand/setStrokePointRadii.ts"],
-  "sourcesContent": ["import { EASINGS } from '@tldraw/editor'\nimport { StrokeOptions, StrokePoint } from './types'\n\nconst { min } = Math\n\n// This is the rate of change for simulated pressure. It could be an option.\nconst RATE_OF_PRESSURE_CHANGE = 0.275\n\n/** @public */\nexport function setStrokePointRadii(strokePoints: StrokePoint[], options: StrokeOptions) {\n\tconst {\n\t\tsize = 16,\n\t\tthinning = 0.5,\n\t\tsimulatePressure = true,\n\t\teasing = (t) => t,\n\t\tstart = {},\n\t\tend = {},\n\t} = options\n\n\tconst { easing: taperStartEase = EASINGS.easeOutQuad } = start\n\tconst { easing: taperEndEase = EASINGS.easeOutCubic } = end\n\n\tconst totalLength = strokePoints[strokePoints.length - 1].runningLength\n\n\tlet firstRadius: number | undefined\n\tlet prevPressure = strokePoints[0].pressure\n\tlet strokePoint: StrokePoint\n\n\tif (!simulatePressure && totalLength < size) {\n\t\tconst max = strokePoints.reduce((max, curr) => Math.max(max, curr.pressure), 0.5)\n\t\tstrokePoints.forEach((sp) => {\n\t\t\tsp.pressure = max\n\t\t\tsp.radius = size * easing(0.5 - thinning * (0.5 - sp.pressure))\n\t\t})\n\t\treturn strokePoints\n\t} else {\n\t\t// Calculate initial pressure based on the average of the first\n\t\t// n number of points. This prevents \"dots\" at the start of the\n\t\t// line. Drawn lines almost always start slow!\n\t\tlet p: number\n\t\tfor (let i = 0, n = strokePoints.length; i < n; i++) {\n\t\t\tstrokePoint = strokePoints[i]\n\t\t\tif (strokePoint.runningLength > size * 5) break\n\t\t\tconst sp = min(1, strokePoint.distance / size)\n\t\t\tif (simulatePressure) {\n\t\t\t\tconst rp = min(1, 1 - sp)\n\t\t\t\tp = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE))\n\t\t\t} else {\n\t\t\t\tp = min(1, prevPressure + (strokePoint.pressure - prevPressure) * 0.5)\n\t\t\t}\n\t\t\tprevPressure = prevPressure + (p - prevPressure) * 0.5\n\t\t}\n\n\t\t// Now calculate pressure and radius for each point\n\t\tfor (let i = 0; i < strokePoints.length; i++) {\n\t\t\tstrokePoint = strokePoints[i]\n\t\t\tif (thinning) {\n\t\t\t\tlet { pressure } = strokePoint\n\t\t\t\tconst sp = min(1, strokePoint.distance / size)\n\t\t\t\tif (simulatePressure) {\n\t\t\t\t\t// If we're simulating pressure, then do so based on the distance\n\t\t\t\t\t// between the current point and the previous point, and the size\n\t\t\t\t\t// of the stroke.\n\t\t\t\t\tconst rp = min(1, 1 - sp)\n\t\t\t\t\tpressure = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE))\n\t\t\t\t} else {\n\t\t\t\t\t// Otherwise, use the input pressure slightly smoothed based on the\n\t\t\t\t\t// distance between the current point and the previous point.\n\t\t\t\t\tpressure = min(\n\t\t\t\t\t\t1,\n\t\t\t\t\t\tprevPressure + (pressure - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tstrokePoint.radius = size * easing(0.5 - thinning * (0.5 - pressure))\n\n\t\t\t\tprevPressure = pressure\n\t\t\t} else {\n\t\t\t\tstrokePoint.radius = size / 2\n\t\t\t}\n\n\t\t\tif (firstRadius === undefined) {\n\t\t\t\tfirstRadius = strokePoint.radius\n\t\t\t}\n\t\t}\n\t}\n\n\tconst taperStart =\n\t\tstart.taper === false\n\t\t\t? 0\n\t\t\t: start.taper === true\n\t\t\t\t? Math.max(size, totalLength)\n\t\t\t\t: (start.taper as number)\n\n\tconst taperEnd =\n\t\tend.taper === false\n\t\t\t? 0\n\t\t\t: end.taper === true\n\t\t\t\t? Math.max(size, totalLength)\n\t\t\t\t: (end.taper as number)\n\n\tif (taperStart || taperEnd) {\n\t\tfor (let i = 0; i < strokePoints.length; i++) {\n\t\t\tstrokePoint = strokePoints[i]\n\t\t\t/*\n\t\t\t\tApply tapering\n\n\t\t\t\tIf the current length is within the taper distance at either the\n\t\t\t\tstart or the end, calculate the taper strengths. Apply the smaller \n\t\t\t\tof the two taper strengths to the radius.\n\t\t\t*/\n\n\t\t\tconst { runningLength } = strokePoint\n\n\t\t\tconst ts = runningLength < taperStart ? taperStartEase(runningLength / taperStart) : 1\n\n\t\t\tconst te =\n\t\t\t\ttotalLength - runningLength < taperEnd\n\t\t\t\t\t? taperEndEase((totalLength - runningLength) / taperEnd)\n\t\t\t\t\t: 1\n\n\t\t\tstrokePoint.radius = Math.max(0.01, strokePoint.radius * Math.min(ts, te))\n\t\t}\n\t}\n\n\treturn strokePoints\n}\n"],
-  "mappings": "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",
-  "names": ["max"]
-}