@lm_fe/components 0.2.2

package/dist/src/a_chunks/root.7.js

@@ -0,0 +1,867 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { mchcEnv, mchcLogger, mchcEvent } from '@lm_fe/env';
+import { safe_json_parse, base64_to_image } from '@lm_fe/utils';
+import { MyIcon, MyColor } from '@noah-libjs/components';
+import { Switch, Layout, Popover, Button, Slider } from 'antd';
+import classnames from 'classnames';
+import { isString, get } from 'lodash';
+import React, { useRef, useState, useEffect } from 'react';
+import { s as styleInject } from './style-inject.es.js';
+import { r as real_fabric, M as MyImageEditorEvents, e as event_process, f as default_legends } from './index.js';
+import '@lm_fe/static';
+import '@lm_fe/service';
+import '@lm_fe/provoke';
+var css_248z = ".index-module_custom-image-editor__RK-wE {\n  width: 100%;\n  overflow: hidden;\n  margin-top: -460px;\n  position: relative;\n  border: 1px solid #eee;\n}\n.index-module_custom-image-editor__RK-wE .index-module_react-img-editor-container__RYAxl,\n.index-module_custom-image-editor__RK-wE .index-module_konvajs-content__6WYGJ,\n.index-module_custom-image-editor__RK-wE .index-module_react-img-editor__8luIM {\n  width: 100% !important;\n}\n.index-module_custom-image-editor__RK-wE .index-module_react-img-editor-palette__Xvk4K {\n  background: #fff;\n}\n.index-module_custom-image-editor-save__eA0OC {\n  position: absolute;\n  right: 20px;\n  bottom: 30px;\n}\n.index-module_custom-image-editor__RK-wE .index-module_custom-image-editor-null__52KxO {\n  width: 100%;\n  height: 460px;\n}\n.index-module_custom-image-editor__RK-wE .index-module_react-img-editor-toolbar__ps2nI {\n  margin-left: -200px;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  height: auto;\n  width: 36px !important;\n  display: block;\n}\n.index-module_custom-image-editor__RK-wE .index-module_react-img-editor-toolbar-separator__GTqg8 {\n  display: none;\n}\n.index-module_gy-image-editor__2PgAg {\n  margin: 4px;\n  background-color: #fff;\n}\n.index-module_gy-image-editor__2PgAg .index-module_box-img__f2Nx9 {\n  width: 90px;\n  height: 90px;\n  border: 1px solid #d7dce7;\n  position: relative;\n  margin-top: 8px;\n  margin-left: 7px;\n  cursor: move;\n}\n.index-module_gy-image-editor__2PgAg .index-module_box-img__f2Nx9 img {\n  width: auto;\n  max-width: 100%;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.index-module_gy-image-editor__2PgAg .index-module_box-text__valN7 {\n  font-size: 12px;\n  font-weight: 400;\n  color: #828c99;\n  line-height: 17px;\n  text-align: center;\n}\n.index-module_gy-image-editor__2PgAg .ant-layout-sider {\n  background: #fff;\n}\n.index-module_gy-image-editor__2PgAg .ant-layout {\n  background: #fff;\n}\n.index-module_gy-image-editor__2PgAg #index-module_images__pRZ9O {\n  overflow: hidden;\n  clear: both;\n  display: flex;\n  flex-wrap: wrap;\n}\n.index-module_gy-image-editor__2PgAg #index-module_canvas-container__PuYZw {\n  position: relative;\n}\n.index-module_gy-image-editor__2PgAg #index-module_canvas-container__PuYZw .index-module_tool-bar__kAiyj {\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 32px;\n  height: auto;\n}\n.index-module_gy-image-editor__2PgAg #index-module_canvas-container__PuYZw .index-module_tool-bar__kAiyj .ant-btn {\n  width: 24px;\n  height: 24px;\n  padding: 14px 0;\n  border: none;\n}\n.index-module_gy-image-editor__2PgAg .index-module_button-icon__463Ga {\n  display: inline-block;\n  width: 18px;\n  height: 18px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.index-module_gy-image-editor__2PgAg .index-module_back__MY6Kt {\n  background-image: url(/lm_imgs/mie/back.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_forward__IDKoN {\n  background-image: url(/lm_imgs/mie/forward.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_pen__GyJzG {\n  background-image: url(/lm_imgs/mie/pen.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_text__LVtw7 {\n  background-image: url(/lm_imgs/mie/text.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_rect__K6T6d {\n  background-image: url(/lm_imgs/mie/rect.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_circle-icon2__XjPuI {\n  background-image: url(/lm_imgs/mie/circle.svg);\n  background-color: none;\n}\n.index-module_gy-image-editor__2PgAg .index-module_triangle__-PP0Y {\n  background-image: url(/lm_imgs/mie/triangle.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_line__9-WZE {\n  background-image: url(/lm_imgs/mie/line.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_clear__mXP-m {\n  background-image: url(/lm_imgs/mie/clear.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_export__h9hhf {\n  background-image: url(/lm_imgs/mie/export.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_selected__eAmsn {\n  background-image: url(/lm_imgs/mie/selected.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_noselected__xuC3A {\n  background-image: url(/lm_imgs/mie/no.svg);\n}\n.index-module_gy-image-editor__2PgAg .index-module_save__rtkNk {\n  background-image: url(/lm_imgs/mie/save.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_back__MY6Kt {\n  background-image: url(/lm_imgs/mie/back-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_forward__IDKoN {\n  background-image: url(/lm_imgs/mie/forward-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_pen__GyJzG {\n  background-image: url(/lm_imgs/mie/pen-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_text__LVtw7 {\n  background-image: url(/lm_imgs/mie/text-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_rect__K6T6d {\n  background-image: url(/lm_imgs/mie/rect-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_circle-icon2__XjPuI {\n  background-image: url(/lm_imgs/mie/circle-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_triangle__-PP0Y {\n  background-image: url(/lm_imgs/mie/triangle-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_line__9-WZE {\n  background-image: url(/lm_imgs/mie/line-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_clear__mXP-m {\n  background-image: url(/lm_imgs/mie/clear-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_export__h9hhf {\n  background-image: url(/lm_imgs/mie/export-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_selected__eAmsn {\n  background-image: url(/lm_imgs/mie/selected-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_noselected__xuC3A {\n  background-image: url(/lm_imgs/mie/no-hover.svg);\n}\n.ant-btn:hover .ant-btn:focus .index-module_save__rtkNk {\n  background-image: url(/lm_imgs/mie/save-hover.svg);\n}\n";
+var styles = {
+  "custom-image-editor": "index-module_custom-image-editor__RK-wE",
+  "react-img-editor-container": "index-module_react-img-editor-container__RYAxl",
+  "konvajs-content": "index-module_konvajs-content__6WYGJ",
+  "react-img-editor": "index-module_react-img-editor__8luIM",
+  "react-img-editor-palette": "index-module_react-img-editor-palette__Xvk4K",
+  "custom-image-editor-save": "index-module_custom-image-editor-save__eA0OC",
+  "custom-image-editor-null": "index-module_custom-image-editor-null__52KxO",
+  "react-img-editor-toolbar": "index-module_react-img-editor-toolbar__ps2nI",
+  "react-img-editor-toolbar-separator": "index-module_react-img-editor-toolbar-separator__GTqg8",
+  "gy-image-editor": "index-module_gy-image-editor__2PgAg",
+  "box-img": "index-module_box-img__f2Nx9",
+  "box-text": "index-module_box-text__valN7",
+  "images": "index-module_images__pRZ9O",
+  "canvas-container": "index-module_canvas-container__PuYZw",
+  "tool-bar": "index-module_tool-bar__kAiyj",
+  "button-icon": "index-module_button-icon__463Ga",
+  "back": "index-module_back__MY6Kt",
+  "forward": "index-module_forward__IDKoN",
+  "pen": "index-module_pen__GyJzG",
+  "text": "index-module_text__LVtw7",
+  "rect": "index-module_rect__K6T6d",
+  "circle-icon2": "index-module_circle-icon2__XjPuI",
+  "triangle": "index-module_triangle__-PP0Y",
+  "line": "index-module_line__9-WZE",
+  "clear": "index-module_clear__mXP-m",
+  "export": "index-module_export__h9hhf",
+  "selected": "index-module_selected__eAmsn",
+  "noselected": "index-module_noselected__xuC3A",
+  "save": "index-module_save__rtkNk"
+};
+styleInject(css_248z);
+function init_delete_control() {
+  // create a rect object
+  var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
+  var img = document.createElement('img');
+  img.src = deleteIcon;
+  // real_fabric().Object.prototype.transparentCorners = false;
+  // real_fabric().Object.prototype.cornerColor = 'blue';
+  // real_fabric().Object.prototype.cornerStyle = 'circle';
+  real_fabric().Object.prototype.controls.deleteControl = new (real_fabric().Control)({
+    x: 0.5,
+    y: -0.5,
+    offsetY: 16,
+    offsetX: -16,
+    cursorStyle: 'pointer',
+    mouseUpHandler: function deleteObject(eventData, transform) {
+      var target = transform.target;
+      var canvas = target.canvas;
+      canvas === null || canvas === void 0 || canvas.remove(target);
+      canvas === null || canvas === void 0 || canvas.requestRenderAll();
+      return true;
+    },
+    render: function renderIcon(ctx, left, top, styleOverride, fabricObject) {
+      var size = 16;
+      ctx.save();
+      ctx.translate(left, top);
+      ctx.rotate(real_fabric().util.degreesToRadians(fabricObject.angle));
+      ctx.drawImage(img, -size / 2, -size / 2, size, size);
+      ctx.restore();
+    }
+    // cornerSize: 24
+  });
+}
+var Sider = Layout.Sider,
+  Content = Layout.Content;
+function MyImageEditor_Inner(props) {
+  var _real_fabric;
+  var value = props.value,
+    onChange = props.onChange,
+    canvasOptions = props.canvasOptions,
+    _props$legends = props.legends,
+    legends = _props$legends === void 0 ? default_legends : _props$legends;
+  var gyImageEditorRef = useRef(null);
+  //strokeWidth: number = 1;
+  //fontSize: number = 18;
+  //colors: any = "#fe547b";
+  var containner = useRef();
+  var currentType = useRef('free');
+  var textObject = useRef(null);
+  var drawingObject = useRef(null);
+  var mouseFrom = useRef({});
+  var idDrawing = useRef(false);
+  var isRedoing = useRef(false);
+  var mouseTo = useRef({});
+  var stateArr = useRef([]);
+  useRef(null);
+  var isTagging = useRef(true);
+  var freeDrawFlag = useRef(false);
+  var freeErase = useRef(false);
+  var textFlag = useRef(false);
+  var rectFlag = useRef(false);
+  var circleFlag = useRef(false);
+  var triangleFlag = useRef(false);
+  var lineFlag = useRef(false);
+  var legend_item = useRef({});
+  // const [legend_item, set_legend_item] = useState<Partial<(typeof default_legends)[number]>>({})
+  var _useState = useState('#fe547b'),
+    _useState2 = _slicedToArray(_useState, 2),
+    colors = _useState2[0],
+    set_colors = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    strokeWidth = _useState4[0],
+    set_strokeWidth = _useState4[1];
+  var _useState5 = useState(18),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fontSize = _useState6[0],
+    set_fontSize = _useState6[1];
+  var _useState7 = useState(!!value),
+    _useState8 = _slicedToArray(_useState7, 2),
+    __checked = _useState8[0],
+    set_checked = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    loaded = _useState10[0],
+    set_loaded = _useState10[1];
+  useEffect(function () {
+    mchcEnv.ds([function (s) {
+      return s.lm_libs.fabric_5_2_0['fabric.min.js'];
+    }]).then(function () {
+      return set_loaded(true);
+    });
+  }, []);
+  useEffect(function () {
+    loaded && initCanvas();
+  }, [value, loaded]);
+  useEffect(function () {
+    if (loaded) {
+      init_delete_control();
+      createContainner();
+    }
+  }, [loaded]);
+  useEffect(function () {
+    return initEvent();
+  }, [colors, strokeWidth, fontSize, value]);
+  function broadcast_event(type) {
+    mchcEvent.emit('custom_msg', {
+      type: type,
+      data: {
+        ins: containner.current
+      }
+    });
+  }
+  function createContainner() {
+    var _gyImageEditorRef$cur;
+    gyImageEditorRef === null || gyImageEditorRef === void 0 || (_gyImageEditorRef$cur = gyImageEditorRef.current) === null || _gyImageEditorRef$cur === void 0 || _gyImageEditorRef$cur.clientWidth;
+    if (!containner.current) {
+      var _legends$length, _gyImageEditorRef$cur2;
+      var count = (_legends$length = legends.length) !== null && _legends$length !== void 0 ? _legends$length : 0;
+      var len = count ? 200 : 0;
+      containner.current = new (real_fabric().Canvas)('c', _objectSpread({
+        backgroundColor: '#fff',
+        width: (gyImageEditorRef === null || gyImageEditorRef === void 0 || (_gyImageEditorRef$cur2 = gyImageEditorRef.current) === null || _gyImageEditorRef$cur2 === void 0 ? void 0 : _gyImageEditorRef$cur2.clientWidth) - len,
+        height: 460
+      }, canvasOptions));
+      broadcast_event(MyImageEditorEvents.create);
+    }
+  }
+  function initCanvas() {
+    return _initCanvas.apply(this, arguments);
+  }
+  function _initCanvas() {
+    _initCanvas = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _containner$current19, img_el, _containner$current20, img;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            mchcLogger.log('initCanvas', {
+              value: value
+            });
+            if (!(value && isString(value))) {
+              _context.next = 12;
+              break;
+            }
+            if (!safe_json_parse(value)) {
+              _context.next = 7;
+              break;
+            }
+            mchcLogger.log('initCanvas safe_json_parse', {
+              value: value
+            });
+            (_containner$current19 = containner.current) === null || _containner$current19 === void 0 || _containner$current19.loadFromJSON(value, function () {});
+            _context.next = 12;
+            break;
+          case 7:
+            mchcLogger.log('initCanvas base64_to_image', {
+              value: value
+            });
+            // 兼容base64 图片
+            _context.next = 10;
+            return base64_to_image(value);
+          case 10:
+            img_el = _context.sent;
+            if (img_el) {
+              img = new (real_fabric().Image)(img_el);
+              (_containner$current20 = containner.current) === null || _containner$current20 === void 0 || _containner$current20.add(img);
+            }
+          case 12:
+            if (!legends.length) {
+              initfreeDraw();
+            }
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _initCanvas.apply(this, arguments);
+  }
+  function initEvent() {
+    var eventType = ['line', 'circle', 'rect', 'triangle', 'text'];
+    var con = containner.current;
+    if (!con) return function () {};
+    var __events = {
+      drop: function drop(options) {
+        var item = legend_item.current;
+        real_fabric().util.loadImage(get(item, 'img'), function (img) {
+          var legimg = new (real_fabric().Image)(img, {
+            left: options.e.offsetX,
+            top: options.e.offsetY,
+            width: get(item, 'width'),
+            height: get(item, 'height'),
+            // @ts-ignore
+            id: get(item, 'id')
+          });
+          con.add(legimg);
+          handleSelectDraw();
+        }, {
+          crossOrigin: 'anonymous'
+        });
+      },
+      'mouse:down': function mouseDown(options) {
+        if (eventType.indexOf(currentType.current) != -1) {
+          mouseFrom.current.x = options.e.offsetX;
+          mouseFrom.current.y = options.e.offsetY;
+          idDrawing.current = true;
+          switch (currentType.current) {
+            case 'text':
+              initText();
+              break;
+          }
+        }
+      },
+      "mouse:move": function mouseMove(options) {
+        if (idDrawing.current && eventType.indexOf(currentType.current) != -1) {
+          mouseTo.current.x = options.e.offsetX;
+          mouseTo.current.y = options.e.offsetY;
+          switch (currentType.current) {
+            case 'line':
+              ininLine();
+              break;
+            case 'circle':
+              initCircle();
+              break;
+            case 'rect':
+              initRect();
+              break;
+            case 'triangle':
+              initTriangle();
+              break;
+            case 'free':
+              initfreeDraw();
+              break;
+          }
+        }
+      },
+      'mouse:up': function mouseUp(options) {
+        if (eventType.indexOf(currentType.current) != -1) {
+          mouseTo.current.x = options.e.offsetX;
+          mouseTo.current.y = options.e.offsetY;
+          drawingObject.current = null;
+          idDrawing.current = false;
+          resetMove();
+        }
+      },
+      'mouse:over': function mouseOver(options) {},
+      'mouse:out': function mouseOut(options) {},
+      'object:added': function objectAdded() {
+        if (isRedoing.current == false) {
+          stateArr.current = [];
+        }
+      }
+    };
+    return event_process(con, __events);
+  }
+  function initText() {
+    var _containner$current;
+    createContainner();
+    containner.current.isDrawingMode = false;
+    containner.current.selection = false;
+    textObject.current = new (real_fabric().Textbox)('', {
+      left: mouseFrom.current.x,
+      top: mouseFrom.current.y,
+      fontSize: fontSize,
+      fill: colors,
+      hasControls: false
+    });
+    (_containner$current = containner.current) === null || _containner$current === void 0 || _containner$current.add(textObject.current);
+    textObject.current.enterEditing();
+    textObject.current.hiddenTextarea.focus();
+  }
+  function initRect() {
+    createContainner();
+    var left = mouseFrom.current.x;
+    var top = mouseFrom.current.y;
+    var width = mouseTo.current.x - mouseFrom.current.x;
+    var height = mouseTo.current.y - mouseFrom.current.y;
+    var canvasObject = new (real_fabric().Rect)({
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      stroke: colors,
+      fill: 'rgba(255, 255, 255, 0)',
+      strokeWidth: strokeWidth
+    });
+    toggleDrawingObject(canvasObject);
+  }
+  function initCircle() {
+    createContainner();
+    var left = mouseFrom.current.x;
+    var top = mouseFrom.current.y;
+    var radius = Math.sqrt((mouseTo.current.x - left) * (mouseTo.current.x - left) + (mouseTo.current.y - top) * (mouseTo.current.y - top)) / 2;
+    var canvasObject = new (real_fabric().Circle)({
+      left: left,
+      top: top,
+      stroke: colors,
+      fill: 'rgba(255, 255, 255, 0)',
+      radius: radius,
+      strokeWidth: strokeWidth
+    });
+    toggleDrawingObject(canvasObject);
+  }
+  function initTriangle() {
+    createContainner();
+    var left = mouseFrom.current.x;
+    var top = mouseFrom.current.y;
+    var height = mouseTo.current.y - mouseFrom.current.y;
+    var width = Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2));
+    var canvasObject = new (real_fabric().Triangle)({
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      stroke: colors,
+      fill: 'rgba(255, 255, 255, 0)',
+      strokeWidth: strokeWidth
+    });
+    toggleDrawingObject(canvasObject);
+  }
+  function ininLine() {
+    createContainner();
+    var canvasObject = new (real_fabric().Line)([mouseFrom.current.x, mouseFrom.current.y, mouseTo.current.x, mouseTo.current.y], {
+      fill: colors,
+      stroke: colors,
+      strokeWidth: strokeWidth
+    });
+    toggleDrawingObject(canvasObject);
+  }
+  function initfreeDraw() {
+    createContainner();
+    containner.current.isDrawingMode = true;
+    containner.current.freeDrawingBrush.color = colors;
+    containner.current.freeDrawingBrush.width = strokeWidth;
+    containner.current.renderAll();
+  }
+  function toggleDrawingObject(canvasObject) {
+    var _containner$current3;
+    containner.current.isDrawingMode = false;
+    containner.current.selection = false;
+    canvasObject.selectable = false;
+    if (drawingObject.current) {
+      var _containner$current2;
+      (_containner$current2 = containner.current) === null || _containner$current2 === void 0 || _containner$current2.remove(drawingObject.current);
+    }
+    (_containner$current3 = containner.current) === null || _containner$current3 === void 0 || _containner$current3.add(canvasObject);
+    drawingObject.current = canvasObject;
+    if (textObject.current) {
+      textObject.current.exitEditing();
+      textObject.current = null;
+    }
+  }
+  function resetMove() {
+    mouseFrom.current = {};
+    mouseTo.current = {};
+  }
+  //开始拖拽图片
+  function handleDragStart(e, item) {
+    legend_item.current = item;
+  }
+  //后退
+  function handleRevoke() {
+    var _containner$current4;
+    if (((_containner$current4 = containner.current) === null || _containner$current4 === void 0 ? void 0 : _containner$current4._objects.length) > 0) {
+      var _containner$current5, _containner$current6;
+      stateArr.current.push((_containner$current5 = containner.current) === null || _containner$current5 === void 0 ? void 0 : _containner$current5._objects.pop());
+      (_containner$current6 = containner.current) === null || _containner$current6 === void 0 || _containner$current6.renderAll();
+    }
+  }
+  //前进
+  function handleRedo() {
+    if (stateArr.current.length > 0) {
+      var _containner$current7, _containner$current8;
+      isRedoing.current = true;
+      (_containner$current7 = containner.current) === null || _containner$current7 === void 0 || _containner$current7.add(stateArr.current.pop());
+      (_containner$current8 = containner.current) === null || _containner$current8 === void 0 || _containner$current8.renderAll();
+    }
+  }
+  //清除
+  function handleClear() {
+    var _containner$current9;
+    (_containner$current9 = containner.current) === null || _containner$current9 === void 0 || _containner$current9.clear();
+    containner.current.backgroundColor = '#fff';
+    resetMove();
+    isRedoing.current = false;
+    stateArr.current = [];
+  }
+  //擦除
+  function handleFreeErase() {
+    if (!real_fabric().EraserBrush) return;
+    if (freeErase.current) {
+      freeErase.current = false;
+      containner.current.isDrawingMode = false;
+    } else {
+      freeErase.current = true;
+      freeDrawFlag.current = false;
+      textFlag.current = false;
+      rectFlag.current = false;
+      circleFlag.current = false;
+      triangleFlag.current = false;
+      lineFlag.current = false;
+      removeTextObject();
+      // 开启画布自由绘画模式
+      containner.current.isDrawingMode = true;
+      // 设置自由绘画模式 画笔颜色与画笔线条大小
+      containner.current.freeDrawingBrush = new (real_fabric().EraserBrush)(containner.current);
+      containner.current.freeDrawingBrush.width = 20;
+      currentType.current = 'free';
+    }
+  }
+  //自由绘画
+  function handleFreeDraw() {
+    if (freeDrawFlag.current) {
+      freeDrawFlag.current = false;
+      containner.current.isDrawingMode = false;
+    } else {
+      freeDrawFlag.current = true;
+      freeErase.current = false;
+      textFlag.current = false;
+      rectFlag.current = false;
+      circleFlag.current = false;
+      triangleFlag.current = false;
+      lineFlag.current = false;
+      if (real_fabric().PencilBrush) {
+        containner.current.freeDrawingBrush = new (real_fabric().PencilBrush)(containner.current);
+      }
+      removeTextObject();
+      // 开启画布自由绘画模式
+      containner.current.isDrawingMode = true;
+      // 设置自由绘画模式 画笔颜色与画笔线条大小
+      containner.current.freeDrawingBrush.color = colors;
+      containner.current.freeDrawingBrush.width = strokeWidth;
+      currentType.current = 'free';
+    }
+  }
+  //文本
+  function handleTextDraw() {
+    if (textFlag.current) {
+      textFlag.current = false;
+      removeTextObject();
+    } else {
+      textFlag.current = true;
+      freeDrawFlag.current = false;
+      freeErase.current = false;
+      rectFlag.current = false;
+      circleFlag.current = false;
+      triangleFlag.current = false;
+      lineFlag.current = false;
+      currentType.current = 'text';
+      containner.current.isDrawingMode = false;
+      containner.current.selection = false;
+      clearSelectable();
+      if (drawingObject.current) {
+        var _containner$current10;
+        (_containner$current10 = containner.current) === null || _containner$current10 === void 0 || _containner$current10.remove(drawingObject.current);
+      }
+    }
+  }
+  //矩形
+  function handleRectDraw() {
+    if (rectFlag.current) {
+      rectFlag.current = false;
+      currentType.current = '';
+    } else {
+      rectFlag.current = true;
+      textFlag.current = false;
+      freeDrawFlag.current = false;
+      freeErase.current = false;
+      circleFlag.current = false;
+      triangleFlag.current = false;
+      lineFlag.current = false;
+      isTagging.current = false;
+      currentType.current = 'rect';
+      clearSelectable();
+      initRect();
+    }
+  }
+  //圆形
+  function handleCircleDraw() {
+    if (circleFlag.current) {
+      circleFlag.current = false;
+      currentType.current = '';
+    } else {
+      rectFlag.current = false;
+      textFlag.current = false;
+      freeDrawFlag.current = false;
+      freeErase.current = false;
+      circleFlag.current = true;
+      triangleFlag.current = false;
+      lineFlag.current = false;
+      currentType.current = 'circle';
+      clearSelectable();
+      initCircle();
+    }
+  }
+  //三角形
+  function handleTriangleDraw() {
+    if (triangleFlag.current) {
+      triangleFlag.current = false;
+      currentType.current = '';
+    } else {
+      rectFlag.current = false;
+      textFlag.current = false;
+      freeDrawFlag.current = false;
+      freeErase.current = false;
+      circleFlag.current = false;
+      triangleFlag.current = true;
+      lineFlag.current = false;
+      currentType.current = 'triangle';
+      clearSelectable();
+      initTriangle();
+    }
+  }
+  //直线
+  function handleLineDraw() {
+    if (lineFlag.current) {
+      lineFlag.current = false;
+      currentType.current = '';
+    } else {
+      rectFlag.current = false;
+      textFlag.current = false;
+      freeDrawFlag.current = false;
+      freeErase.current = false;
+      circleFlag.current = false;
+      triangleFlag.current = false;
+      lineFlag.current = true;
+      currentType.current = 'line';
+      clearSelectable();
+      ininLine();
+    }
+  }
+  //下载图片
+  function handleExport() {
+    var _containner$current11, _containner$current12, _containner$current13;
+    var dataURL = (_containner$current11 = containner.current) === null || _containner$current11 === void 0 ? void 0 : _containner$current11.toDataURL({
+      width: (_containner$current12 = containner.current) === null || _containner$current12 === void 0 ? void 0 : _containner$current12.width,
+      height: (_containner$current13 = containner.current) === null || _containner$current13 === void 0 ? void 0 : _containner$current13.height,
+      left: 0,
+      top: 0,
+      format: 'png'
+    });
+    var link = document.createElement('a');
+    link.download = 'canvas.current?.png';
+    link.href = dataURL;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+  function removeTextObject() {
+    currentType.current = '';
+    if (textObject.current) {
+      textObject.current.exitEditing();
+      textObject.current = null;
+    }
+  }
+  //颜色设置
+  function handleGradePicker(css) {
+    containner.current.freeDrawingBrush.color = css;
+    set_colors(css);
+  }
+  //粗细设置
+  function handleSlider(value) {
+    console.log('value', value);
+    set_strokeWidth(value);
+  }
+  //字体设置
+  function handleTextSlider(value) {
+    set_fontSize(value);
+  }
+  //清除选中
+  function clearSelectable() {
+    var _containner$current14;
+    (_containner$current14 = containner.current) === null || _containner$current14 === void 0 || _containner$current14.getObjects().map(function (item) {
+      item.set('selectable', false);
+    });
+  }
+  //不可选中
+  function handleUnselectDraw() {
+    var _containner$current15;
+    containner.current.isDrawingMode = false;
+    removeTextObject();
+    clearSelectable();
+    (_containner$current15 = containner.current) === null || _containner$current15 === void 0 || _containner$current15.renderAll();
+  }
+  //可选中
+  function handleSelectDraw() {
+    var _containner$current16, _containner$current17;
+    containner.current.isDrawingMode = false;
+    removeTextObject();
+    (_containner$current16 = containner.current) === null || _containner$current16 === void 0 || _containner$current16.getObjects().map(function (item) {
+      item.set('selectable', true);
+    });
+    (_containner$current17 = containner.current) === null || _containner$current17 === void 0 || _containner$current17.renderAll();
+  }
+  //保存图片到后台
+  function handleImgSave() {
+    var _containner$current18;
+    var value = JSON.stringify(containner.current);
+    (_containner$current18 = containner.current) === null || _containner$current18 === void 0 || _containner$current18.requestRenderAll();
+    onChange === null || onChange === void 0 || onChange(value);
+    broadcast_event(MyImageEditorEvents.save);
+    // 反序列化
+    // canvas.current?.loadFromJSON(value)
+  }
+  function handleSwitch(checked) {
+    set_checked(checked);
+  }
+  function renderSetUp() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles["slider"],
+      style: {
+        width: 300
+      }
+    }, /*#__PURE__*/React.createElement("span", null, "\u7C97\u7EC6"), /*#__PURE__*/React.createElement(Slider, {
+      onChange: handleSlider,
+      value: strokeWidth
+    })), /*#__PURE__*/React.createElement("div", {
+      className: styles["picker"],
+      style: {
+        width: 300
+      }
+    }, /*#__PURE__*/React.createElement("span", null, "\u989C\u8272"), /*#__PURE__*/React.createElement(MyColor, {
+      width: '300',
+      color: colors,
+      onChange: handleGradePicker
+    })));
+  }
+  function renderTextSetUp() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles["slider"],
+      style: {
+        width: 300
+      }
+    }, /*#__PURE__*/React.createElement("span", null, "\u5927\u5C0F"), /*#__PURE__*/React.createElement(Slider, {
+      onChange: handleTextSlider,
+      value: fontSize
+    })), /*#__PURE__*/React.createElement("div", {
+      className: styles["picker"],
+      style: {
+        width: 300
+      }
+    }, /*#__PURE__*/React.createElement("span", null, "\u989C\u8272"), /*#__PURE__*/React.createElement(MyColor, {
+      width: '300',
+      color: colors,
+      onChange: handleGradePicker
+    })));
+  }
+  if (!loaded) return '加载中...';
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: styles["switch"],
+    style: {
+      margin: '13px 0 16px 58px'
+    }
+  }, /*#__PURE__*/React.createElement("span", null, "\u7535\u5B50\u753B\u677F\uFF1A"), /*#__PURE__*/React.createElement(Switch, {
+    checkedChildren: "\u5F00\u542F",
+    unCheckedChildren: "\u5173\u95ED",
+    checked: __checked,
+    onChange: handleSwitch
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles["gy-image-editor"],
+    ref: gyImageEditorRef
+  }, /*#__PURE__*/React.createElement(Layout, {
+    hidden: !__checked
+  }, legends.length ? /*#__PURE__*/React.createElement(Sider, {
+    style: {
+      borderTop: '1px solid #d7dce7'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: styles["images"]
+  }, legends.map(function (l, idx) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: styles["box-img"]
+    }, /*#__PURE__*/React.createElement("img", {
+      draggable: "true",
+      onDragStart: function onDragStart(e) {
+        return handleDragStart(e, _objectSpread(_objectSpread({}, l), {}, {
+          id: idx
+        }));
+      },
+      src: l.img
+    })), /*#__PURE__*/React.createElement("div", {
+      className: styles["box-text"]
+    }, l.label));
+  }))) : null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement("div", {
+    id: styles['canvas-container']
+  }, /*#__PURE__*/React.createElement("canvas", {
+    // width={canvasWidth}
+    // height="460"
+    id: "c",
+    style: {
+      border: '1px solid #d7dce7'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles["tool-bar"]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles["tool-bar-container"]
+  }, /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: /*#__PURE__*/React.createElement("span", null, "\u540E\u9000")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleRevoke,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["back"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: /*#__PURE__*/React.createElement("span", null, "\u524D\u8FDB")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleRedo,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["forward"])
+    })
+  })), (_real_fabric = real_fabric()) !== null && _real_fabric !== void 0 && _real_fabric.EraserBrush ? /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: /*#__PURE__*/React.createElement("span", null, "\u64E6\u9664")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleFreeErase,
+    icon: /*#__PURE__*/React.createElement(MyIcon, {
+      value: 'ClearOutlined'
+    })
+  })) : null, /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: renderSetUp(),
+    title: "\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleFreeDraw,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["pen"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: renderTextSetUp(),
+    title: "\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleTextDraw,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["text"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: renderSetUp(),
+    title: "\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleRectDraw,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["rect"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: renderSetUp(),
+    title: "\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleCircleDraw,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["circle-icon2"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: renderSetUp(),
+    title: "\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleTriangleDraw,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["triangle"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: renderSetUp(),
+    title: "\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleLineDraw,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["line"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: /*#__PURE__*/React.createElement("span", null, "\u6E05\u9664")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleClear,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["clear"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: /*#__PURE__*/React.createElement("span", null, "\u5BFC\u51FA")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleExport,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["export"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: /*#__PURE__*/React.createElement("span", null, "\u53EF\u9009\u4E2D")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleSelectDraw,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["selected"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: /*#__PURE__*/React.createElement("span", null, "\u4E0D\u53EF\u9009\u4E2D")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleUnselectDraw,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["noselected"])
+    })
+  })), /*#__PURE__*/React.createElement(Popover, {
+    placement: "left",
+    content: /*#__PURE__*/React.createElement("span", null, "\u4FDD\u5B58")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleImgSave,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles["button-icon"], styles["save"])
+    })
+  })))))))));
+}
+export { MyImageEditor_Inner as default };