fe.ems.vue3/src/views/monitor/topologyBuild/hooks/useEdge.ts

import { message, Form } from 'ant-design-vue/lib';
import { reactive, watch } from 'vue';
import useI18n from '@/hooks/useI18n';
import { graphG6 } from './useGraph';

export default function useEdge() {
  const { t } = useI18n();

  /**图边内置边类型 */
  const edgeTypeOptions = [
    {
      value: 'line',
      label: t('views.monitor.topologyBuild.edgeTypeLine'),
    },
    {
      value: 'polyline',
      label: t('views.monitor.topologyBuild.edgeTypePolyline'),
    },
    {
      value: 'arc',
      label: t('views.monitor.topologyBuild.edgeTypeArc'),
    },
    {
      value: 'quadratic',
      label: t('views.monitor.topologyBuild.edgeTypeQuadratic'),
    },
    {
      value: 'cubic',
      label: t('views.monitor.topologyBuild.edgeTypeCubic'),
    },
    {
      value: 'cubic-vertical',
      label: t('views.monitor.topologyBuild.edgeTypeCubicV'),
    },
    {
      value: 'cubic-horizontal',
      label: t('views.monitor.topologyBuild.edgeTypeCubicH'),
    },
    {
      value: 'loop',
      label: t('views.monitor.topologyBuild.edgeTypeLoop'),
    },
    {
      value: 'cubic-animate-line-dash',
      label: t('views.monitor.topologyBuild.edgeTypeCubicAnimateLineDash'),
    },
    {
      value: 'cubic-animate-circle-move',
      label: t('views.monitor.topologyBuild.edgeTypeCubicAnimateCircleMove'),
    },
    {
      value: 'line-animate-state',
      label: t('views.monitor.topologyBuild.edgeTypeLineAnimateState'),
    },
  ];

  /**图边标签文本位置 */
  const edgeLabelPositionOptions = [
    {
      value: 'start',
      label: t('views.monitor.topologyBuild.edgeLabelPositionStart'),
    },
    {
      value: 'middle',
      label: t('views.monitor.topologyBuild.edgeLabelPositionMiddle'),
    },
    {
      value: 'end',
      label: t('views.monitor.topologyBuild.edgeLabelPositionEnd'),
    },
  ];

  /**图边信息状态类型 */
  type EdgeStateType = {
    /**图边原始数据 */
    origin: Record<string, any>;
    /**图边表单数据 */
    form: Record<string, any>;
  };

  /**图边信息状态 */
  let edgeState: EdgeStateType = reactive({
    origin: {},
    form: {
      id: '',
      source: undefined,
      target: undefined,
      type: 'polyline',
      style: {
        offset: 20,
        radius: 2,
        stroke: '#ffffff',
        lineWidth: 1,
        cursor: 'pointer',
      },
      label: '',
      labelCfg: {
        refX: 0,
        refY: 0,
        position: 'middle',
        autoRotate: false,
        style: {
          fill: '#ffffff',
          fontSize: 12,
          fontWeight: 500,
        },
      },
    },
  });

  /**图边对话框内表单属性和校验规则 */
  const edgeStateForm = Form.useForm(
    edgeState.form,
    reactive({
      id: [
        {
          required: true,
          message: t('views.monitor.topologyBuild.edgeFormIdPlease'),
        },
      ],
      source: [
        {
          required: true,
          message: t('views.monitor.topologyBuild.edgeFormSourcePlease'),
        },
      ],
      target: [
        {
          required: true,
          message: t('views.monitor.topologyBuild.edgeFormTargetPlease'),
        },
      ],
      type: [
        {
          required: true,
          message: t('views.monitor.topologyBuild.edgeFormTypePlease'),
        },
      ],
    })
  );

  /**图边编辑监听更新视图 */
  watch(edgeState.form, edge => {
    const info = JSON.parse(JSON.stringify(edge));
    // 新增id是#不监听变化
    const edgeId = info.id;
    if (edgeId && edgeId !== '#') {
      // 开始结束一样就自环
      if (info.source === info.target) {
        info.type = 'loop';
      }
      graphG6.value.clearItemStates(edgeId, 'selected');
      graphG6.value.updateItem(edgeId, info);
    }
  });

  /**图边新增或更新 */
  function handleOkEdge() {
    return edgeStateForm
      .validate()
      .then(e => {
        const edge = JSON.parse(JSON.stringify(edgeState.form));
        if (!edge.id) {
          message.warn({
            content: t('views.monitor.topologyBuild.edgeFormIdNot'),
            duration: 3,
          });
          return false;
        }

        // 开始结束一样就自环
        if (edge.source === edge.target) {
          edge.type = 'loop';
        }
        // 不存在fontWeight会触发异常
        if(!edge.labelCfg.style.fontWeight){
          console.log(edge)
          debugger
          edge.labelCfg.style.fontWeight = 500
        }
        // 存在更新，新增id是#不监听变化
        const item = graphG6.value.findById(edge.id);
        if (item) {
          graphG6.value.updateItem(item, edge);
        } else {
          edge.id = `${edge.source}~${Date.now()}~${edge.target}`;
          graphG6.value.addItem('edge', edge);
        }

        edgeStateForm.resetFields();
        edgeState.origin = {};
        return true;
      })
      .catch(e => {
        message.error(
          t('common.errorFields', { num: e.errorFields.length }),
          3
        );
        return false;
      });
  }

  /**图边取消还原 */
  function handleCancelEdge() {
    // 新增无原始数据
    const origin = JSON.parse(JSON.stringify(edgeState.origin));
    if (origin.id) {
      graphG6.value.updateItem(origin.id, origin);
    }
    edgeStateForm.resetFields();
    edgeState.origin = {};
  }

  return {
    edgeTypeOptions,
    edgeLabelPositionOptions,
    edgeState,
    edgeStateForm,
    handleOkEdge,
    handleCancelEdge,
  };
}