ant-design-charts
ant-design-charts copied to clipboard
🐛[BUG] flowchart toolbarPanel不显示
🐛 bug 描述
按照官网流程图示例代码,配置了toolbarPanelProps,首次进入页面时,toolbarPanel不出现。
📷 复现步骤
首次进入页面时,toolbarPanel不出现。页面大小发生改变后,toolbarPanel出现。
🏞 期望结果
首次进入页面,就要展示toolbarPanel。
💻 复现代码
import React, { useRef } from 'react';
import { Flowchart } from '@ant-design/flowchart';
import style from './style.less';
import "@ant-design/flowchart/dist/index.css";
export default function Page() {
return <div className={style.container}>
<Flowchart
onSave={(d) => {
console.log(d, JSON.stringify(d));
}}
// 主画布配置
canvasProps={{
position: {
top: 40,
left: 0,
right: 0,
bottom: 0,
},
}}
// 节点面板配置
nodePanelProps={{
position: { width: 200, height: 400, top: 40, bottom: 0, left: 0 },
defaultActiveKey: ['official'],
registerNode: []
}}
// form 表单
detailPanelProps={{
position: { width: 200, top: 40, bottom: 0, right: 0 },
}}
// 缩放控件
scaleToolbarPanelProps={{
layout: 'horizontal',
position: {
top: -40,
left: 0,
},
}}
// Toolbar 配置
toolbarPanelProps={{
layout: 'horizontal',
position: {
top: 0,
left: 0,
},
}}
/>
</div>
}
© 版本信息
- ant-design-charts 版本: 1.3.6
- 浏览器环境 Google Chrome 100.0.4896.127(正式版本)
- 开发环境 Win7