Merge pull request #70 from Ubugeeei/69-opt-in-background-painter

feat: #69 💪 TecackOptions.backgroundPainter

docs/reference/apis.md

@@ -9,20 +9,7 @@ Creates Tecack instance for drawing on canvas.
 - #### Type
 
   ```ts
-  function createTecack(): Tecack;
-
-  interface Tecack {
-    mount: (selector: string) => void | InitializeError;
-    deleteLast: () => void | CanvasCtxNotFoundError;
-    erase: () => void | CanvasCtxNotFoundError;
-    getStrokes: () => Readonly<Array<TecackStroke>>;
-    restoreFromStrokes: (strokesMut: Array<TecackStroke>) => void;
-
-    // docs is coming soon...
-    // redraw: () => void | CanvasCtxNotFoundError;
-    // normalizeLinear: () => void;
-    // draw: (color?: string) => void | CanvasCtxNotFoundError;
-  }
+  function createTecack(options?: TecackOptions): Tecack;
   ```
 
 - #### Example
@@ -33,6 +20,34 @@ Creates Tecack instance for drawing on canvas.
   const tecack = createTecack();
   ```
 
+### TecackOptions.backgroundPainter
+
+- #### Type
+
+  ```ts
+  export interface TecackOptions {
+    backgroundPainter?: (el: HTMLCanvasElement) => void;
+  }
+  ```
+
+- #### Example
+
+  if you want to paint fixed background, configure background painter
+
+  ```ts
+  import { createTecack } from "@tecack/frontend";
+
+  const tecack = createTecack({
+    backgroundPainter: canvas => {
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const [w, h] = [el.width, el.height];
+      ctx.fillStyle = "#ccc";
+      ctx.fillRect(0, 0, w, h);
+    },
+  });
+  ```
+
 ### Tecack.mount()
 
 Mounts Tecack instance to canvas element.

examples/_basic/src/main.ts

@@ -5,8 +5,26 @@ import { recognize } from "@tecack/backend";
 import { KANJI_DATA_SET } from "@tecack/dataset";
 import { HIRAGANA_DATA } from "./hiragana";
 
-const tecack = createTecack();
-tecack.mount("#tecack-sample");
+const tecack = createTecack({
+  backgroundPainter: canvas => {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const [w, h] = [canvas.width, canvas.height];
+    ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, w, h);
+    ctx.strokeStyle = "#ccc";
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.moveTo(0, h / 2);
+    ctx.lineTo(w, h / 2);
+    ctx.moveTo(w / 2, 0);
+    ctx.lineTo(w / 2, h);
+    ctx.stroke();
+    ctx.lineWidth = 8;
+    ctx.strokeStyle = "#4bc4cc"; // secondary
+    ctx.strokeRect(0, 0, w, h);
+  },
+});
 
 const candidateContainer = document.getElementById("candidate-container")!;
 
@@ -32,3 +50,4 @@ eraseBtn &&
 
 window.addEventListener("mouseup", () => rec());
 window.addEventListener("touchend", () => rec());
+tecack.mount("#tecack-sample");

packages/frontend/src/index.ts

@@ -3,33 +3,22 @@ import { CanvasCtxNotFoundError, InitializeError } from "./errors";
 
 export * from "./errors";
 
+export interface TecackOptions {
+  backgroundPainter?: (el: HTMLCanvasElement) => void;
+}
+
 export interface Tecack {
-  /**
-   * call Tecack.mount(selector) to initialize a canvas as a Tecack
-   *
-   * `selector` must be the selector attribute of the canvas.
-   *
-   * ex: Tecack.mount('#canvas-1');
-   */
   mount: (selector: string) => void | InitializeError;
   draw: (color?: string) => void | CanvasCtxNotFoundError;
   deleteLast: () => void | CanvasCtxNotFoundError;
   erase: () => void | CanvasCtxNotFoundError;
-
-  /**
-   * redraw to current canvas according to
-   *
-   * what is currently stored in Tecack.recordedPattern
-   *
-   * add numbers to each stroke
-   */
   redraw: () => void | CanvasCtxNotFoundError;
-  getStrokes: () => Readonly<Array<TecackStroke>>;
   restoreFromStrokes(strokesMut: Array<TecackStroke>): void;
+  getStrokes: () => Readonly<Array<TecackStroke>>;
   normalizeLinear: () => void;
 }
 
-export function createTecack(): Tecack {
+export function createTecack(options?: TecackOptions): Tecack {
   // private properties
   let _selector: string;
   let _canvas: HTMLCanvasElement;
@@ -57,7 +46,6 @@ export function createTecack(): Tecack {
   let _dot_flag: boolean;
   let _recordedPattern: Array<TecackStroke>;
   let _currentLine: TecackStroke | null;
-  let _s: string;
 
   // NOTE: Initialized with null or undefined to ensure compatibility with pre-fork implementations.
   const tecack: Tecack = {
@@ -86,6 +74,7 @@ export function createTecack(): Tecack {
       _dot_flag = false;
       _recordedPattern = new Array();
       _currentLine = null;
+      options?.backgroundPainter?.(_canvas);
 
       _canvas.addEventListener(
         "mousemove",
@@ -166,12 +155,13 @@ export function createTecack(): Tecack {
         return createCanvasError();
       }
       _ctx.clearRect(0, 0, _w, _h);
+
+      options?.backgroundPainter?.(_canvas);
       for (var i = 0; i < _recordedPattern.length - 1; i++) {
         var stroke_i = _recordedPattern[i];
         for (var j = 0; j < stroke_i.length - 1; j++) {
           _prevX = stroke_i[j][0];
           _prevY = stroke_i[j][1];
-
           _currX = stroke_i[j + 1][0];
           _currY = stroke_i[j + 1][1];
           tecack.draw();
@@ -186,6 +176,7 @@ export function createTecack(): Tecack {
       }
       _ctx.clearRect(0, 0, _w, _h);
       _recordedPattern.length = 0;
+      options?.backgroundPainter?.(_canvas);
     },
 
     redraw: () => {
@@ -194,6 +185,7 @@ export function createTecack(): Tecack {
       }
       _ctx.clearRect(0, 0, _w, _h);
 
+      options?.backgroundPainter?.(_canvas);
       // draw strokes
       for (var i = 0; i < _recordedPattern.length; i++) {
         var stroke_i = _recordedPattern[i];
@@ -229,6 +221,25 @@ export function createTecack(): Tecack {
       }
     },
 
+    restoreFromStrokes: strokesMut => {
+      if (!_ctx) {
+        return createCanvasError();
+      }
+      _ctx.clearRect(0, 0, _w, _h);
+      options?.backgroundPainter?.(_canvas);
+      _recordedPattern = strokesMut;
+      for (var i = 0; i < _recordedPattern.length; i++) {
+        var stroke_i = _recordedPattern[i];
+        for (var j = 0; j < stroke_i.length - 1; j++) {
+          _prevX = stroke_i[j][0];
+          _prevY = stroke_i[j][1];
+          _currX = stroke_i[j + 1][0];
+          _currY = stroke_i[j + 1][1];
+          tecack.draw();
+        }
+      }
+    },
+
     normalizeLinear: () => {
       var normalizedPattern = new Array();
       _newHeight = 256;
@@ -279,20 +290,6 @@ export function createTecack(): Tecack {
     getStrokes: () => {
       return _recordedPattern;
     },
-
-    restoreFromStrokes: strokesMut => {
-      _recordedPattern = strokesMut;
-      for (var i = 0; i < _recordedPattern.length; i++) {
-        var stroke_i = _recordedPattern[i];
-        for (var j = 0; j < stroke_i.length - 1; j++) {
-          _prevX = stroke_i[j][0];
-          _prevY = stroke_i[j][1];
-          _currX = stroke_i[j + 1][0];
-          _currY = stroke_i[j + 1][1];
-          tecack.draw();
-        }
-      }
-    },
   };
 
   const _find_x_y = (res: string, e: MouseEvent | TouchEvent): void | CanvasCtxNotFoundError => {