coolcare-lite-scada-component 1.0.0

package/es/pages/editor/PanelRight/components/FormEleBorderStyle/index.js

@@ -0,0 +1,145 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React from "react";
+import { useEffect } from 'react';
+import { Form, Select, InputNumber, Tooltip, Input } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { useDebounceFn } from 'ahooks';
+import { useModel } from 'umi';
+import ColorPicker from "../../../../../components/ColorPicker";
+import BoxShadowPicker from "../../../../../components/BoxShadowPicker";
+var Option = Select.Option;
+var FormEleStyle = function FormEleStyle() {
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useModel = useModel('useEditor', function (model) {
+      return {
+        activeNode: model.activeNode
+      };
+    }),
+    activeNode = _useModel.activeNode;
+  var _useDebounceFn = useDebounceFn(function (values) {
+      var valuesCopy = _objectSpread({}, values);
+      if (typeof valuesCopy.borderRadius === 'string' && !valuesCopy.borderRadius.includes('%')) {
+        try {
+          valuesCopy.borderRadius = Number(valuesCopy.borderRadius);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+      activeNode === null || activeNode === void 0 ? void 0 : activeNode.setData({
+        borderStyles: valuesCopy
+      }, {
+        deep: false
+      });
+    }, {
+      leading: false,
+      wait: 500
+    }),
+    updateStyle = _useDebounceFn.run;
+  useEffect(function () {
+    var _ref = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.getData().borderStyles) || {},
+      borderWidth = _ref.borderWidth,
+      borderColor = _ref.borderColor,
+      borderStyle = _ref.borderStyle,
+      borderRadius = _ref.borderRadius,
+      opacity = _ref.opacity,
+      boxShadow = _ref.boxShadow;
+    form.setFieldsValue({
+      borderWidth: borderWidth !== null && borderWidth !== void 0 ? borderWidth : 0,
+      borderStyle: borderStyle !== null && borderStyle !== void 0 ? borderStyle : 'none',
+      borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : 'transparent',
+      borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : 0,
+      opacity: opacity !== null && opacity !== void 0 ? opacity : 100,
+      boxShadow: boxShadow
+    });
+  }, [activeNode, form]);
+  var onFormChange = function onFormChange(changedValues, values) {
+    updateStyle(values);
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    layout: "vertical",
+    form: form,
+    size: "small",
+    onValuesChange: onFormChange
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "borderStyle",
+    label: "\u7EBF\u6761\u6837\u5F0F"
+  }, /*#__PURE__*/React.createElement(Select, null, /*#__PURE__*/React.createElement(Option, {
+    value: "none"
+  }, "none"), /*#__PURE__*/React.createElement(Option, {
+    value: "solid"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 80 1",
+    className: "inline-block align-middle",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h80v1H0z"
+  }))), /*#__PURE__*/React.createElement(Option, {
+    value: "dotted"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 80 1",
+    "aria-hidden": "true",
+    className: "inline-block align-middle"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 1h1V0H0v1zm4 0h1V0H4v1zm4 0h1V0H8v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1zm4 0h1V0h-1v1z"
+  }))), /*#__PURE__*/React.createElement(Option, {
+    value: "dashed"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 80 1",
+    "aria-hidden": "true",
+    className: "inline-block align-middle"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 1h5V0H0v1zm9 0h5V0H9v1zm10 0h5V0h-5v1zm9 0h5V0h-5v1zm10 0h5V0h-5v1zm9 0h5V0h-5v1zm9 0h5V0h-5v1zm10 0h5V0h-5v1zm9 0h5V0h-5v1z"
+  }))))), /*#__PURE__*/React.createElement("span", {
+    className: "half-form-item-space"
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "borderWidth",
+    label: "\u7EBF\u6761\u5BBD\u5EA6\uFF08px\uFF09"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    min: 0,
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "borderRadius",
+    label: /*#__PURE__*/React.createElement("span", null, "\u5706\u89D2\xA0", /*#__PURE__*/React.createElement(Tooltip, {
+      title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "\u767E\u5206\u6BD4\uFF0C\u5982 50%\u300120%"), /*#__PURE__*/React.createElement("div", null, "\u50CF\u7D20\uFF0C\u5982 10\u30012"))
+    }, /*#__PURE__*/React.createElement(QuestionCircleOutlined, null)))
+  }, /*#__PURE__*/React.createElement(Input, {
+    style: {
+      width: '100%'
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "half-form-item-space"
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "borderColor",
+    label: "\u7EBF\u6761\u989C\u8272"
+  }, /*#__PURE__*/React.createElement(ColorPicker, null))), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "boxShadow",
+    label: "\u9634\u5F71"
+  }, /*#__PURE__*/React.createElement(BoxShadowPicker, null)));
+};
+export default FormEleStyle;

