coolcare-lite-scada-component 1.0.0

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

@@ -0,0 +1,186 @@
+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, InputNumber, Radio, Tooltip, Select } from 'antd';
+import { AlignLeftOutlined, AlignCenterOutlined, AlignRightOutlined, UnderlineOutlined, StrikethroughOutlined, StopOutlined } from '@ant-design/icons';
+import { useModel } from 'umi';
+import { useDebounceFn } from 'ahooks';
+import FontFamilySelect from "../../../../../components/FontFamilySelect";
+import ColorPicker from "../../../../../components/ColorPicker";
+var Option = Select.Option;
+var FormPropsText = function FormPropsText() {
+  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 _ref = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.getData().fontStyles) || {},
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      color = _ref.color,
+      fontWeight = _ref.fontWeight,
+      lineHeight = _ref.lineHeight,
+      letterSpacing = _ref.letterSpacing,
+      textAlign = _ref.textAlign,
+      textDecoration = _ref.textDecoration;
+    form.setFieldsValue({
+      fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : 14,
+      fontFamily: fontFamily ? fontFamily.split(',') : [],
+      color: color !== null && color !== void 0 ? color : '#000000',
+      fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 'normal',
+      lineHeight: lineHeight !== null && lineHeight !== void 0 ? lineHeight : 1.57,
+      letterSpacing: letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : 0,
+      textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : 'left',
+      textDecoration: textDecoration !== null && textDecoration !== void 0 ? textDecoration : 'none'
+    });
+  }, [form, activeNode]);
+  var _useDebounceFn = useDebounceFn(function (values) {
+      activeNode === null || activeNode === void 0 ? void 0 : activeNode.setData({
+        fontStyles: _objectSpread(_objectSpread({}, values), {}, {
+          fontFamily: values.fontFamily.join(',')
+        })
+      });
+    }, {
+      leading: false,
+      wait: 500
+    }),
+    updateProps = _useDebounceFn.run;
+  var onFormChange = function onFormChange(changedValues, values) {
+    updateProps(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, {
+    name: "fontFamily",
+    label: "\u5B57\u4F53"
+  }, /*#__PURE__*/React.createElement(FontFamilySelect, null))), /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "color",
+    label: "\u989C\u8272"
+  }, /*#__PURE__*/React.createElement(ColorPicker, null)), /*#__PURE__*/React.createElement("span", {
+    className: "half-form-item-space"
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "fontSize",
+    label: "\u5927\u5C0F\uFF08px\uFF09"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    min: 12,
+    placeholder: "",
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "lineHeight",
+    label: "\u884C\u8DDD"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    style: {
+      width: '100%'
+    },
+    step: 0.1,
+    min: 1,
+    max: 20
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "half-form-item-space"
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "letterSpacing",
+    label: "\u5B57\u95F4\u8DDD\uFF08px\uFF09"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    style: {
+      width: '100%'
+    },
+    min: 0,
+    max: 50
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "fontWeight",
+    label: "\u7C97\u7EC6"
+  }, /*#__PURE__*/React.createElement(Select, null, /*#__PURE__*/React.createElement(Option, {
+    value: "normal"
+  }, "\u6807\u51C6"), /*#__PURE__*/React.createElement(Option, {
+    value: "bold"
+  }, "\u52A0\u7C97"), /*#__PURE__*/React.createElement(Option, {
+    value: "100"
+  }, "100"), /*#__PURE__*/React.createElement(Option, {
+    value: ""
+  }, "200"), /*#__PURE__*/React.createElement(Option, {
+    value: "300"
+  }, "300"), /*#__PURE__*/React.createElement(Option, {
+    value: "400"
+  }, "400"), /*#__PURE__*/React.createElement(Option, {
+    value: "500"
+  }, "500"), /*#__PURE__*/React.createElement(Option, {
+    value: "600"
+  }, "600"), /*#__PURE__*/React.createElement(Option, {
+    value: "700"
+  }, "700"), /*#__PURE__*/React.createElement(Option, {
+    value: "800"
+  }, "800"), /*#__PURE__*/React.createElement(Option, {
+    value: "900"
+  }, "900")))), /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "textAlign"
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    size: "small"
+  }, /*#__PURE__*/React.createElement(Radio.Button, {
+    value: "left"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u5DE6\u5BF9\u9F50"
+  }, /*#__PURE__*/React.createElement(AlignLeftOutlined, null))), /*#__PURE__*/React.createElement(Radio.Button, {
+    value: "center"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u5C45\u4E2D"
+  }, /*#__PURE__*/React.createElement(AlignCenterOutlined, null))), /*#__PURE__*/React.createElement(Radio.Button, {
+    value: "right"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u53F3\u5BF9\u9F50"
+  }, /*#__PURE__*/React.createElement(AlignRightOutlined, null))))), /*#__PURE__*/React.createElement("span", {
+    className: "half-form-item-space"
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    className: "half-form-item",
+    name: "textDecoration"
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    size: "small"
+  }, /*#__PURE__*/React.createElement(Radio.Button, {
+    value: "none"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "none"
+  }, /*#__PURE__*/React.createElement(StopOutlined, null))), /*#__PURE__*/React.createElement(Radio.Button, {
+    value: "underline"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u4E0B\u5212\u7EBF"
+  }, /*#__PURE__*/React.createElement(UnderlineOutlined, null))), /*#__PURE__*/React.createElement(Radio.Button, {
+    value: "line-through"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u4E2D\u5212\u7EBF"
+  }, /*#__PURE__*/React.createElement(StrikethroughOutlined, null)))))));
+};
+export default FormPropsText;

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

