chore: painting cache

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
-    "@ant-design/pro-components": "^2.7.18",
+    "@ant-design/pro-components": "^2.7.19",
     "@huggingface/gguf": "^0.1.7",
     "@huggingface/hub": "^0.15.1",
     "@huggingface/tasks": "^0.11.6",

src/components/auto-image/index.tsx

@@ -90,7 +90,8 @@ const AutoImage: React.FC<
       fallback={fallbackImg}
       crossOrigin="anonymous"
       preview={
-        preview ?? {
+        preview &&
+        !isError && {
           mask: <EyeOutlined />,
           toolbarRender: (
             _,

src/components/auto-image/single-image.less

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

src/components/auto-image/single-image.tsx

@@ -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
-                  <Progress
+                  percent={progress}
-                    percent={progress}
+                  type="dashboard"
-                    type="dashboard"
+                  steps={{ count: 50, gap: 2 }}
-                    steps={{ count: 50, gap: 2 }}
+                  format={() => (
-                    format={() => (
+                    <span className="font-size-20">{progress}%</span>
-                      <span className="font-size-20">{progress}%</span>
+                  )}
-                    )}
+                  trailColor="var(--ant-color-fill-secondary)"
-                    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>
-                )}
               </span>
             ) : (
               <span
@@ -187,27 +162,18 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                   onLoad={handleOnLoad}
                 />
                 {progress && progress < 100 && (
-                  <span className="progress-wrapper">
+                  <span className="small-progress-wrap">
-                    <Tooltip title={`${progress}%`} open={true}>
+                    <Progress
-                      <Progress
+                      percent={progress}
-                        style={{
+                      type="dashboard"
-                          paddingInline: 0,
+                      size="small"
-                          borderRadius: 12,
+                      steps={{ count: 25, gap: 3 }}
-                          display: 'flex',
+                      format={() => (
-                          alignItems: 'center',
+                        <span className="font-size-12">{progress}%</span>
-                          backgroundColor: 'rgba(0,0,0,0.5)'
+                      )}
-                        }}
+                      strokeColor="var(--color-white-secondary)"
-                        percent={progress}
+                      trailColor="var(--ant-color-fill-secondary)"
-                        percentPosition={{
+                    />
-                          align: 'center',
-                          type: 'inner'
-                        }}
-                        type="line"
-                        size={[undefined, 6]}
-                        strokeLinecap="round"
-                        strokeColor="var(--color-white-1)"
-                      />
-                    </Tooltip>
                   </span>
                 )}
               </span>

src/components/image-editor/index.tsx

@@ -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 currentStroke = useRef<Point[]>([]);
-  const imgLoaded = useRef<boolean>(false);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
-  const currentPoint = useRef<Point | null>(null);
+  const strokesRef = useRef<Stroke[]>([]);
-  const [cursorVisible, setCursorVisible] = useState(false);
+  const offscreenCanvasRef = useRef<HTMLCanvasElement | null>(null);
-  const [cursorPosition, setCursorPosition] = useState<Point | null>(null);
+  const autoScale = useRef<number>(1);
+  const cursorRef = useRef<HTMLDivElement>(null);
+  const [imgLoaded, setImgLoaded] = useState(false);
 
-  useEffect(() => {
+  const getTransformedPoint = (event: React.MouseEvent<HTMLCanvasElement>) => {
-    console.log('Image src:', imageSrc);
+    const overlayCanvas = overlayCanvasRef.current!;
-    if (!containerRef.current || !canvasRef.current) return;
+    const rect = overlayCanvas.getBoundingClientRect();
-    imgLoaded.current = false;
-    const canvas = canvasRef.current;
-    const overlayCanvas = overlayCanvasRef.current;
-    const ctx = canvas!.getContext('2d');
 
-    const img = new Image();
+    const x = event.clientX - rect.left;
-    img.src = imageSrc;
+    const y = event.clientY - rect.top;
-    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;
 
-      ctx!.clearRect(0, 0, canvas.width, canvas.height);
+    const transformedX = x - overlayCanvas.width / 2;
-      ctx!.drawImage(img, 0, 0, canvas!.width, canvas!.height);
+    const transformedY = y - overlayCanvas.height / 2;
-      imgLoaded.current = true;
-    };
-  }, [imageSrc, containerRef.current, canvasRef.current]);
 
-  const handleResize = useCallback(() => {
+    console.log('Mouse Coordinates (Transformed):', transformedX, transformedY);
-    const container = containerRef.current;
-    const canvas = canvasRef.current;
-    const overlayCanvas = overlayCanvasRef.current;
 
-    if (
+    return { x: transformedX, y: transformedY };
-      !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);
   };
 
-  const mapMousePosition = (
+  const handleMouseEnter = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    e: React.MouseEvent<HTMLCanvasElement>,
+    overlayCanvasRef.current!.style.cursor = 'none';
-    canvas: HTMLCanvasElement
+    cursorRef.current!.style.display = 'block';
-  ) => {
+    cursorRef.current!.style.top = `${e.clientY - lineWidth / 2}px`;
-    const rect = canvas.getBoundingClientRect();
+    cursorRef.current!.style.left = `${e.clientX - lineWidth / 2}px`;
-    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 handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    const { offsetX, offsetY } = e.nativeEvent;
+    overlayCanvasRef.current!.style.cursor = 'none';
-    setCursorPosition({ x: offsetX, y: offsetY });
+    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);
+    overlayCanvasRef.current!.style.cursor = 'default';
-    setCursorPosition(null);
+    cursorRef.current!.style.display = 'none';
   };
 
-  useEffect(() => {
+  const createOffscreenCanvas = () => {
-    const resizeObserver = new ResizeObserver(() => {
+    if (offscreenCanvasRef.current === null) {
-      handleResize();
+      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;
+  const setCanvasCenter = useCallback(() => {
-    if (container) resizeObserver.observe(container);
+    if (!canvasRef.current || !overlayCanvasRef.current) return;
 
-    return () => {
+    const overlayCtx = overlayCanvasRef.current!.getContext('2d');
-      resizeObserver.disconnect();
+    const ctx = canvasRef.current!.getContext('2d');
-    };
+    const offscreenCtx = offscreenCanvasRef.current!.getContext('2d');
-  }, [handleResize, strokes, containerRef.current]);
+
+    // 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 overlayCanvas = 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 maskCanvas = document.createElement('canvas');
-    maskCanvas.width = canvas.width;
+    maskCanvas.width = overlayCanvas.width;
-    maskCanvas.height = canvas.height;
+    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)
+    if (!isDrawing.current) return;
-      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. 清除当前路径重叠的部分
+    drawLine(
-    ctx!.globalCompositeOperation = 'destination-out';
+      ctx!,
-    ctx!.lineWidth = lineWidth;
+      { x, y },
-    ctx!.lineCap = 'round';
+      { lineWidth, color: COLOR, compositeOperation: 'destination-out' }
-    ctx!.lineJoin = 'round';
+    );
+    drawLine(
+      ctx!,
+      { x, y },
+      { lineWidth, color: COLOR, compositeOperation: 'source-over' }
+    );
 
-    ctx!.beginPath();
+    ctx!.restore();
-    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 };
   };
 
   const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
     isDrawing.current = true;
-    lastPoint.current = null;
+
-    currentPoint.current = null;
+    currentStroke.current = [];
-    const { offsetX, offsetY } = e.nativeEvent;
+    const { x, y } = getTransformedPoint(e);
-    console.log('Start Drawing:', { x: offsetX, y: offsetY });
+    currentStroke.current.push({
-    lastPoint.current = { x: offsetX, y: offsetY };
+      x,
-    currentPoint.current = { x: offsetX, y: offsetY };
+      y
+    });
+
+    const ctx = overlayCanvasRef.current!.getContext('2d');
+    ctx!.beginPath();
+    ctx!.moveTo(x, y);
+
     draw(e);
   };
 
-  const endDrawing = () => {
+  const endDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    console.log('End Drawing:', lastPoint.current);
+    console.log('End Drawing:', e);
-    if (!lastPoint.current || !currentPoint.current) return;
+    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,
+      -overlayCanvasRef.current!.width / 2,
-      0,
+      -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');
+    redrawStrokes(newStrokes);
-    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();
-    });
   };
 
   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>
   );

src/components/seal-form/seal-select.tsx

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

src/components/seal-form/types.ts

@@ -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' | '';

src/global.less

@@ -43,6 +43,10 @@ html {
   --font-weight-normal: 500;
   --font-weight-medium: 600;
   --font-weight-bold: 700;
+  --color-white-primary: rgba(255, 255, 255, 100%);
+  --color-white-secondary: rgba(255, 255, 255, 90%);
+  --color-white-tertiary: rgba(255, 255, 255, 70%);
+  --color-white-quaternary: rgba(255, 255, 255, 50%);
   --color-text-1: var(--ant-color-text);
   --color-text-3: rgba(0, 0, 0, 45%);
   --color-text-2: rgba(0, 0, 0, 65%);

src/locales/en-US/common.ts

@@ -217,5 +217,7 @@ export default {
   'common.text.new': 'New',
   'common.text.changelog': 'Release Notes',
   'common.button.recreate': 'Recreate',
-  'common.button.delrecreate': 'Delete (Recreate)'
+  'common.button.delrecreate': 'Delete (Recreate)',
+  'common.options.all': 'All',
+  'common.options.none': 'None'
 };

src/locales/zh-CN/common.ts

@@ -210,5 +210,7 @@ export default {
   'common.text.new': '新',
   'common.text.changelog': '更新日志',
   'common.button.recreate': '重新创建',
-  'common.button.delrecreate': '删除(重建)'
+  'common.button.delrecreate': '删除(重建)',
+  'common.options.all': '全部',
+  'common.options.none': '无'
 };

src/pages/playground/components/ground-images.tsx

@@ -52,7 +52,8 @@ const advancedFieldsDefaultValus = {
   cfg_scale: 4.5,
   sampling_steps: 10,
   negative_prompt: null,
-  schedule_method: 'discrete'
+  schedule_method: 'discrete',
+  preview: null
 };
 
 const openaiCompatibleFieldsDefaultValus = {
@@ -237,6 +238,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             width: imgSize[0],
             loading: true,
             progressType: stream_options.chunk_results ? 'dashboard' : 'line',
+            preview: false,
             uid: setMessageId()
           };
         });
