antvis / xflow Goto Github PK

Describe the feature you'd like to request

工具栏的自定义 render时，对 graph 操作时没有对应的 API， 只能通过全局获取 grpah 操作

Describe the solution you'd like

Toobar 自定义渲染 render 提供 commandService 或者 graph 对象

Describe alternatives you've considered

目前是通过自定义组件去全局获取全局对象来实现自定义操作

Your Example Website or App

No response

Screenshots or Videos

Describe the bug

当对group做update操作的时候 group的宽高会有问题,且group 为折叠态时 内部节点的宽会全部等于该群组的宽-6，此时保存 导致保存入库的数据节点的宽度不正确

Your Example Website or App

null

Steps to Reproduce the Bug or Issue

1.进入官网流程图示例
2.添加群组 并折叠该群组
3.修改群组属性

Expected behavior

群组宽高正常
折叠态时内部节点的宽不受影响

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 91.1

Additional context

No response

描述你想申请的功能

通过自定义表单更新cell属性

1. 更新节点角度
2. 更新连接器
3. 更新控制点

描述你想要的解决方案

通过表单的更新方法直接更新

描述你所考虑的替代方案

节点：
node 角度 通过表单更新后，视图不会发生变化
解决方案：
graph.on('node:changed', ({ cell }) => {
// @ts-ignore
cell.rotate(cell.data.angle, { absolute: true });
});
graph.on('node:change:angle', ({ cell }) => {
// @ts-ignore
cell.updateData({ angle: cell.getAngle() });
});
边：
edge 控制点 及 连接器类型 通过表单更新后 视图不会发生变化
解决方案：
graph.on('edge:changed', ({ cell }) => {
// @ts-ignore
if (cell.data.vertices && cell.data.vertices.find((item) => item.update)) {
// @ts-ignore
cell.setVertices(cell.data.vertices.map((item) => ({ x: item.x, y: item.y })));
}
if (cell.data.connector) {
// @ts-ignore
cell.setConnector(cell.data.connector);
}
});

你的网站或应用程序实例

No response

屏幕截图或视频

No response

Describe the feature you'd like to request

destory instead of destroy is a wrong spelling

Describe the solution you'd like

correct the word pronounce https://github.com/antvis/XFlow/search?q=destory

Describe alternatives you've considered

N/A

Your Example Website or App

No response

Screenshots or Videos

Describe the bug

修改edge数据vertices 后视图未同步更新，操作步骤如下：
第一步： 拿到图数据
第二步： 更新edge数据vertices
第三步： 更新图数据

Your Example Website or App

https://codesandbox.io/s/u179p?file=/config-toolbar.tsx:7144-7160

Steps to Reproduce the Bug or Issue

第一步：打开【https://xflow.antv.vision/docs/tutorial/solutions/dag】并进入codesandbox

第二步：在config-toolbar.tsx文件加入如下代码

toolbarGroup3.push({
      id: XFlowDagCommands.QUERY_GRAPH_STATUS.id + 'bug',
      tooltip: 'bug复现',
      iconName: 'PlaySquareOutlined',
      onClick: async ({ commandService }) => {
        // 取图数据方法
        const oldDataFun = async () => {
          return new Promise((reslove, reject) => {
            commandService.executeCommand<NsGraphCmd.SaveGraphData.IArgs>(
              XFlowGraphCommands.SAVE_GRAPH_DATA.id,
              {
                saveGraphDataService: async (meta, data) => {
                  reslove(data)
                }
              })
          })
        }
        // 取图数据
        const oldData = await oldDataFun();
        // 修改edge数据vertices
        oldData.edges.forEach(edge=>{
          edge.vertices = [
            {x:300,y:800}
          ]
        })
        const showBug = false
        if(showBug) {
          commandService.executeCommand(XFlowGraphCommands.GRAPH_RENDER.id, {
            graphData: oldData
          } as NsGraphCmd.GraphRender.IArgs)
        } else {
          commandService.executeCommand(XFlowGraphCommands.GRAPH_RENDER.id, {
            graphData: { nodes: [], edges: [] }
          } as NsGraphCmd.GraphRender.IArgs)
          setTimeout(() => {
            commandService.executeCommand(XFlowGraphCommands.GRAPH_RENDER.id, {
              graphData: oldData
            } as NsGraphCmd.GraphRender.IArgs)
          }, 0);
        }
      },
    })

第三步：查看期望结果

第四步：bug复现，修改【const showBug = false】为【const showBug = true】
结果：点击【bug复现】后边线没反应

Expected behavior