package/es/pages/editor/PanelRight/components/FormEleLayout/index.css

@@ -0,0 +1,8 @@
+.lock-icon {
+  position: absolute;
+  top: 36px;
+  left: 50%;
+  transform: translate(-50%);
+  cursor: pointer;
+  font-size: 11px;
+}

package/es/pages/editor/PanelRight/components/FormEleLayout/index.js

@@ -0,0 +1,214 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React from "react";
+import { useEffect, useRef } from 'react';
+import { Form, InputNumber } from 'antd';
+import { useDebounceFn } from 'ahooks';
+import { useModel } from 'umi';
+import LockBtn from "../../../../../components/LockBtn";
+import styles from "./index.css";
+var FormEleLayout = function FormEleLayout() {
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useModel = useModel('useEditor', function (model) {
+      return {
+        activeNode: model.activeNode
+      };
+    }),
+    activeNode = _useModel.activeNode;
+  var previousSize = useRef();
+  useEffect(function () {
+    var handleSizeChange = function handleSizeChange(_ref) {
+      var current = _ref.current;
+      previousSize.current = current;
+      form.setFieldsValue(current);
+    };
+    var handleAngleChange = function handleAngleChange(_ref2) {
+      var current = _ref2.current;
+      form.setFieldsValue({
+        angle: current
+      });
+    };
+    var handlePositionChange = function handlePositionChange(_ref3) {
+      var current = _ref3.current;
+      form.setFieldsValue({
+        top: current.y,
+        left: current.x
+      });
+    };
+    var handleDataChange = function handleDataChange(_ref4) {
+      var current = _ref4.current;
+      form.setFieldsValue({
+        keepRatio: current.keepRatio
+      });
+    };
+    if (activeNode) {
+      var size = activeNode.getSize();
+      var _activeNode$getData = activeNode.getData(),
+        keepRatio = _activeNode$getData.keepRatio;
+      var angle = activeNode.getAngle();
+      var _activeNode$getPositi = activeNode.getPosition(),
+        x = _activeNode$getPositi.x,
+        y = _activeNode$getPositi.y;
+      previousSize.current = size;
+      form.setFieldsValue(_objectSpread(_objectSpread({
+        keepRatio: keepRatio !== null && keepRatio !== void 0 ? keepRatio : false
+      }, size), {}, {
+        angle: angle,
+        top: y,
+        left: x
+      }));
+      activeNode.on('change:position', handlePositionChange);
+      activeNode.on('change:size', handleSizeChange);
+      activeNode.on('change:angle', handleAngleChange);
+      activeNode.on('change:data', handleDataChange);
+    }
+    return function () {
+      activeNode === null || activeNode === void 0 ? void 0 : activeNode.off('change:size', handleSizeChange);
+      activeNode === null || activeNode === void 0 ? void 0 : activeNode.off('change:angle', handleAngleChange);
+      activeNode === null || activeNode === void 0 ? void 0 : activeNode.off('change:position', handlePositionChange);
+    };
+  }, [activeNode, form]);
+  var _useDebounceFn = useDebounceFn(function (changedValues) {
+      if (!activeNode) {
+        return;
+      }
+      var _form$getFieldsValue = form.getFieldsValue(),
+        width = _form$getFieldsValue.width,
+        height = _form$getFieldsValue.height,
+        top = _form$getFieldsValue.top,
+        left = _form$getFieldsValue.left,
+        keepRatio = _form$getFieldsValue.keepRatio;
+      var _ref5 = previousSize.current,
+        preWidth = _ref5.width,
+        preHeight = _ref5.height;
+      var size;
+      if ('width' in changedValues) {
+        size = {
+          width: changedValues.width,
+          height: keepRatio ? changedValues.width / preWidth * preHeight : height
+        };
+      }
+      if ('height' in changedValues) {
+        size = {
+          width: keepRatio ? changedValues.height / preHeight * preWidth : width,
+          height: changedValues.height
+        };
+      }
+      if (size) {
+        activeNode.setSize(size);
+        previousSize.current = size;
+      }
+      if ('top' in changedValues) {
+        activeNode.setPosition({
+          x: left,
+          y: changedValues.top
+        });
+      }
+      if ('left' in changedValues) {
+        activeNode.setPosition({
+          x: changedValues.left,
+          y: top
+        });
+      }
+      if ('angle' in changedValues) {
+        activeNode.rotate(changedValues.angle, {
+          absolute: true
+        });
+      }
+      if ('keepRatio' in changedValues) {
+        var _window$graph, _window$graph2;
+        activeNode.setData({
+          keepRatio: changedValues.keepRatio
+        }, {
+          deep: false
+        });
+        (_window$graph = window.graph) === null || _window$graph === void 0 ? void 0 : _window$graph.unselect(activeNode);
+        (_window$graph2 = window.graph) === null || _window$graph2 === void 0 ? void 0 : _window$graph2.select(activeNode);
+      }
+    }, {
+      leading: false,
+      wait: 500
+    }),
+    updateEleStyle = _useDebounceFn.run;
+  var onFormChange = function onFormChange(changedValues) {
+    updateEleStyle(changedValues);
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    layout: "vertical",
+    form: form,
+    size: "small",
+    onValuesChange: onFormChange
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "left",
+    label: "x\uFF08px\uFF09"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    min: 1,
+    style: {
+      width: '100%'
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "half-form-item-space"
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "top",
+    label: "y\uFF08px\uFF09"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    min: 2,
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "width",
+    label: "\u5BBD\u5EA6\uFF08px\uFF09"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    min: 1,
+    style: {
+      width: '100%'
+    }
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "keepRatio",
+    className: "half-form-item-space"
+  }, /*#__PURE__*/React.createElement(LockBtn, {
+    className: styles['lock-icon']
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "height",
+    label: "\u9AD8\u5EA6\uFF08px\uFF09"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    min: 2,
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "angle",
+    label: "\u65CB\u8F6C\uFF08\xB0\uFF09"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    min: 0,
+    max: 360,
+    style: {
+      width: '100%'
+    }
+  }))));
+};
+export default FormEleLayout;