@@ -302,6 +304,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             uid: imgItem.uid,
             span: imgItem.span,
             loading: stream_options.chunk_results ? progress < 100 : false,
+            preview: progress >= 100,
             progress: progress
           };
         });

src/pages/playground/components/image-edit.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/utils/fetch-chunk-data';
 import { SwapOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
-import { Button, Divider, Form, Image, Tooltip } from 'antd';
+import { Button, Divider, Form, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -28,7 +28,6 @@ import React, {
   useState
 } from 'react';
 import { EDIT_IMAGE_API } from '../apis';
-import { promptList } from '../config';
 import {
   ImageAdvancedParamsConfig,
   ImageCustomSizeConfig,
@@ -54,6 +53,7 @@ const advancedFieldsDefaultValus = {
   cfg_scale: 4.5,
   sample_steps: 10,
   negative_prompt: null,
+  preview: null,
   schedule: 'discrete'
 };
 
@@ -83,6 +83,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       span?: number;
       loading?: boolean;
       progress?: number;
+      preview?: boolean;
     }[]
   >([]);
 
@@ -103,8 +104,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const inputRef = useRef<any>(null);
   const [image, setImage] = useState<string>('');
   const [mask, setMask] = useState<string>('');
-  const [showOriginal, setShowOriginal] = useState<boolean>(false);
   const [uploadList, setUploadList] = useState<any[]>([]);
+  const [imageStatus, setImageStatus] = useState<{
+    isOriginal: boolean;
+    isResetNeeded: boolean;
+  }>({
+    isOriginal: false,
+    isResetNeeded: false
+  });
 
   const size = Form.useWatch('size', form.current?.form);
 
@@ -123,20 +130,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
-  const generateNumber = (min: number, max: number) => {
-    return Math.floor(Math.random() * (max - min + 1) + min);
-  };
-
-  const handleRandomPrompt = useCallback(() => {
-    const randomIndex = generateNumber(0, promptList.length - 1);
-    const randomPrompt = promptList[randomIndex];
-    inputRef.current?.handleInputChange({
-      target: {
-        value: randomPrompt
-      }
-    });
-  }, []);
-
   const setImageSize = useCallback(() => {
     let size: Record<string, string | number> = {
       span: 12
@@ -156,12 +149,20 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     return size;
   }, [parameters.n]);
 
+  const imageFile = useMemo(() => {
+    return base64ToFile(image, 'image');
+  }, [image]);
+
+  const maskFile = useMemo(() => {
+    return base64ToFile(mask, 'mask');
+  }, [mask]);
+
   const finalParameters = useMemo(() => {
     if (parameters.size === 'custom') {
       return {
         ..._.omit(parameters, ['width', 'height', 'preview']),
-        image: base64ToFile(image, 'image'),
+        image: imageFile,
-        mask: base64ToFile(mask, 'mask'),
+        mask: maskFile,
         size:
           parameters.width && parameters.height
             ? `${parameters.width}x${parameters.height}`
@@ -169,11 +170,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       };
     }
     return {
-      image: base64ToFile(image, 'image'),
+      image: imageFile,
-      mask: base64ToFile(mask, 'mask'),
+      mask: maskFile,
       ..._.omit(parameters, ['width', 'height', 'random_seed', 'preview'])
     };
-  }, [parameters, image, mask]);
+  }, [parameters, maskFile, imageFile]);
 
   const viewCodeContent = useMemo(() => {
     if (isOpenaiCompatible) {
@@ -248,6 +249,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             width: imgSize[0],
             loading: true,
             progressType: stream_options.chunk_results ? 'dashboard' : 'line',
+            preview: false,
             uid: setMessageId()
           };
         });
@@ -313,6 +315,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             uid: imgItem.uid,
             span: imgItem.span,
             loading: stream_options.chunk_results ? progress < 100 : false,
+            preview: progress >= 100,
             progress: progress
           };
         });
