@digiforce-cloud/flowdesigner
Case
✨ Features
- Easy to use
- TypeScript
📦 Installation
$ npm install @digiforce-cloud/flowdesigner🔨 Usage
import React from 'react';
import { Flowchart } from '@digiforce-cloud/flowdesigner';
import "antd/dist/antd.css";
import "@digiforce-cloud/flowdesigner/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