时间戳

首页 > 解决方案 > 如何限制 React-Diagram 节点允许的链接数量

reactjs - 如何限制 React-Diagram 节点允许的链接数量

问题描述

在我的图中，我有一个矩形节点。一个矩形有顶部和底部端口。我想限制节点之间的链接如下。

预期： 就像链表一样，节点顶部和底部端口每个只能有一个链接。 node 1 -> bottom port已经连接到，node 2 -> top port因此不应允许从node 1 -> bottom port

+----------+
+  node 1  +
+----+-----+
     |
     |
+----+-----+
+  node 2  +
+----+-----+
     |
     |
+----+-----+
+  node 3  +
+----+-----+

不允许出现以下情况：

+----------+
+  node 1  +
+----+-----+
     |
     +------------------+
     |                  |
+----+-----+       +----+-----+ 
+  node 2  +       +  node 3  +
+----+-----+       +----+-----+

我尝试注册以下侦听器，但在链接两个节点时它们都没有被触发。

engine.getModel().getActiveNodeLayer().registerListener({
    entityRemoved: (event: any) => {
        console.log('node::entityRemoved', event);
    },
    eventDidFire: (event: any) => {
        console.log('node::eventDidFire', event);
    },
    eventWillFire: (event: any) => {
        console.log('node::eventWillFire', event);
    }
});

标签： reactjs

解决方案

对于 googlers，我通过创建自定义端口模型解决了这个问题：

class ConstrainedPortModel extends DefaultPortModel {
  
  constructor(options: ConstrainedPortModelOptions) {
    super(options);
    // save important options here
  }

  canLinkToPort(port: PortModel): boolean {
    if (/* Something not allowed */) {
      return false;
    }

    return super.canLinkToPort(port);
  }
}

然后在我的模型的构造函数中添加我的自定义端口：

class MyCustomNodeModel extends NodeModel {

  constructor(options: MyCustomNodeModelOptions) {
    super({
      ...options,
    });

    this.addPort(new ConstrainedPortModel({
        in: true,
        // Other important constraint options here
    }));
  }

推荐阅读