react-screenshots 0.5.1 → 0.5.10

package/lib/react-screenshots.es.js

@@ -29,26 +29,36 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React, { useContext, useCallback, useState, useRef, useLayoutEffect, useEffect, forwardRef, useImperativeHandle, cloneElement } from "react";
+import React, { useContext, useCallback, memo, useState, useRef, useLayoutEffect, useEffect, forwardRef, useImperativeHandle, cloneElement } from "react";
 import { createPortal } from "react-dom";
-var iconfont = "";
-function imageToBlob(image, { width, height }) {
+var HistoryItemType;
+(function(HistoryItemType2) {
+  HistoryItemType2[HistoryItemType2["Edit"] = 0] = "Edit";
+  HistoryItemType2[HistoryItemType2["Source"] = 1] = "Source";
+})(HistoryItemType || (HistoryItemType = {}));
+function composeImage({ image, width, height, history, bounds }) {
   return new Promise((resolve, reject) => {
-    if (!image.complete) {
-      return reject(new Error("image is not fully loaded"));
-    }
     const $canvas = document.createElement("canvas");
-    const targetWidth = width * window.devicePixelRatio;
-    const targetHeight = height * window.devicePixelRatio;
+    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.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, targetWidth, targetHeight);
+    ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
+    ctx.clearRect(0, 0, bounds.width, bounds.height);
+    ctx.drawImage(image, bounds.x * rx, bounds.y * ry, bounds.width * rx, bounds.height * ry, 0, 0, bounds.width, bounds.height);
+    history.stack.slice(0, history.index + 1).forEach((item) => {
+      if (item.type === HistoryItemType.Source) {
+        item.draw(ctx, item);
+      }
+    });
     $canvas.toBlob((blob) => {
       if (!blob) {
         return reject(new Error("canvas toBlob fail"));
@@ -57,6 +67,7 @@ function imageToBlob(image, { width, height }) {
     }, "image/png");
   });
 }
+var iconfont = "";
 var screenshots = "";
 const zhCN = {
   magnifier_position_label: "\u5750\u6807",
@@ -130,7 +141,7 @@ var index$9 = "";
 var _jsxFileName$l = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsMagnifier/index.tsx";
 const magnifierWidth = 100;
 const magnifierHeight = 80;
-function ScreenshotsMagnifier({
+var ScreenshotsMagnifier = memo(function ScreenshotsMagnifier2({
   x,
   y
 }) {
@@ -247,7 +258,7 @@ function ScreenshotsMagnifier({
       columnNumber: 9
     }
   }, "RGB: #", rgb)));
-}
+});
 function getBoundsByPoints$2({ x: x1, y: y1 }, { x: x2, y: y2 }, width, height) {
   if (x1 > x2) {
     [x1, x2] = [x2, x1];
@@ -276,7 +287,7 @@ function getBoundsByPoints$2({ x: x1, y: y1 }, { x: x2, y: y2 }, width, height)
 }
 var index$8 = "";
 var _jsxFileName$k = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";
-function ScreenshotsBackground() {
+var ScreenshotsBackground = memo(function ScreenshotsBackground2() {
   const {
     url,
     image,
@@ -401,7 +412,7 @@ function ScreenshotsBackground() {
       columnNumber: 31
     }
   }));
-}
+});
 function useCursor() {
   const { cursor } = useStore();
   const { setCursor } = useDispatcher();
@@ -454,11 +465,6 @@ function useEmiter() {
     reset
   };
 }
-var HistoryItemType;
-(function(HistoryItemType2) {
-  HistoryItemType2[HistoryItemType2["Edit"] = 0] = "Edit";
-  HistoryItemType2[HistoryItemType2["Source"] = 1] = "Source";
-})(HistoryItemType || (HistoryItemType = {}));
 function useHistory() {
   const { history } = useStore();
   const { setHistory } = useDispatcher();
@@ -715,8 +721,9 @@ var ResizePoints;
   ResizePoints2["Move"] = "move";
 })(ResizePoints || (ResizePoints = {}));
 const resizePoints = [ResizePoints.ResizeTop, ResizePoints.ResizetopRight, ResizePoints.ResizeRight, ResizePoints.ResizeRightBottom, ResizePoints.ResizeBottom, ResizePoints.ResizeBottomLeft, ResizePoints.ResizeLeft, ResizePoints.ResizeLeftTop];
