基于 logic-flow 实现一个 react 流程图组件 ​

// 终端
1. mkdir lf-react && cd lf-react
2. npx create-dumi

输入命令 2 后，选择模板
template  -->  React Library
NPM client ---> pnpm
// ... 其余无所谓

// 为了有良好的类型提示，我们在安装下 react 的类型提示
3. pnpm add @types/react @types/react-dom -D

// 运行项目
4. pnpm start

pnpm add @logicflow/core @logicflow/extension @icon-park/react antd
// dumi 本身是基于 umijs 的，所以为了支持 scss，可以直接安装 umijs 的插件
pnpm add @umijs/plugin-sass -D

// src/Foo/index.ts
import React, { type FC } from 'react';
import './index.scss';

const Foo: FC<{ title: string }> = (props) => (
  <h4>
    <div className="test">{props.title}</div>
  </h4>
);

export default Foo;

// src/Foo/index.scss
.test {
    background-color: aqua;
}

src -
  lfFlowChart -
  types.ts - // 类型提示文件
  index.tsx - // 组件入口文件
  lfFlowChart.module.scss - // 组件样式
  index.md - // 组件文档
  index.$tab -
  api.md // 组件文档 tab-api

;-lfFlowChart -
  node -
  base - // 基础的节点
  edge - // 基础连线
  index.ts -
  lfComps -
  SideBar.tsx - // 侧边节点拖拽面板
  CtrlBar.tsx - // 顶部控制面板
  EditBar.tsx - // 节点、边样式编辑面板
  utils -
  ctrlbar -
  tools.tsx -
  sidebar -
  tools.tsx -
  editbar -
  tools.tsx -
  constants.ts - // 静态数据
  helper.ts // 工具函数

// src/lfFlowChart/index.tsx
import React from 'react'
import s from './lfFlowChart.modules.scss'

export default function LfFlowChart(props: any) {
  return (
    <div className={s.lf_flowChart}>index</div>
  )
}

// src/lfFlowChart/lfFlowChart.module.scss
.lf_flowChart {
    background-color: azure;
}

// src/lfFlowChart/index.md
# LfChartFlow

流程图组件

// src/lfFlowChart/index.$tab-api.md
# api

流程图组件 api

| 属性 | 描述 | 类型 | 是否必填 | 示例 |
| ---- | ---- | ---- | -------- | ---- |
|      |      |      |          |      |

// src/react-env.d.ts
declare module '*.module.scss' {
  const classes: { readonly [key: string]: string }
  export default classes
}

export { default as Foo } from './Foo' // 创建的时候自带的，后期在移除
export { default as LfFlowChart } from './lfFlowChart'

// src/lfFlowChart/index.tsx
import React, { useEffect, useRef } from 'react'
import s from './lfFlowChart.module.scss'
// logic-flow 相关
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'
// iconpark 的样式文件
import '@icon-park/react/styles/index.css'

import { LfFlowChartProps } from './types'

const LfFlowChart: FC<LfFlowChartProps> = (props) => {
  // 使用 useRef 是为了保证每次都是同一个数据
  const lfRef = useRef<HTMLDivElement | null>(null) // logic-flow 挂载的节点
  const lf = useRef<LogicFlow | null>(null) // logic-flow 实例

  useEffect(() => {
    // 实例化 LogicFlow
    lf.current = new LogicFlow({
      container: lfRef.current as HTMLDivElement,
      width: 1200,
      height: 800,
    })

    const { data = {} } = props
    // 流程图渲染
    lf.current.render(data)

    // 组件卸载时移除实例
    return () => {
      if (lf.current !== null) {
        lf.current = null
      }
    }
  }, [])

  return (
    <div className={s.lf_flowChart}>
      <div ref={lfRef}></div>
    </div>
  )
}

export default LfFlowChart

// src/lfFlowChart/types.ts
export interface LfFlowChartProps {
  data: any
  config: {
    width: number
    height: number
    [key: string]: any
  }
}

// src/lfFlowChart/utils/helper.ts
/**
 * @param config 用户自定义配置
 * @returns 流程图配置
 */
export function getLfConfig(config: any = {}) {
  return {
    overlapMode: 1,
    autoWrap: true, // 文本自动换行
    metaKeyMultipleSelected: true, // 允许一次选中多个节点
    keyboard: {
      enabled: true, // 支持键盘控制，例如 ctrl + z 等
    },
    grid: {
      visible: true, // 开启网格， 默认纯色背景
      size: 10, // 网格大小
    },
    stopScrollGraph: true, // 画布是否允许滚动
    background: {
      // 背景
      backgroundImage: '#ccc',
      backgroundRepeat: 'repeat',
    },
    ...config,
  }
}