我期望边线被改成功，但我看到了边线未动

Screenshots or Videos

No response

Platform

• OS: [ Windows 11]
• Browser: [edge]
• Version: [版本 97.0.1072.62 (官方内部版本) (64 位)]

Additional context

No response

描述你想申请的功能

FlowchartCanvas 封装了 XFlowCanvas 但是，没有暴露 useGraphConfig ，我不能自己用 setEdgeRender 组册自定义边。希望有办法支持。

描述你想要的解决方案

FlowchartCanvas 支持自定义边的注册

描述你所考虑的替代方案

直接用 XFlowCanvas

你的网站或应用程序实例

No response

屏幕截图或视频

No response

Describe the feature you'd like to request

it need a lot config code to support right to left layout
#79

Describe the solution you'd like

add two layout config: 'H' and 'V' to convert port connectd style, connecting edge style etc.

Describe alternatives you've considered

none

Your Example Website or App

No response

Screenshots or Videos

No response

Describe the feature you'd like to request

backend can use createNodeService/createEdgeService to stop command execution

Describe the solution you'd like

when service return false command should stop execution

Describe alternatives you've considered

service may rise error msg, may be we need store the error msg in the context

Your Example Website or App

No response

Screenshots or Videos

No response

Current behavior 当前行为

When configuring the toolbar and setting the icons for each toolbar items, one must first register the icon's React component constructor with an IconStore singleton, and then provide the corresponding registered key as a string to the options object via the iconName field.

现在在设置 Toolbar 工具栏之按键图标时，需要先在 IconStore 注册每个图标，给每个图标提供一个 key，然后才在 Toolbar 设置项里通过 iconName 引用之前注册的 key.

// ...
import { IconStore } from '@antv/xflow';

const MyIcon = () => <div />;
IconStore.set('my-icon', MyIcon);

// ...
{
    items: [{
        // ...
        iconName: 'my-icon',
        // ...
    }],
    // ...
}

Possible alternative 其他方法

Pass a React component constructor or a function returning a React component instance to the config instead.

直接在设置项里提供 React 组件或者最终返回 React 组件的函数。

const MyIcon = () => <div />;
{
    items: [{
        icon: MyIcon,
    }],
}

Additional context 讨论

Using a singleton registry to manage icons seems rather redundant, compared to referencing the icon component themselves directly (are there any future designs that would justify using a singleton?)

Using a string to indicate which icon also bypasses the compiler's guarantee that names must be defined (especially with TypeScript): a typo in the registered key or in the config would cause the icon to fail to render at runtime, because the compiler can no longer reliably tell that the icon with name 'my-icon' is in fact available for use.

目前来看通过 IconStore 来事先注册图标的方式似乎有些繁琐，不知道是不是之后有其他的功能需要这样的设计？

以字符串的方式引用图标也意味着编译器编译时没有办法检查图标是否有正确注册，若注册时或者生成工具栏设置时出现错别字，则图标会渲染失败而且要在运行时才能发现。

问题描述

1.我想根据参数不同展示不同的node，所以给包了个span，然后给span加了个key
2.然后给span传递不同的参数，根据参数改变span的key，根据参数决定展示那些node，
3.然后我改变span的key以后，快捷键就失效了。

重现链接

https://codesandbox.io/s/holy-glade-puw1ni?file=/App.tsx

重现步骤

1.直接打开，快捷键可以使用，
2.点击‘这就是那个按钮’页面刷新。
3.快捷键失效

预期行为

1.点击‘这就是那个按钮’页面刷新。
2.快捷键可以使用

平台

• 操作系统: [ Windows]
• 网页浏览器: [Google Chrome, Firefox]
• XFlow 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

补充说明（可选）

多个画图的场景，通过改变参数，展示不同的node，和表单

react_devtools_backend.js:2540 Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate.

