Cleanup, keyboard shortcuts

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

Hide file tree

Showing 3 changed files with 43 additions and 85 deletions.
diff --git a/renderer/components/controls.tsx b/renderer/components/controls.tsx
@@ -5,27 +5,18 @@ import { colors, sizes } from "lib/defaults"
 import {
   X,
   Edit2,
-  MinusCircle,
-  Settings,
-  CornerUpLeft,
   Circle,
   Square,
   ArrowDownLeft,
   Lock,
   Unlock,
-  CornerUpRight,
 } from "react-feather"
 
 export default function Controls() {
   const hideActive = useSelector((state) => state.isIn("drawing"))
-  // 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"))
-  // const canRedo = useSelector((state) => state.can("REDO"))
   const selectedTool = useSelector((state) =>
     state.isIn("pencil")
       ? "pencil"
@@ -65,13 +56,6 @@ export default function Controls() {
           color={selectedColor}
         />
       ))}
-      {/* <ToolButton disabled={!canUndo} onClick={() => state.send("UNDO")}>
-        <CornerUpLeft />
-      </ToolButton>
-      <ToolButton disabled={!canRedo} onClick={() => state.send("REDO")}>
-        <CornerUpRight />
-      </ToolButton> */}
-
       <ToolButton
         isSelected={selectedTool === "pencil"}
         onClick={() => state.send("SELECTED_PENCIL")}
@@ -99,16 +83,6 @@ export default function Controls() {
       <ToolButton onClick={() => state.send("TOGGLED_FADING")}>
         {isFading ? <Unlock /> : <Lock />}
       </ToolButton>
-      {/* <ToolButton
-        isSelected={selectedTool === "eraser"}
-        onClick={() => state.send("SELECTED_ERASER")}
-        onDoubleClick={() => state.send("MEDIUM_CLEARED")}
-      >
-        <MinusCircle size={24} />
-      </ToolButton> */}
-      {/* <ToolButton>
-        <Settings size={24} />
-      </ToolButton> */}
       <ToolButton onClick={() => state.send("DEACTIVATED")}>
         <X size={24} />
       </ToolButton>
@@ -281,3 +255,25 @@ const ToolButton = styled.button<{
     background-color: rgba(144, 144, 144, 0.2);
   }
 `
+
+/* 
+const canUndo = useSelector((state) => state.can("UNDO"))
+const canRedo = useSelector((state) => state.can("REDO"))
+
+<ToolButton disabled={!canUndo} onClick={() => state.send("UNDO")}>
+  <CornerUpLeft />
+</ToolButton>
+<ToolButton disabled={!canRedo} onClick={() => state.send("REDO")}>
+  <CornerUpRight />
+</ToolButton>
+<ToolButton
+  isSelected={selectedTool === "eraser"}
+  onClick={() => state.send("SELECTED_ERASER")}
+  onDoubleClick={() => state.send("MEDIUM_CLEARED")}
+>
+  <MinusCircle size={24} />
+</ToolButton> 
+<ToolButton>
+  <Settings size={24} />
+</ToolButton> 
+*/
diff --git a/renderer/hooks/useKeyboardEvents.tsx b/renderer/hooks/useKeyboardEvents.tsx
@@ -19,7 +19,11 @@ export default function useKeyboardEvents() {
         case "5":
         case "6":
         case "7": {
-          state.send("CHANGED_COLOR_KEY", { index: Number(e.key) - 1 })
+          if (e.metaKey) {
+            state.send("CHANGED_SIZE_KEY", { index: Number(e.key) - 1 })
+          } else {
+            state.send("CHANGED_COLOR_KEY", { index: Number(e.key) - 1 })
+          }
           break
         }
         case "f": {
@@ -40,22 +44,15 @@ export default function useKeyboardEvents() {
           state.send("SELECTED_RECT")
           break
         }
-        case "e": {
-          if (e.metaKey) {
-            state.send("SOFT_CLEARED")
-          } else {
-            state.send("SELECTED_ELLIPSE")
-          }
-          break
-        }
         case "e": {
           if (e.metaKey) {
             if (e.shiftKey) {
               state.send("HARD_CLEARED")
+            } else {
+              state.send("SOFT_CLEARED")
             }
-            state.send("SOFT_CLEARED")
           } else {
-            state.send("SELECTED_ERASER")
+            state.send("SELECTED_ELLIPSE")
           }
           break
         }

diff --git a/renderer/lib/state.ts b/renderer/lib/state.ts
@@ -105,6 +105,7 @@ const state = createState({
               on: {
                 DEACTIVATED: { to: "inactive" },
                 CHANGED_COLOR_KEY: { do: "setColorFromKey" },
+                CHANGED_SIZE_KEY: { do: "setSizeFromKey" },
                 UNDO: {
                   get: "elements",
                   if: "hasMarks",
@@ -418,6 +419,13 @@ const state = createState({
         data.color = keys[index]
       }
     },
+    setSizeFromKey(data, payload: { index: number }) {
+      const { index } = payload
+      const keys = Object.values(defaultValues.sizes)
+      if (keys[index]) {
+        data.size = keys[index]
+      }
+    },
     setColor(data, payload) {
       data.color = payload
     },
@@ -699,47 +707,6 @@ function getArrowPath(mark: Mark) {
   return path
 }
 
-// // Draw a mark onto the given canvas
-// function drawMark(
-//   ctx: CanvasRenderingContext2D,
-//   mark: Mark,
-//   layer: "current" | "history"
-// ) {
-//   ctx.beginPath()
-
-//   const pts = layer === "current" ? cSpline(mark.points) : mark.points
-
-//   const [x, y, ...rest] = pts
-
-//   ctx.moveTo(x, y)
-
-//   for (let i = 0; i < rest.length - 1; i += 2) {
-//     ctx.lineTo(rest[i], rest[i + 1])
-//   }
-
-//   ctx.lineWidth = mark.size
-//   ctx.strokeStyle = mark.color
-//   ctx.globalCompositeOperation = "source-over"
-//   if (mark.eraser) {
-//     if (layer !== "current") {
-//       ctx.globalCompositeOperation = "destination-out"
-//     }
-//     ctx.strokeStyle = "rgba(144, 144, 144, 1)"
-//   }
-//   ctx.stroke()
-//   ctx.restore()
-// }
-
-// // Draw a mark onto the given canvas
-// function drawCompleteMark(ctx: CanvasRenderingContext2D, mark: CompleteMark) {
-//   // Draw Path
-// }
-
-state.onUpdate((update) => console.log(update.active, update.log[0]))
-
-export const useSelector = createSelectorHook(state)
-export default state
-
 const easeOutQuad = (t: number) => t * (2 - t)
 
 export function getPointer() {
@@ -751,13 +718,11 @@ export function getPointer() {
   }
 }
 
-/**
- * Move a point in an angle by a distance.
- * @param x0
- * @param y0
- * @param a angle (radians)
- * @param d distance
- */
 export function projectPoint(x0: number, y0: number, a: number, d: number) {
   return [Math.cos(a) * d + x0, Math.sin(a) * d + y0]
 }
+
+export const useSelector = createSelectorHook(state)
+export default state
+
+// state.onUpdate((update) => console.log(update.active, update.log[0]))