ivy-db-test
v0.0.16
Published
draw-board
Readme
1.安装
pnpm i @helix/draw-board
2.说明
2.1 参数说明
// 组件参数
// - mode 传入数组导表不同的模式 line | shape | material | MyMaterial | Pencil
// line 流程图上的线模式 text 文本模式 shape 流程图上的形状模式
// material 导入svg模式 MyMaterial 可以上传到图片到本地
// Pencil画笔模式
// - 侧边栏的参数传入可以自定义侧边栏 sidebarProps
// - 编辑和预览模式edit
// - handleImgPreview 可以处理预览模式下的图片
export interface DrawBoardProps {
mode: string[]
edit: boolean
sidebarProps?: SidebarProps[]
handleImgPreview?: (value: string) => Promise<string>
}
//组件向外暴漏的方法可以调用
export interface DrawBoardRef {
exportJson: () => {
shape: JsonNodesType[]
edge: JsonEdgesType[]
}
importPdf: (file: File) => Promise<void>
exportPdfImgJson: () => Record<string, any>[]
importJson: (value: string) => void
exportPng: () => Promise<string | undefined>
addSvg: (svg: string, option?: Record<string, any>) => void
handleReset: () => void
}
//侧边栏的参数传入可以自定义侧边栏
export interface SidebarProps {
key: string
icon: ReactNode
component: ReactNode
}2.2 依赖说明
"peerDependencies": {
"antd": "^5.24.3",
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
},- antd 需要提前在项目中安装
2.3 组件说明
1. DrawBoardDndProvider 拖拽的包裹组件 使用的时候要求包裹组件DrawBoard
2. 如果项目中已经全局使用 react-dnd 可以忽略 DrawBoardDndProvider
注意: 使用 DrawBoard 组件的的时候 一定要给父级组件 宽高
3. 使用
3.1 react
import type { DrawBoardRef, SidebarProps } from '@helix/draw-board'
import { jsonData, jsonData1 } from '@/constants/data' //json数据
import { DrawBoard, DrawBoardDndProvider } from '@helix/draw-board'
import { useState, useRef } from 'react'
import { Button } from 'antd'
function RouteComponent() {
const [edit, setEdit] = useState(true)
const flowChartRef = useRef<DrawBoardRef>(null)
const [operateType, setOperateType] = useState<string[]>([
'line',
'shape',
'text',
'material',
'myMaterial',
'pencil'
])
const sidebarProps: SidebarProps[] = [
{
key: 'draw',
icon: <Icon />,
component: <div>asfasf</div>
}
]
const handleExportJson = () => {
const resJson = flowChartRef.current?.exportJson()
console.log(resJson)
}
const handleImportJson = () => {
if (!flowChartRef.current) {
return
}
flowChartRef.current?.importJson(JSON.stringify(jsonData1))
setEdit(false)
}
const handleImportJson2 = () => {
flowChartRef.current?.importJson(JSON.stringify(jsonData))
setEdit(false)
}
const addSvg = () => {
flowChartRef.current?.addSvg(immuneCells1)
}
return (
<div
className="flex h-screen w-screen min-w-[1200px] flex-col items-center justify-center gap-10 bg-white"
style={{ color: '#000000' }}
>
<div className="flex gap-5">
<Button onClick={() => setEdit(!edit)}>{edit ? '退出编辑' : '进入编辑'}</Button>
<Button onClick={handleExportJson}>导出JSON</Button>
<Button onClick={handleImportJson}>导入JSON1</Button>
<Button onClick={handleImportJson2}>导入JSON2</Button>
<Button onClick={addSvg}>导入Svg</Button>
<Button
onClick={() => {
setOperateType(['line', 'shape'])
}}
>
转为流程图模式
</Button>
</div>
<div className="h-[800px] w-[1200px] border">
<DrawBoardDndProvider>
<DrawBoard
mode={operateType}
edit={edit}
ref={flowChartRef}
sidebarProps={sidebarProps}
/>
</DrawBoardDndProvider>
</div>
</div>
)
}
3.2 next 15
import { AntdRegistry } from '@ant-design/nextjs-registry'
import { App } from 'antd'
export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body>
<AntdRegistry>
<App>{children}</App>
</AntdRegistry>
</body>
</html>
)
}'use client'
import type { DrawBoardRef, SidebarProps } from '@helix/draw-board'
import { jsonData, jsonData1 } from './data'
import { useState, useRef } from 'react'
import { Button } from 'antd'
import '@ant-design/v5-patch-for-react-19'
import dynamic from 'next/dynamic'
const DrawBoard = dynamic(() => import('@helix/draw-board').then((mod) => mod.DrawBoard), {
ssr: false
})
const DrawBoardDndProvider = dynamic(
() => import('@helix/draw-board').then((mod) => mod.DrawBoardDndProvider),
{
ssr: false
}
)
export function RouteComponent() {
const [edit, setEdit] = useState(true)
const flowChartRef = useRef<DrawBoardRef>(null)
const [operateType, setOperateType] = useState<string[]>([
'line',
'shape',
'text',
'material',
'myMaterial',
'pencil'
])
const sidebarProps: SidebarProps[] = [
{
key: 'draw',
icon: <div className="text-xl text-slate-700" />,
component: <div>asfasf</div>
}
]
const handleExportJson = () => {
const resJson = flowChartRef.current?.exportJson()
console.log(resJson)
}
const handleImportJson = () => {
if (!flowChartRef.current) {
return
}
flowChartRef.current?.importJson(JSON.stringify(jsonData1))
setEdit(false)
}
const handleImportJson2 = () => {
flowChartRef.current?.importJson(JSON.stringify(jsonData))
setEdit(false)
}
const addSvg = () => {
flowChartRef.current?.addSvg('immuneCells1')
}
return (
<div
className="flex h-screen w-screen min-w-[1200px] flex-col items-center justify-center gap-10 bg-white"
style={{ color: '#000000' }}
>
<div className="flex gap-5">
<Button onClick={() => setEdit(!edit)}>{edit ? '退出编辑' : '进入编辑'}</Button>
<Button onClick={handleExportJson}>导出JSON</Button>
<Button onClick={handleImportJson}>导入JSON1</Button>
<Button onClick={handleImportJson2}>导入JSON2</Button>
<Button onClick={addSvg}>导入Svg</Button>
<Button
onClick={() => {
setOperateType(['line', 'shape'])
}}
>
转为流程图模式
</Button>
</div>
<div className="h-[800px] w-[1200px] border">
<DrawBoardDndProvider>
<DrawBoard
mode={operateType}
edit={edit}
ref={flowChartRef}
sidebarProps={sidebarProps}
/>
</DrawBoardDndProvider>
</div>
</div>
)
}注意： next 14 需要自定义 dynamic 动态引入组件