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.
This commit is contained in:
Steve Ruiz 2024-06-18 11:36:51 +01:00 committed by GitHub
parent 28f7da777d
commit f621f92ae2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 52 additions and 10 deletions

View file

@ -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

View file

@ -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

View file

@ -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,16 +80,25 @@ export function getFreehandOptions(
forceComplete: boolean,
forceSolid: boolean
): StrokeOptions {
return {
...(forceSolid
? solidSettings(strokeWidth)
: shapeProps.dash === 'draw'
? shapeProps.isPen
? realPressureSettings(strokeWidth)
: simulatePressureSettings(strokeWidth)
: solidSettings(strokeWidth)),
last: shapeProps.isComplete || forceComplete,
const last = shapeProps.isComplete || forceComplete
if (forceSolid) {
if (shapeProps.isPen) {
return { ...solidRealPressureSettings(strokeWidth), last }
} else {
return { ...solidSettings(strokeWidth), last }
}
}
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[]) {