Merge pull request #78 from Ubugeeei/46-draw-stroke-orders

feat: #46 💪 Tecack.drawStrokeOrder and DrawStrokeOrderOptions

Author: ubugeeei

docs/reference/apis.md

@@ -221,6 +221,68 @@ Restores canvas strokes and internal data from existing strokes data.
   tecack.restoreFromStrokes(strokes);
   ```
 
+### Tecack.drawStrokeOrder()
+
+It draws the stroke order on the strokes entered into the Canvas.
+
+- #### Type
+
+  ```ts
+  function drawStrokeOrder(options?: DrawStrokeOrderOptions): void | CanvasCtxNotFoundError;
+  ```
+
+- #### Example
+
+  ```ts
+  tecack.drawStrokeOrder();
+  ```
+
+### DrawStrokeOrderOptions
+
+Options for `Tecack.drawStrokeOrder()`
+
+- #### Type
+
+  ```ts
+  export interface DrawStrokeOrderOptions {
+    withColor?: boolean;
+    colorSet?: Array<string>;
+  }
+  ```
+
+#### DrawStrokeOrderOptions.withColor
+
+When `withColor` is enabled, it draws each stroke in a different color.  
+This is to make it easier to understand which stroke order corresponds to which stroke.  
+Please refer to the `colorSet` to see which colors will be used for the drawing.
+
+default: `false`
+
+#### DrawStrokeOrderOptions.colorSet
+
+This is the set of colors used when `withColor` is enabled.  
+The index of the color set (array) corresponds to the stroke order, and if the stroke order exceeds the length of the color set, it will cycle through.
+
+::: warning
+Please note that the colors (strings) registered as `colorSet` **must be six-digit hexadecimal numbers starting with `#`**.  
+(Shortened three-digit notation, specific color names, and rgb notation cannot be used.)
+:::
+
+default:
+
+```ts
+// prettier-ignore
+/** based on https://kanjivg.tagaini.net/viewer.html */
+[
+  "#bf0000", "#bf5600", "#bfac00", "#7cbf00", "#26bf00",
+  "#00bf2f", "#00bf85", "#00a2bf", "#004cbf", "#0900bf",
+  "#5f00bf", "#b500bf", "#bf0072", "#bf001c", "#bf2626",
+  "#bf6b26", "#bfaf26", "#89bf26", "#44bf26", "#26bf4c",
+  "#26bf91", "#26a8bf", "#2663bf", "#2d26bf", "#7226bf",
+  "#b726bf", "#bf2682", "#bf263d", "#bf4c4c", "#bf804c",
+]
+```
+
 ## @tecack/backend
 
 ### recognize()

packages/frontend/src/index.ts

@@ -7,6 +7,31 @@ export interface TecackOptions {
   backgroundPainter?: (el: HTMLCanvasElement) => void;
 }
 
+export interface DrawStrokeOrderOptions {
+  /** default: `false` */
+  withColor?: boolean;
+
+  /**
+   * default:
+   * ```ts
+   * [
+   *   "#bf0000", "#bf5600", "#bfac00", "#7cbf00", "#26bf00",
+   *   "#00bf2f", "#00bf85", "#00a2bf", "#004cbf", "#0900bf",
+   *   "#5f00bf", "#b500bf", "#bf0072", "#bf001c", "#bf2626",
+   *   "#bf6b26", "#bfaf26", "#89bf26", "#44bf26", "#26bf4c",
+   *   "#26bf91", "#26a8bf", "#2663bf", "#2d26bf", "#7226bf",
+   *   "#b726bf", "#bf2682", "#bf263d", "#bf4c4c", "#bf804c",
+   * ]
+   * ```
+   * color coded stroke colors (for 30 strokes)
+   *
+   * based on https://kanjivg.tagaini.net/viewer.html
+   *
+   * NOTE: must be 6-digit hex color codes (e.g. `#ff0000`)
+   */
+  colorSet?: Array<string>;
+}
+
 export interface Tecack {
   $el: HTMLCanvasElement | null;
 
@@ -35,7 +60,7 @@ export interface Tecack {
   draw: (color?: string) => void | CanvasCtxNotFoundError;
   deleteLast: () => void | CanvasCtxNotFoundError;
   erase: () => void | CanvasCtxNotFoundError;
-  redraw: () => void | CanvasCtxNotFoundError;
+  drawStrokeOrder: (options?: DrawStrokeOrderOptions) => void | CanvasCtxNotFoundError;
   restoreFromStrokes(
     strokesMut: Readonly<Array<TecackStroke>>,
     options?: {
@@ -177,7 +202,14 @@ export function createTecack(options?: TecackOptions): Tecack {
       _canvas && options?.backgroundPainter?.(_canvas);
     },
 
-    redraw: () => {
+    drawStrokeOrder: opt => {
+      const defaultOptions: Required<DrawStrokeOrderOptions> = {
+        withColor: false,
+        colorSet: STROKE_COLORS,
+      };
+      const mergedOptions = { ...defaultOptions, ...opt };
+      const BASE_COLOR = "#333333";
+
       if (!_ctx) {
         return createCanvasError();
       }
@@ -194,7 +226,7 @@ export function createTecack(options?: TecackOptions): Tecack {
 
           _currX = stroke_i[j + 1][0];
           _currY = stroke_i[j + 1][1];
-          tecack.draw(STROKE_COLORS[i]);
+          tecack.draw(mergedOptions.withColor ? mergedOptions.colorSet[i % mergedOptions.colorSet.length] : BASE_COLOR);
         }
       }
 
@@ -209,11 +241,20 @@ export function createTecack(options?: TecackOptions): Tecack {
 
           // outline
           _ctx.lineWidth = 3;
-          _ctx.strokeStyle = _alterHex(STROKE_COLORS[i] ? STROKE_COLORS[i] : "#333333", 60, "dec");
+          _ctx.strokeStyle = _alterHex(
+            mergedOptions.withColor && mergedOptions.colorSet[i % mergedOptions.colorSet.length]
+              ? mergedOptions.colorSet[i % mergedOptions.colorSet.length]
+              : BASE_COLOR,
+            60,
+            "dec",
+          );
           _ctx.strokeText((i + 1).toString(), x, y);
 
           // fill
-          _ctx.fillStyle = STROKE_COLORS[i] ? STROKE_COLORS[i] : "#333";
+          _ctx.fillStyle =
+            mergedOptions.withColor && mergedOptions.colorSet[i % mergedOptions.colorSet.length]
+              ? mergedOptions.colorSet[i % mergedOptions.colorSet.length]
+              : BASE_COLOR;
           _ctx.fillText((i + 1).toString(), x, y);
         }
       }
@@ -283,7 +324,7 @@ export function createTecack(options?: TecackOptions): Tecack {
         normalizedPattern.push(normalized_stroke_i);
       }
       _recordedPattern = normalizedPattern;
-      tecack.redraw();
+      // tecack.redraw(); // FIXME:
     },
 
     getStrokes: () => {