@@ -480,17 +483,27 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     const img = _.get(base64List, '[0].dataUrl', '');
     setUploadList(base64List);
     setImage(img);
+    setImageStatus({
+      isOriginal: false,
+      isResetNeeded: true
+    });
+    setImageList([]);
   }, []);
 
   const handleOnSave = useCallback((url: string) => {
-    console.log('url:', url);
+    setImageStatus({
+      isOriginal: true,
+      isResetNeeded: false
+    });
     setMask(url);
   }, []);
 
   const renderImageEditor = useMemo(() => {
+    console.log('image:', image);
     if (image) {
       return (
         <CanvasImageEditor
+          imageStatus={imageStatus}
           imageSrc={image}
           disabled={loading}
           onSave={handleOnSave}
@@ -524,14 +537,37 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         </div>
       </UploadImg>
     );
-  }, [image, loading, handleOnSave, handleUpdateImageList]);
+  }, [image, loading, imageStatus, handleOnSave, handleUpdateImageList]);
 
-  const handleOnImgClick = useCallback((item: any) => {
+  const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => {
-    console.log('item:', item);
     setImage(item.dataUrl);
-    setShowOriginal(true);
+    setImageStatus({
+      isOriginal: isOrigin,
+      isResetNeeded: false
+    });
   }, []);
 
+  const renderOriginImage = useMemo(() => {
+    if (!uploadList.length) {
+      return null;
+    }
+    return (
+      <>
+        <SingleImage
+          {...uploadList[0]}
+          height={125}
+          maxHeight={125}
+          preview={true}
+          loading={false}
+          autoSize={false}
+          editable={false}
+          autoBgColor={false}
+          onClick={() => handleOnImgClick(uploadList[0], true)}
+        ></SingleImage>
+      </>
+    );
+  }, [uploadList, handleOnImgClick]);
+
   useEffect(() => {
     return () => {
       requestToken.current?.abort?.();
@@ -613,16 +649,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
               alignItems: 'center'
             }}
           >
-            {uploadList.length > 0 && (
+            {renderOriginImage}
-              <Image
-                onClick={() => handleOnImgClick(uploadList[0])}
-                src={uploadList[0]?.dataUrl}
-                style={{
-                  height: 125,
-                  objectFit: 'cover'
-                }}
-              ></Image>
-            )}
             {imageList.length > 0 && (
               <>
                 <Divider
@@ -655,12 +682,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                           height={125}
                           maxHeight={125}
                           key={item.uid}
-                          preview={true}
+                          preview={item.preview}
                           loading={item.loading}
                           autoSize={false}
                           editable={false}
                           autoBgColor={false}
-                          onClick={() => handleOnImgClick(item)}
+                          onClick={() => handleOnImgClick(item, false)}
                         ></SingleImage>
                       </div>
                     );
@@ -668,26 +695,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                 </div>
               </>
             )}
-            {/* <ThumbImg
-            column={parameters.n}
-            style={{
-              padding: 0,
-              height: '100%',
-              justifyContent: 'center',
-              flexDirection: 'column',
-              flexWrap: 'unset',
-              alignItems: 'center'
-            }}
-            preview={false}
-            autoBgColor={false}
-            editable={false}
-            dataList={imageList}
-            loading={loading}
-            onClick={handleOnImgClick}
-            responseable={true}
-            gutter={[8, 16]}
-            autoSize={true}
-          ></ThumbImg> */}
           </div>
         </div>
       </div>

src/pages/playground/components/thumb-img.tsx

@@ -11,7 +11,6 @@ const ThumbImg: React.FC<{
     rows: number;
     cols: number;
   };
-  preview?: boolean;
   editable?: boolean;
   onDelete?: (uid: number) => void;
   onClick?: (item: any) => void;
@@ -27,7 +26,6 @@ const ThumbImg: React.FC<{
     rows: 1,
     cols: 1
   },
-  preview = true,
   column = 2,
   dataList,
   editable,
@@ -48,7 +46,6 @@ const ThumbImg: React.FC<{
 
   const handleOnClick = useCallback(
     (item: any) => {
-      console.log('item=======', item);
       onClick?.(item);
     },
     [onClick]
@@ -110,7 +107,7 @@ const ThumbImg: React.FC<{
         alignItems: 'flex-start'
       }
     };
-  }, [dataList, responseable, column]);
+  }, [dataList.length, responseable, column]);
 
   return (
     <>
@@ -141,7 +138,7 @@ const ThumbImg: React.FC<{
                       >
                         <SingleImage
                           {...item}
-                          preview={preview}
+                          preview={item.preview}
                           style={{ ...(responseableStyle[index] || {}) }}
                           loading={item.loading}
                           autoSize={autoSize}
@@ -177,7 +174,7 @@ const ThumbImg: React.FC<{
                       >
                         <SingleImage
                           {...item}
-                          preview={preview}
+                          preview={item.preview}
                           style={{ ...(responseableStyle[index + 2] || {}) }}
                           loading={item.loading}
                           autoSize={autoSize}
@@ -198,7 +195,7 @@ const ThumbImg: React.FC<{
                 return (
                   <SingleImage
                     {...item}
-                    preview={preview}
+                    preview={item.preview}
                     key={item.uid}
                     autoSize={autoSize}
                     editable={editable}

src/pages/playground/config/params-config.ts

@@ -216,15 +216,16 @@ export const ImageconstExtraConfig: ParamsSchema[] = [
         label: 'playground.params.style.natural',
         value: 'natural',
         locale: true
-      }
+      },
+      { label: 'common.options.none', value: null, locale: true }
     ],
-    attrs: {
-      allowClear: true
-    },
     label: {
       text: 'playground.params.style',
       isLocalized: true
     },
+    attrs: {
+      allowNull: true
+    },
     rules: [
       {
         required: false
@@ -316,7 +317,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
   },
   {
     type: 'Input',
-    name: 'negative_prompt', //ng_deepnegative_v1_75t,(badhandv4:1.2),EasyNegative,(worst quality:2),
+    name: 'negative_prompt', // e.g. ng_deepnegative_v1_75t,(badhandv4:1.2),EasyNegative,(worst quality:2),
     label: {
       text: 'playground.image.params.negativePrompt',
       isLocalized: true
@@ -335,14 +336,15 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
     name: 'preview',
     options: [
       { label: 'Faster', value: 'preview_faster' },
-      { label: 'Normal', value: 'preview' }
+      { label: 'Normal', value: 'preview' },
+      { label: 'common.options.none', value: null, locale: true }
     ],
     label: {
       text: 'Preview',
       isLocalized: false
     },
     attrs: {
-      allowClear: true
+      allowNull: true
     },
     rules: [
       {

src/pages/playground/config/types.ts

@@ -34,7 +34,7 @@ export interface ParamsSchema {
     isLocalized?: boolean;
   };
   style?: React.CSSProperties;
-  options?: Global.BaseOption<string | number>[];
+  options?: Global.BaseOption<string | number | null>[];
   value?: string | number | boolean | string[];
   min?: number;
   max?: number;

src/utils/index.ts

@@ -5,6 +5,13 @@ export const isNotEmptyValue = (value: any) => {
   return !!value || value === 0 || value === false;
 };
 
+export const isNotEmptyValueAllowNull = (value: any) => {
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+  return !!value || value === 0 || value === false || value === null;
+};
+
 export const handleBatchRequest = async (
   list: any[],
   fn: (args: any) => void