bytedance / flow-builder Goto Github PK

Hello I am having a problem to log the id of the node / branch i deleted. Any ideas?

vue版本会有么

Hi,

I wanted to implement a condition node with a parent and then two sub-nodes to it.
I have tried loop and branch nodes but they dont seem to fulfil the requirement.

Is it possible to add that kind of a node type?

Is there a way to add a custom add button in between nodes that allows us to let the user choose a node type in a drawer or modal?

we don’t want to use the popover since we have too many node types hence I would like to see if we can customize this behavior.

Bram

I want to add multiple isStart and connect that node to any of the node. How do i achieve that? Any help here is appreciated.

这个名字是1的节点 ，children的内容是不是应该是空的才对。

My suggestion is to introduce the ability to assign labels to routes. These labels could be simple indicators such as ‘yes’, ‘no’, or any other appropriate descriptor for the route.

To illustrate, consider a scenario where we have a condition node that leads to a branch node, which in turn connects to two additional nodes. In this case, I would like to have the option to label the left node as ‘yes’ and the right node as ‘no’. This feature would enhance the clarity and understanding of the flow structure.

Sample image, the label position can be anywhere, not necessarily where it is in this image.

When using react-flow-builder v2 rendered in Firefox browser, the zoom feature does not work as expected.

When I click my custom zoom buttons or the internal FlowBuilder zoom buttons:

Expected result:
View is updated accordingly in all modern browsers

Actual result:
View is not changed after zoom value is changed when rendered in Firefox. Works as expected in Chrome.
Callback onZoomChange does however provide the expected resulting zoom value also in Firefox. So only the rendered view is not updated.

My zoom handling code:

  const builderRef = useRef<IFlowBuilderMethod>(null);

//Called from click event handler on custom zoom buttons. Also tested with setting zoom numerical value.
  const handleZoom = (zoomtype: ZoomType) => {
    builderRef.current!.zoom(zoomtype);
  };

//Provided as FlowBuilders onZoomChange callback. 
//This is called by FlowBuilder with the expected resulting value after zoom level change
  const handleZoomChange = (
    outDisabled: boolean,
    value: number,
    inDisabled: boolean
  ) => {
    setOutDisabled(outDisabled);
    setInDisabled(inDisabled);
    setZoom(value);
  };
        <FlowBuilder
          readonly
          ref={builderRef}
          nodes={nodes as INode[]}
          onZoomChange={handleZoomChange}
          zoomTool={{
            hidden: false, 
            min: 10,
            max: 150,
            step: 5,
          }}
          onChange={handleChange}
          registerNodes={registerNodes}
        />

It seems when using react 18.2.0 (next 13.x)
There are dependency problems with the react-sortable-hoc library

npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: [email protected] npm WARN Found: [email protected] npm WARN node_modules/react npm WARN react@"18.2.0" from the root project npm WARN 63 more (@ant-design/cssinjs, @ant-design/icons, ...) npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"^16.3.0 || ^17.0.0" from [email protected] npm WARN node_modules/react-flow-builder/node_modules/react-sortable-hoc npm WARN react-sortable-hoc@"^2.0.0" from [email protected] npm WARN node_modules/react-flow-builder npm WARN npm WARN Conflicting peer dependency: [email protected] npm WARN node_modules/react npm WARN peer react@"^16.3.0 || ^17.0.0" from [email protected] npm WARN node_modules/react-flow-builder/node_modules/react-sortable-hoc npm WARN react-sortable-hoc@"^2.0.0" from [email protected] npm WARN node_modules/react-flow-builder npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: [email protected] npm WARN Found: [email protected] npm WARN node_modules/react-dom npm WARN react-dom@"18.2.0" from the root project npm WARN 50 more (@ant-design/cssinjs, @ant-design/icons, ...) npm WARN npm WARN Could not resolve dependency: npm WARN peer react-dom@"^16.3.0 || ^17.0.0" from [email protected] npm WARN node_modules/react-flow-builder/node_modules/react-sortable-hoc npm WARN react-sortable-hoc@"^2.0.0" from [email protected] npm WARN node_modules/react-flow-builder npm WARN npm WARN Conflicting peer dependency: [email protected] npm WARN node_modules/react-dom npm WARN peer react-dom@"^16.3.0 || ^17.0.0" from [email protected] npm WARN node_modules/react-flow-builder/node_modules/react-sortable-hoc

The latest version of the library is 3 years old. Maybe you have to look for another component that matches the version of react and does not generate more warnings when installing packages.

If I find something to replace it, I'll leave it in the comments.

业务需要会签场景，发现当前貌似不能创建并行网关，能否支持一下？

I came up with the idea of ​​adding a button to the toolbox to convert the component to fullscreen, so we could edit without friction.
What do you think?

Hello,

I am currently using React Flow Builder in my project and I have found that it does not support canvas drag and drop feature out of the box. After doing some research, I tried to implement this feature manually by adding a div wrapper and using the react-draggable and react-flow-renderer libraries. However, this solution has some limitations and is not very stable.

I would like to request that the React Flow Builder team add support for canvas drag and drop feature natively. This would greatly improve the user experience for those who use React Flow Builder in their projects.

Thank you for your attention to this matter. Let me know if you have any questions or if I can provide any additional information.

[Feature] Hope add sorting function on branch condition node

当前所有的线都是通过dom 绘制 看能否支持条件节点的圆角

项目中必须引用了antd组件库才能使用
否则会报错
https://fe.imdada.cn/uPic/U0AuqE.png

