Adds pressure, fading.

Author: steveruizok

CHANGELOG.md

@@ -1,7 +1,12 @@
+## 0.3.0
+
+- Adds pressure strokes (`perfect-freehand`).
+- Makes all strokes fade after a certain time has passed since the last stroke.
+
 ## 0.2.1
 
 - Notarized / signed mac app.
 
 ## 0.2.0
 
-- Adds changelog.
+- Adds change log.

package.json

@@ -1,8 +1,8 @@
 {
+  "version": "0.3.0",
   "private": true,
   "name": "telestrator",
   "description": "A drawing app for streaming.",
-  "version": "0.2.1",
   "author": "Steve Ruiz @steveruizok",
   "homepage": "https://github.com/steveruizok/telestrator",
   "main": "app/background.js",
@@ -20,13 +20,15 @@
   "dependencies": {
     "@state-designer/react": "^1.4.5",
     "@types/lodash": "^4.14.168",
+    "@types/lodash-es": "^4.17.4",
     "@types/react": "^17.0.1",
     "@types/styled-components": "^5.1.7",
     "cardinal-spline": "^0.0.1",
     "electron-serve": "^1.0.0",
     "electron-store": "^6.0.1",
     "framer-motion": "^3.3.0",
     "lodash-es": "^4.17.20",
+    "perfect-freehand": "^0.2.3",
     "react-feather": "^2.0.9",
     "styled-components": "^5.2.1"
   },

renderer/components/canvas.tsx

@@ -7,8 +7,11 @@ export default function App() {
   const rCanvasFrame = React.useRef<HTMLDivElement>()
   const rMarksCanvas = React.useRef<HTMLCanvasElement>()
   const rCurrentCanvas = React.useRef<HTMLCanvasElement>()
-
-  const showCursor = useSelector((state) => state.isInAny("active"))
+  const showCursor = useSelector((state) => {
+    console.log(state.isIn("active"))
+    console.log(state.isIn("cursorVisible"))
+    return state.isIn("active", "cursorVisible")
+  })
 
   React.useEffect(() => {
     state.send("LOADED", {

renderer/components/controls.tsx

@@ -10,13 +10,15 @@ import {
   ArrowDownLeft,
   Lock,
   Unlock,
+  PenTool,
 } from "react-feather"
 
 export default function Controls() {
   const hideActive = useSelector((state) => state.isIn("drawing"))
   const isFading = useSelector((state) => state.data.isFading)
   const selectedSize = useSelector((state) => state.data.size)
   const selectedColor = useSelector((state) => state.data.color)
+  const isPressure = useSelector((state) => state.data.pressure)
   const selectedTool = useSelector((state) =>
     state.isIn("pencil")
       ? "pencil"
@@ -59,9 +61,16 @@ export default function Controls() {
       ))}
       <ToolButton
         isSelected={selectedTool === "pencil"}
-        onClick={() => state.send("SELECTED_PENCIL")}
+        onDoubleClick={() => state.send("TOGGLED_PRESSURE")}
+        onClick={(e) => {
+          if (e.shiftKey) {
+            state.send("TOGGLED_PRESSURE")
+          } else {
+            state.send("SELECTED_PENCIL")
+          }
+        }}
       >
-        <Edit2 size={24} />
+        {isPressure ? <PenTool size={24} /> : <Edit2 size={24} />}
       </ToolButton>
       <ToolButton
         isSelected={selectedTool === "arrow"}

renderer/hooks/useKeyboardEvents.tsx

@@ -5,13 +5,6 @@ export default function useKeyboardEvents() {
   useEffect(() => {
     function releaseControl(e: KeyboardEvent) {
       switch (e.key) {
-        case "Shift": {
-          state.send("TOGGLED_ASPECT_LOCK")
-          break
-        }
-        case "Meta": {
-          state.send("TOGGLED_FILL")
-        }
         case "1":
         case "2":
         case "3":
@@ -30,10 +23,17 @@ export default function useKeyboardEvents() {
           if (e.metaKey) {
             state.send("TOGGLED_FADING")
           }
+          break
+        }
+        case "D":
+        case "P": {
+          state.send("TOGGLED_PRESSURE")
+          break
         }
         case "d":
         case "p": {
           state.send("SELECTED_PENCIL")
+
           break
         }
         case "a": {
@@ -70,6 +70,13 @@ export default function useKeyboardEvents() {
           state.send("DEACTIVATED")
           break
         }
+        case "Shift": {
+          state.send("TOGGLED_ASPECT_LOCK")
+          break
+        }
+        case "Meta": {
+          state.send("TOGGLED_FILL")
+        }
       }
     }
 

renderer/hooks/usePointer.tsx

@@ -6,12 +6,16 @@ interface MotionPointer {
   y: MotionValue<number>
   dx: MotionValue<number>
   dy: MotionValue<number>
+  p: MotionValue<number>
+  pointerType: string
 }
 export const mvPointer: MotionPointer = {
   x: motionValue(0),
   y: motionValue(0),
   dx: motionValue(0),
   dy: motionValue(0),
+  p: motionValue(0),
+  pointerType: "mouse",
 }
 
 interface PointerInfo {
@@ -32,14 +36,12 @@ export default function usePointer(
       const dx = x - mvPointer.x.get()
       const dy = y - mvPointer.y.get()
 
-      // if (Math.hypot(dx, dy) < 8) {
-      //   return
-      // }
-
       mvPointer.x.set(x)
       mvPointer.y.set(y)
       mvPointer.dx.set(dx)
       mvPointer.dy.set(dy)
+      mvPointer.p.set(e.pressure)
+      mvPointer.pointerType = e.pointerType
 
       if (onMove) {
         onMove({ x, y, dx, dy })