@fonixtree/magic-design 0.0.16 → 0.0.19

package/src/components/meta-comp/components/Text/index.js

@@ -0,0 +1,385 @@
+import { __extends, __assign, __decorate, __spreadArray } from '../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from '../../../../../my_node_modules/classnames/index.js';
+import { debounce, isEmpty } from 'lodash';
+import './index.less.js';
+import { convertIconClass } from '../../../common/Iconfont/index.js';
+import { store } from '../../../mobx/index.js';
+import metaDecorator from '../../../decorator/metaDecorator.js';
+import { computeStyle } from '../../../utils/businessUtil.js';
+import { isDesignMode } from '../../../utils/coreUtil.js';
+import { styleStringify } from '../../../utils/commonUtil.js';
+
+var contentStyle = function (content) {
+  return {
+    fontSize: window.magicDesign.device == 'pc' ? content.pcFontSize : content.fontSize,
+    fontFamily: content.fontFamily,
+    fontWeight: content.fontWeight,
+    fontStyle: content.fontStyle,
+    color: content.color,
+    backgroundColor: content.backgroundColor,
+    textAlign: content.textAlign,
+    width: window.magicDesign.device == 'mobile' ? '100%' : content.width || 'fit-content'
+  };
+};
+/** 从父级数组中 分离出 片段数组 */
+
+var calcSplitRange = function (parentRange, splitRange) {
+  if (parentRange[0] == splitRange[0]) {
+    if (parentRange[1] == splitRange[1]) {
+      return parentRange;
+    } else {
+      return [[parentRange[0], splitRange[1]], [splitRange[1], parentRange[1]]];
+    }
+  }
+
+  if (parentRange[1] == splitRange[1]) {
+    return [[parentRange[0], splitRange[0]], [splitRange[0], parentRange[1]]];
+  }
+
+  return [[parentRange[0], splitRange[0]], [splitRange[0], splitRange[1]], [splitRange[1], parentRange[1]]];
+};
+/** 驱动配置面板渲染 */
+
+
+var triggerTextConfigRender = function () {
+  window.document.dispatchEvent(new Event('text-render', {
+    bubbles: false
+  }));
+};
+/** 初始化监听事件 */
+
+
+var initSelectionEvent = function () {
+  if (!window.document.onselectionchange) {
+    window.document.onselectionchange = debounce(function (e) {
+      var _a;
+
+      var _b, _c, _d, _e;
+      /** 找到选中的text区域 并且注册过事件 */
+
+
+      var findSelectionTarget = window._selectionTarget.find(function (_a) {
+        var target = _a.target;
+        return target == e.target.activeElement;
+      });
+      /** 所有选中状态清楚 */
+
+
+      var clearSelection = function () {
+        store.setState({
+          textSelection: null
+        });
+        triggerTextConfigRender();
+      };
+
+      if (findSelectionTarget) {
+        var range = window.getSelection().getRangeAt(0);
+        var startOffset = range.startOffset,
+            endOffset = range.endOffset,
+            startContainer_1 = range.startContainer,
+            endContainer = range.endContainer;
+        /** 起始点=终点 取消 */
+
+        if (startOffset == endOffset) {
+          clearSelection();
+          return;
+        }
+        /** 如果全部选中 取消 */
+
+
+        if (startOffset == 0 && endOffset == findSelectionTarget.data.text.length) {
+          clearSelection();
+          return;
+        }
+        /** 判断起始点和结束点是否相同  */
+
+
+        if (startContainer_1 == endContainer) {
+          /** 如果还没有选中区域 */
+          if (findSelectionTarget.data.specialContent.length == 0) {
+            var nowRange_1 = [startOffset, endOffset].sort(function (a, b) {
+              return a - b;
+            });
+            var rangeList = calcSplitRange([0, findSelectionTarget.data.text.length], nowRange_1);
+            findSelectionTarget.data.specialContent = rangeList.map(function (range) {
+              return {
+                range: range,
+                content: {}
+              };
+            });
+            var findSelectionRange = (_b = findSelectionTarget.data.specialContent) === null || _b === void 0 ? void 0 : _b.find(function (c) {
+              return JSON.stringify(c.range) == JSON.stringify(nowRange_1);
+            });
+            store.setState({
+              textSelection: findSelectionRange.content
+            });
+          } else {
+            /** 如果已有选中区域 */
+            var nowRange_2 = [startOffset, endOffset].sort(function (a, b) {
+              return a - b;
+            });
+            var selectionRangeJSON_1 = Object.keys(findSelectionTarget.selectionRefMap).find(function (rangeTarget) {
+              return findSelectionTarget.selectionRefMap[rangeTarget] == startContainer_1.parentNode;
+            });
+            var findSelectionRangeTarget_1 = (_c = findSelectionTarget.data.specialContent) === null || _c === void 0 ? void 0 : _c.find(function (c) {
+              return JSON.stringify(c.range) == selectionRangeJSON_1;
+            });
+            /** 选中没配置过的区域 可以进行拆分 */
+
+            if (isEmpty(findSelectionRangeTarget_1.content)) {
+              /** 计算偏移值 */
+              nowRange_2[0] += findSelectionRangeTarget_1.range[0];
+              nowRange_2[1] += findSelectionRangeTarget_1.range[0];
+              /** 补充新的选中区域 */
+
+              if (JSON.stringify(findSelectionRangeTarget_1.range) != JSON.stringify(nowRange_2)) {
+                var rangeList = calcSplitRange(findSelectionRangeTarget_1.range, nowRange_2);
+                var nowContentIndex = (_d = findSelectionTarget.data.specialContent) === null || _d === void 0 ? void 0 : _d.findIndex(function (c) {
+                  return c == findSelectionRangeTarget_1;
+                });
+
+                (_a = findSelectionTarget.data.specialContent).splice.apply(_a, __spreadArray([nowContentIndex, 1], rangeList.map(function (range) {
+                  return {
+                    range: range,
+                    content: {}
+                  };
+                }), false));
+              }
+
+              var findSelectionRange = (_e = findSelectionTarget.data.specialContent) === null || _e === void 0 ? void 0 : _e.find(function (c) {
+                return JSON.stringify(c.range) == JSON.stringify(nowRange_2);
+              });
+              store.setState({
+                textSelection: findSelectionRange.content
+              });
+            } else {
+              /** 选中已经配置过的区域 不能拆分 */
+              store.setState({
+                textSelection: findSelectionRangeTarget_1.content
+              });
+            }
+          }
+        } else {
+          store.setState({
+            textSelection: null
+          });
+        }
+
+        findSelectionTarget.refresh();
+      }
+
+      triggerTextConfigRender();
+    }, 500);
+  }
+};
+/** 添加选择区域监听目标 */
+
+
+var appendSelectionTarget = function (data) {
+  if (!window._selectionTarget) {
+    window._selectionTarget = [__assign({}, data)];
+  } else {
+    window._selectionTarget.push(__assign({}, data));
+  }
+};
+/** 删除监听目标 */
+
+
+var deleteSelectionTarget = function (deleteTarget) {
+  window._selectionTarget = window._selectionTarget.filter(function (_a) {
+    var target = _a.target;
+    return target != deleteTarget;
+  });
+};
+
+var Text =
+/** @class */
+function (_super) {
+  __extends(Text, _super);
+
+  function Text() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    /** 分割区域dom映射 */
+
+    _this.selectionRefMap = {};
+    _this.textRef = /*#__PURE__*/React__default.createRef();
+    /** 备份历史数据 比对不一致时渲染 */
+
+    _this.preData = '';
+    _this.preTextSelection = null;
+    /** 创建关闭图标按钮 */
+
+    _this.createHoverClose = function (node, onCloseClick) {
+      if (onCloseClick === void 0) {
+        onCloseClick = function () {};
+      }
+
+      node.className = 'select-container';
+      var closeNode = document.createElement('span');
+      closeNode.className = 'close-wrap';
+      closeNode.contentEditable = 'false';
+      var iconNode = document.createElement('span');
+      iconNode.contentEditable = 'false';
+      iconNode.className = convertIconClass('icon-close-circle');
+      iconNode.onclick = onCloseClick;
+      closeNode.appendChild(iconNode);
+      node.appendChild(closeNode);
+    };
+
+    _this.renderText = function (data) {
+      if (!_this.textRef.current) return;
+
+      _this.textRef.current.blur();
+      /** 保留历史数据 */
+
+
+      _this.preData = JSON.stringify(data);
+      _this.preTextSelection = store.textSelection;
+      _this.preDevice = window.magicDesign.device;
+      /** 渲染html */
+
+      if (data.specialContent.length == 0) {
+        _this.textRef.current.innerHTML = data.text;
+      } else {
+        _this.textRef.current.innerHTML = '';
+        data.specialContent.forEach(function (c, index) {
+          var _a;
+
+          var node = document.createElement('span');
+          node.style = styleStringify(contentStyle(c.content));
+          node.innerText = (_a = data.text).slice.apply(_a, c.range);
+          _this.selectionRefMap[JSON.stringify(c.range)] = node;
+
+          _this.textRef.current.appendChild(node);
+          /** 找到当前选中的区域 */
+
+
+          if (store.textSelection == c.content) {
+            /** 添加删除按钮 */
+            _this.createHoverClose(node, function () {
+              /** 第一步去除选中区域 */
+              store.setState({
+                textSelection: null
+              });
+              /** 清空区间配置 */
+
+              data.specialContent[index].content = {};
+              /** 合并区间无配置区间 */
+
+              for (var i = 0; i < data.specialContent.length - 1;) {
+                /** 如果本级和下级都是空值 那么合并 */
+                if (isEmpty(data.specialContent[i].content) && isEmpty(data.specialContent[i + 1].content)) {
+                  data.specialContent[i].range = [data.specialContent[i].range[0], data.specialContent[i + 1].range[1]];
+                  data.specialContent.splice(i + 1, 1);
+                } else {
+                  i += 1;
+                }
+              }
+
+              triggerTextConfigRender();
+            });
+          }
+        });
+      }
+      /** 清除无用的node */
+
+
+      Object.keys(_this.selectionRefMap).forEach(function (key) {
+        if (!data.specialContent.find(function (c) {
+          return JSON.stringify(c.range) == key;
+        })) {
+          Reflect.deleteProperty(_this.selectionRefMap, key);
+        }
+      });
+    };
+
+    return _this;
+  }
+
+  Text.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.renderText(this.props.data);
+    initSelectionEvent();
+    appendSelectionTarget({
+      target: this.textRef.current,
+      data: this.props.data,
+      selectionRefMap: this.selectionRefMap,
+      refresh: function () {
+        _this.renderText(_this.props.data);
+      }
+    });
+  };
+
+  Text.prototype.shouldComponentUpdate = function (nextProps) {
+    var should1 = JSON.stringify(nextProps.data) != this.preData;
+    var should2 = store.textSelection != this.preTextSelection;
+    var should3 = window.magicDesign.device != this.preDevice;
+    var result = should1 || should2 || should3;
+
+    if (result) {
+      this.renderText(nextProps.data);
+    }
+
+    return result;
+  };
+
+  Text.prototype.componentWillUnmount = function () {
+    deleteSelectionTarget(this.textRef.current);
+  };
+
+  Text.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        data = _a.data,
+        className = _a.className,
+        readonly = _a.readonly,
+        onTextInput = _a.onTextInput;
+
+    var style = __assign(__assign({}, contentStyle(data.content)), {
+      textDecorationLine: data.underline.open ? 'underline' : 'none',
+      textDecorationColor: data.underline.textDecorationColor,
+      textDecorationStyle: data.underline.textDecorationStyle
+    });
+
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      ref: this.textRef,
+      className: classNames('m-meta-text', className),
+      contentEditable: isDesignMode() && !readonly,
+      onInput: function (e) {
+        var text = e.target.textContent;
+        data.text = text;
+        /** 毁灭吧 累了 */
+
+        data.specialContent = [];
+        /** 主动更新历史数据避免render */
+
+        _this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
+          text: text
+        }));
+        /** 通知变更 */
+
+        onTextInput(text);
+      },
+      onKeyDown: function (e) {
+        e.stopPropagation();
+      },
+      style: __assign(__assign({}, style), wrapStyle),
+      suppressContentEditableWarning: true
+    });
+  };
+
+  Text.defaultProps = {
+    readonly: false,
+    onTextInput: function () {}
+  };
+  Text = __decorate([metaDecorator], Text);
+  return Text;
+}(React__default.Component);
+
+export { contentStyle, Text as default };

