chore: painting cache

2024-12-27 14:56:06 +08:00
parent 542f048a67
commit bca56bfaad
17 changed files with 1411 additions and 1047 deletions
@@ -90,7 +90,8 @@ const AutoImage: React.FC<
      fallback={fallbackImg}
      crossOrigin="anonymous"
      preview={
-        preview ?? {
+        preview &&
+        !isError && {
          mask: <EyeOutlined />,
          toolbarRender: (
            _,
@@ -15,6 +15,22 @@
    right: 20px;
  }

+  .small-progress-wrap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--ant-color-fill-secondary);
+
+    .ant-progress-text {
+      color: var(--color-white-secondary);
+    }
+  }
+
  .img {
    display: flex;
    width: auto;
@@ -1,5 +1,5 @@
 import { CloseCircleOutlined } from '@ant-design/icons';
-import { Progress, Tooltip } from 'antd';
+import { Progress } from 'antd';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback } from 'react';
@@ -64,7 +64,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {

  const handleResize = useCallback(
    (size: { width: number; height: number }) => {
-      if (!autoSize) return;
+      if (!autoSize || !size.width || !size.height) return;

      const { width: containerWidth, height: containerHeight } = size;
      const { width: originalWidth, height: originalHeight } = props;
@@ -79,6 +79,9 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
      const newWidth = originalWidth * scale;
      const newHeight = originalHeight * scale;

+      if (newWidth === imgSize.width && newHeight === imgSize.height) {
+        return;
+      }
      setImgSize({
        width: newWidth,
        height: newHeight
@@ -131,43 +134,15 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                  overflow: 'hidden'
                }}
              >
-                {progressType === 'dashboard' ? (
-                  <Progress
-                    percent={progress}
-                    type="dashboard"
-                    steps={{ count: 50, gap: 2 }}
-                    format={() => (
-                      <span className="font-size-20">{progress}%</span>
-                    )}
-                    trailColor="var(--ant-color-fill-secondary)"
-                  />
-                ) : (
-                  <span
-                    className="progress-wrapper"
-                    style={{ bottom: 'unset' }}
-                  >
-                    <Tooltip title={`${progress}%`} open={true}>
-                      <Progress
-                        style={{
-                          paddingInline: 0,
-                          borderRadius: 12,
-                          display: 'flex',
-                          alignItems: 'center',
-                          backgroundColor: 'rgba(0,0,0,0.5)'
-                        }}
-                        percent={progress}
-                        percentPosition={{
-                          align: 'center',
-                          type: 'inner'
-                        }}
-                        type="line"
-                        size={[undefined, 6]}
-                        strokeLinecap="round"
-                        strokeColor="var(--color-white-1)"
-                      />
-                    </Tooltip>
-                  </span>
-                )}
+                <Progress
+                  percent={progress}
+                  type="dashboard"
+                  steps={{ count: 50, gap: 2 }}
+                  format={() => (
+                    <span className="font-size-20">{progress}%</span>
+                  )}
+                  trailColor="var(--ant-color-fill-secondary)"
+                />
              </span>
            ) : (
              <span
@@ -187,27 +162,18 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                  onLoad={handleOnLoad}
                />
                {progress && progress < 100 && (
-                  <span className="progress-wrapper">
-                    <Tooltip title={`${progress}%`} open={true}>
-                      <Progress
-                        style={{
-                          paddingInline: 0,
-                          borderRadius: 12,
-                          display: 'flex',
-                          alignItems: 'center',
-                          backgroundColor: 'rgba(0,0,0,0.5)'
-                        }}
-                        percent={progress}
-                        percentPosition={{
-                          align: 'center',
-                          type: 'inner'
-                        }}
-                        type="line"
-                        size={[undefined, 6]}
-                        strokeLinecap="round"
-                        strokeColor="var(--color-white-1)"
-                      />
-                    </Tooltip>
+                  <span className="small-progress-wrap">
+                    <Progress
+                      percent={progress}
+                      type="dashboard"
+                      size="small"
+                      steps={{ count: 25, gap: 3 }}
+                      format={() => (
+                        <span className="font-size-12">{progress}%</span>
+                      )}
+                      strokeColor="var(--color-white-secondary)"
+                      trailColor="var(--ant-color-fill-secondary)"
+                    />
                  </span>
                )}
              </span>
@@ -1,308 +1,374 @@
 import {
  DownloadOutlined,
  FormatPainterOutlined,
-  SaveOutlined,
  SyncOutlined,
  UndoOutlined
 } from '@ant-design/icons';
 import { Button, Slider, Tooltip } from 'antd';
+import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import IconFont from '../icon-font';
 import './index.less';

 type Point = { x: number; y: number };
-type Stroke = { start: Point; end: Point };
+type Stroke = Point[];

 type CanvasImageEditorProps = {
  imageSrc: string;
  disabled?: boolean;
  onSave: (imageData: string) => void;
  uploadButton: React.ReactNode;
+  imageStatus: {
+    isOriginal: boolean;
+    isResetNeeded: boolean;
+  };
 };

+const COLOR = 'rgba(0, 0, 255, 0.3)';
+
 const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
  imageSrc,
  disabled,
+  imageStatus,
  onSave,
  uploadButton
 }) => {
-  const COLOR = 'rgba(0, 0, 255, 0.3)';
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [lineWidth, setLineWidth] = useState<number>(30);
-  const [strokes, setStrokes] = useState<Stroke[]>([]);
  const isDrawing = useRef<boolean>(false);
-  const lastPoint = useRef<Point | null>(null);
-  const imgLoaded = useRef<boolean>(false);
-  const currentPoint = useRef<Point | null>(null);
-  const [cursorVisible, setCursorVisible] = useState(false);
-  const [cursorPosition, setCursorPosition] = useState<Point | null>(null);
+  const currentStroke = useRef<Point[]>([]);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
+  const strokesRef = useRef<Stroke[]>([]);
+  const offscreenCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const autoScale = useRef<number>(1);
+  const cursorRef = useRef<HTMLDivElement>(null);
+  const [imgLoaded, setImgLoaded] = useState(false);

-  useEffect(() => {
-    console.log('Image src:', imageSrc);
-    if (!containerRef.current || !canvasRef.current) return;
-    imgLoaded.current = false;
-    const canvas = canvasRef.current;
-    const overlayCanvas = overlayCanvasRef.current;
-    const ctx = canvas!.getContext('2d');
+  const getTransformedPoint = (event: React.MouseEvent<HTMLCanvasElement>) => {
+    const overlayCanvas = overlayCanvasRef.current!;
+    const rect = overlayCanvas.getBoundingClientRect();

-    const img = new Image();
-    img.src = imageSrc;
-    img.onload = () => {
-      const container = containerRef.current;
-      const scale = Math.min(
-        container!.offsetWidth / img.width,
-        container!.offsetHeight / img.height,
-        1
-      );
-      canvas!.width = img.width * scale;
-      canvas!.height = img.height * scale;
-      overlayCanvas!.width = canvas!.width;
-      overlayCanvas!.height = canvas!.height;
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;

-      ctx!.clearRect(0, 0, canvas.width, canvas.height);
-      ctx!.drawImage(img, 0, 0, canvas!.width, canvas!.height);
-      imgLoaded.current = true;
-    };
-  }, [imageSrc, containerRef.current, canvasRef.current]);
+    const transformedX = x - overlayCanvas.width / 2;
+    const transformedY = y - overlayCanvas.height / 2;

-  const handleResize = useCallback(() => {
-    const container = containerRef.current;
-    const canvas = canvasRef.current;
-    const overlayCanvas = overlayCanvasRef.current;
+    console.log('Mouse Coordinates (Transformed):', transformedX, transformedY);

-    if (
-      !container ||
-      !canvas ||
-      !overlayCanvas ||
-      !overlayCanvas.width ||
-      !overlayCanvas.height
-    )
-      return;
-    console.log(
-      'disconnect:',
-      container,
-      canvas,
-      overlayCanvas,
-      overlayCanvas.width,
-      overlayCanvas.height
-    );
-
-    // Save current overlay content
-    const imgData = overlayCanvas
-      .getContext('2d')!
-      .getImageData(0, 0, overlayCanvas.width, overlayCanvas.height);
-
-    const img = new Image();
-    img.src = imageSrc;
-
-    img.onload = () => {
-      // Recalculate scale
-      const scale = Math.min(
-        container.offsetWidth / img.width,
-        container.offsetHeight / img.height,
-        1
-      );
-
-      // Update canvas dimensions
-      canvas.width = img.width * scale;
-      canvas.height = img.height * scale;
-      overlayCanvas.width = canvas.width;
-      overlayCanvas.height = canvas.height;
-
-      // Redraw background image
-      const ctx = canvas.getContext('2d');
-      ctx!.clearRect(0, 0, canvas.width, canvas.height);
-      ctx!.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-      // Restore overlay content
-      overlayCanvas.getContext('2d')!.putImageData(imgData, 0, 0);
-    };
-  }, [imageSrc, containerRef.current, canvasRef.current]);
-
-  const handleMouseEnter = () => {
-    setCursorVisible(true);
+    return { x: transformedX, y: transformedY };
  };

-  const mapMousePosition = (
-    e: React.MouseEvent<HTMLCanvasElement>,
-    canvas: HTMLCanvasElement
-  ) => {
-    const rect = canvas.getBoundingClientRect();
-    const scaleX = canvas.width / rect.width;
-    const scaleY = canvas.height / rect.height;
-
-    return {
-      x: (e.clientX - rect.left) * scaleX,
-      y: (e.clientY - rect.top) * scaleY
-    };
+  const handleMouseEnter = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    overlayCanvasRef.current!.style.cursor = 'none';
+    cursorRef.current!.style.display = 'block';
+    cursorRef.current!.style.top = `${e.clientY - lineWidth / 2}px`;
+    cursorRef.current!.style.left = `${e.clientX - lineWidth / 2}px`;
  };

  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    const { offsetX, offsetY } = e.nativeEvent;
-    setCursorPosition({ x: offsetX, y: offsetY });
+    overlayCanvasRef.current!.style.cursor = 'none';
+    cursorRef.current!.style.display = 'block';
+    cursorRef.current!.style.top = `${e.clientY - lineWidth / 2}px`;
+    cursorRef.current!.style.left = `${e.clientX - lineWidth / 2}px`;
  };

  const handleMouseLeave = () => {
-    setCursorVisible(false);
-    setCursorPosition(null);
+    overlayCanvasRef.current!.style.cursor = 'default';
+    cursorRef.current!.style.display = 'none';
  };

-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      handleResize();
-    });
+  const createOffscreenCanvas = () => {
+    if (offscreenCanvasRef.current === null) {
+      offscreenCanvasRef.current = document.createElement('canvas');
+      offscreenCanvasRef.current.width = overlayCanvasRef.current!.width;
+      offscreenCanvasRef.current.height = overlayCanvasRef.current!.height;
+      const offscreenCtx = offscreenCanvasRef.current.getContext('2d')!;
+      offscreenCtx.translate(
+        overlayCanvasRef.current!.width / 2,
+        overlayCanvasRef.current!.height / 2
+      );
+    }
+  };

-    const container = containerRef.current;
-    if (container) resizeObserver.observe(container);
+  const setCanvasCenter = useCallback(() => {
+    if (!canvasRef.current || !overlayCanvasRef.current) return;

-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [handleResize, strokes, containerRef.current]);
+    const overlayCtx = overlayCanvasRef.current!.getContext('2d');
+    const ctx = canvasRef.current!.getContext('2d');
+    const offscreenCtx = offscreenCanvasRef.current!.getContext('2d');
+
+    // Set the origin to the center
+    overlayCtx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
+    ctx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
+    offscreenCtx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
+  }, [canvasRef.current, overlayCanvasRef.current]);
+
+  const scaleCanvasSize = useCallback(() => {
+    const canvas = canvasRef.current!;
+    const offscreenCanvas = offscreenCanvasRef.current!;
+    const overlayCanvas = overlayCanvasRef.current!;
+
+    overlayCanvas.width = canvas.width;
+    overlayCanvas.height = canvas.height;
+
+    offscreenCanvas.width = canvas.width;
+    offscreenCanvas.height = canvas.height;
+  }, [canvasRef.current, overlayCanvasRef.current, offscreenCanvasRef.current]);
+
+  const setStrokes = (strokes: Stroke[]) => {
+    strokesRef.current = strokes;
+  };
+
+  const scaleLineWidth = useCallback(() => {
+    // setLineWidth(lineWidth * autoScale.current);
+  }, [lineWidth]);

  const generateMask = useCallback(() => {
-    const canvas = overlayCanvasRef.current!;
-    const finalImage = document.createElement('canvas');
-    finalImage.width = canvas.width;
-    finalImage.height = canvas.height;
-    const finalCtx = finalImage.getContext('2d');
-
-    // Create the transparent overlay
-    finalCtx!.fillStyle = 'black';
-    finalCtx!.fillRect(0, 0, finalImage.width, finalImage.height);
-    finalCtx!.globalCompositeOperation = 'destination-out';
-    finalCtx!.drawImage(canvas, 0, 0);
-
-    onSave(finalImage.toDataURL('image/png'));
-  }, [onSave]);
-
-  const downloadMask = useCallback(() => {
-    const canvas = overlayCanvasRef.current!;
+    const overlayCanvas = overlayCanvasRef.current!;
    const maskCanvas = document.createElement('canvas');
-    maskCanvas.width = canvas.width;
-    maskCanvas.height = canvas.height;
+    maskCanvas.width = overlayCanvas.width;
+    maskCanvas.height = overlayCanvas.height;
    const maskCtx = maskCanvas.getContext('2d');

-    // set the background to black
+    // Create the transparent overlay
    maskCtx!.fillStyle = 'black';
    maskCtx!.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
-
    maskCtx!.globalCompositeOperation = 'destination-out';
-    maskCtx!.drawImage(canvas, 0, 0);
+    maskCtx!.drawImage(overlayCanvas, 0, 0);
+
+    return maskCanvas.toDataURL('image/png');
+  }, []);
+
+  const saveMask = useCallback(() => {
+    const mask = generateMask();
+    onSave(mask);
+  }, [onSave, generateMask]);
+
+  const downloadMask = useCallback(() => {
+    const mask = generateMask();

    const link = document.createElement('a');
    link.download = 'mask.png';
-    link.href = maskCanvas.toDataURL('image/png');
+    link.href = mask;
    link.click();
-  }, []);
+  }, [generateMask]);
+
+  const drawStroke = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      stroke: Stroke | Point[],
+      options: {
+        lineWidth: number;
+        color: string;
+        compositeOperation: 'source-over' | 'destination-out';
+      }
+    ) => {
+      const { lineWidth, color, compositeOperation } = options;
+      ctx.lineWidth = lineWidth;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.globalCompositeOperation = compositeOperation;
+
+      ctx.beginPath();
+
+      stroke.forEach((point, i) => {
+        console.log('Drawing Point:', point);
+        if (i === 0) {
+          ctx.moveTo(point.x, point.y);
+        } else {
+          ctx.lineTo(point.x, point.y);
+        }
+      });
+      if (compositeOperation === 'source-over') {
+        ctx.strokeStyle = color;
+      }
+      ctx.stroke();
+    },
+    []
+  );
+
+  const drawLine = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      point: Point,
+      options: {
+        lineWidth: number;
+        color: string;
+        compositeOperation: 'source-over' | 'destination-out';
+      }
+    ) => {
+      const { lineWidth, color, compositeOperation } = options;
+
+      ctx.lineWidth = lineWidth;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.globalCompositeOperation = compositeOperation;
+
+      ctx.lineTo(point.x, point.y);
+      if (compositeOperation === 'source-over') {
+        ctx.strokeStyle = color;
+      }
+      ctx.stroke();
+    },
+    [lineWidth]
+  );

  const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!isDrawing.current || !lastPoint.current || !currentPoint.current)
