react-screenshots 0.5.10 → 0.5.16

package/lib/react-screenshots.es.js

@@ -1,3168 +0,0 @@
-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) {
-  HistoryItemType2[HistoryItemType2["Edit"] = 0] = "Edit";
-  HistoryItemType2[HistoryItemType2["Source"] = 1] = "Source";
-})(HistoryItemType || (HistoryItemType = {}));
-function composeImage({ image, width, height, history, bounds }) {
-  return new Promise((resolve, reject) => {
-    const $canvas = document.createElement("canvas");
-    const targetWidth = bounds.width * window.devicePixelRatio;
-    const targetHeight = bounds.height * window.devicePixelRatio;
-    $canvas.width = targetWidth;
-    $canvas.height = targetHeight;
-    const ctx = $canvas.getContext("2d");
-    if (!ctx) {
-      return reject(new Error("convert image to blob fail"));
-    }
-    const rx = image.naturalWidth / width;
-    const ry = image.naturalHeight / height;
-    ctx.imageSmoothingEnabled = true;
-    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);
-    history.stack.slice(0, history.index + 1).forEach((item) => {
-      if (item.type === HistoryItemType.Source) {
-        item.draw(ctx, item);
-      }
-    });
-    $canvas.toBlob((blob) => {
-      if (!blob) {
-        return reject(new Error("canvas toBlob fail"));
-      }
-      resolve(blob);
-    }, "image/png");
-  });
-}
-var iconfont = "";
-var screenshots = "";
-const zhCN = {
-  magnifier_position_label: "\u5750\u6807",
-  operation_ok_title: "\u786E\u5B9A",
-  operation_cancel_title: "\u53D6\u6D88",
-  operation_save_title: "\u4FDD\u5B58",
-  operation_redo_title: "\u91CD\u505A",
-  operation_undo_title: "\u64A4\u9500",
-  operation_mosaic_title: "\u9A6C\u8D5B\u514B",
-  operation_text_title: "\u6587\u672C",
-  operation_brush_title: "\u753B\u7B14",
-  operation_arrow_title: "\u7BAD\u5934",
-  operation_ellipse_title: "\u692D\u5706",
-  operation_rectangle_title: "\u77E9\u5F62"
-};
-var ScreenshotsContext = React.createContext({
-  store: {
-    url: void 0,
-    image: null,
-    width: 0,
-    height: 0,
-    lang: zhCN,
-    emiterRef: { current: {} },
-    canvasContextRef: { current: null },
-    history: {
-      index: -1,
-      stack: []
-    },
-    bounds: null,
-    cursor: "move",
-    operation: void 0
-  },
-  dispatcher: {
-    call: void 0,
-    setHistory: void 0,
-    setBounds: void 0,
-    setCursor: void 0,
-    setOperation: void 0
-  }
-});
-function useDispatcher() {
-  const { dispatcher } = useContext(ScreenshotsContext);
-  return dispatcher;
-}
-function useStore() {
-  const { store } = useContext(ScreenshotsContext);
-  return store;
-}
-function useBounds() {
-  const { bounds } = useStore();
-  const { setBounds } = useDispatcher();
-  const set = useCallback((bounds2) => {
-    setBounds == null ? void 0 : setBounds(bounds2);
-  }, [setBounds]);
-  const reset = useCallback(() => {
-    setBounds == null ? void 0 : setBounds(null);
-  }, [setBounds]);
-  return [
-    bounds,
-    {
-      set,
-      reset
-    }
-  ];
-}
-function useLang() {
-  const { lang } = useStore();
-  return lang;
-}
-var index$9 = "";
-var _jsxFileName$l = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsMagnifier/index.tsx";
-const magnifierWidth = 100;
-const magnifierHeight = 80;
-var ScreenshotsMagnifier = memo(function ScreenshotsMagnifier2({
-  x,
-  y
-}) {
-  const {
-    width,
-    height,
-    image
-  } = useStore();
-  const lang = useLang();
-  const [position, setPosition] = useState(null);
-  const elRef = useRef(null);
-  const canvasRef = useRef(null);
-  const ctxRef = useRef(null);
-  const [rgb, setRgb] = useState("000000");
-  useLayoutEffect(() => {
-    if (!elRef.current) {
-      return;
-    }
-    const elRect = elRef.current.getBoundingClientRect();
-    let tx = x + 20;
-    let ty = y + 20;
-    if (tx + elRect.width > width) {
-      tx = x - elRect.width - 20;
-    }
-    if (ty + elRect.height > height) {
-      ty = y - elRect.height - 20;
-    }
-    if (tx < 0) {
-      tx = 0;
-    }
-    if (ty < 0) {
-      ty = 0;
-    }
-    setPosition({
-      x: tx,
-      y: ty
-    });
-  }, [width, height, x, y]);
-  useEffect(() => {
-    if (!image || !canvasRef.current) {
-      ctxRef.current = null;
-      return;
-    }
-    if (!ctxRef.current) {
-      ctxRef.current = canvasRef.current.getContext("2d");
-    }
-    if (!ctxRef.current) {
-      return;
-    }
-    const ctx = ctxRef.current;
-    ctx.clearRect(0, 0, magnifierWidth, magnifierHeight);
-    const rx = image.naturalWidth / width;
-    const ry = image.naturalHeight / height;
-    ctx.drawImage(image, x * rx - magnifierWidth / 2, y * ry - magnifierHeight / 2, magnifierWidth, magnifierHeight, 0, 0, magnifierWidth, magnifierHeight);
-    const {
-      data
-    } = ctx.getImageData(Math.floor(magnifierWidth / 2), Math.floor(magnifierHeight / 2), 1, 1);
-    const hex = Array.from(data.slice(0, 3)).map((val) => val >= 16 ? val.toString(16) : `0${val.toString(16)}`).join("").toUpperCase();
-    setRgb(hex);
-  }, [width, height, image, x, y]);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: elRef,
-    className: "screenshots-magnifier",
-    style: {
-      transform: `translate(${position == null ? void 0 : position.x}px, ${position == null ? void 0 : position.y}px)`
-    },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 89,
-      columnNumber: 5
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-magnifier-body",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 96,
-      columnNumber: 7
-    }
-  }, /* @__PURE__ */ React.createElement("canvas", {
-    ref: canvasRef,
-    className: "screenshots-magnifier-body-canvas",
-    width: magnifierWidth,
-    height: magnifierHeight,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 97,
-      columnNumber: 9
-    }
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-magnifier-footer",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 104,
-      columnNumber: 7
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-magnifier-footer-item",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 105,
-      columnNumber: 9
-    }
-  }, lang.magnifier_position_label, ": (", x, ",", y, ")"), /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-magnifier-footer-item",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 108,
-      columnNumber: 9
-    }
-  }, "RGB: #", rgb)));
-});
-function getBoundsByPoints$2({ x: x1, y: y1 }, { x: x2, y: y2 }, width, height) {
-  if (x1 > x2) {
-    [x1, x2] = [x2, x1];
-  }
-  if (y1 > y2) {
-    [y1, y2] = [y2, y1];
-  }
-  if (x1 < 0) {
-    x1 = 0;
-  }
-  if (x2 > width) {
-    x2 = width;
-  }
-  if (y1 < 0) {
-    y1 = 0;
-  }
-  if (y2 > height) {
-    y2 = height;
-  }
-  return {
-    x: x1,
-    y: y1,
-    width: x2 - x1,
-    height: y2 - y1
-  };
-}
-var index$8 = "";
-var _jsxFileName$k = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";
-var ScreenshotsBackground = memo(function ScreenshotsBackground2() {
-  const {
-    url,
-    image,
-    width,
-    height
-  } = useStore();
-  const [bounds, boundsDispatcher] = useBounds();
-  const elRef = useRef(null);
-  const pointRef = useRef(null);
-  const isMoveRef = useRef(false);
-  const [position, setPosition] = useState(null);
-  const updateBounds = useCallback((p1, p2) => {
-    if (!elRef.current) {
-      return;
-    }
-    const {
-      x,
-      y
-    } = elRef.current.getBoundingClientRect();
-    boundsDispatcher.set(getBoundsByPoints$2({
-      x: p1.x - x,
-      y: p1.y - y
-    }, {
-      x: p2.x - x,
-      y: p2.y - y
-    }, width, height));
-  }, [width, height, boundsDispatcher]);
-  const onMouseDown = useCallback((e) => {
-    if (pointRef.current || bounds || e.button !== 0) {
-      return;
-    }
-    pointRef.current = {
-      x: e.clientX,
-      y: e.clientY
-    };
-    isMoveRef.current = false;
-  }, [bounds]);
-  useEffect(() => {
-    const onMouseMove = (e) => {
-      if (elRef.current) {
-        const rect = elRef.current.getBoundingClientRect();
-        if (e.clientX < rect.left || e.clientY < rect.top || e.clientX > rect.right || e.clientY > rect.bottom) {
-          setPosition(null);
-        } else {
-          setPosition({
-            x: e.clientX - rect.x,
-            y: e.clientY - rect.y
-          });
-        }
-      }
-      if (!pointRef.current) {
-        return;
-      }
-      updateBounds(pointRef.current, {
-        x: e.clientX,
-        y: e.clientY
-      });
-      isMoveRef.current = true;
-    };
-    const onMouseUp = (e) => {
-      if (!pointRef.current) {
-        return;
-      }
-      if (isMoveRef.current) {
-        updateBounds(pointRef.current, {
-          x: e.clientX,
-          y: e.clientY
-        });
-      }
-      pointRef.current = null;
-      isMoveRef.current = false;
-    };
-    window.addEventListener("mousemove", onMouseMove);
-    window.addEventListener("mouseup", onMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [updateBounds]);
-  useLayoutEffect(() => {
-    if (!image || bounds) {
-      setPosition(null);
-    }
-  }, [image, bounds]);
-  if (!url || !image) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: elRef,
-    className: "screenshots-background",
-    onMouseDown,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 120,
-      columnNumber: 5
-    }
-  }, /* @__PURE__ */ React.createElement("img", {
-    className: "screenshots-background-image",
-    src: url,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 121,
-      columnNumber: 7
-    }
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-background-mask",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 122,
-      columnNumber: 7
-    }
-  }), position && !bounds && /* @__PURE__ */ React.createElement(ScreenshotsMagnifier, {
-    x: position == null ? void 0 : position.x,
-    y: position == null ? void 0 : position.y,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 123,
-      columnNumber: 31
-    }
-  }));
-});
-function useCursor() {
-  const { cursor } = useStore();
-  const { setCursor } = useDispatcher();
-  const set = useCallback((cursor2) => {
-    setCursor == null ? void 0 : setCursor(cursor2);
-  }, [setCursor]);
-  const reset = useCallback(() => {
-    setCursor == null ? void 0 : setCursor("move");
-  }, [setCursor]);
-  return [
-    cursor,
-    {
-      set,
-      reset
-    }
-  ];
-}
-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);
-      }
-    }
-  }, [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]);
-  return {
-    on,
-    off,
-    emit,
-    reset
-  };
-}
-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;
-      }
-    });
-    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]);
-  const pop = useCallback(() => {
-    const { stack } = history;
-    stack.pop();
-    setHistory == null ? void 0 : setHistory({
-      index: stack.length - 1,
-      stack
-    });
-  }, [history, setHistory]);
-  const undo = useCallback(() => {
-    const { index: index2, stack } = history;
-    const item = stack[index2];
-    if (item) {
-      if (item.type === HistoryItemType.Source) {
-        item.isSelected = false;
-      } else if (item.type === HistoryItemType.Edit) {
-        item.source.editHistory.pop();
-      }
-    }
-    setHistory == null ? void 0 : setHistory({
-      index: index2 <= 0 ? -1 : index2 - 1,
-      stack
-    });
-  }, [history, setHistory]);
-  const redo = useCallback(() => {
-    const { index: index2, stack } = history;
-    const item = stack[index2 + 1];
-    if (item) {
-      if (item.type === HistoryItemType.Source) {
-        item.isSelected = false;
-      } else if (item.type === HistoryItemType.Edit) {
-        item.source.editHistory.push(item);
-      }
-    }
-    setHistory == null ? void 0 : setHistory({
-      index: index2 >= stack.length - 1 ? stack.length - 1 : index2 + 1,
-      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;
-        }
-      }
-    });
-    setHistory == null ? void 0 : setHistory(__spreadValues({}, 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));
-  }, [history, setHistory]);
-  const reset = useCallback(() => {
-    setHistory == null ? void 0 : setHistory({
-      index: -1,
-      stack: []
-    });
-  }, [setHistory]);
-  return [
-    {
-      index: history.index,
-      stack: history.stack,
-      top: history.stack.slice(history.index, history.index + 1)[0]
-    },
-    {
-      push,
-      pop,
-      undo,
-      redo,
-      set,
-      select,
-      clearSelect,
-      reset
-    }
-  ];
-}
-function useOperation() {
-  const { operation } = useStore();
-  const { setOperation } = useDispatcher();
-  const set = useCallback((operation2) => {
-    setOperation == null ? void 0 : setOperation(operation2);
-  }, [setOperation]);
-  const reset = useCallback(() => {
-    setOperation == null ? void 0 : setOperation(void 0);
-  }, [setOperation]);
-  return [
-    operation,
-    {
-      set,
-      reset
-    }
-  ];
-}
-function getBoundsByPoints$1({ x: x1, y: y1 }, { x: x2, y: y2 }, bounds, width, height, resizeOrMove) {
-  if (x1 > x2) {
-    [x1, x2] = [x2, x1];
-  }
-  if (y1 > y2) {
-    [y1, y2] = [y2, y1];
-  }
-  if (x1 < 0) {
-    x1 = 0;
-    if (resizeOrMove === "move") {
-      x2 = bounds.width;
-    }
-  }
-  if (x2 > width) {
-    x2 = width;
-    if (resizeOrMove === "move") {
-      x1 = x2 - bounds.width;
-    }
-  }
-  if (y1 < 0) {
-    y1 = 0;
-    if (resizeOrMove === "move") {
-      y2 = bounds.height;
-    }
-  }
-  if (y2 > height) {
-    y2 = height;
-    if (resizeOrMove === "move") {
-      y1 = y2 - bounds.height;
-    }
-  }
-  return {
-    x: x1,
-    y: y1,
-    width: Math.max(x2 - x1, 1),
-    height: Math.max(y2 - y1, 1)
-  };
-}
-function getBoundsByPoints(e, resizeOrMove, point, bounds) {
-  const x = e.clientX - point.x;
-  const y = e.clientY - point.y;
-  let x1 = bounds.x;
-  let y1 = bounds.y;
-  let x2 = bounds.x + bounds.width;
-  let y2 = bounds.y + bounds.height;
-  switch (resizeOrMove) {
-    case "top":
-      y1 += y;
-      break;
-    case "top-right":
-      x2 += x;
-      y1 += y;
-      break;
-    case "right":
-      x2 += x;
-      break;
-    case "right-bottom":
-      x2 += x;
-      y2 += y;
-      break;
-    case "bottom":
-      y2 += y;
-      break;
-    case "bottom-left":
-      x1 += x;
-      y2 += y;
-      break;
-    case "left":
-      x1 += x;
-      break;
-    case "left-top":
-      x1 += x;
-      y1 += y;
-      break;
-    case "move":
-      x1 += x;
-      y1 += y;
-      x2 += x;
-      y2 += y;
-      break;
-  }
-  return [
-    {
-      x: x1,
-      y: y1
-    },
-    {
-      x: x2,
-      y: y2
-    }
-  ];
-}
-var index$7 = "";
-function isPointInDraw(bounds, canvas, history, e) {
-  if (!canvas) {
-    return false;
-  }
-  const $canvas = document.createElement("canvas");
-  $canvas.width = bounds.width;
-  $canvas.height = bounds.height;
-  const ctx = $canvas.getContext("2d");
-  if (!ctx) {
-    return false;
-  }
-  const { left, top } = canvas.getBoundingClientRect();
-  const x = e.clientX - left;
-  const y = e.clientY - top;
-  const stack = [...history.stack.slice(0, history.index + 1)];
-  return stack.reverse().find((item) => {
-    var _a;
-    if (item.type !== HistoryItemType.Source) {
-      return false;
-    }
-    ctx.clearRect(0, 0, bounds.width, bounds.height);
-    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";
-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];
-var ScreenshotsCanvas = memo(forwardRef(function ScreenshotsCanvas2(props, ref) {
-  const {
-    url,
-    image,
-    width,
-    height
-  } = useStore();
-  const emiter = useEmiter();
-  const [history] = useHistory();
-  const [cursor] = useCursor();
-  const [bounds, boundsDispatcher] = useBounds();
-  const [operation] = useOperation();
-  const resizeOrMoveRef = useRef();
-  const pointRef = useRef(null);
-  const boundsRef = useRef(null);
-  const canvasRef = useRef(null);
-  const ctxRef = useRef(null);
-  const draw2 = useCallback(() => {
-    if (!bounds || !ctxRef.current) {
-      return;
-    }
-    const ctx = ctxRef.current;
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "low";
-    ctx.clearRect(0, 0, bounds.width, bounds.height);
-    history.stack.slice(0, history.index + 1).forEach((item) => {
-      if (item.type === HistoryItemType.Source) {
-        item.draw(ctx, item);
-      }
-    });
-  }, [bounds, ctxRef, history]);
-  const onMouseDown = useCallback((e, resizeOrMove) => {
-    if (e.button !== 0 || !bounds) {
-      return;
-    }
-    if (!operation) {
-      resizeOrMoveRef.current = resizeOrMove;
-      pointRef.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      boundsRef.current = {
-        x: bounds.x,
-        y: bounds.y,
-        width: bounds.width,
-        height: bounds.height
-      };
-    } else {
-      const draw22 = isPointInDraw(bounds, canvasRef.current, history, e.nativeEvent);
-      if (draw22) {
-        emiter.emit("drawselect", draw22, e.nativeEvent);
-      } else {
-        emiter.emit("mousedown", e.nativeEvent);
-      }
-    }
-  }, [bounds, operation, emiter, history]);
-  const updateBounds = useCallback((e) => {
-    if (!resizeOrMoveRef.current || !pointRef.current || !boundsRef.current || !bounds) {
-      return;
-    }
-    const points = getBoundsByPoints(e, resizeOrMoveRef.current, pointRef.current, boundsRef.current);
-    boundsDispatcher.set(getBoundsByPoints$1(points[0], points[1], bounds, width, height, resizeOrMoveRef.current));
-  }, [width, height, bounds, boundsDispatcher]);
-  useLayoutEffect(() => {
-    if (!image || !bounds || !canvasRef.current) {
-      ctxRef.current = null;
-      return;
-    }
-    if (!ctxRef.current) {
-      ctxRef.current = canvasRef.current.getContext("2d");
-    }
-    draw2();
-  }, [image, bounds, draw2]);
-  useEffect(() => {
-    const onMouseMove = (e) => {
-      if (!operation) {
-        if (!resizeOrMoveRef.current || !pointRef.current || !boundsRef.current) {
-          return;
-        }
-        updateBounds(e);
-      } else {
-        emiter.emit("mousemove", e);
-      }
-    };
-    const onMouseUp = (e) => {
-      if (!operation) {
-        if (!resizeOrMoveRef.current || !pointRef.current || !boundsRef.current) {
-          return;
-        }
-        updateBounds(e);
-        resizeOrMoveRef.current = void 0;
-        pointRef.current = null;
-        boundsRef.current = null;
-      } else {
-        emiter.emit("mouseup", e);
-      }
-    };
-    window.addEventListener("mousemove", onMouseMove);
-    window.addEventListener("mouseup", onMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [updateBounds, operation, emiter]);
-  useImperativeHandle(ref, () => ctxRef.current);
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-canvas",
-    style: {
-      width: (bounds == null ? void 0 : bounds.width) || 0,
-      height: (bounds == null ? void 0 : bounds.height) || 0,
-      transform: bounds ? `translate(${bounds.x}px, ${bounds.y}px)` : "none"
-    },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$j,
-      lineNumber: 173,
-      columnNumber: 7
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-canvas-body",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$j,
-      lineNumber: 181,
-      columnNumber: 9
-    }
-  }, /* @__PURE__ */ React.createElement("img", {
-    className: "screenshots-canvas-image",
-    src: url,
-    style: {
-      width,
-      height,
-      transform: bounds ? `translate(${-bounds.x}px, ${-bounds.y}px)` : "none"
-    },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$j,
-      lineNumber: 183,
-      columnNumber: 11
-    }
-  }), /* @__PURE__ */ React.createElement("canvas", {
-    ref: canvasRef,
-    className: "screenshots-canvas-panel",
-    width: (bounds == null ? void 0 : bounds.width) || 0,
-    height: (bounds == null ? void 0 : bounds.height) || 0,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$j,
-      lineNumber: 192,
-      columnNumber: 11
-    }
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-canvas-mask",
-    style: {
-      cursor
-    },
-    onMouseDown: (e) => onMouseDown(e, "move"),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$j,
-      lineNumber: 199,
-      columnNumber: 9
-    }
-  }), borders.map((border) => {
-    return /* @__PURE__ */ React.createElement("div", {
-      key: border,
-      className: `screenshots-canvas-border-${border}`,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$j,
-        lineNumber: 207,
-        columnNumber: 18
-      }
-    });
-  }), resizePoints.map((resizePoint) => {
-    return /* @__PURE__ */ React.createElement("div", {
-      key: resizePoint,
-      className: `screenshots-canvas-point-${resizePoint}`,
-      onMouseDown: (e) => onMouseDown(e, resizePoint),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$j,
-        lineNumber: 211,
-        columnNumber: 13
-      }
-    });
-  }));
-}));
-function useCall() {
-  const dispatcher = useDispatcher();
-  const call = useCallback((funcName, ...args) => {
-    var _a;
-    (_a = dispatcher.call) == null ? void 0 : _a.call(dispatcher, funcName, ...args);
-  }, [dispatcher]);
-  return call;
-}
-function useCanvasContextRef() {
-  const { canvasContextRef } = useStore();
-  return canvasContextRef;
-}
-function useReset() {
-  const emiter = useEmiter();
-  const [, boundsDispatcher] = useBounds();
-  const [, cursorDispatcher] = useCursor();
-  const [, historyDispatcher] = useHistory();
-  const [, operatioDispatcher] = useOperation();
-  const reset = useCallback(() => {
-    emiter.reset();
-    historyDispatcher.reset();
-    boundsDispatcher.reset();
-    cursorDispatcher.reset();
-    operatioDispatcher.reset();
-  }, [emiter, historyDispatcher, boundsDispatcher, cursorDispatcher, operatioDispatcher]);
-  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 ScreenshotsOption = memo(function ScreenshotsOption2({
-  open,
-  content,
-  children
-}) {
-  var _a, _b;
-  const childrenRef = useRef(null);
-  const popoverRef = useRef(null);
-  const contentRef = useRef(null);
-  const operationsRect = useContext(ScreenshotsOperationsCtx);
-  const [placement, setPlacement] = useState(Placement.Bottom);
-  const [position, setPosition] = useState(null);
-  const [offsetX, setOffsetX] = useState(0);
-  const getPopoverEl = () => {
-    if (!popoverRef.current) {
-      popoverRef.current = document.createElement("div");
-    }
-    return popoverRef.current;
-  };
-  useEffect(() => {
-    const $el = getPopoverEl();
-    if (open) {
-      document.body.appendChild($el);
-    }
-    return () => {
-      $el.remove();
-    };
-  }, [open]);
-  useEffect(() => {
-    if (!open || !operationsRect || !childrenRef.current || !contentRef.current) {
-      return;
-    }
-    const childrenRect = childrenRef.current.getBoundingClientRect();
-    const contentRect = contentRef.current.getBoundingClientRect();
-    let currentPlacement = placement;
-    let x = childrenRect.left + childrenRect.width / 2;
-    let y = childrenRect.top + childrenRect.height;
-    let currentOffsetX = offsetX;
-    if (x + contentRect.width / 2 > operationsRect.x + operationsRect.width) {
-      const ox = x;
-      x = operationsRect.x + operationsRect.width - contentRect.width / 2;
-      currentOffsetX = ox - x;
-    }
-    if (x < operationsRect.x + contentRect.width / 2) {
-      const ox = x;
-      x = operationsRect.x + contentRect.width / 2;
-      currentOffsetX = ox - x;
-    }
-    if (y > window.innerHeight - contentRect.height) {
-      if (currentPlacement === Placement.Bottom) {
-        currentPlacement = Placement.Top;
-      }
-      y = childrenRect.top - contentRect.height;
-    }
-    if (y < 0) {
-      if (currentPlacement === Placement.Top) {
-        currentPlacement = Placement.Bottom;
-      }
-      y = childrenRect.top + childrenRect.height;
-    }
-    if (currentPlacement !== placement) {
-      setPlacement(currentPlacement);
-    }
-    if ((position == null ? void 0 : position.x) !== x || position.y !== y) {
-      setPosition({
-        x,
-        y
-      });
-    }
-    if (currentOffsetX !== offsetX) {
-      setOffsetX(currentOffsetX);
-    }
-  });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, cloneElement(children, {
-    ref: childrenRef
-  }), open && content && createPortal(/* @__PURE__ */ React.createElement("div", {
-    ref: contentRef,
-    className: "screenshots-option",
-    style: {
-      visibility: position ? "visible" : "hidden",
-      transform: `translate(${(_a = position == null ? void 0 : position.x) != null ? _a : 0}px, ${(_b = position == null ? void 0 : position.y) != null ? _b : 0}px)`
-    },
-    "data-placement": placement,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 111,
-      columnNumber: 11
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-option-container",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 120,
-      columnNumber: 13
-    }
-  }, content), /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-option-arrow",
-    style: {
-      marginLeft: offsetX
-    },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 121,
-      columnNumber: 13
-    }
-  })), getPopoverEl()));
-});
-var index$5 = "";
-var _jsxFileName$h = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";
-var ScreenshotsButton = memo(function ScreenshotsButton2({
-  title,
-  icon,
-  checked,
-  disabled,
-  option,
-  onClick
-}) {
-  const classNames = ["screenshots-button"];
-  const onButtonClick = useCallback((e) => {
-    if (disabled || !onClick) {
-      return;
-    }
-    onClick(e);
-  }, [disabled, onClick]);
-  if (checked) {
-    classNames.push("screenshots-button-checked");
-  }
-  if (disabled) {
-    classNames.push("screenshots-button-disabled");
-  }
-  return /* @__PURE__ */ React.createElement(ScreenshotsOption, {
-    open: checked,
-    content: option,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$h,
-      lineNumber: 42,
-      columnNumber: 5
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: classNames.join(" "),
-    title,
-    onClick: onButtonClick,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$h,
-      lineNumber: 43,
-      columnNumber: 7
-    }
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: icon,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$h,
-      lineNumber: 44,
-      columnNumber: 9
-    }
-  })));
-});
-var _jsxFileName$g = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ok/index.tsx";
-function Ok() {
-  const {
-    image,
-    width,
-    height,
-    history,
-    bounds,
-    lang
-  } = useStore();
-  const canvasContextRef = useCanvasContextRef();
-  const [, historyDispatcher] = useHistory();
-  const call = useCall();
-  const reset = useReset();
-  const onClick = useCallback(() => {
-    historyDispatcher.clearSelect();
-    setTimeout(() => {
-      if (!canvasContextRef.current || !image || !bounds) {
-        return;
-      }
-      composeImage({
-        image,
-        width,
-        height,
-        history,
-        bounds
-      }).then((blob) => {
-        call("onOk", blob, bounds);
-        reset();
-      });
-    });
-  }, [canvasContextRef, historyDispatcher, image, width, height, history, bounds, call, reset]);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_ok_title,
-    icon: "icon-ok",
-    onClick,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$g,
-      lineNumber: 36,
-      columnNumber: 10
-    }
-  });
-}
-var _jsxFileName$f = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Cancel/index.tsx";
-function Cancel() {
-  const call = useCall();
-  const reset = useReset();
-  const lang = useLang();
-  const onClick = useCallback(() => {
-    call("onCancel");
-    reset();
-  }, [call, reset]);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_cancel_title,
-    icon: "icon-cancel",
-    onClick,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$f,
-      lineNumber: 17,
-      columnNumber: 10
-    }
-  });
-}
-var _jsxFileName$e = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Save/index.tsx";
-function Save() {
-  const {
-    image,
-    width,
-    height,
-    history,
-    bounds,
-    lang
-  } = useStore();
-  const canvasContextRef = useCanvasContextRef();
-  const [, historyDispatcher] = useHistory();
-  const call = useCall();
-  const reset = useReset();
-  const onClick = useCallback(() => {
-    historyDispatcher.clearSelect();
-    setTimeout(() => {
-      if (!canvasContextRef.current || !image || !bounds) {
-        return;
-      }
-      composeImage({
-        image,
-        width,
-        height,
-        history,
-        bounds
-      }).then((blob) => {
-        call("onSave", blob, bounds);
-        reset();
-      });
-    });
-  }, [canvasContextRef, historyDispatcher, image, width, height, history, bounds, call, reset]);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_save_title,
-    icon: "icon-save",
-    onClick,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$e,
-      lineNumber: 36,
-      columnNumber: 10
-    }
-  });
-}
-var _jsxFileName$d = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Redo/index.tsx";
-function Redo() {
-  const lang = useLang();
-  const [history, historyDispatcher] = useHistory();
-  const onClick = useCallback(() => {
-    historyDispatcher.redo();
-  }, [historyDispatcher]);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_redo_title,
-    icon: "icon-redo",
-    disabled: !history.stack.length || history.stack.length - 1 === history.index,
-    onClick,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$d,
-      lineNumber: 15,
-      columnNumber: 5
-    }
-  });
-}
-var _jsxFileName$c = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Undo/index.tsx";
-function Undo() {
-  const lang = useLang();
-  const [history, historyDispatcher] = useHistory();
-  const onClick = useCallback(() => {
-    historyDispatcher.undo();
-  }, [historyDispatcher]);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_undo_title,
-    icon: "icon-undo",
-    disabled: history.index === -1,
-    onClick,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 15,
-      columnNumber: 5
-    }
-  });
-}
-var index$4 = "";
-var _jsxFileName$b = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSize/index.tsx";
-var ScreenshotsSize = memo(function ScreenshotsSize2({
-  value,
-  onChange
-}) {
-  const sizes2 = [3, 6, 9];
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-size",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$b,
-      lineNumber: 12,
-      columnNumber: 5
-    }
-  }, sizes2.map((size) => {
-    const classNames = ["screenshots-size-item"];
-    if (size === value) {
-      classNames.push("screenshots-size-active");
-    }
-    return /* @__PURE__ */ React.createElement("div", {
-      key: size,
-      className: classNames.join(" "),
-      onClick: () => onChange && onChange(size),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$b,
-        lineNumber: 21,
-        columnNumber: 11
-      }
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "screenshots-size-pointer",
-      style: {
-        width: size * 1.8,
-        height: size * 1.8
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$b,
-        lineNumber: 22,
-        columnNumber: 13
-      }
-    }));
-  }));
-});
-function useCanvasMousedown(onMousedown) {
-  const emiter = useEmiter();
-  useEffect(() => {
-    emiter.on("mousedown", onMousedown);
-    return () => {
-      emiter.off("mousedown", onMousedown);
-    };
-  }, [onMousedown, emiter]);
-}
-function useCanvasMousemove(onMousemove) {
-  const emiter = useEmiter();
-  useEffect(() => {
-    emiter.on("mousemove", onMousemove);
-    return () => {
-      emiter.off("mousemove", onMousemove);
-    };
-  }, [onMousemove, emiter]);
-}
-function useCanvasMouseup(onMouseup) {
-  const emiter = useEmiter();
-  useEffect(() => {
-    emiter.on("mouseup", onMouseup);
-    return () => {
-      emiter.off("mouseup", onMouseup);
-    };
-  }, [onMouseup, emiter]);
-}
-var _jsxFileName$a = "/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];
-  }
-  const {
-    data,
-    width
-  } = imageData;
-  const index2 = y * width * 4 + x * 4;
-  return Array.from(data.slice(index2, index2 + 4));
-}
-function draw$5(ctx, action) {
-  const {
-    tiles,
-    size
-  } = action.data;
-  tiles.forEach((tile) => {
-    const r = Math.round(tile.color[0]);
-    const g = Math.round(tile.color[1]);
-    const b = Math.round(tile.color[2]);
-    const a = tile.color[3] / 255;
-    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-    ctx.fillRect(tile.x - size / 2, tile.y - size / 2, size, size);
-  });
-}
-function Mosaic() {
-  const lang = useLang();
-  const {
-    image,
-    width,
-    height
-  } = useStore();
-  const [operation, operationDispatcher] = useOperation();
-  const canvasContextRef = useCanvasContextRef();
-  const [history, historyDispatcher] = useHistory();
-  const [bounds] = useBounds();
-  const [, cursorDispatcher] = useCursor();
-  const [size, setSize] = useState(3);
-  const imageDataRef = useRef(null);
-  const mosaicRef = useRef(null);
-  const checked = operation === "Mosaic";
-  const selectMosaic = useCallback(() => {
-    operationDispatcher.set("Mosaic");
-    cursorDispatcher.set("crosshair");
-  }, [operationDispatcher, cursorDispatcher]);
-  const onSelectMosaic = useCallback(() => {
-    if (checked) {
-      return;
-    }
-    selectMosaic();
-    historyDispatcher.clearSelect();
-  }, [checked, selectMosaic, historyDispatcher]);
-  const onMousedown = useCallback((e) => {
-    if (!checked || mosaicRef.current || !imageDataRef.current || !canvasContextRef.current) {
-      return;
-    }
-    const rect = canvasContextRef.current.canvas.getBoundingClientRect();
-    const x = e.clientX - rect.x;
-    const y = e.clientY - rect.y;
-    const mosaicSize = size * 2;
-    mosaicRef.current = {
-      name: "Mosaic",
-      type: HistoryItemType.Source,
-      data: {
-        size: mosaicSize,
-        tiles: [{
-          x,
-          y,
-          color: getColor(x, y, imageDataRef.current)
-        }]
-      },
-      editHistory: [],
-      draw: draw$5
-    };
-  }, [checked, size, canvasContextRef]);
-  const onMousemove = useCallback((e) => {
-    if (!checked || !mosaicRef.current || !canvasContextRef.current || !imageDataRef.current) {
-      return;
-    }
-    const rect = canvasContextRef.current.canvas.getBoundingClientRect();
-    const x = e.clientX - rect.x;
-    const y = e.clientY - rect.y;
-    const mosaicSize = mosaicRef.current.data.size;
-    const mosaicTiles = mosaicRef.current.data.tiles;
-    let lastTile = mosaicTiles[mosaicTiles.length - 1];
-    if (!lastTile) {
-      mosaicTiles.push({
-        x,
-        y,
-        color: getColor(x, y, imageDataRef.current)
-      });
-    } else {
-      const dx = lastTile.x - x;
-      const dy = lastTile.y - y;
-      let length = Math.sqrt(dx ** 2 + dy ** 2);
-      const sin = -dy / length;
-      const cos = -dx / length;
-      while (length > mosaicSize) {
-        const cx = Math.floor(lastTile.x + mosaicSize * cos);
-        const cy = Math.floor(lastTile.y + mosaicSize * sin);
-        lastTile = {
-          x: cx,
-          y: cy,
-          color: getColor(cx, cy, imageDataRef.current)
-        };
-        mosaicTiles.push(lastTile);
-        length -= mosaicSize;
-      }
-      if (length > mosaicSize / 2) {
-        mosaicTiles.push({
-          x,
-          y,
-          color: getColor(x, y, imageDataRef.current)
-        });
-      }
-    }
-    if (history.top !== mosaicRef.current) {
-      historyDispatcher.push(mosaicRef.current);
-    } else {
-      historyDispatcher.set(history);
-    }
-  }, [checked, canvasContextRef, history, historyDispatcher]);
-  const onMouseup = useCallback(() => {
-    if (!checked) {
-      return;
-    }
-    mosaicRef.current = null;
-  }, [checked]);
-  useCanvasMousedown(onMousedown);
-  useCanvasMousemove(onMousemove);
-  useCanvasMouseup(onMouseup);
-  useEffect(() => {
-    if (!bounds || !image || !checked) {
-      return;
-    }
-    const $canvas = document.createElement("canvas");
-    const canvasContext = $canvas.getContext("2d");
-    if (!canvasContext) {
-      return;
-    }
-    $canvas.width = bounds.width;
-    $canvas.height = bounds.height;
-    const rx = image.naturalWidth / width;
-    const ry = image.naturalHeight / height;
-    canvasContext.drawImage(image, bounds.x * rx, bounds.y * ry, bounds.width * rx, bounds.height * ry, 0, 0, bounds.width, bounds.height);
-    imageDataRef.current = canvasContext.getImageData(0, 0, bounds.width, bounds.height);
-  }, [width, height, bounds, image, checked]);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_mosaic_title,
-    icon: "icon-mosaic",
-    checked,
-    onClick: onSelectMosaic,
-    option: /* @__PURE__ */ React.createElement(ScreenshotsSize, {
-      value: size,
-      onChange: setSize,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 220,
-        columnNumber: 15
-      }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 215,
-      columnNumber: 5
-    }
-  });
-}
-var index$3 = "";
-var _jsxFileName$9 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsColor/index.tsx";
-var ScreenshotsColor = memo(function ScreenshotsColor2({
-  value,
-  onChange
-}) {
-  const colors = ["#ee5126", "#fceb4d", "#90e746", "#51c0fa", "#7a7a7a", "#ffffff"];
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-color",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$9,
-      lineNumber: 12,
-      columnNumber: 5
-    }
-  }, colors.map((color) => {
-    const classNames = ["screenshots-color-item"];
-    if (color === value) {
-      classNames.push("screenshots-color-active");
-    }
-    return /* @__PURE__ */ React.createElement("div", {
-      key: color,
-      className: classNames.join(" "),
-      style: {
-        backgroundColor: color
-      },
-      onClick: () => onChange && onChange(color),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 19,
-        columnNumber: 11
-      }
-    });
-  }));
-});
-var index$2 = "";
-var _jsxFileName$8 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSizeColor/index.tsx";
-var ScreenshotsSizeColor = memo(function ScreenshotsSizeColor2({
-  size,
-  color,
-  onSizeChange,
-  onColorChange
-}) {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-sizecolor",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$8,
-      lineNumber: 20,
-      columnNumber: 5
-    }
-  }, /* @__PURE__ */ React.createElement(ScreenshotsSize, {
-    value: size,
-    onChange: onSizeChange,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$8,
-      lineNumber: 21,
-      columnNumber: 7
-    }
-  }), /* @__PURE__ */ React.createElement(ScreenshotsColor, {
-    value: color,
-    onChange: onColorChange,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$8,
-      lineNumber: 22,
-      columnNumber: 7
-    }
-  }));
-});
-const hiddenTextareaStyle = `
-min-width: 0 !important;
-width: 0 !important;
-min-height: 0 !important;
-height:0 !important;
-visibility: hidden !important;
-overflow: hidden !important;
-position: absolute !important;
-z-index: -1000 !important;
-top:0 !important;
-right:0 !important;
-`;
-const sizeStyle = [
-  "letter-spacing",
-  "line-height",
-  "padding-top",
-  "padding-bottom",
-  "font-family",
-  "font-weight",
-  "font-size",
-  "font-variant",
-  "text-rendering",
-  "text-transform",
-  "text-indent",
-  "padding-left",
-  "padding-right",
-  "border-width",
-  "box-sizing",
-  "white-space",
-  "word-break"
-];
-let hiddenTextarea;
-function getComputedSizeInfo(node) {
-  const style = window.getComputedStyle(node);
-  const boxSizing = style.getPropertyValue("box-sizing") || style.getPropertyValue("-moz-box-sizing") || style.getPropertyValue("-webkit-box-sizing");
-  const paddingSize = parseFloat(style.getPropertyValue("padding-bottom")) + parseFloat(style.getPropertyValue("padding-top"));
-  const borderSize = parseFloat(style.getPropertyValue("border-bottom-width")) + parseFloat(style.getPropertyValue("border-top-width"));
-  const sizingStyle = sizeStyle.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";");
-  return {
-    sizingStyle,
-    paddingSize,
-    borderSize,
-    boxSizing
-  };
-}
-function calculateNodeSize(textarea, value, maxWidth, maxHeight) {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement("textarea");
-    hiddenTextarea.setAttribute("tab-index", "-1");
-    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.value = value || " ";
-  let width = hiddenTextarea.scrollWidth;
-  let height = hiddenTextarea.scrollHeight;
-  if (boxSizing === "border-box") {
-    width += borderSize;
-    height += borderSize;
-  } else if (boxSizing === "content-box") {
-    width -= paddingSize;
-    height -= paddingSize;
-  }
-  return {
-    width: Math.min(width, maxWidth),
-    height: Math.min(height, maxHeight)
-  };
-}
-var index$1 = "";
-var _jsxFileName$7 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsTextarea/index.tsx";
-var ScreenshotsTextarea = memo(function ScreenshotsTextarea2({
-  x,
-  y,
-  maxWidth,
-  maxHeight,
-  size,
-  color,
-  value,
-  onChange,
-  onBlur
-}) {
-  const popoverRef = useRef(null);
-  const textareaRef = useRef(null);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-  const getPopoverEl = () => {
-    if (!popoverRef.current) {
-      popoverRef.current = document.createElement("div");
-    }
-    return popoverRef.current;
-  };
-  useLayoutEffect(() => {
-    if (popoverRef.current) {
-      document.body.appendChild(popoverRef.current);
-      requestAnimationFrame(() => {
-        var _a;
-        (_a = textareaRef.current) == null ? void 0 : _a.focus();
-      });
-    }
-    return () => {
-      var _a;
-      (_a = popoverRef.current) == null ? void 0 : _a.remove();
-    };
-  }, []);
-  useLayoutEffect(() => {
-    if (!textareaRef.current) {
-      return;
-    }
-    const {
-      width: width2,
-      height: height2
-    } = calculateNodeSize(textareaRef.current, value, maxWidth, maxHeight);
-    setWidth(width2);
-    setHeight(height2);
-  }, [value, maxWidth, maxHeight]);
-  return createPortal(/* @__PURE__ */ React.createElement("textarea", {
-    ref: textareaRef,
-    className: "screenshots-textarea",
-    style: {
-      color,
-      width,
-      height,
-      maxWidth,
-      maxHeight,
-      fontSize: size,
-      lineHeight: `${size}px`,
-      transform: `translate(${x}px, ${y}px)`
-    },
-    value,
-    onChange: (e) => onChange && onChange(e.target.value),
-    onBlur: (e) => onBlur && onBlur(e),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$7,
-      lineNumber: 65,
-      columnNumber: 5
-    }
-  }), getPopoverEl());
-});
-function useDrawSelect(onDrawSelect) {
-  const emiter = useEmiter();
-  useEffect(() => {
-    emiter.on("drawselect", onDrawSelect);
-    return () => {
-      emiter.off("drawselect", onDrawSelect);
-    };
-  }, [onDrawSelect, emiter]);
-}
-var _jsxFileName$6 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Text/index.tsx";
-const sizes = {
-  3: 18,
-  6: 32,
-  9: 46
-};
-function draw$4(ctx, action) {
-  const {
-    size,
-    color,
-    fontFamily,
-    x,
-    y,
-    text
-  } = action.data;
-  ctx.fillStyle = color;
-  ctx.textAlign = "left";
-  ctx.textBaseline = "top";
-  ctx.font = `${size}px ${fontFamily}`;
-  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
-  });
-  text.split("\n").forEach((item, index2) => {
-    ctx.fillText(item, x + distance.x, y + distance.y + index2 * size);
-  });
-}
-function isHit$1(ctx, action, point) {
-  ctx.textAlign = "left";
-  ctx.textBaseline = "top";
-  ctx.font = `${action.data.size}px ${action.data.fontFamily}`;
-  let width = 0;
-  let height = 0;
-  action.data.text.split("\n").forEach((item) => {
-    const measured = ctx.measureText(item);
-    if (width < measured.width) {
-      width = measured.width;
-    }
-    height += action.data.size;
-  });
-  const {
-    x,
-    y
-  } = action.editHistory.reduce((distance, {
-    data
-  }) => ({
-    x: distance.x + data.x2 - data.x1,
-    y: distance.y + data.y2 - data.y1
-  }), {
-    x: 0,
-    y: 0
-  });
-  const left = action.data.x + x;
-  const top = action.data.y + y;
-  const right = left + width;
-  const bottom = top + height;
-  return point.x >= left && point.x <= right && point.y >= top && point.y <= bottom;
-}
-function Text() {
-  const lang = useLang();
-  const [history, historyDispatcher] = useHistory();
-  const [bounds] = useBounds();
-  const [operation, operationDispatcher] = useOperation();
-  const [, cursorDispatcher] = useCursor();
-  const canvasContextRef = useCanvasContextRef();
-  const [size, setSize] = useState(3);
-  const [color, setColor] = useState("#ee5126");
-  const textRef = useRef(null);
-  const textEditRef = useRef(null);
-  const [textareaBounds, setTextareaBounds] = useState(null);
-  const [text, setText] = useState("");
-  const checked = operation === "Text";
-  const selectText = useCallback(() => {
-    operationDispatcher.set("Text");
-    cursorDispatcher.set("default");
-  }, [operationDispatcher, cursorDispatcher]);
-  const onSelectText = useCallback(() => {
-    if (checked) {
-      return;
-    }
-    selectText();
-    historyDispatcher.clearSelect();
-  }, [checked, selectText, historyDispatcher]);
-  const onSizeChange = useCallback((size2) => {
-    if (textRef.current) {
-      textRef.current.data.size = sizes[size2];
-    }
-    setSize(size2);
-  }, []);
-  const onColorChange = useCallback((color2) => {
-    if (textRef.current) {
-      textRef.current.data.color = color2;
-    }
-    setColor(color2);
-  }, []);
-  const onTextareaChange = useCallback((value) => {
-    setText(value);
-    if (checked && textRef.current) {
-      textRef.current.data.text = value;
-    }
-  }, [checked]);
-  const onTextareaBlur = useCallback(() => {
-    if (textRef.current && textRef.current.data.text) {
-      historyDispatcher.push(textRef.current);
-    }
-    textRef.current = null;
-    setText("");
-    setTextareaBounds(null);
-  }, [historyDispatcher]);
-  const onDrawSelect = useCallback((action, e) => {
-    if (action.name !== "Text") {
-      return;
-    }
-    selectText();
-    textEditRef.current = {
-      type: HistoryItemType.Edit,
-      data: {
-        x1: e.clientX,
-        y1: e.clientY,
-        x2: e.clientX,
-        y2: e.clientY
-      },
-      source: action
-    };
-    historyDispatcher.select(action);
-  }, [selectText, historyDispatcher]);
-  const onMousedown = useCallback((e) => {
-    if (!checked || !canvasContextRef.current || textRef.current || !bounds) {
-      return;
-    }
-    const {
-      left,
-      top
-    } = canvasContextRef.current.canvas.getBoundingClientRect();
-    const fontFamily = window.getComputedStyle(canvasContextRef.current.canvas).fontFamily;
-    const x = e.clientX - left;
-    const y = e.clientY - top;
-    textRef.current = {
-      name: "Text",
-      type: HistoryItemType.Source,
-      data: {
-        size: sizes[size],
-        color,
-        fontFamily,
-        x,
-        y,
-        text: ""
-      },
-      editHistory: [],
-      draw: draw$4,
-      isHit: isHit$1
-    };
-    setTextareaBounds({
-      x: e.clientX,
-      y: e.clientY,
-      maxWidth: bounds.width - x,
-      maxHeight: bounds.height - y
-    });
-  }, [checked, size, color, bounds, canvasContextRef]);
-  const onMousemove = useCallback((e) => {
-    if (!checked) {
-      return;
-    }
-    if (textEditRef.current) {
-      textEditRef.current.data.x2 = e.clientX;
-      textEditRef.current.data.y2 = e.clientY;
-      if (history.top !== textEditRef.current) {
-        textEditRef.current.source.editHistory.push(textEditRef.current);
-        historyDispatcher.push(textEditRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    }
-  }, [checked, history, historyDispatcher]);
-  const onMouseup = useCallback(() => {
-    if (!checked) {
-      return;
-    }
-    textEditRef.current = null;
-  }, [checked]);
-  useDrawSelect(onDrawSelect);
-  useCanvasMousedown(onMousedown);
-  useCanvasMousemove(onMousemove);
-  useCanvasMouseup(onMouseup);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_text_title,
-    icon: "icon-text",
-    checked,
-    onClick: onSelectText,
-    option: /* @__PURE__ */ React.createElement(ScreenshotsSizeColor, {
-      size,
-      color,
-      onSizeChange,
-      onColorChange,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 261,
-        columnNumber: 11
-      }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$6,
-      lineNumber: 255,
-      columnNumber: 7
-    }
-  }), checked && textareaBounds && /* @__PURE__ */ React.createElement(ScreenshotsTextarea, {
-    x: textareaBounds.x,
-    y: textareaBounds.y,
-    maxWidth: textareaBounds.maxWidth,
-    maxHeight: textareaBounds.maxHeight,
-    size: sizes[size],
-    color,
-    value: text,
-    onChange: onTextareaChange,
-    onBlur: onTextareaBlur,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$6,
-      lineNumber: 265,
-      columnNumber: 9
-    }
-  }));
-}
-const CircleRadius = 4;
-function drawDragCircle(ctx, x, y) {
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = "#000000";
-  ctx.fillStyle = "#ffffff";
-  ctx.beginPath();
-  ctx.arc(x, y, CircleRadius, 0, 2 * Math.PI);
-  ctx.fill();
-  ctx.stroke();
-}
-function isHit(ctx, action, point) {
-  action.draw(ctx, action);
-  const { data } = ctx.getImageData(point.x, point.y, 1, 1);
-  return data.some((val) => val !== 0);
-}
-function isHitCircle(canvas, e, point) {
-  if (!canvas) {
-    return false;
-  }
-  const { left, top } = canvas.getBoundingClientRect();
-  const x = e.clientX - left;
-  const y = e.clientY - top;
-  return (point.x - x) ** 2 + (point.y - y) ** 2 < CircleRadius ** 2;
-}
-function draw$3(ctx, action) {
-  const { size, color, points } = action.data;
-  ctx.lineCap = "round";
-  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 });
-  ctx.beginPath();
-  points.forEach((item, index2) => {
-    if (index2 === 0) {
-      ctx.moveTo(item.x + distance.x, item.y + distance.y);
-    } else {
-      ctx.lineTo(item.x + distance.x, item.y + distance.y);
-    }
-  });
-  ctx.stroke();
-  if (action.isSelected) {
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = "#000000";
-    ctx.beginPath();
-    points.forEach((item, index2) => {
-      if (index2 === 0) {
-        ctx.moveTo(item.x + distance.x, item.y + distance.y);
-      } else {
-        ctx.lineTo(item.x + distance.x, item.y + distance.y);
-      }
-    });
-    ctx.stroke();
-  }
-}
-var _jsxFileName$5 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Brush/index.tsx";
-function Brush() {
-  const lang = useLang();
-  const [, cursorDispatcher] = useCursor();
-  const [operation, operationDispatcher] = useOperation();
-  const canvasContextRef = useCanvasContextRef();
-  const [history, historyDispatcher] = useHistory();
-  const [size, setSize] = useState(3);
-  const [color, setColor] = useState("#ee5126");
-  const brushRef = useRef(null);
-  const brushEditRef = useRef(null);
-  const checked = operation === "Brush";
-  const selectBrush = useCallback(() => {
-    operationDispatcher.set("Brush");
-    cursorDispatcher.set("default");
-  }, [operationDispatcher, cursorDispatcher]);
-  const onSelectBrush = useCallback(() => {
-    if (checked) {
-      return;
-    }
-    selectBrush();
-    historyDispatcher.clearSelect();
-  }, [checked, selectBrush, historyDispatcher]);
-  const onDrawSelect = useCallback((action, e) => {
-    if (action.name !== "Brush") {
-      return;
-    }
-    selectBrush();
-    brushEditRef.current = {
-      type: HistoryItemType.Edit,
-      data: {
-        x1: e.clientX,
-        y1: e.clientY,
-        x2: e.clientX,
-        y2: e.clientY
-      },
-      source: action
-    };
-    historyDispatcher.select(action);
-  }, [selectBrush, historyDispatcher]);
-  const onMousedown = useCallback((e) => {
-    if (!checked || brushRef.current || !canvasContextRef.current) {
-      return;
-    }
-    const {
-      left,
-      top
-    } = canvasContextRef.current.canvas.getBoundingClientRect();
-    brushRef.current = {
-      name: "Brush",
-      type: HistoryItemType.Source,
-      data: {
-        size,
-        color,
-        points: [{
-          x: e.clientX - left,
-          y: e.clientY - top
-        }]
-      },
-      editHistory: [],
-      draw: draw$3,
-      isHit
-    };
-  }, [checked, canvasContextRef, size, color]);
-  const onMousemove = useCallback((e) => {
-    if (!checked || !canvasContextRef.current) {
-      return;
-    }
-    if (brushEditRef.current) {
-      brushEditRef.current.data.x2 = e.clientX;
-      brushEditRef.current.data.y2 = e.clientY;
-      if (history.top !== brushEditRef.current) {
-        brushEditRef.current.source.editHistory.push(brushEditRef.current);
-        historyDispatcher.push(brushEditRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    } else if (brushRef.current) {
-      const {
-        left,
-        top
-      } = canvasContextRef.current.canvas.getBoundingClientRect();
-      brushRef.current.data.points.push({
-        x: e.clientX - left,
-        y: e.clientY - top
-      });
-      if (history.top !== brushRef.current) {
-        historyDispatcher.push(brushRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    }
-  }, [checked, history, canvasContextRef, historyDispatcher]);
-  const onMouseup = useCallback(() => {
-    if (!checked) {
-      return;
-    }
-    if (brushRef.current) {
-      historyDispatcher.clearSelect();
-    }
-    brushRef.current = null;
-    brushEditRef.current = null;
-  }, [checked, historyDispatcher]);
-  useDrawSelect(onDrawSelect);
-  useCanvasMousedown(onMousedown);
-  useCanvasMousemove(onMousemove);
-  useCanvasMouseup(onMouseup);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_brush_title,
-    icon: "icon-brush",
-    checked,
-    onClick: onSelectBrush,
-    option: /* @__PURE__ */ React.createElement(ScreenshotsSizeColor, {
-      size,
-      color,
-      onSizeChange: setSize,
-      onColorChange: setColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$5,
-        lineNumber: 166,
-        columnNumber: 15
-      }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$5,
-      lineNumber: 161,
-      columnNumber: 5
-    }
-  });
-}
-function getEditedArrowData(action) {
-  let { x1, y1, x2, y2 } = action.data;
-  action.editHistory.forEach(({ data }) => {
-    const x = data.x2 - data.x1;
-    const y = data.y2 - data.y1;
-    if (data.type === ArrowEditType.Move) {
-      x1 += x;
-      y1 += y;
-      x2 += x;
-      y2 += y;
-    } else if (data.type === ArrowEditType.MoveStart) {
-      x1 += x;
-      y1 += y;
-    } else if (data.type === ArrowEditType.MoveEnd) {
-      x2 += x;
-      y2 += y;
-    }
-  });
-  return __spreadProps(__spreadValues({}, action.data), {
-    x1,
-    x2,
-    y1,
-    y2
-  });
-}
-function draw$2(ctx, action) {
-  const { size, color, x1, x2, y1, y2 } = getEditedArrowData(action);
-  ctx.lineCap = "round";
-  ctx.lineJoin = "bevel";
-  ctx.lineWidth = size;
-  ctx.strokeStyle = color;
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  const length = size * 3;
-  const angle = Math.atan2(dy, dx);
-  ctx.beginPath();
-  ctx.moveTo(x1, y1);
-  ctx.lineTo(x2, y2);
-  ctx.lineTo(x2 - length * Math.cos(angle - Math.PI / 6), y2 - length * Math.sin(angle - Math.PI / 6));
-  ctx.moveTo(x2, y2);
-  ctx.lineTo(x2 - length * Math.cos(angle + Math.PI / 6), y2 - length * Math.sin(angle + Math.PI / 6));
-  ctx.stroke();
-  if (action.isSelected) {
-    drawDragCircle(ctx, x1, y1);
-    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) {
-  ArrowEditType2[ArrowEditType2["Move"] = 0] = "Move";
-  ArrowEditType2[ArrowEditType2["MoveStart"] = 1] = "MoveStart";
-  ArrowEditType2[ArrowEditType2["MoveEnd"] = 2] = "MoveEnd";
-})(ArrowEditType || (ArrowEditType = {}));
-function Arrow() {
-  const lang = useLang();
-  const [, cursorDispatcher] = useCursor();
-  const [operation, operationDispatcher] = useOperation();
-  const [history, historyDispatcher] = useHistory();
-  const canvasContextRef = useCanvasContextRef();
-  const [size, setSize] = useState(3);
-  const [color, setColor] = useState("#ee5126");
-  const arrowRef = useRef(null);
-  const arrowEditRef = useRef(null);
-  const checked = operation === "Arrow";
-  const selectArrow = useCallback(() => {
-    operationDispatcher.set("Arrow");
-    cursorDispatcher.set("default");
-  }, [operationDispatcher, cursorDispatcher]);
-  const onSelectArrow = useCallback(() => {
-    if (checked) {
-      return;
-    }
-    selectArrow();
-    historyDispatcher.clearSelect();
-  }, [checked, selectArrow, historyDispatcher]);
-  const onDrawSelect = useCallback((action, e) => {
-    if (action.name !== "Arrow" || !canvasContextRef.current) {
-      return;
-    }
-    const source = action;
-    selectArrow();
-    const {
-      x1,
-      y1,
-      x2,
-      y2
-    } = getEditedArrowData(source);
-    let type = 0;
-    if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x1,
-      y: y1
-    })) {
-      type = 1;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x2,
-      y: y2
-    })) {
-      type = 2;
-    }
-    arrowEditRef.current = {
-      type: HistoryItemType.Edit,
-      data: {
-        type,
-        x1: e.clientX,
-        y1: e.clientY,
-        x2: e.clientX,
-        y2: e.clientY
-      },
-      source
-    };
-    historyDispatcher.select(action);
-  }, [canvasContextRef, selectArrow, historyDispatcher]);
-  const onMousedown = useCallback((e) => {
-    if (!checked || arrowRef.current || !canvasContextRef.current) {
-      return;
-    }
-    const {
-      left,
-      top
-    } = canvasContextRef.current.canvas.getBoundingClientRect();
-    arrowRef.current = {
-      name: "Arrow",
-      type: HistoryItemType.Source,
-      data: {
-        size,
-        color,
-        x1: e.clientX - left,
-        y1: e.clientY - top,
-        x2: e.clientX - left,
-        y2: e.clientY - top
-      },
-      editHistory: [],
-      draw: draw$2,
-      isHit
-    };
-  }, [checked, color, size, canvasContextRef]);
-  const onMousemove = useCallback((e) => {
-    if (!checked || !canvasContextRef.current) {
-      return;
-    }
-    if (arrowEditRef.current) {
-      arrowEditRef.current.data.x2 = e.clientX;
-      arrowEditRef.current.data.y2 = e.clientY;
-      if (history.top !== arrowEditRef.current) {
-        arrowEditRef.current.source.editHistory.push(arrowEditRef.current);
-        historyDispatcher.push(arrowEditRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    } else if (arrowRef.current) {
-      const {
-        left,
-        top
-      } = canvasContextRef.current.canvas.getBoundingClientRect();
-      arrowRef.current.data.x2 = e.clientX - left;
-      arrowRef.current.data.y2 = e.clientY - top;
-      if (history.top !== arrowRef.current) {
-        historyDispatcher.push(arrowRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    }
-  }, [checked, history, canvasContextRef, historyDispatcher]);
-  const onMouseup = useCallback(() => {
-    if (!checked) {
-      return;
-    }
-    if (arrowRef.current) {
-      historyDispatcher.clearSelect();
-    }
-    arrowRef.current = null;
-    arrowEditRef.current = null;
-  }, [checked, historyDispatcher]);
-  useDrawSelect(onDrawSelect);
-  useCanvasMousedown(onMousedown);
-  useCanvasMousemove(onMousemove);
-  useCanvasMouseup(onMouseup);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_arrow_title,
-    icon: "icon-arrow",
-    checked,
-    onClick: onSelectArrow,
-    option: /* @__PURE__ */ React.createElement(ScreenshotsSizeColor, {
-      size,
-      color,
-      onSizeChange: setSize,
-      onColorChange: setColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$4,
-        lineNumber: 190,
-        columnNumber: 15
-      }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$4,
-      lineNumber: 185,
-      columnNumber: 5
-    }
-  });
-}
-function getEditedEllipseData(action) {
-  let { x1, y1, x2, y2 } = action.data;
-  action.editHistory.forEach(({ data }) => {
-    const x = data.x2 - data.x1;
-    const y = data.y2 - data.y1;
-    if (data.type === EllipseEditType.Move) {
-      x1 += x;
-      y1 += y;
-      x2 += x;
-      y2 += y;
-    } else if (data.type === EllipseEditType.ResizeTop) {
-      y1 += y;
-    } else if (data.type === EllipseEditType.ResizeRightTop) {
-      x2 += x;
-      y1 += y;
-    } else if (data.type === EllipseEditType.ResizeRight) {
-      x2 += x;
-    } else if (data.type === EllipseEditType.ResizeRightBottom) {
-      x2 += x;
-      y2 += y;
-    } else if (data.type === EllipseEditType.ResizeBottom) {
-      y2 += y;
-    } else if (data.type === EllipseEditType.ResizeLeftBottom) {
-      x1 += x;
-      y2 += y;
-    } else if (data.type === EllipseEditType.ResizeLeft) {
-      x1 += x;
-    } else if (data.type === EllipseEditType.ResizeLeftTop) {
-      x1 += x;
-      y1 += y;
-    }
-  });
-  return __spreadProps(__spreadValues({}, action.data), {
-    x1,
-    x2,
-    y1,
-    y2
-  });
-}
-function draw$1(ctx, action) {
-  const { size, color, x1, y1, x2, y2 } = getEditedEllipseData(action);
-  ctx.lineCap = "butt";
-  ctx.lineJoin = "miter";
-  ctx.lineWidth = size;
-  ctx.strokeStyle = color;
-  const x = (x1 + x2) / 2;
-  const y = (y1 + y2) / 2;
-  const rx = Math.abs(x2 - x1) / 2;
-  const ry = Math.abs(y2 - y1) / 2;
-  const k = 0.5522848;
-  const ox = rx * k;
-  const oy = ry * k;
-  ctx.beginPath();
-  ctx.moveTo(x - rx, y);
-  ctx.bezierCurveTo(x - rx, y - oy, x - ox, y - ry, x, y - ry);
-  ctx.bezierCurveTo(x + ox, y - ry, x + rx, y - oy, x + rx, y);
-  ctx.bezierCurveTo(x + rx, y + oy, x + ox, y + ry, x, y + ry);
-  ctx.bezierCurveTo(x - ox, y + ry, x - rx, y + oy, x - rx, y);
-  ctx.closePath();
-  ctx.stroke();
-  if (action.isSelected) {
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = "#000000";
-    ctx.fillStyle = "#ffffff";
-    ctx.beginPath();
-    ctx.moveTo(x1, y1);
-    ctx.lineTo(x2, y1);
-    ctx.lineTo(x2, y2);
-    ctx.lineTo(x1, y2);
-    ctx.closePath();
-    ctx.stroke();
-    drawDragCircle(ctx, (x1 + x2) / 2, y1);
-    drawDragCircle(ctx, x2, y1);
-    drawDragCircle(ctx, x2, (y1 + y2) / 2);
-    drawDragCircle(ctx, x2, y2);
-    drawDragCircle(ctx, (x1 + x2) / 2, y2);
-    drawDragCircle(ctx, x1, y2);
-    drawDragCircle(ctx, x1, (y1 + y2) / 2);
-    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) {
-  EllipseEditType2[EllipseEditType2["Move"] = 0] = "Move";
-  EllipseEditType2[EllipseEditType2["ResizeTop"] = 1] = "ResizeTop";
-  EllipseEditType2[EllipseEditType2["ResizeRightTop"] = 2] = "ResizeRightTop";
-  EllipseEditType2[EllipseEditType2["ResizeRight"] = 3] = "ResizeRight";
-  EllipseEditType2[EllipseEditType2["ResizeRightBottom"] = 4] = "ResizeRightBottom";
-  EllipseEditType2[EllipseEditType2["ResizeBottom"] = 5] = "ResizeBottom";
-  EllipseEditType2[EllipseEditType2["ResizeLeftBottom"] = 6] = "ResizeLeftBottom";
-  EllipseEditType2[EllipseEditType2["ResizeLeft"] = 7] = "ResizeLeft";
-  EllipseEditType2[EllipseEditType2["ResizeLeftTop"] = 8] = "ResizeLeftTop";
-})(EllipseEditType || (EllipseEditType = {}));
-function Ellipse() {
-  const lang = useLang();
-  const [history, historyDispatcher] = useHistory();
-  const [operation, operationDispatcher] = useOperation();
-  const [, cursorDispatcher] = useCursor();
-  const canvasContextRef = useCanvasContextRef();
-  const [size, setSize] = useState(3);
-  const [color, setColor] = useState("#ee5126");
-  const ellipseRef = useRef(null);
-  const ellipseEditRef = useRef(null);
-  const checked = operation === "Ellipse";
-  const selectEllipse = useCallback(() => {
-    operationDispatcher.set("Ellipse");
-    cursorDispatcher.set("crosshair");
-  }, [operationDispatcher, cursorDispatcher]);
-  const onSelectEllipse = useCallback(() => {
-    if (checked) {
-      return;
-    }
-    selectEllipse();
-    historyDispatcher.clearSelect();
-  }, [checked, selectEllipse, historyDispatcher]);
-  const onDrawSelect = useCallback((action, e) => {
-    if (action.name !== "Ellipse" || !canvasContextRef.current) {
-      return;
-    }
-    const source = action;
-    selectEllipse();
-    const {
-      x1,
-      y1,
-      x2,
-      y2
-    } = getEditedEllipseData(source);
-    let type = 0;
-    if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: (x1 + x2) / 2,
-      y: y1
-    })) {
-      type = 1;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x2,
-      y: y1
-    })) {
-      type = 2;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x2,
-      y: (y1 + y2) / 2
-    })) {
-      type = 3;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x2,
-      y: y2
-    })) {
-      type = 4;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: (x1 + x2) / 2,
-      y: y2
-    })) {
-      type = 5;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x1,
-      y: y2
-    })) {
-      type = 6;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x1,
-      y: (y1 + y2) / 2
-    })) {
-      type = 7;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x1,
-      y: y1
-    })) {
-      type = 8;
-    }
-    ellipseEditRef.current = {
-      type: HistoryItemType.Edit,
-      data: {
-        type,
-        x1: e.clientX,
-        y1: e.clientY,
-        x2: e.clientX,
-        y2: e.clientY
-      },
-      source
-    };
-    historyDispatcher.select(action);
-  }, [canvasContextRef, selectEllipse, historyDispatcher]);
-  const onMousedown = useCallback((e) => {
-    if (!checked || !canvasContextRef.current || ellipseRef.current) {
-      return;
-    }
-    const {
-      left,
-      top
-    } = canvasContextRef.current.canvas.getBoundingClientRect();
-    const x = e.clientX - left;
-    const y = e.clientY - top;
-    ellipseRef.current = {
-      name: "Ellipse",
-      type: HistoryItemType.Source,
-      data: {
-        size,
-        color,
-        x1: x,
-        y1: y,
-        x2: x,
-        y2: y
-      },
-      editHistory: [],
-      draw: draw$1,
-      isHit
-    };
-  }, [checked, size, color, canvasContextRef]);
-  const onMousemove = useCallback((e) => {
-    if (!checked || !canvasContextRef.current) {
-      return;
-    }
-    if (ellipseEditRef.current) {
-      ellipseEditRef.current.data.x2 = e.clientX;
-      ellipseEditRef.current.data.y2 = e.clientY;
-      if (history.top !== ellipseEditRef.current) {
-        ellipseEditRef.current.source.editHistory.push(ellipseEditRef.current);
-        historyDispatcher.push(ellipseEditRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    } else if (ellipseRef.current) {
-      const {
-        left,
-        top
-      } = canvasContextRef.current.canvas.getBoundingClientRect();
-      ellipseRef.current.data.x2 = e.clientX - left;
-      ellipseRef.current.data.y2 = e.clientY - top;
-      if (history.top !== ellipseRef.current) {
-        historyDispatcher.push(ellipseRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    }
-  }, [checked, canvasContextRef, history, historyDispatcher]);
-  const onMouseup = useCallback(() => {
-    if (!checked) {
-      return;
-    }
-    if (ellipseRef.current) {
-      historyDispatcher.clearSelect();
-    }
-    ellipseRef.current = null;
-    ellipseEditRef.current = null;
-  }, [checked, historyDispatcher]);
-  useDrawSelect(onDrawSelect);
-  useCanvasMousedown(onMousedown);
-  useCanvasMousemove(onMousemove);
-  useCanvasMouseup(onMouseup);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_ellipse_title,
-    icon: "icon-ellipse",
-    checked,
-    onClick: onSelectEllipse,
-    option: /* @__PURE__ */ React.createElement(ScreenshotsSizeColor, {
-      size,
-      color,
-      onSizeChange: setSize,
-      onColorChange: setColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 242,
-        columnNumber: 15
-      }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$3,
-      lineNumber: 237,
-      columnNumber: 5
-    }
-  });
-}
-function getEditedRectangleData(action) {
-  let { x1, y1, x2, y2 } = action.data;
-  action.editHistory.forEach(({ data }) => {
-    const x = data.x2 - data.x1;
-    const y = data.y2 - data.y1;
-    if (data.type === RectangleEditType.Move) {
-      x1 += x;
-      y1 += y;
-      x2 += x;
-      y2 += y;
-    } else if (data.type === RectangleEditType.ResizeTop) {
-      y1 += y;
-    } else if (data.type === RectangleEditType.ResizeRightTop) {
-      x2 += x;
-      y1 += y;
-    } else if (data.type === RectangleEditType.ResizeRight) {
-      x2 += x;
-    } else if (data.type === RectangleEditType.ResizeRightBottom) {
-      x2 += x;
-      y2 += y;
-    } else if (data.type === RectangleEditType.ResizeBottom) {
-      y2 += y;
-    } else if (data.type === RectangleEditType.ResizeLeftBottom) {
-      x1 += x;
-      y2 += y;
-    } else if (data.type === RectangleEditType.ResizeLeft) {
-      x1 += x;
-    } else if (data.type === RectangleEditType.ResizeLeftTop) {
-      x1 += x;
-      y1 += y;
-    }
-  });
-  return __spreadProps(__spreadValues({}, action.data), {
-    x1,
-    x2,
-    y1,
-    y2
-  });
-}
-function draw(ctx, action) {
-  const { size, color, x1, y1, x2, y2 } = getEditedRectangleData(action);
-  ctx.lineCap = "butt";
-  ctx.lineJoin = "miter";
-  ctx.lineWidth = size;
-  ctx.strokeStyle = color;
-  ctx.beginPath();
-  ctx.moveTo(x1, y1);
-  ctx.lineTo(x2, y1);
-  ctx.lineTo(x2, y2);
-  ctx.lineTo(x1, y2);
-  ctx.closePath();
-  ctx.stroke();
-  if (action.isSelected) {
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = "#000000";
-    ctx.fillStyle = "#ffffff";
-    drawDragCircle(ctx, (x1 + x2) / 2, y1);
-    drawDragCircle(ctx, x2, y1);
-    drawDragCircle(ctx, x2, (y1 + y2) / 2);
-    drawDragCircle(ctx, x2, y2);
-    drawDragCircle(ctx, (x1 + x2) / 2, y2);
-    drawDragCircle(ctx, x1, y2);
-    drawDragCircle(ctx, x1, (y1 + y2) / 2);
-    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) {
-  RectangleEditType2[RectangleEditType2["Move"] = 0] = "Move";
-  RectangleEditType2[RectangleEditType2["ResizeTop"] = 1] = "ResizeTop";
-  RectangleEditType2[RectangleEditType2["ResizeRightTop"] = 2] = "ResizeRightTop";
-  RectangleEditType2[RectangleEditType2["ResizeRight"] = 3] = "ResizeRight";
-  RectangleEditType2[RectangleEditType2["ResizeRightBottom"] = 4] = "ResizeRightBottom";
-  RectangleEditType2[RectangleEditType2["ResizeBottom"] = 5] = "ResizeBottom";
-  RectangleEditType2[RectangleEditType2["ResizeLeftBottom"] = 6] = "ResizeLeftBottom";
-  RectangleEditType2[RectangleEditType2["ResizeLeft"] = 7] = "ResizeLeft";
-  RectangleEditType2[RectangleEditType2["ResizeLeftTop"] = 8] = "ResizeLeftTop";
-})(RectangleEditType || (RectangleEditType = {}));
-function Rectangle() {
-  const lang = useLang();
-  const [history, historyDispatcher] = useHistory();
-  const [operation, operationDispatcher] = useOperation();
-  const [, cursorDispatcher] = useCursor();
-  const canvasContextRef = useCanvasContextRef();
-  const [size, setSize] = useState(3);
-  const [color, setColor] = useState("#ee5126");
-  const rectangleRef = useRef(null);
-  const rectangleEditRef = useRef(null);
-  const checked = operation === "Rectangle";
-  const selectRectangle = useCallback(() => {
-    operationDispatcher.set("Rectangle");
-    cursorDispatcher.set("crosshair");
-  }, [operationDispatcher, cursorDispatcher]);
-  const onSelectRectangle = useCallback(() => {
-    if (checked) {
-      return;
-    }
-    selectRectangle();
-    historyDispatcher.clearSelect();
-  }, [checked, selectRectangle, historyDispatcher]);
-  const onDrawSelect = useCallback((action, e) => {
-    if (action.name !== "Rectangle" || !canvasContextRef.current) {
-      return;
-    }
-    const source = action;
-    selectRectangle();
-    const {
-      x1,
-      y1,
-      x2,
-      y2
-    } = getEditedRectangleData(source);
-    let type = 0;
-    if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: (x1 + x2) / 2,
-      y: y1
-    })) {
-      type = 1;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x2,
-      y: y1
-    })) {
-      type = 2;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x2,
-      y: (y1 + y2) / 2
-    })) {
-      type = 3;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x2,
-      y: y2
-    })) {
-      type = 4;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: (x1 + x2) / 2,
-      y: y2
-    })) {
-      type = 5;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x1,
-      y: y2
-    })) {
-      type = 6;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x1,
-      y: (y1 + y2) / 2
-    })) {
-      type = 7;
-    } else if (isHitCircle(canvasContextRef.current.canvas, e, {
-      x: x1,
-      y: y1
-    })) {
-      type = 8;
-    }
-    rectangleEditRef.current = {
-      type: HistoryItemType.Edit,
-      data: {
-        type,
-        x1: e.clientX,
-        y1: e.clientY,
-        x2: e.clientX,
-        y2: e.clientY
-      },
-      source: action
-    };
-    historyDispatcher.select(action);
-  }, [canvasContextRef, selectRectangle, historyDispatcher]);
-  const onMousedown = useCallback((e) => {
-    if (!checked || !canvasContextRef.current || rectangleRef.current) {
-      return;
-    }
-    const {
-      left,
-      top
-    } = canvasContextRef.current.canvas.getBoundingClientRect();
-    const x = e.clientX - left;
-    const y = e.clientY - top;
-    rectangleRef.current = {
-      name: "Rectangle",
-      type: HistoryItemType.Source,
-      data: {
-        size,
-        color,
-        x1: x,
-        y1: y,
-        x2: x,
-        y2: y
-      },
-      editHistory: [],
-      draw,
-      isHit
-    };
-  }, [checked, size, color, canvasContextRef]);
-  const onMousemove = useCallback((e) => {
-    if (!checked || !canvasContextRef.current) {
-      return;
-    }
-    if (rectangleEditRef.current) {
-      rectangleEditRef.current.data.x2 = e.clientX;
-      rectangleEditRef.current.data.y2 = e.clientY;
-      if (history.top !== rectangleEditRef.current) {
-        rectangleEditRef.current.source.editHistory.push(rectangleEditRef.current);
-        historyDispatcher.push(rectangleEditRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    } else if (rectangleRef.current) {
-      const {
-        left,
-        top
-      } = canvasContextRef.current.canvas.getBoundingClientRect();
-      const rectangleData = rectangleRef.current.data;
-      rectangleData.x2 = e.clientX - left;
-      rectangleData.y2 = e.clientY - top;
-      if (history.top !== rectangleRef.current) {
-        historyDispatcher.push(rectangleRef.current);
-      } else {
-        historyDispatcher.set(history);
-      }
-    }
-  }, [checked, canvasContextRef, history, historyDispatcher]);
-  const onMouseup = useCallback(() => {
-    if (!checked) {
-      return;
-    }
-    if (rectangleRef.current) {
-      historyDispatcher.clearSelect();
-    }
-    rectangleRef.current = null;
-    rectangleEditRef.current = null;
-  }, [checked, historyDispatcher]);
-  useDrawSelect(onDrawSelect);
-  useCanvasMousedown(onMousedown);
-  useCanvasMousemove(onMousemove);
-  useCanvasMouseup(onMouseup);
-  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
-    title: lang.operation_rectangle_title,
-    icon: "icon-rectangle",
-    checked,
-    onClick: onSelectRectangle,
-    option: /* @__PURE__ */ React.createElement(ScreenshotsSizeColor, {
-      size,
-      color,
-      onSizeChange: setSize,
-      onColorChange: setColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 242,
-        columnNumber: 15
-      }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$2,
-      lineNumber: 237,
-      columnNumber: 5
-    }
-  });
-}
-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";
-const ScreenshotsOperationsCtx = React.createContext(null);
-var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
-  var _a, _b;
-  const {
-    width,
-    height
-  } = useStore();
-  const [bounds] = useBounds();
-  const [operationsRect, setOperationsRect] = useState(null);
-  const [position, setPosition] = useState(null);
-  const elRef = useRef(null);
-  const onDoubleClick = useCallback((e) => {
-    e.stopPropagation();
-  }, []);
-  const onContextMenu = useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-  useEffect(() => {
-    if (!bounds || !elRef.current) {
-      return;
-    }
-    const elRect = elRef.current.getBoundingClientRect();
-    let x = bounds.x + bounds.width - elRect.width;
-    let y = bounds.y + bounds.height + 10;
-    if (x < 0) {
-      x = 0;
-    }
-    if (x > width - elRect.width) {
-      x = width - elRect.width;
-    }
-    if (y > height - elRect.height) {
-      y = height - elRect.height - 10;
-    }
-    if ((position == null ? void 0 : position.x) !== x || position.y !== y) {
-      setPosition({
-        x,
-        y
-      });
-    }
-    if ((operationsRect == null ? void 0 : operationsRect.x) !== elRect.x || operationsRect.y !== elRect.y || operationsRect.width !== elRect.width || operationsRect.height !== elRect.height) {
-      setOperationsRect({
-        x: elRect.x,
-        y: elRect.y,
-        width: elRect.width,
-        height: elRect.height
-      });
-    }
-  });
-  if (!bounds) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(ScreenshotsOperationsCtx.Provider, {
-    value: operationsRect,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 76,
-      columnNumber: 5
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    ref: elRef,
-    className: "screenshots-operations",
-    style: {
-      visibility: position ? "visible" : "hidden",
-      transform: `translate(${(_a = position == null ? void 0 : position.x) != null ? _a : 0}px, ${(_b = position == null ? void 0 : position.y) != null ? _b : 0}px)`
-    },
-    onDoubleClick,
-    onContextMenu,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 77,
-      columnNumber: 7
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-operations-buttons",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 87,
-      columnNumber: 9
-    }
-  }, OperationButtons.map((OperationButton, index2) => {
-    if (OperationButton === "|") {
-      return /* @__PURE__ */ React.createElement("div", {
-        key: index2,
-        className: "screenshots-operations-divider",
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$1,
-          lineNumber: 90,
-          columnNumber: 22
-        }
-      });
-    } else {
-      return /* @__PURE__ */ React.createElement(OperationButton, {
-        key: index2,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$1,
-          lineNumber: 92,
-          columnNumber: 22
-        }
-      });
-    }
-  }))));
-});
-function useGetLoadedImage(url) {
-  const [image, setImage] = useState(null);
-  useEffect(() => {
-    setImage(null);
-    if (url == null) {
-      return;
-    }
-    const $image = document.createElement("img");
-    const onLoad = () => setImage($image);
-    const onError = () => setImage(null);
-    $image.addEventListener("load", onLoad);
-    $image.addEventListener("error", onError);
-    $image.src = url;
-    return () => {
-      $image.removeEventListener("load", onLoad);
-      $image.removeEventListener("error", onError);
-    };
-  }, [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"
-  ]);
-  const image = useGetLoadedImage(url);
-  const canvasContextRef = useRef(null);
-  const emiterRef = useRef({});
-  const [history, setHistory] = useState({
-    index: -1,
-    stack: []
-  });
-  const [bounds, setBounds] = useState(null);
-  const [cursor, setCursor] = useState("move");
-  const [operation, setOperation] = useState(void 0);
-  const store = {
-    url,
-    width,
-    height,
-    image,
-    lang: __spreadValues(__spreadValues({}, zhCN), lang),
-    emiterRef,
-    canvasContextRef,
-    history,
-    bounds,
-    cursor,
-    operation
-  };
-  const call = useCallback((funcName, ...args) => {
-    const func = props[funcName];
-    if (typeof func === "function") {
-      func(...args);
-    }
-  }, [props]);
-  const dispatcher = {
-    call,
-    setHistory,
-    setBounds,
-    setCursor,
-    setOperation
-  };
-  const classNames = ["screenshots"];
-  if (className) {
-    classNames.push(className);
-  }
-  const reset = () => {
-    emiterRef.current = {};
-    setHistory({
-      index: -1,
-      stack: []
-    });
-    setBounds(null);
-    setCursor("move");
-    setOperation(void 0);
-  };
-  const onDoubleClick = useCallback(async (e) => {
-    if (e.button !== 0 || !image) {
-      return;
-    }
-    if (bounds && canvasContextRef.current) {
-      composeImage({
-        image,
-        width,
-        height,
-        history,
-        bounds
-      }).then((blob) => {
-        call("onOk", blob, bounds);
-        reset();
-      });
-    } else {
-      const targetBounds = {
-        x: 0,
-        y: 0,
-        width,
-        height
-      };
-      composeImage({
-        image,
-        width,
-        height,
-        history,
-        bounds: targetBounds
-      }).then((blob) => {
-        call("onOk", blob, targetBounds);
-        reset();
-      });
-    }
-  }, [image, history, bounds, width, height, call]);
-  const onContextMenu = useCallback((e) => {
-    if (e.button !== 2) {
-      return;
-    }
-    e.preventDefault();
-    call("onCancel");
-    reset();
-  }, [call]);
-  useLayoutEffect(() => {
-    reset();
-  }, [url]);
-  return /* @__PURE__ */ React.createElement(ScreenshotsContext.Provider, {
-    value: {
-      store,
-      dispatcher
-    },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 142,
-      columnNumber: 5
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: classNames.join(" "),
-    style: {
-      width,
-      height
-    },
-    onDoubleClick,
-    onContextMenu,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 143,
-      columnNumber: 7
-    }
-  }, /* @__PURE__ */ React.createElement(ScreenshotsBackground, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 149,
-      columnNumber: 9
-    }
-  }), /* @__PURE__ */ React.createElement(ScreenshotsCanvas, {
-    ref: canvasContextRef,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 150,
-      columnNumber: 9
-    }
-  }), /* @__PURE__ */ React.createElement(ScreenshotsOperations, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 151,
-      columnNumber: 9
-    }
-  })));
-}
-export { Screenshots as default };