antvis / XFlow

React component for building interactive diagrams.
https://x6.antv.antgroup.com/xflow/guide/introduction
MIT License
564 stars 233 forks source link

流程图,节点的锚点type属性设置无效 #393

Closed Kellercai closed 10 months ago

Kellercai commented 1 year ago

Describe the bug

参考文档对节点的锚点配置 https://xflow.antv.vision/zh-CN/api/interface#inodeanchor

比如需要对【开始节点】只允许输出桩,【结束节点】只允许输入桩,对节点的锚点配置type属性分别为outputinput。配置type属性后不生效,节点连线还是可以输入也可以输出。还是tooltip配置也是不生效 image

Your Example Website or App

https://codesandbox.io/s/loving-grass-v4x9z2?file=/config-cmd.ts

Steps to Reproduce the Bug or Issue

1、对节点锚点type属性设置为output

// port.ts
import { uuidv4 } from "@antv/xflow";
import { NsGraph } from "@antv/xflow";

const getAnchorStyle = (position: string) => {
  return {
    position: { name: position },
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: "#31d0c6",
        strokeWidth: 2,
        fill: "#fff",
        style: {
          visibility: "hidden"
        }
      }
    },
    zIndex: 10
  };
};

const POSITION = [
  NsGraph.AnchorGroup.TOP,
  NsGraph.AnchorGroup.RIGHT,
  NsGraph.AnchorGroup.BOTTOM,
  NsGraph.AnchorGroup.LEFT
];

// 获取上下左右四个点的位置
const getPorts = (anchorType?, position = POSITION) => {
  const groups = {};
  position.forEach((name) => {
    groups[name] = getAnchorStyle(name);
  });
  return {
    items: position.map((name) => {
      return { group: name, id: uuidv4(), type: anchorType };
    }),
    groups
  };
};

export default getPorts;
// config-cmd.ts
import { createCmdConfig, DisposableCollection, uuidv4 } from "@antv/xflow";
import getPorts from "./ports";

export const useCmdConfig = createCmdConfig((config) => {
  config.setRegisterHookFn((hooks) => {
    const list = [
      hooks.addNode.registerHook({
        name: "set node config",
        handler: async (args) => {
          args.nodeConfig = {
            ...args.nodeConfig,
            id: args.nodeConfig.id || `node-${uuidv4()}`
          };
          if (args.nodeConfig.renderKey === "custom-node-indicator") {
            args.nodeConfig.ports = getPorts("output");
          }
          console.log("args.nodeConfig", args.nodeConfig);
        }
      })
    ];
    const toDispose = new DisposableCollection();
    toDispose.pushAll(list);
    return toDispose;
  });
});

2、拖拽后的节点还是可以输入 image

Expected behavior

希望通过自定义后的锚点属性type可以生效,设置为input,该锚点只允许输入,设置为output,该锚点只允许输出

Screenshots or Videos

https://github.com/antvis/XFlow/assets/20681598/9cc8d87b-4d16-42af-a09f-a09f2ff91a3c

Platform

xflow-bot[bot] commented 1 year ago

👋 @Kellercai

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

OShuxin commented 1 year ago

我想这个需要配合 canvas组件中的config属性配置一些东西 https://x6.antv.vision/zh/docs/api/graph/interaction#validatemagnet

xflow-bot[bot] commented 11 months ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

xflow-bot[bot] commented 10 months ago

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot 🤖, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the AntV community! 💪💯