Check the render method of ColorPicker.
    at ColorPicker (webpack-internal:///./node_modules/@antv/xflow-extension/es/flowchart-editor-panel/control-map-service/components/fields/color.js:18:13)

是否可以用 react portal 代替直接调用 render 方法

Describe the feature you'd like to request

Users need to use Command to update Port config dynamically.
https://x6.antv.vision/zh/docs/api/model/node/#addport

Describe the solution you'd like

add new command

Describe alternatives you've considered

none

Your Example Website or App

No response

Screenshots or Videos

No response

按照官方示例链接，发现升级为"@antv/xflow": "1.0.8",这个例子中的graphData反显会报错，且反显不了，降级为"@antv/xflow": "1.0.7"后正常显示
错误抛出为

Cannot read properties of undefined (reading 'dagre')

Expected Behavior

No Security Warning

Current Behavior

Possible Solution

Upgrade to v9.0.6 or higher

问题描述

1.在指定Hook中开启历史选项，
options.history = {
enabled: true
};
2.拖两个节点然后连线，报错

重现链接

https://codesandbox.io/s/vibrant-smoke-4y0ze4?file=/config-keybinding.ts

重现步骤

1.在指定Hook中开启历史选项，
options.history = {
enabled: true
};
2.在快捷键中添加撤销，反撤销
3.拖两个节点然后连线，没有样式
4.添加的连线不能撤销，节点可以撤销

ps 从官网弄直接点过去的codesandbox，修改的有点问题，关掉报错就好了，

预期行为

开启history和keyboard以后，设置撤销和返回，样式正常而且功能正常使用

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• XFlow 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

暂无

补充说明（可选）

开启历史记录和快捷键方便操作

Describe the bug

DAG Extension connecting edge is not surport LR layout

Your Example Website or App

https://codesandbox.io/s/ecdjm

Steps to Reproduce the Bug or Issue

1. config DAG extension layout='LR'
2. drag edge from source node port
3. connecting edge start point is the bottom of the node port

Expected behavior

connecting edge should start from left side of source node port

Screenshots or Videos

Platform

• OS: [macOS]
• Browser: [Chrome]
• Version: [91.1]

Additional context

No response

问题描述

ER建模解决方案示例
1-缩放
2-点击小地图 框选区域外部
3-鼠标移动画布

重现链接

https://codesandbox.io/s/h6ov3

重现步骤

ER建模解决方案示例
1-缩放
2-点击小地图 框选区域外部
3-鼠标移动画布

预期行为

节点正常展示

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• XFlow 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

补充说明（可选）

缩放显示画布节点

Describe the bug

cannot update node data

Your Example Website or App

https://codesandbox.io/s/q31jf

Steps to Reproduce the Bug or Issue

1. open flow solution demo
2. add node
3. change node label
4. get errors

Expected behavior

node should update node data

Screenshots or Videos

Platform

• OS: [macOS]
• Browser: [Chrome]
• Version: [97]

Additional context

No response

Describe the feature you'd like to request

X6 provides advanced model options for node/edge crud, which xflow node and edge commands don't support yet.
https://x6.antv.vision/zh/docs/api/graph/model/#addnode

Describe the solution you'd like

add options to command options

Describe alternatives you've considered

none

Your Example Website or App

No response

Screenshots or Videos

如果本身支持这样的能力，希望在文档中进一步说明谢谢

描述你想申请的功能

目前hooks里 deleteNodeService 支持返回 false 不执行删除操作，但是添加节点和线不支持 （createNodeService/createEdgeService），但后端返回失败时我需要阻止节点和边的添加。

描述你想要的解决方案

想要的效果就是，createNodeService/createEdgeService 我也能像deleteNodeService返回 flase 之后就阻止添加。

描述你所考虑的替代方案

现在的代替方案是继续手动删除

你的网站或应用程序实例

No response

屏幕截图或视频

No response

描述你想申请的功能

想用FlowchartFormPanel的同时还想用JsonSchemaForm的自定义功能

目前采用CustomPanel实现了
参考1
参考2

<CustomPanel
            canvasScaleToolbarProps={{ position: { left: -32, top: 180 } }}
            position={{ top: 40, bottom: 0, right: 0, width: 400 }}
            targetType={['node', 'canvas']}
            formSchemaService={NsJsonForm.formSchemaService}
            // formValueUpdateService={NsJsonForm.formValueUpdateService}
            getCustomRenderComponent={NsJsonForm.getCustomRenderComponent} />

CustomPanel实现【参考了FlowchartFormPanel的实现】

const __rest = (this && this.__rest) || function (s, e) {
  const t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
    t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function")
    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
        t[p[i]] = s[p[i]];
    }
  return t;
};
import React, { useState } from 'react';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import { CanvasScaleToolbar, JsonSchemaForm, WorkspacePanel } from '@antv/xflow';
// import { JsonSchemaForm } from '../canvas-json-schema-form';
// import { WorkspacePanel } from '../base-panel';
// import { defaultFormSchemaService } from './form-schema-service';
// import { defaultControlMapService } from './control-map-service';
export const CONTAINER_CLASS = 'xflow-editor-panel-collpase';
export const CustomPanel = props => {
  const { defaultControlMapService, defaultFormSchemaService } = props
  const [collpased, setCollpased] = useState(false);
  const { canvasScaleToolbarProps, controlMapService = defaultControlMapService, formSchemaService = defaultFormSchemaService, position = { width: 240, top: 0, bottom: 0, right: 0 }, show = true } = props, rest = __rest(props, ["controlMapService", "formSchemaService", "position", "show"]);
  if (!show) {
    return null;
  }
  const { width = 200, right } = position;
  return (React.createElement(WorkspacePanel, { className: CONTAINER_CLASS, position: Object.assign(Object.assign({}, position), { right: !collpased ? right : -width }) },
    React.createElement("div", { className: `${CONTAINER_CLASS}-wrapper` },
      React.createElement(JsonSchemaForm,
        Object.assign({
          argetType: ['node', 'edge', 'canvas', 'group'],
          controlMapService: controlMapService,
          formSchemaService: formSchemaService,
          position: Object.assign(Object.assign({}, position), { top: 0 }),
          prefixClz: "xflow-form-editor"
        },
          rest)),
      React.createElement(CanvasScaleToolbar, {
        ...canvasScaleToolbarProps
      }),
      // React.createElement(CanvasMiniMap, Object.assign({
      //   position: { left: 0, top: 88 },
      //   // minimapOptions: { width: 200, height: 120 }
      // })),
      React.createElement("div", {
        className: `${CONTAINER_CLASS}-icon`, style: {
          top: 21,
          left: !collpased ? -10 : -20,
          borderRadius: !collpased ? '50%' : '50% 0 0  50%',
          borderRight: !collpased ? '' : 'none',
        }, onClick: () => {
          setCollpased(!collpased);
        }
      }, collpased ? React.createElement(DoubleLeftOutlined, null) : React.createElement(DoubleRightOutlined, null)))));
};
//# sourceMappingURL=form-panel.js.map