-var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
+var ScreenshotsCanvas = memo(forwardRef(function ScreenshotsCanvas2(props, ref) {
   const {
+    url,
     image,
     width,
     height
@@ -732,23 +739,19 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
   const canvasRef = useRef(null);
   const ctxRef = useRef(null);
   const draw2 = useCallback(() => {
-    if (!image || !bounds || !ctxRef.current) {
+    if (!bounds || !ctxRef.current) {
       return;
     }
-    const rx = image.naturalWidth / width;
-    const ry = image.naturalHeight / height;
     const ctx = ctxRef.current;
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = "low";
-    ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
     ctx.clearRect(0, 0, bounds.width, bounds.height);
-    ctx.drawImage(image, bounds.x * rx, bounds.y * ry, bounds.width * rx, bounds.height * ry, 0, 0, bounds.width, bounds.height);
     history.stack.slice(0, history.index + 1).forEach((item) => {
       if (item.type === HistoryItemType.Source) {
         item.draw(ctx, item);
       }
     });
-  }, [image, width, height, bounds, ctxRef, history]);
+  }, [bounds, ctxRef, history]);
   const onMouseDown = useCallback((e, resizeOrMove) => {
     if (e.button !== 0 || !bounds) {
       return;
@@ -823,39 +826,54 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
     };
   }, [updateBounds, operation, emiter]);
   useImperativeHandle(ref, () => ctxRef.current);
-  if (!bounds) {
-    return null;
-  }
   return /* @__PURE__ */ React.createElement("div", {
     className: "screenshots-canvas",
     style: {
-      left: bounds.x,
-      top: bounds.y,
-      width: bounds.width,
-      height: bounds.height
+      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: 190,
-      columnNumber: 5
+      lineNumber: 173,
+      columnNumber: 7
     }
-  }, /* @__PURE__ */ React.createElement("canvas", {
-    ref: canvasRef,
-    width: bounds.width * window.devicePixelRatio,
-    height: bounds.height * window.devicePixelRatio,
+  }, /* @__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: bounds.width,
-      height: bounds.height
+      width,
+      height,
+      transform: bounds ? `translate(${-bounds.x}px, ${-bounds.y}px)` : "none"
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 199,
-      columnNumber: 7
+      lineNumber: 183,
+      columnNumber: 11
     }
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "screenshots-canvas-body",
+  }), /* @__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
     },
@@ -863,8 +881,8 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 208,
-      columnNumber: 7
+      lineNumber: 199,
+      columnNumber: 9
     }
   }), borders.map((border) => {
     return /* @__PURE__ */ React.createElement("div", {
@@ -873,8 +891,8 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 216,
-        columnNumber: 16
+        lineNumber: 207,
+        columnNumber: 18
       }
     });
   }), resizePoints.map((resizePoint) => {
@@ -885,12 +903,12 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 220,
-        columnNumber: 11
+        lineNumber: 211,
+        columnNumber: 13
       }
     });
   }));
-});
+}));
 function useCall() {
   const dispatcher = useDispatcher();
   const call = useCallback((funcName, ...args) => {
@@ -925,11 +943,12 @@ var Placement;
   Placement2["Bottom"] = "bottom";
   Placement2["Top"] = "top";
 })(Placement || (Placement = {}));
-function ScreenshotsOption({
+var ScreenshotsOption = memo(function ScreenshotsOption2({
   open,
   content,
   children
 }) {
+  var _a, _b;
   const childrenRef = useRef(null);
   const popoverRef = useRef(null);
   const contentRef = useRef(null);
@@ -1004,8 +1023,7 @@ function ScreenshotsOption({
     className: "screenshots-option",
     style: {
       visibility: position ? "visible" : "hidden",
-      left: position == null ? void 0 : position.x,
-      top: position == null ? void 0 : position.y
+      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,
@@ -1019,7 +1037,7 @@ function ScreenshotsOption({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 121,
+      lineNumber: 120,
       columnNumber: 13
     }
   }, content), /* @__PURE__ */ React.createElement("div", {
@@ -1030,14 +1048,14 @@ function ScreenshotsOption({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 122,
+      lineNumber: 121,
       columnNumber: 13
     }
   })), getPopoverEl()));
-}
+});
 var index$5 = "";
 var _jsxFileName$h = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";
-function ScreenshotsButton({
+var ScreenshotsButton = memo(function ScreenshotsButton2({
   title,
   icon,
   checked,
@@ -1086,27 +1104,39 @@ function ScreenshotsButton({
       columnNumber: 9
     }
   })));
-}
+});
 var _jsxFileName$g = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ok/index.tsx";
 function Ok() {
-  const lang = useLang();
+  const {
+    image,
+    width,
+    height,
+    history,
+    bounds,
+    lang
+  } = useStore();
   const canvasContextRef = useCanvasContextRef();
   const [, historyDispatcher] = useHistory();
   const call = useCall();
-  const [bounds] = useBounds();
   const reset = useReset();
   const onClick = useCallback(() => {
     historyDispatcher.clearSelect();
     setTimeout(() => {
-      if (!canvasContextRef.current) {
+      if (!canvasContextRef.current || !image || !bounds) {
         return;
       }
-      canvasContextRef.current.canvas.toBlob((blob) => {
+      composeImage({
+        image,
+        width,
+        height,
+        history,
+        bounds
+      }).then((blob) => {
         call("onOk", blob, bounds);
         reset();
-      }, "image/png");
+      });
     });
-  }, [canvasContextRef, historyDispatcher, call, bounds, reset]);
+  }, [canvasContextRef, historyDispatcher, image, width, height, history, bounds, call, reset]);
   return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
     title: lang.operation_ok_title,
     icon: "icon-ok",
@@ -1114,7 +1144,7 @@ function Ok() {
     __self: this,
     __source: {
       fileName: _jsxFileName$g,
-      lineNumber: 31,
+      lineNumber: 36,
       columnNumber: 10
     }
   });
