feat(eraser): drawing erasing trail animation effect (#295)

* feat(eraser): drawing eraseing effect and extract laser-pointer class to drawing laser effect
This pull request will implement eraser trail animation effect mentioned in #247

* chore: fix lint errors

* feat: improve laser pointer

Author: pubuzhixing8

package-lock.json

@@ -5,6 +5,7 @@
   "scripts": {
     "start": "nx serve web --host=0.0.0.0",
     "build": "nx run-many -t=build",
+    "lint": "nx run-many --target=lint --all --fix",
     "build:web": "nx build web",
     "test": "nx run-many -t=test",
     "release": "node scripts/release-version.js",
@@ -24,6 +25,7 @@
     "ahooks": "^3.8.0",
     "browser-fs-access": "^0.35.0",
     "classnames": "^2.5.1",
+    "laser-pen": "^1.0.1",
     "localforage": "^1.10.0",
     "mobile-detect": "^1.4.5",
     "open-color": "^1.9.1",

package.json

@@ -39,6 +39,7 @@ import { buildTextLinkPlugin } from './plugins/with-text-link';
 import { LinkPopup } from './components/popup/link-popup/link-popup';
 import { I18nProvider } from './i18n';
 import { Tutorial } from './components/tutorial';
+import { LASER_POINTER_CLASS_NAME } from './utils/laser-pointer';
 
 export type DrawnixProps = {
   value: PlaitElement[];
@@ -156,6 +157,7 @@ export const Drawnix: React.FC<DrawnixProps> = ({
             <TTDDialog container={containerRef.current}></TTDDialog>
             <CleanConfirm container={containerRef.current}></CleanConfirm>
           </Wrapper>
+          <canvas className={`${LASER_POINTER_CLASS_NAME} mouse-course-hidden`}></canvas>
         </div>
       </DrawnixContext.Provider>
     </I18nProvider>

packages/drawnix/src/drawnix.tsx

@@ -10,10 +10,13 @@ import { isDrawingMode } from '@plait/common';
 import { isHitFreehand } from './utils';
 import { Freehand, FreehandShape } from './type';
 import { CoreTransforms } from '@plait/core';
+import { LaserPointer } from '../../utils/laser-pointer';
 
 export const withFreehandErase = (board: PlaitBoard) => {
     const { pointerDown, pointerMove, pointerUp, globalPointerUp } = board;
 
+    const laserPointer = new LaserPointer();
+
     let isErasing = false;
     const elementsToDelete = new Set<string>();
 
@@ -49,6 +52,7 @@ export const withFreehandErase = (board: PlaitBoard) => {
             deleteMarkedElements();
             isErasing = false;
             elementsToDelete.clear();
+            laserPointer.destroy();
         }
     };
 
@@ -60,6 +64,7 @@ export const withFreehandErase = (board: PlaitBoard) => {
             elementsToDelete.clear();
             const currentPoint: Point = [event.x, event.y];
             checkAndMarkFreehandElementsForDeletion(currentPoint);
+            laserPointer.init(board);
             return;
         }
 

packages/drawnix/src/plugins/freehand/with-freehand-erase.ts

@@ -134,6 +134,19 @@
             cursor: zoom-in;
         }
     }
+
+    .laser-pointer {
+        background: transparent;
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 2022;
+        width: 100vw;
+        height: 100vh;
+        &.mouse-course-hidden {
+            pointer-events: none;
+        }
+    }
 }
 
 .plait-board-container {

packages/drawnix/src/styles/index.scss

@@ -0,0 +1,143 @@
+import { PlaitBoard } from '@plait/core';
+import {
+  drainPoints,
+  drawLaserPen,
+  IOriginalPointData,
+  setColor,
+  setDelay,
+  setMaxWidth,
+  setMinWidth,
+  setOpacity,
+  setRoundCap,
+} from 'laser-pen';
+
+export const LASER_POINTER_CLASS_NAME = 'laser-pointer';
+
+const calculateRatio = (context: any): number => {
+  const backingStore =
+    context.backingStorePixelRatio ||
+    context.webkitBackingStorePixelRatio ||
+    context.mozBackingStorePixelRatio ||
+    context.msBackingStorePixelRatio ||
+    context.oBackingStorePixelRatio ||
+    context.backingStorePixelRatio ||
+    1;
+  return (window.devicePixelRatio || 1) / backingStore;
+};
+
+export class LaserPointer {
+  private mouseTrack: IOriginalPointData[] = [];
+  private mouseMoveHandler: ((event: MouseEvent) => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+  private cvsDom: HTMLCanvasElement | null = null;
+  private ctx: CanvasRenderingContext2D | null = null;
+  private canvasPos: DOMRect | null = null;
+  private drawing = false;
+  private container: HTMLElement | null = null;
+
+  public init(board: PlaitBoard): void {
+    this.container = PlaitBoard.getBoardContainer(board).closest(
+      '.drawnix'
+    ) as HTMLElement;
+    this.cvsDom = this.container.querySelector(
+      `.${LASER_POINTER_CLASS_NAME}`
+    ) as HTMLCanvasElement;
+    this.ctx = this.cvsDom.getContext('2d') as CanvasRenderingContext2D;
+    this.canvasPos = this.cvsDom.getBoundingClientRect();
+
+    this.mouseMoveHandler = (event: MouseEvent) => {
+      if (!this.canvasPos) return;
+      const relativeX = event.clientX - this.canvasPos.x;
+      const relativeY = event.clientY - this.canvasPos.y;
+      this.mouseTrack.push({
+        x: relativeX,
+        y: relativeY,
+        time: Date.now(),
+      });
+      this.ctx && this.startDraw();
+    };
+
+    this.resizeHandler = () => this.setCanvasSize();
+    this.container.addEventListener('pointermove', this.mouseMoveHandler);
+    window.addEventListener('resize', this.resizeHandler);
+
+    this.setCanvasSize();
+  }
+
+  public destroy(): void {
+    if (this.mouseMoveHandler && this.container) {
+      this.container.removeEventListener('pointermove', this.mouseMoveHandler);
+      this.mouseMoveHandler = null;
+    }
+
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+
+    if (this.ctx && this.cvsDom) {
+      this.ctx.clearRect(0, 0, this.cvsDom.width, this.cvsDom.height);
+    }
+
+    this.cvsDom = null;
+    this.ctx = null;
+    this.canvasPos = null;
+    this.drawing = false;
+  }
+
+  private startDraw(): void {
+    if (!this.drawing) {
+      this.drawing = true;
+      this.draw();
+    }
+  }
+
+  private draw(): void {
+    if (!this.ctx || !this.cvsDom) return;
+
+    this.ctx.clearRect(0, 0, this.cvsDom.width, this.cvsDom.height);
+    let needDrawInNextFrame = false;
+
+    this.mouseTrack = drainPoints(this.mouseTrack);
+    if (this.mouseTrack.length >= 3) {
+      setColor(211, 211, 211);
+      setDelay(180);
+      setRoundCap(true);
+      setMaxWidth(10);
+      setMinWidth(0);
+      setOpacity(0.6);
+      drawLaserPen(this.ctx, this.mouseTrack);
+      needDrawInNextFrame = true;
+    } else {
+      const centerPoint = this.mouseTrack[this.mouseTrack.length - 1];
+      if (!centerPoint) return;
+
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.fillStyle = `rgba(211, 211, 211)`;
+      this.ctx.arc(centerPoint.x, centerPoint.y, 5, 0, Math.PI * 2, false);
+      this.ctx.closePath();
+      this.ctx.fill();
+      this.ctx.restore();
+    }
+
+    if (needDrawInNextFrame) {
+      requestAnimationFrame(() => this.draw());
+    } else {
+      this.drawing = false;
+    }
+  }
+
+  private setCanvasSize(): void {
+    if (!this.cvsDom || !this.ctx) return;
+
+    const rect = this.cvsDom.getBoundingClientRect();
+    const ratio = calculateRatio(this.ctx);
+
+    this.cvsDom.setAttribute('width', `${rect.width * ratio}px`);
+    this.cvsDom.setAttribute('height', `${rect.height * ratio}px`);
+    this.ctx.scale(ratio, ratio);
+
+    this.canvasPos = this.cvsDom.getBoundingClientRect();
+  }
+}