adds pressure sensitivity

components/canvas/defs.tsx

@@ -28,7 +28,7 @@ export default function Defs() {
 }
 
 const Def = memo(function Def({ id }: { id: string }) {
-  const shape = useSelector(({ data }) => getPage(data).shapes[id])
+  const shape = useSelector((s) => getPage(s.data).shapes[id])
   if (!shape) return null
   return getShapeUtils(shape).render(shape)
 })

components/canvas/shape.tsx

@@ -15,7 +15,7 @@ interface ShapeProps {
 }
 
 function Shape({ id, isSelecting, parentPoint }: ShapeProps) {
-  const shape = useSelector(({ data }) => getPage(data).shapes[id])
+  const shape = useSelector((s) => getPage(s.data).shapes[id])
 
   const rGroup = useRef<SVGGElement>(null)
 
@@ -25,9 +25,7 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps) {
   // may sometimes run before the hook in the Page component, which means
   // a deleted shape will still be pulled here before the page component
   // detects the change and pulls this component.
-  if (!shape) {
-    return null
-  }
+  if (!shape) return null
 
   const isGroup = shape.type === ShapeType.Group
 

lib/shape-utils/draw.tsx

@@ -157,18 +157,35 @@ const draw = registerShapeUtils<DrawShape>({
 
 export default draw
 
+const simulatePressureSettings = {
+  simulatePressure: true,
+}
+
+const realPressureSettings = {
+  easing: (t: number) => t * t,
+  simulatePressure: false,
+  // start: { taper: 1 },
+  // end: { taper: 1 },
+}
+
 function renderPath(shape: DrawShape, style: ShapeStyles) {
   const styles = getShapeStyle(style)
 
-  pathCache.set(
-    shape.points,
-    getSvgPathFromStroke(
-      getStroke(shape.points, {
-        size: 1 + +styles.strokeWidth * 2,
-        thinning: 0.85,
-        end: { taper: +styles.strokeWidth * 20 },
-        start: { taper: +styles.strokeWidth * 20 },
-      })
-    )
-  )
+  if (shape.points.length < 2) {
+    pathCache.set(shape.points, '')
+    return
+  }
+
+  const options =
+    shape.points[1][2] === 0.5 ? simulatePressureSettings : realPressureSettings
+
+  const stroke = getStroke(shape.points, {
+    size: 1 + +styles.strokeWidth * 2,
+    thinning: 0.85,
+    end: { taper: +styles.strokeWidth * 20 },
+    start: { taper: +styles.strokeWidth * 20 },
+    ...options,
+  })
+
+  pathCache.set(shape.points, getSvgPathFromStroke(stroke))
 }

lib/shape-utils/index.tsx

@@ -8,6 +8,7 @@ import {
   ShapeBinding,
   Mutable,
   ShapeByType,
+  Data,
 } from 'types'
 import * as vec from 'utils/vec'
 import {

state/inputs.tsx

@@ -19,6 +19,7 @@ class Inputs {
       pointerId: touch.identifier,
       origin: [touch.clientX, touch.clientY],
       point: [touch.clientX, touch.clientY],
+      pressure: 0.5,
       shiftKey,
       ctrlKey,
       metaKey: isDarwin() ? metaKey : ctrlKey,
@@ -42,6 +43,7 @@ class Inputs {
       ...prev,
       pointerId: touch.identifier,
       point: [touch.clientX, touch.clientY],
+      pressure: 0.5,
       shiftKey,
       ctrlKey,
       metaKey: isDarwin() ? metaKey : ctrlKey,
@@ -61,8 +63,9 @@ class Inputs {
     const info = {
       target,
       pointerId: e.pointerId,
-      origin: [e.clientX, e.clientY, e.pressure],
-      point: [e.clientX, e.clientY, e.pressure],
+      origin: [e.clientX, e.clientY],
+      point: [e.clientX, e.clientY],
+      pressure: e.pressure || 0.5,
       shiftKey,
       ctrlKey,
       metaKey: isDarwin() ? metaKey : ctrlKey,
@@ -81,8 +84,9 @@ class Inputs {
     const info = {
       target,
       pointerId: e.pointerId,
-      origin: [e.clientX, e.clientY, e.pressure],
-      point: [e.clientX, e.clientY, e.pressure],
+      origin: [e.clientX, e.clientY],
+      point: [e.clientX, e.clientY],
+      pressure: e.pressure || 0.5,
       shiftKey,
       ctrlKey,
       metaKey: isDarwin() ? metaKey : ctrlKey,
@@ -100,7 +104,8 @@ class Inputs {
     const info = {
       ...prev,
       pointerId: e.pointerId,
-      point: [e.clientX, e.clientY, e.pressure],
+      point: [e.clientX, e.clientY],
+      pressure: e.pressure || 0.5,
       shiftKey,
       ctrlKey,
       metaKey: isDarwin() ? metaKey : ctrlKey,
@@ -123,6 +128,7 @@ class Inputs {
       ...prev,
       origin: prev?.origin || [e.clientX, e.clientY],
       point: [e.clientX, e.clientY],
+      pressure: e.pressure || 0.5,
       shiftKey,
       ctrlKey,
       metaKey: isDarwin() ? metaKey : ctrlKey,

state/sessions/draw-session.ts

@@ -11,6 +11,7 @@ let prevEndPoint: number[]
 export default class BrushSession extends BaseSession {
   origin: number[]
   previous: number[]
+  last: number[]
   points: number[][]
   snapshot: DrawSnapshot
   isLocked: boolean
@@ -20,6 +21,7 @@ export default class BrushSession extends BaseSession {
     super(data)
     this.origin = point
     this.previous = point
+    this.last = point
     this.points = []
     this.snapshot = getDrawSnapshot(data, id)
 
@@ -28,7 +30,12 @@ export default class BrushSession extends BaseSession {
     getShapeUtils(shape).translateTo(shape, point)
   }
 
-  update = (data: Data, point: number[], isLocked = false) => {
+  update = (
+    data: Data,
+    point: number[],
+    pressure: number,
+    isLocked = false
+  ) => {
     const { snapshot } = this
 
     const delta = vec.vec(this.origin, point)
@@ -63,14 +70,16 @@ export default class BrushSession extends BaseSession {
       }
     }
 
-    if (this.previous) {
-      point = vec.med(this.previous, point)
-    }
+    point = vec.med(this.previous, point)
+
+    const next = [...vec.sub(point, this.origin), pressure]
 
-    prevEndPoint = [...point]
-    const next = vec.sub(point, this.origin)
+    // Don't add duplicate points
+    if (vec.isEqual(this.last, next)) return
 
     this.points.push(next)
+
+    this.last = next
     this.previous = point
 
     const shape = getShape(data, snapshot.id) as DrawShape

state/state.ts

@@ -981,11 +981,17 @@ const state = createState({
       session.update(
         data,
         screenToWorld(inputs.pointer.point, data),
+        payload.pressure,
         payload.shiftKey
       )
     },
     updateDrawSession(data, payload: PointerInfo) {
-      session.update(data, screenToWorld(payload.point, data), payload.shiftKey)
+      session.update(
+        data,
+        screenToWorld(payload.point, data),
+        payload.pressure,
+        payload.shiftKey
+      )
     },
 
     // Arrow

types.ts

@@ -248,6 +248,7 @@ export interface PointerInfo {
   pointerId: number
   origin: number[]
   point: number[]
+  pressure: number
   shiftKey: boolean
   ctrlKey: boolean
   metaKey: boolean