npm - react-screenshots - Versions diffs - 0.5.21 → 0.6.0 - Mend

react-screenshots 0.5.21 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/README.md CHANGED Viewed

@@ -1,145 +1,145 @@
-# react-screenshots
-> a screenshot cropper tool by react
-## Install
-[![NPM](https://nodei.co/npm/react-screenshots.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-screenshots/)
-## Usage
-1. web 中使用
-```ts
-import React, { ReactElement, useCallback } from 'react'
-import Screenshots, { Bounds } from 'react-screenshots'
-import url from './image.jpg'
-interface Bounds {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-export default function App(): ReactElement {
-  const onSave = useCallback((blob: Blob, bounds: Bounds) => {
-    console.log('save', blob, bounds)
-    console.log(URL.createObjectURL(blob))
-  }, [])
-  const onCancel = useCallback(() => {
-    console.log('cancel')
-  }, [])
-  const onOk = useCallback((blob: Blob, bounds: Bounds) => {
-    console.log('ok', blob, bounds)
-    console.log(URL.createObjectURL(blob))
-  }, [])
-  return (
-    <Screenshots
-      url={url}
-      width={window.innerWidth}
-      height={window.innerHeight}
-      lang={{
-        operation_undo_title: 'Undo',
-        operation_mosaic_title: 'Mosaic',
-        operation_text_title: 'Text',
-        operation_brush_title: 'Brush',
-        operation_arrow_title: 'Arrow',
-        operation_ellipse_title: 'Ellipse',
-        operation_rectangle_title: 'Rectangle'
-      }}
-      onSave={onSave}
-      onCancel={onCancel}
-      onOk={onOk}
-    />
-  )
-}
-```
-2. electron 中使用
-- electron 中使用可直接加载渲染进程的页面，页面路径为`require.resolve('react-screenshots/electron/electron.html')`，不推荐自己手动开发主进程，推荐直接使用`electron-screenshots`模块
-```ts
-interface ScreenshotsData {
-  bounds: Bounds
-  display: Display
-}
-interface GlobalScreenshots {
-  ready: () => void
-  reset: () => void
-  save: (arrayBuffer: ArrayBuffer, data: ScreenshotsData) => void
-  cancel: () => void
-  ok: (arrayBuffer: ArrayBuffer, data: ScreenshotsData) => void
-  on: (channel: string, fn: ScreenshotsListener) => void
-  off: (channel: string, fn: ScreenshotsListener) => void
-}
-// 需要在electron的preload中提前初始化这个对象，用于渲染进程与主进程通信
-window.screenshots: GlobalScreenshots
-```
-## Props
-```ts
-interface Bounds {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-interface Lang {
-  magnifier_position_label: string
-  operation_ok_title: string
-  operation_cancel_title: string
-  operation_save_title: string
-  operation_redo_title: string
-  operation_undo_title: string
-  operation_mosaic_title: string
-  operation_text_title: string
-  operation_brush_title: string
-  operation_arrow_title: string
-  operation_ellipse_title: string
-  operation_rectangle_title: string
-}
-```
-| 名称     | 说明                 | 类型                                   | 是否必选 |
-| -------- | -------------------- | -------------------------------------- | -------- |
-| url      | 要编辑的图像资源地址 | `string`                               | 是       |
-| width    | 画布宽度             | `number`                               | 是       |
-| height   | 画布宽度             | `number`                               | 是       |
-| lang     | 多语言支持，默认中文 | `Partial<Lang>`                        | 否       |
-| onSave   | 保存按钮回调         | `(blob: Blob, bounds: Bounds) => void` | 否       |
-| onCancel | 取消按钮回调         | `() => void`                           | 否       |
-| onOk     | 取消按钮回调         | `(blob: Blob, bounds: Bounds) => void` | 否       |
-### example
-```js
-import React from 'react'
-function App() {
-  return (
-    <Screenshot
-      url="./example.png"
-      width={window.innerWidth}
-      height={window.innerHeight}
-      onSave={() => {}}
-      onCancel={() => {}}
-      onOk={() => {}}
-    />
-  )
-}
-```
-## Screenshot
-![screenshot](../../screenshot.jpg)
-## Icons
-[Iconfont](https://at.alicdn.com/t/project/572327/6f652e79-fb8b-4164-9fb3-40a705433d93.html?spm=a313x.7781069.1998910419.34)
+# react-screenshots
+> a screenshot cropper tool by react
+## Install
+[![NPM](https://nodei.co/npm/react-screenshots.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-screenshots/)
+## Usage
+1. web 中使用
+```ts
+import React, { ReactElement, useCallback } from "react";
+import Screenshots, { Bounds } from "react-screenshots";
+import url from "./image.jpg";
+interface Bounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export default function App(): ReactElement {
+  const onSave = useCallback((blob: Blob, bounds: Bounds) => {
+    console.log("save", blob, bounds);
+    console.log(URL.createObjectURL(blob));
+  }, []);
+  const onCancel = useCallback(() => {
+    console.log("cancel");
+  }, []);
+  const onOk = useCallback((blob: Blob, bounds: Bounds) => {
+    console.log("ok", blob, bounds);
+    console.log(URL.createObjectURL(blob));
+  }, []);
+  return (
+    <Screenshots
+      url={url}
+      width={window.innerWidth}
+      height={window.innerHeight}
+      lang={{
+        operation_undo_title: "Undo",
+        operation_mosaic_title: "Mosaic",
+        operation_text_title: "Text",
+        operation_brush_title: "Brush",
+        operation_arrow_title: "Arrow",
+        operation_ellipse_title: "Ellipse",
+        operation_rectangle_title: "Rectangle",
+      }}
+      onSave={onSave}
+      onCancel={onCancel}
+      onOk={onOk}
+    />
+  );
+}
+```
+2. electron 中使用
+- electron 中使用可直接加载渲染进程的页面，页面路径为`require.resolve('react-screenshots/electron/electron.html')`，不推荐自己手动开发主进程，推荐直接使用`electron-screenshots`模块
+```ts
+interface ScreenshotsData {
+  bounds: Bounds
+  display: Display
+}
+interface GlobalScreenshots {
+  ready: () => void
+  reset: () => void
+  save: (arrayBuffer: ArrayBuffer, data: ScreenshotsData) => void
+  cancel: () => void
+  ok: (arrayBuffer: ArrayBuffer, data: ScreenshotsData) => void
+  on: (channel: string, fn: ScreenshotsListener) => void
+  off: (channel: string, fn: ScreenshotsListener) => void
+}
+// 需要在electron的preload中提前初始化这个对象，用于渲染进程与主进程通信
+window.screenshots: GlobalScreenshots
+```
+## Props
+```ts
+interface Bounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+interface Lang {
+  magnifier_position_label: string;
+  operation_ok_title: string;
+  operation_cancel_title: string;
+  operation_save_title: string;
+  operation_redo_title: string;
+  operation_undo_title: string;
+  operation_mosaic_title: string;
+  operation_text_title: string;
+  operation_brush_title: string;
+  operation_arrow_title: string;
+  operation_ellipse_title: string;
+  operation_rectangle_title: string;
+}
+```
+| 名称     | 说明                 | 类型                                   | 是否必选 |
+| -------- | -------------------- | -------------------------------------- | -------- |
+| url      | 要编辑的图像资源地址 | `string`                               | 是       |
+| width    | 画布宽度             | `number`                               | 是       |
+| height   | 画布宽度             | `number`                               | 是       |
+| lang     | 多语言支持，默认中文 | `Partial<Lang>`                        | 否       |
+| onSave   | 保存按钮回调         | `(blob: Blob, bounds: Bounds) => void` | 否       |
+| onCancel | 取消按钮回调         | `() => void`                           | 否       |
+| onOk     | 取消按钮回调         | `(blob: Blob, bounds: Bounds) => void` | 否       |
+### example
+```js
+import React from "react";
+function App() {
+  return (
+    <Screenshot
+      url="./example.png"
+      width={window.innerWidth}
+      height={window.innerHeight}
+      onSave={() => {}}
+      onCancel={() => {}}
+      onOk={() => {}}
+    />
+  );
+}
+```
+## Screenshot
+![screenshot](../../screenshot.jpg)
+## Icons
+[Iconfont](https://at.alicdn.com/t/project/572327/6f652e79-fb8b-4164-9fb3-40a705433d93.html?spm=a313x.7781069.1998910419.34)

package/dist/electron.html ADDED Viewed

@@ -0,0 +1 @@

+ <!DOCTYPE html><html><head><title>Rsbuild App</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="./static/js/lib-react.6d1aa3cf.js"></script><script defer src="./static/js/589.5602a0fa.js"></script><script defer src="./static/js/electron.1c6ab61b.js"></script><link href="./static/css/electron.7eee95c8.css" rel="stylesheet"></head><body><div id="root"></div></body></html>

package/dist/index.html ADDED Viewed

@@ -0,0 +1 @@

+ <!DOCTYPE html><html><head><title>Rsbuild App</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="./static/js/lib-react.6d1aa3cf.js"></script><script defer src="./static/js/589.5602a0fa.js"></script><script defer src="./static/js/index.fbe72af7.js"></script><link href="./static/css/index.7eee95c8.css" rel="stylesheet"></head><body><div id="root"></div></body></html>

package/dist/static/css/electron.7eee95c8.css ADDED Viewed

@@ -0,0 +1 @@

+ @font-face{font-family:screenshots-icon;src:url(data:font/woff2;base64,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)format("woff2"),url(data:application/font-woff;base64,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)format("woff"),url(data:font/ttf;base64,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aW9uIDEuMHNjcmVlbnNob3RzLWljb25HZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQBDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AHMAYwByAGUAZQBuAHMAaABvAHQAcwAtAGkAYwBvAG4AUgBlAGcAdQBsAGEAcgBzAGMAcgBlAGUAbgBzAGgAbwB0AHMALQBpAGMAbwBuAHMAYwByAGUAZQBuAHMAaABvAHQAcwAtAGkAYwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAYwByAGUAZQBuAHMAaABvAHQAcwAtAGkAYwBvAG4ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0ABWFycm93BHNhdmUGbW9zYWljBHJlZG8EdW5kbwdlbGxpcHNlCXJlY3RhbmdsZQR0ZXh0BmNhbmNlbAJvawVicnVzaAAA)format("truetype")}[class^=icon-],[class*=\ icon-]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;line-height:1;font-family:screenshots-icon!important}.icon-ok:before{content:""}.icon-cancel:before{content:""}.icon-save:before{content:""}.icon-redo:before{content:""}.icon-undo:before{content:""}.icon-mosaic:before{content:""}.icon-text:before{content:""}.icon-brush:before{content:""}.icon-arrow:before{content:""}.icon-ellipse:before{content:""}.icon-rectangle:before{content:""}.screenshots{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji;position:relative;transform:translateZ(0)}.screenshots,.screenshots *{box-sizing:border-box;-webkit-user-select:none;user-select:none}.screenshots-magnifier{z-index:9;width:100px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji;position:absolute;top:0;left:0;box-shadow:0 0 8px #000}.screenshots-magnifier,.screenshots-magnifier *{box-sizing:border-box;-webkit-user-select:none;user-select:none}.screenshots-magnifier-body{background-color:#fff;position:relative}.screenshots-magnifier-body:before{content:"";z-index:1;background-color:#0a72a1;width:100%;height:2px;position:absolute;top:50%;left:0}.screenshots-magnifier-body:after{content:"";z-index:1;background-color:#0a72a1;width:2px;height:100%;position:absolute;top:0;left:50%}.screenshots-magnifier-body-canvas{width:100px;height:80px;display:block}.screenshots-magnifier-footer{color:#fff;white-space:nowrap;text-align:center;background-color:#5f5e5e;height:40px;padding:4px;font-size:11px;overflow:hidden}.screenshots-magnifier-footer-item{height:18px;line-height:18px}.screenshots-background{width:100%;height:100%;position:relative}.screenshots-background-image{width:100%;height:100%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-webkit-font-smooting:antialiased;border:none;outline:none;display:block}.screenshots-background-mask{background-color:#0000004d;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.screenshots-canvas{will-change:width,height,transform;position:absolute;top:0;left:0}.screenshots-canvas-body,.screenshots-canvas-mask{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.screenshots-canvas-image{will-change:transform;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-webkit-font-smooting:antialiased;border:none;outline:none;display:block}.screenshots-canvas-panel{will-change:width,height;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.screenshots-canvas-size{color:#fff;white-space:nowrap;pointer-events:none;background-color:#000c;border-radius:2px;padding:3px 4px;font-size:12px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.screenshots-canvas-border-top{pointer-events:none;background-color:#39f;width:100%;height:2px;position:absolute;top:0;left:0;transform:translateY(-50%)}.screenshots-canvas-border-right{pointer-events:none;background-color:#39f;width:2px;height:100%;position:absolute;top:0;left:100%;transform:translate(-50%)}.screenshots-canvas-border-bottom{pointer-events:none;background-color:#39f;width:100%;height:2px;position:absolute;top:100%;left:0;transform:translateY(-50%)}.screenshots-canvas-border-left{pointer-events:none;background-color:#39f;width:2px;height:100%;position:absolute;top:0;left:0;transform:translate(-50%)}.screenshots-canvas-point-top{cursor:ns-resize;background-color:#39f;border-radius:50%;width:8px;height:8px;position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.screenshots-canvas-point-top-right{cursor:nesw-resize;background-color:#39f;border-radius:50%;width:8px;height:8px;position:absolute;top:0;left:100%;transform:translate(-50%,-50%)}.screenshots-canvas-point-right{cursor:ew-resize;background-color:#39f;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:100%;transform:translate(-50%,-50%)}.screenshots-canvas-point-right-bottom{cursor:nwse-resize;background-color:#39f;border-radius:50%;width:8px;height:8px;position:absolute;top:100%;left:100%;transform:translate(-50%,-50%)}.screenshots-canvas-point-bottom{cursor:ns-resize;background-color:#39f;border-radius:50%;width:8px;height:8px;position:absolute;top:100%;left:50%;transform:translate(-50%,-50%)}.screenshots-canvas-point-bottom-left{cursor:nesw-resize;background-color:#39f;border-radius:50%;width:8px;height:8px;position:absolute;top:100%;left:0;transform:translate(-50%,-50%)}.screenshots-canvas-point-left{cursor:ew-resize;background-color:#39f;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}.screenshots-canvas-point-left-top{cursor:nwse-resize;background-color:#39f;border-radius:50%;width:8px;height:8px;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.screenshots-option{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji;position:absolute;top:0;left:0}.screenshots-option,.screenshots-option *{box-sizing:border-box;-webkit-user-select:none;user-select:none}.screenshots-option-container{background-color:#fff;border:1px solid #ddd;border-radius:2px;height:34px;padding:3px}.screenshots-option-arrow{border:6px solid #0000;position:absolute}.screenshots-option[data-placement=top]{transform:translate(-50%,-11px)}.screenshots-option[data-placement=top] .screenshots-option-arrow{border-top-color:#fff;top:100%;left:50%;transform:translate(-50%,-1px)}.screenshots-option[data-placement=bottom]{transform:translate(-50%,11px)}.screenshots-option[data-placement=bottom] .screenshots-option-arrow{border-bottom-color:#fff;bottom:100%;left:50%;transform:translate(-50%,1px)}.screenshots-button{color:#333;text-align:center;vertical-align:middle;cursor:pointer;width:26px;height:26px;margin:0 3px;font-size:18px;line-height:26px}.screenshots-button-checked,.screenshots-button:hover{background-color:#eee;outline:1px solid #777}.screenshots-button-disabled{color:#bbb;cursor:not-allowed}.screenshots-button-disabled:hover{background-color:#fff;outline:none}.screenshots-size{align-items:center;height:24px;display:flex}.screenshots-size-item{cursor:pointer;width:24px;height:24px;margin:0 3px;position:relative}.screenshots-size-pointer{background-color:#555;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.screenshots-size-active>.screenshots-size-pointer{background-color:#39f}.screenshots-color{align-items:center;height:24px;display:flex}.screenshots-color-item{cursor:pointer;border:1px solid #777;width:24px;height:24px;margin:0 3px;position:relative}.screenshots-color-item:before{content:"";background-color:#333;width:10px;height:10px;display:none;position:absolute;bottom:0;right:0}.screenshots-color-item:after{content:"";border-bottom:2px solid #fff;border-left:2px solid #fff;width:8px;height:4px;display:none;position:absolute;bottom:5px;right:5px;transform:translate(5px,2px)rotate(-45deg)scale(.8)}.screenshots-color-active:before,.screenshots-color-active:after{display:block}.screenshots-sizecolor{align-items:center;height:24px;display:flex}.screenshots-textarea{box-sizing:border-box;resize:none;white-space:nowrap;word-break:break-all;text-align:left;background-color:#0000;border:2px solid #39f;outline:none;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji;position:absolute;top:0;left:0;overflow:hidden}.screenshots-operations{will-change:transform;position:absolute;top:0;left:0}.screenshots-operations-buttons{background-color:#fff;border:1px solid #ddd;border-radius:2px;align-items:center;padding:3px;display:flex;overflow:hidden}.screenshots-operations-divider{background-color:#ddd;width:1px;height:26px;margin:0 3px}html,body,#app{height:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;overflow:hidden}.body{height:100%}

package/dist/static/css/index.7eee95c8.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/static/image/image.1ca17a04.jpg ADDED Viewed

Binary file

package/dist/static/js/589.5602a0fa.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";(self.webpackChunkreact_screenshots=self.webpackChunkreact_screenshots||[]).push([["589"],{892(e,t,n){let r;n.d(t,{A:()=>en});var l=n(723),i=n(155);function a(e){let{image:t,width:n,height:r,history:l,bounds:i}=e;return new Promise((e,a)=>{let c=document.createElement("canvas"),s=i.width*window.devicePixelRatio,u=i.height*window.devicePixelRatio;c.width=s,c.height=u;let o=c.getContext("2d");if(!o)return a(Error("convert image to blob fail"));let d=t.naturalWidth/n,h=t.naturalHeight/r;o.imageSmoothingEnabled=!0,o.imageSmoothingQuality="low",o.setTransform(window.devicePixelRatio,0,0,window.devicePixelRatio,0,0),o.clearRect(0,0,i.width,i.height),o.drawImage(t,i.x*d,i.y*h,i.width*d,i.height*h,0,0,i.width,i.height),l.stack.slice(0,l.index+1).forEach(e=>{1===e.type&&e.draw(o,e)}),c.toBlob(t=>{if(!t)return a(Error("canvas toBlob fail"));e(t)},"image/png")})}let c={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:"矩形"},s=i.createContext({store:{url:void 0,image:null,width:0,height:0,lang:c,emiterRef:{current:{}},canvasContextRef:{current:null},history:{index:-1,stack:[]},bounds:null,cursor:"move",operation:void 0},dispatcher:{call:void 0,setHistory:void 0,setBounds:void 0,setCursor:void 0,setOperation:void 0}});function u(){let{dispatcher:e}=(0,i.useContext)(s);return e}function o(){let{store:e}=(0,i.useContext)(s);return e}function d(){let{bounds:e}=o(),{setBounds:t}=u();return[e,{set:(0,i.useCallback)(e=>{null==t||t(e)},[t]),reset:(0,i.useCallback)(()=>{null==t||t(null)},[t])}]}function h(){let{lang:e}=o();return e}let f=(0,i.memo)(function(e){let{x:t,y:n}=e,{width:r,height:a,image:c}=o(),s=h(),[u,d]=(0,i.useState)(null),f=(0,i.useRef)(null),x=(0,i.useRef)(null),y=(0,i.useRef)(null),[p,m]=(0,i.useState)("000000");return(0,i.useLayoutEffect)(()=>{if(!f.current)return;let e=f.current.getBoundingClientRect(),l=t+20,i=n+20;l+e.width>r&&(l=t-e.width-20),i+e.height>a&&(i=n-e.height-20),l<0&&(l=0),i<0&&(i=0),d({x:l,y:i})},[r,a,t,n]),(0,i.useEffect)(()=>{if(!c||!x.current){y.current=null;return}if(y.current||(y.current=x.current.getContext("2d")),!y.current)return;let e=y.current;e.clearRect(0,0,100,80);let l=c.naturalWidth/r,i=c.naturalHeight/a;e.drawImage(c,t*l-50,n*i-40,100,80,0,0,100,80);let{data:s}=e.getImageData(Math.floor(50),Math.floor(40),1,1);m(Array.from(s.slice(0,3)).map(e=>e>=16?e.toString(16):`0${e.toString(16)}`).join("").toUpperCase())},[r,a,c,t,n]),(0,l.jsxs)("div",{ref:f,className:"screenshots-magnifier",style:{transform:`translate(${null==u?void 0:u.x}px, ${null==u?void 0:u.y}px)`},children:[(0,l.jsx)("div",{className:"screenshots-magnifier-body",children:(0,l.jsx)("canvas",{ref:x,className:"screenshots-magnifier-body-canvas",width:100,height:80})}),(0,l.jsxs)("div",{className:"screenshots-magnifier-footer",children:[(0,l.jsxs)("div",{className:"screenshots-magnifier-footer-item",children:[s.magnifier_position_label,": (",t,",",n,")"]}),(0,l.jsxs)("div",{className:"screenshots-magnifier-footer-item",children:["RGB: #",p]})]})]})}),x=(0,i.memo)(function(){let{url:e,image:t,width:n,height:r}=o(),[a,c]=d(),s=(0,i.useRef)(null),u=(0,i.useRef)(null),h=(0,i.useRef)(!1),[x,y]=(0,i.useState)(null),p=(0,i.useCallback)((e,t)=>{if(!s.current)return;let{x:l,y:i}=s.current.getBoundingClientRect();c.set(function(e,t,n,r){let{x:l,y:i}=e,{x:a,y:c}=t;return l>a&&([l,a]=[a,l]),i>c&&([i,c]=[c,i]),l<0&&(l=0),a>n&&(a=n),i<0&&(i=0),c>r&&(c=r),{x:l,y:i,width:a-l,height:c-i}}({x:e.x-l,y:e.y-i},{x:t.x-l,y:t.y-i},n,r))},[n,r,c]),m=(0,i.useCallback)(e=>{u.current||a||0!==e.button||(u.current={x:e.clientX,y:e.clientY},h.current=!1)},[a]);return((0,i.useEffect)(()=>{let e=e=>{if(s.current){let t=s.current.getBoundingClientRect();e.clientX<t.left||e.clientY<t.top||e.clientX>t.right||e.clientY>t.bottom?y(null):y({x:e.clientX-t.x,y:e.clientY-t.y})}u.current&&(p(u.current,{x:e.clientX,y:e.clientY}),h.current=!0)},t=e=>{u.current&&(h.current&&p(u.current,{x:e.clientX,y:e.clientY}),u.current=null,h.current=!1)};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",t),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",t)}},[p]),(0,i.useLayoutEffect)(()=>{(!t||a)&&y(null)},[t,a]),e&&t)?(0,l.jsxs)("div",{ref:s,className:"screenshots-background",onMouseDown:m,children:[(0,l.jsx)("img",{className:"screenshots-background-image",src:e}),(0,l.jsx)("div",{className:"screenshots-background-mask"}),x&&!a&&(0,l.jsx)(f,{x:null==x?void 0:x.x,y:null==x?void 0:x.y})]}):null});function y(){let{cursor:e}=o(),{setCursor:t}=u();return[e,{set:(0,i.useCallback)(e=>{null==t||t(e)},[t]),reset:(0,i.useCallback)(()=>{null==t||t("move")},[t])}]}function p(){let{emiterRef:e}=o(),t=(0,i.useCallback)((t,n)=>{let r=e.current;Array.isArray(r[t])?r[t].push(n):r[t]=[n]},[e]),n=(0,i.useCallback)((t,n)=>{let r=e.current;if(Array.isArray(r[t])){let e=r[t].findIndex(e=>e===n);-1!==e&&r[t].splice(e,1)}},[e]);return{on:t,off:n,emit:(0,i.useCallback)(function(t){for(var n=arguments.length,r=Array(n>1?n-1:0),l=1;l<n;l++)r[l-1]=arguments[l];let i=e.current;Array.isArray(i[t])&&i[t].forEach(e=>e(...r))},[e]),reset:(0,i.useCallback)(()=>{e.current={}},[e])}}function m(){let{history:e}=o(),{setHistory:t}=u(),n=(0,i.useCallback)(n=>{let{index:r,stack:l}=e;l.forEach(e=>{1===e.type&&(e.isSelected=!1)}),1===n.type?n.isSelected=!0:0===n.type&&(n.source.isSelected=!0),l.splice(r+1),l.push(n),null==t||t({index:l.length-1,stack:l})},[e,t]),r=(0,i.useCallback)(()=>{let{stack:n}=e;n.pop(),null==t||t({index:n.length-1,stack:n})},[e,t]),l=(0,i.useCallback)(()=>{let{index:n,stack:r}=e,l=r[n];l&&(1===l.type?l.isSelected=!1:0===l.type&&l.source.editHistory.pop()),null==t||t({index:n<=0?-1:n-1,stack:r})},[e,t]),a=(0,i.useCallback)(()=>{let{index:n,stack:r}=e,l=r[n+1];l&&(1===l.type?l.isSelected=!1:0===l.type&&l.source.editHistory.push(l)),null==t||t({index:n>=r.length-1?r.length-1:n+1,stack:r})},[e,t]),c=(0,i.useCallback)(e=>{null==t||t({...e})},[t]),s=(0,i.useCallback)(n=>{e.stack.forEach(e=>{1===e.type&&(e===n?e.isSelected=!0:e.isSelected=!1)}),null==t||t({...e})},[e,t]),d=(0,i.useCallback)(()=>{e.stack.forEach(e=>{1===e.type&&(e.isSelected=!1)}),null==t||t({...e})},[e,t]),h=(0,i.useCallback)(()=>{null==t||t({index:-1,stack:[]})},[t]);return[{index:e.index,stack:e.stack,top:e.stack.slice(e.index,e.index+1)[0]},{push:n,pop:r,undo:l,redo:a,set:c,select:s,clearSelect:d,reset:h}]}function g(){let{operation:e}=o(),{setOperation:t}=u();return[e,{set:(0,i.useCallback)(e=>{null==t||t(e)},[t]),reset:(0,i.useCallback)(()=>{null==t||t(void 0)},[t])}]}let v=["top","right","bottom","left"],b=["top","top-right","right","right-bottom","bottom","bottom-left","left","left-top"],C=(0,i.memo)((0,i.forwardRef)(function(e,t){let{url:n,image:r,width:a,height:c}=o(),s=p(),[u]=m(),[h]=y(),[f,x]=d(),[C]=g(),k=(0,i.useRef)(void 0),w=(0,i.useRef)(null),S=(0,i.useRef)(null),j=(0,i.useRef)(null),R=(0,i.useRef)(null),E=f&&!u.stack.length&&!C,_=(0,i.useCallback)(()=>{if(!f||!R.current)return;let e=R.current;e.imageSmoothingEnabled=!0,e.imageSmoothingQuality="low",e.clearRect(0,0,f.width,f.height),u.stack.slice(0,u.index+1).forEach(t=>{1===t.type&&t.draw(e,t)})},[f,R,u]),M=(0,i.useCallback)((e,t)=>{if(0===e.button&&f)if(C){let t=function(e,t,n,r){if(!t)return!1;let l=document.createElement("canvas");l.width=e.width,l.height=e.height;let i=l.getContext("2d");if(!i)return!1;let{left:a,top:c}=t.getBoundingClientRect(),s=r.clientX-a,u=r.clientY-c;return[...n.stack.slice(0,n.index+1)].reverse().find(t=>{var n;return 1===t.type&&(i.clearRect(0,0,e.width,e.height),null==(n=t.isHit)?void 0:n.call(t,i,t,{x:s,y:u}))})}(f,j.current,u,e.nativeEvent);t?s.emit("drawselect",t,e.nativeEvent):s.emit("mousedown",e.nativeEvent)}else k.current=t,w.current={x:e.clientX,y:e.clientY},S.current={x:f.x,y:f.y,width:f.width,height:f.height}},[f,C,s,u]),X=(0,i.useCallback)(e=>{if(!k.current||!w.current||!S.current||!f)return;let t=function(e,t,n,r){let l=e.clientX-n.x,i=e.clientY-n.y,a=r.x,c=r.y,s=r.x+r.width,u=r.y+r.height;switch(t){case"top":c+=i;break;case"top-right":s+=l,c+=i;break;case"right":s+=l;break;case"right-bottom":s+=l,u+=i;break;case"bottom":u+=i;break;case"bottom-left":a+=l,u+=i;break;case"left":a+=l;break;case"left-top":a+=l,c+=i;break;case"move":a+=l,c+=i,s+=l,u+=i}return[{x:a,y:c},{x:s,y:u}]}(e,k.current,w.current,S.current);x.set(function(e,t,n,r,l,i){let{x:a,y:c}=e,{x:s,y:u}=t;return a>s&&([a,s]=[s,a]),c>u&&([c,u]=[u,c]),a<0&&(a=0,"move"===i&&(s=n.width)),s>r&&(s=r,"move"===i&&(a=s-n.width)),c<0&&(c=0,"move"===i&&(u=n.height)),u>l&&(u=l,"move"===i&&(c=u-n.height)),{x:a,y:c,width:Math.max(s-a,1),height:Math.max(u-c,1)}}(t[0],t[1],f,a,c,k.current))},[a,c,f,x]);return(0,i.useLayoutEffect)(()=>{if(!r||!f||!j.current){R.current=null;return}R.current||(R.current=j.current.getContext("2d")),_()},[r,f,_]),(0,i.useEffect)(()=>{let e=e=>{C?s.emit("mousemove",e):k.current&&w.current&&S.current&&X(e)},t=e=>{C?s.emit("mouseup",e):k.current&&w.current&&S.current&&(X(e),k.current=void 0,w.current=null,S.current=null)};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",t),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",t)}},[X,C,s]),(0,i.useImperativeHandle)(t,()=>R.current),(0,l.jsxs)("div",{className:"screenshots-canvas",style:{width:(null==f?void 0:f.width)||0,height:(null==f?void 0:f.height)||0,transform:f?`translate(${f.x}px, ${f.y}px)`:"none"},children:[(0,l.jsxs)("div",{className:"screenshots-canvas-body",children:[(0,l.jsx)("img",{className:"screenshots-canvas-image",src:n,style:{width:a,height:c,transform:f?`translate(${-f.x}px, ${-f.y}px)`:"none"}}),(0,l.jsx)("canvas",{ref:j,className:"screenshots-canvas-panel",width:(null==f?void 0:f.width)||0,height:(null==f?void 0:f.height)||0})]}),(0,l.jsx)("div",{className:"screenshots-canvas-mask",style:{cursor:h},onMouseDown:e=>M(e,"move"),children:E&&(0,l.jsxs)("div",{className:"screenshots-canvas-size",children:[f.width," \xd7 ",f.height]})}),v.map(e=>(0,l.jsx)("div",{className:`screenshots-canvas-border-${e}`},e)),E&&b.map(e=>(0,l.jsx)("div",{className:`screenshots-canvas-point-${e}`,onMouseDown:t=>M(t,e)},e))]})}));function k(){let e=u();return(0,i.useCallback)(function(t){for(var n,r=arguments.length,l=Array(r>1?r-1:0),i=1;i<r;i++)l[i-1]=arguments[i];null==(n=e.call)||n.call(e,t,...l)},[e])}function w(){let{canvasContextRef:e}=o();return e}function S(){let e=p(),[,t]=d(),[,n]=y(),[,r]=m(),[,l]=g();return(0,i.useCallback)(()=>{e.reset(),r.reset(),t.reset(),n.reset(),l.reset()},[e,r,t,n,l])}var j=n(316);let R=(0,i.memo)(function(e){let{open:t,content:n,children:r}=e,a=(0,i.useRef)(null),c=(0,i.useRef)(null),s=(0,i.useRef)(null),u=(0,i.useContext)(ee),[o,d]=(0,i.useState)("bottom"),[h,f]=(0,i.useState)(null),[x,y]=(0,i.useState)(0),p=()=>(c.current||(c.current=document.createElement("div")),c.current);return(0,i.useEffect)(()=>{let e=p();return t&&document.body.appendChild(e),()=>{e.remove()}},[t]),(0,i.useEffect)(()=>{if(!t||!u||!a.current||!s.current)return;let e=a.current.getBoundingClientRect(),n=s.current.getBoundingClientRect(),r=o,l=e.left+e.width/2,i=e.top+e.height,c=x;l+n.width/2>u.x+u.width&&(c=l-(l=u.x+u.width-n.width/2)),l<u.x+n.width/2&&(c=l-(l=u.x+n.width/2)),i>window.innerHeight-n.height&&("bottom"===r&&(r="top"),i=e.top-n.height),i<0&&("top"===r&&(r="bottom"),i=e.top+e.height),r!==o&&d(r),((null==h?void 0:h.x)!==l||h.y!==i)&&f({x:l,y:i}),c!==x&&y(c)}),(0,l.jsxs)(l.Fragment,{children:[(0,i.cloneElement)(r,{ref:a}),t&&n&&(0,j.createPortal)((0,l.jsxs)("div",{ref:s,className:"screenshots-option",style:{visibility:h?"visible":"hidden",transform:`translate(${(null==h?void 0:h.x)??0}px, ${(null==h?void 0:h.y)??0}px)`},"data-placement":o,children:[(0,l.jsx)("div",{className:"screenshots-option-container",children:n}),(0,l.jsx)("div",{className:"screenshots-option-arrow",style:{marginLeft:x}})]}),p())]})}),E=(0,i.memo)(function(e){let{title:t,icon:n,checked:r,disabled:a,option:c,onClick:s}=e,u=["screenshots-button"],o=(0,i.useCallback)(e=>{!a&&s&&s(e)},[a,s]);return r&&u.push("screenshots-button-checked"),a&&u.push("screenshots-button-disabled"),(0,l.jsx)(R,{open:r,content:c,children:(0,l.jsx)("div",{className:u.join(" "),title:t,onClick:o,children:(0,l.jsx)("span",{className:n})})})}),_=(0,i.memo)(function(e){let{value:t,onChange:n}=e;return(0,l.jsx)("div",{className:"screenshots-size",children:[3,6,9].map(e=>{let r=["screenshots-size-item"];return e===t&&r.push("screenshots-size-active"),(0,l.jsx)("div",{className:r.join(" "),onClick:()=>n&&n(e),children:(0,l.jsx)("div",{className:"screenshots-size-pointer",style:{width:1.8*e,height:1.8*e}})},e)})})});function M(e){let t=p();(0,i.useEffect)(()=>(t.on("mousedown",e),()=>{t.off("mousedown",e)}),[e,t])}function X(e){let t=p();(0,i.useEffect)(()=>(t.on("mousemove",e),()=>{t.off("mousemove",e)}),[e,t])}function Y(e){let t=p();(0,i.useEffect)(()=>(t.on("mouseup",e),()=>{t.off("mouseup",e)}),[e,t])}function z(e,t,n){if(!n)return[0,0,0,0];let{data:r,width:l}=n,i=t*l*4+4*e;return Array.from(r.slice(i,i+4))}function H(e,t){let{tiles:n,size:r}=t.data;n.forEach(t=>{let n=Math.round(t.color[0]),l=Math.round(t.color[1]),i=Math.round(t.color[2]),a=t.color[3]/255;e.fillStyle=`rgba(${n}, ${l}, ${i}, ${a})`,e.fillRect(t.x-r/2,t.y-r/2,r,r)})}let P=(0,i.memo)(function(e){let{value:t,onChange:n}=e;return(0,l.jsx)("div",{className:"screenshots-color",children:["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"].map(e=>{let r=["screenshots-color-item"];return e===t&&r.push("screenshots-color-active"),(0,l.jsx)("div",{className:r.join(" "),style:{backgroundColor:e},onClick:()=>n&&n(e)},e)})})}),N=(0,i.memo)(function(e){let{size:t,color:n,onSizeChange:r,onColorChange:i}=e;return(0,l.jsxs)("div",{className:"screenshots-sizecolor",children:[(0,l.jsx)(_,{value:t,onChange:r}),(0,l.jsx)(P,{value:n,onChange:i})]})}),B=`
+min-width: 0 !important;
+width: 0 !important;
+min-height: 0 !important;
+height:0 !important;
+visibility: hidden !important;
+overflow: hidden !important;
+position: absolute !important;
+z-index: -1000 !important;
+top:0 !important;
+right:0 !important;
+`,T=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","font-variant","text-rendering","text-transform","text-indent","padding-left","padding-right","border-width","box-sizing","white-space","word-break"],$=(0,i.memo)(function(e){let{x:t,y:n,maxWidth:a,maxHeight:c,size:s,color:u,value:o,onChange:d,onBlur:h}=e,f=(0,i.useRef)(null),x=(0,i.useRef)(null),[y,p]=(0,i.useState)(0),[m,g]=(0,i.useState)(0);return(0,i.useLayoutEffect)(()=>(f.current&&(document.body.appendChild(f.current),requestAnimationFrame(()=>{var e;null==(e=x.current)||e.focus()})),()=>{var e;null==(e=f.current)||e.remove()}),[]),(0,i.useLayoutEffect)(()=>{if(!x.current)return;let{width:e,height:t}=function(e,t,n,l){let i,a,c,s;r||((r=document.createElement("textarea")).setAttribute("tab-index","-1"),document.body.appendChild(r));let{paddingSize:u,borderSize:o,boxSizing:d,sizingStyle:h}=(a=(i=window.getComputedStyle(e)).getPropertyValue("box-sizing")||i.getPropertyValue("-moz-box-sizing")||i.getPropertyValue("-webkit-box-sizing"),c=parseFloat(i.getPropertyValue("padding-bottom"))+parseFloat(i.getPropertyValue("padding-top")),s=parseFloat(i.getPropertyValue("border-bottom-width"))+parseFloat(i.getPropertyValue("border-top-width")),{sizingStyle:T.map(e=>`${e}:${i.getPropertyValue(e)}`).join(";"),paddingSize:c,borderSize:s,boxSizing:a});r.setAttribute("style",`${h};${B};max-width:${n}px;max-height:${l}px`),r.value=t||" ";let f=r.scrollWidth,x=r.scrollHeight;return"border-box"===d?(f+=o,x+=o):"content-box"===d&&(f-=u,x-=u),{width:Math.min(f,n),height:Math.min(x,l)}}(x.current,o,a,c);p(e),g(t)},[o,a,c]),(0,j.createPortal)((0,l.jsx)("textarea",{ref:x,className:"screenshots-textarea",style:{color:u,width:y,height:m,maxWidth:a,maxHeight:c,fontSize:s,lineHeight:`${s}px`,transform:`translate(${t}px, ${n}px)`},value:o,onChange:e=>d&&d(e.target.value),onBlur:e=>h&&h(e)}),(f.current||(f.current=document.createElement("div")),f.current))});function A(e){let t=p();(0,i.useEffect)(()=>(t.on("drawselect",e),()=>{t.off("drawselect",e)}),[e,t])}let L={3:18,6:32,9:46};function W(e,t){let{size:n,color:r,fontFamily:l,x:i,y:a,text:c}=t.data;e.fillStyle=r,e.textAlign="left",e.textBaseline="top",e.font=`${n}px ${l}`;let s=t.editHistory.reduce((e,t)=>{let{data:n}=t;return{x:e.x+n.x2-n.x1,y:e.y+n.y2-n.y1}},{x:0,y:0});c.split("\n").forEach((t,r)=>{e.fillText(t,i+s.x,a+s.y+r*n)})}function I(e,t,n){e.textAlign="left",e.textBaseline="top",e.font=`${t.data.size}px ${t.data.fontFamily}`;let r=0,l=0;t.data.text.split("\n").forEach(n=>{let i=e.measureText(n);r<i.width&&(r=i.width),l+=t.data.size});let{x:i,y:a}=t.editHistory.reduce((e,t)=>{let{data:n}=t;return{x:e.x+n.x2-n.x1,y:e.y+n.y2-n.y1}},{x:0,y:0}),c=t.data.x+i,s=t.data.y+a,u=c+r,o=s+l;return n.x>=c&&n.x<=u&&n.y>=s&&n.y<=o}function D(e,t,n){e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.arc(t,n,4,0,2*Math.PI),e.fill(),e.stroke()}function F(e,t,n){t.draw(e,t);let{data:r}=e.getImageData(n.x,n.y,1,1);return r.some(e=>0!==e)}function V(e,t,n){if(!e)return!1;let{left:r,top:l}=e.getBoundingClientRect(),i=t.clientX-r,a=t.clientY-l;return(n.x-i)**2+(n.y-a)**2<16}function J(e,t){let{size:n,color:r,points:l}=t.data;e.lineCap="round",e.lineJoin="round",e.lineWidth=n,e.strokeStyle=r;let i=t.editHistory.reduce((e,t)=>{let{data:n}=t;return{x:e.x+n.x2-n.x1,y:e.y+n.y2-n.y1}},{x:0,y:0});e.beginPath(),l.forEach((t,n)=>{0===n?e.moveTo(t.x+i.x,t.y+i.y):e.lineTo(t.x+i.x,t.y+i.y)}),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.beginPath(),l.forEach((t,n)=>{0===n?e.moveTo(t.x+i.x,t.y+i.y):e.lineTo(t.x+i.x,t.y+i.y)}),e.stroke())}function O(e){let{x1:t,y1:n,x2:r,y2:l}=e.data;return e.editHistory.forEach(e=>{let{data:i}=e,a=i.x2-i.x1,c=i.y2-i.y1;0===i.type?(t+=a,n+=c,r+=a,l+=c):1===i.type?(t+=a,n+=c):2===i.type&&(r+=a,l+=c)}),{...e.data,x1:t,x2:r,y1:n,y2:l}}function q(e,t){let{size:n,color:r,x1:l,x2:i,y1:a,y2:c}=O(t);e.lineCap="round",e.lineJoin="bevel",e.lineWidth=n,e.strokeStyle=r;let s=3*n,u=Math.atan2(c-a,i-l);e.beginPath(),e.moveTo(l,a),e.lineTo(i,c),e.lineTo(i-s*Math.cos(u-Math.PI/6),c-s*Math.sin(u-Math.PI/6)),e.moveTo(i,c),e.lineTo(i-s*Math.cos(u+Math.PI/6),c-s*Math.sin(u+Math.PI/6)),e.stroke(),t.isSelected&&(D(e,l,a),D(e,i,c))}function Q(e){let{x1:t,y1:n,x2:r,y2:l}=e.data;return e.editHistory.forEach(e=>{let{data:i}=e,a=i.x2-i.x1,c=i.y2-i.y1;0===i.type?(t+=a,n+=c,r+=a,l+=c):1===i.type?n+=c:2===i.type?(r+=a,n+=c):3===i.type?r+=a:4===i.type?(r+=a,l+=c):5===i.type?l+=c:6===i.type?(t+=a,l+=c):7===i.type?t+=a:8===i.type&&(t+=a,n+=c)}),{...e.data,x1:t,x2:r,y1:n,y2:l}}function G(e,t){let{size:n,color:r,x1:l,y1:i,x2:a,y2:c}=Q(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=n,e.strokeStyle=r;let s=(l+a)/2,u=(i+c)/2,o=Math.abs(a-l)/2,d=Math.abs(c-i)/2,h=.5522848*o,f=.5522848*d;e.beginPath(),e.moveTo(s-o,u),e.bezierCurveTo(s-o,u-f,s-h,u-d,s,u-d),e.bezierCurveTo(s+h,u-d,s+o,u-f,s+o,u),e.bezierCurveTo(s+o,u+f,s+h,u+d,s,u+d),e.bezierCurveTo(s-h,u+d,s-o,u+f,s-o,u),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.moveTo(l,i),e.lineTo(a,i),e.lineTo(a,c),e.lineTo(l,c),e.closePath(),e.stroke(),D(e,(l+a)/2,i),D(e,a,i),D(e,a,(i+c)/2),D(e,a,c),D(e,(l+a)/2,c),D(e,l,c),D(e,l,(i+c)/2),D(e,l,i))}function U(e){let{x1:t,y1:n,x2:r,y2:l}=e.data;return e.editHistory.forEach(e=>{let{data:i}=e,a=i.x2-i.x1,c=i.y2-i.y1;0===i.type?(t+=a,n+=c,r+=a,l+=c):1===i.type?n+=c:2===i.type?(r+=a,n+=c):3===i.type?r+=a:4===i.type?(r+=a,l+=c):5===i.type?l+=c:6===i.type?(t+=a,l+=c):7===i.type?t+=a:8===i.type&&(t+=a,n+=c)}),{...e.data,x1:t,x2:r,y1:n,y2:l}}function K(e,t){let{size:n,color:r,x1:l,y1:i,x2:a,y2:c}=U(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=n,e.strokeStyle=r,e.beginPath(),e.moveTo(l,i),e.lineTo(a,i),e.lineTo(a,c),e.lineTo(l,c),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",D(e,(l+a)/2,i),D(e,a,i),D(e,a,(i+c)/2),D(e,a,c),D(e,(l+a)/2,c),D(e,l,c),D(e,l,(i+c)/2),D(e,l,i))}let Z=[function(){let e=h(),[t,n]=m(),[r,a]=g(),[,c]=y(),s=w(),[u,o]=(0,i.useState)(3),[d,f]=(0,i.useState)("#ee5126"),x=(0,i.useRef)(null),p=(0,i.useRef)(null),v="Rectangle"===r,b=(0,i.useCallback)(()=>{a.set("Rectangle"),c.set("crosshair")},[a,c]),C=(0,i.useCallback)(()=>{v||(b(),n.clearSelect())},[v,b,n]),k=(0,i.useCallback)((e,t)=>{if("Rectangle"!==e.name||!s.current)return;b();let{x1:r,y1:l,x2:i,y2:a}=U(e),c=0;V(s.current.canvas,t,{x:(r+i)/2,y:l})?c=1:V(s.current.canvas,t,{x:i,y:l})?c=2:V(s.current.canvas,t,{x:i,y:(l+a)/2})?c=3:V(s.current.canvas,t,{x:i,y:a})?c=4:V(s.current.canvas,t,{x:(r+i)/2,y:a})?c=5:V(s.current.canvas,t,{x:r,y:a})?c=6:V(s.current.canvas,t,{x:r,y:(l+a)/2})?c=7:V(s.current.canvas,t,{x:r,y:l})&&(c=8),p.current={type:0,data:{type:c,x1:t.clientX,y1:t.clientY,x2:t.clientX,y2:t.clientY},source:e},n.select(e)},[s,b,n]),S=(0,i.useCallback)(e=>{if(!v||!s.current||x.current)return;let{left:t,top:n}=s.current.canvas.getBoundingClientRect(),r=e.clientX-t,l=e.clientY-n;x.current={name:"Rectangle",type:1,data:{size:u,color:d,x1:r,y1:l,x2:r,y2:l},editHistory:[],draw:K,isHit:F}},[v,u,d,s]),j=(0,i.useCallback)(e=>{if(v&&s.current){if(p.current)p.current.data.x2=e.clientX,p.current.data.y2=e.clientY,t.top!==p.current?(p.current.source.editHistory.push(p.current),n.push(p.current)):n.set(t);else if(x.current){let{left:r,top:l}=s.current.canvas.getBoundingClientRect(),i=x.current.data;i.x2=e.clientX-r,i.y2=e.clientY-l,t.top!==x.current?n.push(x.current):n.set(t)}}},[v,s,t,n]),R=(0,i.useCallback)(()=>{v&&(x.current&&n.clearSelect(),x.current=null,p.current=null)},[v,n]);return A(k),M(S),X(j),Y(R),(0,l.jsx)(E,{title:e.operation_rectangle_title,icon:"icon-rectangle",checked:v,onClick:C,option:(0,l.jsx)(N,{size:u,color:d,onSizeChange:o,onColorChange:f})})},function(){let e=h(),[t,n]=m(),[r,a]=g(),[,c]=y(),s=w(),[u,o]=(0,i.useState)(3),[d,f]=(0,i.useState)("#ee5126"),x=(0,i.useRef)(null),p=(0,i.useRef)(null),v="Ellipse"===r,b=(0,i.useCallback)(()=>{a.set("Ellipse"),c.set("crosshair")},[a,c]),C=(0,i.useCallback)(()=>{v||(b(),n.clearSelect())},[v,b,n]),k=(0,i.useCallback)((e,t)=>{if("Ellipse"!==e.name||!s.current)return;b();let{x1:r,y1:l,x2:i,y2:a}=Q(e),c=0;V(s.current.canvas,t,{x:(r+i)/2,y:l})?c=1:V(s.current.canvas,t,{x:i,y:l})?c=2:V(s.current.canvas,t,{x:i,y:(l+a)/2})?c=3:V(s.current.canvas,t,{x:i,y:a})?c=4:V(s.current.canvas,t,{x:(r+i)/2,y:a})?c=5:V(s.current.canvas,t,{x:r,y:a})?c=6:V(s.current.canvas,t,{x:r,y:(l+a)/2})?c=7:V(s.current.canvas,t,{x:r,y:l})&&(c=8),p.current={type:0,data:{type:c,x1:t.clientX,y1:t.clientY,x2:t.clientX,y2:t.clientY},source:e},n.select(e)},[s,b,n]),S=(0,i.useCallback)(e=>{if(!v||!s.current||x.current)return;let{left:t,top:n}=s.current.canvas.getBoundingClientRect(),r=e.clientX-t,l=e.clientY-n;x.current={name:"Ellipse",type:1,data:{size:u,color:d,x1:r,y1:l,x2:r,y2:l},editHistory:[],draw:G,isHit:F}},[v,u,d,s]),j=(0,i.useCallback)(e=>{if(v&&s.current){if(p.current)p.current.data.x2=e.clientX,p.current.data.y2=e.clientY,t.top!==p.current?(p.current.source.editHistory.push(p.current),n.push(p.current)):n.set(t);else if(x.current){let{left:r,top:l}=s.current.canvas.getBoundingClientRect();x.current.data.x2=e.clientX-r,x.current.data.y2=e.clientY-l,t.top!==x.current?n.push(x.current):n.set(t)}}},[v,s,t,n]),R=(0,i.useCallback)(()=>{v&&(x.current&&n.clearSelect(),x.current=null,p.current=null)},[v,n]);return A(k),M(S),X(j),Y(R),(0,l.jsx)(E,{title:e.operation_ellipse_title,icon:"icon-ellipse",checked:v,onClick:C,option:(0,l.jsx)(N,{size:u,color:d,onSizeChange:o,onColorChange:f})})},function(){let e=h(),[,t]=y(),[n,r]=g(),[a,c]=m(),s=w(),[u,o]=(0,i.useState)(3),[d,f]=(0,i.useState)("#ee5126"),x=(0,i.useRef)(null),p=(0,i.useRef)(null),v="Arrow"===n,b=(0,i.useCallback)(()=>{r.set("Arrow"),t.set("default")},[r,t]),C=(0,i.useCallback)(()=>{v||(b(),c.clearSelect())},[v,b,c]),k=(0,i.useCallback)((e,t)=>{if("Arrow"!==e.name||!s.current)return;b();let{x1:n,y1:r,x2:l,y2:i}=O(e),a=0;V(s.current.canvas,t,{x:n,y:r})?a=1:V(s.current.canvas,t,{x:l,y:i})&&(a=2),p.current={type:0,data:{type:a,x1:t.clientX,y1:t.clientY,x2:t.clientX,y2:t.clientY},source:e},c.select(e)},[s,b,c]),S=(0,i.useCallback)(e=>{if(!v||x.current||!s.current)return;let{left:t,top:n}=s.current.canvas.getBoundingClientRect();x.current={name:"Arrow",type:1,data:{size:u,color:d,x1:e.clientX-t,y1:e.clientY-n,x2:e.clientX-t,y2:e.clientY-n},editHistory:[],draw:q,isHit:F}},[v,d,u,s]),j=(0,i.useCallback)(e=>{if(v&&s.current){if(p.current)p.current.data.x2=e.clientX,p.current.data.y2=e.clientY,a.top!==p.current?(p.current.source.editHistory.push(p.current),c.push(p.current)):c.set(a);else if(x.current){let{left:t,top:n}=s.current.canvas.getBoundingClientRect();x.current.data.x2=e.clientX-t,x.current.data.y2=e.clientY-n,a.top!==x.current?c.push(x.current):c.set(a)}}},[v,a,s,c]),R=(0,i.useCallback)(()=>{v&&(x.current&&c.clearSelect(),x.current=null,p.current=null)},[v,c]);return A(k),M(S),X(j),Y(R),(0,l.jsx)(E,{title:e.operation_arrow_title,icon:"icon-arrow",checked:v,onClick:C,option:(0,l.jsx)(N,{size:u,color:d,onSizeChange:o,onColorChange:f})})},function(){let e=h(),[,t]=y(),[n,r]=g(),a=w(),[c,s]=m(),[u,o]=(0,i.useState)(3),[d,f]=(0,i.useState)("#ee5126"),x=(0,i.useRef)(null),p=(0,i.useRef)(null),v="Brush"===n,b=(0,i.useCallback)(()=>{r.set("Brush"),t.set("default")},[r,t]),C=(0,i.useCallback)(()=>{v||(b(),s.clearSelect())},[v,b,s]),k=(0,i.useCallback)((e,t)=>{"Brush"===e.name&&(b(),p.current={type:0,data:{x1:t.clientX,y1:t.clientY,x2:t.clientX,y2:t.clientY},source:e},s.select(e))},[b,s]),S=(0,i.useCallback)(e=>{if(!v||x.current||!a.current)return;let{left:t,top:n}=a.current.canvas.getBoundingClientRect();x.current={name:"Brush",type:1,data:{size:u,color:d,points:[{x:e.clientX-t,y:e.clientY-n}]},editHistory:[],draw:J,isHit:F}},[v,a,u,d]),j=(0,i.useCallback)(e=>{if(v&&a.current){if(p.current)p.current.data.x2=e.clientX,p.current.data.y2=e.clientY,c.top!==p.current?(p.current.source.editHistory.push(p.current),s.push(p.current)):s.set(c);else if(x.current){let{left:t,top:n}=a.current.canvas.getBoundingClientRect();x.current.data.points.push({x:e.clientX-t,y:e.clientY-n}),c.top!==x.current?s.push(x.current):s.set(c)}}},[v,c,a,s]),R=(0,i.useCallback)(()=>{v&&(x.current&&s.clearSelect(),x.current=null,p.current=null)},[v,s]);return A(k),M(S),X(j),Y(R),(0,l.jsx)(E,{title:e.operation_brush_title,icon:"icon-brush",checked:v,onClick:C,option:(0,l.jsx)(N,{size:u,color:d,onSizeChange:o,onColorChange:f})})},function(){let e=h(),[t,n]=m(),[r]=d(),[a,c]=g(),[,s]=y(),u=w(),[o,f]=(0,i.useState)(3),[x,p]=(0,i.useState)("#ee5126"),v=(0,i.useRef)(null),b=(0,i.useRef)(null),[C,k]=(0,i.useState)(null),[S,j]=(0,i.useState)(""),R="Text"===a,_=(0,i.useCallback)(()=>{c.set("Text"),s.set("default")},[c,s]),z=(0,i.useCallback)(()=>{R||(_(),n.clearSelect())},[R,_,n]),H=(0,i.useCallback)(e=>{v.current&&(v.current.data.size=L[e]),f(e)},[]),P=(0,i.useCallback)(e=>{v.current&&(v.current.data.color=e),p(e)},[]),B=(0,i.useCallback)(e=>{j(e),R&&v.current&&(v.current.data.text=e)},[R]),T=(0,i.useCallback)(()=>{v.current&&v.current.data.text&&n.push(v.current),v.current=null,j(""),k(null)},[n]),D=(0,i.useCallback)((e,t)=>{"Text"===e.name&&(_(),b.current={type:0,data:{x1:t.clientX,y1:t.clientY,x2:t.clientX,y2:t.clientY},source:e},n.select(e))},[_,n]),F=(0,i.useCallback)(e=>{if(!R||!u.current||v.current||!r)return;let{left:t,top:n}=u.current.canvas.getBoundingClientRect(),l=window.getComputedStyle(u.current.canvas).fontFamily,i=e.clientX-t,a=e.clientY-n;v.current={name:"Text",type:1,data:{size:L[o],color:x,fontFamily:l,x:i,y:a,text:""},editHistory:[],draw:W,isHit:I},k({x:e.clientX,y:e.clientY,maxWidth:r.width-i,maxHeight:r.height-a})},[R,o,x,r,u]),V=(0,i.useCallback)(e=>{R&&b.current&&(b.current.data.x2=e.clientX,b.current.data.y2=e.clientY,t.top!==b.current?(b.current.source.editHistory.push(b.current),n.push(b.current)):n.set(t))},[R,t,n]),J=(0,i.useCallback)(()=>{R&&(b.current=null)},[R]);return A(D),M(F),X(V),Y(J),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(E,{title:e.operation_text_title,icon:"icon-text",checked:R,onClick:z,option:(0,l.jsx)(N,{size:o,color:x,onSizeChange:H,onColorChange:P})}),R&&C&&(0,l.jsx)($,{x:C.x,y:C.y,maxWidth:C.maxWidth,maxHeight:C.maxHeight,size:L[o],color:x,value:S,onChange:B,onBlur:T})]})},function(){let e=h(),{image:t,width:n,height:r}=o(),[a,c]=g(),s=w(),[u,f]=m(),[x]=d(),[,p]=y(),[v,b]=(0,i.useState)(3),C=(0,i.useRef)(null),k=(0,i.useRef)(null),S="Mosaic"===a,j=(0,i.useCallback)(()=>{c.set("Mosaic"),p.set("crosshair")},[c,p]),R=(0,i.useCallback)(()=>{S||(j(),f.clearSelect())},[S,j,f]),P=(0,i.useCallback)(e=>{if(!S||k.current||!C.current||!s.current)return;let t=s.current.canvas.getBoundingClientRect(),n=e.clientX-t.x,r=e.clientY-t.y;k.current={name:"Mosaic",type:1,data:{size:2*v,tiles:[{x:n,y:r,color:z(n,r,C.current)}]},editHistory:[],draw:H}},[S,v,s]),N=(0,i.useCallback)(e=>{if(!S||!k.current||!s.current||!C.current)return;let t=s.current.canvas.getBoundingClientRect(),n=e.clientX-t.x,r=e.clientY-t.y,l=k.current.data.size,i=k.current.data.tiles,a=i[i.length-1];if(a){let e=a.x-n,t=a.y-r,c=Math.sqrt(e**2+t**2),s=-t/c,u=-e/c;for(;c>l;){let e=Math.floor(a.x+l*u),t=Math.floor(a.y+l*s);a={x:e,y:t,color:z(e,t,C.current)},i.push(a),c-=l}c>l/2&&i.push({x:n,y:r,color:z(n,r,C.current)})}else i.push({x:n,y:r,color:z(n,r,C.current)});u.top!==k.current?f.push(k.current):f.set(u)},[S,s,u,f]),B=(0,i.useCallback)(()=>{S&&(k.current=null)},[S]);return M(P),X(N),Y(B),(0,i.useEffect)(()=>{if(!x||!t||!S)return;let e=document.createElement("canvas"),l=e.getContext("2d");if(!l)return;e.width=x.width,e.height=x.height;let i=t.naturalWidth/n,a=t.naturalHeight/r;l.drawImage(t,x.x*i,x.y*a,x.width*i,x.height*a,0,0,x.width,x.height),C.current=l.getImageData(0,0,x.width,x.height)},[n,r,x,t,S]),(0,l.jsx)(E,{title:e.operation_mosaic_title,icon:"icon-mosaic",checked:S,onClick:R,option:(0,l.jsx)(_,{value:v,onChange:b})})},"|",function(){let e=h(),[t,n]=m(),r=(0,i.useCallback)(()=>{n.undo()},[n]);return(0,l.jsx)(E,{title:e.operation_undo_title,icon:"icon-undo",disabled:-1===t.index,onClick:r})},function(){let e=h(),[t,n]=m(),r=(0,i.useCallback)(()=>{n.redo()},[n]);return(0,l.jsx)(E,{title:e.operation_redo_title,icon:"icon-redo",disabled:!t.stack.length||t.stack.length-1===t.index,onClick:r})},"|",function(){let{image:e,width:t,height:n,history:r,bounds:c,lang:s}=o(),u=w(),[,d]=m(),h=k(),f=S(),x=(0,i.useCallback)(()=>{d.clearSelect(),setTimeout(()=>{u.current&&e&&c&&a({image:e,width:t,height:n,history:r,bounds:c}).then(e=>{h("onSave",e,c),f()})})},[u,d,e,t,n,r,c,h,f]);return(0,l.jsx)(E,{title:s.operation_save_title,icon:"icon-save",onClick:x})},function(){let e=k(),t=S(),n=h(),r=(0,i.useCallback)(()=>{e("onCancel"),t()},[e,t]);return(0,l.jsx)(E,{title:n.operation_cancel_title,icon:"icon-cancel",onClick:r})},function(){let{image:e,width:t,height:n,history:r,bounds:c,lang:s}=o(),u=w(),[,d]=m(),h=k(),f=S(),x=(0,i.useCallback)(()=>{d.clearSelect(),setTimeout(()=>{u.current&&e&&c&&a({image:e,width:t,height:n,history:r,bounds:c}).then(e=>{h("onOk",e,c),f()})})},[u,d,e,t,n,r,c,h,f]);return(0,l.jsx)(E,{title:s.operation_ok_title,icon:"icon-ok",onClick:x})}],ee=i.createContext(null),et=(0,i.memo)(function(){let{width:e,height:t}=o(),[n]=d(),[r,a]=(0,i.useState)(null),[c,s]=(0,i.useState)(null),u=(0,i.useRef)(null),h=(0,i.useCallback)(e=>{e.stopPropagation()},[]),f=(0,i.useCallback)(e=>{e.preventDefault(),e.stopPropagation()},[]);return((0,i.useEffect)(()=>{if(!n||!u.current)return;let l=u.current.getBoundingClientRect(),i=n.x+n.width-l.width,o=n.y+n.height+10;i<0&&(i=0),i>e-l.width&&(i=e-l.width),o>t-l.height&&(o=t-l.height-10),(!c||Math.abs(c.x-i)>1||Math.abs(c.y-o)>1)&&s({x:i,y:o}),(!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)&&a({x:l.x,y:l.y,width:l.width,height:l.height})}),n)?(0,l.jsx)(ee.Provider,{value:r,children:(0,l.jsx)("div",{ref:u,className:"screenshots-operations",style:{visibility:c?"visible":"hidden",transform:`translate(${(null==c?void 0:c.x)??0}px, ${(null==c?void 0:c.y)??0}px)`},onDoubleClick:h,onContextMenu:f,children:(0,l.jsx)("div",{className:"screenshots-operations-buttons",children:Z.map((e,t)=>"|"===e?(0,l.jsx)("div",{className:"screenshots-operations-divider"},t):(0,l.jsx)(e,{},t))})})}):null});function en(e){let{url:t,width:n,height:r,lang:u,className:o,...d}=e,h=function(e){let[t,n]=(0,i.useState)(null);return(0,i.useEffect)(()=>{if(n(null),null==e)return;let t=document.createElement("img"),r=()=>n(t),l=()=>n(null);return t.addEventListener("load",r),t.addEventListener("error",l),t.src=e,()=>{t.removeEventListener("load",r),t.removeEventListener("error",l)}},[e]),t}(t),f=(0,i.useRef)(null),y=(0,i.useRef)({}),[p,m]=(0,i.useState)({index:-1,stack:[]}),[g,v]=(0,i.useState)(null),[b,k]=(0,i.useState)("move"),[w,S]=(0,i.useState)(void 0),j={url:t,width:n,height:r,image:h,lang:{...c,...u},emiterRef:y,canvasContextRef:f,history:p,bounds:g,cursor:b,operation:w},R=(0,i.useCallback)(function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];let l=d[e];"function"==typeof l&&l(...n)},[d]),E=["screenshots"];o&&E.push(o);let _=()=>{y.current={},m({index:-1,stack:[]}),v(null),k("move"),S(void 0)},M=(0,i.useCallback)(async e=>{if(0===e.button&&h)if(g&&f.current)a({image:h,width:n,height:r,history:p,bounds:g}).then(e=>{R("onOk",e,g),_()});else{let e={x:0,y:0,width:n,height:r};a({image:h,width:n,height:r,history:p,bounds:e}).then(t=>{R("onOk",t,e),_()})}},[h,p,g,n,r,R]),X=(0,i.useCallback)(e=>{2===e.button&&(e.preventDefault(),R("onCancel"),_())},[R]);return(0,i.useLayoutEffect)(()=>{_()},[t]),(0,l.jsx)(s.Provider,{value:{store:j,dispatcher:{call:R,setHistory:m,setBounds:v,setCursor:k,setOperation:S}},children:(0,l.jsxs)("div",{className:E.join(" "),style:{width:n,height:r},onDoubleClick:M,onContextMenu:X,children:[(0,l.jsx)(x,{}),(0,l.jsx)(C,{ref:f}),(0,l.jsx)(et,{})]})})}}}]);

package/dist/static/js/electron.1c6ab61b.js ADDED Viewed

@@ -0,0 +1 @@

+ (()=>{"use strict";var e,r,n,t,s={893(e,r,n){var t=n(723),s=n(155),o=n(997),i=n(892);o.createRoot(document.getElementById("root")).render((0,t.jsx)(s.StrictMode,{children:(0,t.jsx)(function(){let[e,r]=(0,s.useState)(void 0),[n,o]=(0,s.useState)(window.innerWidth),[a,c]=(0,s.useState)(window.innerHeight),[d,w]=(0,s.useState)(void 0),[u,h]=(0,s.useState)(void 0),l=(0,s.useCallback)(async(e,r)=>{d&&e&&window.screenshots.save(await e.arrayBuffer(),{bounds:r,display:d})},[d]),f=(0,s.useCallback)(()=>{window.screenshots.cancel()},[]),v=(0,s.useCallback)(async(e,r)=>{d&&e&&window.screenshots.ok(await e.arrayBuffer(),{bounds:r,display:d})},[d]);return(0,s.useEffect)(()=>{let e=e=>{h(e)},n=(e,n)=>{w(e),r(n)},t=()=>{r(void 0),w(void 0),requestAnimationFrame(()=>window.screenshots.reset())};return window.screenshots.on("setLang",e),window.screenshots.on("capture",n),window.screenshots.on("reset",t),window.screenshots.ready(),()=>{window.screenshots.off("capture",n),window.screenshots.off("setLang",e),window.screenshots.off("reset",t)}},[]),(0,s.useEffect)(()=>{let e=()=>{o(window.innerWidth),c(window.innerHeight)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[f]),(0,t.jsx)("div",{className:"body",children:(0,t.jsx)(i.A,{url:e,width:n,height:a,lang:u,onSave:l,onCancel:f,onOk:v})})},{})}))}},o={};function i(e){var r=o[e];if(void 0!==r)return r.exports;var n=o[e]={exports:{}};return s[e](n,n.exports,i),n.exports}i.m=s,i.d=(e,r)=>{for(var n in r)i.o(r,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},i.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),e=[],i.O=(r,n,t,s)=>{if(n){s=s||0;for(var o=e.length;o>0&&e[o-1][2]>s;o--)e[o]=e[o-1];e[o]=[n,t,s];return}for(var a=1/0,o=0;o<e.length;o++){for(var[n,t,s]=e[o],c=!0,d=0;d<n.length;d++)(!1&s||a>=s)&&Object.keys(i.O).every(e=>i.O[e](n[d]))?n.splice(d--,1):(c=!1,s<a&&(a=s));if(c){e.splice(o--,1);var w=t();void 0!==w&&(r=w)}}return r},r={18:0},i.O.j=e=>0===r[e],n=(e,n)=>{var t,s,[o,a,c]=n,d=0;if(o.some(e=>0!==r[e])){for(t in a)i.o(a,t)&&(i.m[t]=a[t]);if(c)var w=c(i)}for(e&&e(n);d<o.length;d++)s=o[d],i.o(r,s)&&r[s]&&r[s][0](),r[s]=0;return i.O(w)},(t=self.webpackChunkreact_screenshots=self.webpackChunkreact_screenshots||[]).forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t));var a=i.O(void 0,["783","589"],()=>i(893));a=i.O(a)})();

package/dist/static/js/index.fbe72af7.js ADDED Viewed

@@ -0,0 +1 @@

+ (()=>{"use strict";var e,o,r,n,t={143(e,o,r){var n=r(723),t=r(155),l=r(997),a=r(892);let c=r.p+"static/image/image.1ca17a04.jpg";l.createRoot(document.getElementById("root")).render((0,n.jsx)(t.StrictMode,{children:(0,n.jsx)(function(){let e=(0,t.useCallback)((e,o)=>{if(console.log("save",e,o),e){let o=URL.createObjectURL(e);console.log(o),window.open(o)}},[]),o=(0,t.useCallback)(()=>{console.log("cancel")},[]),r=(0,t.useCallback)((e,o)=>{if(console.log("ok",e,o),e){let o=URL.createObjectURL(e);console.log(o),window.open(o)}},[]);return(0,n.jsx)("div",{className:"body",children:(0,n.jsx)(a.A,{url:c,width:window.innerWidth,height:window.innerHeight,lang:{operation_rectangle_title:"Rectangle"},onSave:e,onCancel:o,onOk:r})})},{})}))}},l={};function a(e){var o=l[e];if(void 0!==o)return o.exports;var r=l[e]={exports:{}};return t[e](r,r.exports,a),r.exports}a.m=t,a.d=(e,o)=>{for(var r in o)a.o(o,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},a.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),e=[],a.O=(o,r,n,t)=>{if(r){t=t||0;for(var l=e.length;l>0&&e[l-1][2]>t;l--)e[l]=e[l-1];e[l]=[r,n,t];return}for(var c=1/0,l=0;l<e.length;l++){for(var[r,n,t]=e[l],i=!0,s=0;s<r.length;s++)(!1&t||c>=t)&&Object.keys(a.O).every(e=>a.O[e](r[s]))?r.splice(s--,1):(i=!1,t<c&&(c=t));if(i){e.splice(l--,1);var d=n();void 0!==d&&(o=d)}}return o},a.p="./",o={410:0},a.O.j=e=>0===o[e],r=(e,r)=>{var n,t,[l,c,i]=r,s=0;if(l.some(e=>0!==o[e])){for(n in c)a.o(c,n)&&(a.m[n]=c[n]);if(i)var d=i(a)}for(e&&e(r);s<l.length;s++)t=l[s],a.o(o,t)&&o[t]&&o[t][0](),o[t]=0;return a.O(d)},(n=self.webpackChunkreact_screenshots=self.webpackChunkreact_screenshots||[]).forEach(r.bind(null,0)),n.push=r.bind(null,n.push.bind(n));var c=a.O(void 0,["783","589"],()=>a(143));c=a.O(c)})();