@@ -0,0 +1,222 @@
+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, InputNumber, Button, Modal, Input, Select, Row, Col } from 'antd';
+import { useDebounceFn } from 'ahooks';
+import { useModel } from 'umi';
+import { DeleteOutlined } from '@ant-design/icons';
+import ImageUploader from "../../../../../components/ImageUploader";
+import ColorPicker from "../../../../../components/ColorPicker";
+import FormItem from 'antd/lib/form/FormItem';
+var Option = Select.Option;
+var dimensionsOptions = ['341.5*192', '187.5*200', '1024*768', '1280*800', '1366*768', '1440*900', '1600*900', '1920*1080', '自定义'];
+var LayerForm = function LayerForm() {
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useModel = useModel('useEditor', function (model) {
+      return {
+        pageConfig: model.pageConfig,
+        setPageConfig: model.setPageConfig,
+        graphCoreRef: model.graphCoreRef
+      };
+    }),
+    pageConfig = _useModel.pageConfig,
+    setPageConfig = _useModel.setPageConfig,
+    graphCoreRef = _useModel.graphCoreRef;
+  var _useDebounceFn = useDebounceFn(function (changedValues, values) {
+      var _graphCoreRef$current, _graphCoreRef$current2;
+      var title = values.title,
+        remark = values.remark,
+        backgroundColor = values.backgroundColor,
+        borderRadius = values.borderRadius,
+        backgroundImage = values.backgroundImage,
+        dimensionsSelectValue = values.dimensionsSelectValue;
+      var width = values.width,
+        height = values.height;
+      if (dimensionsSelectValue !== '自定义') {
+        var _dimensionsSelectValu = dimensionsSelectValue.split('*'),
+          _dimensionsSelectValu2 = _slicedToArray(_dimensionsSelectValu, 2),
+          width_ = _dimensionsSelectValu2[0],
+          height_ = _dimensionsSelectValu2[1];
+        width = Number(width_);
+        height = Number(height_);
+      }
+      (_graphCoreRef$current = graphCoreRef.current) === null || _graphCoreRef$current === void 0 ? void 0 : _graphCoreRef$current.scadaResize(width, height);
+      (_graphCoreRef$current2 = graphCoreRef.current) === null || _graphCoreRef$current2 === void 0 ? void 0 : _graphCoreRef$current2.scadaSetBg(backgroundColor, backgroundImage, borderRadius);
+      setPageConfig(_objectSpread(_objectSpread({}, pageConfig), {}, {
+        dimensions: {
+          width: width,
+          height: height
+        },
+        remark: remark,
+        title: title,
+        backgroundColor: backgroundColor,
+        backgroundImage: backgroundImage,
+        borderRadius: borderRadius
+      }));
+    }, {
+      leading: false,
+      wait: 500
+    }),
+    run = _useDebounceFn.run;
+  useEffect(function () {
+    var title = pageConfig.title,
+      remark = pageConfig.remark,
+      backgroundColor = pageConfig.backgroundColor,
+      borderRadius = pageConfig.borderRadius,
+      dimensions = pageConfig.dimensions,
+      backgroundImage = pageConfig.backgroundImage;
+    form.setFieldsValue({
+      width: dimensions.width,
+      height: dimensions.height,
+      backgroundColor: backgroundColor,
+      backgroundImage: backgroundImage,
+      borderRadius: borderRadius,
+      // @ts-ignore
+      dimensionsSelectValue: dimensionsOptions.includes( // @ts-ignore
+      "".concat(dimensions.width, "*").concat(dimensions.height)) ? "".concat(dimensions.width, "*").concat(dimensions.height) : '自定义',
+      title: title,
+      remark: remark
+    });
+  }, [pageConfig, form]);
+  var onFormChange = function onFormChange(changedValues, values) {
+    run(changedValues, values);
+  };
+  var handleSelectChange = function handleSelectChange(val) {
+    if (val !== '自定义') {
+      var _val$split = val.split('*'),
+        _val$split2 = _slicedToArray(_val$split, 2),
+        width = _val$split2[0],
+        height = _val$split2[1];
+      form.setFieldsValue({
+        width: Number(width),
+        height: Number(height)
+      });
+    }
+  };
+  var handleDeleteBgImg = function handleDeleteBgImg() {
+    Modal.confirm({
+      title: '删除',
+      content: '确认要删除背景图片？',
+      okText: '删除',
+      okButtonProps: {
+        type: 'primary',
+        danger: true
+      },
+      onOk: function onOk() {
+        var _graphCoreRef$current3;
+        setPageConfig({
+          backgroundImage: ''
+        });
+        (_graphCoreRef$current3 = graphCoreRef.current) === null || _graphCoreRef$current3 === void 0 ? void 0 : _graphCoreRef$current3.removeScadaContainerBackgroundImage();
+      },
+      cancelText: '取消'
+    });
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    size: "small",
+    colon: false,
+    labelCol: {
+      span: 6
+    },
+    style: {
+      marginTop: '10px'
+    },
+    autoComplete: "off",
+    onValuesChange: onFormChange
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "dimensionsSelectValue",
+    label: "\u5206\u8FA8\u7387"
+  }, /*#__PURE__*/React.createElement(Select, {
+    disabled: !pageConfig.dimensionEditable,
+    onChange: handleSelectChange
+  }, dimensionsOptions.map(function (item) {
+    return /*#__PURE__*/React.createElement(Option, {
+      key: item,
+      value: item
+    }, item);
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true,
+    shouldUpdate: true
+  }, function (_ref) {
+    var getFieldValue = _ref.getFieldValue;
+    return /*#__PURE__*/React.createElement(Row, {
+      gutter: 12
+    }, /*#__PURE__*/React.createElement(Col, {
+      span: 9,
+      offset: 6
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: "width",
+      label: ""
+    }, /*#__PURE__*/React.createElement(InputNumber, {
+      disabled: !pageConfig.dimensionEditable || getFieldValue('dimensionsSelectValue') !== '自定义',
+      min: 100,
+      style: {
+        width: '100%'
+      }
+    }))), /*#__PURE__*/React.createElement(Col, {
+      span: 9
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: "height",
+      label: ""
+    }, /*#__PURE__*/React.createElement(InputNumber, {
+      disabled: !pageConfig.dimensionEditable || getFieldValue('dimensionsSelectValue') !== '自定义',
+      min: 100,
+      style: {
+        width: '100%'
+      }
+    }))));
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "borderRadius",
+    label: "\u5706\u89D2"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    min: 0
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "backgroundColor",
+    label: "\u80CC\u666F\u989C\u8272"
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    style: {
+      width: '90px'
+    }
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    label: "\u80CC\u666F\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(FormItem, {
+    name: "backgroundImage",
+    noStyle: true,
+    normalize: function normalize(value) {
+      return value.url;
+    }
+  }, /*#__PURE__*/React.createElement(ImageUploader, {
+    filePath: "\u7EC4\u6001\u56FE\u7247/\u7528\u6237\u4E0A\u4F20/"
+  })), pageConfig.backgroundImage && /*#__PURE__*/React.createElement(Button, {
+    onClick: handleDeleteBgImg,
+    danger: true,
+    type: "link"
+  }, /*#__PURE__*/React.createElement(DeleteOutlined, null))), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "title",
+    label: "\u6807\u9898"
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u672A\u547D\u540D\u7684\u7EC4\u6001"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "remark",
+    label: "\u5907\u6CE8"
+  }, /*#__PURE__*/React.createElement(Input.TextArea, {
+    placeholder: "\u672A\u547D\u540D\u7684\u7EC4\u6001",
+    rows: 4,
+    maxLength: 300
+  })));
+};
+export default LayerForm;

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