// // src/lfFlowChart/index.md
# LfChartFlow

流程图组件

``jsx
import { LfFlowChart } from 'lf-react';

const lfConfig = {
  width: 800,
  height: 400,
};

export default () => <LfFlowChart config={lfConfig} />;
``

// lfFlowChart/types.ts
import { CSSProperties, ReactNode } from 'react'

export interface LfFlowChartProps {
  themeColor?: string
  data?: any
  style?: CSSProperties
  config: {
    width: number
    height: number
    [key: string]: any
  }
  styleConf?: {
    ctrlBatStyle?: CSSProperties
    editBatStyle?: CSSProperties
    sideBatStyle?: CSSProperties
    miniMapPosition?: {
      width: number
      height: number
    }
  }
}

// ....

export interface LfFlowChartProps {
  themeColor?: string
  data?: any
  // ...
}

// src\lfFlowChart\lfComps\CtrlBar.tsx
import { theme } from 'antd'
import React from 'react'

const { useToken } = theme

const CtrlBar = () => {
  const {
    token: { colorPrimary }, // colorPrimary: 就是我们要的主题
  } = useToken()

  return <div>CtrlBar</div>
}

export default CtrlBar

// src/lfFlowChart/types.ts

export interface LfFlowChartProps {
  themeColor?: string
  data?: any
  config: {
    width: number
    height: number
    [key: string]: any
  }
  style?: CSSProperties
  // 定义各个控制面板的样式
  styleConf?: {
    ctrlBatStyle?: CSSProperties
    editBatStyle?: CSSProperties
    sideBatStyle?: CSSProperties
    miniMapPosition?: {
      width: number
      height: number
    }
  }
}

// 控制面板每一个按钮类型定义
export interface CtrlItem {
  icon: ReactNode // 必须，面板上显示的icon
  type: string // 必填，唯一标识
  title?: string // hover 提示
}

// 保存的数据类型
export type SaveLfInfoType = 'json' | 'xml' | 'image'

// ctrlbar 组件的所有入参
export interface CtrlBarProps {
  toggleSidebar: () => void // 开启关闭拖拽面板
  selectMoreNode: () => void // 开启关闭框选功能
  openMiniMap: () => void // 打开缩略图
  lfUndoOrRedo: (type: boolean) => void // 回退到上一步/下一步
  lfZoomInOrOut: (type: boolean) => void // 画布放大/缩小
  saveLfInfo: (type: SaveLfInfoType) => void // 保存流程图数据
}

// lfFlowChart/utils/ctrlbar-tools.tsx
import { Back, HamburgerButton, Next, Stretching, SwitchButton, ZoomIn, ZoomOut } from '@icon-park/react'
import React from 'react'
import { CtrlItem } from '../types'

export const size = 18

export const items: MenuProps['items'] = [
  { label: '保存为图片', key: 'image' },
  { label: '保存为JSON', key: 'json' },
  { label: '保存为XML', key: 'xml' },
]

export const getCtrlItemsList = (colorPrimary: string): CtrlItem[] =>
  [
    {
      icon: <HamburgerButton theme="outline" size={size} fill={colorPrimary} strokeLinejoin="miter" />,
      type: 'toggleSidebar',
      title: '开启/关闭节点选择面板',
    },
    {
      icon: <SwitchButton theme="outline" size={size} fill={colorPrimary} />,
      type: 'selectMoreNode',
      className: 'px-2',
      title: '开启/关闭画布框选功能',
    },
    {
      icon: <Stretching theme="outline" size={size} fill={colorPrimary} strokeLinejoin="miter" />,
      type: 'openMiniMap',
      title: '开启缩略图',
    },
    {
      icon: <Back theme="outline" size={size} fill={colorPrimary} strokeLinejoin="miter" />,
      type: 'lfUndo',
      title: '上一步',
    },
    {
      icon: <Next theme="outline" size={size} fill={colorPrimary} strokeLinejoin="miter" />,
      type: 'lfRedo',
      title: '下一步',
    },
    {
      icon: <ZoomIn theme="outline" size={size} fill={colorPrimary} strokeLinejoin="miter" />,
      type: 'lfZoomIn',
      className: 'px-2',
      title: '放大',
    },
    {
      icon: <ZoomOut theme="outline" size={size} fill={colorPrimary} strokeLinejoin="miter" />,
      type: 'lfZoomOut',
      className: 'px-2',
      title: '缩小',
    },
  ] as CtrlItem[]

