import { register } from '@antv/x6-vue-shape';
import AppNode from './appVueNode.vue';
import LocalNode from './localVueNode.vue';
import { Graph } from '@antv/x6';

export const registerCustomNode = () => {

  const ports = {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
        group: 'top',
      },
      {
        group: 'right',
      },
      {
        group: 'bottom',
      },
      {
        group: 'left',
      },
    ],
  };

  // 自定义的画布中的显示节点
  register({
    shape: 'custom-app-vue-node',
    type: 'app',
    width: 134,
    height: 56,
    component: AppNode,
    ports: ports,
  });

  // 自定义的画布中的显示节点
  register({
    shape: 'custom-local-vue-node',
    type: 'local',
    width: 56,
    height: 56,
    component: LocalNode,
    ports: ports,
  });

  // 自定义的左侧拖拽的节点
  Graph.registerNode(
    'custom-stencil-node',
    {
      inherit: 'rect',
      width: 50,
      height: 70,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
          attrs: {
            fill: '#333',
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
          },
        },
        {
          tagName: 'image',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          stroke: '#fff',
          fill: '#fff',
        },
        image: { // 图片布局设置
          width: 50,
          height: 50,
          fill: '#F0F0F0',
          // refX: 5,
          // refY: 5,
        },
        label: { // 文本布局设置
          dominantBaseline: 'middle',
          y: 20,
          // textAnchor: 'center',
          // textVerticalAnchor: 'bottom',
          fontSize: 10,
          // fill: '#1F1F1F',
        },
      },
      // ports: { ...ports },
    },
    true
  );
};
