react-screenshots 0.5.18 → 0.5.19

package/lib/react-screenshots.es.js

@@ -1,74 +1,53 @@
-import React, { useContext, useCallback, memo, useState, useRef, useLayoutEffect, useEffect, forwardRef, useImperativeHandle, cloneElement } from "react";
-import { createPortal } from "react-dom";
-var HistoryItemType = /* @__PURE__ */ ((HistoryItemType2) => {
-  HistoryItemType2[HistoryItemType2["Edit"] = 0] = "Edit";
-  HistoryItemType2[HistoryItemType2["Source"] = 1] = "Source";
-  return HistoryItemType2;
-})(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,
+import y, { useContext as pe, useCallback as g, memo as F, useState as $, useRef as E, useLayoutEffect as Q, useEffect as T, forwardRef as Me, useImperativeHandle as Be, cloneElement as $e } from "react";
+import { createPortal as we } from "react-dom";
+var _ = /* @__PURE__ */ ((e) => (e[e.Edit = 0] = "Edit", e[e.Source = 1] = "Source", e))(_ || {});
+function fe({ image: e, width: t, height: s, history: i, bounds: r }) {
+  return new Promise((o, n) => {
+    const c = document.createElement("canvas"), f = r.width * window.devicePixelRatio, h = r.height * window.devicePixelRatio;
+    c.width = f, c.height = h;
+    const a = c.getContext("2d");
+    if (!a)
+      return n(new Error("convert image to blob fail"));
+    const l = e.naturalWidth / t, u = e.naturalHeight / s;
+    a.imageSmoothingEnabled = !0, a.imageSmoothingQuality = "low", a.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0), a.clearRect(0, 0, r.width, r.height), a.drawImage(
+      e,
+      r.x * l,
+      r.y * u,
+      r.width * l,
+      r.height * u,
       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);
+      r.width,
+      r.height
+    ), i.stack.slice(0, i.index + 1).forEach((d) => {
+      d.type === _.Source && d.draw(a, d);
+    }), c.toBlob((d) => {
+      if (!d)
+        return n(new Error("canvas toBlob fail"));
+      o(d);
     }, "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({
+const Re = {
+  magnifier_position_label: "坐标",
+  operation_ok_title: "确定",
+  operation_cancel_title: "取消",
+  operation_save_title: "保存",
+  operation_redo_title: "重做",
+  operation_undo_title: "撤销",
+  operation_mosaic_title: "马赛克",
+  operation_text_title: "文本",
+  operation_brush_title: "画笔",
+  operation_arrow_title: "箭头",
+  operation_ellipse_title: "椭圆",
+  operation_rectangle_title: "矩形"
+}, ye = y.createContext({
   store: {
     url: void 0,
     image: null,
     width: 0,
     height: 0,
-    lang: zhCN,
+    lang: Re,
     emiterRef: { current: {} },
     canvasContextRef: { current: null },
     history: {
@@ -87,1481 +66,829 @@ var ScreenshotsContext = React.createContext({
     setOperation: void 0
   }
 });
-function useDispatcher() {
-  const { dispatcher } = useContext(ScreenshotsContext);
-  return dispatcher;
+function se() {
+  const { dispatcher: e } = pe(ye);
+  return e;
 }
-function useStore() {
-  const { store } = useContext(ScreenshotsContext);
-  return store;
+function Y() {
+  const { store: e } = pe(ye);
+  return e;
 }
-function useBounds() {
-  const { bounds } = useStore();
-  const { setBounds } = useDispatcher();
-  const set = useCallback(
-    (bounds2) => {
-      setBounds == null ? void 0 : setBounds(bounds2);
+function K() {
+  const { bounds: e } = Y(), { setBounds: t } = se(), s = g(
+    (r) => {
+      t == null || t(r);
     },
-    [setBounds]
-  );
-  const reset = useCallback(() => {
-    setBounds == null ? void 0 : setBounds(null);
-  }, [setBounds]);
+    [t]
+  ), i = g(() => {
+    t == null || t(null);
+  }, [t]);
   return [
-    bounds,
+    e,
     {
-      set,
-      reset
+      set: s,
+      reset: i
     }
   ];
 }
-function useLang() {
-  const { lang } = useStore();
-  return lang;
+function O() {
+  const { lang: e } = Y();
+  return e;
 }
-var index$9 = "";
-var _jsxFileName$l = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsMagnifier\\index.tsx";
-const magnifierWidth = 100;
-const magnifierHeight = 80;
-var ScreenshotsMagnifier = memo(function ScreenshotsMagnifier2({
-  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) {
+const q = 100, G = 80, De = F(function({ x: t, y: s }) {
+  const { width: i, height: r, image: o } = Y(), n = O(), [c, f] = $(null), h = E(null), a = E(null), l = E(null), [u, d] = $("000000");
+  return Q(() => {
+    if (!h.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
+    const p = h.current.getBoundingClientRect();
+    let w = t + 20, S = s + 20;
+    w + p.width > i && (w = t - p.width - 20), S + p.height > r && (S = s - p.height - 20), w < 0 && (w = 0), S < 0 && (S = 0), f({
+      x: w,
+      y: S
     });
-  }, [width, height, x, y]);
-  useEffect(() => {
-    if (!image || !canvasRef.current) {
-      ctxRef.current = null;
+  }, [i, r, t, s]), T(() => {
+    if (!o || !a.current) {
+      l.current = null;
       return;
     }
-    if (!ctxRef.current) {
-      ctxRef.current = canvasRef.current.getContext("2d");
-    }
-    if (!ctxRef.current) {
+    if (l.current || (l.current = a.current.getContext("2d")), !l.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)`
+    const p = l.current;
+    p.clearRect(0, 0, q, G);
+    const w = o.naturalWidth / i, S = o.naturalHeight / r;
+    p.drawImage(
+      o,
+      t * w - q / 2,
+      s * S - G / 2,
+      q,
+      G,
+      0,
+      0,
+      q,
+      G
+    );
+    const { data: R } = p.getImageData(Math.floor(q / 2), Math.floor(G / 2), 1, 1), b = Array.from(R.slice(0, 3)).map((M) => M >= 16 ? M.toString(16) : `0${M.toString(16)}`).join("").toUpperCase();
+    d(b);
+  }, [i, r, o, t, s]), /* @__PURE__ */ y.createElement(
+    "div",
+    {
+      ref: h,
+      className: "screenshots-magnifier",
+      style: {
+        transform: `translate(${c == null ? void 0 : c.x}px, ${c == null ? void 0 : c.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)));
+    /* @__PURE__ */ y.createElement("div", { className: "screenshots-magnifier-body" }, /* @__PURE__ */ y.createElement(
+      "canvas",
+      {
+        ref: a,
+        className: "screenshots-magnifier-body-canvas",
+        width: q,
+        height: G
+      }
+    )),
+    /* @__PURE__ */ y.createElement("div", { className: "screenshots-magnifier-footer" }, /* @__PURE__ */ y.createElement("div", { className: "screenshots-magnifier-footer-item" }, n.magnifier_position_label, ": (", t, ",", s, ")"), /* @__PURE__ */ y.createElement("div", { className: "screenshots-magnifier-footer-item" }, "RGB: #", u))
+  );
 });
-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 _e({ x: e, y: t }, { x: s, y: i }, r, o) {
+  return e > s && ([e, s] = [s, e]), t > i && ([t, i] = [i, t]), e < 0 && (e = 0), s > r && (s = r), t < 0 && (t = 0), i > o && (i = o), {
+    x: e,
+    y: t,
+    width: s - e,
+    height: i - t
   };
 }
-var index$8 = "";
-var _jsxFileName$k = "C:\\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) {
+const Pe = F(function() {
+  const { url: t, image: s, width: i, height: r } = Y(), [o, n] = K(), c = E(null), f = E(null), h = E(!1), [a, l] = $(null), u = g(
+    (p, w) => {
+      if (!c.current)
         return;
-      }
-      if (isMoveRef.current) {
-        updateBounds(pointRef.current, {
-          x: e.clientX,
-          y: e.clientY
+      const { x: S, y: R } = c.current.getBoundingClientRect();
+      n.set(
+        _e(
+          {
+            x: p.x - S,
+            y: p.y - R
+          },
+          {
+            x: w.x - S,
+            y: w.y - R
+          },
+          i,
+          r
+        )
+      );
+    },
+    [i, r, n]
+  ), d = g(
+    (p) => {
+      f.current || o || p.button !== 0 || (f.current = {
+        x: p.clientX,
+        y: p.clientY
+      }, h.current = !1);
+    },
+    [o]
+  );
+  return T(() => {
+    const p = (S) => {
+      if (c.current) {
+        const R = c.current.getBoundingClientRect();
+        S.clientX < R.left || S.clientY < R.top || S.clientX > R.right || S.clientY > R.bottom ? l(null) : l({
+          x: S.clientX - R.x,
+          y: S.clientY - R.y
         });
       }
-      pointRef.current = null;
-      isMoveRef.current = false;
+      f.current && (u(f.current, {
+        x: S.clientX,
+        y: S.clientY
+      }), h.current = !0);
+    }, w = (S) => {
+      f.current && (h.current && u(f.current, {
+        x: S.clientX,
+        y: S.clientY
+      }), f.current = null, h.current = !1);
     };
-    window.addEventListener("mousemove", onMouseMove);
-    window.addEventListener("mouseup", onMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
+    return window.addEventListener("mousemove", p), window.addEventListener("mouseup", w), () => {
+      window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", w);
     };
-  }, [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
-    }
-  }));
+  }, [u]), Q(() => {
+    (!s || o) && l(null);
+  }, [s, o]), !t || !s ? null : /* @__PURE__ */ y.createElement("div", { ref: c, className: "screenshots-background", onMouseDown: d }, /* @__PURE__ */ y.createElement("img", { className: "screenshots-background-image", src: t }), /* @__PURE__ */ y.createElement("div", { className: "screenshots-background-mask" }), a && !o && /* @__PURE__ */ y.createElement(De, { x: a == null ? void 0 : a.x, y: a == null ? void 0 : a.y }));
 });
-function useCursor() {
-  const { cursor } = useStore();
-  const { setCursor } = useDispatcher();
-  const set = useCallback(
-    (cursor2) => {
-      setCursor == null ? void 0 : setCursor(cursor2);
+function j() {
+  const { cursor: e } = Y(), { setCursor: t } = se(), s = g(
+    (r) => {
+      t == null || t(r);
     },
-    [setCursor]
-  );
-  const reset = useCallback(() => {
-    setCursor == null ? void 0 : setCursor("move");
-  }, [setCursor]);
+    [t]
+  ), i = g(() => {
+    t == null || t("move");
+  }, [t]);
   return [
-    cursor,
+    e,
     {
-      set,
-      reset
+      set: s,
+      reset: i
     }
   ];
 }
-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];
-      }
+function Z() {
+  const { emiterRef: e } = Y(), t = g(
+    (o, n) => {
+      const c = e.current;
+      Array.isArray(c[o]) ? c[o].push(n) : c[o] = [n];
     },
-    [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);
-        }
+    [e]
+  ), s = g(
+    (o, n) => {
+      const c = e.current;
+      if (Array.isArray(c[o])) {
+        const f = c[o].findIndex((h) => h === n);
+        f !== -1 && c[o].splice(f, 1);
       }
     },
-    [emiterRef]
-  );
-  const emit = useCallback(
-    (event, ...args) => {
-      const emiter = emiterRef.current;
-      if (Array.isArray(emiter[event])) {
-        emiter[event].forEach((listener) => listener(...args));
-      }
+    [e]
+  ), i = g(
+    (o, ...n) => {
+      const c = e.current;
+      Array.isArray(c[o]) && c[o].forEach((f) => f(...n));
     },
-    [emiterRef]
-  );
-  const reset = useCallback(() => {
-    emiterRef.current = {};
-  }, [emiterRef]);
+    [e]
+  ), r = g(() => {
+    e.current = {};
+  }, [e]);
   return {
-    on,
-    off,
-    emit,
-    reset
+    on: t,
+    off: s,
+    emit: i,
+    reset: r
   };
 }
-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
+function H() {
+  const { history: e } = Y(), { setHistory: t } = se(), s = g(
+    (a) => {
+      const { index: l, stack: u } = e;
+      u.forEach((d) => {
+        d.type === _.Source && (d.isSelected = !1);
+      }), a.type === _.Source ? a.isSelected = !0 : a.type === _.Edit && (a.source.isSelected = !0), u.splice(l + 1), u.push(a), t == null || t({
+        index: u.length - 1,
+        stack: u
       });
     },
-    [history, setHistory]
-  );
-  const pop = useCallback(() => {
-    const { stack } = history;
-    stack.pop();
-    setHistory == null ? void 0 : setHistory({
-      index: stack.length - 1,
-      stack
+    [e, t]
+  ), i = g(() => {
+    const { stack: a } = e;
+    a.pop(), t == null || t({
+      index: a.length - 1,
+      stack: a
     });
-  }, [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
+  }, [e, t]), r = g(() => {
+    const { index: a, stack: l } = e, u = l[a];
+    u && (u.type === _.Source ? u.isSelected = !1 : u.type === _.Edit && u.source.editHistory.pop()), t == null || t({
+      index: a <= 0 ? -1 : a - 1,
+      stack: l
     });
-  }, [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
+  }, [e, t]), o = g(() => {
+    const { index: a, stack: l } = e, u = l[a + 1];
+    u && (u.type === _.Source ? u.isSelected = !1 : u.type === _.Edit && u.source.editHistory.push(u)), t == null || t({
+      index: a >= l.length - 1 ? l.length - 1 : a + 1,
+      stack: l
     });
-  }, [history, setHistory]);
-  const set = useCallback(
-    (history2) => {
-      setHistory == null ? void 0 : setHistory({ ...history2 });
+  }, [e, t]), n = g(
+    (a) => {
+      t == null || t({ ...a });
     },
-    [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({ ...history });
+    [t]
+  ), c = g(
+    (a) => {
+      e.stack.forEach((l) => {
+        l.type === _.Source && (l === a ? l.isSelected = !0 : l.isSelected = !1);
+      }), t == null || t({ ...e });
     },
-    [history, setHistory]
-  );
-  const clearSelect = useCallback(() => {
-    history.stack.forEach((item) => {
-      if (item.type === HistoryItemType.Source) {
-        item.isSelected = false;
-      }
-    });
-    setHistory == null ? void 0 : setHistory({ ...history });
-  }, [history, setHistory]);
-  const reset = useCallback(() => {
-    setHistory == null ? void 0 : setHistory({
+    [e, t]
+  ), f = g(() => {
+    e.stack.forEach((a) => {
+      a.type === _.Source && (a.isSelected = !1);
+    }), t == null || t({ ...e });
+  }, [e, t]), h = g(() => {
+    t == null || t({
       index: -1,
       stack: []
     });
-  }, [setHistory]);
+  }, [t]);
   return [
     {
-      index: history.index,
-      stack: history.stack,
-      top: history.stack.slice(history.index, history.index + 1)[0]
+      index: e.index,
+      stack: e.stack,
+      top: e.stack.slice(e.index, e.index + 1)[0]
     },
     {
-      push,
-      pop,
-      undo,
-      redo,
-      set,
-      select,
-      clearSelect,
-      reset
+      push: s,
+      pop: i,
+      undo: r,
+      redo: o,
+      set: n,
+      select: c,
+      clearSelect: f,
+      reset: h
     }
   ];
 }
-function useOperation() {
-  const { operation } = useStore();
-  const { setOperation } = useDispatcher();
-  const set = useCallback(
-    (operation2) => {
-      setOperation == null ? void 0 : setOperation(operation2);
+function J() {
+  const { operation: e } = Y(), { setOperation: t } = se(), s = g(
+    (r) => {
+      t == null || t(r);
     },
-    [setOperation]
-  );
-  const reset = useCallback(() => {
-    setOperation == null ? void 0 : setOperation(void 0);
-  }, [setOperation]);
+    [t]
+  ), i = g(() => {
+    t == null || t(void 0);
+  }, [t]);
   return [
-    operation,
+    e,
     {
-      set,
-      reset
+      set: s,
+      reset: i
     }
   ];
 }
-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 Xe({ x: e, y: t }, { x: s, y: i }, r, o, n, c) {
+  return e > s && ([e, s] = [s, e]), t > i && ([t, i] = [i, t]), e < 0 && (e = 0, c === "move" && (s = r.width)), s > o && (s = o, c === "move" && (e = s - r.width)), t < 0 && (t = 0, c === "move" && (i = r.height)), i > n && (i = n, c === "move" && (t = i - r.height)), {
+    x: e,
+    y: t,
+    width: Math.max(s - e, 1),
+    height: Math.max(i - t, 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) {
+function Ne(e, t, s, i) {
+  const r = e.clientX - s.x, o = e.clientY - s.y;
+  let n = i.x, c = i.y, f = i.x + i.width, h = i.y + i.height;
+  switch (t) {
     case "top":
-      y1 += y;
+      c += o;
       break;
     case "top-right":
-      x2 += x;
-      y1 += y;
+      f += r, c += o;
       break;
     case "right":
-      x2 += x;
+      f += r;
       break;
     case "right-bottom":
-      x2 += x;
-      y2 += y;
+      f += r, h += o;
       break;
     case "bottom":
-      y2 += y;
+      h += o;
       break;
     case "bottom-left":
-      x1 += x;
-      y2 += y;
+      n += r, h += o;
       break;
     case "left":
-      x1 += x;
+      n += r;
       break;
     case "left-top":
-      x1 += x;
-      y1 += y;
+      n += r, c += o;
       break;
     case "move":
-      x1 += x;
-      y1 += y;
-      x2 += x;
-      y2 += y;
+      n += r, c += o, f += r, h += o;
       break;
   }
   return [
     {
-      x: x1,
-      y: y1
+      x: n,
+      y: c
     },
     {
-      x: x2,
-      y: y2
+      x: f,
+      y: h
     }
   ];
 }
-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 });
+function Ye(e, t, s, i) {
+  if (!t)
+    return !1;
+  const r = document.createElement("canvas");
+  r.width = e.width, r.height = e.height;
+  const o = r.getContext("2d");
+  if (!o)
+    return !1;
+  const { left: n, top: c } = t.getBoundingClientRect(), f = i.clientX - n, h = i.clientY - c;
+  return [...s.stack.slice(0, s.index + 1)].reverse().find((l) => {
+    var u;
+    return l.type !== _.Source ? !1 : (o.clearRect(0, 0, e.width, e.height), (u = l.isHit) == null ? void 0 : u.call(l, o, l, { x: f, y: h }));
   });
 }
-var _jsxFileName$j = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsCanvas\\index.tsx";
-const borders = ["top", "right", "bottom", "left"];
-const resizePoints = ["top", "top-right", "right", "right-bottom", "bottom", "bottom-left", "left", "left-top"];
-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);
+const Le = ["top", "right", "bottom", "left"], Te = [
+  "top",
+  "top-right",
+  "right",
+  "right-bottom",
+  "bottom",
+  "bottom-left",
+  "left",
+  "left-top"
+  /* ResizeLeftTop */
+], He = F(
+  Me(function(t, s) {
+    const { url: i, image: r, width: o, height: n } = Y(), c = Z(), [f] = H(), [h] = j(), [a, l] = K(), [u] = J(), d = E(), p = E(null), w = E(null), S = E(null), R = E(null), b = a && !f.stack.length && !u, M = g(() => {
+      if (!a || !R.current)
+        return;
+      const x = R.current;
+      x.imageSmoothingEnabled = !0, x.imageSmoothingQuality = "low", x.clearRect(0, 0, a.width, a.height), f.stack.slice(0, f.index + 1).forEach((C) => {
+        C.type === _.Source && C.draw(x, C);
+      });
+    }, [a, R, f]), v = g(
+      (x, C) => {
+        if (!(x.button !== 0 || !a))
+          if (!u)
+            d.current = C, p.current = {
+              x: x.clientX,
+              y: x.clientY
+            }, w.current = {
+              x: a.x,
+              y: a.y,
+              width: a.width,
+              height: a.height
+            };
+          else {
+            const z = Ye(
+              a,
+              S.current,
+              f,
+              x.nativeEvent
+            );
+            z ? c.emit("drawselect", z, x.nativeEvent) : c.emit("mousedown", x.nativeEvent);
+          }
+      },
+      [a, u, c, f]
+    ), m = g(
+      (x) => {
+        if (!d.current || !p.current || !w.current || !a)
+          return;
+        const C = Ne(
+          x,
+          d.current,
+          p.current,
+          w.current
+        );
+        l.set(
+          Xe(
+            C[0],
+            C[1],
+            a,
+            o,
+            n,
+            d.current
+          )
+        );
+      },
+      [o, n, a, l]
+    );
+    return Q(() => {
+      if (!r || !a || !S.current) {
+        R.current = null;
+        return;
       }
-    });
-  }, [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
+      R.current || (R.current = S.current.getContext("2d")), M();
+    }, [r, a, M]), T(() => {
+      const x = (z) => {
+        if (u)
+          c.emit("mousemove", z);
+        else {
+          if (!d.current || !p.current || !w.current)
+            return;
+          m(z);
+        }
+      }, C = (z) => {
+        if (u)
+          c.emit("mouseup", z);
+        else {
+          if (!d.current || !p.current || !w.current)
+            return;
+          m(z), d.current = void 0, p.current = null, w.current = null;
+        }
       };
-      boundsRef.current = {
-        x: bounds.x,
-        y: bounds.y,
-        width: bounds.width,
-        height: bounds.height
+      return window.addEventListener("mousemove", x), window.addEventListener("mouseup", C), () => {
+        window.removeEventListener("mousemove", x), window.removeEventListener("mouseup", C);
       };
-    } 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;
+    }, [m, u, c]), Be(s, () => R.current), /* @__PURE__ */ y.createElement(
+      "div",
+      {
+        className: "screenshots-canvas",
+        style: {
+          width: (a == null ? void 0 : a.width) || 0,
+          height: (a == null ? void 0 : a.height) || 0,
+          transform: a ? `translate(${a.x}px, ${a.y}px)` : "none"
         }
-        updateBounds(e);
-      } else {
-        emiter.emit("mousemove", e);
-      }
-    };
-    const onMouseUp = (e) => {
-      if (!operation) {
-        if (!resizeOrMoveRef.current || !pointRef.current || !boundsRef.current) {
-          return;
+      },
+      /* @__PURE__ */ y.createElement("div", { className: "screenshots-canvas-body" }, /* @__PURE__ */ y.createElement(
+        "img",
+        {
+          className: "screenshots-canvas-image",
+          src: i,
+          style: {
+            width: o,
+            height: n,
+            transform: a ? `translate(${-a.x}px, ${-a.y}px)` : "none"
+          }
         }
-        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
-      }
-    });
-  }), bounds && 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);
+      ), /* @__PURE__ */ y.createElement(
+        "canvas",
+        {
+          ref: S,
+          className: "screenshots-canvas-panel",
+          width: (a == null ? void 0 : a.width) || 0,
+          height: (a == null ? void 0 : a.height) || 0
+        }
+      )),
+      /* @__PURE__ */ y.createElement(
+        "div",
+        {
+          className: "screenshots-canvas-mask",
+          style: {
+            cursor: h
+          },
+          onMouseDown: (x) => v(x, "move")
+        },
+        b && /* @__PURE__ */ y.createElement("div", { className: "screenshots-canvas-size" }, a.width, " × ", a.height)
+      ),
+      Le.map((x) => /* @__PURE__ */ y.createElement(
+        "div",
+        {
+          key: x,
+          className: `screenshots-canvas-border-${x}`
+        }
+      )),
+      b && Te.map((x) => /* @__PURE__ */ y.createElement(
+        "div",
+        {
+          key: x,
+          className: `screenshots-canvas-point-${x}`,
+          onMouseDown: (C) => v(C, x)
+        }
+      ))
+    );
+  })
+);
+function ve() {
+  const e = se();
+  return g(
+    (s, ...i) => {
+      var r;
+      (r = e.call) == null || r.call(e, s, ...i);
     },
-    [dispatcher]
+    [e]
   );
-  return call;
 }
-function useCanvasContextRef() {
-  const { canvasContextRef } = useStore();
-  return canvasContextRef;
+function U() {
+  const { canvasContextRef: e } = Y();
+  return e;
 }
-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;
+function xe() {
+  const e = Z(), [, t] = K(), [, s] = j(), [, i] = H(), [, r] = J();
+  return g(() => {
+    e.reset(), i.reset(), t.reset(), s.reset(), r.reset();
+  }, [e, i, t, s, r]);
 }
-var index$6 = "";
-var _jsxFileName$i = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsOption\\index.tsx";
-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("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();
+const Ae = F(function({ open: t, content: s, children: i }) {
+  const r = E(null), o = E(null), n = E(null), c = pe(Ee), [f, h] = $(
+    "bottom"
+    /* Bottom */
+  ), [a, l] = $(null), [u, d] = $(0), p = () => (o.current || (o.current = document.createElement("div")), o.current);
+  return T(() => {
+    const w = p();
+    return t && document.body.appendChild(w), () => {
+      w.remove();
     };
-  }, [open]);
-  useEffect(() => {
-    if (!open || !operationsRect || !childrenRef.current || !contentRef.current) {
+  }, [t]), T(() => {
+    if (!t || !c || !r.current || !n.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 === "bottom") {
-        currentPlacement = "top";
-      }
-      y = childrenRect.top - contentRect.height;
-    }
-    if (y < 0) {
-      if (currentPlacement === "top") {
-        currentPlacement = "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()));
+    const w = r.current.getBoundingClientRect(), S = n.current.getBoundingClientRect();
+    let R = f, b = w.left + w.width / 2, M = w.top + w.height, v = u;
+    if (b + S.width / 2 > c.x + c.width) {
+      const m = b;
+      b = c.x + c.width - S.width / 2, v = m - b;
+    }
+    if (b < c.x + S.width / 2) {
+      const m = b;
+      b = c.x + S.width / 2, v = m - b;
+    }
+    M > window.innerHeight - S.height && (R === "bottom" && (R = "top"), M = w.top - S.height), M < 0 && (R === "top" && (R = "bottom"), M = w.top + w.height), R !== f && h(R), ((a == null ? void 0 : a.x) !== b || a.y !== M) && l({
+      x: b,
+      y: M
+    }), v !== u && d(v);
+  }), /* @__PURE__ */ y.createElement(y.Fragment, null, $e(i, {
+    ref: r
+  }), t && s && we(
+    /* @__PURE__ */ y.createElement(
+      "div",
+      {
+        ref: n,
+        className: "screenshots-option",
+        style: {
+          visibility: a ? "visible" : "hidden",
+          transform: `translate(${(a == null ? void 0 : a.x) ?? 0}px, ${(a == null ? void 0 : a.y) ?? 0}px)`
+        },
+        "data-placement": f
+      },
+      /* @__PURE__ */ y.createElement("div", { className: "screenshots-option-container" }, s),
+      /* @__PURE__ */ y.createElement("div", { className: "screenshots-option-arrow", style: { marginLeft: u } })
+    ),
+    p()
+  ));
 });
-var index$5 = "";
-var _jsxFileName$h = "C:\\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 A = F(function({
+  title: t,
+  icon: s,
+  checked: i,
+  disabled: r,
+  option: o,
+  onClick: n
 }) {
-  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
-    }
-  })));
+  const c = ["screenshots-button"], f = g(
+    (h) => {
+      r || !n || n(h);
+    },
+    [r, n]
+  );
+  return i && c.push("screenshots-button-checked"), r && c.push("screenshots-button-disabled"), /* @__PURE__ */ y.createElement(Ae, { open: i, content: o }, /* @__PURE__ */ y.createElement(
+    "div",
+    {
+      className: c.join(" "),
+      title: t,
+      onClick: f
+    },
+    /* @__PURE__ */ y.createElement("span", { className: s })
+  ));
 });
-var _jsxFileName$g = "C:\\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();
+function Ie() {
+  const { image: e, width: t, height: s, history: i, bounds: r, lang: o } = Y(), n = U(), [, c] = H(), f = ve(), h = xe(), a = g(() => {
+    c.clearSelect(), setTimeout(() => {
+      !n.current || !e || !r || fe({
+        image: e,
+        width: t,
+        height: s,
+        history: i,
+        bounds: r
+      }).then((l) => {
+        f("onOk", l, r), h();
       });
     });
-  }, [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
-    }
-  });
+  }, [n, c, e, t, s, i, r, f, h]);
+  return /* @__PURE__ */ y.createElement(A, { title: o.operation_ok_title, icon: "icon-ok", onClick: a });
 }
-var _jsxFileName$f = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Cancel\\index.tsx";
-function Cancel() {
-  const call = useCall();
-  const reset = useReset();
-  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
-    }
-  });
+function We() {
+  const e = ve(), t = xe(), s = O(), i = g(() => {
+    e("onCancel"), t();
+  }, [e, t]);
+  return /* @__PURE__ */ y.createElement(A, { title: s.operation_cancel_title, icon: "icon-cancel", onClick: i });
 }
-var _jsxFileName$e = "C:\\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();
+function Fe() {
+  const { image: e, width: t, height: s, history: i, bounds: r, lang: o } = Y(), n = U(), [, c] = H(), f = ve(), h = xe(), a = g(() => {
+    c.clearSelect(), setTimeout(() => {
+      !n.current || !e || !r || fe({
+        image: e,
+        width: t,
+        height: s,
+        history: i,
+        bounds: r
+      }).then((l) => {
+        f("onSave", l, r), h();
       });
     });
-  }, [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
-    }
-  });
+  }, [n, c, e, t, s, i, r, f, h]);
+  return /* @__PURE__ */ y.createElement(A, { title: o.operation_save_title, icon: "icon-save", onClick: a });
 }
-var _jsxFileName$d = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Redo\\index.tsx";
-function Redo() {
-  const lang = useLang();
-  const [history, historyDispatcher] = useHistory();
-  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
+function Oe() {
+  const e = O(), [t, s] = H(), i = g(() => {
+    s.redo();
+  }, [s]);
+  return /* @__PURE__ */ y.createElement(
+    A,
+    {
+      title: e.operation_redo_title,
+      icon: "icon-redo",
+      disabled: !t.stack.length || t.stack.length - 1 === t.index,
+      onClick: i
     }
-  });
+  );
 }
-var _jsxFileName$c = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Undo\\index.tsx";
-function Undo() {
-  const lang = useLang();
-  const [history, historyDispatcher] = useHistory();
-  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
+function Ve() {
+  const e = O(), [t, s] = H(), i = g(() => {
+    s.undo();
+  }, [s]);
+  return /* @__PURE__ */ y.createElement(
+    A,
+    {
+      title: e.operation_undo_title,
+      icon: "icon-undo",
+      disabled: t.index === -1,
+      onClick: i
     }
-  });
+  );
 }
-var index$4 = "";
-var _jsxFileName$b = "C:\\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
+const Se = F(function({ value: t, onChange: s }) {
+  const i = [3, 6, 9];
+  return /* @__PURE__ */ y.createElement("div", { className: "screenshots-size" }, i.map((r) => {
+    const o = ["screenshots-size-item"];
+    return r === t && o.push("screenshots-size-active"), /* @__PURE__ */ y.createElement("div", { key: r, className: o.join(" "), onClick: () => s && s(r) }, /* @__PURE__ */ y.createElement(
+      "div",
+      {
+        className: "screenshots-size-pointer",
+        style: {
+          width: r * 1.8,
+          height: r * 1.8
+        }
       }
-    }));
+    ));
   }));
 });