多实例使用如钉钉审批流

描述你想要的解决方案

统一的用户体验
统一的实现方式
尽量做到高度自定义

描述你所考虑的替代方案

暂无

你的网站或应用程序实例

No response

屏幕截图或视频

Expected Behavior

期望能正常加载组件

Current Behavior

依赖报错

Possible Solution

暂时没有

Steps To Reproduce

不能正常引入组件使用，

<!-- Provide a log message if relevant -->
Unhandled Rejection (Error): Node with name 'react-shape' does not exist.
Registry.onNotFound
./src/registry/registry.ts:97
Function.create
./src/model/node.ts:1179
Model.createNode
./src/model/model.ts:246
  243 | }
  244 | removeCells(cells, options = {}) {
  245 |     if (cells.length) {
> 246 |         return this.batchUpdate('remove', () => {
      | ^  247 |             return cells.map((cell) => this.removeCell(cell, options));
  248 |         });
  249 |     }
View compiled
Model.addNode
./src/model/model.ts:240
  237 | removeCell(obj, options = {}) {
  238 |     const cell = typeof obj === 'string' ? this.getCell(obj) : obj;
  239 |     if (cell && this.has(cell)) {
> 240 |         return this.collection.remove(cell, options);
      | ^  241 |     }
  242 |     return null;
  243 | }
View compiled
Graph.addNode
./src/graph/graph.ts:147
  144 | }
  145 | /**
  146 |  * **Deprecation Notice:** `getCell` is deprecated and will be moved in next
> 147 |  * major release. Use `getCellById()` instead.
      | ^  148 |  *
  149 |  * @deprecated
  150 |  */
View compiled
AddNodeCommand._callee2$
./src/command-contributions/node/node-add.ts:81
  78 |     return nodeConfig;
  79 | }
  80 | /** react shape 使用react-portal-view提高性能 */
> 81 | if (!nodeConfig.view) {
     | ^  82 |     const graphConfig = yield ctx.getGraphConfig();
  83 |     nodeConfig.view = graphConfig.graphId;
  84 | }

Additional Context

Your Environment

• @antv/[email protected]
• OS: [e.g. macOS Sierra 10.12.3]
• Browser: [e.g. chrome 78.0.3904.108]

描述你想申请的功能

有连接线的，可以连接的port的样式可以选择和
没连接线的，可以连接的port的样式一致，也可以自定义

描述你想要的解决方案

有连接线的，可以连接的port的样式可以选择和
没连接线的，可以连接的port的样式一致，也可以自定义

描述你所考虑的替代方案

有连接线的，可以连接的port的样式可以选择和
没连接线的，可以连接的port的样式一致，也可以自定义

你的网站或应用程序实例

No response