-      return;
+    if (!isDrawing.current) return;
+
+    const { x, y } = getTransformedPoint(e);
+    console.log('Drawing:', e.nativeEvent, { x, y });
+    currentStroke.current.push({
+      x,
+      y
+    });

-    const { offsetX, offsetY } = e.nativeEvent;
-    currentPoint.current = { x: offsetX, y: offsetY };
    const ctx = overlayCanvasRef.current!.getContext('2d');

-    ctx!.save(); // 保存当前状态
+    ctx!.save();

-    // 1. 清除当前路径重叠的部分
-    ctx!.globalCompositeOperation = 'destination-out';
-    ctx!.lineWidth = lineWidth;
-    ctx!.lineCap = 'round';
-    ctx!.lineJoin = 'round';
+    drawLine(
+      ctx!,
+      { x, y },
+      { lineWidth, color: COLOR, compositeOperation: 'destination-out' }
+    );
+    drawLine(
+      ctx!,
+      { x, y },
+      { lineWidth, color: COLOR, compositeOperation: 'source-over' }
+    );

-    ctx!.beginPath();
-    ctx!.moveTo(lastPoint.current.x, lastPoint.current.y);
-    ctx!.lineTo(offsetX, offsetY);
-    ctx!.stroke();
-
-    // 2. 重新绘制带颜色的路径
-    ctx!.globalCompositeOperation = 'source-over';
-    ctx!.strokeStyle = COLOR;
-    ctx!.beginPath();
-    ctx!.moveTo(lastPoint.current.x, lastPoint.current.y);
-    ctx!.lineTo(offsetX, offsetY);
-    ctx!.stroke();
-
-    ctx!.restore(); // 恢复状态
-    // lastPoint.current = { x: offsetX, y: offsetY };
+    ctx!.restore();
  };

  const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
    isDrawing.current = true;
