fix: fix bug

src/layout/Sidebar/Attr/Color.tsx

@@ -1,7 +1,7 @@
 import styles from "./Color.module.scss";
 import { useEffect, useState } from "react";
 import { SketchPicker } from "react-color";
-import { MouseEvent } from "react";
+import { canvasRef } from "@/store";
 import type { ColorResult } from "react-color";
 import type { FormObject } from "@/models/CanvasModel";
 
@@ -17,13 +17,29 @@ function Color({ item }: Props) {
   const [color, setColor] = useState(value);
   const [visible, setVisible] = useState(false);
 
+  const handleMouseDown = () => {
+    if (canvasRef.current) {
+      canvasRef.current.disableSave = true;
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (canvasRef.current) {
+      canvasRef.current.disableSave = false;
+      debugger;
+      handler(color);
+    }
+  };
+
   const handleChange = (color: ColorResult) => {
     const { r, g, b, a } = color.rgb;
     const rgba = `rgba(${r}, ${g}, ${b}, ${a})`;
-    handler(rgba);
+    setTimeout(() => {
+      handler(rgba);
+    }, 0);
   };
 
-  const toggleVisible = (evt: MouseEvent) => {
+  const toggleVisible = () => {
     if (!visible) {
       const bodyClick = () => {
         setVisible(false);
@@ -47,7 +63,12 @@ function Color({ item }: Props) {
       <div className="color-bar-wrapper" onClick={toggleVisible}>
         <div className="color-bar" style={{ backgroundColor: color }} />
       </div>
-      <div className="picker-wrapper" onClick={(evt) => evt.stopPropagation()}>
+      <div
+        className="picker-wrapper"
+        onClick={(evt) => evt.stopPropagation()}
+        onMouseUp={handleMouseUp}
+        onMouseDown={handleMouseDown}
+      >
         {visible && <SketchPicker onChange={handleChange} color={color} />}
       </div>
     </div>

src/layout/Sidebar/Attr/Range.tsx

@@ -1,5 +1,6 @@
 import styles from "./Range.module.scss";
 import { useEffect, useState, useCallback, useRef } from "react";
+import { canvasRef } from "@/store";
 import type { ChangeEvent, MouseEvent } from "react";
 import type { FormObject } from "@/models/CanvasModel";
 
@@ -68,11 +69,18 @@ function Range({ item }: Props) {
   }, []);
 
   const handleMouseUp = useCallback(() => {
+    if (canvasRef.current) {
+      canvasRef.current.disableSave = false;
+    }
+
     window.removeEventListener("mousemove", handleMouseMove);
     window.removeEventListener("mouseup", handleMouseUp);
   }, []);
 
   const handleMouseDown = (evt: MouseEvent) => {
+    if (canvasRef.current) {
+      canvasRef.current.disableSave = true;
+    }
     // 非主键
     if (evt.button !== 0) {
       return;
@@ -98,7 +106,9 @@ function Range({ item }: Props) {
     progress.style.setProperty("--rail-width", `${percent * 100}%`);
     const nextValue = (percent * max) >> 0;
     setInputValue(nextValue);
-    handler(nextValue);
+    setTimeout(() => {
+      handler(nextValue);
+    }, 0);
   };
 
   useEffect(() => {

src/models/CanvasModel.ts

@@ -46,7 +46,7 @@ class CanvasModel {
   private backgroundImage: string;
   private backgroundColor: string;
   private bgFilter: string;
-  private disableSave: boolean = true;
+  disableSave: boolean = true;
   private operateStack: Record<string, any>[] = [];
   private operateStack2: Record<string, any>[] = [];
   private timer: number = 0;

src/models/RectModel.ts

@@ -78,8 +78,8 @@ class RectModel extends BaseModel {
           strokeWidth: config.strokeWidth,
           angle: config.angle,
           radius: config.radius,
-          originWidth: config.width,
-          originHeight: config.height,
+          originWidth: 200,
+          originHeight: 200,
           zIndex: config.zIndex || 0,
         })
       );