@antv/f2/lib/jsx/render.js

Charts for mobile visualization.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.render = render;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _util = require("../util");
var _util2 = require("@antv/util");
var _cssLayout = _interopRequireDefault(require("./css-layout"));
var _shape = _interopRequireDefault(require("./shape"));
var _animation = _interopRequireDefault(require("./animation"));
var _elementStatus = require("./elementStatus");
var _createClipElement = _interopRequireDefault(require("./createClipElement"));
// 转换成布局所需要的布局树
function createNodeTree(element, container, px2hd) {
  var key = element.key,
    ref = element.ref,
    _cache = element._cache,
    type = element.type,
    props = element.props,
    status = element.status,
    animation = element.animation;
  var children = (0, _util.extendMap)(props.children, function (child) {
    return createNodeTree(child, container, px2hd);
  });
  // const { style, attrs } = props;
  var style = px2hd(props.style);
  var attrs = px2hd(props.attrs);
  // 文本要自动计算文本的宽高, TODO, 后面再优化
  if (type === 'text') {
    var shape = container.addShape(type, {
      attrs: (0, _objectSpread2.default)({
        x: 0,
        y: 0
      }, attrs)
    });
    var _shape$getBBox = shape.getBBox(),
      width = _shape$getBBox.width,
      height = _shape$getBBox.height;
    style = (0, _objectSpread2.default)({
      width: width,
      height: height
    }, style);
    // 无用，销毁掉
    shape.remove(true);
  }
  return {
    key: key,
    ref: ref,
    _cache: _cache,
    type: type,
    props: props,
    children: children,
    status: status,
    animation: animation,
    // 处理px2hd之后的配置
    style: style,
    attrs: attrs
  };
}
function mergeLayout(parent, layout) {
  if (!parent || !layout) return layout;
  var parentLeft = parent.left,
    parentTop = parent.top;
  var left = layout.left,
    top = layout.top;
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, layout), {}, {
    left: parentLeft + left,
    top: parentTop + top
  });
}
function createElement(node, container, parentLayout, animate) {
  var _node$_cache = node._cache,
    _cache = _node$_cache === void 0 ? {} : _node$_cache,
    ref = node.ref,
    type = node.type,
    props = node.props,
    attrs = node.attrs,
    originLayout = node.layout,
    renderChildren = node.renderChildren,
    nodeChildren = node.children,
    status = node.status,
    animation = node.animation;
  var layout = mergeLayout(parentLayout, originLayout);
  // 该元素上一次的attrs
  var lastAttrs = _cache.attrs;
  var elementAttrs = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _shape.default)(type, layout)), status === _elementStatus.ELEMENT_DELETE ? lastAttrs : null), attrs);
  // 缓存这次新的attrs
  _cache.attrs = elementAttrs;
  if (elementAttrs.clip) {
    var clip = elementAttrs.clip;
    var clipConfig = (0, _util2.isFunction)(clip) ? clip(elementAttrs) : clip;
    elementAttrs.clip = (0, _createClipElement.default)(clipConfig.type, clipConfig);
  }
  var element;
  if (type === 'group') {
    element = container.addGroup((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _util2.omit)(props, ['children'])), {}, {
      status: status,
      attrs: elementAttrs
    }));
    // 如果元素被删除了，就不会有renderChildren， 直接拿node.children渲染
    var children = renderChildren ? renderChildren : nodeChildren;
    // 只有group才需要处理children
    if (children && children.length) {
      for (var i = 0, len = children.length; i < len; i++) {
        createElement(children[i], element, layout, animate);
      }
    }
  } else {
    element = container.addShape(type, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
      status: status,
      attrs: elementAttrs
    }));
  }
  if (animate !== false) {
    element.set('animation', (0, _animation.default)(element, animation, elementAttrs, lastAttrs));
  }
  if (ref) {
    ref.current = element;
  }
  return element;
}
// 过滤删除的元素，让其不参与布局计算
function filterDeleteElement(node) {
  var status = node.status,
    children = node.children;
  if (status === _elementStatus.ELEMENT_DELETE) {
    return null;
  }
  if (!children || !children.length) {
    return node;
  }
  var newChildren = children.filter(function (child) {
    return !!filterDeleteElement(child);
  });
  // 要保留引用
  node.children = newChildren;
  node.renderChildren = children;
  return node;
}
function render(element, container, animate) {
  var px2hd = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _util.px2hd;
  if (!element) {
    return;
  }
  var nodeTree = createNodeTree(element, container, px2hd);
  var computeLayoutTree = filterDeleteElement(nodeTree);
  (0, _cssLayout.default)(computeLayoutTree);
  return createElement(nodeTree, container, null, animate);
}
var _default = function _default(element, container, animate) {
  return render(element, container, animate);
};
exports.default = _default;