EDFS-MCU/src/views/testG6/utils/MyNode.ts

import { Graph, register, Rect, ExtensionCategory } from '@antv/g6';
import { DeviceType, NODE_SIZE } from "./index";


// const typeToIconMap = Object.entries(DeviceType).filter(([key, value]) => typeof value === 'number')
// console.log(typeToIconMap)

export default class UserCardNode extends Rect {
  get nodeData() {
    return this.context.graph.getNodeData(this.id);
  }

  get data() {
    return this.nodeData.data || {};
  }

  // 用户名样式


  drawNameShape(attributes: any, container: any) {
    if (!this.data.name) return;
    const getUsernameStyle = (attributes: any) => {
      return {
        x: -14,
        text: this.data.name || '',
        // fontSize: 12,
        width: 20,
        fill: '#262626',
        fontWeight: 'bold',
        textAlign: 'left',
        textBaseline: 'middle',
        maxWidth: 80,   // 限制最大宽度
        ellipsis: true, // 超出显示 ...
      };
    }

    const usernameStyle = getUsernameStyle(attributes);
    this.upsert('username', 'text', usernameStyle, container);
  }


  // 头像样式
  getAvatarStyle(attributes: any) {
    const [width, height] = this.getSize(attributes);
    const type = this!.data!.type
    return {
      x: -width / 2 + 4,
      y: -height / 2 + 6,
      width: 24,
      height: 24,
      src: typeToIconMap[type as keyof typeof type] || '',
    };
  }

  drawAvatarShape(attributes: any, container: any) {
    if (!this.data.typeString) return;

    const avatarStyle = this.getAvatarStyle(attributes);
    this.upsert('avatar', 'image', avatarStyle, container);
  }


  render(attributes: any, container: any) {
    // 渲染基础矩形
    super.render(attributes, container);

    this.drawAvatarShape(attributes, container);
    this.drawNameShape(attributes, container);
  }
}