ant-design-charts icon indicating copy to clipboard operation
ant-design-charts copied to clipboard

🐛[BUG] flowchart toolbarPanel不显示

Open lipigirl opened this issue 2 years ago • 0 comments

🐛 bug 描述

按照官网流程图示例代码,配置了toolbarPanelProps,首次进入页面时,toolbarPanel不出现。

📷 复现步骤

首次进入页面时,toolbarPanel不出现。页面大小发生改变后,toolbarPanel出现。

1650529769 1650529769(1)

🏞 期望结果

首次进入页面,就要展示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

lipigirl avatar Apr 21 '22 08:04 lipigirl