zkqh-canvas-select-one 2.32.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 - present heylight
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,288 @@
+# canvas-select
+
+一个用于图片标注的 javascript 库，基于 canvas，简单轻量，支持矩形、多边形、点、折线、圆形、网格、画笔、橡皮擦。
+
+[![NPM version](https://img.shields.io/npm/v/canvas-select.svg?style=flat)](https://npmjs.org/package/canvas-select)
+[![NPM downloads](http://img.shields.io/npm/dm/canvas-select.svg?style=flat)](https://npmjs.org/package/canvas-select)
+
+查看示例 👉 [demo](https://codepen.io/heylight/pen/VwbQLje)
+
+![图例](https://cdn.jsdelivr.net/npm/@heylight/cdn@%5E1/img/demo.png)
+
+## ✨ 特性 (Features)
+
+- **多种标注类型**：支持矩形、多边形、点、折线、圆形、网格、画笔及橡皮擦标注。
+- **交互友好**：支持拖拽画布、缩放画布、拖动形状。
+- **灵活编辑**：支持控制点编辑，方便调整标注细节。
+- **样式自定义**：支持全局样式设置及单个形状的个性化样式设置。
+- **标签管理**：支持为标注添加和编辑标签。
+- **跨平台兼容**：良好支持桌面端和移动端设备。
+- **唯一标识**：每个形状拥有唯一的 UUID，若未提供则自动生成。
+
+## 🚀 安装 (Installation)
+
+您可以通过以下任一方式将 `canvas-select` 集成到您的项目中：
+
+### 通过 CDN (UMD)
+
+直接在 HTML 文件中引入：
+
+```html
+<script src="https://unpkg.com/canvas-select@^2/lib/canvas-select.min.js"></script>
+```
+
+### 通过 npm/yarn
+
+```bash
+npm install canvas-select --save
+# 或者
+yarn add canvas-select
+```
+
+## 🛠️ 使用方法 (Usage)
+
+### 1. HTML 结构
+
+在您的 HTML 文件中准备一个 `<canvas>` 元素：
+
+```html
+<canvas class="container"></canvas>
+```
+
+### 2. 初始化实例
+
+确保在 DOM 加载完成后初始化 `CanvasSelect` 实例。
+
+```javascript
+// 等待挂载节点就绪
+const instance = new CanvasSelect(".container", "/path/to/your/image.jpg");
+
+// 或者先创建实例，后设置图片
+// const instance = new CanvasSelect('.container');
+// instance.setImage('/path/to/your/image.jpg');
+```
+
+### 3. 加载标注数据 (可选)
+
+如果您有已存在的标注数据，可以使用 `setData` 方法加载：
+
+```javascript
+const initialData = [
+  {
+    label: "rectangle",
+    labelFillStyle: "#f00",
+    textFillStyle: "#fff",
+    coor: [
+      [184, 183],
+      [275, 238],
+    ], // 必需
+    type: 1, // 必需 (1: 矩形)
+  },
+  {
+    label: "polygon",
+    coor: [
+      [135, 291],
+      [129, 319],
+      [146, 346],
+      [174, 365],
+      [214, 362],
+      [196, 337],
+      [161, 288],
+    ], // 必需
+    type: 2, // 必需 (2: 多边形)
+  },
+  {
+    label: "dot",
+    coor: [345, 406], // 必需
+    type: 3, // 必需 (3: 点)
+  },
+  {
+    label: "line",
+    coor: [
+      [470, 155],
+      [490, 230],
+      [493, 298],
+    ], // 必需
+    type: 4, // 必需 (4: 折线)
+  },
+  {
+    label: "circle",
+    coor: [369, 197], // 必需
+    radius: 38, // 必需
+    type: 5, // 必需 (5: 圆形)
+  },
+  {
+    label: "网格",
+    coor: [
+      [419, 40],
+      [539, 101],
+    ],
+    type: 6, // (6: 网格)
+    row: 3,
+    col: 2,
+    selected: [4],
+  },
+  {
+    label: "画笔",
+    coor: [
+      [100, 100],
+      [105, 102],
+      [110, 105],
+      [115, 108],
+      [120, 110],
+    ], // 必需
+    type: 7, // 必需 (7: 画笔)
+    brushSize: 3,
+    brushStokeStyle: "#ff0000",
+  },
+  {
+    label: "橡皮擦",
+    coor: [
+      [200, 200],
+      [205, 202],
+      [210, 205],
+      [215, 208],
+    ], // 必需
+    type: 8, // 必需 (8: 橡皮擦)
+    eraserSize: 15,
+  },
+];
+instance.setData(initialData);
+```
+
+### 4. 创建新的标注
+
+通过设置 `instance.createType` 属性来指定要创建的标注类型：
+
+- `0`: 不创建 (默认值，此时为画布选择模式)
+- `1`: 创建矩形
+- `2`: 创建多边形
+- `3`: 创建点
+- `4`: 创建折线
+- `5`: 创建圆形
+- `6`: 创建网格
+- `7`: 创建画笔
+- `8`: 创建橡皮擦
+- `9`: 创建椭圆
+
+```javascript
+instance.createType = 1; // 准备创建矩形
+```
+
+**操作指南：**
+
+- **矩形**：按住鼠标左键拖动完成创建。
+- **多边形/折线**：鼠标左键单击添加点，再次点击起始点闭合（多边形）或双击完成创建。按 `Escape` 键退出创建，按 `Backspace` 键删除上一个点。
+- **点**：鼠标左键单击完成创建。
+- **圆**：按住鼠标左键拖动，确定圆心和半径后松开完成创建。
+- **椭圆**：按住鼠标左键拖动，确定椭圆中心和两个半径后松开完成创建。
+- **网格**：鼠标右键点击目标区域，在弹出的提示框中输入行列数。双击网格单元格进行选中/取消选中。
+- **画笔**：按住鼠标左键并拖动绘制自由线条，松开完成创建。
+- **橡皮擦**：按住鼠标左键并拖动进行擦除操作，松开完成创建。
+
+### 5. 画布与形状交互
+
+- **拖动画布**：按住鼠标右键并拖动。
+- **拖动形状**：拖动选中的形状。
+- **缩放画布**：使用鼠标滚轮进行缩放 (可通过 `scrollZoom` 属性控制是否启用)。
+- **删除形状**：选中一个形状后，按 `Backspace` 键删除。
+
+### 6. 事件监听
+
+监听实例事件以获取标注过程中的信息：
+
+```javascript
+instance.on("select", (selectedShapeInfo) => {
+  console.log("选中了形状:", selectedShapeInfo);
+  // 可以修改选中形状的属性，例如：
+  // selectedShapeInfo.label = "新标签";
+  // selectedShapeInfo.fillStyle = "#00ff00"; // 修改填充色
+  // 修改后需要调用 update 方法更新视图
+  // instance.update();
+});
+
+instance.on("updated", (allShapesData) => {
+  console.log("画布数据已更新:", allShapesData);
+  // allShapesData 即为 instance.dataset 的内容
+});
+```
+
+## ⚠️ 注意事项 (Important Notes)
+
+1. **Canvas 样式**：不要在 `<canvas>` 标签上直接设置 `style` 属性来定义宽高，推荐使用 CSS 类或通过 JavaScript 设置其 `width` 和 `height` 属性。
+2. **框架集成**：如果您在 Vue, React, Angular 等框架中使用本库，请确保在组件的生命周期钩子函数（例如 `mounted` 或 `useEffect`）中，即 DOM 元素实际可用之后，再创建 `CanvasSelect` 实例。
+
+## 📚 API 参考 (API Reference)
+
+对实例属性的任何修改，都需要调用 `instance.update()` 方法来更新画布视图。
+
+### 实例属性 (Instance Properties)
+
+| 属性名称                |   类型    |          默认值          | 单个形状属性修改 | 说明                                                                        |
+| ----------------------- | :-------: | :----------------------: | :--------------: | :-------------------------------------------------------------------------- |
+| `createType`            | `number`  |           `0`            |                  | `0` 不创建 (拖拽)，`1` 矩形，`2` 多边形，`3` 点，`4` 折线，`5` 圆，`6` 网格，`7` 画笔，`8` 橡皮擦，`9` 椭圆 |
+| `lock`                  | `boolean` |         `false`          |                  | 锁定画布，禁止所有交互                                                      |
+| `readonly`              | `boolean` |         `false`          |                  | 仅查看模式，禁止编辑                                                        |
+| `scrollZoom`            | `boolean` |          `true`          |                  | 是否允许鼠标滚轮缩放画布                                                    |
+| `showCross`            | `boolean` |          `false`          |                  | 是否展示十字坐标线                                                             |
+| `MIN_WIDTH`             | `number`  |           `10`           |                  | 矩形最小宽度                                                                |
+| `MIN_HEIGHT`            | `number`  |           `10`           |                  | 矩形最小高度                                                                |
+| `MIN_RADIUS`            | `number`  |           `5`            |                  | 圆形最小半径                                                                |
+| `strokeStyle`           | `string`  |          `#0f0`          |       支持       | 形状边框颜色                                                                |
+| `lineWidth`             | `number`  |           `1`            |       支持       | 形状边框宽度                                                                |
+| `fillStyle`             | `string`  |  `rgba(0, 0, 255,0.1)`   |       支持       | 形状填充颜色                                                                |
+| `activeStrokeStyle`     | `string`  |          `#f00`          |                  | 选中形状的边框颜色                                                          |
+| `activeFillStyle`       | `string`  |          `#f00`          |                  | 选中形状的填充颜色 (通常与 `activeStrokeStyle` 一致以高亮显示)              |
+| `ctrlStrokeStyle`       | `string`  |          `#000`          |                  | 控制点边框颜色                                                              |
+| `ctrlFillStyle`         | `string`  |          `#fff`          |                  | 控制点填充颜色                                                              |
+| `ctrlRadius`            | `number`  |           `3`            |                  | 控制点半径                                                                  |
+| `showRotation`          | `boolean` |           `false`        |        支持       | 启用矩形旋转控制                                                          |
+| `hide`                  | `boolean` |         `false`          |       支持       | 是否在画布中隐藏指定标注                                                    |
+| `label`                 | `string`  |           `无`           |       支持       | 标签名称                                                                    |
+| `hideLabel`             | `boolean` |         `false`          |       支持       | 是否隐藏标签名称                                                            |
+| `labelUp`               | `boolean` |         `false`          |       支持       | 标签是否显示在形状上方                                                      |
+| `labelFillStyle`        | `string`  |          `#fff`          |       支持       | 标签背景填充颜色                                                            |
+| `labelFont`             | `string`  |    `10px sans-serif`     |       支持       | 标签字体样式                                                                |
+| `textFillStyle`         | `string`  |          `#000`          |       支持       | 标签文字颜色                                                                |
+| `labelMaxLen`           | `number`  |           `10`           |                  | 标签字符最大显示数量，超出部分将用 `...` 表示                               |
+| `alpha`                 | `boolean` |          `true`          |                  | 设置为 `false` 可以帮助浏览器进行内部优化 (例如，如果不需要透明度)          |
+| `focusMode`             | `boolean` |         `false`          |                  | 专注模式，开启后只有活动状态的标注会完整显示，其他标注可能半透明或隐藏      |
+| `gridMenuEnable`        | `boolean` |          `true`          |                  | 网格标注时是否启用右键 `prompt` 输入框，可关闭以使用自定义右键菜单          |
+| `gridSelectedFillStyle` | `string`  | `rgba(255, 255, 0, 0.6)` |       支持       | 网格标注中选中单元格的填充颜色                                              |
+| `brushSize`             | `number`  |           `2`            |       支持       | 画笔线条粗细                                                                |
+| `brushStokeStyle`       | `string`  |          `#000`          |       支持       | 画笔线条颜色                                                                |
+| `eraserSize`            | `number`  |           `10`           |                  | 橡皮擦大小                                                                  |
+| `crossStroke`           | `string`  | `#ff0`                   |                          | 十字标尺颜色                                            |
+| `isMagnifierVisible`           | `boolean`  | `false`                   |                          | 启用放大镜色                                            |
+
+### 实例方法 (Instance Methods)
+
+| 方法名称                  |      参数类型      |                    说明                     |
+| ------------------------- | :----------------: | :-----------------------------------------: |
+| `setImage(url)`           |      `string`      |             添加或切换背景图片              |
+| `setData(data)`           |   `Array<Shape>`   |      加载初始标注数据，会覆盖现有数据       |
+| `setScale(zoomIn)`        |     `boolean`      |      `true` 放大画布，`false` 缩小画布      |
+| `fitZoom()`               |       `void`       | 适配图片到画布使其完整可见 (类似 `contain`) |
+| `update()`                |       `void`       |   更新画布，修改实例属性后必须调用此方法    |
+| `deleteByIndex(index)`    |      `number`      |            根据索引删除指定形状             |
+| `deleteByUuid(uuid)`      |      `string`      |           根据 UUID 删除指定形状            |
+| `setFocusMode(enable)`    |     `boolean`      |             设置或取消专注模式              |
+| `on(eventName, callback)` | `string, Function` |                监听实例事件                 |
+| `resize()`                |       `void`       |  当 Canvas 尺寸变化时，调用此方法重新计算   |
+| `clearBrush()`            |       `void`       |  清除画笔   |
+| `destroy()`               |       `void`       |             销毁实例，释放资源              |
+
+### 事件 (Events)
+
+| 事件名称  |        回调参数         |                                 说明                                  |
+| --------- | :---------------------: | :-------------------------------------------------------------------: |
+| `select`  |   `info` (选中的数据)   |                       当用户选择一个标注时触发                        |
+| `add`     |   `info` (添加的数据)   |                   当一个新的标注被添加到画布时触发                    |
+| `delete`  |   `info` (删除的数据)   |                    当一个标注从画布上被删除时触发                     |
+| `updated` | `result` (全部标注结果) | 当画布内容更新后触发 (例如，创建、删除、修改标注或调用 `update()` 后) |
+| `load`    | `img` (图片元素或链接)  |                        背景图片加载完成时触发                         |
+| `warn`    |    `msg` (警告信息)     |                  当发生非严重错误或有警告信息时触发                   |
+
+## 温馨提示 (Tips)
+
+本项目的开源协议旨在促进技术共享与协作创新。您可以在遵守协议基本要求（包含版权声明）的前提下，自由地进行二次开发和商业应用。我们相信开放的生态能为社区带来更大价值。

package/lib/EventBus.d.ts

@@ -0,0 +1,21 @@
+export default class EventBus {
+    private _eventTree;
+    /**
+   * 注册事件
+   * @param eventName 事件名称
+   * @param cb 回调方法
+   */
+    on(eventName: string, cb: Function): void;
+    /**
+     * 触发事件
+     * @param eventName 事件名称
+     * @param payload 传递参数
+     */
+    emit(eventName: string, ...payload: any): void;
+    /**
+     * 注销事件
+     * @param eventName 事件名称
+     * @param cb 传递参数
+     */
+    off(eventName: string, cb: Function): void;
+}

package/lib/canvas-select.esm.js

@@ -0,0 +1,8 @@
+/*!
+ * zkqh-canvas-select-one v2.32.3
+ * 一个用于图片标注的javascript库，基于canvas，简单轻量，支持矩形、多边形、点、折线、圆形、网格、画笔、橡皮擦
+ * (c) 2025 heylight
+ * Released under the MIT License.
+ */
+var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};function e(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function s(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(s.prototype=i.prototype,new s)}var i=function(){return i=Object.assign||function(t){for(var e,i=1,s=arguments.length;i<s;i++)for(var a in e=arguments[i])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},i.apply(this,arguments)};function s(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var s,a,o=i.call(t),n=[];try{for(;(void 0===e||e-- >0)&&!(s=o.next()).done;)n.push(s.value)}catch(t){a={error:t}}finally{try{s&&!s.done&&(i=o.return)&&i.call(o)}finally{if(a)throw a.error}}return n}"function"==typeof SuppressedError&&SuppressedError;var a,o=function(t,e){this.label="",this.coor=[],this.active=!1,this.creating=!1,this.dragging=!1,this.uuid=function(){for(var t=[],e="0123456789abcdef",i=0;i<36;i++){var s=Math.floor(16*Math.random());t[i]=e.slice(s,s+1)}t[14]="4";var a=3&t[19]|8;return t[19]=e.slice(a,a+1),t[8]=t[13]=t[18]=t[23]="-",t.join("")}(),this.index=e,Object.assign(this,t)},n=function(t){function i(e,i,s){var a,o,n,r,h=t.call(this,e,i)||this;return h.type=1,h.rotation=0,h.lineWidth=null!==(a=e.lineWidth)&&void 0!==a?a:s.lineWidth,h.fillStyle=null!==(o=e.fillStyle)&&void 0!==o?o:s.fillStyle,h.strokeStyle=null!==(n=e.strokeStyle)&&void 0!==n?n:s.strokeStyle,h.showRotation=null!==(r=e.showRotation)&&void 0!==r?r:s.showRotation,h}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){var t=this,e=s(this.coor,2),i=s(e[0],2),a=i[0],o=i[1],n=s(e[1],2),r=n[0],h=n[1],c=(a+r)/2,l=(o+h)/2,d=r-a,u=h-o,v=[[a,o],[a+d/2,o],[r,o],[r,o+u/2],[r,h],[a+d/2,h],[a,h],[a,o+u/2]];return this.showRotation&&v.push([c,o-20,"green"]),0===this.rotation?v:v.map(function(e){var i=s(e,2),a=i[0],o=i[1],n=a-c,r=o-l,h=n*Math.cos(t.rotation)-r*Math.sin(t.rotation),d=n*Math.sin(t.rotation)+r*Math.cos(t.rotation);return[h+c,d+l]})},enumerable:!1,configurable:!0}),Object.defineProperty(i.prototype,"center",{get:function(){var t=s(this.coor,2),e=s(t[0],2),i=e[0],a=e[1],o=s(t[1],2);return[(i+o[0])/2,(a+o[1])/2]},enumerable:!1,configurable:!0}),i}(o),r=function(t){function i(e,i,s){var a,o,n=t.call(this,e,i)||this;return n.type=2,n.fillStyle=null!==(a=e.fillStyle)&&void 0!==a?a:s.fillStyle,n.strokeStyle=null!==(o=e.strokeStyle)&&void 0!==o?o:s.strokeStyle,n}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){return this.coor.length>2?this.coor:[]},enumerable:!1,configurable:!0}),i}(o),h=function(t){function i(e,i,s){var a,o,n=t.call(this,e,i)||this;return n.type=3,n.fillStyle=null!==(a=e.fillStyle)&&void 0!==a?a:s.fillStyle,n.strokeStyle=null!==(o=e.strokeStyle)&&void 0!==o?o:s.strokeStyle,n}return e(i,t),i}(o),c=function(){function t(){this._eventTree={}}return t.prototype.on=function(t,e){var i=this._eventTree[t];Array.isArray(i)?i.push(e):this._eventTree[t]=[e]},t.prototype.emit=function(t){for(var e=[],i=1;i<arguments.length;i++)e[i-1]=arguments[i];var a=this._eventTree[t];Array.isArray(a)&&a.forEach(function(t){return t.apply(void 0,function(t,e,i){if(i||2===arguments.length)for(var s,a=0,o=e.length;a<o;a++)!s&&a in e||(s||(s=Array.prototype.slice.call(e,0,a)),s[a]=e[a]);return t.concat(s||Array.prototype.slice.call(e))}([],s(e),!1))})},t.prototype.off=function(t,e){var i=this._eventTree[t],s=i.find(function(t){return t===e});Array.isArray(i)&&s&&i.splice(s,1)},t}(),l=function(t){function i(e,i,s){var a,o=t.call(this,e,i)||this;return o.type=4,o.strokeStyle=null!==(a=e.strokeStyle)&&void 0!==a?a:s.strokeStyle,o}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){return this.coor.length>1?this.coor:[]},enumerable:!1,configurable:!0}),i}(o),d=function(t){function i(e,i,s){var a,o,n=t.call(this,e,i)||this;return n.type=5,n.radius=0,n.radius=e.radius||n.radius,n.fillStyle=null!==(a=e.fillStyle)&&void 0!==a?a:s.fillStyle,n.strokeStyle=null!==(o=e.strokeStyle)&&void 0!==o?o:s.strokeStyle,n}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){var t=s(this.coor,2),e=t[0],i=t[1];return[[e,i-this.radius],[e+this.radius,i],[e,i+this.radius],[e-this.radius,i]]},enumerable:!1,configurable:!0}),i}(o),u=function(t){function i(e,i,s){var a,o,n=t.call(this,e,i)||this;return n.type=6,n.row=1,n.col=1,n.selected=[],n.row=e.row>0?e.row:n.row,n.col=e.col>0?e.col:n.col,n.selected=Array.isArray(e.selected)?e.selected:[],n.fillStyle=null!==(a=e.fillStyle)&&void 0!==a?a:s.fillStyle,n.strokeStyle=null!==(o=e.strokeStyle)&&void 0!==o?o:s.strokeStyle,n}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){var t=s(this.coor,2),e=s(t[0],2),i=e[0],a=e[1],o=s(t[1],2),n=o[0],r=o[1];return[[i,a],[i+(n-i)/2,a],[n,a],[n,a+(r-a)/2],[n,r],[i+(n-i)/2,r],[i,r],[i,a+(r-a)/2]]},enumerable:!1,configurable:!0}),Object.defineProperty(i.prototype,"gridRects",{get:function(){for(var t=s(this.coor,2),e=s(t[0],2),i=e[0],a=e[1],o=s(t[1],2),r=o[0],h=o[1],c=this,l=c.row,d=c.col,u=c.strokeStyle,v=c.fillStyle,p=c.active,f=c.creating,y=c.lineWidth,g=(r-i)/this.col,S=(h-a)/this.row,I=[],m=0;m<l;m++)for(var b=0;b<d;b++){var x=[i+b*g,a+m*S],M=new n({coor:[x,[x[0]+g,x[1]+S]],strokeStyle:u,fillStyle:v,active:p,creating:f,lineWidth:y},m*d+b,{});I.push(M)}return I},enumerable:!1,configurable:!0}),i}(o),v="2.32.3",p=function(t){function i(e,i,s){var a,o,n=t.call(this,e,i)||this;return n.type=7,n.coor=[],n.brushSize=null!==(a=e.brushSize)&&void 0!==a?a:s.brushSize,n.brushStokeStyle=null!==(o=e.brushStokeStyle)&&void 0!==o?o:s.brushStokeStyle,n.coor=e.coor,n}return e(i,t),i}(o),f=function(t){function i(e,i,s){var a,o=t.call(this,e,i)||this;return o.type=8,o.coor=[],o.eraserSize=null!==(a=e.eraserSize)&&void 0!==a?a:s.eraserSize,o.coor=e.coor,o}return e(i,t),i}(o),y=function(t){function i(e,i,s){var a,o,n,r=t.call(this,e,i)||this;return r.type=9,r.radiusX=0,r.radiusY=0,r.rotation=0,r.radiusX=e.radiusX||r.radiusX,r.radiusY=e.radiusY||r.radiusY,r.rotation=e.rotation||r.rotation,r.fillStyle=null!==(a=e.fillStyle)&&void 0!==a?a:s.fillStyle,r.strokeStyle=null!==(o=e.strokeStyle)&&void 0!==o?o:s.strokeStyle,r.lineWidth=null!==(n=e.lineWidth)&&void 0!==n?n:s.lineWidth,r}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){var t=s(this.coor,2),e=t[0],i=t[1];return[[e,i-this.radiusY],[e+this.radiusX,i],[e,i+this.radiusY],[e-this.radiusX,i]]},enumerable:!1,configurable:!0}),Object.defineProperty(i.prototype,"boundingBox",{get:function(){var t=s(this.coor,2),e=t[0],i=t[1];return[[e-this.radiusX,i-this.radiusY],[e+this.radiusX,i+this.radiusY]]},enumerable:!1,configurable:!0}),i.prototype.isPointInEllipse=function(t,e){var i=s(this.coor,2),a=i[0],o=i[1];if(0!==this.rotation){var n,r,h=Math.cos(-this.rotation),c=Math.sin(-this.rotation),l=(n=t-a)*h-(r=e-o)*c,d=n*c+r*h;return l*l/(this.radiusX*this.radiusX)+d*d/(this.radiusY*this.radiusY)<=1}return(n=(t-a)/this.radiusX)*n+(r=(e-o)/this.radiusY)*r<=1},i}(o);!function(t){t[t.None=0]="None",t[t.Rect=1]="Rect",t[t.Polygon=2]="Polygon",t[t.Dot=3]="Dot",t[t.Line=4]="Line",t[t.Circle=5]="Circle",t[t.Grid=6]="Grid",t[t.Brush=7]="Brush",t[t.Eraser=8]="Eraser",t[t.Ellipse=9]="Ellipse"}(a||(a={}));var g=function(t){function o(e,i){var s=t.call(this)||this;s.version=v,s.lock=!1,s.readonly=!1,s.MIN_WIDTH=10,s.MIN_HEIGHT=10,s.MIN_RADIUS=5,s.MAX_POLYGON_POINTS=6,s.strokeStyle="#0f0",s.fillStyle="rgba(0, 0, 255, 0.1)",s.lineWidth=1,s.activeStrokeStyle="#f00",s.activeFillStyle="rgba(0, 0, 255, 0.1)",s.ctrlStrokeStyle="#000",s.ctrlFillStyle="#fff",s.ctrlRadius=3,s.hideLabel=!1,s.labelFillStyle="#fff",s.labelFont="10px sans-serif",s.textFillStyle="#000",s.labelMaxLen=10,s.WIDTH=0,s.maxPolygonPoint=6,s.HEIGHT=0,s.crossX=new l({},0,{}),s.crossY=new l({},1,{}),s.crossStroke="#ff0",s.showCross=!1,s.showRotation=!1,s.dataset=[],s.isMagnifierVisible=!1,s.magnifierPosition="auto",s.remmber=[],s.mouse=[0,0],s.remmberOrigin=[0,0],s.createType=a.None,s.ctrlIndex=-1,s.image=new Image,s.IMAGE_ORIGIN_WIDTH=0,s.IMAGE_WIDTH=0,s.IMAGE_ORIGIN_HEIGHT=0,s.IMAGE_HEIGHT=0,s.originX=0,s.originY=0,s.scaleStep=0,s.scrollZoom=!0,s.timer=null,s.dblTouch=300,s.dblTouchStore=0,s.alpha=!0,s.focusMode=!1,s.scaleTouchStore=0,s.isTouch2=!1,s.isMobile=navigator.userAgent.includes("Mobile"),s.labelUp=!1,s.isCtrlKey=!1,s.ctrlCode="ControlLeft",s.gridMenuEnable=!0,s.gridSelectedFillStyle="rgba(255, 255, 0, 0.6)",s.brushSize=20,s.brushStokeStyle="#f00",s.eraserSize=20,s.position=[0,0],s.handleLoad=s.handleLoad.bind(s),s.handleContextmenu=s.handleContextmenu.bind(s),s.handleMousewheel=s.handleMousewheel.bind(s),s.handleMouseDown=s.handleMouseDown.bind(s),s.handleMouseMove=s.handleMouseMove.bind(s),s.handleMouseUp=s.handleMouseUp.bind(s),s.handleDblclick=s.handleDblclick.bind(s),s.handleKeyup=s.handleKeyup.bind(s),s.handleKeydown=s.handleKeydown.bind(s);var o="string"==typeof e?document.querySelector(e):e;return o instanceof HTMLCanvasElement?(s.canvas=o,s.offScreen=document.createElement("canvas"),s.initSetting(),s.initEvents(),i&&s.setImage(i)):console.warn("HTMLCanvasElement is required!"),s.crossX.strokeStyle=s.crossStroke,s.crossY.strokeStyle=s.crossStroke,s}return e(o,t),Object.defineProperty(o.prototype,"activeShape",{get:function(){return this.dataset.find(function(t){return t.active})||{}},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"scale",{get:function(){return this.IMAGE_ORIGIN_WIDTH&&this.IMAGE_WIDTH?this.IMAGE_WIDTH/this.IMAGE_ORIGIN_WIDTH:1},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"imageMin",{get:function(){return Math.min(this.IMAGE_WIDTH,this.IMAGE_HEIGHT)},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"imageOriginMax",{get:function(){return Math.max(this.IMAGE_ORIGIN_WIDTH,this.IMAGE_ORIGIN_HEIGHT)},enumerable:!1,configurable:!0}),o.prototype.createMagnifierCanvas=function(){this.isMagnifierVisible&&(this.magnifierCanvas=this.magnifierCanvas||document.createElement("canvas"),this.magnifierCtx=this.magnifierCanvas&&this.magnifierCanvas.getContext("2d",{willReadFrequently:!0}),this.magnifierCanvas.style.position="fixed",this.magnifierCanvas.style.pointerEvents="none",this.magnifierCanvas.style.zIndex="1000",this.magnifierCanvas.style.border="1px solid black",this.magnifierCanvas.style.borderRadius="50%",this.magnifierCanvas.style.width="100px",this.magnifierCanvas.style.height="100px",document.body.appendChild(this.magnifierCanvas))},o.prototype.createMagnifier=function(t,e){this.magnifierCanvas?this.updateMagnifier(t,e):this.createMagnifierCanvas()},o.prototype.updateMagnifier=function(t,e){var i,a;if(this.canvas&&this.magnifierCanvas&&this.magnifierCtx){var o=100,n=window.devicePixelRatio||1;if(this.magnifierCanvas.width=o,this.magnifierCanvas.height=o,this.magnifierCtx.clearRect(0,0,o,o),this.magnifierPosition&&2===this.magnifierPosition.length){var r=s(this.magnifierPosition,2),h=r[0],c=r[1];this.magnifierCanvas.style.left="".concat(h,"px"),this.magnifierCanvas.style.top="".concat(c,"px")}else this.magnifierCanvas.style.left="".concat(t+10,"px"),this.magnifierCanvas.style.top="".concat(e+10,"px");var l=this.getImageDataFromCanvas(this.canvas,[t*n-50,e*n-50,o,o]),d=null===(i=this.magnifierCanvas.getContext("2d",{willReadFrequently:!0}))||void 0===i?void 0:i.createImageData(this.magnifierCanvas.width,this.magnifierCanvas.height);if(d&&l){for(var u=0,v=0;v<o;v+=1)for(var p=0;p<o;p+=1){for(var f=v;f<v+1;f++)for(var y=p;y<p+1;y++){var g=4*(f*o+y);d.data[g]=l.data[u],d.data[g+1]=l.data[u+1],d.data[g+2]=l.data[u+2],d.data[g+3]=l.data[u+3]}u+=4}null===(a=this.magnifierCanvas.getContext("2d",{willReadFrequently:!0}))||void 0===a||a.putImageData(d,0,0),this.magnifierCtx.strokeStyle="rgba(0, 0, 0, 0.5)",this.magnifierCtx.lineWidth=2,this.magnifierCtx.strokeRect(0,0,o,o)}}},o.prototype.destroyMagnifier=function(){this.magnifierCanvas&&(this.magnifierCanvas.remove(),this.magnifierCanvas=void 0,this.magnifierCtx=void 0)},o.prototype.getImageDataFromCanvas=function(t,e){var i=s(e,4),a=i[0],o=i[1],n=i[2],r=i[3],h=t.getContext("2d",{willReadFrequently:!0});return null==h?void 0:h.getImageData(a,o,n,r)},o.prototype.mergeEvent=function(t){var e,s,a=0,o=0,n=0,r=0;if(this.isMobile&&t.touches){var h=t.touches[0],c=h.clientX,l=h.clientY,d=t.target.getBoundingClientRect(),u=d.left,v=d.top;if(a=Math.round(c-u),o=Math.round(l-v),2===(null===(e=t.touches)||void 0===e?void 0:e.length)){var p=t.touches[1]||{},f=p.clientX,y=void 0===f?0:f,g=p.clientY,S=void 0===g?0:g;n=Math.round(Math.abs((y-c)/2+c)-u),r=Math.round(Math.abs((S-l)/2+l)-v)}else 1===(null===(s=t.touches)||void 0===s?void 0:s.length)&&(n=Math.round(c-u),r=Math.round(l-v))}else a=t.offsetX,o=t.offsetY;return i(i({},t),{mouseX:a,mouseY:o,mouseCX:n,mouseCY:r})},o.prototype.handleLoad=function(){this.emit("load",this.image.src),this.IMAGE_ORIGIN_WIDTH=this.IMAGE_WIDTH=this.image.width,this.IMAGE_ORIGIN_HEIGHT=this.IMAGE_HEIGHT=this.image.height,this.fitZoom()},o.prototype.handleContextmenu=function(t){t.preventDefault(),this.lock},o.prototype.handleMousewheel=function(t){if(t.preventDefault(),t.stopPropagation(),!this.lock&&this.scrollZoom){var e=this.mergeEvent(t),i=e.mouseX,s=e.mouseY;this.mouse=[i,s],this.setScale(t.deltaY<0,!0)}},o.prototype.handleMouseDown=function(t){var e,i,o,c=this;if(t.stopPropagation(),!this.lock){var v=this.mergeEvent(t),y=v.mouseX,g=v.mouseY,S=v.mouseCX,I=v.mouseCY,m=Math.round(y/this.scale),b=Math.round(g/this.scale);if(this.mouse=this.isMobile&&2===(null===(e=t.touches)||void 0===e?void 0:e.length)?[S,I]:[y,g],this.remmberOrigin=[y-this.originX,g-this.originY],!this.isMobile&&1===t.buttons||this.isMobile&&1===(null===(i=t.touches)||void 0===i?void 0:i.length)){var x=this.activeShape.ctrlsData||[];if(this.ctrlIndex=x.findIndex(function(t){return c.isPointInCircle(c.mouse,t,c.ctrlRadius)}),this.ctrlIndex>-1&&!this.readonly){var M=s(x[this.ctrlIndex],2),E=M[0],H=M[1];this.activeShape.type===a.Polygon&&this.activeShape.coor.length>2&&0===this.ctrlIndex&&this.handleDblclick(t),this.remmber=[[m-E,b-H]]}else if(this.isInBackground(t)){var w=Math.round(m-this.originX/this.scale),T=Math.round(b-this.originY/this.scale);if(this.activeShape.creating&&!this.readonly){if([a.Polygon,a.Line].includes(this.activeShape.type)){var G=s(this.activeShape.coor[this.activeShape.coor.length-1],2),k=G[0],C=G[1];k!==m&&C!==b&&(this.activeShape.coor.push([w,T]),this.activeShape.type===a.Polygon&&this.MAX_POLYGON_POINTS&&this.activeShape.coor.length>=this.MAX_POLYGON_POINTS&&(console.log("@13131"),this.handleDblclick(t)),this.activeShape.type===a.Line&&this.activeShape.coor.length>=2&&this.handleDblclick(t))}}else if(this.createType===a.None||this.readonly||this.isCtrlKey){var _=s(this.hitOnShape(this.mouse),2),D=_[0],P=_[1];if(D>-1&&P){if(P.dragging=!0,this.dataset.forEach(function(t,e){return t.active=e===D}),this.dataset.splice(D,1),this.dataset.push(P),!this.readonly)if(this.remmber=[],[a.Dot,a.Circle].includes(P.type)){var W=s(P.coor,2);k=W[0],C=W[1];this.remmber=[[m-k,b-C]]}else P.coor.forEach(function(t){c.remmber.push([m-t[0],b-t[1]])});this.emit("select",P)}else this.activeShape.active=!1,this.dataset.sort(function(t,e){return t.index-e.index}),this.emit("select",null)}else{var R=void 0,O=[w,T];switch(this.createType){case a.Rect:(R=new n({coor:[O,O]},this.dataset.length,this)).creating=!0;break;case a.Polygon:(R=new r({coor:[O]},this.dataset.length,this)).creating=!0;break;case a.Dot:R=new h({coor:O},this.dataset.length,this),this.emit("add",R);break;case a.Line:(R=new l({coor:[O]},this.dataset.length,this)).creating=!0;break;case a.Circle:R=new d({coor:O},this.dataset.length,this),console.log(R),R.creating=!0;break;case a.Grid:(R=new u({coor:[O,O]},this.dataset.length,this)).creating=!0;break;case a.Brush:(R=new p({coor:[O]},this.dataset.length,this)).creating=!0;break;case a.Eraser:(R=new f({coor:[O]},this.dataset.length,this)).creating=!0}R&&(this.dataset.forEach(function(t){t.active=!1}),R.active=!0,this.dataset.push(R))}this.update()}}else if(!this.isMobile&&2===t.buttons||this.isMobile&&3===(null===(o=t.touches)||void 0===o?void 0:o.length)&&!this.readonly){if([a.Grid].includes(this.activeShape.type)&&this.gridMenuEnable){var L=prompt("x 行 y 列 x,y",[this.activeShape.row,this.activeShape.col].join(","));if("string"==typeof L){var A=s(L.split(","),2),N=A[0],X=A[1];/^[1-9]\d*$/.test(N)&&/^[1-9]\d*$/.test(X)&&(this.activeShape.row=Number(N),this.activeShape.col=Number(X),this.update())}}this.emit("contextmenu",t)}}},o.prototype.handleMouseMove=function(t){var e,i,o,n;if(t.stopPropagation(),!this.lock){var r=this.mergeEvent(t),h=r.mouseX,c=r.mouseY,l=r.mouseCX,d=r.mouseCY,u=Math.round(h/this.scale),v=Math.round(c/this.scale);!this.isCtrlKey&&this.isInBackground(t)?(this.crossX.coor=[[u-this.originX/this.scale,0],[u-this.originX/this.scale,this.image.height]],this.crossY.coor=[[0,v-this.originY/this.scale],[this.image.width,v-this.originY/this.scale]]):(this.crossX.coor=[],this.crossY.coor=[]),this.mouse=this.isMobile&&2===(null===(e=t.touches)||void 0===e?void 0:e.length)?[l,d]:[h,c];var p=Math.round(u-this.originX/this.scale),f=Math.round(v-this.originY/this.scale);if(this.position=[p,f],(!this.isMobile&&1===t.buttons||this.isMobile&&1===(null===(i=t.touches)||void 0===i?void 0:i.length))&&this.activeShape.type){if(this.ctrlIndex>-1&&this.remmber.length&&(this.isInBackground(t)||this.activeShape.type===a.Circle)){var y=s(this.remmber,1),g=s(y[0],2),S=g[0],I=g[1];if([a.Rect,a.Grid].includes(this.activeShape.type))if(8===this.ctrlIndex){var m=s(this.activeShape.center,2),b=u-S-m[0],x=v-I-m[1];this.activeShape.rotation=Math.atan2(x,b)+Math.PI/2}else{var M=s(this.activeShape.coor,2),E=s(M[0],2),H=E[0],w=E[1],T=s(M[1],2),G=T[0],k=T[1],C=[];switch(this.ctrlIndex){case 0:C=[[u-S,v-I],[G,k]];break;case 1:C=[[H,v-I],[G,k]];break;case 2:C=[[H,v-I],[u-S,k]];break;case 3:C=[[H,w],[u-S,k]];break;case 4:C=[[H,w],[u-S,v-I]];break;case 5:C=[[H,w],[G,v-I]];break;case 6:C=[[u-S,w],[G,v-I]];break;case 7:C=[[u-S,w],[G,k]]}var _=s(C,2),D=s(_[0],2),P=D[0],W=D[1],R=s(_[1],2),O=R[0],L=R[1];(P<0||O<0||W<0||L<0||O>this.IMAGE_ORIGIN_WIDTH||L>this.IMAGE_ORIGIN_HEIGHT)&&(P<0&&(P=0),O<0&&(O=0),W<0&&(W=0),L<0&&(L=0),O>this.IMAGE_ORIGIN_WIDTH&&(O=this.IMAGE_ORIGIN_WIDTH),L>this.IMAGE_ORIGIN_HEIGHT&&(L=this.IMAGE_ORIGIN_HEIGHT)),O-P>=this.MIN_WIDTH&&L-W>=this.MIN_HEIGHT?this.activeShape.coor=[[P,W],[O,L]]:this.emit("warn","Width cannot be less than ".concat(this.MIN_WIDTH,",Height cannot be less than").concat(this.MIN_HEIGHT,"。"))}else if([a.Polygon,a.Line].includes(this.activeShape.type)){var A=[p,f];this.activeShape.coor.splice(this.ctrlIndex,1,A)}else if(this.activeShape.type===a.Circle){var N=Math.round(u-this.originX/this.scale)-this.activeShape.coor[0];N>=this.MIN_RADIUS&&(this.activeShape.radius=N)}if(this.isMagnifierVisible){var X=s(this.isMobile?[l,d]:[h,c],2),Y=X[0],F=X[1];this.createMagnifier(Y,F)}}else if(this.activeShape.dragging&&!this.readonly){if(this.isMagnifierVisible&&3===this.activeShape.type){var B=s(this.isMobile?[l,d]:[h,c],2);Y=B[0],F=B[1];this.createMagnifier(Y,F)}C=[];var j=!0,z=this.IMAGE_ORIGIN_WIDTH||this.WIDTH,K=this.IMAGE_ORIGIN_HEIGHT||this.HEIGHT;if([a.Dot,a.Circle].includes(this.activeShape.type)){var U=s(this.remmber[0],2),q=U[0];I=v-U[1];((S=u-q)<0||S>z||I<0||I>K)&&(j=!1),C=[S,I]}else for(var J=0;J<this.activeShape.coor.length;J++){var V=this.remmber[J];S=u-V[0],I=v-V[1];(S<0||S>z||I<0||I>K)&&(j=!1),C.push([S,I])}j&&(this.activeShape.coor=C)}else if(this.activeShape.creating&&this.isInBackground(t))if([a.Rect,a.Grid].includes(this.activeShape.type))this.activeShape.coor.splice(1,1,[p,f]);else if(this.activeShape.type===a.Circle){var Z=s(this.activeShape.coor,2),$=(H=Z[0],w=Z[1],Math.sqrt(Math.pow(H-p,2)+Math.pow(w-f,2)));this.activeShape.radius=$}else[a.Brush,a.Eraser].includes(this.activeShape.type)&&this.activeShape.coor.push([p,f]);this.update()}else if([a.Polygon,a.Line].includes(this.activeShape.type)&&this.activeShape.creating)this.update();else if(!this.isMobile&&2===t.buttons&&3===t.which||this.isMobile&&1===(null===(o=t.touches)||void 0===o?void 0:o.length)&&!this.isTouch2)this.originX=Math.round(h-this.remmberOrigin[0]),this.originY=Math.round(c-this.remmberOrigin[1]),this.update();else if(this.isMobile&&2===(null===(n=t.touches)||void 0===n?void 0:n.length)){this.isTouch2=!0;var Q=t.touches[0],tt=t.touches[1],et=this.scaleTouchStore;this.scaleTouchStore=Math.abs((tt.clientX-Q.clientX)*(tt.clientY-Q.clientY)),this.setScale(this.scaleTouchStore>et,!0)}else this.isCtrlKey||this.update()}},o.prototype.handleMouseUp=function(t){var e;if(t.stopPropagation(),!this.lock){if(this.destroyMagnifier(),this.isMobile){if(0===(null===(e=t.touches)||void 0===e?void 0:e.length)&&(this.isTouch2=!1),Date.now()-this.dblTouchStore<this.dblTouch)return void this.handleDblclick(t);this.dblTouchStore=Date.now()}if(this.remmber=[],this.activeShape.type!==a.None&&!this.isCtrlKey&&(this.activeShape.dragging=!1,this.activeShape.creating)){if([a.Rect,a.Grid].includes(this.activeShape.type)){var i=s(this.activeShape.coor,2),o=s(i[0],2),n=o[0],r=o[1],h=s(i[1],2),c=h[0],l=h[1];Math.abs(n-c)<this.MIN_WIDTH||Math.abs(r-l)<this.MIN_HEIGHT?(this.dataset.pop(),this.emit("warn","Width cannot be less than ".concat(this.MIN_WIDTH,",Height cannot be less than ").concat(this.MIN_HEIGHT))):(this.activeShape.coor=[[Math.min(n,c),Math.min(r,l)],[Math.max(n,c),Math.max(r,l)]],this.activeShape.creating=!1,this.emit("add",this.activeShape))}else this.activeShape.type===a.Circle?this.activeShape.radius<this.MIN_RADIUS?(this.dataset.pop(),this.emit("warn","Radius cannot be less than ".concat(this.MIN_WIDTH))):(this.activeShape.creating=!1,this.emit("add",this.activeShape)):[a.Brush,a.Eraser].includes(this.activeShape.type)&&(this.activeShape.creating=!1,this.emit("add",this.activeShape));this.update()}}},o.prototype.handleDblclick=function(t){var e=this;if(t.stopPropagation(),!this.lock)if([a.Polygon,a.Line].includes(this.activeShape.type)){var i=this.activeShape.type===a.Polygon&&this.activeShape.coor.length>2,s=this.activeShape.type===a.Line&&this.activeShape.coor.length>1,o=this.activeShape.type===a.Polygon&&this.activeShape.coor.length>=this.MAX_POLYGON_POINTS,n=this.activeShape.type===a.Line&&this.activeShape.coor.length>=2;(i||s||o||n)&&(this.emit("add",this.activeShape),this.activeShape.creating=!1,this.update())}else[a.Grid].includes(this.activeShape.type)&&this.activeShape.active&&(this.activeShape.gridRects.forEach(function(t){if(e.isPointInRect(e.mouse,t.coor)){var i=e.activeShape.selected.findIndex(function(e){return t.index===e});i>-1?e.activeShape.selected.splice(i,1):e.activeShape.selected.push(t.index)}}),this.update())},o.prototype.handleKeydown=function(t){t.code===this.ctrlCode&&(this.isCtrlKey=!0)},o.prototype.handleKeyup=function(t){if(t.code===this.ctrlCode&&(this.isCtrlKey=!1),!this.lock&&document.activeElement===document.body&&!this.readonly&&this.activeShape.type)if([a.Polygon,a.Line].includes(this.activeShape.type)&&"Escape"===t.key){var e=this.activeShape.type===a.Polygon&&this.activeShape.coor.length>=this.MAX_POLYGON_POINTS,i=this.activeShape.type===a.Line&&this.activeShape.coor.length>=2;this.activeShape.coor.length>1&&this.activeShape.creating&&!e&&!i?this.activeShape.coor.pop():this.deleteByIndex(this.activeShape.index),this.update()}else"Backspace"===t.key&&this.deleteByIndex(this.activeShape.index)},o.prototype.initSetting=function(){var t;if(this.canvas&&this.offScreen){var e=window.devicePixelRatio||1;this.image.crossOrigin="anonymous",this.canvas.style.userSelect="none",this.ctx=this.ctx||this.canvas.getContext("2d",{alpha:this.alpha}),this.WIDTH=this.canvas.clientWidth,this.HEIGHT=Math.round(this.canvas.clientHeight),this.canvas.width=this.WIDTH*e,this.canvas.height=this.HEIGHT*e,this.canvas.style.width=this.WIDTH+"px",this.canvas.style.height=this.HEIGHT+"px",this.offScreen.width=this.WIDTH,this.offScreen.height=this.HEIGHT,this.offScreenCtx=this.offScreenCtx||this.offScreen.getContext("2d",{willReadFrequently:!0}),null===(t=this.ctx)||void 0===t||t.scale(e,e)}},o.prototype.initEvents=function(){this.canvas&&(this.image.addEventListener("load",this.handleLoad),this.canvas.addEventListener("touchstart",this.handleMouseDown),this.canvas.addEventListener("touchmove",this.handleMouseMove),this.canvas.addEventListener("touchend",this.handleMouseUp),this.canvas.addEventListener("contextmenu",this.handleContextmenu),this.canvas.addEventListener("mousewheel",this.handleMousewheel),this.canvas.addEventListener("wheel",this.handleMousewheel),this.canvas.addEventListener("mousedown",this.handleMouseDown),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseup",this.handleMouseUp),this.canvas.addEventListener("dblclick",this.handleDblclick),document.body.addEventListener("keydown",this.handleKeydown,!0),document.body.addEventListener("keyup",this.handleKeyup,!0))},o.prototype.setImage=function(t){"string"==typeof t?this.image.src=t:(this.image=t,this.image.crossOrigin="anonymous",this.image.complete?this.handleLoad():this.image.addEventListener("load",this.handleLoad))},o.prototype.setData=function(t){var e=this;setTimeout(function(){var i=[];t.forEach(function(t,s){if(Object.prototype.toString.call(t).includes("Object")){var o=void 0;switch(t.type){case a.Rect:o=new n(t,s,e);break;case a.Polygon:o=new r(t,s,e);break;case a.Dot:o=new h(t,s,e);break;case a.Line:o=new l(t,s,e);break;case a.Circle:o=new d(t,s,e);break;case a.Grid:o=new u(t,s,e);break;case a.Brush:o=new p(t,s,e);break;case a.Eraser:o=new f(t,s,e);break;case a.Ellipse:o=new y(t,s,e);break;default:console.warn("Invalid shape",t)}[a.Rect,a.Polygon,a.Dot,a.Line,a.Circle,a.Grid,a.Brush,a.Eraser,a.Ellipse].includes(t.type)&&o&&i.push(o)}else console.warn("Shape must be an enumerable Object.",t)}),e.dataset=i,e.update()})},o.prototype.hitOnShape=function(t){for(var e,i=-1,s=this.dataset.length-1;s>-1;s--){var o=this.dataset[s];if(!o.hide&&(o.type===a.Dot&&this.isPointInCircle(t,o.coor,this.ctrlRadius)||o.type===a.Circle&&this.isPointInCircle(t,o.coor,o.radius*this.scale)||o.type===a.Rect&&this.isPointInRect(t,o.coor)||o.type===a.Polygon&&this.isPointInPolygon(t,o.coor)||o.type===a.Line&&this.isPointInLine(t,o.coor)||o.type===a.Grid&&this.isPointInRect(t,o.coor))){if(this.focusMode&&!o.active)continue;i=s,e=o;break}}return[i,e]},o.prototype.isInBackground=function(t){var e=this.mergeEvent(t),i=e.mouseX,s=e.mouseY;return i>=this.originX&&s>=this.originY&&i<=this.originX+this.IMAGE_ORIGIN_WIDTH*this.scale&&s<=this.originY+this.IMAGE_ORIGIN_HEIGHT*this.scale},o.prototype.isPointInRect=function(t,e){var i=this,a=s(t,2),o=a[0],n=a[1],r=s(e.map(function(t){return t.map(function(t){return t*i.scale})}),2),h=s(r[0],2),c=h[0],l=h[1],d=s(r[1],2),u=d[0],v=d[1];return c+this.originX<=o&&o<=u+this.originX&&l+this.originY<=n&&n<=v+this.originY},o.prototype.isPointInPolygon=function(t,e){var i=this;if(!this.offScreenCtx)return!1;this.offScreenCtx.save(),this.offScreenCtx.clearRect(0,0,this.WIDTH,this.HEIGHT),this.offScreenCtx.translate(this.originX,this.originY),this.offScreenCtx.beginPath(),e.forEach(function(t,e){var a,o,n=s(t.map(function(t){return Math.round(t*i.scale)}),2),r=n[0],h=n[1];0===e?null===(a=i.offScreenCtx)||void 0===a||a.moveTo(r,h):null===(o=i.offScreenCtx)||void 0===o||o.lineTo(r,h)}),this.offScreenCtx.closePath(),this.offScreenCtx.fill();var a=this.offScreenCtx.getImageData(0,0,this.WIDTH,this.HEIGHT),o=(t[1]-1)*this.WIDTH*4+4*t[0];return this.offScreenCtx.restore(),0!==a.data[o+3]},o.prototype.isPointInCircle=function(t,e,i){var a=this,o=s(t,2),n=o[0],r=o[1],h=s(e.map(function(t){return t*a.scale}),2),c=h[0],l=h[1];return Math.sqrt(Math.pow(c+this.originX-n,2)+Math.pow(l+this.originY-r,2))<=i},o.prototype.isPointInLine=function(t,e){var i=this;if(!this.offScreenCtx)return!1;this.offScreenCtx.save(),this.offScreenCtx.clearRect(0,0,this.WIDTH,this.HEIGHT),this.offScreenCtx.translate(this.originX,this.originY),this.offScreenCtx.lineWidth=this.lineWidth>5?this.lineWidth:5,this.offScreenCtx.beginPath(),e.forEach(function(t,e){var a,o,n=s(t.map(function(t){return Math.round(t*i.scale)}),2),r=n[0],h=n[1];0===e?null===(a=i.offScreenCtx)||void 0===a||a.moveTo(r,h):null===(o=i.offScreenCtx)||void 0===o||o.lineTo(r,h)}),this.offScreenCtx.stroke();var a=this.offScreenCtx.getImageData(0,0,this.WIDTH,this.HEIGHT),o=(t[1]-1)*this.WIDTH*4+4*t[0];return this.offScreenCtx.restore(),0!==a.data[o+3]},o.prototype.drawRect=function(t,e){var i=this;if(this.ctx&&2===t.coor.length){var a=t.strokeStyle,o=void 0===a?"":a,n=t.fillStyle,r=void 0===n?"":n,h=t.active,c=t.creating,l=t.coor,d=t.lineWidth,u=t.rotation,v=s(l.map(function(t){return t.map(function(t){return Math.round(t*i.scale)})}),2),p=s(v[0],2),f=p[0],y=p[1],g=s(v[1],2),S=g[0],I=g[1],m=(f+S)/2,b=(y+I)/2,x=S-f,M=I-y;this.ctx.save(),this.ctx.lineWidth=d||this.lineWidth,(null==e?void 0:e.isSelected)?this.ctx.fillStyle=(null==e?void 0:e.selectedFillStyle)||r:this.ctx.fillStyle=h||c?this.activeFillStyle:r,this.ctx.strokeStyle=h||c?this.activeStrokeStyle:o,this.ctx.translate(m,b),this.ctx.rotate(u),this.ctx.translate(-m,-b),c||this.ctx.fillRect(f,y,x,M),this.ctx.strokeRect(f,y,x,M),this.ctx.restore(),this.drawLabel(l[0],t)}},o.prototype.drawPolygon=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=void 0===i?"":i,o=t.fillStyle,n=void 0===o?"":o,r=t.active,h=t.creating,c=t.coor,l=t.lineWidth;this.ctx.save(),this.ctx.lineJoin="round",this.ctx.lineWidth=l||this.lineWidth,this.ctx.fillStyle=r||h?this.activeFillStyle:n,this.ctx.strokeStyle=r||h?this.activeStrokeStyle:a,this.ctx.beginPath(),c.forEach(function(t,i){var a,o,n=s(t.map(function(t){return Math.round(t*e.scale)}),2),r=n[0],h=n[1];0===i?null===(a=e.ctx)||void 0===a||a.moveTo(r,h):null===(o=e.ctx)||void 0===o||o.lineTo(r,h)});var d=h&&c.length>=this.MAX_POLYGON_POINTS;if(h&&!d){var u=s(this.mouse||[],2),v=u[0],p=u[1];this.ctx.lineTo(v-this.originX,p-this.originY)}else(c.length>2||d)&&this.ctx.closePath();this.ctx.fill(),this.ctx.stroke(),this.ctx.restore(),this.drawLabel(c[0],t)}},o.prototype.drawDot=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=void 0===i?"":i,o=t.creating,n=t.fillStyle,r=void 0===n?"":n,h=t.active,c=t.coor,l=t.lineWidth,d=s(c.map(function(t){return t*e.scale}),2),u=d[0],v=d[1];this.ctx.save(),this.ctx.lineWidth=l||this.lineWidth,this.ctx.fillStyle=h||o?this.activeFillStyle:r,this.ctx.strokeStyle=h?this.activeStrokeStyle:a,this.ctx.beginPath(),this.ctx.arc(u,v,this.ctrlRadius,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.arc(u,v,this.ctrlRadius,0,2*Math.PI,!0),this.ctx.stroke(),this.ctx.restore(),this.drawLabel(c,t)}},o.prototype.drawCirle=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=void 0===i?"":i,o=t.fillStyle,n=void 0===o?"":o,r=t.active,h=t.coor,c=t.creating,l=t.radius,d=t.ctrlsData,u=t.lineWidth,v=s(h.map(function(t){return t*e.scale}),2),p=v[0],f=v[1];this.ctx.save(),this.ctx.lineWidth=u||this.lineWidth,this.ctx.fillStyle=r||c?this.activeFillStyle:n,this.ctx.strokeStyle=r||c?this.activeStrokeStyle:a,this.ctx.beginPath(),this.ctx.arc(p,f,l*this.scale,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.arc(p,f,l*this.scale,0,2*Math.PI,!0),this.ctx.stroke(),this.ctx.restore(),this.drawLabel(d[0],t)}},o.prototype.drawEllipse=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=void 0===i?"":i,o=t.fillStyle,n=void 0===o?"":o,r=t.active,h=t.coor,c=t.creating,l=t.radiusX,d=t.radiusY,u=t.rotation,v=t.lineWidth,p=s(h.map(function(t){return t*e.scale}),2),f=p[0],y=p[1],g=l*this.scale,S=d*this.scale;this.ctx.save(),this.ctx.lineWidth=v||this.lineWidth,this.ctx.fillStyle=r||c?this.activeFillStyle:n,this.ctx.strokeStyle=r||c?this.activeStrokeStyle:a,this.ctx.beginPath(),this.ctx.ellipse(f,y,g,S,u,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.ellipse(f,y,g,S,u,0,2*Math.PI,!0),this.ctx.stroke(),this.ctx.restore(),this.drawLabel(t.ctrlsData[0],t)}},o.prototype.drawLine=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=void 0===i?"":i,o=t.active,n=t.creating,r=t.coor,h=t.lineWidth;this.ctx.save(),this.ctx.lineJoin="round",this.ctx.lineWidth=h||this.lineWidth,this.ctx.strokeStyle=o||n?this.activeStrokeStyle:a,this.ctx.beginPath(),r.forEach(function(t,i){var a,o,n=s(t.map(function(t){return Math.round(t*e.scale)}),2),r=n[0],h=n[1];0===i?null===(a=e.ctx)||void 0===a||a.moveTo(r,h):null===(o=e.ctx)||void 0===o||o.lineTo(r,h)});var c=n&&r.length>=2;if(n&&!c){var l=s(this.mouse||[],2),d=l[0],u=l[1];this.ctx.lineTo(d-this.originX,u-this.originY)}else r.length;this.ctx.stroke(),this.ctx.restore(),this.drawLabel(r[0],t)}},o.prototype.drawGrid=function(t){var e=this;if(this.ctx&&2===t.coor.length){var i=t.strokeStyle,a=void 0===i?"":i,o=t.fillStyle,n=void 0===o?"":o,r=t.active,h=t.creating,c=t.coor,l=t.lineWidth,d=s(c.map(function(t){return t.map(function(t){return Math.round(t*e.scale)})}),2),u=s(d[0],2),v=u[0],p=u[1],f=s(d[1],2),y=f[0],g=f[1];this.ctx.save(),this.ctx.lineWidth=l||this.lineWidth,this.ctx.fillStyle=r||h?this.activeFillStyle:n,this.ctx.strokeStyle=r||h?this.activeStrokeStyle:a,t.gridRects.forEach(function(i,s){var a;e.drawRect(i,{selectedFillStyle:t.selectedFillStyle||e.gridSelectedFillStyle,isSelected:null===(a=t.selected)||void 0===a?void 0:a.includes(s)})});var S=y-v,I=g-p;h||this.ctx.fillRect(v,p,S,I),this.ctx.strokeRect(v,p,S,I),this.ctx.restore(),this.drawLabel(c[0],t)}},o.prototype.drawBrushPath=function(t){var e=this;if(this.ctx){var i=t.coor,a=t.brushSize,o=void 0===a?1:a,n=t.brushStokeStyle,r=void 0===n?"":n;this.ctx.save(),this.ctx.globalCompositeOperation="source-over",this.ctx.lineCap="round",this.ctx.lineJoin="round",this.ctx.lineWidth=Math.round(o*this.scale),this.ctx.strokeStyle=r,this.ctx.beginPath(),i.forEach(function(t,i){var a,o,n=s(t.map(function(t){return Math.round(t*e.scale)}),2),r=n[0],h=n[1];0===i?null===(a=e.ctx)||void 0===a||a.moveTo(r,h):null===(o=e.ctx)||void 0===o||o.lineTo(r,h)}),this.ctx.stroke(),this.ctx.restore()}},o.prototype.drawEraserPath=function(t){var e=this;if(this.ctx){var i=t.coor,a=t.eraserSize,o=void 0===a?1:a;this.ctx.save(),this.ctx.globalCompositeOperation="destination-out",this.ctx.lineCap="round",this.ctx.lineJoin="round",this.ctx.lineWidth=Math.round(o*this.scale),this.ctx.beginPath(),i.forEach(function(t,i){var a,o,n=s(t.map(function(t){return Math.round(t*e.scale)}),2),r=n[0],h=n[1];0===i?null===(a=e.ctx)||void 0===a||a.moveTo(r,h):null===(o=e.ctx)||void 0===o||o.lineTo(r,h)}),this.ctx.stroke(),this.ctx.restore()}},o.prototype.clearBrush=function(){var t=this.dataset.filter(function(t){return![a.Brush,a.Eraser].includes(t.type)});this.setData(t)},o.prototype.drawCtrl=function(t,e){var i=this;if(this.ctx){var a=s(t.map(function(t){return t*i.scale}),2),o=a[0],n=a[1];this.ctx.save(),this.ctx.beginPath(),this.ctx.fillStyle=e||this.ctrlFillStyle,this.ctx.strokeStyle=this.ctrlStrokeStyle,this.ctx.arc(o,n,this.ctrlRadius,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.arc(o,n,this.ctrlRadius,0,2*Math.PI,!0),this.ctx.stroke(),this.ctx.restore()}},o.prototype.drawCtrlList=function(t){var e=this;t.ctrlsData.forEach(function(i,s){t.type===a.Circle?1===s&&e.drawCtrl(i):t.type===a.Ellipse?e.drawCtrl(i):e.drawCtrl(i,t.type===a.Rect&&8===s?"yellow":void 0)})},o.prototype.drawLabel=function(t,e){var i=this,o=e.label,n=void 0===o?"":o,r=e.labelFillStyle,h=void 0===r?"":r,c=e.labelFont,l=void 0===c?"":c,d=e.textFillStyle,u=void 0===d?"":d,v=e.hideLabel,p=e.labelUp,f=e.lineWidth,y="boolean"==typeof v?v:this.hideLabel,g="boolean"==typeof p?p:this.labelUp,S=f||this.lineWidth;if(this.ctx&&n.length&&!y){this.ctx.font=l||this.labelFont;var I=n.length<this.labelMaxLen+1?n:"".concat(n.slice(0,this.labelMaxLen),"..."),m=this.ctx.measureText(I),b=parseInt(this.ctx.font)-4,x=m.width+8,M=b+8,E=s(t.map(function(t){return t*i.scale}),2),H=E[0],w=E[1];if(e.type===a.Rect&&0!==e.rotation){var T=e,G=s(T.coor,2),k=s(G[0],2),C=k[0],_=k[1],D=s(G[1],2),P=D[0],W=D[1],R=(C+P)/2*this.scale,O=(_+W)/2*this.scale,L=H-R,A=w-O;H=L*Math.cos(T.rotation)-A*Math.sin(T.rotation)+R,w=L*Math.sin(T.rotation)+A*Math.cos(T.rotation)+O}var N=this.IMAGE_ORIGIN_WIDTH-t[0]<x/this.scale,X=this.IMAGE_ORIGIN_HEIGHT-t[1]<M/this.scale,Y=t[1]>M/this.scale,F=g?Y:X;this.ctx.save(),this.ctx.fillStyle=h||this.labelFillStyle,this.ctx.fillRect(N?H-m.width-4-S/2:H+S/2,F?w-M-S/2:w+S/2,x,M),this.ctx.fillStyle=u||this.textFillStyle,this.ctx.fillText(I,N?H-m.width:H+4+S/2,F?w-M+b+4:w+b+4+S/2,180),this.ctx.restore()}},o.prototype.update=function(){var t=this;window.cancelAnimationFrame(this.timer),this.timer=window.requestAnimationFrame(function(){var e,i,s;if(t.ctx){t.ctx.save(),t.ctx.clearRect(0,0,t.WIDTH,t.HEIGHT),t.ctx.translate(t.originX,t.originY);for(var o=t.focusMode?t.activeShape.type?[t.activeShape]:[]:t.dataset,n=o.filter(function(t){return t.type===a.Brush||t.type===a.Eraser}),r=0;r<n.length;r++){if(!(c=n[r]).hide)switch(c.type){case a.Brush:c.brushSize=null!==(e=c.brushSize)&&void 0!==e?e:t.brushSize,c.brushStokeStyle=null!==(i=c.brushStokeStyle)&&void 0!==i?i:t.brushStokeStyle,t.drawBrushPath(c);break;case a.Eraser:c.eraserSize=null!==(s=c.eraserSize)&&void 0!==s?s:t.eraserSize,t.drawEraserPath(c)}}var h=o.filter(function(t){return t.type!==a.Brush&&t.type!==a.Eraser});for(r=0;r<h.length;r++){var c;if(!(c=h[r]).hide)switch(c.type){case a.Rect:t.drawRect(c);break;case a.Polygon:t.drawPolygon(c);break;case a.Dot:t.drawDot(c);break;case a.Line:t.drawLine(c);break;case a.Circle:t.drawCirle(c);break;case a.Ellipse:t.drawEllipse(c);break;case a.Grid:t.drawGrid(c)}}!t.isCtrlKey&&t.showCross&&(t.drawLine(t.crossX),t.drawLine(t.crossY)),[a.Rect,a.Polygon,a.Line,a.Circle,a.Grid,a.Ellipse].includes(t.activeShape.type)&&!t.activeShape.hide&&t.drawCtrlList(t.activeShape),t.ctx.globalCompositeOperation="destination-over",t.IMAGE_WIDTH&&t.IMAGE_HEIGHT&&t.ctx.drawImage(t.image,0,0,t.IMAGE_WIDTH,t.IMAGE_HEIGHT),t.ctx.globalCompositeOperation="source-over",t.ctx.restore(),t.emit("updated",t.dataset)}})},o.prototype.deleteByIndex=function(t){var e=this.dataset.findIndex(function(e){return e.index===t});e>-1&&(this.emit("delete",this.dataset[e]),this.dataset.splice(e,1),this.dataset.forEach(function(t,e){t.index=e}),this.update())},o.prototype.deleteByUuid=function(t){var e=this.dataset.find(function(e){return e.uuid===t});e&&(this.emit("delete",e),this.dataset=this.dataset.filter(function(e){return e.uuid!==t}),this.update())},o.prototype.calcStep=function(t){void 0===t&&(t=""),this.IMAGE_WIDTH<this.WIDTH&&this.IMAGE_HEIGHT<this.HEIGHT&&(""!==t&&"b"!==t||(this.setScale(!0,!1,!0),this.calcStep("b"))),(this.IMAGE_WIDTH>this.WIDTH||this.IMAGE_HEIGHT>this.HEIGHT)&&(""!==t&&"s"!==t||(this.setScale(!1,!1,!0),this.calcStep("s")))},o.prototype.setScale=function(t,e,i){if(void 0===e&&(e=!1),void 0===i&&(i=!1),!this.lock&&!(!t&&this.imageMin<20||t&&this.IMAGE_WIDTH>100*this.imageOriginMax)){t?this.scaleStep++:this.scaleStep--;var a=0,o=0,n=s(this.mouse||[],2),r=n[0],h=n[1];e&&(a=(r-this.originX)/this.scale,o=(h-this.originY)/this.scale);var c=Math.abs(this.scaleStep),l=this.IMAGE_WIDTH;if(this.IMAGE_WIDTH=Math.round(this.IMAGE_ORIGIN_WIDTH*Math.pow(this.scaleStep>=0?1.05:.95,c)),this.IMAGE_HEIGHT=Math.round(this.IMAGE_ORIGIN_HEIGHT*Math.pow(this.scaleStep>=0?1.05:.95,c)),e)this.originX=r-a*this.scale,this.originY=h-o*this.scale;else{var d=this.IMAGE_WIDTH/l;this.originX=this.WIDTH/2-(this.WIDTH/2-this.originX)*d,this.originY=this.HEIGHT/2-(this.HEIGHT/2-this.originY)*d}i||this.update()}},o.prototype.fitZoom=function(){this.calcStep(),this.IMAGE_HEIGHT/this.IMAGE_WIDTH>=this.HEIGHT/this.WIDTH?(this.IMAGE_WIDTH=this.IMAGE_ORIGIN_WIDTH/(this.IMAGE_ORIGIN_HEIGHT/this.HEIGHT),this.IMAGE_HEIGHT=this.HEIGHT):(this.IMAGE_WIDTH=this.WIDTH,this.IMAGE_HEIGHT=this.IMAGE_ORIGIN_HEIGHT/(this.IMAGE_ORIGIN_WIDTH/this.WIDTH)),this.originX=(this.WIDTH-this.IMAGE_WIDTH)/2,this.originY=(this.HEIGHT-this.IMAGE_HEIGHT)/2,this.update()},o.prototype.setFocusMode=function(t){this.focusMode=t,this.update()},o.prototype.destroy=function(){this.canvas&&(this.image.removeEventListener("load",this.handleLoad),this.canvas.removeEventListener("contextmenu",this.handleContextmenu),this.canvas.removeEventListener("mousewheel",this.handleMousewheel),this.canvas.removeEventListener("wheel",this.handleMousewheel),this.canvas.removeEventListener("mousedown",this.handleMouseDown),this.canvas.removeEventListener("touchend",this.handleMouseDown),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("touchmove",this.handleMouseMove),this.canvas.removeEventListener("mouseup",this.handleMouseUp),this.canvas.removeEventListener("touchend",this.handleMouseUp),this.canvas.removeEventListener("dblclick",this.handleDblclick),document.body.removeEventListener("keydown",this.handleKeydown,!0),document.body.removeEventListener("keyup",this.handleKeyup,!0),this.canvas.width=this.WIDTH,this.canvas.height=this.HEIGHT,this.canvas.style.width="",this.canvas.style.height="",this.canvas.style.userSelect="")},o.prototype.resize=function(){this.canvas&&(this.canvas.removeAttribute("width"),this.canvas.removeAttribute("height"),this.canvas.style.width="",this.canvas.style.height="",this.initSetting(),this.update())},o}(c);export{g as default};
+//# sourceMappingURL=canvas-select.esm.js.map