package/src/components/meta-comp/components/Text/index.less.js

@@ -0,0 +1,6 @@
+import styleInject from '../../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".m-meta-text {\n  display: block;\n}\n.m-meta-text .select-container {\n  position: relative;\n}\n.m-meta-text .select-container .close-wrap {\n  user-select: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border: 1px dashed #cccccc;\n}\n.m-meta-text .select-container .close-wrap .magic-box-iconfont {\n  position: absolute;\n  top: 0;\n  right: 0;\n  font-size: 21px;\n  transform: translate(50%, -50%);\n  color: #ffffff;\n  text-shadow: 1px 1px 4px #000;\n}\n.m-meta-text .select-container .close-wrap .magic-box-iconfont:hover {\n  color: #f46868;\n  cursor: pointer;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/src/components/meta-comp/config-panels/BaseConfig.js

@@ -0,0 +1,47 @@
+import { __extends } from '../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import { renderPreview } from '../../utils/coreUtil.js';
+
+var BaseConfig =
+/** @class */
+function (_super) {
+  __extends(BaseConfig, _super);
+
+  function BaseConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    /**
+     *重新渲染展示区域
+     */
+
+
+    _this.reRenderViewArea = function () {
+      renderPreview();
+    };
+    /**
+     * 重新渲染一级配置面板
+     */
+
+
+    _this.reRenderConfig = function () {};
+    /**
+     * 重新渲染当前面板
+     */
+
+
+    _this.selfRender = function () {
+      _this.setState({});
+
+      _this.reRenderViewArea();
+    };
+
+    return _this;
+  }
+
+  BaseConfig.prototype.render = function () {
+    return /*#__PURE__*/React__default.createElement("div", null, "BaseMetaComponent");
+  };
+
+  return BaseConfig;
+}(Component);
+
+export { BaseConfig as default };