-function useCanvasMousedown(onMousedown) {
-  const emiter = useEmiter();
-  useEffect(() => {
-    emiter.on("mousedown", onMousedown);
-    return () => {
-      emiter.off("mousedown", onMousedown);
-    };
-  }, [onMousedown, emiter]);
+function ee(e) {
+  const t = Z();
+  T(() => (t.on("mousedown", e), () => {
+    t.off("mousedown", e);
+  }), [e, t]);
 }
-function useCanvasMousemove(onMousemove) {
-  const emiter = useEmiter();
-  useEffect(() => {
-    emiter.on("mousemove", onMousemove);
-    return () => {
-      emiter.off("mousemove", onMousemove);
-    };
-  }, [onMousemove, emiter]);
+function te(e) {
+  const t = Z();
+  T(() => (t.on("mousemove", e), () => {
+    t.off("mousemove", e);
+  }), [e, t]);
 }
-function useCanvasMouseup(onMouseup) {
-  const emiter = useEmiter();
-  useEffect(() => {
-    emiter.on("mouseup", onMouseup);
-    return () => {
-      emiter.off("mouseup", onMouseup);
-    };
-  }, [onMouseup, emiter]);
+function ne(e) {
+  const t = Z();
+  T(() => (t.on("mouseup", e), () => {
+    t.off("mouseup", e);
+  }), [e, t]);
 }
-var _jsxFileName$a = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Mosaic\\index.tsx";
-function getColor(x, y, imageData) {
-  if (!imageData) {
+function le(e, t, s) {
+  if (!s)
     return [0, 0, 0, 0];
-  }
-  const {
-    data,
-    width
-  } = imageData;
-  const index2 = y * width * 4 + x * 4;
-  return Array.from(data.slice(index2, index2 + 4));
+  const { data: i, width: r } = s, o = t * r * 4 + e * 4;
+  return Array.from(i.slice(o, o + 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 je(e, t) {
+  const { tiles: s, size: i } = t.data;
+  s.forEach((r) => {
+    const o = Math.round(r.color[0]), n = Math.round(r.color[1]), c = Math.round(r.color[2]), f = r.color[3] / 255;
+    e.fillStyle = `rgba(${o}, ${n}, ${c}, ${f})`, e.fillRect(r.x - i / 2, r.y - i / 2, i, i);
   });
 }
-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)
+function Je() {
+  const e = O(), { image: t, width: s, height: i } = Y(), [r, o] = J(), n = U(), [c, f] = H(), [h] = K(), [, a] = j(), [l, u] = $(3), d = E(null), p = E(null), w = r === "Mosaic", S = g(() => {
+    o.set("Mosaic"), a.set("crosshair");
+  }, [o, a]), R = g(() => {
+    w || (S(), f.clearSelect());
+  }, [w, S, f]), b = g(
+    (m) => {
+      if (!w || p.current || !d.current || !n.current)
+        return;
+      const x = n.current.canvas.getBoundingClientRect(), C = m.clientX - x.x, z = m.clientY - x.y, B = l * 2;
+      p.current = {
+        name: "Mosaic",
+        type: _.Source,
+        data: {
+          size: B,
+          tiles: [
+            {
+              x: C,
+              y: z,
+              color: le(C, z, d.current)
+            }
+          ]
+        },
+        editHistory: [],
+        draw: je
+      };
+    },
+    [w, l, n]
+  ), M = g(
+    (m) => {
+      if (!w || !p.current || !n.current || !d.current)
+        return;
+      const x = n.current.canvas.getBoundingClientRect(), C = m.clientX - x.x, z = m.clientY - x.y, B = p.current.data.size, D = p.current.data.tiles;
+      let k = D[D.length - 1];
+      if (!k)
+        D.push({
+          x: C,
+          y: z,
+          color: le(C, z, d.current)
+        });
+      else {
+        const ae = k.x - C, P = k.y - z;
+        let L = Math.sqrt(ae ** 2 + P ** 2);
+        const de = -P / L, me = -ae / L;
+        for (; L > B; ) {
+          const re = Math.floor(k.x + B * me), oe = Math.floor(k.y + B * de);
+          k = {
+            x: re,
+            y: oe,
+            color: le(re, oe, d.current)
+          }, D.push(k), L -= B;
+        }
+        L > B / 2 && D.push({
+          x: C,
+          y: z,
+          color: le(C, z, d.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) {
+      c.top !== p.current ? f.push(p.current) : f.set(c);
+    },
+    [w, n, c, f]
+  ), v = g(() => {
+    w && (p.current = null);
+  }, [w]);
+  return ee(b), te(M), ne(v), T(() => {
+    if (!h || !t || !w)
       return;
-    }
-    const $canvas = document.createElement("canvas");
-    const canvasContext = $canvas.getContext("2d");
-    if (!canvasContext) {
+    const m = document.createElement("canvas"), x = m.getContext("2d");
+    if (!x)
       return;
+    m.width = h.width, m.height = h.height;
+    const C = t.naturalWidth / s, z = t.naturalHeight / i;
+    x.drawImage(
+      t,
+      h.x * C,
+      h.y * z,
+      h.width * C,
+      h.height * z,
+      0,
+      0,
+      h.width,
+      h.height
+    ), d.current = x.getImageData(0, 0, h.width, h.height);
+  }, [s, i, h, t, w]), /* @__PURE__ */ y.createElement(
+    A,
+    {
+      title: e.operation_mosaic_title,
+      icon: "icon-mosaic",
+      checked: w,
+      onClick: R,
+      option: /* @__PURE__ */ y.createElement(Se, { value: l, onChange: u })
     }
-    $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 = "C:\\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
+const Ue = F(function({ value: t, onChange: s }) {
+  const i = ["#ee5126", "#fceb4d", "#90e746", "#51c0fa", "#7a7a7a", "#ffffff"];
+  return /* @__PURE__ */ y.createElement("div", { className: "screenshots-color" }, i.map((r) => {
+    const o = ["screenshots-color-item"];
+    return r === t && o.push("screenshots-color-active"), /* @__PURE__ */ y.createElement(
+      "div",
+      {
+        key: r,
+        className: o.join(" "),
+        style: { backgroundColor: r },
+        onClick: () => s && s(r)
       }
-    });
+    );
   }));
 });
-var index$2 = "";
-var _jsxFileName$8 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSizeColor\\index.tsx";
-var ScreenshotsSizeColor = memo(function ScreenshotsSizeColor2({
-  size,
-  color,
-  onSizeChange,
-  onColorChange
+const ce = F(function({
+  size: t,
+  color: s,
+  onSizeChange: i,
+  onColorChange: r
 }) {
-  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 = `
+  return /* @__PURE__ */ y.createElement("div", { className: "screenshots-sizecolor" }, /* @__PURE__ */ y.createElement(Se, { value: t, onChange: i }), /* @__PURE__ */ y.createElement(Ue, { value: s, onChange: r }));
+}), qe = `
 min-width: 0 !important;
 width: 0 !important;
 min-height: 0 !important;
@@ -1572,8 +899,7 @@ position: absolute !important;
 z-index: -1000 !important;
 top:0 !important;
 right:0 !important;
-`;
-const sizeStyle = [
+`, Ge = [
   "letter-spacing",
   "line-height",
   "padding-top",
@@ -1592,1575 +918,799 @@ const sizeStyle = [
   "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(";");
+let V;
+function Qe(e) {
+  const t = window.getComputedStyle(e), s = t.getPropertyValue("box-sizing") || t.getPropertyValue("-moz-box-sizing") || t.getPropertyValue("-webkit-box-sizing"), i = parseFloat(t.getPropertyValue("padding-bottom")) + parseFloat(t.getPropertyValue("padding-top")), r = parseFloat(t.getPropertyValue("border-bottom-width")) + parseFloat(t.getPropertyValue("border-top-width"));
   return {
-    sizingStyle,
-    paddingSize,
-    borderSize,
-    boxSizing
+    sizingStyle: Ge.map((n) => `${n}:${t.getPropertyValue(n)}`).join(";"),
+    paddingSize: i,
+    borderSize: r,
+    boxSizing: s
   };
 }
-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(
+function Ke(e, t, s, i) {
+  V || (V = document.createElement("textarea"), V.setAttribute("tab-index", "-1"), document.body.appendChild(V));
+  const { paddingSize: r, borderSize: o, boxSizing: n, sizingStyle: c } = Qe(e);
+  V.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)
+    `${c};${qe};max-width:${s}px;max-height:${i}px`
+  ), V.value = t || " ";
+  let f = V.scrollWidth, h = V.scrollHeight;
+  return n === "border-box" ? (f += o, h += o) : n === "content-box" && (f -= r, h -= r), {
+    width: Math.min(f, s),
+    height: Math.min(h, i)
   };
 }
-var index$1 = "";
-var _jsxFileName$7 = "C:\\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 Ze = F(function({
+  x: t,
+  y: s,
+  maxWidth: i,
+  maxHeight: r,
+  size: o,
+  color: n,
+  value: c,
+  onChange: f,
+  onBlur: h
 }) {
-  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) {
+  const a = E(null), l = E(null), [u, d] = $(0), [p, w] = $(0), S = () => (a.current || (a.current = document.createElement("div")), a.current);
+  return Q(() => (a.current && (document.body.appendChild(a.current), requestAnimationFrame(() => {
+    var R;
+    (R = l.current) == null || R.focus();
+  })), () => {
+    var R;
+    (R = a.current) == null || R.remove();
+  }), []), Q(() => {
+    if (!l.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());
+    const { width: R, height: b } = Ke(l.current, c, i, r);
+    d(R), w(b);
+  }, [c, i, r]), we(
+    /* @__PURE__ */ y.createElement(
+      "textarea",
+      {
+        ref: l,
+        className: "screenshots-textarea",
+        style: {
+          color: n,
+          width: u,
+          height: p,
+          maxWidth: i,
+          maxHeight: r,
+          fontSize: o,
+          lineHeight: `${o}px`,
+          transform: `translate(${t}px, ${s}px)`
+        },
+        value: c,
+        onChange: (R) => f && f(R.target.value),
+        onBlur: (R) => h && h(R)
+      }
+    ),
+    S()
+  );
 });
-function useDrawSelect(onDrawSelect) {
-  const emiter = useEmiter();
-  useEffect(() => {
-    emiter.on("drawselect", onDrawSelect);
-    return () => {
-      emiter.off("drawselect", onDrawSelect);
-    };
-  }, [onDrawSelect, emiter]);
+function ie(e) {
+  const t = Z();
+  T(() => (t.on("drawselect", e), () => {
+    t.off("drawselect", e);
+  }), [e, t]);
 }
-var _jsxFileName$6 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Text\\index.tsx";
-const sizes = {
+const ge = {
   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 et(e, t) {
+  const { size: s, color: i, fontFamily: r, x: o, y: n, text: c } = t.data;
+  e.fillStyle = i, e.textAlign = "left", e.textBaseline = "top", e.font = `${s}px ${r}`;
+  const f = t.editHistory.reduce(
+    (h, { data: a }) => ({
+      x: h.x + a.x2 - a.x1,
+      y: h.y + a.y2 - a.y1
+    }),
+    { x: 0, y: 0 }
+  );
+  c.split(`
+`).forEach((h, a) => {
+    e.fillText(h, o + f.x, n + f.y + a * s);
   });
 }
-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
+function tt(e, t, s) {
+  e.textAlign = "left", e.textBaseline = "top", e.font = `${t.data.size}px ${t.data.fontFamily}`;
+  let i = 0, r = 0;
+  t.data.text.split(`
+`).forEach((l) => {
+    const u = e.measureText(l);
+    i < u.width && (i = u.width), r += t.data.size;
   });
-  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
-      }
+  const { x: o, y: n } = t.editHistory.reduce(
+    (l, { data: u }) => ({
+      x: l.x + u.x2 - u.x1,
+      y: l.y + u.y2 - u.y1
     }),
-    __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
+    { x: 0, y: 0 }
+  ), c = t.data.x + o, f = t.data.y + n, h = c + i, a = f + r;
+  return s.x >= c && s.x <= h && s.y >= f && s.y <= a;
+}
+function nt() {
+  const e = O(), [t, s] = H(), [i] = K(), [r, o] = J(), [, n] = j(), c = U(), [f, h] = $(3), [a, l] = $("#ee5126"), u = E(
+    null
+  ), d = E(
+    null
+  ), [p, w] = $(
+    null
+  ), [S, R] = $(""), b = r === "Text", M = g(() => {
+    o.set("Text"), n.set("default");
+  }, [o, n]), v = g(() => {
+    b || (M(), s.clearSelect());
+  }, [b, M, s]), m = g((P) => {
+    u.current && (u.current.data.size = ge[P]), h(P);
+  }, []), x = g((P) => {
+    u.current && (u.current.data.color = P), l(P);
+  }, []), C = g(
+    (P) => {
+      R(P), b && u.current && (u.current.data.text = P);
+    },
+    [b]
+  ), z = g(() => {
+    u.current && u.current.data.text && s.push(u.current), u.current = null, R(""), w(null);
+  }, [s]), B = g(
+    (P, L) => {
+      P.name === "Text" && (M(), d.current = {
+        type: _.Edit,
+        data: {
+          x1: L.clientX,
+          y1: L.clientY,
+          x2: L.clientX,
+          y2: L.clientY
+        },
+        source: P
+      }, s.select(P));
+    },
+    [M, s]
+  ), D = g(
+    (P) => {
+      if (!b || !c.current || u.current || !i)
+        return;
+      const { left: L, top: de } = c.current.canvas.getBoundingClientRect(), me = window.getComputedStyle(
+        c.current.canvas
+      ).fontFamily, re = P.clientX - L, oe = P.clientY - de;
+      u.current = {
+        name: "Text",
+        type: _.Source,
+        data: {
+          size: ge[f],
+          color: a,
+          fontFamily: me,
+          x: re,
+          y: oe,
+          text: ""
+        },
+        editHistory: [],
+        draw: et,
+        isHit: tt
+      }, w({
+        x: P.clientX,
+        y: P.clientY,
+        maxWidth: i.width - re,
+        maxHeight: i.height - oe
+      });
+    },
+    [b, f, a, i, c]
+  ), k = g(
+    (P) => {
+      b && d.current && (d.current.data.x2 = P.clientX, d.current.data.y2 = P.clientY, t.top !== d.current ? (d.current.source.editHistory.push(d.current), s.push(d.current)) : s.set(t));
+    },
+    [b, t, s]
+  ), ae = g(() => {
+    b && (d.current = null);
+  }, [b]);
+  return ie(B), ee(D), te(k), ne(ae), /* @__PURE__ */ y.createElement(y.Fragment, null, /* @__PURE__ */ y.createElement(
+    A,
+    {
+      title: e.operation_text_title,
+      icon: "icon-text",
+      checked: b,
+      onClick: v,
+      option: /* @__PURE__ */ y.createElement(
+        ce,
+        {
+          size: f,
+          color: a,
+          onSizeChange: m,
+          onColorChange: x
+        }
+      )
     }
-  }));
+  ), b && p && /* @__PURE__ */ y.createElement(
+    Ze,
+    {
+      x: p.x,
+      y: p.y,
+      maxWidth: p.maxWidth,
+      maxHeight: p.maxHeight,
+      size: ge[f],
+      color: a,
+      value: S,
+      onChange: C,
+      onBlur: z
+    }
+  ));
 }
-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();
+const Ce = 4;
+function X(e, t, s) {
+  e.lineWidth = 1, e.strokeStyle = "#000000", e.fillStyle = "#ffffff", e.beginPath(), e.arc(t, s, Ce, 0, 2 * Math.PI), e.fill(), e.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 he(e, t, s) {
+  t.draw(e, t);
+  const { data: i } = e.getImageData(s.x, s.y, 1, 1);
+  return i.some((r) => r !== 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 N(e, t, s) {
+  if (!e)
+    return !1;
+  const { left: i, top: r } = e.getBoundingClientRect(), o = t.clientX - i, n = t.clientY - r;
+  return (s.x - o) ** 2 + (s.y - n) ** 2 < Ce ** 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
+function rt(e, t) {
+  const { size: s, color: i, points: r } = t.data;
+  e.lineCap = "round", e.lineJoin = "round", e.lineWidth = s, e.strokeStyle = i;
+  const o = t.editHistory.reduce(
+    (n, { data: c }) => ({
+      x: n.x + c.x2 - c.x1,
+      y: n.y + c.y2 - c.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();
-  }
+  e.beginPath(), r.forEach((n, c) => {
+    c === 0 ? e.moveTo(n.x + o.x, n.y + o.y) : e.lineTo(n.x + o.x, n.y + o.y);
+  }), e.stroke(), t.isSelected && (e.lineWidth = 1, e.strokeStyle = "#000000", e.beginPath(), r.forEach((n, c) => {
+    c === 0 ? e.moveTo(n.x + o.x, n.y + o.y) : e.lineTo(n.x + o.x, n.y + o.y);
+  }), e.stroke());
 }
-var _jsxFileName$5 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Brush\\index.tsx";
-function Brush() {
-  const lang = useLang();
-  const [, cursorDispatcher] = useCursor();
-  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
+function ot() {
+  const e = O(), [, t] = j(), [s, i] = J(), r = U(), [o, n] = H(), [c, f] = $(3), [h, a] = $("#ee5126"), l = E(null), u = E(null), d = s === "Brush", p = g(() => {
+    i.set("Brush"), t.set("default");
+  }, [i, t]), w = g(() => {
+    d || (p(), n.clearSelect());
+  }, [d, p, n]), S = g(
+    (v, m) => {
+      v.name === "Brush" && (p(), u.current = {
+        type: _.Edit,
+        data: {
+          x1: m.clientX,
+          y1: m.clientY,
+          x2: m.clientX,
+          y2: m.clientY
+        },
+        source: v
+      }, n.select(v));
+    },
+    [p, n]
+  ), R = g(
+    (v) => {
+      if (!d || l.current || !r.current)
+        return;
+      const { left: m, top: x } = r.current.canvas.getBoundingClientRect();
+      l.current = {
+        name: "Brush",
+        type: _.Source,
+        data: {
+          size: c,
+          color: h,
+          points: [
+            {
+              x: v.clientX - m,
+              y: v.clientY - x
+            }
+          ]
+        },
+        editHistory: [],
+        draw: rt,
+        isHit: he
+      };
+    },
+    [d, r, c, h]
+  ), b = g(
+    (v) => {
+      if (!(!d || !r.current)) {
+        if (u.current)
+          u.current.data.x2 = v.clientX, u.current.data.y2 = v.clientY, o.top !== u.current ? (u.current.source.editHistory.push(u.current), n.push(u.current)) : n.set(o);
+        else if (l.current) {
+          const { left: m, top: x } = r.current.canvas.getBoundingClientRect();
+          l.current.data.points.push({
+            x: v.clientX - m,
+            y: v.clientY - x
+          }), o.top !== l.current ? n.push(l.current) : n.set(o);
+        }
       }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$5,
-      lineNumber: 161,
-      columnNumber: 5
+    },
+    [d, o, r, n]
+  ), M = g(() => {
+    d && (l.current && n.clearSelect(), l.current = null, u.current = null);
+  }, [d, n]);
+  return ie(S), ee(R), te(b), ne(M), /* @__PURE__ */ y.createElement(
+    A,
+    {
+      title: e.operation_brush_title,
+      icon: "icon-brush",
+      checked: d,
+      onClick: w,
+      option: /* @__PURE__ */ y.createElement(ce, { size: c, color: h, onSizeChange: f, onColorChange: a })
     }
-  });
+  );
 }
-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 {
-    ...action.data,
-    x1,
-    x2,
-    y1,
-    y2
+function ze(e) {
+  let { x1: t, y1: s, x2: i, y2: r } = e.data;
+  return e.editHistory.forEach(({ data: o }) => {
+    const n = o.x2 - o.x1, c = o.y2 - o.y1;
+    o.type === ue.Move ? (t += n, s += c, i += n, r += c) : o.type === ue.MoveStart ? (t += n, s += c) : o.type === ue.MoveEnd && (i += n, r += c);
+  }), {
+    ...e.data,
+    x1: t,
+    x2: i,
+    y1: s,
+    y2: r
   };
 }
-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);
-  }
+function st(e, t) {
+  const { size: s, color: i, x1: r, x2: o, y1: n, y2: c } = ze(t);
+  e.lineCap = "round", e.lineJoin = "bevel", e.lineWidth = s, e.strokeStyle = i;
+  const f = o - r, h = c - n, a = s * 3, l = Math.atan2(h, f);
+  e.beginPath(), e.moveTo(r, n), e.lineTo(o, c), e.lineTo(o - a * Math.cos(l - Math.PI / 6), c - a * Math.sin(l - Math.PI / 6)), e.moveTo(o, c), e.lineTo(o - a * Math.cos(l + Math.PI / 6), c - a * Math.sin(l + Math.PI / 6)), e.stroke(), t.isSelected && (X(e, r, n), X(e, o, c));
 }
-var _jsxFileName$4 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Arrow\\index.tsx";
-var ArrowEditType = /* @__PURE__ */ ((ArrowEditType2) => {
-  ArrowEditType2[ArrowEditType2["Move"] = 0] = "Move";
-  ArrowEditType2[ArrowEditType2["MoveStart"] = 1] = "MoveStart";
-  ArrowEditType2[ArrowEditType2["MoveEnd"] = 2] = "MoveEnd";
-  return ArrowEditType2;
-})(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
+var ue = /* @__PURE__ */ ((e) => (e[e.Move = 0] = "Move", e[e.MoveStart = 1] = "MoveStart", e[e.MoveEnd = 2] = "MoveEnd", e))(ue || {});
+function ct() {
+  const e = O(), [, t] = j(), [s, i] = J(), [r, o] = H(), n = U(), [c, f] = $(3), [h, a] = $("#ee5126"), l = E(null), u = E(null), d = s === "Arrow", p = g(() => {
+    i.set("Arrow"), t.set("default");
+  }, [i, t]), w = g(() => {
+    d || (p(), o.clearSelect());
+  }, [d, p, o]), S = g(
+    (v, m) => {
+      if (v.name !== "Arrow" || !n.current)
+        return;
+      const x = v;
+      p();
+      const { x1: C, y1: z, x2: B, y2: D } = ze(x);
+      let k = 0;
+      N(n.current.canvas, m, {
+        x: C,
+        y: z
+      }) ? k = 1 : N(n.current.canvas, m, {
+        x: B,
+        y: D
+      }) && (k = 2), u.current = {
+        type: _.Edit,
+        data: {
+          type: k,
+          x1: m.clientX,
+          y1: m.clientY,
+          x2: m.clientX,
+          y2: m.clientY
+        },
+        source: x
+      }, o.select(v);
+    },
+    [n, p, o]
+  ), R = g(
+    (v) => {
+      if (!d || l.current || !n.current)
+        return;
+      const { left: m, top: x } = n.current.canvas.getBoundingClientRect();
+      l.current = {
+        name: "Arrow",
+        type: _.Source,
+        data: {
+          size: c,
+          color: h,
+          x1: v.clientX - m,
+          y1: v.clientY - x,
+          x2: v.clientX - m,
+          y2: v.clientY - x
+        },
+        editHistory: [],
+        draw: st,
+        isHit: he
+      };
+    },
+    [d, h, c, n]
+  ), b = g(
+    (v) => {
+      if (!(!d || !n.current)) {
+        if (u.current)
+          u.current.data.x2 = v.clientX, u.current.data.y2 = v.clientY, r.top !== u.current ? (u.current.source.editHistory.push(u.current), o.push(u.current)) : o.set(r);
+        else if (l.current) {
+          const { left: m, top: x } = n.current.canvas.getBoundingClientRect();
+          l.current.data.x2 = v.clientX - m, l.current.data.y2 = v.clientY - x, r.top !== l.current ? o.push(l.current) : o.set(r);
+        }
       }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$4,
-      lineNumber: 185,
-      columnNumber: 5
+    },
+    [d, r, n, o]
+  ), M = g(() => {
+    d && (l.current && o.clearSelect(), l.current = null, u.current = null);
+  }, [d, o]);
+  return ie(S), ee(R), te(b), ne(M), /* @__PURE__ */ y.createElement(
+    A,
+    {
+      title: e.operation_arrow_title,
+      icon: "icon-arrow",
+      checked: d,
+      onClick: w,
+      option: /* @__PURE__ */ y.createElement(ce, { size: c, color: h, onSizeChange: f, onColorChange: a })
     }
-  });
+  );
 }
-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 {
-    ...action.data,
-    x1,
-    x2,
-    y1,
-    y2
+function be(e) {
+  let { x1: t, y1: s, x2: i, y2: r } = e.data;
+  return e.editHistory.forEach(({ data: o }) => {
+    const n = o.x2 - o.x1, c = o.y2 - o.y1;
+    o.type === I.Move ? (t += n, s += c, i += n, r += c) : o.type === I.ResizeTop ? s += c : o.type === I.ResizeRightTop ? (i += n, s += c) : o.type === I.ResizeRight ? i += n : o.type === I.ResizeRightBottom ? (i += n, r += c) : o.type === I.ResizeBottom ? r += c : o.type === I.ResizeLeftBottom ? (t += n, r += c) : o.type === I.ResizeLeft ? t += n : o.type === I.ResizeLeftTop && (t += n, s += c);
+  }), {
+    ...e.data,
+    x1: t,
+    x2: i,
+    y1: s,
+    y2: r
   };
 }
-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);
-  }
+function it(e, t) {
+  const { size: s, color: i, x1: r, y1: o, x2: n, y2: c } = be(t);
+  e.lineCap = "butt", e.lineJoin = "miter", e.lineWidth = s, e.strokeStyle = i;
+  const f = (r + n) / 2, h = (o + c) / 2, a = Math.abs(n - r) / 2, l = Math.abs(c - o) / 2, u = 0.5522848, d = a * u, p = l * u;
+  e.beginPath(), e.moveTo(f - a, h), e.bezierCurveTo(f - a, h - p, f - d, h - l, f, h - l), e.bezierCurveTo(f + d, h - l, f + a, h - p, f + a, h), e.bezierCurveTo(f + a, h + p, f + d, h + l, f, h + l), e.bezierCurveTo(f - d, h + l, f - a, h + p, f - a, h), e.closePath(), e.stroke(), t.isSelected && (e.lineWidth = 1, e.strokeStyle = "#000000", e.fillStyle = "#ffffff", e.beginPath(), e.moveTo(r, o), e.lineTo(n, o), e.lineTo(n, c), e.lineTo(r, c), e.closePath(), e.stroke(), X(e, (r + n) / 2, o), X(e, n, o), X(e, n, (o + c) / 2), X(e, n, c), X(e, (r + n) / 2, c), X(e, r, c), X(e, r, (o + c) / 2), X(e, r, o));
 }
-var _jsxFileName$3 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Ellipse\\index.tsx";
-var EllipseEditType = /* @__PURE__ */ ((EllipseEditType2) => {
-  EllipseEditType2[EllipseEditType2["Move"] = 0] = "Move";
-  EllipseEditType2[EllipseEditType2["ResizeTop"] = 1] = "ResizeTop";
-  EllipseEditType2[EllipseEditType2["ResizeRightTop"] = 2] = "ResizeRightTop";
-  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";
-  return EllipseEditType2;
-})(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
+var I = /* @__PURE__ */ ((e) => (e[e.Move = 0] = "Move", e[e.ResizeTop = 1] = "ResizeTop", e[e.ResizeRightTop = 2] = "ResizeRightTop", e[e.ResizeRight = 3] = "ResizeRight", e[e.ResizeRightBottom = 4] = "ResizeRightBottom", e[e.ResizeBottom = 5] = "ResizeBottom", e[e.ResizeLeftBottom = 6] = "ResizeLeftBottom", e[e.ResizeLeft = 7] = "ResizeLeft", e[e.ResizeLeftTop = 8] = "ResizeLeftTop", e))(I || {});
+function at() {
+  const e = O(), [t, s] = H(), [i, r] = J(), [, o] = j(), n = U(), [c, f] = $(3), [h, a] = $("#ee5126"), l = E(null), u = E(null), d = i === "Ellipse", p = g(() => {
+    r.set("Ellipse"), o.set("crosshair");
+  }, [r, o]), w = g(() => {
+    d || (p(), s.clearSelect());
+  }, [d, p, s]), S = g(
+    (v, m) => {
+      if (v.name !== "Ellipse" || !n.current)
+        return;
+      const x = v;
+      p();
+      const { x1: C, y1: z, x2: B, y2: D } = be(x);
+      let k = 0;
+      N(n.current.canvas, m, {
+        x: (C + B) / 2,
+        y: z
+      }) ? k = 1 : N(n.current.canvas, m, {
+        x: B,
+        y: z
+      }) ? k = 2 : N(n.current.canvas, m, {
+        x: B,
+        y: (z + D) / 2
+      }) ? k = 3 : N(n.current.canvas, m, {
+        x: B,
+        y: D
+      }) ? k = 4 : N(n.current.canvas, m, {
+        x: (C + B) / 2,
+        y: D
+      }) ? k = 5 : N(n.current.canvas, m, {
+        x: C,
+        y: D
+      }) ? k = 6 : N(n.current.canvas, m, {
+        x: C,
+        y: (z + D) / 2
+      }) ? k = 7 : N(n.current.canvas, m, {
+        x: C,
+        y: z
+      }) && (k = 8), u.current = {
+        type: _.Edit,
+        data: {
+          type: k,
+          x1: m.clientX,
+          y1: m.clientY,
+          x2: m.clientX,
+          y2: m.clientY
+        },
+        source: x
+      }, s.select(v);
+    },
+    [n, p, s]
+  ), R = g(
+    (v) => {
+      if (!d || !n.current || l.current)
+        return;
+      const { left: m, top: x } = n.current.canvas.getBoundingClientRect(), C = v.clientX - m, z = v.clientY - x;
+      l.current = {
+        name: "Ellipse",
+        type: _.Source,
+        data: {
+          size: c,
+          color: h,
+          x1: C,
+          y1: z,
+          x2: C,
+          y2: z
+        },
+        editHistory: [],
+        draw: it,
+        isHit: he
+      };
+    },
+    [d, c, h, n]
+  ), b = g(
+    (v) => {
+      if (!(!d || !n.current)) {
+        if (u.current)
+          u.current.data.x2 = v.clientX, u.current.data.y2 = v.clientY, t.top !== u.current ? (u.current.source.editHistory.push(u.current), s.push(u.current)) : s.set(t);
+        else if (l.current) {
+          const { left: m, top: x } = n.current.canvas.getBoundingClientRect();
+          l.current.data.x2 = v.clientX - m, l.current.data.y2 = v.clientY - x, t.top !== l.current ? s.push(l.current) : s.set(t);
+        }
       }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$3,
-      lineNumber: 237,
-      columnNumber: 5
+    },
+    [d, n, t, s]
+  ), M = g(() => {
+    d && (l.current && s.clearSelect(), l.current = null, u.current = null);
+  }, [d, s]);
+  return ie(S), ee(R), te(b), ne(M), /* @__PURE__ */ y.createElement(
+    A,
+    {
+      title: e.operation_ellipse_title,
+      icon: "icon-ellipse",
+      checked: d,
+      onClick: w,
+      option: /* @__PURE__ */ y.createElement(ce, { size: c, color: h, onSizeChange: f, onColorChange: a })
     }
-  });
+  );
 }
-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 {
-    ...action.data,
-    x1,
-    x2,
-    y1,
-    y2
+function ke(e) {
+  let { x1: t, y1: s, x2: i, y2: r } = e.data;
+  return e.editHistory.forEach(({ data: o }) => {
+    const n = o.x2 - o.x1, c = o.y2 - o.y1;
+    o.type === W.Move ? (t += n, s += c, i += n, r += c) : o.type === W.ResizeTop ? s += c : o.type === W.ResizeRightTop ? (i += n, s += c) : o.type === W.ResizeRight ? i += n : o.type === W.ResizeRightBottom ? (i += n, r += c) : o.type === W.ResizeBottom ? r += c : o.type === W.ResizeLeftBottom ? (t += n, r += c) : o.type === W.ResizeLeft ? t += n : o.type === W.ResizeLeftTop && (t += n, s += c);
+  }), {
+    ...e.data,
+    x1: t,
+    x2: i,
+    y1: s,
+    y2: r
   };
 }
-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);
-  }
+function lt(e, t) {
+  const { size: s, color: i, x1: r, y1: o, x2: n, y2: c } = ke(t);
+  e.lineCap = "butt", e.lineJoin = "miter", e.lineWidth = s, e.strokeStyle = i, e.beginPath(), e.moveTo(r, o), e.lineTo(n, o), e.lineTo(n, c), e.lineTo(r, c), e.closePath(), e.stroke(), t.isSelected && (e.lineWidth = 1, e.strokeStyle = "#000000", e.fillStyle = "#ffffff", X(e, (r + n) / 2, o), X(e, n, o), X(e, n, (o + c) / 2), X(e, n, c), X(e, (r + n) / 2, c), X(e, r, c), X(e, r, (o + c) / 2), X(e, r, o));
 }
-var _jsxFileName$2 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Rectangle\\index.tsx";
-var RectangleEditType = /* @__PURE__ */ ((RectangleEditType2) => {
-  RectangleEditType2[RectangleEditType2["Move"] = 0] = "Move";
-  RectangleEditType2[RectangleEditType2["ResizeTop"] = 1] = "ResizeTop";
-  RectangleEditType2[RectangleEditType2["ResizeRightTop"] = 2] = "ResizeRightTop";
-  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";
-  return RectangleEditType2;
-})(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
+var W = /* @__PURE__ */ ((e) => (e[e.Move = 0] = "Move", e[e.ResizeTop = 1] = "ResizeTop", e[e.ResizeRightTop = 2] = "ResizeRightTop", e[e.ResizeRight = 3] = "ResizeRight", e[e.ResizeRightBottom = 4] = "ResizeRightBottom", e[e.ResizeBottom = 5] = "ResizeBottom", e[e.ResizeLeftBottom = 6] = "ResizeLeftBottom", e[e.ResizeLeft = 7] = "ResizeLeft", e[e.ResizeLeftTop = 8] = "ResizeLeftTop", e))(W || {});
+function ut() {
+  const e = O(), [t, s] = H(), [i, r] = J(), [, o] = j(), n = U(), [c, f] = $(3), [h, a] = $("#ee5126"), l = E(null), u = E(null), d = i === "Rectangle", p = g(() => {
+    r.set("Rectangle"), o.set("crosshair");
+  }, [r, o]), w = g(() => {
+    d || (p(), s.clearSelect());
+  }, [d, p, s]), S = g(
+    (v, m) => {
+      if (v.name !== "Rectangle" || !n.current)
+        return;
+      const x = v;
+      p();
+      const { x1: C, y1: z, x2: B, y2: D } = ke(x);
+      let k = 0;
+      N(n.current.canvas, m, {
+        x: (C + B) / 2,
+        y: z
+      }) ? k = 1 : N(n.current.canvas, m, {
+        x: B,
+        y: z
+      }) ? k = 2 : N(n.current.canvas, m, {
+        x: B,
+        y: (z + D) / 2
+      }) ? k = 3 : N(n.current.canvas, m, {
+        x: B,
+        y: D
+      }) ? k = 4 : N(n.current.canvas, m, {
+        x: (C + B) / 2,
+        y: D
+      }) ? k = 5 : N(n.current.canvas, m, {
+        x: C,
+        y: D
+      }) ? k = 6 : N(n.current.canvas, m, {
+        x: C,
+        y: (z + D) / 2
+      }) ? k = 7 : N(n.current.canvas, m, {
+        x: C,
+        y: z
+      }) && (k = 8), u.current = {
+        type: _.Edit,
+        data: {
+          type: k,
+          x1: m.clientX,
+          y1: m.clientY,
+          x2: m.clientX,
+          y2: m.clientY
+        },
+        source: v
+      }, s.select(v);
+    },
+    [n, p, s]
+  ), R = g(
+    (v) => {
+      if (!d || !n.current || l.current)
+        return;
+      const { left: m, top: x } = n.current.canvas.getBoundingClientRect(), C = v.clientX - m, z = v.clientY - x;
+      l.current = {
+        name: "Rectangle",
+        type: _.Source,
+        data: {
+          size: c,
+          color: h,
+          x1: C,
+          y1: z,
+          x2: C,
+          y2: z
+        },
+        editHistory: [],
+        draw: lt,
+        isHit: he
+      };
+    },
+    [d, c, h, n]
+  ), b = g(
+    (v) => {
+      if (!(!d || !n.current)) {
+        if (u.current)
+          u.current.data.x2 = v.clientX, u.current.data.y2 = v.clientY, t.top !== u.current ? (u.current.source.editHistory.push(u.current), s.push(u.current)) : s.set(t);
+        else if (l.current) {
+          const { left: m, top: x } = n.current.canvas.getBoundingClientRect(), C = l.current.data;
+          C.x2 = v.clientX - m, C.y2 = v.clientY - x, t.top !== l.current ? s.push(l.current) : s.set(t);
+        }
       }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$2,
-      lineNumber: 237,
-      columnNumber: 5
+    },
+    [d, n, t, s]
+  ), M = g(() => {
+    d && (l.current && s.clearSelect(), l.current = null, u.current = null);
+  }, [d, s]);
+  return ie(S), ee(R), te(b), ne(M), /* @__PURE__ */ y.createElement(
+    A,
+    {
+      title: e.operation_rectangle_title,
+      icon: "icon-rectangle",
+      checked: d,
+      onClick: w,
+      option: /* @__PURE__ */ y.createElement(ce, { size: c, color: h, onSizeChange: f, onColorChange: a })
     }
-  });
+  );
 }
-var OperationButtons = [Rectangle, Ellipse, Arrow, Brush, Text, Mosaic, "|", Undo, Redo, "|", Save, Cancel, Ok];
-var index = "";
-var _jsxFileName$1 = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsOperations\\index.tsx";
-const ScreenshotsOperationsCtx = React.createContext(null);
-var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
-  var _a, _b;
-  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 ft = [ut, at, ct, ot, nt, Je, "|", Ve, Oe, "|", Fe, We, Ie];
+const Ee = y.createContext(null), ht = F(function() {
+  const { width: t, height: s } = Y(), [i] = K(), [r, o] = $(null), [n, c] = $(null), f = E(null), h = g((l) => {
+    l.stopPropagation();
+  }, []), a = g((l) => {
+    l.preventDefault(), l.stopPropagation();
   }, []);
-  const onContextMenu = useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-  useEffect(() => {
-    if (!bounds || !elRef.current) {
+  return T(() => {
+    if (!i || !f.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 || Math.abs(position.x - x) > 1 || Math.abs(position.y - y) > 1) {
-      setPosition({
-        x,
-        y
-      });
-    }
-    if (!operationsRect || Math.abs(operationsRect.x - elRect.x) > 1 || Math.abs(operationsRect.y - elRect.y) > 1 || Math.abs(operationsRect.width - elRect.width) > 1 || Math.abs(operationsRect.height - elRect.height) > 1) {
-      setOperationsRect({
-        x: elRect.x,
-        y: elRect.y,
-        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: 79,
-      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)`
+    const l = f.current.getBoundingClientRect();
+    let u = i.x + i.width - l.width, d = i.y + i.height + 10;
+    u < 0 && (u = 0), u > t - l.width && (u = t - l.width), d > s - l.height && (d = s - l.height - 10), (!n || Math.abs(n.x - u) > 1 || Math.abs(n.y - d) > 1) && c({
+      x: u,
+      y: d
+    }), (!r || Math.abs(r.x - l.x) > 1 || Math.abs(r.y - l.y) > 1 || Math.abs(r.width - l.width) > 1 || Math.abs(r.height - l.height) > 1) && o({
+      x: l.x,
+      y: l.y,
+      width: l.width,
+      height: l.height
+    });
+  }), i ? /* @__PURE__ */ y.createElement(Ee.Provider, { value: r }, /* @__PURE__ */ y.createElement(
+    "div",
+    {
+      ref: f,
+      className: "screenshots-operations",
+      style: {
+        visibility: n ? "visible" : "hidden",
+        transform: `translate(${(n == null ? void 0 : n.x) ?? 0}px, ${(n == null ? void 0 : n.y) ?? 0}px)`
+      },
+      onDoubleClick: h,
+      onContextMenu: a
     },
-    onDoubleClick,
-    onContextMenu,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 80,
-      columnNumber: 7
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-operations-buttons",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 90,
-      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: 93,
-          columnNumber: 22
-        }
-      });
-    } else {
-      return /* @__PURE__ */ React.createElement(OperationButton, {
-        key: index2,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$1,
-          lineNumber: 95,
-          columnNumber: 22
-        }
-      });
-    }
-  }))));
+    /* @__PURE__ */ y.createElement("div", { className: "screenshots-operations-buttons" }, ft.map((l, u) => l === "|" ? /* @__PURE__ */ y.createElement("div", { key: u, className: "screenshots-operations-divider" }) : /* @__PURE__ */ y.createElement(l, { key: u })))
+  )) : null;
 });
-function useGetLoadedImage(url) {
-  const [image, setImage] = useState(null);
-  useEffect(() => {
-    setImage(null);
-    if (url == null) {
+function dt(e) {
+  const [t, s] = $(null);
+  return T(() => {
+    if (s(null), e == 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);
+    const i = document.createElement("img"), r = () => s(i), o = () => s(null);
+    return i.addEventListener("load", r), i.addEventListener("error", o), i.src = e, () => {
+      i.removeEventListener("load", r), i.removeEventListener("error", o);
     };
-  }, [url]);
-  return image;
+  }, [e]), t;
 }
-var _jsxFileName = "C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\index.tsx";
-function Screenshots({
-  url,
-  width,
-  height,
-  lang,
-  className,
-  ...props
-}) {
-  const image = useGetLoadedImage(url);
-  const canvasContextRef = useRef(null);
-  const emiterRef = useRef({});
-  const [history, setHistory] = useState({
+function pt({ url: e, width: t, height: s, lang: i, className: r, ...o }) {
+  const n = dt(e), c = E(null), f = E({}), [h, a] = $({
     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,
+  }), [l, u] = $(null), [d, p] = $("move"), [w, S] = $(void 0), R = {
+    url: e,
+    width: t,
+    height: s,
+    image: n,
     lang: {
-      ...zhCN,
-      ...lang
+      ...Re,
+      ...i
     },
-    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({
+    emiterRef: f,
+    canvasContextRef: c,
+    history: h,
+    bounds: l,
+    cursor: d,
+    operation: w
+  }, b = g(
+    (z, ...B) => {
+      const D = o[z];
+      typeof D == "function" && D(...B);
+    },
+    [o]
+  ), M = {
+    call: b,
+    setHistory: a,
+    setBounds: u,
+    setCursor: p,
+    setOperation: S
+  }, v = ["screenshots"];
+  r && v.push(r);
+  const m = () => {
+    f.current = {}, a({
       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
+    }), u(null), p("move"), S(void 0);
+  }, x = g(
+    async (z) => {
+      if (!(z.button !== 0 || !n))
+        if (l && c.current)
+          fe({
+            image: n,
+            width: t,
+            height: s,
+            history: h,
+            bounds: l
+          }).then((B) => {
+            b("onOk", B, l), m();
+          });
+        else {
+          const B = {
+            x: 0,
+            y: 0,
+            width: t,
+            height: s
+          };
+          fe({
+            image: n,
+            width: t,
+            height: s,
+            history: h,
+            bounds: B
+          }).then((D) => {
+            b("onOk", D, B), m();
+          });
+        }
     },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 142,
-      columnNumber: 5
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: classNames.join(" "),
-    style: {
-      width,
-      height
+    [n, h, l, t, s, b]
+  ), C = g(
+    (z) => {
+      z.button === 2 && (z.preventDefault(), b("onCancel"), m());
     },
-    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
-    }
-  })));
+    [b]
+  );
+  return Q(() => {
+    m();
+  }, [e]), /* @__PURE__ */ y.createElement(ye.Provider, { value: { store: R, dispatcher: M } }, /* @__PURE__ */ y.createElement(
+    "div",
+    {
+      className: v.join(" "),
+      style: { width: t, height: s },
+      onDoubleClick: x,
+      onContextMenu: C
+    },
+    /* @__PURE__ */ y.createElement(Pe, null),
+    /* @__PURE__ */ y.createElement(He, { ref: c }),
+    /* @__PURE__ */ y.createElement(ht, null)
+  ));
 }
-export { Screenshots as default };
+export {
+  pt as default
+};