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:
parent
28f7da777d
commit
f621f92ae2
3 changed files with 52 additions and 10 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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[]) {
|
||||
|
|
Loading…
Reference in a new issue