-    lastPoint.current = null;
-    currentPoint.current = null;
-    const { offsetX, offsetY } = e.nativeEvent;
-    console.log('Start Drawing:', { x: offsetX, y: offsetY });
-    lastPoint.current = { x: offsetX, y: offsetY };
-    currentPoint.current = { x: offsetX, y: offsetY };
+
+    currentStroke.current = [];
+    const { x, y } = getTransformedPoint(e);
+    currentStroke.current.push({
+      x,
+      y
+    });
+
+    const ctx = overlayCanvasRef.current!.getContext('2d');
+    ctx!.beginPath();
+    ctx!.moveTo(x, y);
+
    draw(e);
  };

-  const endDrawing = () => {
-    console.log('End Drawing:', lastPoint.current);
-    if (!lastPoint.current || !currentPoint.current) return;
+  const endDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    console.log('End Drawing:', e);
+    if (!isDrawing.current) {
+      return;
+    }

    isDrawing.current = false;
-    const copyLastPoint = { ...lastPoint.current };
-    const copyCurrentPoint = { ...currentPoint.current };
-    setStrokes((prevStrokes) => [
-      ...prevStrokes,
-      {
-        start: { x: copyLastPoint!.x, y: copyLastPoint!.y },
-        end: { x: copyCurrentPoint!.x, y: copyCurrentPoint!.y }
-      }
-    ]);
-    lastPoint.current = null;
-    currentPoint.current = null;

-    generateMask();
+    strokesRef.current.push(_.cloneDeep(currentStroke.current));
+
+    currentStroke.current = [];
+
+    saveMask();
  };

