react-screenshots 0.0.17 → 0.2.0-alpha.0

package/lib/react-screenshots.es.js

@@ -0,0 +1,3058 @@
+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;
+};
+var _a;
+import React, { useContext, useState, useRef, useLayoutEffect, useEffect, useCallback, forwardRef, useImperativeHandle, cloneElement } from "react";
+import { createPortal } from "react-dom";
+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 useStore() {
+  const { store } = useContext(ScreenshotsContext);
+  return store;
+}
+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;
+function ScreenshotsMagnifier({
+  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)));
+}
+var index$8 = "";
+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
+  };
+}
+function useDispatcher() {
+  const { dispatcher } = useContext(ScreenshotsContext);
+  return dispatcher;
+}
+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
+    }
+  ];
+}
+var _jsxFileName$k = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";
+function ScreenshotsBackground() {
+  const {
+    url,
+    width,
+    height
+  } = useStore();
+  const [bounds, boundsDispatcher] = useBounds();
+  const elRef = useRef(null);
+  const pointRef = useRef(null);
+  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
+    };
+  }, [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
+      });
+    };
+    const onMouseUp = (e) => {
+      if (!pointRef.current) {
+        return;
+      }
+      updateBounds(pointRef.current, {
+        x: e.clientX,
+        y: e.clientY
+      });
+      pointRef.current = null;
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [updateBounds]);
+  if (!url) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: elRef,
+    className: "screenshots-background",
+    style: {
+      backgroundImage: `url("${url}")`
+    },
+    onMouseDown,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 104,
+      columnNumber: 5
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "screenshots-background-mask",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 112,
+      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: 113,
+      columnNumber: 31
+    }
+  }));
+}
+const dpr = (_a = window.devicePixelRatio) != null ? _a : 2;
+var dpr$1 = dpr < 2 ? 2 : dpr;
+function getBoundsByPoints$1(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
+    }
+  ];
+}
+function getBoundsByPoints({ 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)
+  };
+}
+var HistoryItemType;
+(function(HistoryItemType2) {
+  HistoryItemType2[HistoryItemType2["Edit"] = 0] = "Edit";
+  HistoryItemType2[HistoryItemType2["Source"] = 1] = "Source";
+})(HistoryItemType || (HistoryItemType = {}));
+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 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 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
+    }
+  ];
+}
+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 _a2;
+    if (item.type !== HistoryItemType.Source) {
+      return false;
+    }
+    ctx.clearRect(0, 0, bounds.width, bounds.height);
+    return (_a2 = item.isHit) == null ? void 0 : _a2.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 = forwardRef(function ScreenshotsCanvas2(props, ref) {
+  const {
+    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 (!image || !bounds || !ctxRef.current) {
+      return;
+    }
+    const rx = image.naturalWidth / width;
+    const ry = image.naturalHeight / height;
+    const ctx = ctxRef.current;
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    ctx.setTransform(dpr$1, 0, 0, dpr$1, 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);
+      }
+    });
+  }, [image, width, height, 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$1(e, resizeOrMoveRef.current, pointRef.current, boundsRef.current);
+    boundsDispatcher.set(getBoundsByPoints(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);
+  if (!bounds) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "screenshots-canvas",
+    style: {
+      left: bounds.x,
+      top: bounds.y,
+      width: bounds.width,
+      height: bounds.height
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 190,
+      columnNumber: 5
+    }
+  }, /* @__PURE__ */ React.createElement("canvas", {
+    ref: canvasRef,
+    width: bounds.width * dpr$1,
+    height: bounds.height * dpr$1,
+    style: {
+      width: bounds.width,
+      height: bounds.height
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 199,
+      columnNumber: 7
+    }
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "screenshots-canvas-body",
+    style: {
+      cursor
+    },
+    onMouseDown: (e) => onMouseDown(e, "move"),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 208,
+      columnNumber: 7
+    }
+  }), borders.map((border) => {
+    return /* @__PURE__ */ React.createElement("div", {
+      key: border,
+      className: `screenshots-canvas-border-${border}`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 216,
+        columnNumber: 16
+      }
+    });
+  }), 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: 220,
+        columnNumber: 11
+      }
+    });
+  }));
+});
+function useCall() {
+  const dispatcher = useDispatcher();
+  const call = useCallback((funcName, ...args) => {
+    var _a2;
+    (_a2 = dispatcher.call) == null ? void 0 : _a2.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 = {}));
+function ScreenshotsOption({
+  open,
+  content,
+  children
+}) {
+  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",
+      left: position == null ? void 0 : position.x,
+      top: position == null ? void 0 : position.y
+    },
+    "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: 121,
+      columnNumber: 13
+    }
+  }, content), /* @__PURE__ */ React.createElement("div", {
+    className: "screenshots-option-arrow",
+    style: {
+      marginLeft: offsetX
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 122,
+      columnNumber: 13
+    }
+  })), getPopoverEl()));
+}
+var index$5 = "";
+var _jsxFileName$h = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";
+function ScreenshotsButton({
+  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 lang = useLang();
+  const canvasContextRef = useCanvasContextRef();
+  const [, historyDispatcher] = useHistory();
+  const call = useCall();
+  const [bounds] = useBounds();
+  const reset = useReset();
+  const onClick = useCallback(() => {
+    historyDispatcher.clearSelect();
+    setTimeout(() => {
+      if (!canvasContextRef.current) {
+        return;
+      }
+      canvasContextRef.current.canvas.toBlob((blob) => {
+        call("onOk", blob, bounds);
+        reset();
+      }, "image/png");
+    });
+  }, [canvasContextRef, historyDispatcher, call, bounds, reset]);
+  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
+    title: lang.operation_ok_title,
+    icon: "icon-ok",
+    onClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 31,
+      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 lang = useLang();
+  const canvasContextRef = useCanvasContextRef();
+  const [, historyDispatcher] = useHistory();
+  const [bounds] = useBounds();
+  const call = useCall();
+  const reset = useReset();
+  const onClick = useCallback(() => {
+    historyDispatcher.clearSelect();
+    setTimeout(() => {
+      if (!canvasContextRef.current) {
+        return;
+      }
+      canvasContextRef.current.canvas.toBlob((blob) => {
+        call("onSave", blob, bounds);
+        reset();
+      }, "image/png");
+    });
+  }, [canvasContextRef, historyDispatcher, bounds, call, reset]);
+  return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
+    title: lang.operation_save_title,
+    icon: "icon-save",
+    onClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 31,
+      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";
+function ScreenshotsSize({
+  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";
+function ScreenshotsColor({
+  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";
+function ScreenshotsSizeColor({
+  size,
+  color,
+  onSizeChange,
+  onColorChange
+}) {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "screenshots-sizecolor",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 15,
+      columnNumber: 5
+    }
+  }, /* @__PURE__ */ React.createElement(ScreenshotsSize, {
+    value: size,
+    onChange: onSizeChange,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 16,
+      columnNumber: 7
+    }
+  }), /* @__PURE__ */ React.createElement(ScreenshotsColor, {
+    value: color,
+    onChange: onColorChange,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 17,
+      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";
+function ScreenshotsTextarea({
+  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 _a2;
+        (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+      });
+    }
+    return () => {
+      var _a2;
+      (_a2 = popoverRef.current) == null ? void 0 : _a2.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: {
+      left: x,
+      top: y,
+      color,
+      width,
+      height,
+      maxWidth,
+      maxHeight,
+      fontSize: size,
+      lineHeight: `${size}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);
+function ScreenshotsOperations() {
+  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",
+      left: position == null ? void 0 : position.x,
+      top: position == null ? void 0 : position.y
+    },
+    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: 88,
+      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: 91,
+          columnNumber: 22
+        }
+      });
+    } else {
+      return /* @__PURE__ */ React.createElement(OperationButton, {
+        key: index2,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$1,
+          lineNumber: 93,
+          columnNumber: 22
+        }
+      });
+    }
+  }))));
+}
+var screenshots = "";
+var iconfont = "";
+function useGetLoadedImage(url) {
+  const [image, setImage] = useState(null);
+  useEffect(() => {
+    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(_b) {
+  var _c = _b, {
+    url,
+    width,
+    height,
+    lang,
+    className
+  } = _c, props = __objRest(_c, [
+    "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((e) => {
+    if (e.button !== 0 || !bounds || !canvasContextRef.current) {
+      return;
+    }
+    canvasContextRef.current.canvas.toBlob((blob) => {
+      call("onOk", blob, bounds);
+      reset();
+    }, "image/png");
+  }, [bounds, call]);
+  const onContextMenu = useCallback((e) => {
+    if (e.button !== 2) {
+      return;
+    }
+    e.preventDefault();
+    call("onCancel");
+    reset();
+  }, [call]);
+  return /* @__PURE__ */ React.createElement(ScreenshotsContext.Provider, {
+    value: {
+      store,
+      dispatcher
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 5
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: classNames.join(" "),
+    style: {
+      width,
+      height
+    },
+    onDoubleClick,
+    onContextMenu,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 7
+    }
+  }, /* @__PURE__ */ React.createElement(ScreenshotsBackground, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 9
+    }
+  }), /* @__PURE__ */ React.createElement(ScreenshotsCanvas, {
+    ref: canvasContextRef,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 119,
+      columnNumber: 9
+    }
+  }), /* @__PURE__ */ React.createElement(ScreenshotsOperations, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 120,
+      columnNumber: 9
+    }
+  })));
+}
+export { Screenshots as default };