feat:delete block particle

src/editor/core/draw/Draw.ts

@@ -984,13 +984,19 @@ export class Draw {
     return { x, y, index }
   }
 
+  private _clearPage(pageNo: number) {
+    const ctx = this.ctxList[pageNo]
+    const pageDom = this.pageList[pageNo]
+    ctx.clearRect(0, 0, pageDom.width, pageDom.height)
+    this.blockParticle.clear()
+  }
+
   private _drawPage(positionList: IElementPosition[], rowList: IRow[], pageNo: number) {
     const { pageMode } = this.options
     const margins = this.getMargins()
     const innerWidth = this.getInnerWidth()
     const ctx = this.ctxList[pageNo]
-    const pageDom = this.pageList[pageNo]
+    this._clearPage(pageNo)
-    ctx.clearRect(0, 0, pageDom.width, pageDom.height)
     // 绘制背景
     this.background.render(ctx)
     // 绘制页边距

src/editor/core/draw/particle/block/BlockParticle.ts

@@ -1,3 +1,4 @@
+import { ElementType } from '../../../../dataset/enum/Element'
 import { IRowElement } from '../../../../interface/Row'
 import { Draw } from '../../Draw'
 import { BaseBlock } from './modules/BaseBlock'
@@ -44,4 +45,23 @@ export class BlockParticle {
     }
   }
 
+  public clear() {
+    if (!this.blockMap.size) return
+    const elementList = this.draw.getElementList()
+    const blockElementIds: string[] = []
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e]
+      if (element.type === ElementType.BLOCK) {
+        blockElementIds.push(element.id!)
+      }
+    }
+    this.blockMap.forEach(block => {
+      const id = block.getBlockElement().id!
+      if (!blockElementIds.includes(id)) {
+        block.remove()
+        this.blockMap.delete(id)
+      }
+    })
+  }
+
 }

src/editor/core/draw/particle/block/modules/BaseBlock.ts

@@ -21,6 +21,10 @@ export class BaseBlock {
     this.blockContainer.append(this.blockItem)
   }
 
+  public getBlockElement(): IRowElement {
+    return this.element
+  }
+
   private _createBlockItem(): HTMLDivElement {
     const blockItem = document.createElement('div')
     blockItem.classList.add('block-item')
@@ -48,4 +52,8 @@ export class BaseBlock {
     this.blockItem.style.top = `${preY + y}px`
   }
 
+  public remove() {
+    this.blockItem.remove()
+  }
+
 }