-  const onClear = () => {
+  const clearOverlayCanvas = useCallback(() => {
    const ctx = overlayCanvasRef.current!.getContext('2d');
    ctx!.clearRect(
-      0,
-      0,
+      -overlayCanvasRef.current!.width / 2,
+      -overlayCanvasRef.current!.height / 2,
      overlayCanvasRef.current!.width,
      overlayCanvasRef.current!.height
    );
+  }, []);
+
+  const clearCanvas = useCallback(() => {
+    const canvas = canvasRef.current!;
+    const ctx = canvasRef.current!.getContext('2d');
+    ctx!.clearRect(
+      -canvas.width / 2,
+      -canvas.height / 2,
+      canvas.width,
+      canvas.height
+    );
+  }, []);
+
+  const clearOffscreenCanvas = useCallback(() => {
+    const offscreenCanvas = offscreenCanvasRef.current!;
+    const offscreenCtx = offscreenCanvas.getContext('2d')!;
+
+    offscreenCtx.clearRect(
+      -offscreenCanvas.width / 2,
+      -offscreenCanvas.height / 2,
+      offscreenCanvas.width,
+      offscreenCanvas.height
+    );
+  }, []);
+
+  const onReset = useCallback(() => {
+    clearOverlayCanvas();
+    console.log('Resetting strokes');
    setStrokes([]);
-    lastPoint.current = null;
-  };
+    currentStroke.current = [];
+  }, []);
+
+  const redrawStrokes = useCallback(
+    (strokes: Stroke[], type?: string) => {
+      console.log('Redrawing strokes:', strokes, type);
+      if (!offscreenCanvasRef.current) {
+        createOffscreenCanvas();
+      }
+      if (!strokes.length) {
+        clearOverlayCanvas();
+        return;
+      }
+
+      const offscreenCanvas = offscreenCanvasRef.current!;
+      const overlayCanvas = overlayCanvasRef.current!;
+      const offscreenCtx = offscreenCanvas.getContext('2d')!;
+      const overlayCtx = overlayCanvas!.getContext('2d')!;
+
+      offscreenCanvas.width = overlayCanvas!.width;
+      offscreenCanvas.height = overlayCanvas!.height;
+
+      // clear offscreen canvas
+
+      clearOverlayCanvas();
+
+      strokes?.forEach((stroke: Point[], index) => {
+        overlayCtx.save();
+        drawStroke(overlayCtx, stroke, {
+          lineWidth,
+          color: COLOR,
+          compositeOperation: 'destination-out'
+        });
+
+        drawStroke(overlayCtx, stroke, {
+          lineWidth,
+          color: COLOR,
+          compositeOperation: 'source-over'
+        });
+        overlayCtx.restore();
+      });
+    },
+    [lineWidth, drawStroke]
+  );

  const undo = () => {
-    if (strokes.length === 0) return;
+    if (strokesRef.current.length === 0) return;

-    const newStrokes = strokes.slice(0, -1);
+    const newStrokes = strokesRef.current.slice(0, -1);
+    console.log('New strokes:', newStrokes, strokesRef.current);
    setStrokes(newStrokes);

-    const ctx = overlayCanvasRef.current!.getContext('2d');
-    ctx!.clearRect(
-      0,
-      0,
-      overlayCanvasRef.current!.width,
-      overlayCanvasRef.current!.height
-    );
-
-    newStrokes.forEach((stroke) => {
-      ctx!.globalCompositeOperation = 'source-over';
-      ctx!.strokeStyle = COLOR;
-      ctx!.lineWidth = lineWidth;
-      ctx!.lineCap = 'round';
-      ctx!.lineJoin = 'round';
-
-      ctx!.beginPath();
-      ctx!.moveTo(stroke.start.x, stroke.start.y);
-      ctx!.lineTo(stroke.end.x, stroke.end.y);
-      ctx!.stroke();
-    });
+    redrawStrokes(newStrokes);
  };

  const download = () => {
-    // download the canvasRef as an image
    const canvas = canvasRef.current!;
    const link = document.createElement('a');
    link.download = 'image.png';
@@ -311,7 +377,111 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
    link.remove();
  };