@@ -1142,24 +1172,36 @@ function Cancel() {
 }
 var _jsxFileName$e = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Save/index.tsx";
 function Save() {
-  const lang = useLang();
+  const {
+    image,
+    width,
+    height,
+    history,
+    bounds,
+    lang
+  } = useStore();
   const canvasContextRef = useCanvasContextRef();
   const [, historyDispatcher] = useHistory();
-  const [bounds] = useBounds();
   const call = useCall();
   const reset = useReset();
   const onClick = useCallback(() => {
     historyDispatcher.clearSelect();
     setTimeout(() => {
-      if (!canvasContextRef.current) {
+      if (!canvasContextRef.current || !image || !bounds) {
         return;
       }
-      canvasContextRef.current.canvas.toBlob((blob) => {
+      composeImage({
+        image,
+        width,
+        height,
+        history,
+        bounds
+      }).then((blob) => {
         call("onSave", blob, bounds);
         reset();
-      }, "image/png");
+      });
     });
-  }, [canvasContextRef, historyDispatcher, bounds, call, reset]);
+  }, [canvasContextRef, historyDispatcher, image, width, height, history, bounds, call, reset]);
   return /* @__PURE__ */ React.createElement(ScreenshotsButton, {
     title: lang.operation_save_title,
     icon: "icon-save",
@@ -1167,7 +1209,7 @@ function Save() {
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 31,
+      lineNumber: 36,
       columnNumber: 10
     }
   });
@@ -1214,7 +1256,7 @@ function Undo() {
 }
 var index$4 = "";
 var _jsxFileName$b = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSize/index.tsx";
-function ScreenshotsSize({
+var ScreenshotsSize = memo(function ScreenshotsSize2({
   value,
   onChange
 }) {
@@ -1256,7 +1298,7 @@ function ScreenshotsSize({
       }
     }));
   }));
-}
+});
 function useCanvasMousedown(onMousedown) {
   const emiter = useEmiter();
   useEffect(() => {
@@ -1457,7 +1499,7 @@ function Mosaic() {
 }
 var index$3 = "";
 var _jsxFileName$9 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsColor/index.tsx";
-function ScreenshotsColor({
+var ScreenshotsColor = memo(function ScreenshotsColor2({
   value,
   onChange
 }) {
@@ -1490,10 +1532,10 @@ function ScreenshotsColor({
       }
     });
   }));
-}
+});
 var index$2 = "";
 var _jsxFileName$8 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSizeColor/index.tsx";