@@ -0,0 +1,26 @@
+.panel-right :global .ant-tabs-top > .ant-tabs-nav {
+  margin: 0;
+}
+.panel-right :global .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap {
+  justify-content: center;
+}
+.panel-right :global .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding: 0;
+}
+.panel-right :global .ant-collapse-content-box {
+  padding: 0;
+}
+.panel-right :global .ant-tabs-content {
+  padding: 0 10px;
+}
+.panel-right :global .ant-form-item {
+  margin-bottom: 12px;
+}
+.panel-right :global .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding-left: 0;
+  font-weight: 500;
+  font-size: 13px;
+}
+.panel-right :global .ant-form-item-label > label {
+  font-size: 12px;
+}

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

@@ -0,0 +1,164 @@
+var _PropsSetComponentMap;
+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 _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); }
+import React from "react";
+import { Tabs, Collapse, Empty } from 'antd';
+import { useModel } from 'umi';
+import { CaretRightOutlined } from '@ant-design/icons';
+import { shapeName as shapeNameElePointValue } from "../../../element/ElePointValue";
+import ElePointValuePropsSet from "../../../element/ElePointValue/PropsSet";
+import { shapeName as shapeNameElePointState } from "../../../element/ElePointState";
+import ElePointStatePropsSet from "../../../element/ElePointState/PropsSet";
+import { shapeName as shapeNameElePointImage } from "../../../element/ElePointImage";
+import ElePointImagePropsSet from "../../../element/ElePointImage/PropsSet";
+import { shapeName as shapeNameEleClock } from "../../../element/EleClock";
+import EleClockDataSetComponent from "../../../element/EleClock/PropsSet";
+import { shapeName as shapeNameEleGauge } from "../../../element/EleGauge";
+import EleGaugePropsSet from "../../../element/EleGauge/PropsSet";
+import { shapeName as shapeNameEleIndicatorLight } from "../../../element/EleIndicatorLight";
+import EleIndicatorLightPropsSet from "../../../element/EleIndicatorLight/PropsSet";
+import { shapeName as shapeNameEleShine } from "../../../element/EleShine";
+import EleShinePropsSet from "../../../element/EleShine/PropsSet";
+import { shapeName as shapeNameEleIcon } from "../../../element/EleIcon";
+import EleIconPropsSet from "../../../element/EleIcon/PropsSet";
+import { shapeName as shapeNameEleDeviceName } from "../../../element/EleDeviceName";
+import EleDeviceNamePropsSet from "../../../element/EleDeviceName/PropsSet";
+import { shapeName as shapeNameEleDeviceUpdateTime } from "../../../element/EleDeviceUpdateTime";
+import EleDeviceUpdateTimePropsSet from "../../../element/EleDeviceUpdateTime/PropsSet";
+import { shapeName as shapeNameEleDeviceState } from "../../../element/EleDeviceState";
+import EleDeviceStatePropsSet from "../../../element/EleDeviceState/PropsSet";
+import { shapeName as shapeNameEleImage } from "../../../element/EleImage";
+import EleImagePropsSet from "../../../element/EleImage/PropsSet";
+import { shapeName as shapeNameEleContainer } from "../../../element/EleContainer";
+import { shapeName as shapeNameEleDecoration1 } from "../../../element/Decoration/Decoration1";
+import { shapeName as shapeNameEleDecoration2 } from "../../../element/Decoration/Decoration2";
+import { shapeName as shapeNameEleDecoration3 } from "../../../element/Decoration/Decoration3";
+import { shapeName as shapeNameEleDecoration4 } from "../../../element/Decoration/Decoration4";
+import { shapeName as shapeNameEleDecoration5 } from "../../../element/Decoration/Decoration5";
+import { shapeName as shapeNameEleDecoration6 } from "../../../element/Decoration/Decoration6";
+import { shapeName as shapeNameEleDecoration8 } from "../../../element/Decoration/Decoration8";
+import { shapeName as shapeNameEleDecoration10 } from "../../../element/Decoration/Decoration10";
+import EleDecorationPropsSet from "../../../element/Decoration/PropsSet";
+import { shapeName as shapeNameEleBorderBox1 } from "../../../element/BorderBox/BorderBox1";
+import { shapeName as shapeNameEleBorderBox2 } from "../../../element/BorderBox/BorderBox2";
+import { shapeName as shapeNameEleBorderBox3 } from "../../../element/BorderBox/BorderBox3";
+import { shapeName as shapeNameEleBorderBox4 } from "../../../element/BorderBox/BorderBox4";
+import { shapeName as shapeNameEleBorderBox5 } from "../../../element/BorderBox/BorderBox5";
+import { shapeName as shapeNameEleBorderBox6 } from "../../../element/BorderBox/BorderBox6";
+import { shapeName as shapeNameEleBorderBox7 } from "../../../element/BorderBox/BorderBox7";
+import { shapeName as shapeNameEleBorderBox8 } from "../../../element/BorderBox/BorderBox8";
+import { shapeName as shapeNameEleBorderBox9 } from "../../../element/BorderBox/BorderBox9";
+import { shapeName as shapeNameEleBorderBox10 } from "../../../element/BorderBox/BorderBox10";
+import { shapeName as shapeNameEleBorderBox12 } from "../../../element/BorderBox/BorderBox12";
+import { shapeName as shapeNameEleBorderBox13 } from "../../../element/BorderBox/BorderBox13";
+import EleBorderPropsSet from "../../../element/BorderBox/PropsSet";
+import { shapeName as shapeNameElePointList } from "../../../element/ElePointList";
+import ElePointListPropsSet from "../../../element/ElePointList/PropsSet";
+import { shapeName as shapeNameEleButton } from "../../../element/EleButton";
+import EleButtonPropsSet from "../../../element/EleButton/PropsSet";
+import { shapeName as shapeNameEleSwitch } from "../../../element/EleSwitch";
+import EleSwitchPropsSet from "../../../element/EleSwitch/PropsSet";
+import { shapeName as shapeNameEleFan } from "../../../element/EleFan";
+import EleFanPropsSet from "../../../element/EleFan/PropsSet";
+import { shapeName as shapeNameEdgePipe } from "../../../edge/EdgePipe";
+import EdgePipePropsSet from "../../../edge/EdgePipe/PropsSet";
+import { shapeName as shapeNameEdgeLinePort } from "../../../edge/EdgeLinePort";
+import EdgeLinePortPropsSet from "../../../edge/EdgeLinePort/PropsSet";
+import { shapeName as shapeNameElePointListCard } from "../../../element/PointCard/PointListCard";
+import ElePointListCardPropsSet from "../../../element/PointCard/PointListCard/PropsSet";
+import { shapeName as shapeNameElePointCard1 } from "../../../element/PointCard/PointCard1";
+import ElePointCard1PropsSet from "../../../element/PointCard/PointCard1/PropsSet";
+import { shapeName as shapeNameElePointCard2 } from "../../../element/PointCard/PointCard2";
+import ElePointCard2PropsSet from "../../../element/PointCard/PointCard2/PropsSet";
+import { shapeName as shapeNameElePointCard3 } from "../../../element/PointCard/PointCard3";
+import ElePointCard3PropsSet from "../../../element/PointCard/PointCard3/PropsSet";
+import { shapeName as shapeNameElePointControl1 } from "../../../element/PointControl/PointControl1";
+import ElePointControl1PropsSet from "../../../element/PointControl/PointControl1/PropsSet";
+import { shapeName as shapeNameElePointControl3 } from "../../../element/PointControl/PointControl3";
+import ElePointControl3PropsSet from "../../../element/PointControl/PointControl3/PropsSet";
+import FormLayer from "./components/FormLayer";
+import FormEleLayout from "./components/FormEleLayout";
+import FormEleBorderStyle from "./components/FormEleBorderStyle";
+import FormBindEvent from "./components/FormBindEvent";
+import FormFontStyle from "./components/FormFontStyle";
+import FormFillStyle from "./components/FormFillStyle";
+import FormElePadding from "./components/FormElePadding";
+import BasicShapePropsForm from "../../../element/BasicShape/PropsForm";
+import styles from "./index.css";
+var PropsSetComponentMap = (_PropsSetComponentMap = {}, _defineProperty(_PropsSetComponentMap, shapeNameElePointValue, ElePointValuePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointState, ElePointStatePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointImage, ElePointImagePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointList, ElePointListPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleFan, EleFanPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleClock, EleClockDataSetComponent), _defineProperty(_PropsSetComponentMap, shapeNameEleGauge, EleGaugePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleIndicatorLight, EleIndicatorLightPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleShine, EleShinePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleIcon, EleIconPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDeviceName, EleDeviceNamePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDeviceUpdateTime, EleDeviceUpdateTimePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDeviceState, EleDeviceStatePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleImage, EleImagePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDecoration1, EleDecorationPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDecoration2, EleDecorationPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDecoration3, EleDecorationPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDecoration4, EleDecorationPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDecoration5, EleDecorationPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDecoration6, EleDecorationPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDecoration8, EleDecorationPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleDecoration10, EleDecorationPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox1, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox2, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox3, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox4, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox5, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox6, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox7, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox8, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox9, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox10, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox12, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleBorderBox13, EleBorderPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEdgePipe, EdgePipePropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEdgeLinePort, EdgeLinePortPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointListCard, ElePointListCardPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointCard1, ElePointCard1PropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointCard2, ElePointCard2PropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointCard3, ElePointCard3PropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointControl1, ElePointControl1PropsSet), _defineProperty(_PropsSetComponentMap, shapeNameElePointControl3, ElePointControl3PropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleButton, EleButtonPropsSet), _defineProperty(_PropsSetComponentMap, shapeNameEleSwitch, EleSwitchPropsSet), _PropsSetComponentMap);
+var TabPane = Tabs.TabPane;
+var Panel = Collapse.Panel;
+var PanelRight = function PanelRight() {
+  var _activeNode$shapeName;
+  var _useModel = useModel('useEditor', function (model) {
+      return {
+        activeNode: model.activeNode,
+        activeEdge: model.activeEdge
+      };
+    }),
+    activeNode = _useModel.activeNode,
+    activeEdge = _useModel.activeEdge;
+  var shapeName = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.prop('shape')) || (activeEdge === null || activeEdge === void 0 ? void 0 : activeEdge.prop('shape'));
+  var PropsSetComponent = function PropsSetComponent() {
+    return /*#__PURE__*/React.createElement(Empty, {
+      imageStyle: {
+        marginTop: 30
+      },
+      description: "\u6682\u65E0\u914D\u7F6E\u9879"
+    });
+  };
+  if (shapeName && Object.keys(PropsSetComponentMap).includes(shapeName)) {
+    PropsSetComponent = PropsSetComponentMap[shapeName];
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['panel-right']
+  }, activeNode && shapeName !== shapeNameEleContainer && /*#__PURE__*/React.createElement(Tabs, {
+    defaultActiveKey: "1"
+  }, /*#__PURE__*/React.createElement(TabPane, {
+    tab: "\u5C5E\u6027",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(PropsSetComponent, null)), /*#__PURE__*/React.createElement(TabPane, {
+    tab: "\u5916\u89C2",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(Collapse, {
+    defaultActiveKey: ['1', '2'],
+    ghost: true,
+    expandIcon: function expandIcon(_ref) {
+      var isActive = _ref.isActive;
+      return /*#__PURE__*/React.createElement(CaretRightOutlined, {
+        rotate: isActive ? 90 : 0
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Panel, {
+    header: "\u4F4D\u7F6E\u548C\u5927\u5C0F",
+    key: "1"
+  }, activeNode ? /*#__PURE__*/React.createElement(FormEleLayout, null) : null), /*#__PURE__*/React.createElement(Panel, {
+    header: "\u586B\u5145",
+    key: "2"
+  }, activeNode ? /*#__PURE__*/React.createElement(FormFillStyle, null) : null), /*#__PURE__*/React.createElement(Panel, {
+    header: "\u8FB9\u6846",
+    key: "3"
+  }, (activeNode === null || activeNode === void 0 ? void 0 : (_activeNode$shapeName = activeNode.shapeName) === null || _activeNode$shapeName === void 0 ? void 0 : _activeNode$shapeName.includes('ele-basic-shape')) ? /*#__PURE__*/React.createElement(BasicShapePropsForm, null) : /*#__PURE__*/React.createElement(FormEleBorderStyle, null)), /*#__PURE__*/React.createElement(Panel, {
+    header: "\u8FB9\u8DDD",
+    key: "4"
+  }, activeNode ? /*#__PURE__*/React.createElement(FormElePadding, null) : null), activeNode ? /*#__PURE__*/React.createElement(Panel, {
+    header: "\u6587\u672C",
+    key: "5"
+  }, /*#__PURE__*/React.createElement(FormFontStyle, null)) : null)), /*#__PURE__*/React.createElement(TabPane, {
+    tab: "\u4E8B\u4EF6",
+    key: "3"
+  }, /*#__PURE__*/React.createElement(FormBindEvent, null))), activeEdge && /*#__PURE__*/React.createElement(Tabs, {
+    defaultActiveKey: "1"
+  }, /*#__PURE__*/React.createElement(TabPane, {
+    tab: "\u8FB9\u8BBE\u7F6E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(PropsSetComponent, null))), !activeNode && !activeEdge && /*#__PURE__*/React.createElement(Tabs, {
+    defaultActiveKey: "-1"
+  }, /*#__PURE__*/React.createElement(TabPane, {
+    tab: "\u9875\u9762\u8BBE\u7F6E",
+    key: "-1"
+  }, /*#__PURE__*/React.createElement(FormLayer, null))));
+};
+export default PanelRight;

package/es/pages/editor/PanelRight/index.less.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'panel-right': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/es/pages/editor/PanelTop/FullScreen/index.js

@@ -0,0 +1,31 @@
+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 { Tooltip } from 'antd';
+import { useFullscreen } from 'ahooks';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+var FullScreen = function FullScreen(_ref) {
+  var className = _ref.className,
+    mouseEnterDelay = _ref.mouseEnterDelay,
+    iconClassName = _ref.iconClassName;
+  var _useFullscreen = useFullscreen(document.documentElement),
+    _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+    isFullscreen = _useFullscreen2[0],
+    toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: isFullscreen ? '退出' : '全屏',
+    mouseEnterDelay: mouseEnterDelay
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: toggleFullscreen,
+    className: className
+  }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, {
+    className: iconClassName
+  }) : /*#__PURE__*/React.createElement(FullscreenOutlined, {
+    className: iconClassName
+  })));
+};
+export default FullScreen;