+  const scaleStrokes = (scale: number): Stroke[] => {
+    const strokes: Stroke[] = _.cloneDeep(strokesRef.current);
+    const newStrokes = strokes.map((stroke) => {
+      return stroke.map((point) => {
+        return {
+          x: point.x * scale,
+          y: point.y * scale
+        };
+      });
+    });
+    setStrokes(newStrokes);
+    return newStrokes;
+  };
+
+  const drawImage = useCallback(async () => {
+    if (!containerRef.current || !canvasRef.current) return;
+    return new Promise<void>((resolve) => {
+      const img = new Image();
+      img.src = imageSrc;
+      img.onload = () => {
+        const canvas = canvasRef.current!;
+        const ctx = canvas!.getContext('2d');
+        const container = containerRef.current;
+        const scale = Math.min(
+          container!.offsetWidth / img.width,
+          container!.offsetHeight / img.height,
+          1
+        );
+
+        canvas!.width = img.width * scale;
+        canvas!.height = img.height * scale;
+
+        autoScale.current = scale / autoScale.current;
+
+        scaleLineWidth();
+        scaleCanvasSize();
+        setCanvasCenter();
+
+        clearCanvas();
+
+        ctx!.drawImage(
+          img,
+          -canvas.width / 2,
+          -canvas.height / 2,
+          canvas!.width,
+          canvas!.height
+        );
+        resolve();
+      };
+    });
+  }, [
+    imageSrc,
+    containerRef.current,
+    canvasRef.current,
+    scaleCanvasSize,
+    setCanvasCenter,
+    scaleLineWidth
+  ]);
+
+  const handleResize = useCallback(
+    async (entries: ResizeObserverEntry[]) => {
+      const contentRect = entries[0].contentRect;
+      if (!contentRect.width || !contentRect.height || !imgLoaded) return;
+      await drawImage();
+      console.log('Image Loaded:', imageStatus, strokesRef.current);
+      if (imageStatus.isOriginal) {
+        redrawStrokes(strokesRef.current, 'resize');
+      }
+    },
+    [drawImage, scaleStrokes, redrawStrokes, onReset, imageStatus, imgLoaded]
+  );
+
+  const initializeImage = useCallback(async () => {
+    setImgLoaded(false);
+    await drawImage();
+    setImgLoaded(true);
+    console.log('Image Loaded:', imageStatus, strokesRef.current);
+    if (imageStatus.isOriginal) {
+      redrawStrokes(strokesRef.current, 'initialize');
+    } else if (imageStatus.isResetNeeded) {
+      onReset();
+    }
+  }, [drawImage, onReset, redrawStrokes, imageStatus]);
+
  useEffect(() => {
+    initializeImage();
+  }, [initializeImage]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (container) {
+      resizeObserver.current = new ResizeObserver(
+        _.throttle(handleResize, 100)
+      );
+      resizeObserver.current.observe(container);
+    }
+
+    return () => {
+      resizeObserver.current?.disconnect();
+    };
+  }, [handleResize, containerRef.current]);
+
+  useEffect(() => {
+    createOffscreenCanvas();
    const handleUndoShortcut = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
        undo();
@@ -322,7 +492,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
    return () => {
      window.removeEventListener('keydown', handleUndoShortcut);
    };
-  }, [strokes]);
+  }, []);

  return (
    <div className="editor-wrapper">
@@ -370,7 +540,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
          {uploadButton}
          <Tooltip title="Reset">
            <Button
-              onClick={onClear}
+              onClick={onReset}
              size="middle"
              type="text"
              disabled={disabled}
@@ -382,7 +552,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
        <div className="tools">
          <Tooltip title="Save Mask">
            <Button onClick={downloadMask} size="middle" type="text">
-              <SaveOutlined className="font-size-14" />
+              <IconFont className="font-size-14" type="icon-save1"></IconFont>
            </Button>
          </Tooltip>
          <Tooltip title="Download">
@@ -395,7 +565,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
      <div
        className="editor-content"
        ref={containerRef}
-        style={{ position: 'relative', width: '100%', height: '100%', flex: 1 }}
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          flex: 1
+        }}
      >
        <canvas ref={canvasRef} style={{ position: 'absolute', zIndex: 1 }} />
        <canvas
