add Pattern Preview canvas coordinates drawing.

src/components/PatternPreview.module.css

@@ -1,5 +1,6 @@
 @layer components {
   .pattern_preview {
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;

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>
   );

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(),
+);