@antv/f2/es/components/treemap/withTreemap.js

import { __assign, __extends, __spreadArray } from "tslib";
import { jsx, Component, isEqual as equal, createRef } from '@antv/f-engine';
import { Category } from '../../attr';
import CoordController from '../../controller/coord';
import { hierarchy, treemap, treemapBinary } from '../../deps/d3-hierarchy/src';
import Theme from '../../theme';
import { deepMix, each, isFunction } from '@antv/util';
var withTreemap = function withTreemap(View) {
  return /** @class */function (_super) {
    __extends(Treemap, _super);
    function Treemap(props, context) {
      var _this = _super.call(this, props, context) || this;
      var color = props.color,
        data = props.data,
        theme = props.theme,
        _a = props.selection,
        selection = _a === void 0 ? {} : _a;
      var px2hd = context.px2hd;
      context.theme = deepMix(px2hd(Theme), theme);
      _this.coord = new CoordController();
      _this.color = new Category(__assign(__assign({
        range: context.theme.colors
      }, color), {
        data: data
      }));
      var _b = selection.defaultSelected,
        defaultSelected = _b === void 0 ? null : _b;
      _this.state.selected = defaultSelected;
      _this.coordRef = createRef();
      _this.records = [];
      return _this;
    }
    Treemap.prototype.isSelected = function (record) {
      var state = this.state;
      var selected = state.selected;
      if (!selected || !selected.length) {
        return false;
      }
      for (var i = 0, len = selected.length; i < len; i++) {
        var item = selected[i];
        if (equal(record, item)) {
          return true;
        }
      }
      return false;
    };
    Treemap.prototype.getSelectionStyle = function (record) {
      var _a = this,
        state = _a.state,
        props = _a.props;
      var selected = state.selected;
      if (!selected || !selected.length) {
        return null;
      }
      var selection = props.selection;
      var selectedStyle = selection.selectedStyle,
        unSelectedStyle = selection.unSelectedStyle;
      var isSelected = this.isSelected(record);
      if (isSelected) {
        return isFunction(selectedStyle) ? selectedStyle(record) : selectedStyle;
      }
      return isFunction(unSelectedStyle) ? unSelectedStyle(record) : unSelectedStyle;
    };
    Treemap.prototype.willMount = function () {
      var _a = this,
        props = _a.props,
        coord = _a.coord,
        layout = _a.layout;
      var coordOption = props.coord;
      coord.updateLayout(layout);
      coord.create(coordOption);
    };
    Treemap.prototype.willReceiveProps = function (nextProps) {
      var nextSelection = nextProps.selection;
      var lastSelection = this.props.selection;
      if (!nextSelection || !lastSelection) {
        return;
      }
      var nextDefaultSelected = nextSelection.defaultSelected;
      var lastDefaultSelected = lastSelection.defaultSelected;
      if (!equal(nextDefaultSelected, lastDefaultSelected)) {
        this.state.selected = nextDefaultSelected;
      }
    };
    Treemap.prototype.treemapLayout = function () {
      var _this = this;
      var _a = this,
        props = _a.props,
        coord = _a.coord,
        colorAttr = _a.color;
      var _b = coord.getCoord(),
        width = _b.width,
        height = _b.height;
      var data = props.data,
        value = props.value,
        _c = props.space,
        space = _c === void 0 ? 0 : _c;
      var root = hierarchy({
        children: data
      }).sum(function (d) {
        return d[value];
      }).sort(function (a, b) {
        return b[value] - a[value];
      });
      var treemapLayout = treemap()
      // 默认treemapSquarify
      .tile(treemapBinary).round(false).size([width, height])
      // .padding(1);
      .paddingInner(space);
      // .paddingOuter(options.paddingOuter)
      // .paddingTop(options.paddingTop)
      // .paddingRight(options.paddingRight)
      // .paddingBottom(options.paddingBottom)
      // .paddingLeft(options.paddingLeft);
      var nodes = treemapLayout(root);
      return nodes.children.map(function (item) {
        var data = item.data,
          x0 = item.x0,
          y0 = item.y0,
          x1 = item.x1,
          y1 = item.y1;
        var color = colorAttr.mapping(data[colorAttr.field]);
        var rect = {
          xMin: x0,
          xMax: x1,
          yMin: y0,
          yMax: y1
        };
        var style = _this.getSelectionStyle(data);
        return __assign(__assign({
          key: data.key,
          origin: data,
          color: color
        }, rect), {
          style: style
        });
      });
    };
    Treemap.prototype.select = function (ev, trigger) {
      var _this = this;
      var points = ev.points,
        x = ev.canvasX,
        y = ev.canvasY;
      var _a = this.props.selection,
        selection = _a === void 0 ? {} : _a;
      var triggerOn = selection.triggerOn,
        _b = selection.type,
        type = _b === void 0 ? 'single' : _b,
        _c = selection.cancelable,
        cancelable = _c === void 0 ? true : _c;
      if (!triggerOn || trigger !== triggerOn) return;
      var point = triggerOn === 'click' ? {
        x: x,
        y: y
      } : points[0];
      var selected = this.state.selected;
      var origin = [];
      each(this.records, function (record) {
        if (point.x >= record.xMin && point.x <= record.xMax && point.y >= record.yMin && point.y <= record.yMax) {
          origin.push(record === null || record === void 0 ? void 0 : record.origin);
        }
      });
      // 没选中元素
      if (!origin) {
        this.setState({
          selected: null
        });
        return;
      }
      if (!selected) {
        this.setState({
          selected: origin
        });
        return;
      }
      // 单选
      var newSelected = [];
      origin.forEach(function (record) {
        if (!_this.isSelected(record)) {
          newSelected.push(record);
        }
      });
      if (type === 'single') {
        this.setState({
          selected: cancelable ? newSelected : origin
        });
        return;
      }
      this.setState({
        selected: __spreadArray(__spreadArray([], newSelected, true), selected, true)
      });
    };
    Treemap.prototype.render = function () {
      var _this = this;
      var nodes = this.treemapLayout();
      this.records = nodes;
      var _a = this,
        props = _a.props,
        coord = _a.coord;
      var _b = coord.getCoord(),
        width = _b.width,
        height = _b.height;
      return jsx("group", {
        style: {
          width: width,
          height: height,
          fill: 'transparent'
        },
        onClick: function onClick(ev) {
          return _this.select(ev, 'click');
        },
        onPress: function onPress(ev) {
          return _this.select(ev, 'press');
        }
      }, jsx(View, __assign({
        nodes: nodes
      }, props, {
        coord: coord.getCoord()
      })));
    };
    return Treemap;
  }(Component);
};
export default withTreemap;