@@ -403,28 +578,29 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
          style={{ position: 'absolute', zIndex: 2 }}
          onMouseDown={startDrawing}
          onMouseUp={endDrawing}
+          onMouseEnter={handleMouseEnter}
          onMouseMove={(e) => {
+            handleMouseMove(e);
            draw(e);
          }}
          onMouseLeave={(e) => {
-            endDrawing();
+            handleMouseLeave();
+            endDrawing(e);
+          }}
+        />
+        <div
+          ref={cursorRef}
+          style={{
+            display: 'none',
+            position: 'fixed',
+            width: lineWidth,
+            height: lineWidth,
+            backgroundColor: COLOR,
+            borderRadius: '50%',
+            pointerEvents: 'none',
+            zIndex: 3
          }}
        />
-        {cursorVisible && (
-          <div
-            style={{
-              position: 'absolute',
-              top: cursorPosition?.y,
-              left: cursorPosition?.x,
-              width: lineWidth,
-              height: lineWidth,
-              backgroundColor: COLOR,
-              borderRadius: '50%',
-              pointerEvents: 'none',
-              zIndex: 3
-            }}
-          />
-        )}
      </div>
    </div>
  );
@@ -15,6 +15,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
    required,
    description,
    options,
+    allowNull,
    isInFormItems = true,
    ...rest
  } = props;
