@lm_fe/components 0.1.201 → 0.2.5

package/dist/{a_chunks/.root4.js → src/a_chunks/MyImageEditor.Inner.js}

@@ -4,85 +4,19 @@ 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 'antd/es/popover/style';
-import _Popover from 'antd/es/popover';
-import 'antd/es/button/style';
-import _Button from 'antd/es/button';
-import 'antd/es/switch/style';
-import _Switch from 'antd/es/switch';
-import 'antd/es/slider/style';
-import _Slider from 'antd/es/slider';
-import 'antd/es/layout/style';
-import _Layout from 'antd/es/layout';
-import _isString from 'lodash/isString';
-import _get from 'lodash/get';
-import { ClearOutlined } from '@ant-design/icons';
-import { mchcLogger, mchcEvent } from '@lm_fe/env';
+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 React__default, { useRef, useState, useEffect } from 'react';
-import { HuePicker } from 'react-color';
-import { r as real_fabric, M as MyImageEditorEvents, e as event_process, d as default_legends } from './index.js';
-import 'antd/es/input/style';
-import 'antd/es/input';
-import 'antd/es/skeleton/style';
-import 'antd/es/skeleton';
-import 'fabric';
-import 'lodash/map';
-import 'antd/es/modal/style';
-import 'antd/es/modal';
-import 'lodash/isNil';
-import 'antd/es/row/style';
-import 'antd/es/row';
-import 'antd/es/col/style';
-import 'antd/es/col';
-import 'antd/es/form/style';
-import 'antd/es/form';
-import 'antd/es/divider/style';
-import 'antd/es/divider';
-import 'antd/es/rate/style';
-import 'antd/es/rate';
-import 'antd/es/time-picker/style';
-import 'antd/es/time-picker';
-import 'antd/es/checkbox/style';
-import 'antd/es/checkbox';
-import 'antd/es/input-number/style';
-import 'antd/es/input-number';
-import 'antd/es/radio/style';
-import 'antd/es/radio';
-import 'antd/es/date-picker/style';
-import 'antd/es/date-picker';
-import 'rc-tree/es/TreeNode';
-import 'antd/es/tabs/style';
-import 'antd/es/tabs';
+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 'react-keep-alive-pro';
-function styleInject(css, ref) {
-  if (ref === void 0) ref = {};
-  var insertAt = ref.insertAt;
-  if (!css || typeof document === 'undefined') {
-    return;
-  }
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-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: 20px;\n  height: 20px;\n  padding: 6px 0;\n  border: none;\n}\n.index-module_gy-image-editor__2PgAg .index-module_button-icon__463Ga {\n  width: 16px;\n  height: 16px;\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\n  .ant-btn:focus .index-module_back__MY6Kt {\n  background-image: url(/lm_imgs/mie/back-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_forward__IDKoN {\n  background-image: url(/lm_imgs/mie/forward-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_pen__GyJzG {\n  background-image: url(/lm_imgs/mie/pen-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_text__LVtw7 {\n  background-image: url(/lm_imgs/mie/text-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_rect__K6T6d {\n  background-image: url(/lm_imgs/mie/rect-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_circle-icon2__XjPuI {\n  background-image: url(/lm_imgs/mie/circle-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_triangle__-PP0Y {\n  background-image: url(/lm_imgs/mie/triangle-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_line__9-WZE {\n  background-image: url(/lm_imgs/mie/line-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_clear__mXP-m {\n  background-image: url(/lm_imgs/mie/clear-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_export__h9hhf {\n  background-image: url(/lm_imgs/mie/export-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_selected__eAmsn {\n  background-image: url(/lm_imgs/mie/selected-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_noselected__xuC3A {\n  background-image: url(/lm_imgs/mie/no-hover.svg);\n}\n.ant-btn:hover\n  .ant-btn:focus .index-module_save__rtkNk {\n  background-image: url(/lm_imgs/mie/save-hover.svg);\n}\n";
+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",
@@ -120,10 +54,10 @@ function init_delete_control() {
   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({
+  // 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,
@@ -140,17 +74,17 @@ function init_delete_control() {
       var size = 16;
       ctx.save();
       ctx.translate(left, top);
-      ctx.rotate(real_fabric.util.degreesToRadians(fabricObject.angle));
+      ctx.rotate(real_fabric().util.degreesToRadians(fabricObject.angle));
       ctx.drawImage(img, -size / 2, -size / 2, size, size);
       ctx.restore();
     }
     // cornerSize: 24
   });
 }
-init_delete_control();
-var Sider = _Layout.Sider,
-  Content = _Layout.Content;
+var Sider = Layout.Sider,
+  Content = Layout.Content;
 function MyImageEditor_Inner(props) {
+  var _real_fabric;
   var value = props.value,
     onChange = props.onChange,
     canvasOptions = props.canvasOptions,
@@ -196,12 +130,26 @@ function MyImageEditor_Inner(props) {
     _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 () {
-    createContainner();
+    mchcEnv.ds([function (s) {
+      return s.lm_libs.fabric_5_2_0['fabric.min.js'];
+    }]).then(function () {
+      return set_loaded(true);
+    });
   }, []);
   useEffect(function () {
-    initCanvas();
-  }, [value]);
+    loaded && initCanvas();
+  }, [value, loaded]);
+  useEffect(function () {
+    if (loaded) {
+      init_delete_control();
+      createContainner();
+    }
+  }, [loaded]);
   useEffect(function () {
     return initEvent();
   }, [colors, strokeWidth, fontSize, value]);
@@ -220,7 +168,7 @@ function MyImageEditor_Inner(props) {
       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({
+      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
@@ -240,7 +188,7 @@ function MyImageEditor_Inner(props) {
             mchcLogger.log('initCanvas', {
               value: value
             });
-            if (!(value && _isString(value))) {
+            if (!(value && isString(value))) {
               _context.next = 12;
               break;
             }
@@ -264,7 +212,7 @@ function MyImageEditor_Inner(props) {
           case 10:
             img_el = _context.sent;
             if (img_el) {
-              img = new real_fabric.Image(img_el);
+              img = new (real_fabric().Image)(img_el);
               (_containner$current20 = containner.current) === null || _containner$current20 === void 0 || _containner$current20.add(img);
             }
           case 12:
@@ -286,14 +234,14 @@ function MyImageEditor_Inner(props) {
     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, {
+        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'),
+            width: get(item, 'width'),
+            height: get(item, 'height'),
             // @ts-ignore
-            id: _get(item, 'id')
+            id: get(item, 'id')
           });
           con.add(legimg);
           handleSelectDraw();
@@ -360,7 +308,7 @@ function MyImageEditor_Inner(props) {
     createContainner();
     containner.current.isDrawingMode = false;
     containner.current.selection = false;
-    textObject.current = new real_fabric.Textbox('', {
+    textObject.current = new (real_fabric().Textbox)('', {
       left: mouseFrom.current.x,
       top: mouseFrom.current.y,
       fontSize: fontSize,
@@ -377,7 +325,7 @@ function MyImageEditor_Inner(props) {
     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({
+    var canvasObject = new (real_fabric().Rect)({
       left: left,
       top: top,
       width: width,
@@ -393,7 +341,7 @@ function MyImageEditor_Inner(props) {
     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({
+    var canvasObject = new (real_fabric().Circle)({
       left: left,
       top: top,
       stroke: colors,
@@ -409,7 +357,7 @@ function MyImageEditor_Inner(props) {
     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({
+    var canvasObject = new (real_fabric().Triangle)({
       left: left,
       top: top,
       width: width,
@@ -422,7 +370,7 @@ function MyImageEditor_Inner(props) {
   }
   function ininLine() {
     createContainner();
-    var canvasObject = new real_fabric.Line([mouseFrom.current.x, mouseFrom.current.y, mouseTo.current.x, mouseTo.current.y], {
+    var canvasObject = new (real_fabric().Line)([mouseFrom.current.x, mouseFrom.current.y, mouseTo.current.x, mouseTo.current.y], {
       fill: colors,
       stroke: colors,
       strokeWidth: strokeWidth
@@ -489,7 +437,7 @@ function MyImageEditor_Inner(props) {
   }
   //擦除
   function handleFreeErase() {
-    if (!real_fabric.EraserBrush) return;
+    if (!real_fabric().EraserBrush) return;
     if (freeErase.current) {
       freeErase.current = false;
       containner.current.isDrawingMode = false;
@@ -505,7 +453,7 @@ function MyImageEditor_Inner(props) {
       // 开启画布自由绘画模式
       containner.current.isDrawingMode = true;
       // 设置自由绘画模式 画笔颜色与画笔线条大小
-      containner.current.freeDrawingBrush = new real_fabric.EraserBrush(containner.current);
+      containner.current.freeDrawingBrush = new (real_fabric().EraserBrush)(containner.current);
       containner.current.freeDrawingBrush.width = 20;
       currentType.current = 'free';
     }
@@ -523,8 +471,8 @@ function MyImageEditor_Inner(props) {
       circleFlag.current = false;
       triangleFlag.current = false;
       lineFlag.current = false;
-      if (real_fabric.PencilBrush) {
-        containner.current.freeDrawingBrush = new real_fabric.PencilBrush(containner.current);
+      if (real_fabric().PencilBrush) {
+        containner.current.freeDrawingBrush = new (real_fabric().PencilBrush)(containner.current);
       }
       removeTextObject();
       // 开启画布自由绘画模式
@@ -656,10 +604,9 @@ function MyImageEditor_Inner(props) {
     }
   }
   //颜色设置
-  function handleGradePicker(e) {
-    var colors = e.hex;
-    containner.current.freeDrawingBrush.color = colors;
-    set_colors(colors);
+  function handleGradePicker(css) {
+    containner.current.freeDrawingBrush.color = css;
+    set_colors(css);
   }
   //粗细设置
   function handleSlider(value) {
@@ -709,70 +656,71 @@ function MyImageEditor_Inner(props) {
     set_checked(checked);
   }
   function renderSetUp() {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: styles["slider"],
       style: {
         width: 300
       }
-    }, /*#__PURE__*/React__default.createElement("span", null, "\u7C97\u7EC6"), /*#__PURE__*/React__default.createElement(_Slider, {
+    }, /*#__PURE__*/React.createElement("span", null, "\u7C97\u7EC6"), /*#__PURE__*/React.createElement(Slider, {
       onChange: handleSlider,
       value: strokeWidth
-    })), /*#__PURE__*/React__default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: styles["picker"],
       style: {
         width: 300
       }
-    }, /*#__PURE__*/React__default.createElement("span", null, "\u989C\u8272"), /*#__PURE__*/React__default.createElement(HuePicker, {
+    }, /*#__PURE__*/React.createElement("span", null, "\u989C\u8272"), /*#__PURE__*/React.createElement(MyColor, {
       width: '300',
       color: colors,
       onChange: handleGradePicker
     })));
   }
   function renderTextSetUp() {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: styles["slider"],
       style: {
         width: 300
       }
-    }, /*#__PURE__*/React__default.createElement("span", null, "\u5927\u5C0F"), /*#__PURE__*/React__default.createElement(_Slider, {
+    }, /*#__PURE__*/React.createElement("span", null, "\u5927\u5C0F"), /*#__PURE__*/React.createElement(Slider, {
       onChange: handleTextSlider,
       value: fontSize
-    })), /*#__PURE__*/React__default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: styles["picker"],
       style: {
         width: 300
       }
-    }, /*#__PURE__*/React__default.createElement("span", null, "\u989C\u8272"), /*#__PURE__*/React__default.createElement(HuePicker, {
+    }, /*#__PURE__*/React.createElement("span", null, "\u989C\u8272"), /*#__PURE__*/React.createElement(MyColor, {
       width: '300',
       color: colors,
       onChange: handleGradePicker
     })));
   }
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+  if (!loaded) return '加载中...';
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: styles["switch"],
     style: {
       margin: '13px 0 16px 58px'
     }
-  }, /*#__PURE__*/React__default.createElement("span", null, "\u7535\u5B50\u753B\u677F\uFF1A"), /*#__PURE__*/React__default.createElement(_Switch, {
+  }, /*#__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__default.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles["gy-image-editor"],
     ref: gyImageEditorRef
-  }, /*#__PURE__*/React__default.createElement(_Layout, {
+  }, /*#__PURE__*/React.createElement(Layout, {
     hidden: !__checked
-  }, legends.length ? /*#__PURE__*/React__default.createElement(Sider, {
+  }, legends.length ? /*#__PURE__*/React.createElement(Sider, {
     style: {
       borderTop: '1px solid #d7dce7'
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     id: styles["images"]
   }, legends.map(function (l, idx) {
-    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: styles["box-img"]
-    }, /*#__PURE__*/React__default.createElement("img", {
+    }, /*#__PURE__*/React.createElement("img", {
       draggable: "true",
       onDragStart: function onDragStart(e) {
         return handleDragStart(e, _objectSpread(_objectSpread({}, l), {}, {
@@ -780,139 +728,140 @@ function MyImageEditor_Inner(props) {
         }));
       },
       src: l.img
-    })), /*#__PURE__*/React__default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: styles["box-text"]
     }, l.label));
-  }))) : null, /*#__PURE__*/React__default.createElement(Content, null, /*#__PURE__*/React__default.createElement("div", {
+  }))) : null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement("div", {
     id: styles['canvas-container']
-  }, /*#__PURE__*/React__default.createElement("canvas", {
+  }, /*#__PURE__*/React.createElement("canvas", {
     // width={canvasWidth}
     // height="460"
     id: "c",
     style: {
       border: '1px solid #d7dce7'
     }
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles["tool-bar"]
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles["tool-bar-container"]
-  }, /*#__PURE__*/React__default.createElement(_Popover, {
+  }, /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
-    content: /*#__PURE__*/React__default.createElement("span", null, "\u540E\u9000")
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+    content: /*#__PURE__*/React.createElement("span", null, "\u540E\u9000")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleRevoke,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["back"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
-    content: /*#__PURE__*/React__default.createElement("span", null, "\u524D\u8FDB")
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+    content: /*#__PURE__*/React.createElement("span", null, "\u524D\u8FDB")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleRedo,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["forward"])
     })
-  })), real_fabric.EraserBrush ? /*#__PURE__*/React__default.createElement(_Popover, {
+  })), (_real_fabric = real_fabric()) !== null && _real_fabric !== void 0 && _real_fabric.EraserBrush ? /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
-    content: /*#__PURE__*/React__default.createElement("span", null, "\u64E6\u9664")
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+    content: /*#__PURE__*/React.createElement("span", null, "\u64E6\u9664")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleFreeErase,
-    icon: /*#__PURE__*/React__default.createElement(ClearOutlined, null)
-  })) : null, /*#__PURE__*/React__default.createElement(_Popover, {
+    icon: /*#__PURE__*/React.createElement(MyIcon, {
+      value: 'ClearOutlined'
+    })
+  })) : null, /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
     content: renderSetUp(),
     title: "\u8BBE\u7F6E"
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleFreeDraw,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["pen"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
     content: renderTextSetUp(),
     title: "\u8BBE\u7F6E"
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleTextDraw,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["text"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
     content: renderSetUp(),
     title: "\u8BBE\u7F6E"
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleRectDraw,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["rect"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
     content: renderSetUp(),
     title: "\u8BBE\u7F6E"
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleCircleDraw,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["circle-icon2"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
     content: renderSetUp(),
     title: "\u8BBE\u7F6E"
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleTriangleDraw,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["triangle"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
     content: renderSetUp(),
     title: "\u8BBE\u7F6E"
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleLineDraw,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["line"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
-    content: /*#__PURE__*/React__default.createElement("span", null, "\u6E05\u9664")
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+    content: /*#__PURE__*/React.createElement("span", null, "\u6E05\u9664")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleClear,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["clear"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
-    content: /*#__PURE__*/React__default.createElement("span", null, "\u5BFC\u51FA")
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+    content: /*#__PURE__*/React.createElement("span", null, "\u5BFC\u51FA")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleExport,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["export"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
-    content: /*#__PURE__*/React__default.createElement("span", null, "\u53EF\u9009\u4E2D")
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+    content: /*#__PURE__*/React.createElement("span", null, "\u53EF\u9009\u4E2D")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleSelectDraw,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["selected"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
-    content: /*#__PURE__*/React__default.createElement("span", null, "\u4E0D\u53EF\u9009\u4E2D")
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+    content: /*#__PURE__*/React.createElement("span", null, "\u4E0D\u53EF\u9009\u4E2D")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleUnselectDraw,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["noselected"])
     })
-  })), /*#__PURE__*/React__default.createElement(_Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     placement: "left",
-    content: /*#__PURE__*/React__default.createElement("span", null, "\u4FDD\u5B58")
-  }, /*#__PURE__*/React__default.createElement(_Button, {
+    content: /*#__PURE__*/React.createElement("span", null, "\u4FDD\u5B58")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleImgSave,
-    icon: /*#__PURE__*/React__default.createElement("span", {
+    icon: /*#__PURE__*/React.createElement("span", {
       className: classnames(styles["button-icon"], styles["save"])
     })
   })))))))));
 }
 export { MyImageEditor_Inner as default };
-//# sourceMappingURL=.root4.js.map