Adds control to toggle fading

steveruizok · Feb 12, 2021 · 0f01c99 · 0f01c99
1 parent 70b3f5c
commit 0f01c99
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/renderer/components/controls.tsx b/renderer/components/controls.tsx
@@ -11,6 +11,8 @@ import {
   Circle,
   Square,
   ArrowDownLeft,
+  Lock,
+  Unlock,
   CornerUpRight,
 } from "react-feather"
 
@@ -19,6 +21,7 @@ export default function Controls() {
   // const showActive = useSelector((state) =>
   //   state.isInAny("active", "selecting")
   // )
+  const isFading = useSelector((state) => state.data.isFading)
   const selectedSize = useSelector((state) => state.data.size)
   const selectedColor = useSelector((state) => state.data.color)
   // const canUndo = useSelector((state) => state.can("UNDO"))
@@ -93,6 +96,9 @@ export default function Controls() {
       >
         <Circle />
       </ToolButton>
+      <ToolButton onClick={() => state.send("TOGGLED_FADING")}>
+        {isFading ? <Unlock /> : <Lock />}
+      </ToolButton>
       {/* <ToolButton
         isSelected={selectedTool === "eraser"}
         onClick={() => state.send("SELECTED_ERASER")}

diff --git a/renderer/hooks/useKeyboardEvents.tsx b/renderer/hooks/useKeyboardEvents.tsx
@@ -22,6 +22,11 @@ export default function useKeyboardEvents() {
           state.send("CHANGED_COLOR_KEY", { index: Number(e.key) - 1 })
           break
         }
+        case "f": {
+          if (e.metaKey) {
+            state.send("TOGGLED_FADING")
+          }
+        }
         case "d":
         case "p": {
           state.send("SELECTED_PENCIL")

diff --git a/renderer/lib/state.ts b/renderer/lib/state.ts
@@ -260,17 +260,44 @@ const state = createState({
     marks: {
       initial: "noMarks",
       states: {
-        notFading: {},
+        notFading: {
+          on: {
+            TOGGLED_FADING: {
+              do: "toggleFading",
+              to: "hasMarks",
+            },
+          },
+        },
         noMarks: {
+          on: {
+            TOGGLED_FADING: { do: "toggleFading", to: "notFading" },
+          },
           onEnter: {
             get: "elements",
             secretlyDo: ["clearPreviousMarks", "clearMarksCanvas"],
           },
         },
         hasMarks: {
-          onEnter: {
-            unless: "fadingEnabled",
-            to: "notFading",
+          onEnter: [
+            {
+              unless: "fadingEnabled",
+              to: "notFading",
+            },
+            {
+              unless: "hasMarks",
+              to: "noMarks",
+            },
+          ],
+          on: {
+            TOGGLED_FADING: {
+              get: "elements",
+              secretlyDo: [
+                "toggleFading",
+                "clearMarksCanvas",
+                "drawPreviousMarks",
+              ],
+              to: "notFading",
+            },
           },
           repeat: {
             onRepeat: [
@@ -332,6 +359,14 @@ const state = createState({
   },
   actions: {
     // Fading
+    toggleFading(data) {
+      data.isFading = !data.isFading
+      if (!data.isFading) {
+        for (let mark of data.marks) {
+          mark.strength = 1
+        }
+      }
+    },
     fadeMarks(data) {
       const { fadeDuration } = data
       const delta = 0.016 / fadeDuration
@@ -651,7 +686,7 @@ function getArrowPath(mark: Mark) {
   const [x0, y0, x1, y1] = points
   const angle = Math.atan2(y1 - y0, x1 - x0)
   const distance = Math.hypot(y1 - y0, x1 - x0)
-  const leg = Math.min(distance / 2, 48)
+  const leg = (Math.min(distance / 2, 48) * mark.size) / 16
   const [x2, y2] = projectPoint(x1, y1, angle + Math.PI * 1.2, leg)
   const [x3, y3] = projectPoint(x1, y1, angle - Math.PI * 1.2, leg)