校验节点规则

 /*
 /*
  * @Date: 2025-03-10 13:07:05
  * @Date: 2025-03-10 13:07:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-11 17:23:23
+ * @LastEditTime: 2025-03-12 23:35:54
  * @FilePath: /logic-flow2/src/main.js
  * @FilePath: /logic-flow2/src/main.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -22,7 +22,7 @@ LogicFlow.use(DndPanel) // 拖拽面板
 LogicFlow.use(SelectionSelect) // 选中元素
 LogicFlow.use(SelectionSelect) // 选中元素
 // LogicFlow.use(Control) // 控制面板
 // LogicFlow.use(Control) // 控制面板
 LogicFlow.use(InsertNodeInPolyline) // 边上插入节点
 LogicFlow.use(InsertNodeInPolyline) // 边上插入节点
-LogicFlow.use(Highlight) // 高亮
+// LogicFlow.use(Highlight) // 高亮
 
 
 const app = createApp(App)
 const app = createApp(App)
 app.use(ElementPlus)
 app.use(ElementPlus)

 /*
 /*
  * @Date: 2025-03-10 13:15:30
  * @Date: 2025-03-10 13:15:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-12 11:06:26
+ * @LastEditTime: 2025-03-12 21:27:32
  * @FilePath: /logic-flow2/src/router/index.js
  * @FilePath: /logic-flow2/src/router/index.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -70,6 +70,16 @@ const router = createRouter({
       name: 'theme',
       name: 'theme',
       component: () => import('../views/theme/index.vue')
       component: () => import('../views/theme/index.vue')
     },
     },
+    {
+      path: '/adv-node-rule',
+      name: 'adv-node-rule',
+      component: () => import('../views/adv-node/rule/index.vue')
+    },
+    {
+      path: '/adv-node-anchor',
+      name: 'adv-node-anchor',
+      component: () => import('../views/adv-node/anchor/index.vue')
+    },
   ]
   ]
 })
 })
 
 

+/*
+ * @Date: 2025-03-12 18:20:35
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-12 20:37:40
+ * @FilePath: /logic-flow2/src/views/adv-node/rule/connectData.js
+ * @Description: 文件描述
+ */
+const data = {
+  nodes: [
+    {
+      id: '1',
+      type: 'rect',
+      x: 300,
+      y: 100,
+    },
+    {
+      id: '2',
+      type: 'circle',
+      x: 300,
+      y: 250,
+    },
+    {
+      id: '3',
+      type: 'hexagonNode',
+      x: 100,
+      y: 100,
+      text: '只能连接到圆',
+      properties: {
+        // isSelected: true,
+      },
+    },
+  ],
+  edges: [],
+};
+
+export default data;

+/*
+ * @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,
+};

+<!--
+ * @Date: 2025-03-10 16:52:35
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-12 20:18:28
+ * @FilePath: /logic-flow2/src/views/adv-node/rule/index.vue
+ * @Description: 连接规则
+-->
+<template>
+  <div class="container">
+    <div ref="container" class="flow-container"></div>
+  </div>
+</template>
+
+<script setup>
+import LogicFlow from "@logicflow/core";
+import CustomHexagon from "./customHexagon";
+import data from "./connectData";
+
+const SilentConfig = {
+  stopScrollGraph: true,
+  stopMoveGraph: true,
+  stopZoomGraph: true,
+};
+
+const styleConfig = {
+  style: {
+    rect: {
+      rx: 5,
+      ry: 5,
+      strokeWidth: 2,
+    },
+    circle: {
+      fill: "#f5f5f5",
+      stroke: "#666",
+    },
+    ellipse: {
+      fill: "#dae8fc",
+      stroke: "#6c8ebf",
+    },
+    polygon: {
+      fill: "#d5e8d4",
+      stroke: "#82b366",
+    },
+    diamond: {
+      fill: "#ffe6cc",
+      stroke: "#d79b00",
+    },
+    text: {
+      color: "#b85450",
+      fontSize: 12,
+    },
+  },
+};
+
+const container = ref(null);
+let lf = null;
+
+onMounted(() => {
+  lf = new LogicFlow({
+    container: container.value,
+    grid: true,
+    ...SilentConfig,
+    ...styleConfig,
+  });
+
+  lf.register(CustomHexagon);
+
+  lf.setTheme({
+    nodeText: {
+      color: "#000000",
+      overflowMode: "ellipsis",
+      lineHeight: 1.2,
+      fontSize: 12,
+    },
+  });
+
+  lf.render(data);
+  lf.translateCenter();
+
+  lf.on("connection:not-allowed", (msg) => {
+    console.log(msg);
+  });
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.flow-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+</style>

 <!--
 <!--
  * @Date: 2025-03-10 14:37:31
  * @Date: 2025-03-10 14:37:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-12 16:29:56
+ * @LastEditTime: 2025-03-12 21:27:39
  * @FilePath: /logic-flow2/src/views/home.vue
  * @FilePath: /logic-flow2/src/views/home.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -18,6 +18,8 @@
   <el-button type="primary" @click="goTo('edge-text')">edge-text</el-button>
   <el-button type="primary" @click="goTo('edge-text')">edge-text</el-button>
   <el-button type="primary" @click="goTo('edge-arrow')">edge-arrow</el-button>
   <el-button type="primary" @click="goTo('edge-arrow')">edge-arrow</el-button>
   <el-button type="primary" @click="goTo('theme')">theme</el-button>
   <el-button type="primary" @click="goTo('theme')">theme</el-button>
+  <el-button type="primary" @click="goTo('adv-node-rule')">adv-node-rule</el-button>
+  <el-button type="primary" @click="goTo('adv-node-anchor')">adv-node-anchor</el-button>
 </template>
 </template>
 
 
 <script setup>
 <script setup>