lan-manager/web/node_modules/@antv/g6-element/es/nodes/image.js

import { __assign } from "tslib";
import { registerNode, BaseGlobal as Global } from '@antv/g6-core';
/**
 * 基本的图片，可以添加文本，默认文本在图片的下面
 */
registerNode('image', {
  options: {
    img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ',
    size: 200,
    labelCfg: {
      style: {
        fontFamily: Global.windowFontFamily
      }
    },
    clipCfg: {
      show: false,
      type: 'circle',
      // circle
      r: 50,
      // ellipse
      rx: 50,
      ry: 35,
      // rect
      width: 50,
      height: 35,
      // polygon
      points: [[30, 12], [12, 30], [30, 48], [48, 30]],
      // path
      path: [['M', 25, 25], ['L', 50, 25], ['A', 12.5, 12.5, 0, 1, 1, 50, 50], ['A', 12.5, 12.5, 0, 1, 0, 50, 50], ['L', 25, 75], ['Z']],
      // 坐标
      x: 0,
      y: 0
      // clip 的属性样式
      // style: {
      //   lineWidth: 1
      // },
    }
  },
  shapeType: 'image',
  labelPosition: 'bottom',
  drawShape: function drawShape(cfg, group) {
    var shapeType = this.shapeType; // || this.type，都已经加了 shapeType
    var style = this.getShapeStyle(cfg);
    delete style.fill;
    var shape = group.addShape(shapeType, {
      attrs: style,
      className: "".concat(this.type, "-keyShape"),
      name: "".concat(this.type, "-keyShape"),
      draggable: true
    });
    group['shapeMap']["".concat(this.type, "-keyShape")] = shape;
    this.drawClip(cfg, shape);
    return shape;
  },
  drawClip: function drawClip(cfg, shape) {
    var clip = (this.mergeStyle || this.getOptions(cfg)).clipCfg;
    if (!clip.show) {
      return;
    }
    // 支持 circle、rect、ellipse、Polygon 及自定义 path clip
    var type = clip.type,
      x = clip.x,
      y = clip.y,
      style = clip.style;
    if (type === 'circle') {
      var r = clip.r;
      shape.setClip({
        type: 'circle',
        attrs: __assign({
          r: r,
          x: x,
          y: y
        }, style)
      });
    } else if (type === 'rect') {
      var width = clip.width,
        height = clip.height;
      var rectX = x - width / 2;
      var rectY = y - height / 2;
      shape.setClip({
        type: 'rect',
        attrs: __assign({
          x: rectX,
          y: rectY,
          width: width,
          height: height
        }, style)
      });
    } else if (type === 'ellipse') {
      var rx = clip.rx,
        ry = clip.ry;
      shape.setClip({
        type: 'ellipse',
        attrs: __assign({
          x: x,
          y: y,
          rx: rx,
          ry: ry
        }, style)
      });
    } else if (type === 'polygon') {
      var points = clip.points;
      shape.setClip({
        type: 'polygon',
        attrs: __assign({
          points: points
        }, style)
      });
    } else if (type === 'path') {
      var path = clip.path;
      shape.setClip({
        type: 'path',
        attrs: __assign({
          path: path
        }, style)
      });
    }
  },
  getShapeStyle: function getShapeStyle(cfg) {
    var _a = this.mergeStyle || this.getOptions(cfg),
      defaultStyle = _a.style,
      img = _a.img;
    var size = this.getSize(cfg);
    var width = size[0];
    var height = size[1];
    if (defaultStyle) {
      width = defaultStyle.width || size[0];
      height = defaultStyle.height || size[1];
    }
    var style = __assign({
      x: -width / 2,
      y: -height / 2,
      width: width,
      height: height,
      img: img
    }, defaultStyle);
    return style;
  },
  updateShapeStyle: function updateShapeStyle(cfg, item) {
    var group = item.getContainer();
    var shapeClassName = "".concat(this.itemType, "-shape");
    var shape = group['shapeMap'][shapeClassName] || group.find(function (element) {
      return element.get('className') === shapeClassName;
    }) || item.getKeyShape();
    var shapeStyle = this.getShapeStyle(cfg);
    if (shape) {
      shape.attr(shapeStyle);
    }
  }
}, 'single-node');