customHexagon.js 2.03 KB
/*
 * @Date: 2025-03-12 18:21:07
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-12 20:38:00
 * @FilePath: /logic-flow2/src/views/adv-node/rule/customHexagon.js
 * @Description: 文件描述
 */
import { PolygonNodeModel, PolygonNode } from '@logicflow/core';

class CustomHexagonModel extends PolygonNodeModel {
  setAttributes() {
    const width = 100;
    const height = 100;
    const x = 50;
    const y = 50;
    // 计算六边形, 中心点为[50, 50], 宽高均为100
    const pointList= [
      [x - 0.205 * width, y - 0.5 * height],
      [x + 0.205 * width, y - 0.5 * height],
      [x + 0.5 * width, y],
      [x + 0.205 * width, y + 0.5 * height],
      [x - 0.205 * width, y + 0.5 * height],
      [x - 0.5 * width, y],
    ];
    this.points = pointList;
  }

  getConnectedSourceRules() {
    const rules = super.getConnectedSourceRules();
    const getWayOnlyAsTarget = {
      message: '下一个节点只能是circle',
      validate: (
        source,
        target,
        sourceAnchor,
        targetAnchor,
      ) => {
        console.warn('sourceAnchor, targetAnchor', sourceAnchor, targetAnchor);
        const isValid = target.type === 'circle';
        // 根据验证结果设置节点状态
        this.updateValidateState(isValid);
        return isValid;
      },
    };
    rules.push(getWayOnlyAsTarget);
    return rules;
  }

  // 新增方法:更新验证状态
  updateValidateState(isValid) {
    this.setProperties({
      validateState: isValid ? 'valid' : 'invalid'
    });
  }

  getNodeStyle() {
    const style = super.getNodeStyle();
    if (this.properties.isSelected) {
      style.fill = 'red';
    }
    if (this.isHovered) {
      style.stroke = 'red';
    }
    // 根据验证状态设置颜色
    if (this.properties.validateState === 'invalid') {
      style.fill = 'red';
    }
    if (this.properties.validateState === 'valid') {
      style.fill = 'green';
    }
    return style;
  }
}

export default {
  type: 'hexagonNode',
  model: CustomHexagonModel,
  view: PolygonNode,
};