Merge pull request #2 from steveruizok/feature/fadings

Feature/fadings
steveruizok · Feb 12, 2021 · b2c6da3 · b2c6da3
2 parents 8b7e054 + 6330746
commit b2c6da3
Show file tree

Hide file tree

Showing 16 changed files with 4,487 additions and 318 deletions.
diff --git a/app/background.js b/app/background.js
diff --git a/app/background.js.map b/app/background.js.map
diff --git a/electron-builder.yml b/electron-builder.yml
@@ -1,4 +1,4 @@
-appId: com.example.telestrator
+appId: com.okok.telestrator
 productName: Telestrator
 copyright: Copyright © 2020 Steve Ruiz
 directories:

diff --git a/main/background.js b/main/background.js
@@ -17,22 +17,24 @@ if (isProd) {
     width: 1000,
     height: 600,
     transparent: true,
-    false: false,
+    frame: false,
     titleBarStyle: "customButtonsOnHover",
     webPreferences: { enableRemoteModule: true },
     hasShadow: false,
+    fullscreenable: false,
+    title: "Telestrator",
   })
 
+  mainWindow.maximize()
   mainWindow.setIgnoreMouseEvents(true, { forward: true })
   mainWindow.setAlwaysOnTop(true, "floating")
-  mainWindow.maximize()
 
   if (isProd) {
     await mainWindow.loadURL("app://./home.html")
   } else {
     const port = process.argv[2]
     await mainWindow.loadURL(`http://localhost:${port}/home`)
-    mainWindow.webContents.openDevTools()
+    mainWindow.webContents.openDevTools({ mode: "detach" })
   }
 })()
 

