1.2.3 • Published 2 months ago
@ant-design/flowchart v1.2.3
@ant-design/flowchart
Flowchart solutions, based on XFlow.
Case
✨ Features
- Easy to use
- TypeScript
📦 Installation
$ npm install @ant-design/flowchart
🔨 Usage
import React from 'react';
import { Flowchart } from '@ant-design/flowchart';
import 'antd/dist/antd.css';
import '@ant-design/flowchart/dist/index.css';
const DemoFlowchart = () => {
return (
<div style={{ height: 600 }}>
<Flowchart
onSave={(d) => {
console.log(d, JSON.stringify(d));
}}
toolbarPanelProps={{
position: {
top: 0,
left: 0,
right: 0,
},
}}
scaleToolbarPanelProps={{
layout: 'horizontal',
position: {
right: 0,
top: -40,
},
style: {
width: 150,
height: 39,
left: 'auto',
background: 'transparent',
},
}}
canvasProps={{
position: {
top: 40,
left: 0,
right: 0,
bottom: 0,
},
}}
nodePanelProps={{
position: { width: 160, top: 40, bottom: 0, left: 0 },
}}
detailPanelProps={{
position: { width: 200, top: 40, bottom: 0, right: 0 },
}}
/>
</div>
);
};
export default DemoFlowchart;
Preview
📜 Document & API
export interface FlowchartProps extends FlowchartContainerProps {
/** 默认数据 */
data?: Datum;
/** 画布是否自动居中 */
isAutoCenter?: boolean;
/** 节点面板配置 */
nodePanelProps?: NodePanelProps;
/** 画布主要区域配置 */
canvasProps?: CanvasProps;
/**
* @title 画布状态
* @description scan 会禁用一些画布事件,例如连线、鼠标右键等
* @default "edit"
*/
mode?: 'edit' | 'scan';
/** toolbar */
toolbarPanelProps?: ToolbarPanelProps;
/** keyBinding */
keyBindingProps?: false | KeybindingConfig;
/** scale toolbar */
scaleToolbarPanelProps?: ScaleToolbarPanelProps;
/** form editor */
detailPanelProps?: DetailPanelProps;
/** 右键菜单配置 */
contextMenuPanelProps?: ContextMenuPanelProps;
/** popover */
popoverProps?: PopoverProps;
/** onReady */
onReady?: (graph: IFlowchartGraph, app: IApplication) => void;
/** 点击回调,仅支持 save-graph-data */
onSave?: (data: Datum) => void;
/** 新增节点时回调 */
onAddNode?: (node: NsGraph.INodeConfig) => void;
/** 新增边时回调 */
onAddEdge?: (edge: NsGraph.IEdgeConfig) => void;
/** xflow app 销毁前的回调 */
onDestroy?: IAppDestroy;
/** xflow app 初始化后的回调 */
onConfigReady?: IAppConfigReady;
/** 节点或边更新数据时调用 */
onConfigChange?: (params: { data: Datum; type: string; config?: NsGraph.INodeConfig | NsGraph.IEdgeConfig }) => void;
}
🤝 How to Contribute
Your contributions are always welcome! Please Do have a look at the issues first.
📧 Contact us
DingTalk group number: 44788198
.
License
MIT
1.2.3
2 months ago
1.2.2
1 year ago
1.2.0
2 years ago
1.2.1
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.6-beta.1
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
1.0.4-beta.0
2 years ago
1.0.1-beta.2
2 years ago
1.0.1-beta.1
2 years ago
1.0.0-beta.3
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
0.0.1-beta.10
3 years ago
0.0.1-beta.11
3 years ago
0.0.1-beta.9
3 years ago
0.0.1-beta.8
3 years ago
0.0.1-beta.7
3 years ago
0.0.1-beta.6
3 years ago
0.0.1-beta.4
3 years ago
0.0.1-beta.3
3 years ago
0.0.1-beta.1
3 years ago