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

F6 plugin

"use strict";

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

var _tslib = require("tslib");

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

function createItem(data, style, itemConfig) {
  var attrs;
  var shapeType = data.type;

  var _a = getShapeSize(data),
      width = _a.width,
      height = _a.height,
      r = _a.r;

  switch (data.type) {
    case 'circle':
      attrs = {
        r: r,
        x: 0,
        y: 0
      };
      break;

    case 'rect':
      attrs = {
        width: width,
        height: height,
        x: -width / 2,
        y: -height / 2
      };
      break;

    case 'ellipse':
      attrs = {
        r1: width,
        r2: height,
        x: 0,
        y: 0
      };
      break;

    case 'line':
      attrs = {
        x1: -width / 2,
        y1: 0,
        x2: width / 2,
        y2: 0
      };
      shapeType = 'line';
      break;

    case 'quadratic':
      attrs = {
        path: [['M', -width / 2, 0], ['Q', 0, width / 2, width / 2, 0]]
      };
      shapeType = 'path';
      break;

    case 'cubic':
      attrs = {
        path: [['M', -width / 2, 0], ['C', -width / 6, width / 2, width / 6, -width / 2, width / 2, 0]]
      };
      shapeType = 'path';
      break;

    default:
      attrs = {
        r: r,
        x: 0,
        y: 0
      };
      break;
  }

  var html = "\n  <div class='node-container' orignStyle=" + JSON.stringify(style) + " legendId=" + data.id + ">\n    <shape type='" + shapeType + "' class='" + data.type + "-node-keyShape' \n      " + Object.entries(attrs).reduce(function (prev, cur) {
    return prev += " " + cur[0] + "=" + cur[1] + " ";
  }, '') + "\n    />\n    " + (data.label && " <div class='text'>" + data.label + "</div>") + "\n  </div>\n";
  var labelStyle = (0, _tslib.__assign)({
    textAlign: 'begin',
    fontSize: 12,
    fill: '#000',
    opacity: 1,
    fontWeight: 'normal'
  }, data.labelStyle);
  var css = "\n    .node-container {\n      width: " + itemConfig.width + ";\n      height: " + (itemConfig.height || Math.max(height, itemConfig.fontSize)) + ";\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      background-opacity: 0;\n      font-size: " + labelStyle.fontSize + ";\n      margin: " + itemConfig.margin + "\n    }\n    shape {\n      top: " + height / 2 + ";\n      left: " + width / 2 + ";\n      width: " + width + ";\n      height: " + height + ";\n      background: " + style.fill + ";\n      border: " + (style.lineWidth || '1') + " solid " + style.stroke + ";\n      margin-right: 3;\n    }\n    .text {\n      flex: 1;\n      height: " + (labelStyle.fontSize + 2) + ";\n      color: " + labelStyle.fill + ";\n      background-opacity: 0;\n      pointer-events: none;\n      text-align: " + labelStyle.textAlign + ";\n      font-weight: " + labelStyle.fontWeight + "\n    }\n    text {\n      opacity: " + labelStyle.opacity + ";\n      white-space: nowrap;\n    }\n";
  var node = (0, _f6Ui.createSegmentNode)(html, css);
  return node;
}

function getShapeSize(data) {
  var width, height, r;

  if (data.size) {
    if (Array.isArray(data.size)) {
      width = data.size[0];
      height = data.size[1] || data.size[0];
      r = data.size[0] / 2;
    } else if (typeof data.size === 'number') {
      width = data.size;
      height = data.size;
      r = data.size / 2;
    }
  }

  if (data.style) {
    if (data.style.width) width = data.style.width;
    if (data.style.height) height = data.style.height;
    if (data.style.r) r = data.style.r;
  }

  if (!r) r = 5;
  if (!width) width = r;
  if (!height) height = r;
  return {
    width: width,
    height: height,
    r: r
  };
}