-function ScreenshotsSizeColor({
+var ScreenshotsSizeColor = memo(function ScreenshotsSizeColor2({
   size,
   color,
   onSizeChange,
@@ -1504,7 +1546,7 @@ function ScreenshotsSizeColor({
     __self: this,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 15,
+      lineNumber: 20,
       columnNumber: 5
     }
   }, /* @__PURE__ */ React.createElement(ScreenshotsSize, {
@@ -1513,7 +1555,7 @@ function ScreenshotsSizeColor({
     __self: this,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 16,
+      lineNumber: 21,
       columnNumber: 7
     }
   }), /* @__PURE__ */ React.createElement(ScreenshotsColor, {
@@ -1522,11 +1564,11 @@ function ScreenshotsSizeColor({
     __self: this,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 17,
+      lineNumber: 22,
       columnNumber: 7
     }
   }));
-}
+});
 const hiddenTextareaStyle = `
 min-width: 0 !important;
 width: 0 !important;
@@ -1597,7 +1639,7 @@ function calculateNodeSize(textarea, value, maxWidth, maxHeight) {
 }
 var index$1 = "";
 var _jsxFileName$7 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsTextarea/index.tsx";
-function ScreenshotsTextarea({
+var ScreenshotsTextarea = memo(function ScreenshotsTextarea2({
   x,
   y,
   maxWidth,
@@ -1646,15 +1688,14 @@ function ScreenshotsTextarea({
     ref: textareaRef,
     className: "screenshots-textarea",
     style: {
-      left: x,
-      top: y,
       color,
       width,
       height,
       maxWidth,
       maxHeight,
       fontSize: size,
-      lineHeight: `${size}px`
+      lineHeight: `${size}px`,
+      transform: `translate(${x}px, ${y}px)`
     },
     value,
     onChange: (e) => onChange && onChange(e.target.value),
@@ -1666,7 +1707,7 @@ function ScreenshotsTextarea({
       columnNumber: 5
     }
   }), getPopoverEl());
-}
+});
 function useDrawSelect(onDrawSelect) {
   const emiter = useEmiter();
   useEffect(() => {
@@ -2838,7 +2879,8 @@ var OperationButtons = [Rectangle, Ellipse, Arrow, Brush, Text, Mosaic, "|", Und
 var index = "";
 var _jsxFileName$1 = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOperations/index.tsx";
 const ScreenshotsOperationsCtx = React.createContext(null);
-function ScreenshotsOperations() {
+var ScreenshotsOperations = memo(function ScreenshotsOperations2() {
+  var _a, _b;
   const {
     width,
     height
@@ -2901,8 +2943,7 @@ function ScreenshotsOperations() {
     className: "screenshots-operations",
     style: {
       visibility: position ? "visible" : "hidden",
-      left: position == null ? void 0 : position.x,
-      top: position == null ? void 0 : position.y
+      transform: `translate(${(_a = position == null ? void 0 : position.x) != null ? _a : 0}px, ${(_b = position == null ? void 0 : position.y) != null ? _b : 0}px)`
     },
     onDoubleClick,
     onContextMenu,
@@ -2917,7 +2958,7 @@ function ScreenshotsOperations() {
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 88,
+      lineNumber: 87,
       columnNumber: 9
     }
   }, OperationButtons.map((OperationButton, index2) => {
@@ -2928,7 +2969,7 @@ function ScreenshotsOperations() {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 91,
+          lineNumber: 90,
           columnNumber: 22
         }
       });
@@ -2938,13 +2979,13 @@ function ScreenshotsOperations() {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 93,
+          lineNumber: 92,
           columnNumber: 22
         }
       });
     }
   }))));
-}
+});
 function useGetLoadedImage(url) {
   const [image, setImage] = useState(null);
   useEffect(() => {
@@ -3035,24 +3076,35 @@ function Screenshots(_a) {
       return;
     }
     if (bounds && canvasContextRef.current) {
-      canvasContextRef.current.canvas.toBlob((blob) => {
+      composeImage({
+        image,
+        width,
+        height,
+        history,
+        bounds
+      }).then((blob) => {
         call("onOk", blob, bounds);
         reset();
-      }, "image/png");
-    } else {
-      const blob = await imageToBlob(image, {
-        width,
-        height
       });
-      call("onOk", blob, {
+    } else {
+      const targetBounds = {
         x: 0,
         y: 0,
         width,
         height
+      };
+      composeImage({
+        image,
+        width,
+        height,
+        history,
+        bounds: targetBounds
+      }).then((blob) => {
+        call("onOk", blob, targetBounds);
+        reset();
       });
-      reset();
     }
-  }, [image, bounds, width, height, call]);
+  }, [image, history, bounds, width, height, call]);
   const onContextMenu = useCallback((e) => {
     if (e.button !== 2) {
       return;
@@ -3072,7 +3124,7 @@ function Screenshots(_a) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 128,
+      lineNumber: 142,
       columnNumber: 5
     }
   }, /* @__PURE__ */ React.createElement("div", {
@@ -3086,14 +3138,14 @@ function Screenshots(_a) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 129,
+      lineNumber: 143,
       columnNumber: 7
     }
   }, /* @__PURE__ */ React.createElement(ScreenshotsBackground, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 135,
+      lineNumber: 149,
       columnNumber: 9
     }
   }), /* @__PURE__ */ React.createElement(ScreenshotsCanvas, {
@@ -3101,14 +3153,14 @@ function Screenshots(_a) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 136,
+      lineNumber: 150,
       columnNumber: 9
     }
   }), /* @__PURE__ */ React.createElement(ScreenshotsOperations, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 137,
+      lineNumber: 151,
       columnNumber: 9
     }
   })));