Improve pressure-detection logic in drawing (#3639)
This PR improves handling of pressure in the draw tool. While we differentiate between pen and not-pen in the pointer type, there are not-pen type inputs like styluses that present as "mouse" inputs. This PR makes the freehand options for these inputs more pen-like so that they benefit from the dialing-in of options for pressure-using devices. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `improvement` — Improving existing features ### Test Plan 1. Use pen inputs 2. Use mouse inputs 3. Use stylus inputs - [x] Unit Tests ### Release Notes - Improves handling of mouse-type devices that support pressure, e.g. wacom tablets. They now use the same freehand options as true pen-type inputs.
This commit is contained in:
parent
bf42d6e2a9
commit
b8afbb4c43
3 changed files with 37 additions and 37 deletions
|
@ -17,6 +17,27 @@ order: 3
|
|||
|
||||
{/* START AUTO-GENERATED CHANGELOG */}
|
||||
|
||||
### [v2.1.4](/releases/v2.1.4)
|
||||
|
||||
### Release Notes
|
||||
|
||||
#### textfields: fix up flakiness in text selection and for unfilled geo shapes fix edit->edit (#3577) ([#3643](https://github.com/tldraw/tldraw/pull/3643))
|
||||
|
||||
- Text labels: fix up regression to selection when clicking into a text shape. (was causing flaky selections)
|
||||
- Text labels: fix edit→edit not working as expected when unfilled geo shapes are on 'top' of other shapes.
|
||||
|
||||
---
|
||||
|
||||
#### 🐛 Bug Fix
|
||||
|
||||
- `@tldraw/editor`, `tldraw`
|
||||
- textfields: fix up flakiness in text selection (#3578)
|
||||
- textfields: for unfilled geo shapes fix edit->edit (#3577) [#3643](https://github.com/tldraw/tldraw/pull/3643) ([@mimecuvalo](https://github.com/mimecuvalo))
|
||||
|
||||
#### Authors: 1
|
||||
|
||||
- Mime Čuvalo ([@mimecuvalo](https://github.com/mimecuvalo))
|
||||
|
||||
### [v2.1.3](/releases/v2.1.3)
|
||||
|
||||
#### Expose migrations, validators, and versions from tlschema ([#3613](https://github.com/tldraw/tldraw/pull/3613))
|
||||
|
|
|
@ -34,6 +34,7 @@ export class Drawing extends StateNode {
|
|||
util = this.editor.getShapeUtil(this.shapeType)
|
||||
|
||||
isPen = false
|
||||
isPenOrStylus = false
|
||||
|
||||
segmentMode = 'free' as 'free' | 'straight' | 'starting_straight' | 'starting_free'
|
||||
|
||||
|
@ -64,7 +65,7 @@ export class Drawing extends StateNode {
|
|||
override onPointerMove: TLEventHandlers['onPointerMove'] = () => {
|
||||
const { inputs } = this.editor
|
||||
|
||||
if (this.isPen !== inputs.isPen) {
|
||||
if (this.isPen && !inputs.isPen) {
|
||||
// The user made a palm gesture before starting a pen gesture;
|
||||
// ideally we'd start the new shape here but we could also just bail
|
||||
// as the next interaction will work correctly
|
||||
|
@ -82,7 +83,7 @@ export class Drawing extends StateNode {
|
|||
}
|
||||
|
||||
if (this.canDraw) {
|
||||
if (inputs.isPen) {
|
||||
if (this.isPenOrStylus) {
|
||||
// Don't update the shape if we haven't moved far enough from the last time we recorded a point
|
||||
if (
|
||||
Vec.Dist(inputs.currentPagePoint, this.lastRecordedPoint) >=
|
||||
|
@ -172,9 +173,16 @@ export class Drawing extends StateNode {
|
|||
this.markId = 'draw start ' + uniqueId()
|
||||
this.editor.mark(this.markId)
|
||||
|
||||
// If the pressure is weird, then it's probably a stylus reporting as a mouse
|
||||
// We treat pen/stylus inputs differently in the drawing tool, so we need to
|
||||
// have our own value for this. The inputs.isPen is only if the input is a regular
|
||||
// pen, like an iPad pen, which needs to trigger "pen mode" in order to avoid
|
||||
// accidental palm touches. We don't have to worry about that with styluses though.
|
||||
const z = this.info.point.z === undefined ? 0.5 : this.info.point.z
|
||||
this.isPen = isPen
|
||||
this.isPenOrStylus = isPen || (z > 0 && z < 0.5) || (z > 0.5 && z < 1)
|
||||
|
||||
const pressure = this.isPen ? this.info.point.z! * 1.25 : 0.5
|
||||
const pressure = this.isPenOrStylus ? z * 1.25 : 0.5
|
||||
|
||||
this.segmentMode = this.editor.inputs.shiftKey ? 'straight' : 'free'
|
||||
|
||||
|
@ -197,8 +205,6 @@ export class Drawing extends StateNode {
|
|||
|
||||
const { x, y } = this.editor.getPointInShapeSpace(shape, originPagePoint).toFixed()
|
||||
|
||||
const pressure = this.isPen ? this.info.point.z! * 1.25 : 0.5
|
||||
|
||||
const newSegment: TLDrawShapeSegment = {
|
||||
type: this.segmentMode,
|
||||
points: [
|
||||
|
@ -261,7 +267,7 @@ export class Drawing extends StateNode {
|
|||
x: originPagePoint.x,
|
||||
y: originPagePoint.y,
|
||||
props: {
|
||||
isPen: this.isPen,
|
||||
isPen: this.isPenOrStylus,
|
||||
segments: [
|
||||
{
|
||||
type: this.segmentMode,
|
||||
|
@ -300,7 +306,7 @@ export class Drawing extends StateNode {
|
|||
|
||||
const { x, y, z } = this.editor.getPointInShapeSpace(shape, inputs.currentPagePoint).toFixed()
|
||||
|
||||
const newPoint = { x, y, z: this.isPen ? +(z! * 1.25).toFixed(2) : 0.5 }
|
||||
const newPoint = { x, y, z: this.isPenOrStylus ? +(z! * 1.25).toFixed(2) : 0.5 }
|
||||
|
||||
switch (this.segmentMode) {
|
||||
case 'starting_straight': {
|
||||
|
@ -634,11 +640,11 @@ export class Drawing extends StateNode {
|
|||
x: toFixed(inputs.currentPagePoint.x),
|
||||
y: toFixed(inputs.currentPagePoint.y),
|
||||
props: {
|
||||
isPen: this.isPen,
|
||||
isPen: this.isPenOrStylus,
|
||||
segments: [
|
||||
{
|
||||
type: 'free',
|
||||
points: [{ x: 0, y: 0, z: this.isPen ? +(z! * 1.25).toFixed() : 0.5 }],
|
||||
points: [{ x: 0, y: 0, z: this.isPenOrStylus ? +(z! * 1.25).toFixed() : 0.5 }],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
@ -1,31 +1,4 @@
|
|||
import { Vec, VecLike, toDomPrecision } from '@tldraw/editor'
|
||||
|
||||
function precise(A: VecLike) {
|
||||
return `${toDomPrecision(A.x)},${toDomPrecision(A.y)} `
|
||||
}
|
||||
|
||||
function rng(seed = '') {
|
||||
let x = 0
|
||||
let y = 0
|
||||
let z = 0
|
||||
let w = 0
|
||||
|
||||
function next() {
|
||||
const t = x ^ (x << 11)
|
||||
x = y
|
||||
y = z
|
||||
z = w
|
||||
w ^= ((w >>> 19) ^ t ^ (t >>> 8)) >>> 0
|
||||
return (w / 0x100000000) * 2
|
||||
}
|
||||
|
||||
for (let k = 0; k < seed.length + 64; k++) {
|
||||
x ^= seed.charCodeAt(k) | 0
|
||||
next()
|
||||
}
|
||||
|
||||
return next
|
||||
}
|
||||
import { Vec, VecLike, precise, rng } from '@tldraw/editor'
|
||||
|
||||
/** @public */
|
||||
export function getRoundedInkyPolygonPath(points: VecLike[]) {
|
||||
|
|
Loading…
Reference in a new issue