fix: prevent node without anchors using InsertNodeInPolyline(#1077)

didi · Nov 8, 2023 · 6e10d3a · 6e10d3a
1 parent 96de1a2
commit 6e10d3a
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 7 deletions.
diff --git a/packages/core/src/model/edge/BaseEdgeModel.ts b/packages/core/src/model/edge/BaseEdgeModel.ts
@@ -240,8 +240,10 @@ class BaseEdgeModel implements IBaseModel {
   /**
    * 内部方法，计算两个节点相连是起点位置
    */
-  getBeginAnchor(sourceNode, targetNode): Point {
-    let position;
+  getBeginAnchor(sourceNode, targetNode): Point | undefined {
+    // https://github.com/didi/LogicFlow/issues/1077
+    // 可能拿到的sourceAnchors为空数组，因此position可能返回为undefined
+    let position: Point | undefined;
     let minDistance;
     const sourceAnchors = getAnchors(sourceNode);
     sourceAnchors.forEach((anchor) => {
@@ -260,8 +262,10 @@ class BaseEdgeModel implements IBaseModel {
   /**
    * 内部方法，计算两个节点相连是终点位置
    */
-  getEndAnchor(targetNode): Point {
-    let position;
+  getEndAnchor(targetNode): Point | undefined {
+    // https://github.com/didi/LogicFlow/issues/1077
+    // 可能拿到的targetAnchors为空数组，因此position可能返回为undefined
+    let position: Point | undefined;
     let minDistance;
     const targetAnchors = getAnchors(targetNode);
     targetAnchors.forEach((anchor) => {
@@ -474,6 +478,14 @@ class BaseEdgeModel implements IBaseModel {
   setAnchors(): void {
     if (!this.sourceAnchorId || !this.startPoint) {
       const anchor = this.getBeginAnchor(this.sourceNode, this.targetNode);
+      if (!anchor && (!this.startPoint || !this.sourceAnchorId)) {
+        // https://github.com/didi/LogicFlow/issues/1077
+        // 当用户自定义getDefaultAnchor(){return []}时，表示：不显示锚点，也不允许其他节点连接到此节点
+        // 此时拿到的anchor=undefined，下面会直接报错
+        throw new Error(
+          '无法获取beginAnchor，请检查anchors相关逻辑，anchors不能为空',
+        );
+      }
       if (!this.startPoint) {
         this.startPoint = {
           x: anchor.x,
@@ -486,6 +498,14 @@ class BaseEdgeModel implements IBaseModel {
     }
     if (!this.targetAnchorId || !this.endPoint) {
       const anchor = this.getEndAnchor(this.targetNode);
+      if (!anchor && (!this.endPoint || !this.targetAnchorId)) {
+        // https://github.com/didi/LogicFlow/issues/1077
+        // 当用户自定义getDefaultAnchor(){return []}时，表示：不显示锚点，也不允许其他节点连接到此节点
+        // 此时拿到的anchor=undefined，下面会直接报错
+        throw new Error(
+          '无法获取endAnchor，请检查anchors相关逻辑，anchors不能为空',
+        );
+      }
       if (!this.endPoint) {
         this.endPoint = {
           x: anchor.x,

diff --git a/packages/extension/examples/insert-node-in-polyline/NotAllowConnectRect.mjs b/packages/extension/examples/insert-node-in-polyline/NotAllowConnectRect.mjs
@@ -0,0 +1,15 @@
+
+class NotAllowConnectRectModel extends RectNodeModel {
+  getDefaultAnchor () {
+    return [];
+  }
+}
+class NotAllowConnectRectView extends RectNode {
+
+}
+
+export default {
+  type: "not-allow-connect",
+  view: NotAllowConnectRectView,
+  model: NotAllowConnectRectModel
+};
diff --git a/packages/extension/examples/insert-node-in-polyline/index.html b/packages/extension/examples/insert-node-in-polyline/index.html
@@ -38,7 +38,7 @@
   </style>
 </head>
 <body>
-  <div id="rect"></div>
+  <div id="rect">不允许连接的rect</div>
   <div id="circle"></div>
   <div id="app"></div>
   <div id="debug"></div>
@@ -48,6 +48,6 @@
   <script>
     LogicFlow.use(InsertNodeInPolyline);
   </script>
-  <script src="./index.js"></script>
+  <script type="module" src="./index.js"></script>
 </body>
 </html>
diff --git a/packages/extension/examples/insert-node-in-polyline/index.js b/packages/extension/examples/insert-node-in-polyline/index.js
@@ -1,3 +1,5 @@
+import NotAllowConnectRect from './NotAllowConnectRect.mjs';
+
 window.onload = function () {
   const lf = new LogicFlow({
     container: document.querySelector('#app'),
@@ -6,11 +8,15 @@ window.onload = function () {
       size: 20,
     },
   });
+  lf.register(NotAllowConnectRect);
+  lf.on('connection:not-allowed', ({ data, msg }) => {
+    console.error('connection:not-allowed的原因是', msg);
+  });
   lf.render();
   // 初始化拖入功能
   document.querySelector('#rect').addEventListener('mousedown', () => {
     lf.dnd.startDrag({
-      type: 'rect',
+      type: 'not-allow-connect',
     });
   });
   document.querySelector('#circle').addEventListener('mousedown', () => {

diff --git a/packages/extension/src/insert-node-in-polyline/index.ts b/packages/extension/src/insert-node-in-polyline/index.ts
@@ -97,6 +97,20 @@ class InsertNodeInPolyline {
   insetNode(nodeData): void {
     const { edges } = this._lf.graphModel;
     const nodeModel = this._lf.getNodeModelById(nodeData.id);
+
+    // fix: https://github.com/didi/LogicFlow/issues/1077
+    // 参照https://github.com/didi/LogicFlow/issues/454=>当getDefaultAnchor(){return []}表示：不显示锚点，也不允许其他节点连接到此节点
+    // 当getDefaultAnchor=[]，直接阻止下面进行edges的截断插入node相关逻辑
+    const anchorArray = nodeModel.getDefaultAnchor();
+    const isNotAllowConnect = !anchorArray || anchorArray.length === 0;
+    if (isNotAllowConnect) {
+      this._lf.graphModel.eventCenter.emit(EventType.CONNECTION_NOT_ALLOWED, {
+        data: nodeData,
+        msg: '自定义类型节点不显示锚点，也不允许其他节点连接到此节点',
+      });
+      return;
+    }
+
     for (let i = 0; i < edges.length; i++) {
       // eslint-disable-next-line max-len
       const { crossIndex, crossPoints } = isNodeInSegment(