屏幕截图或视频

Describe the feature you'd like to request

Users need to execute callback logic after graph meta props change

Describe the solution you'd like

add "onMetaChange" prop to XFlow component props, when meta prop of XFlow change and the Component has "onMetaChange" prop call "onMetaChange" function with XFlow application as param.

Describe alternatives you've considered

none

Your Example Website or App

No response

Screenshots or Videos

No response

Expected Behavior

Current Behavior

Possible Solution

Steps To Reproduce

1. ...
2. ...
3. ...

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

• x6: [e.g. 1.0.0]
• OS: [e.g. macOS Sierra 10.12.3]
• Browser: [e.g. chrome 78.0.3904.108]

Hi XFlow team,
I was wondering if you would be open to enabling the Github Discussion's feature for the this repository.

Motiviation For Change

• Once the Github Discussion's tab is enabled, people can post their questions and that would help with finding questions and solutions more easily for the community.
• G6 and Graphin repositories recently enabled Discussions
  • antvis/G6#3363

How to enable Discussions for this repository can be found here:

• https://docs.github.com/en/discussions

Example of what Github Discussion's look like when enabled

• react-query's github discussion's - https://github.com/tannerlinsley/react-query/discussions
• @antv/graphin - Graphin Github Discussion's tab is enabled
  

Related:

• #43

视图生成的edge id并不是uuid，而是[object Object]:xxxxxx-[object Object]:xxxx，这会导致以下情况出现不能正常获取edge

XFlow的onLoad实践里获取

const onLoad = async (app) => {
  const graph = await app.getGraphInstance()
  graph.on('edge:connected', ({ isNew, edge }) => {
      // 直接获取edge，此时edge的id是uuid，能正常删除
      // graph.removeEdge(edge.id)
      setTimeout(() => {
          // 删除失败，此时获取的还是uuid，但是通过addEdge的hooks拿到的edge是[object Object]:xxxxxx-[object Object]:xxxx格式的，也就是edge实际上连线完成后变化了？
          graph.removeEdge(edge.id)
      }, 1000)
    }) 
}

描述你想申请的功能

Angular可以使用吗？

描述你想要的解决方案

Angular可以使用吗？

描述你所考虑的替代方案

Angular可以使用吗？

你的网站或应用程序实例

No response

屏幕截图或视频

No response

1.仓库的README.MD中XFlow 使用文档，控制台报错
GET https://xflow.antv.vision/zh/docs/tutorial-01/about 404，应该是配置的链接地址错误，或者部署资源不对。

2.点击使用文档网站左上角AntV logo或者点击XFlow进入文档首页https://xflow.antv.vision/，页面底部以下资源或者地址404

• 底部的4个纵列 产品首页链接地址、图标用例、使用文档、API文档 共16个地址全部含有undefined，导致跳转出错
  
  
  

描述你想申请的功能

希望能导出 X6Graph 以便使用 registerNode、registerPortLayout 注册自定义节点和边
如：

X6Graph.registerPortLayout(
  'erPortPosition',
  (portsPositionArgs) => {
    return portsPositionArgs.map((_, index) => {
      return {
        position: {
          x: 0,
          y: (index + 1) * LINE_HEIGHT,
        },
        angle: 0,
      }
    })
  },
  true,
)

描述你想要的解决方案

希望能导出 X6Graph 以便使用 registerNode、registerPortLayout 注册自定义节点和边

描述你所考虑的替代方案

无

你的网站或应用程序实例

No response

屏幕截图或视频

No response

Describe the feature you'd like to request

目前 graph-render command 中 diff 之后的顺序是 add、delete、最后 update。

有一种场景，节点已经在画布中，但是是 visible:false 的状态。此时如果做一次数据更新，把节点置为 visible:true，并且再添加一条该节点的边，这个新加的边是不会展示的。因为 add 操作在最前面，add 的时候节点还是 visible:false 的状态，尚未更新，所以边也没有展示出来。这里有一个时序上的先后问题。

Describe the solution you'd like

如果顺序是先 update 再 add 和 delete。是不是会更合理。因为 update 的对象肯定是之前就在画布上的。然后 update 的时候也不涉及后面 add 和 delete 的节点/边。因为边的 source 和 target 是不参与 update 的（如果变化了理论上 id 也应该变，就不是同一条边了）。

但 add 和 delete 的节点/边是会涉及现在在画布上的节点的。所以让这些节点先完成更新，之后再 add、delete 就会避免一些时序问题出现。

问题描述

流程图解决方案中，自定义节点在连线时，锚点时隐时现，用户体现不好。