diff --git a/package.json b/package.json
@@ -7,8 +7,13 @@
   "main": "app/background.js",
   "scripts": {
     "dev": "nextron",
+    "postinstall": "electron-builder install-app-deps",
     "build": "nextron build",
-    "postinstall": "electron-builder install-app-deps"
+    "build:all": "nextron build --all",
+    "build:win32": "nextron build --win --ia32",
+    "build:win64": "nextron build --win --x64",
+    "build:mac": "nextron build --mac --x64",
+    "build:linux": "nextron build --linux"
   },
   "dependencies": {
     "@state-designer/react": "^1.4.5",

diff --git a/renderer/components/canvas.tsx b/renderer/components/canvas.tsx
@@ -1,19 +1,14 @@
-import state from "lib/state"
-import styled from "styled-components"
-import { useStateDesigner } from "@state-designer/react"
 import * as React from "react"
-import usePointer from "hooks/usePointer"
-import { colors, sizes } from "lib/defaults"
-import { Edit2, MinusCircle } from "react-feather"
-
-const Static = { w: 600, h: 400 }
+import styled from "styled-components"
+import state, { useSelector } from "lib/state"
+import Cursor from "./cursor"
 
 export default function App() {
-  const local = useStateDesigner(state)
   const rCanvasFrame = React.useRef<HTMLDivElement>()
   const rMarksCanvas = React.useRef<HTMLCanvasElement>()
   const rCurrentCanvas = React.useRef<HTMLCanvasElement>()
-  const mvPoint = usePointer(rCanvasFrame)
+
+  const showCursor = useSelector((state) => state.isInAny("active"))
 
   React.useEffect(() => {
     state.send("LOADED", {
@@ -24,17 +19,12 @@ export default function App() {
     return () => state.send("UNLOADED")
   }, [])
 
-  function handlePointerMove(e: React.PointerEvent<HTMLDivElement>) {
-    state.send("MOVED_CURSOR", { x: mvPoint.x.get(), y: mvPoint.y.get() })
-  }
-
   React.useEffect(() => {
     function handleResize() {
       state.send("RESIZED")
     }
 
     handleResize()
-
     window.addEventListener("resize", handleResize)
     return () => window.removeEventListener("resize", handleResize)
   })
@@ -43,23 +33,33 @@ export default function App() {
     <Layout>
       <CanvasContainer
         ref={rCanvasFrame}
-        onPointerDown={(e) => {
+        onPointerDown={(e) =>
           state.send("STARTED_DRAWING", {
-            x: mvPoint.x.get(),
-            y: mvPoint.y.get(),
+            pressure: e.pressure,
+            tiltX: e.tiltX,
+            tiltY: e.tiltY,
           })
-        }}
+        }
         onPointerUp={(e) =>
           state.send("STOPPED_DRAWING", {
-            x: mvPoint.x.get(),
-            y: mvPoint.y.get(),
+            pressure: e.pressure,
+            tiltX: e.tiltX,
+            tiltY: e.tiltY,
+          })
+        }
+        onPointerMove={(e) =>
+          state.send("MOVED_CURSOR", {
+            pressure: e.pressure,
+            tiltX: e.tiltX,
+            tiltY: e.tiltY,
           })
         }
-        onPointerMove={handlePointerMove}
+        // onPointerLeave={() => state.send("DEACTIVATED")}
       >
         <canvas ref={rMarksCanvas} width={400} height={400} />
         <canvas ref={rCurrentCanvas} width={400} height={400} />
       </CanvasContainer>
+      {showCursor && <Cursor />}
     </Layout>
   )
 }

diff --git a/renderer/components/controls.tsx b/renderer/components/controls.tsx
@@ -1,44 +1,40 @@
-import electron from "electron"
 import state, { useSelector } from "lib/state"
 import styled from "styled-components"
 import * as React from "react"
 import { colors, sizes } from "lib/defaults"
 import {
   X,
   Edit2,
-  MinusCircle,
-  Move,
-  CornerUpLeft,
-  CornerUpRight,
+  Circle,
+  Square,
+  ArrowDownLeft,
+  Lock,
+  Unlock,
 } from "react-feather"
 
 export default function Controls() {
-  const showActive = useSelector((state) =>
-    state.isInAny("active", "selecting")
-  )
+  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 canUndo = useSelector((state) => state.can("UNDO"))
-  const canRedo = useSelector((state) => state.can("REDO"))
   const selectedTool = useSelector((state) =>
-    state.isIn("pencil") ? "pencil" : state.isIn("eraser") ? "eraser" : null
+    state.isIn("pencil")
+      ? "pencil"
+      : state.isIn("rect")
+      ? "rect"
+      : state.isIn("ellipse")
+      ? "ellipse"
+      : state.isIn("eraser")
+      ? "eraser"
+      : state.isIn("arrow")
+      ? "arrow"
+      : null
   )
 
-  // Deactivate when escape is pressed
-  React.useEffect(() => {
-    function releaseControl(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        state.send("DEACTIVATED")
-      }
-    }
-
-    document.addEventListener("keydown", releaseControl)
-    return () => document.removeEventListener("keydown", releaseControl)
-  }, [])
-
   return (
     <ControlsContainer
-      showActive={showActive}
+      data-hide={hideActive}
+      showActive={false}
       onMouseOver={() => state.send("ENTERED_CONTROLS")}
       onMouseLeave={() => state.send("LEFT_CONTROLS")}
       onMouseDown={() => state.send("SELECTED")}
@@ -60,32 +56,32 @@ 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")}
       >
         <Edit2 size={24} />
       </ToolButton>
       <ToolButton
-        isSelected={selectedTool === "eraser"}
-        onClick={() => state.send("SELECTED_ERASER")}
-        onDoubleClick={() => state.send("CLEARED_MARKS")}
+        isSelected={selectedTool === "arrow"}
+        onClick={() => state.send("SELECTED_ARROW")}
+      >
+        <ArrowDownLeft size={24} />
+      </ToolButton>
+      <ToolButton
+        isSelected={selectedTool === "rect"}
+        onClick={() => state.send("SELECTED_RECT")}
       >
-        <MinusCircle size={24} />
+        <Square />
       </ToolButton>
       <ToolButton
-        onPointerEnter={() => state.send("ENTERED_DRAGGING")}
-        onPointerLeave={() => state.send("LEFT_DRAGGING")}
-        onPointerDown={() => state.send("STARTED_DRAGGING")}
-        onPointerUp={() => state.send("STOPPED_DRAGGING")}
+        isSelected={selectedTool === "ellipse"}
+        onClick={() => state.send("SELECTED_ELLIPSE")}
       >
-        <Move size={24} />
+        <Circle />
+      </ToolButton>
+      <ToolButton onClick={() => state.send("TOGGLED_FADING")}>
+        {isFading ? <Unlock /> : <Lock />}
       </ToolButton>
       <ToolButton onClick={() => state.send("DEACTIVATED")}>
         <X size={24} />
@@ -95,7 +91,8 @@ export default function Controls() {
 }
 
 const ControlsContainer = styled.div<{ showActive: boolean }>`
-  cursor: pointer;
+  cursor: none !important;
+  overflow: hidden;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -104,47 +101,57 @@ const ControlsContainer = styled.div<{ showActive: boolean }>`
   display: grid;
   grid-template-columns: 1fr;
   grid-auto-rows: 40px;
-  padding: 8px;
+  padding: 8px 0px;
   opacity: ${({ showActive }) => (showActive ? 1 : 0.2)};
   transition: all 0.25s;
   border-radius: 2px 20px 0 0;
   background-color: rgba(144, 144, 144, 0);
   transform: ${({ showActive }) =>
     showActive ? "translate(0px 0px)" : "translate(-48px, 0px)"};
 
+  & * {
+    cursor: none !important;
+  }
+
+  &[data-hide="true"] {
+    pointer-events: none;
+  }
+
   :hover {
     opacity: 1;
     transform: translate(0px, 0px);
     background-color: rgba(144, 144, 144, 0.1);
   }
 
   button {
-    cursor: pointer;
     position: relative;
     outline: none;
     z-index: 2;
-    border-radius: 100%;
+    padding: 0 8px;
     border: none;
-    padding: 0;
     background-color: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     color: rgb(144, 144, 144, 1);
+
+    &:hover {
+      /* background-color: rgba(144, 144, 144, 0.1); */
+    }
   }
 `
 
 const ColorButton = styled.button<{ isSelected: boolean; color: string }>`
   border: none;
   padding: 0;
   font-weight: bold;
-  cursor: pointer;
   background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   outline: none;
+  padding-left: 8px;
 
   &::after {
     content: "";
@@ -179,9 +186,9 @@ const SizeButton = styled.button<{
     border-radius: 100%;
     position: absolute;
     top: 0;
-    left: 0;
+    left: 8px;
+    right: 8px;
     height: 100%;
-    width: 100%;
     transform: scale(0.85);
     transition: all 0.16s;
     z-index: -1;
@@ -194,6 +201,7 @@ const SizeButton = styled.button<{
   }
 
   &:hover {
+    opacity: 1;
     color: #fff;
   }
 
@@ -210,11 +218,6 @@ const SizeButton = styled.button<{
   &:hover:after {
     transform: scale(1);
   }
-
-  &:hover {
-    opacity: 1;
-    background-color: rgba(255, 255, 255, 0.1);
-  }
 `
 
 const ToolButton = styled.button<{
@@ -238,9 +241,9 @@ const ToolButton = styled.button<{
     border-radius: 100%;
     position: absolute;
     top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
+    left: 8px;
+    height: 40px;
+    width: 40px;
     transform: scale(0.85);
     transition: all 0.16s;
     z-index: -1;
@@ -252,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> 
+*/