bytedance / flow-builder Goto Github PK

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

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?

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

[Feature] Hope add sorting function on branch condition node

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

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)

vue版本会有么

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.

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

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

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

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)

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

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}
        />

现在只有在配置了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

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

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

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

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.

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.

How to custom condition node in branch?

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?

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

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: []
}`

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.

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

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

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

点击节点后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;