package/es/pages/editor/PanelRight/components/FormElePadding/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import FormNodeData from "../../../../../components/FormNodeData";
+import Margin_Padding from "../../../../../components/Margin_Padding";
+var FormElePadding = function FormElePadding() {
+  return /*#__PURE__*/React.createElement(FormNodeData, {
+    label: "\u5185\u8FB9\u8DDD",
+    direction: "column",
+    path: "margin_padding.padding"
+  }, /*#__PURE__*/React.createElement(Margin_Padding, null));
+};
+export default FormElePadding;

package/es/pages/editor/PanelRight/components/FormFillStyle/index.js

@@ -0,0 +1,92 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React from "react";
+import { useEffect } from 'react';
+import { Form } from 'antd';
+import { useDebounceFn } from 'ahooks';
+import { useModel } from 'umi';
+import ColorPicker from "../../../../../components/ColorPicker";
+import SliderWithInput from "../../../../../components/SliderWithInput";
+var FormEleStyle = function FormEleStyle() {
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useModel = useModel('useEditor', function (model) {
+      return {
+        activeNode: model.activeNode
+      };
+    }),
+    activeNode = _useModel.activeNode;
+  useEffect(function () {
+    var _backgroundColor;
+    if (!activeNode || !form) {
+      return;
+    }
+    var _ref = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.getData().fillStyles) || {},
+      opacity = _ref.opacity,
+      backgroundColor = _ref.backgroundColor;
+
+    // @ts-ignore
+    if (activeNode.shapeName.includes('ele-basic-shape')) {
+      backgroundColor = activeNode.attr('body/fill');
+      opacity = activeNode.attr('body/opacity');
+    }
+    form.setFieldsValue({
+      backgroundColor: (_backgroundColor = backgroundColor) !== null && _backgroundColor !== void 0 ? _backgroundColor : 'transparent',
+      opacity: typeof opacity === 'number' ? opacity * 100 : 100
+    });
+  }, [activeNode, form]);
+  var _useDebounceFn = useDebounceFn(function (values) {
+      var valuesCopy = _objectSpread({}, values);
+      if (typeof valuesCopy.opacity === 'number') {
+        valuesCopy.opacity = valuesCopy.opacity / 100;
+      }
+
+      // @ts-ignore
+      if (activeNode === null || activeNode === void 0 ? void 0 : activeNode.shapeName.includes('ele-basic-shape')) {
+        activeNode.attr('body/fill', values.backgroundColor);
+        activeNode.attr('body/opacity', valuesCopy.opacity);
+        return;
+      }
+      activeNode === null || activeNode === void 0 ? void 0 : activeNode.setData({
+        fillStyles: valuesCopy
+      }, {
+        deep: false
+      });
+    }, {
+      leading: false,
+      wait: 500
+    }),
+    updateStyle = _useDebounceFn.run;
+  var onFormChange = function onFormChange(changedValues, values) {
+    updateStyle(values);
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    layout: "vertical",
+    form: form,
+    size: "small",
+    onValuesChange: onFormChange
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "backgroundColor",
+    label: "\u586B\u5145\u989C\u8272",
+    className: "half-form-item"
+  }, /*#__PURE__*/React.createElement(ColorPicker, null)), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "opacity",
+    label: "\u900F\u660E\u5EA6\uFF081% - 100%\uFF09"
+  }, /*#__PURE__*/React.createElement(SliderWithInput, {
+    unit: "%",
+    min: 0,
+    max: 100
+  })));
+};
+export default FormEleStyle;