@alicloud/cloud-charts/es/aop/controller/legend.js


import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import RawLegendController from '@antv/g2/esm/chart/controller/legend';
import { CategoryLegend } from '@antv/g2/esm/dependents';
// 引入自定义的图例组件
import ReactLegend from '../component/reactLegend';
import { FullCrossName } from '../../constants'; // @ts-ignore

var WidgetsLegendController = /*#__PURE__*/function (_RawLegendController) {
  _inheritsLoose(WidgetsLegendController, _RawLegendController);

  function WidgetsLegendController(props) {
    var _this;

    _this = _RawLegendController.call(this, props) || this;
    _this.parentDom = void 0;
    _this.widgetsContainer = void 0;
    _this.parentDom = _this.view.getCanvas().get('el').parentNode.parentNode.parentNode;
    return _this;
  } // @ts-ignore


  var _proto = WidgetsLegendController.prototype;

  _proto.createCustomLegend = function createCustomLegend(geometry, attr, scale, legendOption) {
    // 直接使用 分类图例渲染
    // @ts-ignore
    var cfg = this.getCategoryCfg(geometry, attr, scale, legendOption, true);
    return new CategoryLegend(cfg);
  } // @ts-ignore
  ;

  _proto.createCategoryLegend = function createCategoryLegend(geometry, attr, scale, legendOption) {
    var _this$parentDom$getEl;

    // @ts-ignore
    var cfg = this.getCategoryCfg(geometry, attr, scale, legendOption);
    this.widgetsContainer = (_this$parentDom$getEl = this.parentDom.getElementsByClassName('widgets-legend')) === null || _this$parentDom$getEl === void 0 ? void 0 : _this$parentDom$getEl[0]; // const {
    //   autoCollapse,
    //   collapseRow,
    //   showData,
    //   marker,
    //   allowAllCanceled,
    //   hoverable,
    //   onHover,
    //   clickable,
    //   onClick,
    //   customConfig,
    //   maxWidth,
    //   maxHeight,
    //   maxWidthRatio,
    //   maxHeightRatio,
    //   useReverseChecked,
    //   table,
    //   foldable,
    //   dodge,
    // } = this.view?.widgetsCtx?.props?.config?.legend || {};
    // // 当以下配置项生效时，使用g2 原生legend
    // if (
    //   !table &&
    //   !foldable &&
    //   (autoCollapse ||
    //     collapseRow ||
    //     showData ||
    //     marker ||
    //     allowAllCanceled ||
    //     hoverable === false ||
    //     onHover ||
    //     clickable === false ||
    //     onClick ||
    //     customConfig ||
    //     maxWidth ||
    //     maxHeight ||
    //     maxWidthRatio ||
    //     maxHeightRatio ||
    //     useReverseChecked === false ||
    //     dodge)
    // ) {
    //   console.log('normal', this.view?.widgetsCtx?.props?.config?.legend);
    //   // 普通legend
    //   return new CategoryLegend(cfg);
    // }
    // 列表型legend及折叠型legend

    if (legendOption !== null && legendOption !== void 0 && legendOption.table || legendOption !== null && legendOption !== void 0 && legendOption.foldable) {
      if (!this.widgetsContainer) {
        var _legendOption$positio, _legendOption$positio2, _legendOption$positio3, _legendOption$positio4, _legendOption$positio5;

        this.widgetsContainer = document.createElement('div');
        this.widgetsContainer.className = FullCrossName + " widgets-legend";
        var position = legendOption === null || legendOption === void 0 ? void 0 : (_legendOption$positio = legendOption.position) === null || _legendOption$positio === void 0 ? void 0 : (_legendOption$positio2 = _legendOption$positio.split('-')) === null || _legendOption$positio2 === void 0 ? void 0 : _legendOption$positio2[0];
        var align = (_legendOption$positio3 = legendOption === null || legendOption === void 0 ? void 0 : (_legendOption$positio4 = legendOption.position) === null || _legendOption$positio4 === void 0 ? void 0 : (_legendOption$positio5 = _legendOption$positio4.split('-')) === null || _legendOption$positio5 === void 0 ? void 0 : _legendOption$positio5[1]) !== null && _legendOption$positio3 !== void 0 ? _legendOption$positio3 : 'center';
        var directionX = ['top', 'bottom'].includes(position) ? align === 'center' ? 'center' : align === 'left' || align === 'top' ? 'flex-start' : 'flex-end' : 'flex-start';
        var directionY = align === 'center' ? 'center' : align === 'left' || align === 'top' ? 'flex-start' : 'flex-end';
        this.widgetsContainer.style.cssText = "width: 100%; display: flex; justify-content: " + directionX + "; align-items: " + directionY + "; overflow-x: auto;overflow-y: hidden;";
        this.parentDom.appendChild(this.widgetsContainer);
      }

      this.widgetsContainer.style.visibility = 'visible';
      return new ReactLegend({
        cfg: cfg,
        container: this.widgetsContainer,
        chart: this.view,
        legendConfig: legendOption
      });
    }

    if (this.widgetsContainer) {
      this.widgetsContainer.style.visibility = 'hidden';
    } // 普通legend


    return new CategoryLegend(cfg);
  };

  _proto.clear = function clear() {
    _RawLegendController.prototype.clear.call(this);

    if (this.widgetsContainer) {
      this.widgetsContainer.style.visibility = 'hidden';
    }
  };

  _proto.destroy = function destroy() {
    _RawLegendController.prototype.destroy.call(this); // 销毁之前的legend widgetsContainer


    if (this.widgetsContainer) {
      this.parentDom.removeChild(this.widgetsContainer);
      this.widgetsContainer = null;
    }
  };

  return WidgetsLegendController;
}(RawLegendController);

export default WidgetsLegendController;