@@ -22,6 +23,8 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
  const [isFocus, setIsFocus] = useState(false);
  const inputRef = useRef<any>(null);
  let status = '';
+
+  // the status can be controlled by Form.Item
  if (isInFormItems) {
    const statusData = Form?.Item?.useStatus?.();
    status = statusData?.status || '';
@@ -41,10 +44,10 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
  }, [options, intl]);

  useEffect(() => {
-    if (isNotEmptyValue(props.value)) {
+    if (isNotEmptyValue(props.value) || (allowNull && props.value === null)) {
      setIsFocus(true);
    }
-  }, [props.value]);
+  }, [props.value, allowNull]);

  const handleClickWrapper = () => {
    if (!props.disabled && !isFocus) {
@@ -54,7 +57,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
  };

  const handleChange = (val: any, options: any) => {
-    if (isNotEmptyValue(val)) {
+    if (isNotEmptyValue(val) || (allowNull && val === null)) {
      setIsFocus(true);
    } else {
      setIsFocus(false);
@@ -68,7 +71,9 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
  };

  const handleOnBlur = (e: any) => {
-    if (!props.value) {
+    if (allowNull && props.value === null) {
+      setIsFocus(true);
+    } else if (!props.value) {
      setIsFocus(false);
    }
    props.onBlur?.(e);
@@ -7,6 +7,7 @@ export interface SealFormItemProps {
  description?: React.ReactNode;
  extra?: React.ReactNode;
  addAfter?: React.ReactNode;
+  allowNull?: boolean;
  loading?: React.ReactNode;
  trim?: boolean;
  checkStatus?: 'success' | 'error' | 'warning' | '';