# LfChartFlow

流程图组件

``jsx
import { LfFlowChart } from 'lf-react';

const lfConfig = {
  width: 1200,
  height: 600,
};

export default () => <LfFlowChart config={lfConfig} />;

// lfFlowChart/utils/helper.ts
import { MiniMap, SelectionSelect, Snapshot } from '@logicflow/extension'

/**
 * @desc 插件列表
 */
export const extensionList = [
  SelectionSelect, // 引入框选插件
  MiniMap, // 缩略图
  Snapshot, // 保存为图片
]

export interface LfFlowChartProps {
  themeColor?: string
  // ....
  showCtrlBar?: boolean
}

// lfFlowChart/utils/index.tsx
const LfFlowChart: FC<LfFlowChartProps> = (props) => {
  // ...
  const { showCtrlBar = true } = props
  const [openCtrlBar, setOpenCtrlBar] = useState<boolean>(showCtrlBar)

  const toggleSidebar = () => {
    setOpenCtrlBar(!openCtrlBar)
  }

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: props.themeColor || defaultThemeColor,
        },
      }}>
      <div className={s.lf_flowChart} ref={lfBoxRef} style={props?.style}>
        <div ref={lfRef}></div>
        {openCtrlBar && <SideBar />}
        // ....
      </div>
    </ConfigProvider>
  )
}

// lfFlowChart/utils/index.tsx
const LfFlowChart: FC<LfFlowChartProps> = (props) => {
  // ...
  const [openSelectMore, setOpenSelectMore] = useState(false)

  // 开启/关闭 框选
  const selectMoreNode = useCallback(() => {
    if (openSelectMore) (lf.current as LogicFlow).extension.selectionSelect.closeSelectionSelect()
    else (lf.current as LogicFlow).extension.selectionSelect.openSelectionSelect()
    setOpenSelectMore(!openSelectMore)
  }, [lf])

  return (
   // ....
  )
}

// lfFlowChart/utils/index.tsx
const LfFlowChart: FC<LfFlowChartProps> = (props) => {
  // ...
  // 开启缩略图
  const openMiniMap = () => {
    const w = props.styleConf?.miniMapPosition?.width || 1000
    const h = props.styleConf?.miniMapPosition?.height || 10
      ; (lf.current as LogicFlow).extension.miniMap.show(w, h)
  }

  return (
   // ....
  )
}

// lfFlowChart/utils/index.tsx
const LfFlowChart: FC<LfFlowChartProps> = (props) => {
	// ...
  const [undoAble, setUndoAble] = useState(false) // 是否有上一步
  const [redoAble, setRedoAble] = useState(false) // 是否有下一步

  useEffect(() => {
    extensionList.forEach(extension => {
      LogicFlow.use(extension)
    })

    lf.current = new LogicFlow({
      container: lfRef.current as HTMLDivElement,
      ...getLfConfig(props.config),
    })

    const { data = {} } = props
    // 流程图渲染
    lf.current.render(data)

    // 必须在 render 之后才能监听操作变化
    lf.current.on('history:change', (
      { data: { undoAble: _undoAble, redoAble: _redoAble } }
    ) => {
      setUndoAble(_undoAble)
      setRedoAble(_redoAble)
    })

    return () => {
      if (lf.current !== null) {
        lf.current = null
      }
    }
  }, [])

  // ...
  // 回退上一步/下一步
  const lfUndoOrRedo = (type: boolean) => {
    if (type && undoAble) {
      (lf.current as LogicFlow).undo()
    } else if (!type && redoAble) {
      (lf.current as LogicFlow).redo()
    }
  };


  return (
   // ....
  )
}

// lfFlowChart/utils/index.tsx

const LfFlowChart: FC<LfFlowChartProps> = (props) => {
  // ...
 // 画布放大或缩小
  const lfZoomInOrOut = useCallback((type: boolean) =>
    (lf.current as LogicFlow).zoom(type),
    [lf]
  )

  return (
   // ....
  )
}

// lfFlowChart/utils/index.tsx
import { lfJson2Xml } from '@logicflow/extension'

const LfFlowChart: FC<LfFlowChartProps> = (props) => {
  // ...
 const saveLfInfo = useCallback((type: SaveLfInfoType) => {
    if (!lf.current) return
    let data: any

    if (type === 'image') {
      // 直接保存到本地
      lf.current.getSnapshot()
      return
    } else if (type === 'json') {
      data = lf.current.getGraphData()
    } else {
      data = lfJson2Xml(lf.current.getGraphData())
    }

    return data
  }, [lf])

  return (
   // ....
  )
}