重现链接

https://xflow.antv.vision/docs/tutorial/solutions/flow

重现步骤

详见视频。

https://xflow.antv.vision/docs/tutorial/solutions/flow
官方文档的流程图解决方案，拉出自定义节点，连线就能发现，锚点时隐时现，锚点和节点不断覆盖，用户体现不好。

预期行为

希望自定义节点和一般节点一样，连线时锚点不要时隐时现

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• XFlow 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

补充说明（可选）

No response

描述你想申请的功能

当一个port有多个连接线以后，我删除其中一条，样式就变成了没有连接的状态了
删除连线时校验是否还有输入

描述你想要的解决方案

删除连线时校验是否还有输入，有就不改变样式，没有就改变样式

描述你所考虑的替代方案

删除连线时校验是否还有输入，有就不改变样式，没有就改变样式

你的网站或应用程序实例

No response

屏幕截图或视频

动态添加port之后，react组件Node的props中获取到的port没有变化

Discussed in #93

描述你想申请的功能

需要按照 BPMN 的规范来绘制流程图

描述你想要的解决方案

可以直接使用XFlow来绘制兼容 BPMN2.0 规范的流程

描述你所考虑的替代方案

可以直接使用XFlow来绘制兼容 BPMN2.0 规范的流程

你的网站或应用程序实例

No response

屏幕截图或视频

No response

问题描述

即使未真正连线（拉到空白处）。hooks.addEdge.registerHook 也会记录，再次连线操作连接成功后顺序触发多次 args.createEdgeService 的回调。

重现链接

https://codesandbox.io/embed/dreamy-meninsky-fuwly?fontsize=14&hidenavigation=1&theme=dark

重现步骤

1.添加两个节点。
2.节点连线到空白处，连线消失。
3.节点连线到节点，连线成功。config-cmd 文件中的 hooks.addEdge 的 createEdgeService 触发多次。打开console看的到。

预期行为

只有在成功连线时触发 hooks.addEdge 的 createEdgeService 回调

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• XFlow 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

Describe the feature you'd like to request

希望xflow节点支持展开/合并操作。类似折叠树。

类似：

Describe the solution you'd like

我利用了xflow实现运营指标分解树的编辑、展示和监控。但指标节点太多的时候，需要有节点合并/展开的折叠操作。

Describe alternatives you've considered

我尝试过
1、使用xflow group能力，但这个需要使用者自己分组，且分组不适合用于折叠下游节点。
2、自己在节点上添加一个展开/合并按钮
a、控制数据，但会触发画布整体重渲染，导致位置变化。
b、控制下游节点visible，虽然隐藏了，但会导致整体尺寸不对。

Your Example Website or App

No response

Screenshots or Videos

No response

问题描述

教程/解决方案/流程图 例子,自定义节点onload中回显报错.直接把数据绑定在XFlow标签同样报错

重现链接

https://codesandbox.io/s/cool-leftpad-9v355n?file=/App.tsx

重现步骤

