From cc91868c63be8f530c8f5bb172a96692970c50a8 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Wed, 12 Mar 2025 22:39:18 +0800
Subject: [PATCH] add Pattern Preview canvas coordinates drawing.

---
 src/components/PatternPreview.module.css |  1 +
 src/components/PatternPreview.tsx        | 61 ++++++++++++++++++++++--
 src/context/ThemeColors.ts               | 23 +++++++++
 3 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 src/context/ThemeColors.ts

diff --git a/src/components/PatternPreview.module.css b/src/components/PatternPreview.module.css
index 1192492..9143740 100644
--- a/src/components/PatternPreview.module.css
+++ b/src/components/PatternPreview.module.css
@@ -1,5 +1,6 @@
 @layer components {
   .pattern_preview {
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
diff --git a/src/components/PatternPreview.tsx b/src/components/PatternPreview.tsx
index fd8c024..b0598ca 100644
--- a/src/components/PatternPreview.tsx
+++ b/src/components/PatternPreview.tsx
@@ -1,17 +1,72 @@
-import { FC } from 'react';
+import { getDefaultStore } from 'jotai';
+import { FC, useEffect, useRef, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { ErrorColorAtom, PrimaryColorAtom } from '../context/ThemeColors';
 import styles from './PatternPreview.module.css';
 
+interface RawPusle {
+  tickOrder: number;
+  x: number;
+  y: number;
+  z: number;
+  frequencyLevel: number;
+}
+
 const canvasSafeBound = {
   coordinate: { pt: 5.5, pr: 5.5, pb: 5.5, pl: 5.5 },
   chart: { pt: 5.5, pr: 5.5, pb: 5.5, pl: 5.5 },
 };
 
+function drawCoordinates(ctx: CanvasRenderingContext2D, width: number, height: width) {
+  const colorStore = getDefaultStore();
+  ctx.clearRect(0, 0, width, height);
+
+  ctx.beginPath();
+  // Draw x axis
+  ctx.moveTo(canvasSafeBound.coordinate.pl, height - canvasSafeBound.coordinate.pb);
+  ctx.lineTo(width - canvasSafeBound.coordinate.pr, height - canvasSafeBound.coordinate.pt);
+
+  ctx.strokeStyle = colorStore.get(PrimaryColorAtom);
+  ctx.stroke();
+
+  ctx.beginPath();
+  // Draw aggressive mark line
+  const tickUnit = (height - canvasSafeBound.coordinate.pt - canvasSafeBound.coordinate.pb) / 31;
+  const highlightY = height - canvasSafeBound.coordinate.pb - 20 * tickUnit;
+  ctx.moveTo(canvasSafeBound.coordinate.pl, highlightY);
+  ctx.lineTo(width - canvasSafeBound.coordinate.pr, highlightY);
+  ctx.strokeStyle = colorStore.get(ErrorColorAtom);
+  ctx.stroke();
+}
+
 const PatternPreview: FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [conatienrRef, { width, height }] = useMeasure();
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      const dpr = window.devicePixelRatio ?? 1;
+      setCanvasSize({ width: (width ?? 0) * dpr, height: (height ?? 0) * dpr });
+      canvas.width = (width ?? 0) * dpr;
+      canvas.height = (height ?? 0) * dpr;
+    }
+  }, [width, height]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      drawCoordinates(ctx, canvasSize.width, canvasSize.height);
+    }
+  }, [canvasSize]);
+
   return (
     <div className={styles.pattern_preview}>
       <h4>Pattern Preview</h4>
-      <div>
-        <canvas />
+      <div className={styles.canvas_wrapper} ref={conatienrRef}>
+        <canvas ref={canvasRef} />
       </div>
     </div>
   );
diff --git a/src/context/ThemeColors.ts b/src/context/ThemeColors.ts
new file mode 100644
index 0000000..01a8dfd
--- /dev/null
+++ b/src/context/ThemeColors.ts
@@ -0,0 +1,23 @@
+import { atomWithRefresh } from 'jotai/utils';
+
+export const PrimaryColorAtom = atomWithRefresh(() =>
+  window.getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim(),
+);
+export const SecondaryColorAtom = atomWithRefresh(() =>
+  window.getComputedStyle(document.documentElement).getPropertyValue('--color-secondary').trim(),
+);
+export const TeritaryColorAtom = atomWithRefresh(() =>
+  window.getComputedStyle(document.documentElement).getPropertyValue('--color-tertiary').trim(),
+);
+export const ErrorColorAtom = atomWithRefresh(() =>
+  window.getComputedStyle(document.documentElement).getPropertyValue('--color-error').trim(),
+);
+export const GentleColorAtom = atomWithRefresh(() =>
+  window.getComputedStyle(document.documentElement).getPropertyValue('--color-gentle').trim(),
+);
+export const AggressiveColorAtom = atomWithRefresh(() =>
+  window.getComputedStyle(document.documentElement).getPropertyValue('--color-aggressive').trim(),
+);
+export const DefensiveColorAtom = atomWithRefresh(() =>
+  window.getComputedStyle(document.documentElement).getPropertyValue('--color-defensive').trim(),
+);