@antv/f6-plugin/lib/legend/index.js

F6 plugin

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _tslib = require("tslib");

var _base = _interopRequireDefault(require("../base"));

var _util = require("@antv/util");

var _f6Ui = require("@antv/f6-ui");

var _item = require("./item");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ALLOW_EVENTS = ['click', 'mouseenter'];
/**
 * 不支持mouseenter
 */

var Legend =
/** @class */
function (_super) {
  (0, _tslib.__extends)(Legend, _super);

  function Legend(config) {
    var _this = _super.call(this, config) || this;

    _this.active = [];
    _this.inActive = [];
    return _this;
  }

  Legend.prototype.getDefaultCfgs = function () {
    return {
      data: {},
      position: 'top',
      padding: 0,
      margin: 0,
      offsetX: -10,
      offsetY: 0,
      layout: 'horizontal',
      containerStyle: {},
      align: undefined,
      filter: {
        enable: false,
        trigger: 'click'
      },
      itemConfig: {
        width: 100,
        height: 50,
        fontSize: 12
      }
    };
  };

  Legend.prototype.init = function () {
    var _this = this;

    this.formatArray('padding');
    this.formatArray('margin');
    var filter = this.get('filter') || {};
    var multiple = filter.multiple;
    if (multiple) this.set('multiple', false);
    var align = this.get('align');

    if (!align) {
      var positions = this.get('position').split('-');
      if (positions.includes('left')) align = 'left';
      if (positions.includes('right')) align = 'right';else align = 'center';
      this.set('align', align);
    }

    setTimeout(function () {
      var size = _this.render();

      var pos = _this.getContainerPos(size);

      _this.get('graph').get('uiGroup').translate(pos.left, pos.top);

      _this.bindEvents();
    });
  };

  Legend.prototype.getContainerPos = function (size) {
    if (size === void 0) {
      size = [0, 0];
    }

    var self = this;
    var graph = self.get('graph');
    var offsetX = this.get('offsetX');
    var offsetY = this.get('offsetY');
    var margin = this.get('margin');
    var positions = this.get('position').split('-');
    var posIdxMap = {
      top: 0,
      right: 1,
      bottom: 2,
      left: 3
    };
    var x = 0,
        y = 0;
    var containerCSS = {
      left: (graph.getWidth() - size[0]) / 2 + x,
      top: (graph.getHeight() - size[1]) / 2 + y
    };
    positions.forEach(function (pos) {
      var marginValue = margin[posIdxMap[pos]];
      var key = pos;

      switch (pos) {
        case 'top':
          marginValue += y;
          break;

        case 'left':
          marginValue += x;
          break;

        case 'bottom':
          marginValue = graph.getHeight() - size[1] - marginValue + y;
          key = 'top';
          break;

        default:
          marginValue = graph.getWidth() - size[0] - marginValue + x;
          key = 'left';
          break;
      }

      containerCSS[key] = marginValue;
    });
    containerCSS.top += offsetY;
    containerCSS.left += offsetX;
    Object.keys(containerCSS).forEach(function (key) {
      containerCSS[key] = "" + containerCSS[key];
    });
    return containerCSS;
  }; // class-methods-use-this


  Legend.prototype.bindEvents = function () {
    var self = this;
    var filter = self.get('filter');
    if (!filter || !filter.enable) return;
    var trigger = filter.trigger || 'click';

    if (!ALLOW_EVENTS.includes(trigger)) {
      console.warn("Trigger for legend filterling must be 'click' or 'mouseenter', 'click' will take effect by default.");
      trigger = 'click';
    }

    var ui = this.get('legendUI');
    ui.on('tap', function (e) {
      var _a;

      if (((_a = e === null || e === void 0 ? void 0 : e.uiNode) === null || _a === void 0 ? void 0 : _a.getAttribute('class')) === 'node-container') {
        self.filterData(e.uiNode);
      } else {
        self.clearFilter();
        self.clearActiveLegend();
      }
    });
  };
  /**
   * 更新 legend 数据，开放给用户控制
   * @param param
   */


  Legend.prototype.changeData = function (data) {
    this.set('data', data);
    var size = this.render();
    var pos = this.getContainerPos(size);
    this.get('graph').get('uiGroup').translate(pos.left, pos.top);
  };

  Legend.prototype.goActive = function (node) {
    this.goDefault(node);
    var filter = this.get('filter');
    var stateStyles = (filter === null || filter === void 0 ? void 0 : filter.lengedStateStyles) || {};
    var legendActive = (stateStyles === null || stateStyles === void 0 ? void 0 : stateStyles.active) || {
      stroke: '#000',
      lineWidth: 2,
      'text-shape': {
        fontWeight: 'bold',
        opacity: 1
      }
    };
    node.query('shape').setStyle('borderColor', legendActive.stroke);
    node.query('shape').setStyle('borderWidth', legendActive.lineWidth);
    node.query('text').setStyle('fontWeight', legendActive['text-shape'].fontWeight);
    node.query('text').setStyle('opacity', legendActive['text-shape'].opacity);
    this.active.push(node);
    this.inActive.includes(node) && this.inActive.splice(this.inActive.indexOf(node), 1);
  };

  Legend.prototype.goDefault = function (node) {
    var originStyle = node.getAttribute('orignStyle');
    node.query('shape').setStyle('borderColor', originStyle.stroke);
    node.query('shape').setStyle('opacity', 1);
    node.query('shape').setStyle('borderWidth', originStyle.lineWidth || 1);
    node.query('text').setStyle('fontWeight', 'normal');
    node.query('text').setStyle('opacity', 1);
  };

  Legend.prototype.goInActive = function (node) {
    this.goDefault(node);
    var filter = this.get('filter');
    var stateStyles = (filter === null || filter === void 0 ? void 0 : filter.lengedStateStyles) || {};
    var legendInactive = (stateStyles === null || stateStyles === void 0 ? void 0 : stateStyles.inactive) || {
      opacity: 0.5,
      'text-shape': {
        opacity: 0.5
      }
    };
    node.query('shape').setStyle('opacity', legendInactive.opacity);
    node.query('text').setStyle('opacity', legendInactive['text-shape'].opacity);
    this.inActive.push(node);
    this.active.includes(node) && this.active.splice(this.active.indexOf(node), 1);
  };

  Legend.prototype.activateLegend = function (node) {
    var _this = this;

    var filter = this.get('filter');
    var multiple = filter === null || filter === void 0 ? void 0 : filter.multiple;
    if (!multiple) this.clearActiveLegend();
    if (this.active.includes(node)) return;
    var ui = this.get('legendUI');
    var nodes = ui.queryAll('.node-container');
    this.goActive(node);
    nodes.forEach(function (node) {
      if (_this.active.includes(node)) return;

      _this.goInActive(node);
    });
  };

  Legend.prototype.clearActiveLegend = function () {
    var _this = this;

    var ui = this.get('legendUI');
    var nodes = ui.queryAll('.node-container');
    nodes.forEach(function (node) {
      _this.goDefault(node);
    });
    this.active = [];
    this.inActive = [];
  };
  /**
   * 高亮和置灰图例，并过滤主图元素
   * @param param
   */


  Legend.prototype.filterData = function (activeNode) {
    var _this = this;

    var filter = this.get('filter');
    var filterFunctions = filter === null || filter === void 0 ? void 0 : filter.filterFunctions;
    if (!filter || !filterFunctions) return;
    var graph = this.get('graph');
    var activeState = filter.graphActiveState || 'active';
    var inactiveState = filter.graphInactiveState || 'inactive';
    var multiple = filter.multiple;
    this.clearFilter();
    if (!multiple) this.clearActiveLegend();

    if (this.active.includes(activeNode)) {
      this.goInActive(activeNode);
    } else {
      // 设置 legend 的高亮状态
      this.activateLegend(activeNode);
    }

    if (this.active.length === 0) {
      var ui = this.get('legendUI');
      ui.queryAll('.node-container').forEach(function (child) {
        return _this.goDefault(child);
      });
    }

    var activeCount = 0;
    var typeFuncs = ['getNodes', 'getEdges'];
    typeFuncs.forEach(function (typeFunc) {
      graph[typeFunc]().forEach(function (graphItem) {
        var active = false;

        _this.active.forEach(function (node) {
          var func = filterFunctions[node.getAttribute('legendId')];
          active = active || func(graphItem.getModel());
        });

        if (active) {
          graph.setItemState(graphItem, inactiveState, false);
          graph.setItemState(graphItem, activeState, true);
          activeCount++;
        } else {
          graph.setItemState(graphItem, activeState, false);
          graph.setItemState(graphItem, inactiveState, true);
        }
      });
    });
    if (!activeCount) typeFuncs.forEach(function (typeFunc) {
      graph[typeFunc]().forEach(function (graphItem) {
        graph.clearItemStates(graphItem, [inactiveState]);
      });
    });
  };
  /**
   * 清除主图相关状态
   * @param param
   */


  Legend.prototype.clearFilter = function () {
    // 清除 legend 的高亮状态
    var graph = this.get('graph');
    var filter = this.get('filter');
    if (!filter) return;
    var activeState = filter.graphActiveState || 'active';
    var inactiveState = filter.graphInactiveState || 'inactive';
    graph.getNodes().forEach(function (node) {
      graph.clearItemStates(node, [activeState, inactiveState]);
    });
    graph.getEdges().forEach(function (edge) {
      graph.clearItemStates(edge, [activeState, inactiveState]);
    });
  };
  /**
   * 渲染 legend 图
   * @param param
   */


  Legend.prototype.render = function () {
    var _a, _b;

    var _this = this;

    this.processData();
    var itemsData = this.get('itemsData');
    var itemTypes = ['nodes', 'edges']; // 创建单个节点

    var nodes = [[], []];
    itemTypes.forEach(function (itemType, i) {
      itemsData[itemType].forEach(function (data) {
        var style = _this.getStyle(itemType.substr(0, 4), data);

        nodes[i].push((0, _item.createItem)(data, style, _this.get('itemConfig')));
      });
    }); // 创建title

    var title = this.get('title');
    var html = " \n    <div class='g6-legend-container'>\n      " + (title && "<div class='text-container'>" + title + "</div>") + "\n      <div class='node-wrap'>\n        <div class='node-row'> </div>\n        <div class='edge-row'> </div>\n      </div>  \n    </div>";
    var defaultTitleStyle = {
      fontSize: 20,
      fontFamily: 'Arial',
      fontWeight: 300,
      textBaseline: 'top',
      textAlign: 'center',
      fill: '#000'
    };
    var titleConfig = this.get('titleConfig') || {};
    var titleStyle = Object.assign(defaultTitleStyle, titleConfig.style || {});
    var containerStyle = this.get('containerStyle');
    var padding = this.get('padding');
    var margin = this.get('margin'); // flex-direction: ${this.get('layout') === 'vertical' ? 'column' : 'row'};

    var css = "\n      .g6-legend-container{\n        width: " + this.get('width') + ";\n        height: " + this.get('height') + ";\n        padding: " + padding.join(' ') + ";\n        margin: " + margin.join(' ') + ";\n        background: " + (containerStyle.fill || '#f00') + ";\n        border: " + (containerStyle.lineWidth || '1') + " solid " + (containerStyle.stroke || '#000') + ";\n        opacity: " + (containerStyle.opacity || '0.5') + "\n      }\n      .text-container {\n        font-size: " + titleStyle.fontSize + ";\n        font-family: " + titleStyle.fontFamily + ";\n        font-weight: " + titleStyle.fontWeight + ";\n        text-align: " + titleStyle.textAlign + ";\n        color: " + titleStyle.fill + ";\n        height: " + titleStyle.fontSize + ";\n        background-opacity: 0;\n        top:  " + titleConfig.offsetY + ";\n        left: " + titleConfig.offsetX + ";\n      }\n      .edge-row, .node-row {\n        display: flex;\n        flex-direction: " + (this.get('layout') === 'vertical' ? 'column' : 'row') + ";\n        flex-wrap: nowrap;\n        justify-content: space-between;\n        background-opacity: 0;\n      }\n      .node-wrap {\n        flex: 1;\n        flex-direction: " + (this.get('layout') === 'vertical' ? 'row' : 'column') + ";\n        justify-content: space-between;\n        background-opacity: 0;\n      }\n    ";
    var ui = (0, _f6Ui.createUI)(html, css, this.get('graph').get('uiGroup'));

    (_a = ui.query('.node-row')).appendChild.apply(_a, nodes[0]);

    (_b = ui.query('.edge-row')).appendChild.apply(_b, nodes[1]);

    this.set('legendUI', ui);
    return [ui.width, ui.height];
  };

  Legend.prototype.processData = function () {
    var data = this.get('data');
    var itemsData = {
      nodes: [],
      edges: []
    };

    if (data.nodes) {
      data.nodes.sort(function (a, b) {
        return a.order - b.order;
      });
      data.nodes.forEach(function (node) {
        var _a, _b, _c, _d, _e;

        var size = node.size || [((_a = node.style) === null || _a === void 0 ? void 0 : _a.width) || ((_b = node.style) === null || _b === void 0 ? void 0 : _b.r) || 8, ((_c = node.style) === null || _c === void 0 ? void 0 : _c.height) || ((_d = node.style) === null || _d === void 0 ? void 0 : _d.r) || 8];
        var labelStyle = ((_e = node.labelCfg) === null || _e === void 0 ? void 0 : _e.style) || {};
        itemsData.nodes.push({
          id: node.id || (0, _util.uniqueId)(),
          type: node.type || 'circle',
          style: (0, _tslib.__assign)({}, node.style),
          order: node.order,
          label: node.label,
          itemType: 'node',
          size: size,
          labelCfg: {
            position: 'right',
            style: (0, _tslib.__assign)({
              fontFamily: 'Arial'
            }, labelStyle)
          }
        });
      });
    }

    if (data.edges) {
      data.edges.sort(function (a, b) {
        return a.order - b.order;
      });
      data.edges.forEach(function (edge) {
        var _a, _b;

        var type = edge.type || 'line';
        if (edge.type === 'cubic-horizontal') type = 'cubic';
        var labelStyle = ((_a = edge.labelCfg) === null || _a === void 0 ? void 0 : _a.style) || {};
        var size = edge.size || [((_b = edge.style) === null || _b === void 0 ? void 0 : _b.width) || 8, 1];
        itemsData.edges.push({
          id: edge.id || (0, _util.uniqueId)(),
          type: type,
          size: size,
          style: (0, _tslib.__assign)({
            lineWidth: (0, _util.isArray)(size) ? size[1] : 1
          }, edge.style),
          order: edge.order,
          label: edge.label,
          itemType: 'edge',
          labelCfg: {
            position: 'right',
            style: (0, _tslib.__assign)({
              fontFamily: 'Arial'
            }, labelStyle)
          }
        });
      });
    }

    this.set('itemsData', itemsData);
  };

  Legend.prototype.formatArray = function (key) {
    var value = this.get(key);
    if ((0, _util.isNumber)(value)) this.set(key, [value, value, value, value]);else if ((0, _util.isArray)(value)) {
      switch (value.length) {
        case 0:
          this.set(key, [0, 0, 0, 0]);
          break;

        case 1:
          this.set(key, [value[0], value[0], value[0], value[0]]);
          break;

        case 2:
          this.set(key, [value[0], value[1], value[0], value[1]]);
          break;

        case 3:
          this.set(key, [value[0], value[1], value[2], value[1]]);
          break;

        default:
          break;
      }
    }
    return this.get(key);
  };

  Legend.prototype.getStyle = function (type, data) {
    var defaultStyle = type === 'node' ? {
      fill: '#ccc',
      lineWidth: 0
    } : {
      stroke: '#000',
      lineWidth: 1
    };
    return (0, _tslib.__assign)((0, _tslib.__assign)({}, defaultStyle), data.style || {});
  };

  Legend.prototype.destroy = function () {
    var graph = this.get('graph');
    var graphContainer = graph.get('container');
    var container = this.get('container');
    graphContainer.removeChild(container);
  };

  return Legend;
}(_base.default);

var _default = Legend;
exports.default = _default;