Fix draw shape indicators for pen-drawn solid shapes (#3962)

This PR fixes the indicators for shapes that were drawn with a pen or
stylus.

<img width="1008" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/f3050ccb-08f0-4bf4-a225-51863df12464">

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

### Release Notes

- Fixes a bug with the indicator for stylus-drawn draw shapes.

apps/docs/content/getting-started/releases-versioning.mdx

@@ -17,6 +17,28 @@ order: 3
 
 {/* START AUTO-GENERATED CHANGELOG */}
 
+### [v2.2.1](/releases/v2.2.1)
+
+#### 2.2.1 ([#3958](https://github.com/tldraw/tldraw/pull/3958))
+
+- Docs improvements (#3930, #3931, #3935, #3956)
+- Make `ArrowBindingUtil` public (#3913)
+- Add `editor.getSnapshot()` and `editor.loadSnapshot` (#3912)
+- CSS tweaks on bookmark elements (#3955)
+
+---
+
+#### 🐛 Bug Fix
+
+- `@tldraw/editor`, `tldraw`
+  - 2.2.1 [#3958](https://github.com/tldraw/tldraw/pull/3958) ([@SomeHats](https://github.com/SomeHats) [@ds300](https://github.com/ds300) [@mimecuvalo](https://github.com/mimecuvalo))
+
+#### Authors: 3
+
+- alex ([@SomeHats](https://github.com/SomeHats))
+- David Sheldrick ([@ds300](https://github.com/ds300))
+- Mime Čuvalo ([@mimecuvalo](https://github.com/mimecuvalo))
+
 ### [v2.2.0](/releases/v2.2.0)
 
 #### Bindings

apps/examples/src/misc/develop.tsx

@@ -8,7 +8,7 @@ export default function Develop() {
 		<div className="tldraw__editor">
 			<Tldraw
 				overrides={[performanceOverrides]}
-				persistenceKey="tldraw_example"
+				persistenceKey="example"
 				onMount={(editor) => {
 					;(window as any).app = editor
 					;(window as any).editor = editor

packages/tldraw/src/lib/shapes/draw/getPath.ts

@@ -45,6 +45,17 @@ const solidSettings = (strokeWidth: number): StrokeOptions => {
 	}
 }
 
+const solidRealPressureSettings = (strokeWidth: number): StrokeOptions => {
+	return {
+		size: strokeWidth,
+		thinning: 0,
+		streamline: 0.62,
+		smoothing: 0.62,
+		simulatePressure: false,
+		easing: EASINGS.linear,
+	}
+}
+
 export function getHighlightFreehandSettings({
 	strokeWidth,
 	showAsComplete,
@@ -69,18 +80,27 @@ export function getFreehandOptions(
 	forceComplete: boolean,
 	forceSolid: boolean
 ): StrokeOptions {
-	return {
+	const last = shapeProps.isComplete || forceComplete
-		...(forceSolid
+
-			? solidSettings(strokeWidth)
+	if (forceSolid) {
-			: shapeProps.dash === 'draw'
+		if (shapeProps.isPen) {
-				? shapeProps.isPen
+			return { ...solidRealPressureSettings(strokeWidth), last }
-					? realPressureSettings(strokeWidth)
+		} else {
-					: simulatePressureSettings(strokeWidth)
+			return { ...solidSettings(strokeWidth), last }
-				: solidSettings(strokeWidth)),
-		last: shapeProps.isComplete || forceComplete,
 		}
 	}
 
+	if (shapeProps.dash === 'draw') {
+		if (shapeProps.isPen) {
+			return { ...realPressureSettings(strokeWidth), last }
+		} else {
+			return { ...simulatePressureSettings(strokeWidth), last }
+		}
+	}
+
+	return { ...solidSettings(strokeWidth), last }
+}
+
 export function getPointsFromSegments(segments: TLDrawShapeSegment[]) {
 	const points: Vec[] = []