chore: canvas eraser

Author: lencx

src/components/OmbCard/index.scss

@@ -6,6 +6,7 @@
       > div {
         cursor: pointer;
         user-select: none;
+        -webkit-user-select: none;
       }
     }
   }

src/views/canvas/paper/canvas.ts

@@ -55,9 +55,9 @@ export class Brush {
     this.ctx?.clearRect(0, 0, this.canvas?.width || 0, this.canvas?.height || 0);
   }
 
-  eraser = () => {
+  eraser = (isEraser: boolean) => {
     if (!this.ctx) return;
-    this.ctx.globalCompositeOperation = 'destination-out';
+    this.ctx.globalCompositeOperation = isEraser ? 'destination-out' : 'source-over';
   }
 
   run = (method: string, value: any) => {

src/views/canvas/paper/components/ColorPicker/index.scss

@@ -58,6 +58,7 @@
           border: solid 1px #e8eaed;
           cursor: pointer;
           user-select: none;
+          -webkit-user-select: none;
           transition: 100ms ease;
         }
 

src/views/canvas/paper/components/ToolPalette/index.scss

@@ -10,6 +10,8 @@
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   cursor: auto;
+  user-select: none;
+  -webkit-user-select: none;
 
   .color-btn {
     width: 30px;
@@ -36,7 +38,20 @@
   }
 
   .eraser-btn {
-    width: 100px;
+    transform: translateX(-40px);
+    transition: transform 300ms ease-in-out;
+    filter: grayscale(1);
+    padding: 3px 0;
+
+    svg {
+      width: 100px;
+      height: 32px;
+    }
+
+    &.active {
+      transform: translateX(-10px);
+      filter: grayscale(0);
+    }
   }
 }
 

src/views/canvas/paper/components/ToolPalette/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import clsx from 'clsx';
 
 import useI18n from '@/hooks/useI18n';
 import { setCSS } from '@/utils/color';
@@ -11,19 +12,35 @@ import ColorPicker from '../ColorPicker';
 import './index.scss';
 
 interface ToolPaletteProps {
+  onSave: () => void;
+  onEraser: (isEraser: boolean) => void;
   onChange: (key: string, value?: any) => void;
 }
 
-const ToolPalette: React.FC<ToolPaletteProps> = ({ onChange }) => {
+const ToolPalette: React.FC<ToolPaletteProps> = ({
+  onChange,
+  onSave,
+  onEraser,
+}) => {
   const t = useI18n(['common']);
   const [color, setColor] = useState('#000000');
   const [size, setSize] = useState(1);
   const [opacity, setOpacity] = useState(100);
+  const [isEraser, setEraser] = useState(false);
 
   const handleChange = (key: string, value?: any) => {
     onChange && onChange(key, value);
   };
 
+  const handleEraser = () => {
+    setEraser(!isEraser);
+    onEraser && onEraser(!isEraser);
+  };
+
+  const handleSave = () => {
+    onSave && onSave();
+  };
+
   const handleColor = (c: string) => {
     setColor(c);
     handleChange('color', c);
@@ -105,10 +122,13 @@ const ToolPalette: React.FC<ToolPaletteProps> = ({ onChange }) => {
         </button>
       </Popover>
       <div className="omb-tool-line" />
-      <div className="eraser-btn" onClick={() => handleChange('eraser')}>
+      <div
+        className={clsx('eraser-btn', { active: isEraser })}
+        onClick={handleEraser}
+      >
         <EraserIcon />
       </div>
-      <button onClick={() => handleChange('save')}>save</button>
+      <button onClick={handleSave}>save</button>
     </div>
   );
 };

src/views/canvas/paper/index.scss

@@ -1,6 +1,8 @@
 .canvas_paper_screen {
   height: 100vh;
   overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
 
   .omb-canvas-paper {
     cursor: url('./icons/cursor.svg') 3 3, auto;

src/views/canvas/paper/index.tsx

@@ -30,21 +30,26 @@ export default function CanvasPaperView(props: any) {
   }, []);
 
   const handleToolbar = (key: string, val: any) => {
-    if (key === 'save') {
-      const image = InitBrush.save();
-      saveCanvas(filePath, image);
-      return;
-    }
-    if (key === 'eraser') {
-      InitBrush.eraser();
-    }
     InitBrush.run(key, val);
   };
 
+  const handleSave = () => {
+    const image = InitBrush.save();
+    saveCanvas(filePath, image);
+  };
+
+  const handleEraser = (isEraser: boolean) => {
+    InitBrush.eraser(isEraser);
+  };
+
   return (
     <div className="omb-canvas-paper">
       <GoBack />
-      <ToolPalette onChange={handleToolbar} />
+      <ToolPalette
+        onChange={handleToolbar}
+        onEraser={handleEraser}
+        onSave={handleSave}
+      />
       <canvas ref={canvasRef} className="select-none" />
     </div>
   );