feat: 对接历史记录

src/views/draw-file/board/editCAD/History/History.js

@@ -9,10 +9,12 @@ import { historyService } from '../Service/HistoryService'
 import { tagService } from '../Service/TagService'
 import { coordinate } from '../Coordinate'
 import { signService } from '../Service/SignService'
+import mitt from 'mitt'
 
 export default class History {
     constructor(layer) {
         this.layer = layer
+        this.bus = mitt()
     }
 
     init() {

src/views/draw-file/board/index.d.ts

@@ -28,10 +28,15 @@ export type Board = {
   bus: Emitter<{
     storeChange: undefined
     selectShape: BoardShape | null
+    backDisabled: boolean
+    forwardDisabled: boolean
   }>
   unSelectShape(): void,
-  setImage(url: string): void
   readyAddShape(type: ShapeType, onFinish?: () => void): () => void
+  back(): void
+  forward(): void
+
+  setImage(url: string): void
   getCurrentStore(): BoardData
   drawStore(store: BoardData): void
   export(): Promise<Blob>

src/views/draw-file/board/index.js

@@ -54,6 +54,13 @@ export const create = (store, canvas) => {
     refs.bus.emit('selectShape', shape)
   })
   layer.uiControl.bus.on('hideAttribute', () => refs.bus.emit('selectShape', null))
+  layer.history.bus.on('undoAvailable', availabe => refs.bus.emit('backDisabled', !availabe))
+  layer.history.bus.on('redoAvailable', availabe => refs.bus.emit('forwardDisabled', !availabe))
+
+  setTimeout(() => {
+    layer.history.bus.emit('undoAvailable', true)
+    layer.history.bus.emit('redoAvailable', true)
+  }, 100)
 
   const board = {
     bus: refs.bus,
@@ -65,6 +72,7 @@ export const create = (store, canvas) => {
       refs.baseMap = null
       generateRefs(newStore)
     },
+
     unSelectShape() {
       layer.uiControl.clearUI()
     },
@@ -77,6 +85,13 @@ export const create = (store, canvas) => {
       }
       layer.uiControl.bus.on('hideUI', finePack)
     },
+    back() {
+      layer.history.handleUndo()
+    },
+    forward() {
+      layer.history.handleRedo()
+    },
+
     setImage(url) {
       refs.baseMap.changeImage(url)
       refs.bus.emit('storeChange')

src/views/draw-file/header.tsx

@@ -5,7 +5,6 @@ import { saveAs } from 'utils'
 import style from './style.module.scss'
 import { 
   useSelector, 
-  boardStatus, 
   useDispatch, 
   insertBoard, 
   updateBoard, 
@@ -14,7 +13,7 @@ import {
   BoardType 
 } from "store"
 
-import type { RefObject } from "react"
+import { RefObject, useEffect, useState } from "react"
 import type { Board } from "./board"
 
 type HeaderProps = {
@@ -22,8 +21,9 @@ type HeaderProps = {
   type: BoardType
 }
 const Header = ({ board, type }: HeaderProps) => {
+  const [backDisabled, setBackDisabled] = useState(true)
+  const [forwardDisabled, setForwradDisabled] = useState(true)
   const path = usePathData()
-  const status = useSelector(boardStatus)
   const current = useSelector(currentBoard)
   const dispatch = useDispatch()
   const navigate = useNavigate()
@@ -45,6 +45,19 @@ const Header = ({ board, type }: HeaderProps) => {
     }
   }
 
+  useEffect(() => {
+    const boardRef = board.current
+    if (boardRef) {
+      boardRef.bus.on('backDisabled', setBackDisabled)
+      boardRef.bus.on('forwardDisabled', setForwradDisabled)
+
+      return () => {
+        boardRef.bus.off('backDisabled', setBackDisabled)
+        boardRef.bus.off('forwardDisabled', setForwradDisabled)
+      }
+    }
+  }, [board])
+
   return (
     <>
       <div className={style['df-header-left']}>
@@ -59,12 +72,12 @@ const Header = ({ board, type }: HeaderProps) => {
       <div className={style['df-header-right']}>
         <div className={style['df-header-action']}>
           <ArrowLeftOutlined 
-            className={!status.canBack ? 'disabled':  'icon'} 
-            onClick={() => dispatch({ type: 'board/backoff' })} 
+            className={backDisabled ? 'disabled':  'icon'} 
+            onClick={() => board.current?.back()} 
           />
           <ArrowRightOutlined 
-            className={!status.canForward ? 'disabled': 'icon'} 
-            onClick={() => dispatch({ type: 'board/forward' })} 
+            className={forwardDisabled ? 'disabled': 'icon'} 
+            onClick={() => board.current?.forward()} 
           />
         </div>
         <Button type="primary" size="middle" onClick={save}>保存</Button>