@fonixtree/magic-design 0.0.13 → 0.0.16

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

@@ -1,385 +0,0 @@
-import { __extends, __assign, __decorate, __spreadArray } from '../../../../../my_my_node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
-import classNames from '../../../../../my_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

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_m-meta-text__4g6d0 {\n  display: block;\n}\n.index_m-meta-text__4g6d0 .index_select-container__tUvJE {\n  position: relative;\n}\n.index_m-meta-text__4g6d0 .index_select-container__tUvJE .index_close-wrap__IItPw {\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.index_m-meta-text__4g6d0 .index_select-container__tUvJE .index_close-wrap__IItPw .index_magic-box-iconfont__8UEh8 {\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.index_m-meta-text__4g6d0 .index_select-container__tUvJE .index_close-wrap__IItPw .index_magic-box-iconfont__8UEh8:hover {\n  color: #f46868;\n  cursor: pointer;\n}\n";
-styleInject(css_248z);

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

@@ -1,47 +0,0 @@
-import { __extends } from '../../../../my_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 };