Add taper: true (#47)

* Add taper: true * bump deps * Update package.json * Update deps
steveruizok · Jun 1, 2022 · ff2500c · ff2500c · vercel · Jun 1, 2022
1 parent 385dac1
commit ff2500c
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 106 deletions.
diff --git a/README.md b/README.md
@@ -169,11 +169,11 @@ The options object is optional, as are each of its properties.
 
 The `start` and `end` options accept an object:
 
-| Property | Type     | Default | Description                                 |
-| -------- | -------- | ------- | ------------------------------------------- |
-| `cap`    | boolean  | true    | Whether to draw a cap.                      |
-| `taper`  | number   | 0       | The distance to taper.                      |
-| `easing` | function | t => t  | An easing function for the tapering effect. |
+| Property | Type              | Default | Description                                                                              |
+| -------- | ----------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `cap`    | boolean           | true    | Whether to draw a cap.                                                                   |
+| `taper`  | number or boolean | 0       | The distance to taper. If set to true, the taper will be the total length of the stroke. |
+| `easing` | function          | t => t  | An easing function for the tapering effect.                                              |
 
 **Note:** The `cap` property has no effect when `taper` is more than zero.
 

diff --git a/package.json b/package.json
@@ -40,17 +40,13 @@
     "@testing-library/react": "^12.0.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^15.0.1",
-    "@types/react": "^17.0.19",
-    "@types/react-dom": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
     "babel-jest": "^27.1.0",
     "eslint": "^7.32.0",
     "fake-indexeddb": "^3.1.3",
     "jest": "^27.1.0",
     "lerna": "^3.15.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "ts-jest": "^27.0.5",
     "tslib": "^2.3.0",
     "typedoc": "^0.21.9",

diff --git a/packages/dev/package.json b/packages/dev/package.json
@@ -27,9 +27,7 @@
   "files": [
     "src"
   ],
-  "dependencies": {
-    "@types/react-dom": "^17.0.11"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@modulz/radix-icons": "^4.0.0",
     "@radix-ui/react-checkbox": "^0.1.0",
@@ -40,8 +38,8 @@
     "@tldraw/intersect": "^0.1.3",
     "@tldraw/vec": "^0.1.3",
     "@types/node": "^14.14.35",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.10",
+    "@types/react-dom": "^18.0.5",
     "concurrently": "6.0.1",
     "create-serve": "1.0.1",
     "css-tree": "^1.1.3",
@@ -50,12 +48,13 @@
     "husky": "^7.0.0",
     "jest": "^27.0.6",
     "perfect-freehand": "^1.0.16",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-hotkeys-hook": "^3.4.0",
     "rimraf": "3.0.2",
     "rko": "^0.5.25",
     "tslib": "^2.3.1",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "zustand": "^4.0.0-rc.1"
   }
-}
+}
diff --git a/packages/dev/src/components/controls/controls.module.css b/packages/dev/src/components/controls/controls.module.css
@@ -19,7 +19,7 @@
 
 .inputs {
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: 96px 1fr auto;
   grid-auto-rows: 32px;
   align-items: center;
   column-gap: 16px;

diff --git a/packages/dev/src/components/controls/controls.tsx b/packages/dev/src/components/controls/controls.tsx
@@ -101,7 +101,7 @@ export function Controls() {
   }, [])
 
   const handleTaperStartChange = React.useCallback((v: number[]) => {
-    app.patchStyleForAllShapes({ taperStart: v[0] })
+    app.patchStyleForAllShapes({ taperStart: v[0] === 100 ? true : v[0] })
   }, [])
 
   const handleEasingStartChange = React.useCallback((easing: string) => {
@@ -120,7 +120,7 @@ export function Controls() {
   }, [])
 
   const handleTaperEndChange = React.useCallback((v: number[]) => {
-    app.patchStyleForAllShapes({ taperEnd: v[0] })
+    app.patchStyleForAllShapes({ taperEnd: v[0] === 100 ? true : v[0] })
   }, [])
 
   const handleEasingEndChange = React.useCallback((easing: string) => {
@@ -199,7 +199,7 @@ export function Controls() {
         <Slider
           name="Size"
           value={[style.size]}
-          min={0}
+          min={1}
           max={100}
           step={1}
           onDoubleClick={handleResetSize}
@@ -255,7 +255,24 @@ export function Controls() {
         <hr />
         <Slider
           name="Taper Start"
-          value={[style.taperStart]}
+          value={[
+            Math.max(
+              0,
+              Math.min(
+                100,
+                style.taperStart === true
+                  ? 100
+                  : style.taperStart === false
+                  ? 0
+                  : style.taperStart
+              )
+            ),
+          ]}
+          label={
+            typeof style.taperStart === 'boolean'
+              ? style.taperStart.toString()
+              : undefined
+          }
           min={0}
           max={100}
           step={1}
@@ -289,14 +306,31 @@ export function Controls() {
         <hr />
         <Slider
           name="Taper End"
-          value={[style.taperEnd]}
+          value={[
+            Math.max(
+              0,
+              Math.min(
+                100,
+                style.taperEnd === true
+                  ? 100
+                  : style.taperEnd === false
+                  ? 0
+                  : style.taperEnd
+              )
+            ),
+          ]}
           min={0}
           max={100}
           step={1}
           onDoubleClick={handleResetTaperEnd}
           onValueChange={handleTaperEndChange}
           onPointerDown={handleTaperEndChangeStart}
           onPointerUp={handleStyleChangeComplete}
+          label={
+            typeof style.taperEnd === 'boolean'
+              ? style.taperEnd.toString()
+              : undefined
+          }
         />
         {style.taperEnd <= 0 && (
           <Checkbox

diff --git a/packages/dev/src/components/slider/slider.tsx b/packages/dev/src/components/slider/slider.tsx
@@ -14,6 +14,7 @@ interface SliderProps extends SliderOwnProps {
   onPointerDown: () => void
   onPointerUp: () => void
   onDoubleClick: () => void
+  label?: string
 }
 
 export function Slider({
@@ -24,6 +25,7 @@ export function Slider({
   min,
   max,
   step,
+  label,
   value = [0],
   ...props
 }: SliderProps) {
@@ -60,15 +62,19 @@ export function Slider({
           </Thumb>
         ))}
       </Root>
-      <input
-        className={styles.numberInput}
-        type="number"
-        value={value[0]}
-        min={min}
-        max={max}
-        step={step}
-        onChange={handleValueChange}
-      />
+      {label ? (
+        <span style={{ textAlign: 'right' }}>{label}</span>
+      ) : (
+        <input
+          className={styles.numberInput}
+          type="number"
+          value={value[0]}
+          min={min}
+          max={max}
+          step={step}
+          onChange={handleValueChange}
+        />
+      )}
     </>
   )
 }
diff --git a/packages/dev/src/state/shapes/draw.tsx b/packages/dev/src/state/shapes/draw.tsx
@@ -25,7 +25,7 @@ export class DrawUtil extends TLShapeUtil<T, E> {
 
   rotatedCache = new WeakMap<T, number[][]>([])
 
-  strokeCache = new WeakMap<T['points'], number[][]>([])
+  strokeCache = new WeakMap<T, number[][]>([])
 
   getShape = (props: Partial<T>): T => {
     return Utils.deepMerge<T>(
@@ -85,25 +85,26 @@ export class DrawUtil extends TLShapeUtil<T, E> {
 
     const simulatePressure = shape.points[2]?.[2] === 0.5
 
-    const outlinePoints = Utils.getFromCache(
-      this.strokeCache,
-      shape.points,
-      () =>
-        getStroke(shape.points, {
-          size,
-          thinning,
-          streamline,
-          easing: EASINGS[easing],
-          smoothing,
-          start: {
-            taper: taperStart,
-            cap: capStart,
-            easing: EASINGS[easingStart],
-          },
-          end: { taper: taperEnd, cap: capEnd, easing: EASINGS[easingEnd] },
-          simulatePressure,
-          last: isDone,
-        })
+    const outlinePoints = Utils.getFromCache(this.strokeCache, shape, () =>
+      getStroke(shape.points, {
+        size,
+        thinning,
+        streamline,
+        easing: EASINGS[easing],
+        smoothing,
+        start: {
+          taper: taperStart,
+          cap: capStart,
+          easing: EASINGS[easingStart],
+        },
+        end: {
+          taper: taperEnd,
+          cap: capEnd,
+          easing: EASINGS[easingEnd],
+        },
+        simulatePressure,
+        last: isDone,
+      })
     )
 
     const drawPathData = getSvgPathFromStroke(outlinePoints)

diff --git a/packages/dev/src/state/state.ts b/packages/dev/src/state/state.ts
@@ -481,7 +481,7 @@ export class AppState extends StateManager<State> {
               }
 
               if (Utils.pointInBounds(pt, bounds)) {
-                const points = draw.strokeCache.get(shape.points)
+                const points = draw.strokeCache.get(shape)
 
                 if (
                   (points &&

diff --git a/packages/dev/src/types.ts b/packages/dev/src/types.ts
@@ -21,8 +21,8 @@ export interface DrawStyles {
   thinning: number
   streamline: number
   smoothing: number
-  taperStart: number
-  taperEnd: number
+  taperStart: number | boolean
+  taperEnd: number | boolean
   capStart: boolean
   capEnd: boolean
   easingStart: Easing

diff --git a/packages/perfect-freehand/README.md b/packages/perfect-freehand/README.md
@@ -169,11 +169,11 @@ The options object is optional, as are each of its properties.
 
 The `start` and `end` options accept an object:
 
-| Property | Type     | Default | Description                                 |
-| -------- | -------- | ------- | ------------------------------------------- |
-| `cap`    | boolean  | true    | Whether to draw a cap.                      |
-| `taper`  | number   | 0       | The distance to taper.                      |
-| `easing` | function | t => t  | An easing function for the tapering effect. |
+| Property | Type              | Default | Description                                                                              |
+| -------- | ----------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `cap`    | boolean           | true    | Whether to draw a cap.                                                                   |
+| `taper`  | number or boolean | 0       | The distance to taper. If set to true, the taper will be the total length of the stroke. |
+| `easing` | function          | t => t  | An easing function for the tapering effect.                                              |
 
 **Note:** The `cap` property has no effect when `taper` is more than zero.
 

diff --git a/packages/perfect-freehand/src/getStrokeOutlinePoints.ts b/packages/perfect-freehand/src/getStrokeOutlinePoints.ts
@@ -52,17 +52,11 @@ export function getStrokeOutlinePoints(
     last: isComplete = false,
   } = options
 
-  const {
-    cap: capStart = true,
-    taper: taperStart = 0,
-    easing: taperStartEase = (t) => t * (2 - t),
-  } = start
+  let { cap: capStart = true, easing: taperStartEase = (t) => t * (2 - t) } =
+    start
 
-  const {
-    cap: capEnd = true,
-    taper: taperEnd = 0,
-    easing: taperEndEase = (t) => --t * t * t + 1,
-  } = end
+  let { cap: capEnd = true, easing: taperEndEase = (t) => --t * t * t + 1 } =
+    end
 
   // We can't do anything with an empty array or a stroke with negative size.
   if (points.length === 0 || size <= 0) {
@@ -72,6 +66,20 @@ export function getStrokeOutlinePoints(
   // The total length of the line
   const totalLength = points[points.length - 1].runningLength
 
+  const taperStart =
+    start.taper === false
+      ? 0
+      : start.taper === true
+      ? Math.max(size, totalLength)
+      : (start.taper as number)
+
+  const taperEnd =
+    end.taper === false
+      ? 0
+      : end.taper === true
+      ? Math.max(size, totalLength)
+      : (end.taper as number)
+
   // The minimum allowed distance between points (squared)
   const minDistance = Math.pow(size * smoothing, 2)
 

diff --git a/packages/perfect-freehand/src/types.ts b/packages/perfect-freehand/src/types.ts
@@ -20,12 +20,12 @@ export interface StrokeOptions {
   simulatePressure?: boolean
   start?: {
     cap?: boolean
-    taper?: number
+    taper?: number | boolean
     easing?: (distance: number) => number
   }
   end?: {
     cap?: boolean
-    taper?: number
+    taper?: number | boolean
     easing?: (distance: number) => number
   }
   // Whether to handle the points as a completed stroke.