fuse/src/views/draw-file/index.tsx

import { Layout } from 'antd'
import { useRef, forwardRef, useImperativeHandle, memo, useCallback, useEffect, useState } from 'react'
import { usePathData } from 'router'
import style from './style.module.scss'
import boardFactory from './board'
import DfSlider from './slider'
import DfHeader from './header'
import EShape from './eshape'
import { getBoardById, BoardType, BoardData, getExample, BoardTypeDesc } from 'api'
import { useRefersh } from 'hook'
import fileDefault from './default.json'

import type { Board } from './board'

const { Header, Sider, Content  } = Layout

const DfBoard = memo(forwardRef(({ data: boardData }: { data: BoardData }, ref) => {
  const board = useRef<Board>()
  const createBoard = useCallback((dom: HTMLCanvasElement | null) => {
    if (dom) {
      console.log(boardData)
      const boardRef = boardFactory(boardData, dom)
      board.current = boardRef
    } else if (board.current) {
      board.current.destroy()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  useImperativeHandle(ref, () => board.current)

  return (
    <div className={style['df-board']}>
      <div className={style['df-board-content']}>
        <canvas ref={createBoard}></canvas>
      </div>
    </div>
  )
}))

export const DrawFile = () => {
  const refersh = useRefersh()
  const path = usePathData()
  const pathId = Number(path!.id)
  const caseId = Number(path!.caseId)
  const pathType = path!.type as BoardType
  const [boardData, setBoardData] = useState<BoardData>()
  const board = useRef<Board>()
  const pathRef = useRef(path)

  const updateBoard = useCallback((data: Board) => {
    if (data !== board.current) {
      board.current = data
      refersh()
    }
  }, [refersh])

  useEffect(() => {
    if (!boardData || pathId !== boardData.id) {
      if (pathId !== -1) {
        getBoardById({ id: pathId }).then((data) => setBoardData({ ...data.content, id: data.filesId! }))
      } else {
        getExample({ caseId }).then((data) => {
          fileDefault.floors[0].title.value = data.caseTitle + "案发" + BoardTypeDesc[pathType];
          setBoardData(fileDefault)
        })
      }
    }
  }, [pathId, boardData?.id, boardData, caseId])

  useEffect(() => {
    if (JSON.stringify(path) !== JSON.stringify(pathRef.current)) {
      location.reload()
    }
  }, [path])

  return (
    <Layout className={style['df-layout']}>
      <Header className={style['df-header']}>
        { board.current && <DfHeader board={ board.current } type={ pathType } /> }
      </Header>
      <Layout>
        <Sider className={style['df-sider']}>
        { board.current && <DfSlider board={ board.current } type={ pathType } caseId={ caseId } /> }
        </Sider>
        <Content className={style['def-content']}>
          { board.current && <EShape board={ board.current } /> }
          { pathId === boardData?.id && <DfBoard data={boardData} ref={updateBoard} /> }
        </Content>
      </Layout>
    </Layout>
  )
}

export default DrawFile