react-screenshots 0.5.9 → 0.5.15

package/lib/react-screenshots.es.js

@@ -1,41 +1,10 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 import React, { useContext, useCallback, memo, useState, useRef, useLayoutEffect, useEffect, forwardRef, useImperativeHandle, cloneElement } from "react";
 import { createPortal } from "react-dom";
-var HistoryItemType;
-(function(HistoryItemType2) {
+var HistoryItemType = /* @__PURE__ */ ((HistoryItemType2) => {
   HistoryItemType2[HistoryItemType2["Edit"] = 0] = "Edit";
   HistoryItemType2[HistoryItemType2["Source"] = 1] = "Source";
-})(HistoryItemType || (HistoryItemType = {}));
+  return HistoryItemType2;
+})(HistoryItemType || {});
 function composeImage({ image, width, height, history, bounds }) {
   return new Promise((resolve, reject) => {
     const $canvas = document.createElement("canvas");
@@ -53,7 +22,17 @@ function composeImage({ image, width, height, history, bounds }) {
     ctx.imageSmoothingQuality = "low";
     ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
     ctx.clearRect(0, 0, bounds.width, bounds.height);
-    ctx.drawImage(image, bounds.x * rx, bounds.y * ry, bounds.width * rx, bounds.height * ry, 0, 0, bounds.width, bounds.height);
+    ctx.drawImage(
+      image,
+      bounds.x * rx,
+      bounds.y * ry,
+      bounds.width * rx,
+      bounds.height * ry,
+      0,
+      0,
+      bounds.width,
+      bounds.height
+    );
     history.stack.slice(0, history.index + 1).forEach((item) => {
       if (item.type === HistoryItemType.Source) {
         item.draw(ctx, item);
@@ -119,9 +98,12 @@ function useStore() {
 function useBounds() {
   const { bounds } = useStore();
   const { setBounds } = useDispatcher();
-  const set = useCallback((bounds2) => {
-    setBounds == null ? void 0 : setBounds(bounds2);
-  }, [setBounds]);
+  const set = useCallback(
+    (bounds2) => {
+      setBounds == null ? void 0 : setBounds(bounds2);
+    },
+    [setBounds]
+  );
   const reset = useCallback(() => {
     setBounds == null ? void 0 : setBounds(null);
   }, [setBounds]);
@@ -138,7 +120,7 @@ function useLang() {
   return lang;
 }
 var index$9 = "";
-var _jsxFileName$l = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsMagnifier/index.tsx";
+var _jsxFileName$l = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsMagnifier\\index.tsx";
 const magnifierWidth = 100;
 const magnifierHeight = 80;
 var ScreenshotsMagnifier = memo(function ScreenshotsMagnifier2({
@@ -286,7 +268,7 @@ function getBoundsByPoints$2({ x: x1, y: y1 }, { x: x2, y: y2 }, width, height)
   };
 }
 var index$8 = "";
-var _jsxFileName$k = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";
+var _jsxFileName$k = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsBackground\\index.tsx";
 var ScreenshotsBackground = memo(function ScreenshotsBackground2() {
   const {
     url,
@@ -416,9 +398,12 @@ var ScreenshotsBackground = memo(function ScreenshotsBackground2() {
 function useCursor() {
   const { cursor } = useStore();
   const { setCursor } = useDispatcher();
-  const set = useCallback((cursor2) => {
-    setCursor == null ? void 0 : setCursor(cursor2);
-  }, [setCursor]);
+  const set = useCallback(
+    (cursor2) => {
+      setCursor == null ? void 0 : setCursor(cursor2);
+    },
+    [setCursor]
+  );
   const reset = useCallback(() => {
     setCursor == null ? void 0 : setCursor("move");
   }, [setCursor]);
@@ -432,29 +417,38 @@ function useCursor() {
 }
 function useEmiter() {
   const { emiterRef } = useStore();
-  const on = useCallback((event, listener) => {
-    const emiter = emiterRef.current;
-    if (Array.isArray(emiter[event])) {
-      emiter[event].push(listener);
-    } else {
-      emiter[event] = [listener];
-    }
-  }, [emiterRef]);
-  const off = useCallback((event, listener) => {
-    const emiter = emiterRef.current;
-    if (Array.isArray(emiter[event])) {
-      const index2 = emiter[event].findIndex((item) => item === listener);
-      if (index2 !== -1) {
-        emiter[event].splice(index2, 1);
+  const on = useCallback(
+    (event, listener) => {
+      const emiter = emiterRef.current;
+      if (Array.isArray(emiter[event])) {
+        emiter[event].push(listener);
+      } else {
+        emiter[event] = [listener];
       }
-    }
-  }, [emiterRef]);
-  const emit = useCallback((event, ...args) => {
-    const emiter = emiterRef.current;
-    if (Array.isArray(emiter[event])) {
-      emiter[event].forEach((listener) => listener(...args));
-    }
-  }, [emiterRef]);
+    },
+    [emiterRef]
+  );
+  const off = useCallback(
+    (event, listener) => {
+      const emiter = emiterRef.current;
+      if (Array.isArray(emiter[event])) {
+        const index2 = emiter[event].findIndex((item) => item === listener);
+        if (index2 !== -1) {
+          emiter[event].splice(index2, 1);
+        }
+      }
+    },
+    [emiterRef]
+  );
+  const emit = useCallback(
+    (event, ...args) => {
+      const emiter = emiterRef.current;
+      if (Array.isArray(emiter[event])) {
+        emiter[event].forEach((listener) => listener(...args));
+      }
+    },
+    [emiterRef]
+  );
   const reset = useCallback(() => {
     emiterRef.current = {};
   }, [emiterRef]);
@@ -468,25 +462,28 @@ function useEmiter() {
 function useHistory() {
   const { history } = useStore();
   const { setHistory } = useDispatcher();
-  const push = useCallback((action) => {
-    const { index: index2, stack } = history;
-    stack.forEach((item) => {
-      if (item.type === HistoryItemType.Source) {
-        item.isSelected = false;
+  const push = useCallback(
+    (action) => {
+      const { index: index2, stack } = history;
+      stack.forEach((item) => {
+        if (item.type === HistoryItemType.Source) {
+          item.isSelected = false;
+        }
+      });
+      if (action.type === HistoryItemType.Source) {
+        action.isSelected = true;
+      } else if (action.type === HistoryItemType.Edit) {
+        action.source.isSelected = true;
       }
-    });
-    if (action.type === HistoryItemType.Source) {
-      action.isSelected = true;
-    } else if (action.type === HistoryItemType.Edit) {
-      action.source.isSelected = true;
-    }
-    stack.splice(index2 + 1);
-    stack.push(action);
-    setHistory == null ? void 0 : setHistory({
-      index: stack.length - 1,
-      stack
-    });
-  }, [history, setHistory]);
+      stack.splice(index2 + 1);
+      stack.push(action);
+      setHistory == null ? void 0 : setHistory({
+        index: stack.length - 1,
+        stack
+      });
+    },
+    [history, setHistory]
+  );
   const pop = useCallback(() => {
     const { stack } = history;
     stack.pop();
@@ -525,28 +522,34 @@ function useHistory() {
       stack
     });
   }, [history, setHistory]);
-  const set = useCallback((history2) => {
-    setHistory == null ? void 0 : setHistory(__spreadValues({}, history2));
-  }, [setHistory]);
-  const select = useCallback((action) => {
-    history.stack.forEach((item) => {
-      if (item.type === HistoryItemType.Source) {
-        if (item === action) {
-          item.isSelected = true;
-        } else {
-          item.isSelected = false;
+  const set = useCallback(
+    (history2) => {
+      setHistory == null ? void 0 : setHistory({ ...history2 });
+    },
+    [setHistory]
+  );
+  const select = useCallback(
+    (action) => {
+      history.stack.forEach((item) => {
+        if (item.type === HistoryItemType.Source) {
+          if (item === action) {
+            item.isSelected = true;
+          } else {
+            item.isSelected = false;
+          }
         }
-      }
-    });
-    setHistory == null ? void 0 : setHistory(__spreadValues({}, history));
-  }, [history, setHistory]);
+      });
+      setHistory == null ? void 0 : setHistory({ ...history });
+    },
+    [history, setHistory]
+  );
   const clearSelect = useCallback(() => {
     history.stack.forEach((item) => {
       if (item.type === HistoryItemType.Source) {
         item.isSelected = false;
       }
     });
-    setHistory == null ? void 0 : setHistory(__spreadValues({}, history));
+    setHistory == null ? void 0 : setHistory({ ...history });
   }, [history, setHistory]);
   const reset = useCallback(() => {
     setHistory == null ? void 0 : setHistory({
@@ -575,9 +578,12 @@ function useHistory() {
 function useOperation() {
   const { operation } = useStore();
   const { setOperation } = useDispatcher();
-  const set = useCallback((operation2) => {
-    setOperation == null ? void 0 : setOperation(operation2);
-  }, [setOperation]);
+  const set = useCallback(
+    (operation2) => {
+      setOperation == null ? void 0 : setOperation(operation2);
+    },
+    [setOperation]
+  );
   const reset = useCallback(() => {
     setOperation == null ? void 0 : setOperation(void 0);
   }, [setOperation]);
@@ -706,21 +712,9 @@ function isPointInDraw(bounds, canvas, history, e) {
     return (_a = item.isHit) == null ? void 0 : _a.call(item, ctx, item, { x, y });
   });
 }
-var _jsxFileName$j = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsCanvas/index.tsx";
+var _jsxFileName$j = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsCanvas\\index.tsx";
 const borders = ["top", "right", "bottom", "left"];
-var ResizePoints;
-(function(ResizePoints2) {
-  ResizePoints2["ResizeTop"] = "top";
-  ResizePoints2["ResizetopRight"] = "top-right";
-  ResizePoints2["ResizeRight"] = "right";
-  ResizePoints2["ResizeRightBottom"] = "right-bottom";
-  ResizePoints2["ResizeBottom"] = "bottom";
-  ResizePoints2["ResizeBottomLeft"] = "bottom-left";
-  ResizePoints2["ResizeLeft"] = "left";
-  ResizePoints2["ResizeLeftTop"] = "left-top";
-  ResizePoints2["Move"] = "move";
-})(ResizePoints || (ResizePoints = {}));
-const resizePoints = [ResizePoints.ResizeTop, ResizePoints.ResizetopRight, ResizePoints.ResizeRight, ResizePoints.ResizeRightBottom, ResizePoints.ResizeBottom, ResizePoints.ResizeBottomLeft, ResizePoints.ResizeLeft, ResizePoints.ResizeLeftTop];
+const resizePoints = ["top", "top-right", "right", "right-bottom", "bottom", "bottom-left", "left", "left-top"];
 var ScreenshotsCanvas = memo(forwardRef(function ScreenshotsCanvas2(props, ref) {
   const {
     url,
@@ -911,10 +905,13 @@ var ScreenshotsCanvas = memo(forwardRef(function ScreenshotsCanvas2(props, ref)
 }));
 function useCall() {
   const dispatcher = useDispatcher();
-  const call = useCallback((funcName, ...args) => {
-    var _a;
-    (_a = dispatcher.call) == null ? void 0 : _a.call(dispatcher, funcName, ...args);
-  }, [dispatcher]);
+  const call = useCallback(
+    (funcName, ...args) => {
+      var _a;
+      (_a = dispatcher.call) == null ? void 0 : _a.call(dispatcher, funcName, ...args);
+    },
+    [dispatcher]
+  );
   return call;
 }
 function useCanvasContextRef() {
@@ -937,12 +934,7 @@ function useReset() {
   return reset;
 }
 var index$6 = "";
-var _jsxFileName$i = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOption/index.tsx";
-var Placement;
-(function(Placement2) {
-  Placement2["Bottom"] = "bottom";
-  Placement2["Top"] = "top";
-})(Placement || (Placement = {}));
+var _jsxFileName$i = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsOption\\index.tsx";
 var ScreenshotsOption = memo(function ScreenshotsOption2({
   open,
   content,
@@ -953,7 +945,7 @@ var ScreenshotsOption = memo(function ScreenshotsOption2({
   const popoverRef = useRef(null);
   const contentRef = useRef(null);
   const operationsRect = useContext(ScreenshotsOperationsCtx);
-  const [placement, setPlacement] = useState(Placement.Bottom);
+  const [placement, setPlacement] = useState("bottom");
   const [position, setPosition] = useState(null);
   const [offsetX, setOffsetX] = useState(0);
   const getPopoverEl = () => {
@@ -992,14 +984,14 @@ var ScreenshotsOption = memo(function ScreenshotsOption2({
       currentOffsetX = ox - x;
     }
     if (y > window.innerHeight - contentRect.height) {
-      if (currentPlacement === Placement.Bottom) {
-        currentPlacement = Placement.Top;
+      if (currentPlacement === "bottom") {
+        currentPlacement = "top";
       }
       y = childrenRect.top - contentRect.height;
     }
     if (y < 0) {
-      if (currentPlacement === Placement.Top) {
-        currentPlacement = Placement.Bottom;
+      if (currentPlacement === "top") {
+        currentPlacement = "bottom";
       }
       y = childrenRect.top + childrenRect.height;
     }
@@ -1054,7 +1046,7 @@ var ScreenshotsOption = memo(function ScreenshotsOption2({
   })), getPopoverEl()));
 });
 var index$5 = "";
-var _jsxFileName$h = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";
+var _jsxFileName$h = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsButton\\index.tsx";
 var ScreenshotsButton = memo(function ScreenshotsButton2({
   title,
   icon,
@@ -1105,7 +1097,7 @@ var ScreenshotsButton = memo(function ScreenshotsButton2({
     }
   })));
 });
-var _jsxFileName$g = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ok/index.tsx";
+var _jsxFileName$g = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Ok\\index.tsx";
 function Ok() {
   const {
     image,
@@ -1149,7 +1141,7 @@ function Ok() {
     }
   });
 }
-var _jsxFileName$f = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Cancel/index.tsx";
+var _jsxFileName$f = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Cancel\\index.tsx";
 function Cancel() {
   const call = useCall();
   const reset = useReset();
@@ -1170,7 +1162,7 @@ function Cancel() {
     }
   });
 }
-var _jsxFileName$e = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Save/index.tsx";
+var _jsxFileName$e = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Save\\index.tsx";
 function Save() {
   const {
     image,
@@ -1214,7 +1206,7 @@ function Save() {
     }
   });
 }
-var _jsxFileName$d = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Redo/index.tsx";
+var _jsxFileName$d = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Redo\\index.tsx";
 function Redo() {
   const lang = useLang();
   const [history, historyDispatcher] = useHistory();
@@ -1234,7 +1226,7 @@ function Redo() {
     }
   });
 }
-var _jsxFileName$c = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Undo/index.tsx";
+var _jsxFileName$c = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Undo\\index.tsx";
 function Undo() {
   const lang = useLang();
   const [history, historyDispatcher] = useHistory();
@@ -1255,7 +1247,7 @@ function Undo() {
   });
 }
 var index$4 = "";
-var _jsxFileName$b = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSize/index.tsx";
+var _jsxFileName$b = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSize\\index.tsx";
 var ScreenshotsSize = memo(function ScreenshotsSize2({
   value,
   onChange
@@ -1326,7 +1318,7 @@ function useCanvasMouseup(onMouseup) {
     };
   }, [onMouseup, emiter]);
 }
-var _jsxFileName$a = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Mosaic/index.tsx";
+var _jsxFileName$a = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Mosaic\\index.tsx";
 function getColor(x, y, imageData) {
   if (!imageData) {
     return [0, 0, 0, 0];
@@ -1498,7 +1490,7 @@ function Mosaic() {
   });
 }
 var index$3 = "";
-var _jsxFileName$9 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsColor/index.tsx";
+var _jsxFileName$9 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsColor\\index.tsx";
 var ScreenshotsColor = memo(function ScreenshotsColor2({
   value,
   onChange
@@ -1534,7 +1526,7 @@ var ScreenshotsColor = memo(function ScreenshotsColor2({
   }));
 });
 var index$2 = "";
-var _jsxFileName$8 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSizeColor/index.tsx";
+var _jsxFileName$8 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSizeColor\\index.tsx";
 var ScreenshotsSizeColor = memo(function ScreenshotsSizeColor2({
   size,
   color,
@@ -1621,7 +1613,10 @@ function calculateNodeSize(textarea, value, maxWidth, maxHeight) {
     document.body.appendChild(hiddenTextarea);
   }
   const { paddingSize, borderSize, boxSizing, sizingStyle } = getComputedSizeInfo(textarea);
-  hiddenTextarea.setAttribute("style", `${sizingStyle};${hiddenTextareaStyle};max-width:${maxWidth}px;max-height:${maxHeight}px`);
+  hiddenTextarea.setAttribute(
+    "style",
+    `${sizingStyle};${hiddenTextareaStyle};max-width:${maxWidth}px;max-height:${maxHeight}px`
+  );
   hiddenTextarea.value = value || " ";
   let width = hiddenTextarea.scrollWidth;
   let height = hiddenTextarea.scrollHeight;
@@ -1638,7 +1633,7 @@ function calculateNodeSize(textarea, value, maxWidth, maxHeight) {
   };
 }
 var index$1 = "";
-var _jsxFileName$7 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsTextarea/index.tsx";
+var _jsxFileName$7 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsTextarea\\index.tsx";
 var ScreenshotsTextarea = memo(function ScreenshotsTextarea2({
   x,
   y,
@@ -1717,7 +1712,7 @@ function useDrawSelect(onDrawSelect) {
     };
   }, [onDrawSelect, emiter]);
 }
-var _jsxFileName$6 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Text/index.tsx";
+var _jsxFileName$6 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Text\\index.tsx";
 const sizes = {
   3: 18,
   6: 32,
@@ -1977,10 +1972,13 @@ function draw$3(ctx, action) {
   ctx.lineJoin = "round";
   ctx.lineWidth = size;
   ctx.strokeStyle = color;
-  const distance = action.editHistory.reduce((distance2, { data }) => ({
-    x: distance2.x + data.x2 - data.x1,
-    y: distance2.y + data.y2 - data.y1
-  }), { x: 0, y: 0 });
+  const distance = action.editHistory.reduce(
+    (distance2, { data }) => ({
+      x: distance2.x + data.x2 - data.x1,
+      y: distance2.y + data.y2 - data.y1
+    }),
+    { x: 0, y: 0 }
+  );
   ctx.beginPath();
   points.forEach((item, index2) => {
     if (index2 === 0) {
@@ -2004,7 +2002,7 @@ function draw$3(ctx, action) {
     ctx.stroke();
   }
 }
-var _jsxFileName$5 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Brush/index.tsx";
+var _jsxFileName$5 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Brush\\index.tsx";
 function Brush() {
   const lang = useLang();
   const [, cursorDispatcher] = useCursor();
@@ -2154,12 +2152,13 @@ function getEditedArrowData(action) {
       y2 += y;
     }
   });
-  return __spreadProps(__spreadValues({}, action.data), {
+  return {
+    ...action.data,
     x1,
     x2,
     y1,
     y2
-  });
+  };
 }
 function draw$2(ctx, action) {
   const { size, color, x1, x2, y1, y2 } = getEditedArrowData(action);
@@ -2183,13 +2182,13 @@ function draw$2(ctx, action) {
     drawDragCircle(ctx, x2, y2);
   }
 }
-var _jsxFileName$4 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Arrow/index.tsx";
-var ArrowEditType;
-(function(ArrowEditType2) {
+var _jsxFileName$4 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Arrow\\index.tsx";
+var ArrowEditType = /* @__PURE__ */ ((ArrowEditType2) => {
   ArrowEditType2[ArrowEditType2["Move"] = 0] = "Move";
   ArrowEditType2[ArrowEditType2["MoveStart"] = 1] = "MoveStart";
   ArrowEditType2[ArrowEditType2["MoveEnd"] = 2] = "MoveEnd";
-})(ArrowEditType || (ArrowEditType = {}));
+  return ArrowEditType2;
+})(ArrowEditType || {});
 function Arrow() {
   const lang = useLang();
   const [, cursorDispatcher] = useCursor();
@@ -2371,12 +2370,13 @@ function getEditedEllipseData(action) {
       y1 += y;
     }
   });
-  return __spreadProps(__spreadValues({}, action.data), {
+  return {
+    ...action.data,
     x1,
     x2,
     y1,
     y2
-  });
+  };
 }
 function draw$1(ctx, action) {
   const { size, color, x1, y1, x2, y2 } = getEditedEllipseData(action);
@@ -2420,9 +2420,8 @@ function draw$1(ctx, action) {
     drawDragCircle(ctx, x1, y1);
   }
 }
-var _jsxFileName$3 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ellipse/index.tsx";
-var EllipseEditType;
-(function(EllipseEditType2) {
+var _jsxFileName$3 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Ellipse\\index.tsx";
+var EllipseEditType = /* @__PURE__ */ ((EllipseEditType2) => {
   EllipseEditType2[EllipseEditType2["Move"] = 0] = "Move";
   EllipseEditType2[EllipseEditType2["ResizeTop"] = 1] = "ResizeTop";
   EllipseEditType2[EllipseEditType2["ResizeRightTop"] = 2] = "ResizeRightTop";
@@ -2432,7 +2431,8 @@ var EllipseEditType;
   EllipseEditType2[EllipseEditType2["ResizeLeftBottom"] = 6] = "ResizeLeftBottom";
   EllipseEditType2[EllipseEditType2["ResizeLeft"] = 7] = "ResizeLeft";
   EllipseEditType2[EllipseEditType2["ResizeLeftTop"] = 8] = "ResizeLeftTop";
-})(EllipseEditType || (EllipseEditType = {}));
+  return EllipseEditType2;
+})(EllipseEditType || {});
 function Ellipse() {
   const lang = useLang();
   const [history, historyDispatcher] = useHistory();
@@ -2646,12 +2646,13 @@ function getEditedRectangleData(action) {
       y1 += y;
     }
   });
-  return __spreadProps(__spreadValues({}, action.data), {
+  return {
+    ...action.data,
     x1,
     x2,
     y1,
     y2
-  });
+  };
 }
 function draw(ctx, action) {
   const { size, color, x1, y1, x2, y2 } = getEditedRectangleData(action);
@@ -2680,9 +2681,8 @@ function draw(ctx, action) {
     drawDragCircle(ctx, x1, y1);
   }
 }
-var _jsxFileName$2 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Rectangle/index.tsx";
-var RectangleEditType;
-(function(RectangleEditType2) {
+var _jsxFileName$2 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Rectangle\\index.tsx";
+var RectangleEditType = /* @__PURE__ */ ((RectangleEditType2) => {
   RectangleEditType2[RectangleEditType2["Move"] = 0] = "Move";
   RectangleEditType2[RectangleEditType2["ResizeTop"] = 1] = "ResizeTop";
   RectangleEditType2[RectangleEditType2["ResizeRightTop"] = 2] = "ResizeRightTop";
@@ -2692,7 +2692,8 @@ var RectangleEditType;
   RectangleEditType2[RectangleEditType2["ResizeLeftBottom"] = 6] = "ResizeLeftBottom";
   RectangleEditType2[RectangleEditType2["ResizeLeft"] = 7] = "ResizeLeft";
   RectangleEditType2[RectangleEditType2["ResizeLeftTop"] = 8] = "ResizeLeftTop";
-})(RectangleEditType || (RectangleEditType = {}));
+  return RectangleEditType2;
+})(RectangleEditType || {});
 function Rectangle() {
   const lang = useLang();
   const [history, historyDispatcher] = useHistory();
@@ -2877,7 +2878,7 @@ function Rectangle() {
 }
 var OperationButtons = [Rectangle, Ellipse, Arrow, Brush, Text, Mosaic, "|", Undo, Redo, "|", Save, Cancel, Ok];
 var index = "";
-var _jsxFileName$1 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOperations/index.tsx";
+var _jsxFileName$1 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsOperations\\index.tsx";
 const ScreenshotsOperationsCtx = React.createContext(null);
 var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
   var _a, _b;
@@ -2912,13 +2913,13 @@ var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
     if (y > height - elRect.height) {
       y = height - elRect.height - 10;
     }
-    if ((position == null ? void 0 : position.x) !== x || position.y !== y) {
+    if (!position || Math.abs(position.x - x) > 1 || Math.abs(position.y - y) > 1) {
       setPosition({
         x,
         y
       });
     }
-    if ((operationsRect == null ? void 0 : operationsRect.x) !== elRect.x || operationsRect.y !== elRect.y || operationsRect.width !== elRect.width || operationsRect.height !== elRect.height) {
+    if (!operationsRect || Math.abs(operationsRect.x - elRect.x) > 1 || Math.abs(operationsRect.y - elRect.y) > 1 || Math.abs(operationsRect.width - elRect.width) > 1 || Math.abs(operationsRect.height - elRect.height) > 1) {
       setOperationsRect({
         x: elRect.x,
         y: elRect.y,
@@ -2935,7 +2936,7 @@ var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 76,
+      lineNumber: 79,
       columnNumber: 5
     }
   }, /* @__PURE__ */ React.createElement("div", {
@@ -2950,7 +2951,7 @@ var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 77,
+      lineNumber: 80,
       columnNumber: 7
     }
   }, /* @__PURE__ */ React.createElement("div", {
@@ -2958,7 +2959,7 @@ var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 87,
+      lineNumber: 90,
       columnNumber: 9
     }
   }, OperationButtons.map((OperationButton, index2) => {
@@ -2969,7 +2970,7 @@ var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 90,
+          lineNumber: 93,
           columnNumber: 22
         }
       });
@@ -2979,7 +2980,7 @@ var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 92,
+          lineNumber: 95,
           columnNumber: 22
         }
       });
@@ -3006,21 +3007,15 @@ function useGetLoadedImage(url) {
   }, [url]);
   return image;
 }
-var _jsxFileName = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/index.tsx";
-function Screenshots(_a) {
-  var _b = _a, {
-    url,
-    width,
-    height,
-    lang,
-    className
-  } = _b, props = __objRest(_b, [
-    "url",
-    "width",
-    "height",
-    "lang",
-    "className"
-  ]);
+var _jsxFileName = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\index.tsx";
+function Screenshots({
+  url,
+  width,
+  height,
+  lang,
+  className,
+  ...props
+}) {
   const image = useGetLoadedImage(url);
   const canvasContextRef = useRef(null);
   const emiterRef = useRef({});
@@ -3036,7 +3031,10 @@ function Screenshots(_a) {
     width,
     height,
     image,
-    lang: __spreadValues(__spreadValues({}, zhCN), lang),
+    lang: {
+      ...zhCN,
+      ...lang
+    },
     emiterRef,
     canvasContextRef,
     history,