文档例子地址:https://xflow.antv.vision/zh-CN/docs/tutorial/solutions/flow
1,在例子中 添加自定义节点,点击保存按钮.控制台拿到保存的数据.
2.在例子的 index.tsx文件 引入XFlowGraphCommands,NsGraphCmd.
import { XFlowGraphCommands } from '@antv/xflow' import type { NsGraphCmd } from '@antv/xflow'
3.在index.tsx中定义上边步骤1控制台拿到的数据
const graphData = { "nodes": [ { "id": "node-146a61b2-1476-4981-b7ba-ecb1f919b381", "renderKey": "Process", "name": "Process", "label": "111", "width": 60, "height": 40, "ports": { "items": [ { "group": "top", "id": "c685a00f-49c1-4b8a-83f7-6b069fff2ca9" }, { "group": "right", "id": "ac360268-7f8d-49c8-83ac-dae5db4f18b4" }, { "group": "bottom", "id": "3b6f0a5a-1e27-4577-a314-070bf76e7035" }, { "group": "left", "id": "08d88c8d-209e-4777-9ca8-b371a1b1aeb0" } ], "groups": { "top": { "position": { "name": "top" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "right": { "position": { "name": "right" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "bottom": { "position": { "name": "bottom" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "left": { "position": { "name": "left" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 } } }, "x": 470, "y": 140, "zIndex": 10 }, { "id": "node-0e3df9b9-3f86-4afd-adc9-eac68792b4a3", "renderKey": "Terminal", "name": "Terminal", "label": "222", "width": 60, "height": 40, "ports": { "items": [ { "group": "top", "id": "3b011470-ac88-4e90-8923-a2b656f0ec31" }, { "group": "right", "id": "7d640371-50da-474d-8db6-a59cd8387842" }, { "group": "bottom", "id": "250dc5c4-ad44-4fe8-bdf4-0e066d578e36" }, { "group": "left", "id": "9141cb04-ab8d-477f-ab26-36696154b635" } ], "groups": { "top": { "position": { "name": "top" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "right": { "position": { "name": "right" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "bottom": { "position": { "name": "bottom" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "left": { "position": { "name": "left" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 } } }, "x": 640, "y": 200, "zIndex": 10 }, { "id": "node-5c5bdaad-ece3-444c-8258-1363132664e5", "renderKey": "custom-node-indicator", "name": "custom-node-indicator", "label": "自定义节点", "width": 162, "height": 130, "ports": { "items": [ { "group": "top", "id": "381844f1-0fa0-473b-97aa-bfd7e973b9c8" }, { "group": "right", "id": "9577b057-8871-48dc-b2cd-1bd8d9e094d7" }, { "group": "bottom", "id": "4d18ed9d-d412-4993-995a-6a8aa363f853" }, { "group": "left", "id": "4bb4f95e-bc13-40ac-92cf-9f47647421b1" } ], "groups": { "top": { "position": { "name": "top" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "right": { "position": { "name": "right" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "bottom": { "position": { "name": "bottom" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "left": { "position": { "name": "left" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 } } }, "originData": { "name": "custom-node-indicator", "width": 162, "height": 130, "label": "自定义节点" }, "isCustom": true, "x": 397, "y": 240, "zIndex": 10 } ], "edges": [] }
4.onload方法中初始化
const onLoad: IAppLoad = async app => { graphRef.current = await app.getGraphInstance() await app.executeCommand(XFlowGraphCommands.GRAPH_RENDER.id, { graphData, } as NsGraphCmd.GraphRender.IArgs) }
5.报错
6.注释初始化数据方法,用定时器异步执行
const onLoad: IAppLoad = async app => { graphRef.current = await app.getGraphInstance() time(app) } const time = (app) => { setTimeout(() => { app.executeCommand(XFlowGraphCommands.GRAPH_RENDER.id, { graphData, } as NsGraphCmd.GraphRender.IArgs) }) }
7.成功

预期行为

预期onload可以回显自定义数据 或者 XFlow标签可以直接绑定数据回显

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• XFlow 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

补充说明（可选）

No response

Describe the bug

XFlow 组件使用style属性无效果，className可以

Your Example Website or App

1

Steps to Reproduce the Bug or Issue

<XFlow
  onLoad={onLoad}
  graphLayout={{ layoutType: 'er', layoutOptions: {} }}
  style={{ height: '100%' }}   //无效果
  className="er-xflow-container"
>
  <XFlowCanvas config={graphConfig}>
    <CanvasMiniMap nodeFillColor="#ced4de" minimapOptions={{}} />
  </XFlowCanvas>
</XFlow>

Expected behavior

有效果

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

描述你想申请的功能

添加监听事件，移动或添加node时，两个node相距到达一定数值时。显示可以连线，鼠标抬起，添加连线

描述你想要的解决方案

添加监听事件，移动或添加node时，两个node相距到达一定数值时。显示可以连线，鼠标抬起，添加连线

描述你所考虑的替代方案

添加监听事件，移动或添加node时，两个node相距到达一定数值时。显示可以连线，鼠标抬起，添加连线

你的网站或应用程序实例

No response

屏幕截图或视频

No response

Expected Behavior

copied的节点也可以设置内容，样式属性

Current Behavior

copied的节点设置属性时报错

Possible Solution

Steps To Reproduce

https://xflow.antv.vision/~demos/flow-demos

1. 随便拖动一个组件至画布。
2. 然后复制、粘贴一个copied的节点
3. 修改copied节点属性就会出现以下报错信息

<!-- Provide a log message if relevant -->
node-update.js:42 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'setData')
    at UpdateNodeCommand.<anonymous> (node-update.js:42)
    at Generator.next (<anonymous>)
    at fulfilled (node-update.js:13)

Additional Context

Your Environment

• antv/xflow": [1.0.10]
• x6: [e.g. 1.0.0]
• OS: [e.g. macOS Sierra 10.12.3]
• Browser: [e.g. chrome 78.0.3904.108]

Describe the bug

保存后 删除节点 再调用XFlowGraphCommands.LOAD_DATA 没有更新画布

Your Example Website or App

https://codesandbox.io/s/wandering-glade-w4odh?file=/config-toolbar.ts

Steps to Reproduce the Bug or Issue

1.保存节点
2.删除第一个节点
3. 调用loadData 数据源为保存时的数据
4. 没有对应渲染

Expected behavior

1.点击保存 会自动删除第一个node节点 然后更新画布为保存前的状态

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]macOS
• Browser: [e.g. Chrome, Safari, Firefox]Chrome
• Version: [e.g. 91.1]97

Additional context

No response

问题描述

这边采用create-react-app Typescript + 线上demo 测试 本地报错无法运行

重现链接

https://codesandbox.io/s/new

重现步骤

1.使用create-react-app Typescript 搭建demo
2.安装antd 依赖配置
3.将官网示例复制到本地，运行报错

预期行为

平台

• 操作系统: [Windows]
• 网页浏览器: [Chrome]
• XFlow 版本: [1.0.3 ... ]
  

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

TypeError: extensionRegistry.addExtension is not a function

https://codesandbox.io/s/wsnu8

Not work local.
when you remove CanvasMiniMap and CanvasSnapline.
and set position={{ width: 800, height: 800 }} the component is rendered
but CanvasScaleToolbar not appear

      <XFlowCanvas config={graphConfig} position={{ width: 800, height: 800 }} >
        <CanvasScaleToolbar position={{ top: 12, left: 12 }} />
      </XFlowCanvas>

Steps To Reproduce

1. npx create-react-app xflow-ts-demo --template typescript
2. cd xflow-ts-demo
3. yarn add @antv/xflow
4. yarn add antd @antv/layout @ant-design/icons @antv/x6 @antv/x6-react-components @antv/x6-react-shape
5. copy packages\xflow-docs\docs\tutorial\getting-started\demo to xflow-ts-demo/src
6. import App from './demo'; in index.tsx
7. yarn start

D:/app/src/xflow-main/components/app-extension-module.tsx:25
  22 | const disposable = extensionRegistry.addExtension({
  23 |     config: config,
  24 |     createModule,
> 25 | });
     | ^  26 | return () => {
  27 |     disposable.dispose();
  28 | };

Your Environment

package.json:

{
  "name": "xflow-ts-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@antv/layout": "^0.1.19",
    "@antv/x6": "^1.28.1",
    "@antv/x6-react-components": "^1.1.15",
    "@antv/x6-react-shape": "^1.5.2",
    "@antv/xflow": "^1.0.7",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "antd": "^4.17.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• OS: Windows 8
• Browser: Chrome 96.0.4664.45 (64 bits), Firefox 94.0.2 (64-bit)

描述你想申请的功能

ER 连接桩精确到字段级别

• 当无法确定附属表的外键时候
• 需要用户自定义外键连接
• 并且source和target数据最好携带 表和链接桩的具体信息
  参考X6 ER

描述你想要的解决方案

ER 连接桩精确到字段级别

• 当无法确定附属表的外键时候
• 需要用户自定义外键连接
• 并且source和target数据最好携带 表和链接桩的具体信息
  参考X6 ER

描述你所考虑的替代方案

目前我是是用gojs-react实现的er图，但是整体体验并不好，还有商业授权，扩展很麻烦，想使用xflow-er来代替。

你的网站或应用程序实例

No response

屏幕截图或视频

No response

https://xflow.antv.vision/docs/tutorial-core-components/xflow-component#%E6%A0%B8%E5%BF%83%E9%85%8D%E7%BD%AE%E9%A1%B9

Describe the feature you'd like to request

目前使用vite的过程中 会存在不少兼容问题，官方能否出一个基于vite的example

Describe the solution you'd like

基于2.x的vite 完善一个xflow的demo

Describe alternatives you've considered

null

Your Example Website or App

No response

Screenshots or Videos

No response

Describe the bug

xflow 1.0.30
vite 2.7.2
使用报错 regeneratorRuntime is not defined

Your Example Website or App

no

Steps to Reproduce the Bug or Issue

use vite

Expected behavior

组件库的打包问题 希望能处理下

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux] macOS
• Browser: [e.g. Chrome, Safari, Firefox] Chrome
• Version: [e.g. 91.1]97

Additional context

No response

问题描述

切换tab画布空白

重现链接

https://codesandbox.io/s/sweet-leftpad-g231q?file=/App.tsx

重现步骤

1.进入页面
2.点击第二个tab 画布空白

预期行为

画布正常显示

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• XFlow 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response