Is there any method to get only the aggregated node?
I see that there is the onAddNodeSuccess method but it only returns the type, it will be nice if it returns the entire node (INode)

点击节点后drawer弹出，当drawer中form中存在treeSelect这种value值是对象形式，save成功后，再次点击该节点，会报错

drawer中表单代码

  const ConfigForm: React.FC = () => {
  const { selectedNode: node, setDrawerTitle } = useContext(BuilderContext);

  const { saveDrawer: save } = useDrawer();

  const [form] = Form.useForm();
  const [treeData, setTreeData] = React.useState<API.System.DeptTreeUser[]>([]);
  useEffect(() => {
    (async () => {
      setDrawerTitle('配置');
      const { data } = await getDeptTreeUser();
      setTreeData(data as API.System.DeptTreeUser[]);
      form.setFieldsValue({
        name: node!.data?.name,
      });
    })();
  }, []);

  async function handleSubmit() {
    try {
      const values = await form.validateFields();
      save?.(values);
    } catch (e) {
      const values = form.getFieldsValue();
      save?.(values, !!e);
    }
  }
  return (
    <div>
      <Form<{ name: API.System.DeptTreeUser }> form={form}>
        <Form.Item name="name" label="处理人" rules={[{ required: true, message: '请选择处理人' }]}>
          <TreeSelect
            allowClear
            treeData={treeData}
            placeholder="请选择处理人"
            showArrow={false}
            filterTreeNode={true}
            showSearch={true}
            popupMatchSelectWidth={false}
            labelInValue={true}
            autoClearSearchValue={true}
            multiple={false}
            treeNodeFilterProp="label"
            fieldNames={{ value: 'id' }}
          />
        </Form.Item>
      </Form>
      <Button.Group>
        <Button type={'primary'} onClick={handleSubmit}>
          确定
        </Button>
      </Button.Group>
    </div>
  );
};

export default ConfigForm;

目前的分支节点必须后置条件节点。并行分支应用场景还是比较多的，请问是否考虑增加并行节点类型。或者目前有什么实现方式？

场景：抽屉保存时根据拿到的值去改变其他节点的数据

How to custom condition node in branch?

如题，现在如果要使用到 builderContext 的状态，有什么好的办法嘛

Hi, I am facing the issue that I cannot add data to the node with addNode function. Currently accept second parameter is a String type. Any idea to solve it? Thank you

使用zoom缩放 在节点中加入一些antd的 popover组件 ，然后进行缩放会导致 位置错误

现在只有在配置了ConfigComponent的情况下才会通过onChange触发点击节点的回调通知。但是更灵活的界面组织需要在不使用内置的ConfigComponent机制的情况下也得到相应通知，然后动态选择如何处理，例如根据节点类型不同，动态选择drawer/dialog/property editor等编辑控件，显示位置也不同。
目前我在低代码平台NopPlatform中想集成FlowBuilder作为审批流的配置控件，我们会根据一个元模型配置动态生成前端的流程设计器，而不是在前端写死设计器的代码，所以需要更灵活的配置机制。希望能开放相关回调接口
https://github.com/entropy-cloud/nop-entropy

/node_modules/systemjs/dist/system.js

Critical dependency: the request of a dependency is an expression

Hello there,
I wanna disable the add option at the back of the node, so user can only add nodes after created one
thanks

比如我期望他可以是 一个jsx 然后onlcik注册增加节点的事件

Hello @lixiao1022 I have created a customPoperComponent
const CustomPopoverComponent = ({
visible,
onVisibleChange,
overlayClassName,
placement,
trigger,
content,

children,
...props

}) => {
const [isOpen, setOpen] = useState(false);

return (
  <>
    <div
      className={overlayClassName}
      style={{ cursor: "pointer" }}
      onClick={() => setOpen(true)}
    >
      <Icon name="Plus" size={32} isOnclick />
    </div>
    <Modal open={isOpen} footer={[]} onCancel={() => setOpen(false)} width={800} size="lg">
      <StyledModalBody>{content}</StyledModalBody>
    </Modal>
  </>
);

};

When I click on the icon to trigger my modal.
I would like to know the position.

My main goal is I would like to render different options when the node before it is start, or different type.

Thanks for the help.

It would be nice to detect any changes, to get only that node that was modified.

Currently FlowBuilder.onChange() shows all nodes,
Maybe it could be added as a parameter but only the modified node:

onChange: (nodes: INode[], changeEvent?: string, nodeChanged: INode) => void
The second parameter would have to be managed differently, perhaps with a default value, so that it does not break

Or add a new method to FlowBuilder: onNodeChanged(nodeChanged: INode)

Hi, I try to use removeNode in useAction hook to remove my branch node but seem it not working (only work with another node types). May I missed something?
BranchNode.tsx
const { addNode, removeNode } = useAction()
const node = useContext(NodeContext)
removeNode(node)

My registedNode
{
type: 'branch',
name: 'Branch',
conditionNodeType: 'condition',
displayComponent: BranchNode,
addableComponent: ModalAddNode,
addConditionIcon: <div style={{ width: 2, height: 10, backgroundColor: '#999' }} />,
addableNodeTypes: []
}`

对于流的样式是否能够支持外部二次定义 比如把当前的边框的实线增加一定的圆角 或者把实线变成可配置（部分场景可能需要dotted）...

Is there any possibility to add scrolling by drag to FlowBuilder component ? It is one of missing element here.

目前节点和画布固定，同时画布高度固定时流程过多会出现滚动条，能否增加固定容器高度，使画布可拖动并使用鼠标滚轮缩放功能？