editor-svg 1.0.2 → 1.0.3

package/src/editor/core/draw/Draw.ts

@@ -1,2934 +0,0 @@
-import { version } from '../../../../package.json'
-import { ZERO } from '../../dataset/constant/Common'
-import { RowFlex } from '../../dataset/enum/Row'
-import {
-  IAppendElementListOption,
-  IComputeRowListPayload,
-  IDrawFloatPayload,
-  IDrawOption,
-  IDrawPagePayload,
-  IDrawRowPayload,
-  IGetImageOption,
-  IGetOriginValueOption,
-  IGetValueOption,
-  IPainterOption
-} from '../../interface/Draw'
-import {
-  IEditorData,
-  IEditorOption,
-  IEditorResult,
-  ISetValueOption
-} from '../../interface/Editor'
-import {
-  IElement,
-  IElementMetrics,
-  IElementFillRect,
-  IElementStyle,
-  ISpliceElementListOption,
-  IInsertElementListOption
-} from '../../interface/Element'
-import { IRow, IRowElement } from '../../interface/Row'
-import { deepClone, getUUID, nextTick } from '../../utils'
-import { Cursor } from '../cursor/Cursor'
-import { CanvasEvent } from '../event/CanvasEvent'
-import { GlobalEvent } from '../event/GlobalEvent'
-import { HistoryManager } from '../history/HistoryManager'
-import { Listener } from '../listener/Listener'
-import { Position } from '../position/Position'
-import { RangeManager } from '../range/RangeManager'
-import { Background } from './frame/Background'
-import { Highlight } from './richtext/Highlight'
-import { Margin } from './frame/Margin'
-import { Search } from './interactive/Search'
-import { Strikeout } from './richtext/Strikeout'
-import { Underline } from './richtext/Underline'
-import { ElementType } from '../../dataset/enum/Element'
-import { ImageParticle } from './particle/ImageParticle'
-import { LaTexParticle } from './particle/latex/LaTexParticle'
-import { TextParticle } from './particle/TextParticle'
-import { PageNumber } from './frame/PageNumber'
-import { ScrollObserver } from '../observer/ScrollObserver'
-import { SelectionObserver } from '../observer/SelectionObserver'
-import { TableParticle } from './particle/table/TableParticle'
-import { TableTool } from './particle/table/TableTool'
-import { HyperlinkParticle } from './particle/HyperlinkParticle'
-import { LabelParticle } from './particle/LabelParticle'
-import { Header } from './frame/Header'
-import { SuperscriptParticle } from './particle/SuperscriptParticle'
-import { SubscriptParticle } from './particle/SubscriptParticle'
-import { SeparatorParticle } from './particle/SeparatorParticle'
-import { PageBreakParticle } from './particle/PageBreakParticle'
-import { Watermark } from './frame/Watermark'
-import {
-  EditorComponent,
-  EditorMode,
-  EditorZone,
-  PageMode,
-  PaperDirection,
-  WordBreak
-} from '../../dataset/enum/Editor'
-import { Control } from './control/Control'
-import {
-  deleteSurroundElementList,
-  getIsBlockElement,
-  getSlimCloneElementList,
-  pickSurroundElementList,
-  zipElementList
-} from '../../utils/element'
-import { CheckboxParticle } from './particle/CheckboxParticle'
-import { RadioParticle } from './particle/RadioParticle'
-import { DeepRequired, IPadding } from '../../interface/Common'
-import {
-  ControlComponent,
-  ControlIndentation
-} from '../../dataset/enum/Control'
-import { formatElementList } from '../../utils/element'
-import { WorkerManager } from '../worker/WorkerManager'
-import { Previewer } from './particle/previewer/Previewer'
-import { DateParticle } from './particle/date/DateParticle'
-import { IMargin } from '../../interface/Margin'
-import { BlockParticle } from './particle/block/BlockParticle'
-import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor'
-import { I18n } from '../i18n/I18n'
-import { ImageObserver } from '../observer/ImageObserver'
-import { Zone } from '../zone/Zone'
-import { Footer } from './frame/Footer'
-import {
-  IMAGE_ELEMENT_TYPE,
-  TEXTLIKE_ELEMENT_TYPE
-} from '../../dataset/constant/Element'
-import { ListParticle } from './particle/ListParticle'
-import { Placeholder } from './frame/Placeholder'
-import { EventBus } from '../event/eventbus/EventBus'
-import { EventBusMap } from '../../interface/EventBus'
-import { Group } from './interactive/Group'
-import { Override } from '../override/Override'
-import { FlexDirection, ImageDisplay } from '../../dataset/enum/Common'
-import {
-  PUNCTUATION_REG,
-  WHITE_SPACE_REG
-} from '../../dataset/constant/Regular'
-import { LineBreakParticle } from './particle/LineBreakParticle'
-import { WhiteSpaceParticle } from './particle/WhiteSpaceParticle'
-import { MouseObserver } from '../observer/MouseObserver'
-import { LineNumber } from './frame/LineNumber'
-import { PageBorder } from './frame/PageBorder'
-import { ITd } from '../../interface/table/Td'
-import { Actuator } from '../actuator/Actuator'
-import { TableOperate } from './particle/table/TableOperate'
-import { Area } from './interactive/Area'
-import { Badge } from './frame/Badge'
-import { Graffiti } from './graffiti/Graffiti'
-
-export class Draw {
-  private container: HTMLDivElement
-  private pageContainer: HTMLDivElement
-  private pageList: HTMLCanvasElement[]
-  private ctxList: CanvasRenderingContext2D[]
-  private pageNo: number
-  private renderCount: number
-  private pagePixelRatio: number | null
-  private mode: EditorMode
-  private options: DeepRequired<IEditorOption>
-  private position: Position
-  private zone: Zone
-  private elementList: IElement[]
-  private listener: Listener
-  private eventBus: EventBus<EventBusMap>
-  private override: Override
-
-  private i18n: I18n
-  private canvasEvent: CanvasEvent
-  private globalEvent: GlobalEvent
-  private cursor: Cursor
-  private range: RangeManager
-  private margin: Margin
-  private background: Background
-  private badge: Badge
-  private search: Search
-  private group: Group
-  private area: Area
-  private underline: Underline
-  private strikeout: Strikeout
-  private highlight: Highlight
-  private historyManager: HistoryManager
-  private previewer: Previewer
-  private imageParticle: ImageParticle
-  private laTexParticle: LaTexParticle
-  private textParticle: TextParticle
-  private tableParticle: TableParticle
-  private tableTool: TableTool
-  private tableOperate: TableOperate
-  private pageNumber: PageNumber
-  private lineNumber: LineNumber
-  private waterMark: Watermark
-  private placeholder: Placeholder
-  private header: Header
-  private footer: Footer
-  private hyperlinkParticle: HyperlinkParticle
-  private labelParticle: LabelParticle
-  private dateParticle: DateParticle
-  private separatorParticle: SeparatorParticle
-  private pageBreakParticle: PageBreakParticle
-  private superscriptParticle: SuperscriptParticle
-  private subscriptParticle: SubscriptParticle
-  private checkboxParticle: CheckboxParticle
-  private radioParticle: RadioParticle
-  private blockParticle: BlockParticle
-  private listParticle: ListParticle
-  private lineBreakParticle: LineBreakParticle
-  private whiteSpaceParticle: WhiteSpaceParticle
-  private control: Control
-  private pageBorder: PageBorder
-  private workerManager: WorkerManager
-  private scrollObserver: ScrollObserver
-  private selectionObserver: SelectionObserver
-  private imageObserver: ImageObserver
-  private graffiti: Graffiti
-
-  private LETTER_REG: RegExp
-  private WORD_LIKE_REG: RegExp
-  private rowList: IRow[]
-  private pageRowList: IRow[][]
-  private painterStyle: IElementStyle | null
-  private painterOptions: IPainterOption | null
-  private visiblePageNoList: number[]
-  private intersectionPageNo: number
-  private lazyRenderIntersectionObserver: IntersectionObserver | null
-  private printModeData: Required<Omit<IEditorData, 'graffiti'>> | null
-
-  constructor(
-    rootContainer: HTMLElement,
-    options: DeepRequired<IEditorOption>,
-    data: IEditorData,
-    listener: Listener,
-    eventBus: EventBus<EventBusMap>,
-    override: Override
-  ) {
-    this.container = this._wrapContainer(rootContainer)
-    this.pageList = []
-    this.ctxList = []
-    this.pageNo = 0
-    this.renderCount = 0
-    this.pagePixelRatio = null
-    this.mode = options.mode
-    this.options = options
-    this.elementList = data.main
-    this.listener = listener
-    this.eventBus = eventBus
-    this.override = override
-
-    this._formatContainer()
-    this.pageContainer = this._createPageContainer()
-    this._createPage(0)
-
-    this.i18n = new I18n(options.locale)
-    this.historyManager = new HistoryManager(this)
-    this.position = new Position(this)
-    this.zone = new Zone(this)
-    this.range = new RangeManager(this)
-    this.margin = new Margin(this)
-    this.background = new Background(this)
-    this.badge = new Badge(this)
-    this.search = new Search(this)
-    this.group = new Group(this)
-    this.area = new Area(this)
-    this.underline = new Underline(this)
-    this.strikeout = new Strikeout(this)
-    this.highlight = new Highlight(this)
-    this.previewer = new Previewer(this)
-    this.imageParticle = new ImageParticle(this)
-    this.laTexParticle = new LaTexParticle(this)
-    this.textParticle = new TextParticle(this)
-    this.tableParticle = new TableParticle(this)
-    this.tableTool = new TableTool(this)
-    this.tableOperate = new TableOperate(this)
-    this.pageNumber = new PageNumber(this)
-    this.lineNumber = new LineNumber(this)
-    this.waterMark = new Watermark(this)
-    this.placeholder = new Placeholder(this)
-    this.header = new Header(this, data.header)
-    this.footer = new Footer(this, data.footer)
-    this.hyperlinkParticle = new HyperlinkParticle(this)
-    this.labelParticle = new LabelParticle(this)
-    this.dateParticle = new DateParticle(this)
-    this.separatorParticle = new SeparatorParticle(this)
-    this.pageBreakParticle = new PageBreakParticle(this)
-    this.superscriptParticle = new SuperscriptParticle()
-    this.subscriptParticle = new SubscriptParticle()
-    this.checkboxParticle = new CheckboxParticle(this)
-    this.radioParticle = new RadioParticle(this)
-    this.blockParticle = new BlockParticle(this)
-    this.listParticle = new ListParticle(this)
-    this.lineBreakParticle = new LineBreakParticle(this)
-    this.whiteSpaceParticle = new WhiteSpaceParticle(this)
-    this.control = new Control(this)
-    this.pageBorder = new PageBorder(this)
-    this.graffiti = new Graffiti(this, data.graffiti)
-
-    this.scrollObserver = new ScrollObserver(this)
-    this.selectionObserver = new SelectionObserver(this)
-    this.imageObserver = new ImageObserver()
-    new MouseObserver(this)
-
-    this.canvasEvent = new CanvasEvent(this)
-    this.cursor = new Cursor(this, this.canvasEvent)
-    this.canvasEvent.register()
-    this.globalEvent = new GlobalEvent(this, this.canvasEvent)
-    this.globalEvent.register()
-
-    this.workerManager = new WorkerManager(this)
-    new Actuator(this)
-
-    const { letterClass } = options
-    this.LETTER_REG = new RegExp(`[${letterClass.join('')}]`)
-    this.WORD_LIKE_REG = new RegExp(
-      `${letterClass.map(letter => `[^${letter}][${letter}]`).join('|')}`
-    )
-    this.rowList = []
-    this.pageRowList = []
-    this.painterStyle = null
-    this.painterOptions = null
-    this.visiblePageNoList = []
-    this.intersectionPageNo = 0
-    this.lazyRenderIntersectionObserver = null
-    this.printModeData = null
-
-    // 打印模式优先设置打印数据
-    if (this.mode === EditorMode.PRINT) {
-      this.setPrintData()
-    }
-    this.render({
-      isInit: true,
-      isSetCursor: false,
-      isFirstRender: true
-    })
-  }
-
-  // 设置打印数据
-  public setPrintData() {
-    this.printModeData = {
-      header: this.header.getElementList(),
-      main: this.elementList,
-      footer: this.footer.getElementList()
-    }
-    // 过滤控件辅助元素
-    const clonePrintModeData = deepClone(this.printModeData)
-    const editorDataKeys: (keyof Omit<IEditorData, 'graffiti'>)[] = [
-      'header',
-      'main',
-      'footer'
-    ]
-    editorDataKeys.forEach(key => {
-      clonePrintModeData[key] = this.control.filterAssistElement(
-        clonePrintModeData[key]
-      )
-    })
-    this.setEditorData(clonePrintModeData)
-  }
-
-  // 还原打印数据
-  public clearPrintData() {
-    if (this.printModeData) {
-      this.setEditorData(this.printModeData)
-      this.printModeData = null
-    }
-  }
-
-  public getLetterReg(): RegExp {
-    return this.LETTER_REG
-  }
-
-  public getMode(): EditorMode {
-    return this.mode
-  }
-
-  public setMode(payload: EditorMode) {
-    if (this.mode === payload) return
-    // 设置打印模式
-    if (payload === EditorMode.PRINT) {
-      this.setPrintData()
-    }
-    // 取消打印模式
-    if (this.mode === EditorMode.PRINT) {
-      this.clearPrintData()
-    }
-    this.clearSideEffect()
-    this.range.clearRange()
-    this.mode = payload
-    this.options.mode = payload
-    this.render({
-      isSetCursor: false,
-      isSubmitHistory: false
-    })
-  }
-
-  public isReadonly() {
-    if (this.area.getActiveAreaInfo()?.area?.mode) {
-      return this.area.isReadonly()
-    }
-    switch (this.mode) {
-      case EditorMode.DESIGN:
-        return false
-      case EditorMode.READONLY:
-      case EditorMode.PRINT:
-      case EditorMode.GRAFFITI:
-        return true
-      case EditorMode.FORM:
-        return !this.control.getIsRangeWithinControl()
-      default:
-        return false
-    }
-  }
-
-  public isDisabled() {
-    if (this.mode === EditorMode.DESIGN) return false
-    const { startIndex, endIndex } = this.range.getRange()
-    const elementList = this.getElementList()
-    // 优先判断表格单元格
-    if (this.getTd()?.disabled) return true
-    if (startIndex === endIndex) {
-      const startElement = elementList[startIndex]
-      const nextElement = elementList[startIndex + 1]
-      return !!(
-        (startElement?.title?.disabled &&
-          nextElement?.title?.disabled &&
-          startElement.titleId === nextElement.titleId) ||
-        (startElement?.control?.disabled &&
-          nextElement?.control?.disabled &&
-          startElement.controlId === nextElement.controlId)
-      )
-    }
-    const selectionElementList = elementList.slice(startIndex + 1, endIndex + 1)
-    return selectionElementList.some(
-      element => element.title?.disabled || element.control?.disabled
-    )
-  }
-
-  public isDesignMode() {
-    return this.mode === EditorMode.DESIGN
-  }
-
-  public isPrintMode() {
-    return this.mode === EditorMode.PRINT
-  }
-
-  public isGraffitiMode() {
-    return this.mode === EditorMode.GRAFFITI
-  }
-
-  public getOriginalWidth(): number {
-    const { paperDirection, width, height } = this.options
-    return paperDirection === PaperDirection.VERTICAL ? width : height
-  }
-
-  public getOriginalHeight(): number {
-    const { paperDirection, width, height } = this.options
-    return paperDirection === PaperDirection.VERTICAL ? height : width
-  }
-
-  public getWidth(): number {
-    return Math.floor(this.getOriginalWidth() * this.options.scale)
-  }
-
-  public getHeight(): number {
-    return Math.floor(this.getOriginalHeight() * this.options.scale)
-  }
-
-  public getMainHeight(): number {
-    const pageHeight = this.getHeight()
-    return pageHeight - this.getMainOuterHeight()
-  }
-
-  public getMainOuterHeight(): number {
-    const margins = this.getMargins()
-    const headerExtraHeight = this.header.getExtraHeight()
-    const footerExtraHeight = this.footer.getExtraHeight()
-    return margins[0] + margins[2] + headerExtraHeight + footerExtraHeight
-  }
-
-  public getCanvasWidth(pageNo = -1): number {
-    const page = this.getPage(pageNo)
-    return page.width
-  }
-
-  public getCanvasHeight(pageNo = -1): number {
-    const page = this.getPage(pageNo)
-    return page.height
-  }
-
-  public getInnerWidth(): number {
-    const width = this.getWidth()
-    const margins = this.getMargins()
-    return width - margins[1] - margins[3]
-  }
-
-  public getOriginalInnerWidth(): number {
-    const width = this.getOriginalWidth()
-    const margins = this.getOriginalMargins()
-    return width - margins[1] - margins[3]
-  }
-
-  public getContextInnerWidth(): number {
-    const positionContext = this.position.getPositionContext()
-    if (positionContext.isTable) {
-      const { index, trIndex, tdIndex } = positionContext
-      const elementList = this.getOriginalElementList()
-      const td = elementList[index!].trList![trIndex!].tdList[tdIndex!]
-      const tdPadding = this.getTdPadding()
-      return td!.width! - tdPadding[1] - tdPadding[3]
-    }
-    return this.getOriginalInnerWidth()
-  }
-
-  public getMargins(): IMargin {
-    return <IMargin>this.getOriginalMargins().map(m => m * this.options.scale)
-  }
-
-  public getOriginalMargins(): number[] {
-    const { margins, paperDirection } = this.options
-    return paperDirection === PaperDirection.VERTICAL
-      ? margins
-      : [margins[1], margins[2], margins[3], margins[0]]
-  }
-
-  public getPageGap(): number {
-    return this.options.pageGap * this.options.scale
-  }
-
-  public getOriginalPageGap(): number {
-    return this.options.pageGap
-  }
-
-  public getPageNumberBottom(): number {
-    const {
-      pageNumber: { bottom },
-      scale
-    } = this.options
-    return bottom * scale
-  }
-
-  public getMarginIndicatorSize(): number {
-    return this.options.marginIndicatorSize * this.options.scale
-  }
-
-  public getDefaultBasicRowMarginHeight(): number {
-    return this.options.defaultBasicRowMarginHeight * this.options.scale
-  }
-
-  public getHighlightMarginHeight(): number {
-    return this.options.highlightMarginHeight * this.options.scale
-  }
-
-  public getTdPadding(): IPadding {
-    const {
-      table: { tdPadding },
-      scale
-    } = this.options
-    return <IPadding>tdPadding.map(m => m * scale)
-  }
-
-  public getContainer(): HTMLDivElement {
-    return this.container
-  }
-
-  public getPageContainer(): HTMLDivElement {
-    return this.pageContainer
-  }
-
-  public getVisiblePageNoList(): number[] {
-    return this.visiblePageNoList
-  }
-
-  public setVisiblePageNoList(payload: number[]) {
-    this.visiblePageNoList = payload
-    if (this.listener.visiblePageNoListChange) {
-      this.listener.visiblePageNoListChange(this.visiblePageNoList)
-    }
-    if (this.eventBus.isSubscribe('visiblePageNoListChange')) {
-      this.eventBus.emit('visiblePageNoListChange', this.visiblePageNoList)
-    }
-  }
-
-  public getIntersectionPageNo(): number {
-    return this.intersectionPageNo
-  }
-
-  public setIntersectionPageNo(payload: number) {
-    this.intersectionPageNo = payload
-    if (this.listener.intersectionPageNoChange) {
-      this.listener.intersectionPageNoChange(this.intersectionPageNo)
-    }
-    if (this.eventBus.isSubscribe('intersectionPageNoChange')) {
-      this.eventBus.emit('intersectionPageNoChange', this.intersectionPageNo)
-    }
-  }
-
-  public getPageNo(): number {
-    return this.pageNo
-  }
-
-  public setPageNo(payload: number) {
-    this.pageNo = payload
-  }
-
-  public getRenderCount(): number {
-    return this.renderCount
-  }
-
-  public getPage(pageNo = -1): HTMLCanvasElement {
-    return this.pageList[~pageNo ? pageNo : this.pageNo]
-  }
-
-  public getPageList(): HTMLCanvasElement[] {
-    return this.pageList
-  }
-
-  public getPageCount(): number {
-    return this.pageList.length
-  }
-
-  public getTableRowList(sourceElementList: IElement[]): IRow[] {
-    const positionContext = this.position.getPositionContext()
-    const { index, trIndex, tdIndex } = positionContext
-    return sourceElementList[index!].trList![trIndex!].tdList[tdIndex!].rowList!
-  }
-
-  public getOriginalRowList() {
-    const zoneManager = this.getZone()
-    if (zoneManager.isHeaderActive()) {
-      return this.header.getRowList()
-    }
-    if (zoneManager.isFooterActive()) {
-      return this.footer.getRowList()
-    }
-    return this.rowList
-  }
-
-  public getRowList(): IRow[] {
-    const positionContext = this.position.getPositionContext()
-    return positionContext.isTable
-      ? this.getTableRowList(this.getOriginalElementList())
-      : this.getOriginalRowList()
-  }
-
-  public getPageRowList(): IRow[][] {
-    return this.pageRowList
-  }
-
-  public getCtx(): CanvasRenderingContext2D {
-    return this.ctxList[this.pageNo]
-  }
-
-  public getOptions(): DeepRequired<IEditorOption> {
-    return this.options
-  }
-
-  public getSearch(): Search {
-    return this.search
-  }
-
-  public getGroup(): Group {
-    return this.group
-  }
-
-  public getArea(): Area {
-    return this.area
-  }
-
-  public getBadge(): Badge {
-    return this.badge
-  }
-
-  public getHistoryManager(): HistoryManager {
-    return this.historyManager
-  }
-
-  public getPosition(): Position {
-    return this.position
-  }
-
-  public getZone(): Zone {
-    return this.zone
-  }
-
-  public getRange(): RangeManager {
-    return this.range
-  }
-
-  public getLineBreakParticle(): LineBreakParticle {
-    return this.lineBreakParticle
-  }
-
-  public getTextParticle(): TextParticle {
-    return this.textParticle
-  }
-
-  public getHeaderElementList(): IElement[] {
-    return this.header.getElementList()
-  }
-
-  public getTableElementList(sourceElementList: IElement[]): IElement[] {
-    const positionContext = this.position.getPositionContext()
-    const { index, trIndex, tdIndex } = positionContext
-    return (
-      sourceElementList[index!].trList?.[trIndex!].tdList[tdIndex!].value || []
-    )
-  }
-
-  public getElementList(): IElement[] {
-    const positionContext = this.position.getPositionContext()
-    const elementList = this.getOriginalElementList()
-    return positionContext.isTable
-      ? this.getTableElementList(elementList)
-      : elementList
-  }
-
-  public getMainElementList(): IElement[] {
-    const positionContext = this.position.getPositionContext()
-    return positionContext.isTable
-      ? this.getTableElementList(this.elementList)
-      : this.elementList
-  }
-
-  public getOriginalElementList() {
-    const zoneManager = this.getZone()
-    if (zoneManager.isHeaderActive()) {
-      return this.getHeaderElementList()
-    }
-    if (zoneManager.isFooterActive()) {
-      return this.getFooterElementList()
-    }
-    return this.elementList
-  }
-
-  public getOriginalMainElementList(): IElement[] {
-    return this.elementList
-  }
-
-  public getFooterElementList(): IElement[] {
-    return this.footer.getElementList()
-  }
-
-  public getTd(): ITd | null {
-    const positionContext = this.position.getPositionContext()
-    const { index, trIndex, tdIndex, isTable } = positionContext
-    if (isTable) {
-      const elementList = this.getOriginalElementList()
-      return elementList[index!].trList![trIndex!].tdList[tdIndex!]
-    }
-    return null
-  }
-
-  public insertElementList(
-    payload: IElement[],
-    options: IInsertElementListOption = {}
-  ) {
-    if (!payload.length || !this.range.getIsCanInput()) return
-    const { startIndex, endIndex } = this.range.getRange()
-    if (!~startIndex && !~endIndex) return
-    const { isSubmitHistory = true } = options
-    formatElementList(payload, {
-      isHandleFirstElement: false,
-      editorOptions: this.options
-    })
-    let curIndex = -1
-    // 判断是否在控件内
-    let activeControl = this.control.getActiveControl()
-    // 光标在控件内如果当前没有被激活，需要手动激活
-    if (!activeControl && this.control.getIsRangeWithinControl()) {
-      this.control.initControl()
-      activeControl = this.control.getActiveControl()
-    }
-    if (activeControl && this.control.getIsRangeWithinControl()) {
-      curIndex = activeControl.setValue(payload, undefined, {
-        isIgnoreDisabledRule: true
-      })
-      this.control.emitControlContentChange()
-    } else {
-      const elementList = this.getElementList()
-      const isCollapsed = startIndex === endIndex
-      const start = startIndex + 1
-      if (!isCollapsed) {
-        this.spliceElementList(elementList, start, endIndex - startIndex)
-      }
-      this.spliceElementList(elementList, start, 0, payload)
-      curIndex = startIndex + payload.length
-      // 列表前如有换行符则删除-因为列表内已存在
-      const preElement = elementList[start - 1]
-      if (
-        payload[0].listId &&
-        preElement &&
-        !preElement.listId &&
-        preElement?.value === ZERO &&
-        (!preElement.type || preElement.type === ElementType.TEXT)
-      ) {
-        elementList.splice(startIndex, 1)
-        curIndex -= 1
-      }
-    }
-    if (~curIndex) {
-      this.range.setRange(curIndex, curIndex)
-      this.render({
-        curIndex,
-        isSubmitHistory
-      })
-    }
-  }
-
-  public appendElementList(
-    elementList: IElement[],
-    options: IAppendElementListOption = {}
-  ) {
-    if (!elementList.length) return
-    formatElementList(elementList, {
-      isHandleFirstElement: false,
-      editorOptions: this.options
-    })
-    let curIndex: number
-    const { isPrepend, isSubmitHistory = true } = options
-    if (isPrepend) {
-      this.elementList.splice(1, 0, ...elementList)
-      curIndex = elementList.length
-    } else {
-      this.elementList.push(...elementList)
-      curIndex = this.elementList.length - 1
-    }
-    this.range.setRange(curIndex, curIndex)
-    this.render({
-      curIndex,
-      isSubmitHistory
-    })
-  }
-
-  public spliceElementList(
-    elementList: IElement[],
-    start: number,
-    deleteCount: number,
-    items?: IElement[],
-    options?: ISpliceElementListOption
-  ) {
-    const { isIgnoreDeletedRule = false } = options || {}
-    const { group, modeRule } = this.options
-    if (deleteCount > 0) {
-      // 当最后元素与开始元素列表信息不一致时：清除当前列表信息
-      const endIndex = start + deleteCount
-      const endElement = elementList[endIndex]
-      const endElementListId = endElement?.listId
-      if (
-        endElementListId &&
-        elementList[start - 1]?.listId !== endElementListId
-      ) {
-        let startIndex = endIndex
-        while (startIndex < elementList.length) {
-          const curElement = elementList[startIndex]
-          if (
-            curElement.listId !== endElementListId ||
-            curElement.value === ZERO
-          ) {
-            break
-          }
-          delete curElement.listId
-          delete curElement.listType
-          delete curElement.listStyle
-          startIndex++
-        }
-      }
-      // 非明确忽略删除规则 && 非设计模式 && 非光标在控件内(控件内控制) =》 校验删除规则
-      if (
-        !isIgnoreDeletedRule &&
-        !this.isDesignMode() &&
-        !this.control.getIsRangeWithinControl()
-      ) {
-        const tdDeletable = this.getTd()?.deletable
-        let deleteIndex = endIndex - 1
-        while (deleteIndex >= start) {
-          const deleteElement = elementList[deleteIndex]
-          if (
-            deleteElement?.hide ||
-            deleteElement?.control?.hide ||
-            deleteElement?.area?.hide ||
-            (tdDeletable !== false &&
-              deleteElement?.control?.deletable !== false &&
-              (!deleteElement.controlId ||
-                this.mode !== EditorMode.FORM ||
-                !modeRule[this.mode].controlDeletableDisabled) &&
-              deleteElement?.title?.deletable !== false &&
-              (group.deletable !== false || !deleteElement.groupIds?.length) &&
-              (deleteElement?.area?.deletable !== false ||
-                deleteElement?.areaIndex !== 0))
-          ) {
-            elementList.splice(deleteIndex, 1)
-          }
-          deleteIndex--
-        }
-      } else {
-        elementList.splice(start, deleteCount)
-      }
-    }
-    // 循环添加，避免使用解构影响性能
-    if (items?.length) {
-      for (let i = 0; i < items.length; i++) {
-        elementList.splice(start + i, 0, items[i])
-      }
-    }
-  }
-
-  public getCanvasEvent(): CanvasEvent {
-    return this.canvasEvent
-  }
-
-  public getGlobalEvent(): GlobalEvent {
-    return this.globalEvent
-  }
-
-  public getListener(): Listener {
-    return this.listener
-  }
-
-  public getEventBus(): EventBus<EventBusMap> {
-    return this.eventBus
-  }
-
-  public getOverride(): Override {
-    return this.override
-  }
-
-  public getCursor(): Cursor {
-    return this.cursor
-  }
-
-  public getPreviewer(): Previewer {
-    return this.previewer
-  }
-
-  public getImageParticle(): ImageParticle {
-    return this.imageParticle
-  }
-
-  public getTableTool(): TableTool {
-    return this.tableTool
-  }
-
-  public getTableOperate(): TableOperate {
-    return this.tableOperate
-  }
-
-  public getTableParticle(): TableParticle {
-    return this.tableParticle
-  }
-
-  public getHeader(): Header {
-    return this.header
-  }
-
-  public getFooter(): Footer {
-    return this.footer
-  }
-
-  public getHyperlinkParticle(): HyperlinkParticle {
-    return this.hyperlinkParticle
-  }
-
-  public getDateParticle(): DateParticle {
-    return this.dateParticle
-  }
-
-  public getListParticle(): ListParticle {
-    return this.listParticle
-  }
-
-  public getCheckboxParticle(): CheckboxParticle {
-    return this.checkboxParticle
-  }
-
-  public getRadioParticle(): RadioParticle {
-    return this.radioParticle
-  }
-
-  public getControl(): Control {
-    return this.control
-  }
-
-  public getWorkerManager(): WorkerManager {
-    return this.workerManager
-  }
-
-  public getImageObserver(): ImageObserver {
-    return this.imageObserver
-  }
-
-  public getI18n(): I18n {
-    return this.i18n
-  }
-
-  public getGraffiti(): Graffiti {
-    return this.graffiti
-  }
-
-  public getRowCount(): number {
-    return this.getRowList().length
-  }
-
-  public async getDataURL(payload: IGetImageOption = {}): Promise<string[]> {
-    const { pixelRatio, mode } = payload
-    // 放大像素比
-    if (pixelRatio) {
-      this.setPagePixelRatio(pixelRatio)
-    }
-    // 不同模式
-    const currentMode = this.mode
-    const isSwitchMode = !!mode && currentMode !== mode
-    if (isSwitchMode) {
-      this.setMode(mode)
-    }
-    this.render({
-      isLazy: false,
-      isCompute: false,
-      isSetCursor: false,
-      isSubmitHistory: false
-    })
-    await this.imageObserver.allSettled()
-    const dataUrlList = this.pageList.map(c => c.toDataURL())
-    // 还原
-    if (pixelRatio) {
-      this.setPagePixelRatio(null)
-    }
-    if (isSwitchMode) {
-      this.setMode(currentMode)
-    }
-    return dataUrlList
-  }
-
-  public getPainterStyle(): IElementStyle | null {
-    return this.painterStyle && Object.keys(this.painterStyle).length
-      ? this.painterStyle
-      : null
-  }
-
-  public getPainterOptions(): IPainterOption | null {
-    return this.painterOptions
-  }
-
-  public setPainterStyle(
-    payload: IElementStyle | null,
-    options?: IPainterOption
-  ) {
-    this.painterStyle = payload
-    this.painterOptions = options || null
-    if (this.getPainterStyle()) {
-      this.pageList.forEach(c => (c.style.cursor = 'copy'))
-    }
-  }
-
-  public setDefaultRange() {
-    if (!this.elementList.length) return
-    setTimeout(() => {
-      const curIndex = this.elementList.length - 1
-      this.range.setRange(curIndex, curIndex)
-      this.range.setRangeStyle()
-    })
-  }
-
-  public getIsPagingMode(): boolean {
-    return this.options.pageMode === PageMode.PAGING
-  }
-
-  public setPageMode(payload: PageMode) {
-    if (!payload || this.options.pageMode === payload) return
-    this.options.pageMode = payload
-    // 纸张大小重置
-    if (payload === PageMode.PAGING) {
-      const { height } = this.options
-      const dpr = this.getPagePixelRatio()
-      const canvas = this.pageList[0]
-      canvas.style.height = `${height}px`
-      canvas.height = height * dpr
-      // canvas尺寸发生变化，上下文被重置
-      this._initPageContext(this.ctxList[0])
-    } else {
-      // 连页模式：移除懒加载监听&清空页眉页脚计算数据
-      this._disconnectLazyRender()
-      this.header.recovery()
-      this.footer.recovery()
-      this.zone.setZone(EditorZone.MAIN)
-    }
-    const { startIndex } = this.range.getRange()
-    const isCollapsed = this.range.getIsCollapsed()
-    this.render({
-      isSetCursor: true,
-      curIndex: startIndex,
-      isSubmitHistory: false
-    })
-    // 重新定位避免事件监听丢失
-    if (!isCollapsed) {
-      this.cursor.drawCursor({
-        isShow: false
-      })
-    }
-    // 回调
-    setTimeout(() => {
-      if (this.listener.pageModeChange) {
-        this.listener.pageModeChange(payload)
-      }
-      if (this.eventBus.isSubscribe('pageModeChange')) {
-        this.eventBus.emit('pageModeChange', payload)
-      }
-    })
-  }
-
-  public setPageScale(payload: number) {
-    const dpr = this.getPagePixelRatio()
-    this.options.scale = payload
-    const width = this.getWidth()
-    const height = this.getHeight()
-    this.container.style.width = `${width}px`
-    this.pageList.forEach((p, i) => {
-      p.width = width * dpr
-      p.height = height * dpr
-      p.style.width = `${width}px`
-      p.style.height = `${height}px`
-      p.style.marginBottom = `${this.getPageGap()}px`
-      this._initPageContext(this.ctxList[i])
-    })
-    const cursorPosition = this.position.getCursorPosition()
-    this.render({
-      isSubmitHistory: false,
-      isSetCursor: !!cursorPosition,
-      curIndex: cursorPosition?.index
-    })
-    if (this.listener.pageScaleChange) {
-      this.listener.pageScaleChange(payload)
-    }
-    if (this.eventBus.isSubscribe('pageScaleChange')) {
-      this.eventBus.emit('pageScaleChange', payload)
-    }
-  }
-
-  public getPagePixelRatio(): number {
-    return this.pagePixelRatio || window.devicePixelRatio
-  }
-
-  public setPagePixelRatio(payload: number | null) {
-    if (
-      (!this.pagePixelRatio && payload === window.devicePixelRatio) ||
-      payload === this.pagePixelRatio
-    ) {
-      return
-    }
-    this.pagePixelRatio = payload
-    this.setPageDevicePixel()
-  }
-
-  public setPageDevicePixel() {
-    const dpr = this.getPagePixelRatio()
-    const width = this.getWidth()
-    const height = this.getHeight()
-    this.pageList.forEach((p, i) => {
-      p.width = width * dpr
-      p.height = height * dpr
-      this._initPageContext(this.ctxList[i])
-    })
-    this.render({
-      isSubmitHistory: false,
-      isSetCursor: false
-    })
-  }
-
-  public setPaperSize(width: number, height: number) {
-    this.options.width = width
-    this.options.height = height
-    const dpr = this.getPagePixelRatio()
-    const realWidth = this.getWidth()
-    const realHeight = this.getHeight()
-    this.container.style.width = `${realWidth}px`
-    this.pageList.forEach((p, i) => {
-      p.width = realWidth * dpr
-      p.height = realHeight * dpr
-      p.style.width = `${realWidth}px`
-      p.style.height = `${realHeight}px`
-      this._initPageContext(this.ctxList[i])
-    })
-    this.render({
-      isSubmitHistory: false,
-      isSetCursor: false
-    })
-  }
-
-  public setPaperDirection(payload: PaperDirection) {
-    const dpr = this.getPagePixelRatio()
-    this.options.paperDirection = payload
-    const width = this.getWidth()
-    const height = this.getHeight()
-    this.container.style.width = `${width}px`
-    this.pageList.forEach((p, i) => {
-      p.width = width * dpr
-      p.height = height * dpr
-      p.style.width = `${width}px`
-      p.style.height = `${height}px`
-      this._initPageContext(this.ctxList[i])
-    })
-    this.render({
-      isSubmitHistory: false,
-      isSetCursor: false
-    })
-  }
-
-  public setPaperMargin(payload: IMargin) {
-    this.options.margins = payload
-    this.render({
-      isSubmitHistory: false,
-      isSetCursor: false
-    })
-  }
-
-  public getOriginValue(
-    options: IGetOriginValueOption = {}
-  ): Required<IEditorData> {
-    const { pageNo } = options
-    let mainElementList = this.elementList
-    if (
-      Number.isInteger(pageNo) &&
-      pageNo! >= 0 &&
-      pageNo! < this.pageRowList.length
-    ) {
-      mainElementList = this.pageRowList[pageNo!].flatMap(
-        row => row.elementList
-      )
-    }
-    const data: Required<IEditorData> = {
-      header: this.getHeaderElementList(),
-      main: mainElementList,
-      footer: this.getFooterElementList(),
-      graffiti: this.graffiti.getValue()
-    }
-    return data
-  }
-
-  public getValue(options: IGetValueOption = {}): IEditorResult {
-    const originData = this.getOriginValue(options)
-    const { extraPickAttrs } = options
-    const data: IEditorData = {
-      header: zipElementList(originData.header, {
-        extraPickAttrs
-      }),
-      main: zipElementList(originData.main, {
-        extraPickAttrs,
-        isClassifyArea: true
-      }),
-      footer: zipElementList(originData.footer, {
-        extraPickAttrs
-      }),
-      graffiti: originData.graffiti
-    }
-    return {
-      version,
-      data,
-      options: deepClone(this.options)
-    }
-  }
-
-  public setValue(payload: Partial<IEditorData>, options?: ISetValueOption) {
-    const { header, main, footer } = deepClone(payload)
-    if (!header && !main && !footer) return
-    const { isSetCursor = false } = options || {}
-    const pageComponentData = [header, main, footer]
-    pageComponentData.forEach(data => {
-      if (!data) return
-      formatElementList(data, {
-        editorOptions: this.options,
-        isForceCompensation: true
-      })
-    })
-    this.setEditorData({
-      header,
-      main,
-      footer
-    })
-    // 渲染&计算&清空历史记录
-    this.historyManager.recovery()
-    const curIndex = isSetCursor
-      ? main?.length
-        ? main.length - 1
-        : 0
-      : undefined
-    if (curIndex !== undefined) {
-      this.range.setRange(curIndex, curIndex)
-    }
-    this.render({
-      curIndex,
-      isSetCursor,
-      isFirstRender: true
-    })
-  }
-
-  public setEditorData(payload: Partial<Omit<IEditorData, 'graffiti'>>) {
-    const { header, main, footer } = payload
-    if (header) {
-      this.header.setElementList(header)
-    }
-    if (main) {
-      this.elementList = main
-    }
-    if (footer) {
-      this.footer.setElementList(footer)
-    }
-  }
-
-  private _wrapContainer(rootContainer: HTMLElement): HTMLDivElement {
-    const container = document.createElement('div')
-    rootContainer.append(container)
-    return container
-  }
-
-  private _formatContainer() {
-    // 容器宽度需跟随纸张宽度
-    this.container.style.position = 'relative'
-    this.container.style.width = `${this.getWidth()}px`
-    this.container.setAttribute(EDITOR_COMPONENT, EditorComponent.MAIN)
-  }
-
-  private _createPageContainer(): HTMLDivElement {
-    const pageContainer = document.createElement('div')
-    pageContainer.classList.add(`${EDITOR_PREFIX}-page-container`)
-    this.container.append(pageContainer)
-    return pageContainer
-  }
-
-  private _createPage(pageNo: number) {
-    const width = this.getWidth()
-    const height = this.getHeight()
-    const canvas = document.createElement('canvas')
-    canvas.style.width = `${width}px`
-    canvas.style.height = `${height}px`
-    canvas.style.display = 'block'
-    canvas.style.backgroundColor = '#ffffff'
-    canvas.style.marginBottom = `${this.getPageGap()}px`
-    canvas.setAttribute('data-index', String(pageNo))
-    this.pageContainer.append(canvas)
-    // 调整分辨率
-    const dpr = this.getPagePixelRatio()
-    canvas.width = width * dpr
-    canvas.height = height * dpr
-    canvas.style.cursor = 'text'
-    const ctx = canvas.getContext('2d')!
-    // 初始化上下文配置
-    this._initPageContext(ctx)
-    // 缓存上下文
-    this.pageList.push(canvas)
-    this.ctxList.push(ctx)
-  }
-
-  private _initPageContext(ctx: CanvasRenderingContext2D) {
-    const dpr = this.getPagePixelRatio()
-    ctx.scale(dpr, dpr)
-    // 重置以下属性是因部分浏览器(chrome)会应用css样式
-    ctx.letterSpacing = '0px'
-    ctx.wordSpacing = '0px'
-    ctx.direction = 'ltr'
-  }
-
-  public getElementFont(el: IElement, scale = 1): string {
-    const { defaultSize, defaultFont } = this.options
-    const font = el.font || defaultFont
-    const size = el.actualSize || el.size || defaultSize
-    return `${el.italic ? 'italic ' : ''}${el.bold ? 'bold ' : ''}${
-      size * scale
-    }px ${font}`
-  }
-
-  public getElementSize(el: IElement) {
-    return el.actualSize || el.size || this.options.defaultSize
-  }
-
-  public getElementRowMargin(el: IElement) {
-    const {
-      defaultSize,
-      defaultBasicRowMarginHeight,
-      defaultRowMargin,
-      scale
-    } = this.options
-    // 字体在12-30之间，行间距不变，小于12按比例缩小，大于30按比例放大
-    const fontSize = el.size || defaultSize
-    let ratio = 1
-    if (fontSize < 12) {
-      ratio = fontSize / 12
-    } else if (fontSize > 30) {
-      ratio = 1 + (fontSize - 30) / 30
-    }
-    return (
-      defaultBasicRowMarginHeight *
-      ratio *
-      (el.rowMargin ?? defaultRowMargin) *
-      scale
-    )
-  }
-
-  public computeRowList(payload: IComputeRowListPayload) {
-    const {
-      innerWidth,
-      elementList,
-      isPagingMode = false,
-      isFromTable = false,
-      startX = 0,
-      startY = 0,
-      pageHeight = 0,
-      mainOuterHeight = 0,
-      surroundElementList = []
-    } = payload
-    const {
-      defaultSize,
-      scale,
-      imgCaption,
-      table: { tdPadding, defaultTrMinHeight },
-      defaultTabWidth
-    } = this.options
-    const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight()
-    const canvas = document.createElement('canvas')
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
-    // 计算列表偏移宽度
-    const listStyleMap = this.listParticle.computeListStyle(ctx, elementList)
-    const rowList: IRow[] = []
-    if (elementList.length) {
-      rowList.push({
-        width: 0,
-        height: 0,
-        ascent: 0,
-        elementList: [],
-        startIndex: 0,
-        rowIndex: 0,
-        rowFlex: elementList?.[0]?.rowFlex || elementList?.[1]?.rowFlex
-      })
-    }
-    // 起始位置及页码计算
-    let x = startX
-    let y = startY
-    let pageNo = 0
-    // 列表位置
-    let listId: string | undefined
-    let listIndex = 0
-    // 控件最小宽度
-    let controlRealWidth = 0
-    for (let i = 0; i < elementList.length; i++) {
-      const curRow: IRow = rowList[rowList.length - 1]
-      const element = elementList[i]
-      const rowMargin = this.getElementRowMargin(element)
-      const metrics: IElementMetrics = {
-        width: 0,
-        height: 0,
-        boundingBoxAscent: 0,
-        boundingBoxDescent: 0
-      }
-      // 实际可用宽度
-      const offsetX =
-        curRow.offsetX ||
-        (element.listId && listStyleMap.get(element.listId)) ||
-        0
-      const availableWidth = innerWidth - offsetX
-      // 增加起始位置坐标偏移量
-      const isStartElement = curRow.elementList.length === 1
-      x += isStartElement ? offsetX : 0
-      y += isStartElement ? curRow.offsetY || 0 : 0
-      if (
-        (element.hide || element.control?.hide || element.area?.hide) &&
-        !this.isDesignMode()
-      ) {
-        const preElement = curRow.elementList[curRow.elementList.length - 1]
-        metrics.height =
-          preElement?.metrics.height || this.options.defaultSize * scale
-        metrics.boundingBoxAscent = preElement?.metrics.boundingBoxAscent || 0
-        metrics.boundingBoxDescent = preElement?.metrics.boundingBoxDescent || 0
-      } else if (
-        element.type === ElementType.IMAGE ||
-        element.type === ElementType.LATEX
-      ) {
-        // 浮动图片无需计算数据
-        if (
-          element.imgDisplay === ImageDisplay.SURROUND ||
-          element.imgDisplay === ImageDisplay.FLOAT_TOP ||
-          element.imgDisplay === ImageDisplay.FLOAT_BOTTOM
-        ) {
-          metrics.width = 0
-          metrics.height = 0
-          metrics.boundingBoxDescent = 0
-        } else {
-          const elementWidth = element.width! * scale
-          const elementHeight = element.height! * scale
-          // 图片超出尺寸后自适应（图片大小大于可用宽度时）
-          if (elementWidth > availableWidth) {
-            const adaptiveHeight =
-              (elementHeight * availableWidth) / elementWidth
-            element.width = availableWidth / scale
-            element.height = adaptiveHeight / scale
-            metrics.width = availableWidth
-            metrics.height = adaptiveHeight
-            metrics.boundingBoxDescent = adaptiveHeight
-          } else {
-            metrics.width = elementWidth
-            metrics.height = elementHeight
-            metrics.boundingBoxDescent = elementHeight
-          }
-          // 增加题注高度
-          if (element.imgCaption?.value) {
-            const fontSize = element.imgCaption.size || imgCaption.size
-            const captionTop = element.imgCaption.top ?? imgCaption.top
-            const captionHeight = (fontSize + captionTop) * scale
-            metrics.boundingBoxAscent += captionHeight
-          }
-        }
-      } else if (element.type === ElementType.TABLE) {
-        const tdPaddingWidth = tdPadding[1] + tdPadding[3]
-        const tdPaddingHeight = tdPadding[0] + tdPadding[2]
-        // 表格分页处理进度：https://github.com/Hufe921/canvas-editor/issues/41
-        // 查看后续表格是否属于同一个源表格-存在即合并
-        if (element.pagingId) {
-          let tableIndex = i + 1
-          let combineCount = 0
-          while (tableIndex < elementList.length) {
-            const nextElement = elementList[tableIndex]
-            if (nextElement.pagingId === element.pagingId) {
-              const nexTrList = nextElement.trList!.filter(
-                tr => !tr.pagingRepeat
-              )
-              element.trList!.push(...nexTrList)
-              element.height! += nextElement.height!
-              tableIndex++
-              combineCount++
-            } else {
-              break
-            }
-          }
-          if (combineCount) {
-            elementList.splice(i + 1, combineCount)
-          }
-        }
-        element.pagingIndex = element.pagingIndex ?? 0
-        const trList = element.trList!
-        // 计算前移除上一次的高度
-        for (let t = 0; t < trList.length; t++) {
-          const tr = trList[t]
-          tr.height = tr.minHeight || defaultTrMinHeight
-          tr.minHeight = tr.height
-        }
-        // 计算表格行列
-        this.tableParticle.computeRowColInfo(element)
-        // 计算表格内元素信息
-        for (let t = 0; t < trList.length; t++) {
-          const tr = trList[t]
-          for (let d = 0; d < tr.tdList.length; d++) {
-            const td = tr.tdList[d]
-            const rowList = this.computeRowList({
-              innerWidth: (td.width! - tdPaddingWidth) * scale,
-              elementList: td.value,
-              isFromTable: true,
-              isPagingMode
-            })
-            const rowHeight = rowList.reduce((pre, cur) => pre + cur.height, 0)
-            td.rowList = rowList
-            // 移除缩放导致的行高变化-渲染时会进行缩放调整
-            const curTdHeight = rowHeight / scale + tdPaddingHeight
-            // 内容高度大于当前单元格高度需增加
-            if (td.height! < curTdHeight) {
-              const extraHeight = curTdHeight - td.height!
-              const changeTr = trList[t + td.rowspan - 1]
-              changeTr.height += extraHeight
-              changeTr.tdList.forEach(changeTd => {
-                changeTd.height! += extraHeight
-                if (!changeTd.realHeight) {
-                  changeTd.realHeight = changeTd.height!
-                } else {
-                  changeTd.realHeight! += extraHeight
-                }
-              })
-            }
-            // 当前单元格最小高度及真实高度（包含跨列）
-            let curTdMinHeight = 0
-            let curTdRealHeight = 0
-            let i = 0
-            while (i < td.rowspan) {
-              const curTr = trList[i + t] || trList[t]
-              curTdMinHeight += curTr.minHeight!
-              curTdRealHeight += curTr.height!
-              i++
-            }
-            td.realMinHeight = curTdMinHeight
-            td.realHeight = curTdRealHeight
-            td.mainHeight = curTdHeight
-          }
-        }
-        // 单元格高度大于实际内容高度需减少
-        const reduceTrList = this.tableParticle.getTrListGroupByCol(trList)
-        for (let t = 0; t < reduceTrList.length; t++) {
-          const tr = reduceTrList[t]
-          let reduceHeight = -1
-          for (let d = 0; d < tr.tdList.length; d++) {
-            const td = tr.tdList[d]
-            const curTdRealHeight = td.realHeight!
-            const curTdHeight = td.mainHeight!
-            const curTdMinHeight = td.realMinHeight!
-            // 获取最大可减少高度
-            const curReduceHeight =
-              curTdHeight < curTdMinHeight
-                ? curTdRealHeight - curTdMinHeight
-                : curTdRealHeight - curTdHeight
-            if (!~reduceHeight || curReduceHeight < reduceHeight) {
-              reduceHeight = curReduceHeight
-            }
-          }
-          if (reduceHeight > 0) {
-            const changeTr = trList[t]
-            changeTr.height -= reduceHeight
-            changeTr.tdList.forEach(changeTd => {
-              changeTd.height! -= reduceHeight
-              changeTd.realHeight! -= reduceHeight
-            })
-          }
-        }
-        // 需要重新计算表格内值
-        this.tableParticle.computeRowColInfo(element)
-        // 计算出表格高度
-        const tableHeight = this.tableParticle.getTableHeight(element)
-        const tableWidth = this.tableParticle.getTableWidth(element)
-        element.width = tableWidth
-        element.height = tableHeight
-        const elementWidth = tableWidth * scale
-        const elementHeight = tableHeight * scale
-        metrics.width = elementWidth
-        metrics.height = elementHeight
-        metrics.boundingBoxDescent = elementHeight
-        metrics.boundingBoxAscent = -rowMargin
-        // 后一个元素也是表格则移除行间距
-        if (elementList[i + 1]?.type === ElementType.TABLE) {
-          metrics.boundingBoxAscent -= rowMargin
-        }
-        // 表格分页处理(拆分表格)
-        if (isPagingMode) {
-          const height = this.getHeight()
-          const marginHeight = this.getMainOuterHeight()
-          let curPagePreHeight = marginHeight
-          for (let r = 0; r < rowList.length; r++) {
-            const row = rowList[r]
-            const rowOffsetY = row.offsetY || 0
-            if (
-              row.height + curPagePreHeight + rowOffsetY > height ||
-              rowList[r - 1]?.isPageBreak
-            ) {
-              curPagePreHeight = marginHeight + row.height + rowOffsetY
-            } else {
-              curPagePreHeight += row.height + rowOffsetY
-            }
-          }
-          // 当前剩余高度是否能容下当前表格第一行（可拆分）的高度，排除掉表头类型
-          // 前面元素为换页符时重新计算高度
-          const rowMarginHeight = rowMargin * 2 * scale
-          const firstTrHeight = element.trList![0].height! * scale
-          if (
-            curPagePreHeight + firstTrHeight + rowMarginHeight > height ||
-            (element.pagingIndex !== 0 && element.trList![0].pagingRepeat) ||
-            elementList[i - 1]?.type === ElementType.PAGE_BREAK
-          ) {
-            // 无可拆分行则切换至新页
-            curPagePreHeight = marginHeight
-          }
-          // 表格高度超过页面高度开始截断行
-          if (curPagePreHeight + rowMarginHeight + elementHeight > height) {
-            const trList = element.trList!
-            // 计算需要移除的行数
-            let deleteStart = 0
-            let deleteCount = 0
-            let preTrHeight = 0
-            // 大于一行时再拆分避免循环
-            if (trList.length > 1) {
-              for (let r = 0; r < trList.length; r++) {
-                const tr = trList[r]
-                const trHeight = tr.height * scale
-                if (
-                  curPagePreHeight + rowMarginHeight + preTrHeight + trHeight >
-                  height
-                ) {
-                  // 当前行存在跨行中断-暂时忽略分页
-                  const rowColCount = tr.tdList.reduce(
-                    (pre, cur) => pre + cur.colspan,
-                    0
-                  )
-                  if (element.colgroup?.length !== rowColCount) {
-                    deleteCount = 0
-                  }
-                  break
-                } else {
-                  deleteStart = r + 1
-                  deleteCount = trList.length - deleteStart
-                  preTrHeight += trHeight
-                }
-              }
-            }
-            if (deleteCount) {
-              const cloneTrList = trList.splice(deleteStart, deleteCount)
-              const cloneTrHeight = cloneTrList.reduce(
-                (pre, cur) => pre + cur.height,
-                0
-              )
-              const cloneTrRealHeight = cloneTrHeight * scale
-              const pagingId = element.pagingId || getUUID()
-              element.pagingId = pagingId
-              element.height -= cloneTrHeight
-              metrics.height -= cloneTrRealHeight
-              metrics.boundingBoxDescent -= cloneTrRealHeight
-              // 追加拆分表格
-              const cloneElement = deepClone(element)
-              cloneElement.pagingId = pagingId
-              cloneElement.pagingIndex = element.pagingIndex! + 1
-              // 处理分页重复表头
-              const repeatTrList = trList.filter(tr => tr.pagingRepeat)
-              if (repeatTrList.length) {
-                const cloneRepeatTrList = deepClone(repeatTrList)
-                cloneRepeatTrList.forEach(tr => (tr.id = getUUID()))
-                cloneTrList.unshift(...cloneRepeatTrList)
-              }
-              cloneElement.trList = cloneTrList
-              cloneElement.id = getUUID()
-              this.spliceElementList(elementList, i + 1, 0, [cloneElement])
-            }
-          }
-          // 表格经过分页处理-需要处理上下文
-          if (element.pagingId) {
-            const positionContext = this.position.getPositionContext()
-            if (positionContext.isTable) {
-              // 查找光标所在表格索引（根据trId搜索）
-              let newPositionContextIndex = -1
-              let newPositionContextTrIndex = -1
-              let tableIndex = i
-              while (tableIndex < elementList.length) {
-                const curElement = elementList[tableIndex]
-                if (curElement.pagingId !== element.pagingId) break
-                const trIndex = curElement.trList!.findIndex(
-                  r => r.id === positionContext.trId
-                )
-                if (~trIndex) {
-                  newPositionContextIndex = tableIndex
-                  newPositionContextTrIndex = trIndex
-                  break
-                }
-                tableIndex++
-              }
-              if (~newPositionContextIndex) {
-                positionContext.index = newPositionContextIndex
-                positionContext.trIndex = newPositionContextTrIndex
-                this.position.setPositionContext(positionContext)
-              }
-            }
-          }
-        }
-      } else if (element.type === ElementType.SEPARATOR) {
-        const {
-          separator: { lineWidth: defaultLineWidth }
-        } = this.options
-        const lineWidth = element.lineWidth || defaultLineWidth
-        element.width = availableWidth / scale
-        metrics.width = availableWidth
-        metrics.height = lineWidth * scale
-        metrics.boundingBoxAscent = -rowMargin
-        metrics.boundingBoxDescent = -rowMargin + metrics.height
-      } else if (element.type === ElementType.PAGE_BREAK) {
-        element.width = availableWidth / scale
-        metrics.width = availableWidth
-        metrics.height = defaultSize
-      } else if (
-        element.type === ElementType.RADIO ||
-        element.controlComponent === ControlComponent.RADIO
-      ) {
-        const { width, height, gap } = this.options.radio
-        const elementWidth = width + gap * 2
-        element.width = elementWidth
-        metrics.width = elementWidth * scale
-        metrics.height = height * scale
-      } else if (
-        element.type === ElementType.CHECKBOX ||
-        element.controlComponent === ControlComponent.CHECKBOX
-      ) {
-        const { width, height, gap } = this.options.checkbox
-        const elementWidth = width + gap * 2
-        element.width = elementWidth
-        metrics.width = elementWidth * scale
-        metrics.height = height * scale
-      } else if (element.type === ElementType.TAB) {
-        metrics.width = defaultTabWidth * scale
-        metrics.height = defaultSize * scale
-        metrics.boundingBoxDescent = 0
-        metrics.boundingBoxAscent =
-          this.textParticle.getBasisWordBoundingBoxAscent(ctx, ctx.font)
-      } else if (element.type === ElementType.BLOCK) {
-        if (!element.width) {
-          metrics.width = availableWidth
-        } else {
-          const elementWidth = element.width * scale
-          metrics.width = Math.min(elementWidth, availableWidth)
-        }
-        metrics.height = element.height! * scale
-        metrics.boundingBoxDescent = metrics.height
-        metrics.boundingBoxAscent = 0
-      } else if (element.type === ElementType.LABEL) {
-        const {
-          defaultSize,
-          label: { defaultPadding }
-        } = this.options
-        ctx.font = this.getElementFont(element)
-        const fontMetrics = this.textParticle.measureText(ctx, element)
-        metrics.width =
-          (fontMetrics.width + defaultPadding[1] + defaultPadding[3]) * scale
-        metrics.height = (element.size || defaultSize) * scale
-        metrics.boundingBoxDescent = 0
-        metrics.boundingBoxAscent =
-          (defaultPadding[0] + fontMetrics.actualBoundingBoxAscent) * scale
-      } else {
-        // 设置上下标真实字体尺寸
-        const size = element.size || defaultSize
-        if (
-          element.type === ElementType.SUPERSCRIPT ||
-          element.type === ElementType.SUBSCRIPT
-        ) {
-          element.actualSize = Math.ceil(size * 0.6)
-        }
-        metrics.height = (element.actualSize || size) * scale
-        ctx.font = this.getElementFont(element)
-        const fontMetrics = this.textParticle.measureText(ctx, element)
-        metrics.width = fontMetrics.width * scale
-        if (element.letterSpacing) {
-          metrics.width += element.letterSpacing * scale
-        }
-        // 使用基于字体的基准度量以确保一致的行高，避免字符特定度量导致的布局跳动
-        const basisMetrics = this.textParticle.measureBasisWord(
-          ctx,
-          element.font!
-        )
-        metrics.boundingBoxAscent = basisMetrics.actualBoundingBoxAscent * scale
-        metrics.boundingBoxDescent =
-          basisMetrics.actualBoundingBoxDescent * scale
-        if (element.type === ElementType.SUPERSCRIPT) {
-          metrics.boundingBoxAscent += metrics.height / 2
-        } else if (element.type === ElementType.SUBSCRIPT) {
-          metrics.boundingBoxDescent += metrics.height / 2
-        }
-      }
-      const ascent =
-        !element.hide &&
-        ((element.imgDisplay !== ImageDisplay.INLINE &&
-          element.type === ElementType.IMAGE) ||
-          element.type === ElementType.LATEX)
-          ? metrics.height + rowMargin
-          : metrics.boundingBoxAscent + rowMargin
-      const height =
-        rowMargin +
-        metrics.boundingBoxAscent +
-        metrics.boundingBoxDescent +
-        rowMargin
-      const rowElement: IRowElement = Object.assign(element, {
-        metrics,
-        left: 0,
-        style: this.getElementFont(element, scale)
-      })
-      // 暂时只考虑非换行场景：控件开始时统计宽度，结束时消费宽度及还原
-      if (rowElement.control?.minWidth) {
-        if (rowElement.controlComponent) {
-          controlRealWidth += metrics.width
-        }
-        if (rowElement.controlComponent === ControlComponent.POSTFIX) {
-          // 设置最小宽度控件属性（字符偏移量）
-          this.control.setMinWidthControlInfo({
-            row: curRow,
-            rowElement,
-            availableWidth,
-            controlRealWidth
-          })
-          controlRealWidth = 0
-        }
-      }
-      // 超过限定宽度
-      const preElement = elementList[i - 1]
-      let nextElement = elementList[i + 1]
-      // 累计行宽 + 当前元素宽度 + 排版宽度(英文单词整体宽度 + 后面标点符号宽度)
-      let curRowWidth = curRow.width + metrics.width
-      if (this.options.wordBreak === WordBreak.BREAK_WORD) {
-        if (
-          (!preElement?.type || preElement?.type === ElementType.TEXT) &&
-          (!element.type || element.type === ElementType.TEXT)
-        ) {
-          // 英文单词
-          const word = `${preElement?.value || ''}${element.value}`
-          if (this.WORD_LIKE_REG.test(word)) {
-            const { width, endElement } = this.textParticle.measureWord(
-              ctx,
-              elementList,
-              i
-            )
-            // 后面存在元素 && 单词宽度大于行可用宽度，无需折行
-            const wordWidth = width * scale
-            if (endElement && wordWidth <= availableWidth) {
-              curRowWidth += wordWidth
-              nextElement = endElement
-            }
-          }
-          // 标点符号
-          const punctuationWidth = this.textParticle.measurePunctuationWidth(
-            ctx,
-            nextElement
-          )
-          curRowWidth += punctuationWidth * scale
-        }
-      }
-      // 列表信息
-      if (element.listId) {
-        if (element.listId !== listId) {
-          listIndex = 0
-        } else if (element.value === ZERO && !element.listWrap) {
-          listIndex++
-        }
-      }
-      listId = element.listId
-      // 计算四周环绕导致的元素偏移量
-      const surroundPosition = this.position.setSurroundPosition({
-        pageNo,
-        rowElement,
-        row: curRow,
-        rowElementRect: {
-          x,
-          y,
-          height,
-          width: metrics.width
-        },
-        availableWidth,
-        surroundElementList
-      })
-      x = surroundPosition.x
-      curRowWidth += surroundPosition.rowIncreaseWidth
-      x += metrics.width
-      // 是否强制换行
-      const isForceBreak =
-        element.type === ElementType.SEPARATOR ||
-        element.type === ElementType.TABLE ||
-        preElement?.type === ElementType.TABLE ||
-        preElement?.type === ElementType.BLOCK ||
-        element.type === ElementType.BLOCK ||
-        preElement?.imgDisplay === ImageDisplay.INLINE ||
-        element.imgDisplay === ImageDisplay.INLINE ||
-        preElement?.listId !== element.listId ||
-        (preElement?.areaId !== element.areaId && !element.area?.hide) ||
-        (element.control?.flexDirection === FlexDirection.COLUMN &&
-          (element.controlComponent === ControlComponent.CHECKBOX ||
-            element.controlComponent === ControlComponent.RADIO) &&
-          preElement?.controlComponent === ControlComponent.VALUE) ||
-        (i !== 0 && element.value === ZERO && !element.area?.hide)
-      // 是否宽度不足导致换行
-      const isWidthNotEnough = curRowWidth > availableWidth
-      const isWrap = isForceBreak || isWidthNotEnough
-      // 新行数据处理
-      if (isWrap) {
-        const row: IRow = {
-          width: metrics.width,
-          height,
-          startIndex: i,
-          elementList: [rowElement],
-          ascent,
-          rowIndex: curRow.rowIndex + 1,
-          rowFlex: elementList[i]?.rowFlex || elementList[i + 1]?.rowFlex,
-          isPageBreak: element.type === ElementType.PAGE_BREAK
-        }
-        // 控件缩进
-        if (
-          rowElement.controlComponent !== ControlComponent.PREFIX &&
-          rowElement.control?.indentation === ControlIndentation.VALUE_START
-        ) {
-          // 查找到非前缀的第一个元素位置
-          const preStartIndex = curRow.elementList.findIndex(
-            el =>
-              el.controlId === rowElement.controlId &&
-              el.controlComponent !== ControlComponent.PREFIX
-          )
-          if (~preStartIndex) {
-            const preRowPositionList = this.position.computeRowPosition({
-              row: curRow,
-              innerWidth: this.getInnerWidth()
-            })
-            const valueStartPosition = preRowPositionList[preStartIndex]
-            if (valueStartPosition) {
-              row.offsetX = valueStartPosition.coordinate.leftTop[0]
-            }
-          }
-        }
-        // 列表缩进
-        if (element.listId) {
-          row.isList = true
-          row.offsetX = listStyleMap.get(element.listId!)
-          row.listIndex = listIndex
-        }
-        // Y轴偏移量
-        row.offsetY =
-          !isFromTable &&
-          element.area?.top &&
-          element.areaId !== elementList[i - 1]?.areaId
-            ? element.area.top * scale
-            : 0
-        rowList.push(row)
-      } else {
-        curRow.width += metrics.width
-        // 减小块元素前第一行空行行高
-        if (
-          i === 0 &&
-          (getIsBlockElement(elementList[1]) || !!elementList[1]?.areaId)
-        ) {
-          curRow.height = defaultBasicRowMarginHeight
-          curRow.ascent = defaultBasicRowMarginHeight
-        } else if (curRow.height < height) {
-          curRow.height = height
-          curRow.ascent = ascent
-        }
-        curRow.elementList.push(rowElement)
-      }
-      // 行结束时逻辑
-      if (isWrap || i === elementList.length - 1) {
-        // 换行原因：宽度不足
-        curRow.isWidthNotEnough = isWidthNotEnough && !isForceBreak
-        // 两端对齐、分散对齐
-        if (
-          !curRow.isSurround &&
-          (preElement?.rowFlex === RowFlex.JUSTIFY ||
-            (preElement?.rowFlex === RowFlex.ALIGNMENT &&
-              curRow.isWidthNotEnough))
-        ) {
-          // 忽略换行符及尾部元素间隔设置
-          const rowElementList =
-            curRow.elementList[0]?.value === ZERO
-              ? curRow.elementList.slice(1)
-              : curRow.elementList
-          const gap =
-            (availableWidth - curRow.width) / (rowElementList.length - 1)
-          for (let e = 0; e < rowElementList.length - 1; e++) {
-            const el = rowElementList[e]
-            el.metrics.width += gap
-          }
-          curRow.width = availableWidth
-        }
-      }
-      // 重新计算坐标、页码、下一行首行元素环绕交叉
-      if (isWrap) {
-        x = startX
-        y += curRow.height
-        if (
-          isPagingMode &&
-          !isFromTable &&
-          pageHeight &&
-          (y - startY + mainOuterHeight + height > pageHeight ||
-            element.type === ElementType.PAGE_BREAK)
-        ) {
-          y = startY
-          // 删除多余四周环绕型元素
-          deleteSurroundElementList(surroundElementList, pageNo)
-          pageNo += 1
-        }
-        // 计算下一行第一个元素是否存在环绕交叉
-        rowElement.left = 0
-        const nextRow = rowList[rowList.length - 1]
-        const surroundPosition = this.position.setSurroundPosition({
-          pageNo,
-          rowElement,
-          row: nextRow,
-          rowElementRect: {
-            x,
-            y,
-            height,
-            width: metrics.width
-          },
-          availableWidth,
-          surroundElementList
-        })
-        x = surroundPosition.x
-        x += metrics.width
-      }
-    }
-    return rowList
-  }
-
-  private _computePageList(): IRow[][] {
-    const pageRowList: IRow[][] = [[]]
-    const {
-      pageMode,
-      pageNumber: { maxPageNo }
-    } = this.options
-    const height = this.getHeight()
-    const marginHeight = this.getMainOuterHeight()
-    let pageHeight = marginHeight
-    let pageNo = 0
-    if (pageMode === PageMode.CONTINUITY) {
-      pageRowList[0] = this.rowList
-      // 重置高度
-      pageHeight += this.rowList.reduce(
-        (pre, cur) => pre + cur.height + (cur.offsetY || 0),
-        0
-      )
-      const dpr = this.getPagePixelRatio()
-      const pageDom = this.pageList[0]
-      const pageDomHeight = Number(pageDom.style.height.replace('px', ''))
-      if (pageHeight > pageDomHeight) {
-        pageDom.style.height = `${pageHeight}px`
-        pageDom.height = pageHeight * dpr
-      } else {
-        const reduceHeight = pageHeight < height ? height : pageHeight
-        pageDom.style.height = `${reduceHeight}px`
-        pageDom.height = reduceHeight * dpr
-      }
-      this._initPageContext(this.ctxList[0])
-    } else {
-      for (let i = 0; i < this.rowList.length; i++) {
-        const row = this.rowList[i]
-        const rowOffsetY = row.offsetY || 0
-        if (
-          row.height + rowOffsetY + pageHeight > height ||
-          this.rowList[i - 1]?.isPageBreak
-        ) {
-          if (Number.isInteger(maxPageNo) && pageNo >= maxPageNo!) {
-            this.elementList = this.elementList.slice(0, row.startIndex)
-            break
-          }
-          pageHeight = marginHeight + row.height + rowOffsetY
-          pageRowList.push([row])
-          pageNo++
-        } else {
-          pageHeight += row.height + rowOffsetY
-          pageRowList[pageNo].push(row)
-        }
-      }
-    }
-    return pageRowList
-  }
-
-  private _drawHighlight(
-    ctx: CanvasRenderingContext2D,
-    payload: IDrawRowPayload
-  ) {
-    const { rowList, positionList, elementList } = payload
-    const marginHeight = this.getDefaultBasicRowMarginHeight()
-    const highlightMarginHeight = this.getHighlightMarginHeight()
-    for (let i = 0; i < rowList.length; i++) {
-      const curRow = rowList[i]
-      for (let j = 0; j < curRow.elementList.length; j++) {
-        const element = curRow.elementList[j]
-        const preElement = curRow.elementList[j - 1]
-        // 高亮配置：元素 > 控件配置
-        const highlight =
-          element.highlight ||
-          this.control.getControlHighlight(elementList, curRow.startIndex + j)
-        if (highlight) {
-          // 高亮元素相连需立即绘制，并记录下一元素坐标
-          if (
-            preElement &&
-            preElement.highlight &&
-            preElement.highlight !== element.highlight
-          ) {
-            this.highlight.render(ctx)
-          }
-          // 当前元素位置信息记录
-          const {
-            coordinate: {
-              leftTop: [x, y]
-            }
-          } = positionList[curRow.startIndex + j]
-          // 元素向左偏移量
-          const offsetX = element.left || 0
-          this.highlight.recordFillInfo(
-            ctx,
-            x - offsetX,
-            y + marginHeight - highlightMarginHeight, // 先减去行margin，再加上高亮margin
-            element.metrics.width + offsetX,
-            curRow.height - 2 * marginHeight + 2 * highlightMarginHeight,
-            highlight
-          )
-        } else if (preElement?.highlight) {
-          // 之前是高亮元素，当前不是需立即绘制
-          this.highlight.render(ctx)
-        }
-      }
-      this.highlight.render(ctx)
-    }
-  }
-
-  public drawRow(ctx: CanvasRenderingContext2D, payload: IDrawRowPayload) {
-    // 优先绘制高亮元素
-    this._drawHighlight(ctx, payload)
-    // 绘制元素、下划线、删除线、选区
-    const {
-      scale,
-      table: { tdPadding },
-      group,
-      lineBreak,
-      whiteSpace
-    } = this.options
-    const {
-      rowList,
-      pageNo,
-      elementList,
-      positionList,
-      startIndex,
-      zone,
-      isDrawLineBreak = !lineBreak.disabled,
-      isDrawWhiteSpace = !whiteSpace.disabled
-    } = payload
-    const isPrintMode = this.isPrintMode()
-    const isGraffitiMode = this.isGraffitiMode()
-    const { isCrossRowCol, tableId } = this.range.getRange()
-    let index = startIndex
-    for (let i = 0; i < rowList.length; i++) {
-      const curRow = rowList[i]
-      // 选区绘制记录
-      const rangeRecord: IElementFillRect = {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      }
-      let tableRangeElement: IElement | null = null
-      for (let j = 0; j < curRow.elementList.length; j++) {
-        const element = curRow.elementList[j]
-        const metrics = element.metrics
-        // 当前元素位置信息
-        const {
-          ascent: offsetY,
-          coordinate: {
-            leftTop: [x, y]
-          }
-        } = positionList[curRow.startIndex + j]
-        const preElement = curRow.elementList[j - 1]
-        // 元素绘制
-        if (
-          (element.hide || element.control?.hide || element.area?.hide) &&
-          !this.isDesignMode()
-        ) {
-          // 控件隐藏时不绘制
-          this.textParticle.complete()
-        } else if (element.type === ElementType.IMAGE) {
-          this.textParticle.complete()
-          // 浮动图片单独绘制
-          if (
-            element.imgDisplay !== ImageDisplay.SURROUND &&
-            element.imgDisplay !== ImageDisplay.FLOAT_TOP &&
-            element.imgDisplay !== ImageDisplay.FLOAT_BOTTOM
-          ) {
-            this.imageParticle.render(ctx, element, x, y + offsetY)
-          }
-        } else if (element.type === ElementType.LATEX) {
-          this.textParticle.complete()
-          this.laTexParticle.render(ctx, element, x, y + offsetY)
-        } else if (element.type === ElementType.TABLE) {
-          if (isCrossRowCol) {
-            rangeRecord.x = x
-            rangeRecord.y = y
-            tableRangeElement = element
-          }
-          this.tableParticle.render(ctx, element, x, y)
-        } else if (element.type === ElementType.HYPERLINK) {
-          this.textParticle.complete()
-          this.hyperlinkParticle.render(ctx, element, x, y + offsetY)
-        } else if (element.type === ElementType.LABEL) {
-          this.textParticle.complete()
-          this.labelParticle.render(ctx, element, x, y + offsetY)
-        } else if (element.type === ElementType.DATE) {
-          const nextElement = curRow.elementList[j + 1]
-          // 释放之前的
-          if (!preElement || preElement.dateId !== element.dateId) {
-            this.textParticle.complete()
-          }
-          this.textParticle.record(ctx, element, x, y + offsetY)
-          if (!nextElement || nextElement.dateId !== element.dateId) {
-            // 手动触发渲染
-            this.textParticle.complete()
-          }
-        } else if (element.type === ElementType.SUPERSCRIPT) {
-          this.textParticle.complete()
-          this.superscriptParticle.render(ctx, element, x, y + offsetY)
-        } else if (element.type === ElementType.SUBSCRIPT) {
-          this.underline.render(ctx)
-          this.textParticle.complete()
-          this.subscriptParticle.render(ctx, element, x, y + offsetY)
-        } else if (element.type === ElementType.SEPARATOR) {
-          this.separatorParticle.render(ctx, element, x, y)
-        } else if (element.type === ElementType.PAGE_BREAK) {
-          if (this.mode !== EditorMode.CLEAN && !isPrintMode) {
-            this.pageBreakParticle.render(ctx, element, x, y)
-          }
-        } else if (
-          element.type === ElementType.CHECKBOX ||
-          element.controlComponent === ControlComponent.CHECKBOX
-        ) {
-          this.textParticle.complete()
-          this.checkboxParticle.render({
-            ctx,
-            x,
-            y: y + offsetY,
-            index: j,
-            row: curRow
-          })
-        } else if (
-          element.type === ElementType.RADIO ||
-          element.controlComponent === ControlComponent.RADIO
-        ) {
-          this.textParticle.complete()
-          this.radioParticle.render({
-            ctx,
-            x,
-            y: y + offsetY,
-            index: j,
-            row: curRow
-          })
-        } else if (element.type === ElementType.TAB) {
-          this.textParticle.complete()
-        } else if (
-          element.rowFlex === RowFlex.ALIGNMENT ||
-          element.rowFlex === RowFlex.JUSTIFY
-        ) {
-          // 如果是两端对齐，因canvas目前不支持letterSpacing需单独绘制文本
-          this.textParticle.record(ctx, element, x, y + offsetY)
-          this.textParticle.complete()
-        } else if (element.type === ElementType.BLOCK) {
-          this.textParticle.complete()
-          this.blockParticle.render(ctx, pageNo, element, x, y + offsetY)
-        } else {
-          // 如果当前元素设置左偏移，则上一元素立即绘制
-          if (element.left) {
-            this.textParticle.complete()
-          }
-          this.textParticle.record(ctx, element, x, y + offsetY)
-          // 如果设置字宽、字间距、标点符号（避免浏览器排版缩小间距）需单独绘制
-          if (
-            element.width ||
-            element.letterSpacing ||
-            PUNCTUATION_REG.test(element.value)
-          ) {
-            this.textParticle.complete()
-          }
-        }
-        // 换行符绘制
-        if (
-          isDrawLineBreak &&
-          !isPrintMode &&
-          this.mode !== EditorMode.CLEAN &&
-          !curRow.isWidthNotEnough &&
-          j === curRow.elementList.length - 1
-        ) {
-          this.lineBreakParticle.render(ctx, element, x, y + curRow.height / 2)
-        }
-        // 空白符绘制
-        if (isDrawWhiteSpace && WHITE_SPACE_REG.test(element.value)) {
-          this.whiteSpaceParticle.render(ctx, element, x, y + curRow.height / 2)
-        }
-        // 边框绘制（目前仅支持控件）
-        if (element.control?.border) {
-          // 不同控件边框立刻绘制
-          if (
-            preElement?.control?.border &&
-            preElement.controlId !== element.controlId
-          ) {
-            this.control.drawBorder(ctx)
-          }
-          // 当前元素位置信息记录
-          const rowMargin = this.getElementRowMargin(element)
-          this.control.recordBorderInfo(
-            x,
-            y + rowMargin,
-            element.metrics.width,
-            curRow.height - 2 * rowMargin
-          )
-        } else if (preElement?.control?.border) {
-          this.control.drawBorder(ctx)
-        }
-        // 下划线记录
-        if (element.underline || element.control?.underline) {
-          // 下标元素下划线单独绘制
-          if (
-            preElement?.type === ElementType.SUBSCRIPT &&
-            element.type !== ElementType.SUBSCRIPT
-          ) {
-            this.underline.render(ctx)
-          }
-          // 行间距
-          const rowMargin = this.getElementRowMargin(element)
-          // 元素向左偏移量
-          const offsetX = element.left || 0
-          // 下标元素y轴偏移值
-          let offsetY = 0
-          if (element.type === ElementType.SUBSCRIPT) {
-            offsetY = this.subscriptParticle.getOffsetY(element)
-          }
-          // 占位符不参与颜色计算
-          const color = element.control?.underline
-            ? this.options.underlineColor
-            : element.color
-          this.underline.recordFillInfo(
-            ctx,
-            x - offsetX,
-            y + curRow.height - rowMargin + offsetY,
-            metrics.width + offsetX,
-            0,
-            color,
-            element.textDecoration?.style
-          )
-        } else if (preElement?.underline || preElement?.control?.underline) {
-          this.underline.render(ctx)
-        }
-        // 删除线记录
-        if (element.strikeout) {
-          // 仅文本类元素支持删除线
-          if (!element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
-            // 字体大小不同时需立即绘制
-            if (
-              preElement &&
-              ((preElement.type === ElementType.SUBSCRIPT &&
-                element.type !== ElementType.SUBSCRIPT) ||
-                (preElement.type === ElementType.SUPERSCRIPT &&
-                  element.type !== ElementType.SUPERSCRIPT) ||
-                this.getElementSize(preElement) !==
-                  this.getElementSize(element))
-            ) {
-              this.strikeout.render(ctx)
-            }
-            // 基线文字测量信息
-            const standardMetrics = this.textParticle.measureBasisWord(
-              ctx,
-              this.getElementFont(element)
-            )
-            // 文字渲染位置 + 基线文字下偏移量 - 一半文字高度
-            let adjustY =
-              y +
-              offsetY +
-              standardMetrics.actualBoundingBoxDescent * scale -
-              metrics.height / 2
-            // 上下标位置调整
-            if (element.type === ElementType.SUBSCRIPT) {
-              adjustY += this.subscriptParticle.getOffsetY(element)
-            } else if (element.type === ElementType.SUPERSCRIPT) {
-              adjustY += this.superscriptParticle.getOffsetY(element)
-            }
-            this.strikeout.recordFillInfo(ctx, x, adjustY, metrics.width)
-          }
-        } else if (preElement?.strikeout) {
-          this.strikeout.render(ctx)
-        }
-        // 选区记录
-        const {
-          zone: currentZone,
-          startIndex,
-          endIndex
-        } = this.range.getRange()
-        if (
-          currentZone === zone &&
-          startIndex !== endIndex &&
-          startIndex <= index &&
-          index <= endIndex
-        ) {
-          const positionContext = this.position.getPositionContext()
-          // 表格需限定上下文
-          if (
-            (!positionContext.isTable && !element.tdId) ||
-            positionContext.tdId === element.tdId
-          ) {
-            // 从行尾开始-绘制最小宽度
-            if (startIndex === index) {
-              const nextElement = elementList[startIndex + 1]
-              if (nextElement && nextElement.value === ZERO) {
-                rangeRecord.x = x + metrics.width
-                rangeRecord.y = y
-                rangeRecord.height = curRow.height
-                rangeRecord.width += this.options.rangeMinWidth
-              }
-            } else {
-              let rangeWidth = metrics.width
-              // 最小选区宽度
-              if (rangeWidth === 0 && curRow.elementList.length === 1) {
-                rangeWidth = this.options.rangeMinWidth
-              }
-              // 记录第一次位置、行高
-              if (!rangeRecord.width) {
-                rangeRecord.x = x
-                rangeRecord.y = y
-                rangeRecord.height = curRow.height
-              }
-              rangeRecord.width += rangeWidth
-            }
-          }
-        }
-        // 组信息记录
-        if (!group.disabled && element.groupIds) {
-          this.group.recordFillInfo(element, x, y, metrics.width, curRow.height)
-        }
-        index++
-        // 绘制表格内元素
-        if (element.type === ElementType.TABLE && !element.hide) {
-          const tdPaddingWidth = tdPadding[1] + tdPadding[3]
-          for (let t = 0; t < element.trList!.length; t++) {
-            const tr = element.trList![t]
-            for (let d = 0; d < tr.tdList!.length; d++) {
-              const td = tr.tdList[d]
-              this.drawRow(ctx, {
-                elementList: td.value,
-                positionList: td.positionList!,
-                rowList: td.rowList!,
-                pageNo,
-                startIndex: 0,
-                innerWidth: (td.width! - tdPaddingWidth) * scale,
-                zone,
-                isDrawLineBreak
-              })
-            }
-          }
-        }
-      }
-      // 绘制列表样式
-      if (curRow.isList) {
-        this.listParticle.drawListStyle(
-          ctx,
-          curRow,
-          positionList[curRow.startIndex]
-        )
-      }
-      // 绘制文字、边框、下划线、删除线
-      this.textParticle.complete()
-      this.control.drawBorder(ctx)
-      this.underline.render(ctx)
-      this.strikeout.render(ctx)
-      // 绘制批注样式
-      this.group.render(ctx)
-      // 绘制选区
-      if (!isPrintMode && !isGraffitiMode) {
-        if (rangeRecord.width && rangeRecord.height) {
-          const { x, y, width, height } = rangeRecord
-          this.range.render(ctx, x, y, width, height)
-        }
-        if (
-          isCrossRowCol &&
-          tableRangeElement &&
-          tableRangeElement.id === tableId
-        ) {
-          const {
-            coordinate: {
-              leftTop: [x, y]
-            }
-          } = positionList[curRow.startIndex]
-          this.tableParticle.drawRange(ctx, tableRangeElement, x, y)
-        }
-      }
-    }
-  }
-
-  private _drawFloat(
-    ctx: CanvasRenderingContext2D,
-    payload: IDrawFloatPayload
-  ) {
-    const { scale } = this.options
-    const floatPositionList = this.position.getFloatPositionList()
-    const { imgDisplays, pageNo } = payload
-    for (let e = 0; e < floatPositionList.length; e++) {
-      const floatPosition = floatPositionList[e]
-      const element = floatPosition.element
-      if (
-        (pageNo === floatPosition.pageNo ||
-          floatPosition.zone === EditorZone.HEADER ||
-          floatPosition.zone == EditorZone.FOOTER) &&
-        element.imgDisplay &&
-        imgDisplays.includes(element.imgDisplay) &&
-        element.type === ElementType.IMAGE
-      ) {
-        const imgFloatPosition = element.imgFloatPosition!
-        this.imageParticle.render(
-          ctx,
-          element,
-          imgFloatPosition.x * scale,
-          imgFloatPosition.y * scale
-        )
-      }
-    }
-  }
-
-  private _clearPage(pageNo: number) {
-    const ctx = this.ctxList[pageNo]
-    const pageDom = this.pageList[pageNo]
-    ctx.clearRect(
-      0,
-      0,
-      Math.max(pageDom.width, this.getWidth()),
-      Math.max(pageDom.height, this.getHeight())
-    )
-    this.blockParticle.clear()
-  }
-
-  private _drawPage(payload: IDrawPagePayload) {
-    const { elementList, positionList, rowList, pageNo } = payload
-    const {
-      inactiveAlpha,
-      pageMode,
-      header,
-      footer,
-      pageNumber,
-      lineNumber,
-      pageBorder
-    } = this.options
-    const isPrintMode = this.mode === EditorMode.PRINT
-    const innerWidth = this.getInnerWidth()
-    const ctx = this.ctxList[pageNo]
-    // 判断当前激活区域-非正文区域时元素透明度降低
-    ctx.globalAlpha = !this.zone.isMainActive() ? inactiveAlpha : 1
-    this._clearPage(pageNo)
-    // 绘制背景
-    if (
-      !isPrintMode ||
-      !this.options.modeRule[EditorMode.PRINT]?.backgroundDisabled
-    ) {
-      this.background.render(ctx, pageNo)
-    }
-    // 绘制区域
-    if (!isPrintMode) {
-      this.area.render(ctx, pageNo)
-    }
-    // 绘制水印
-    if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
-      this.waterMark.render(ctx, pageNo)
-    }
-    // 绘制页边距
-    if (!isPrintMode) {
-      this.margin.render(ctx, pageNo)
-    }
-    // 渲染衬于文字下方元素
-    this._drawFloat(ctx, {
-      pageNo,
-      imgDisplays: [ImageDisplay.FLOAT_BOTTOM]
-    })
-    // 控件高亮
-    if (!isPrintMode) {
-      this.control.renderHighlightList(ctx, pageNo)
-    }
-    // 渲染元素
-    const index = rowList[0]?.startIndex
-    this.drawRow(ctx, {
-      elementList,
-      positionList,
-      rowList,
-      pageNo,
-      startIndex: index,
-      innerWidth,
-      zone: EditorZone.MAIN
-    })
-    if (this.getIsPagingMode()) {
-      // 绘制页眉
-      if (!header.disabled) {
-        this.header.render(ctx, pageNo)
-      }
-      // 绘制页码
-      if (!pageNumber.disabled) {
-        this.pageNumber.render(ctx, pageNo)
-      }
-      // 绘制页脚
-      if (!footer.disabled) {
-        this.footer.render(ctx, pageNo)
-      }
-    }
-    // 渲染浮于文字上方元素
-    this._drawFloat(ctx, {
-      pageNo,
-      imgDisplays: [ImageDisplay.FLOAT_TOP, ImageDisplay.SURROUND]
-    })
-    // 搜索匹配绘制
-    if (!isPrintMode && this.search.getSearchKeyword()) {
-      this.search.render(ctx, pageNo)
-    }
-    // 绘制空白占位符
-    if (this.elementList.length <= 1 && !this.elementList[0]?.listId) {
-      this.placeholder.render(ctx)
-    }
-    // 渲染行数
-    if (!lineNumber.disabled) {
-      this.lineNumber.render(ctx, pageNo)
-    }
-    // 绘制页面边框
-    if (!pageBorder.disabled) {
-      this.pageBorder.render(ctx)
-    }
-    // 绘制签章
-    this.badge.render(ctx, pageNo)
-    // 绘制涂鸦
-    if (this.isGraffitiMode()) {
-      this.graffiti.render(ctx, pageNo)
-    }
-  }
-
-  private _disconnectLazyRender() {
-    this.lazyRenderIntersectionObserver?.disconnect()
-  }
-
-  private _lazyRender() {
-    const positionList = this.position.getOriginalMainPositionList()
-    const elementList = this.getOriginalMainElementList()
-    this._disconnectLazyRender()
-    this.lazyRenderIntersectionObserver = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          const index = Number((<HTMLCanvasElement>entry.target).dataset.index)
-          this._drawPage({
-            elementList,
-            positionList,
-            rowList: this.pageRowList[index],
-            pageNo: index
-          })
-        }
-      })
-    })
-    this.pageList.forEach(el => {
-      this.lazyRenderIntersectionObserver!.observe(el)
-    })
-  }
-
-  private _immediateRender() {
-    const positionList = this.position.getOriginalMainPositionList()
-    const elementList = this.getOriginalMainElementList()
-    for (let i = 0; i < this.pageRowList.length; i++) {
-      this._drawPage({
-        elementList,
-        positionList,
-        rowList: this.pageRowList[i],
-        pageNo: i
-      })
-    }
-  }
-
-  public render(payload?: IDrawOption) {
-    this.renderCount++
-    const { header, footer } = this.options
-    const {
-      isSubmitHistory = true,
-      isSetCursor = true,
-      isCompute = true,
-      isLazy = true,
-      isInit = false,
-      isSourceHistory = false,
-      isFirstRender = false
-    } = payload || {}
-    let { curIndex } = payload || {}
-    const innerWidth = this.getInnerWidth()
-    const isPagingMode = this.getIsPagingMode()
-    // 缓存当前页数信息
-    const oldPageSize = this.pageRowList.length
-    // 计算文档信息
-    if (isCompute) {
-      // 清空浮动元素位置信息
-      this.position.setFloatPositionList([])
-      if (isPagingMode) {
-        // 页眉信息
-        if (!header.disabled) {
-          this.header.compute()
-        }
-        // 页脚信息
-        if (!footer.disabled) {
-          this.footer.compute()
-        }
-      }
-      // 行信息
-      const margins = this.getMargins()
-      const pageHeight = this.getHeight()
-      const extraHeight = this.header.getExtraHeight()
-      const mainOuterHeight = this.getMainOuterHeight()
-      const startX = margins[3]
-      const startY = margins[0] + extraHeight
-      const surroundElementList = pickSurroundElementList(this.elementList)
-      this.rowList = this.computeRowList({
-        startX,
-        startY,
-        pageHeight,
-        mainOuterHeight,
-        isPagingMode,
-        innerWidth,
-        surroundElementList,
-        elementList: this.elementList
-      })
-      // 页面信息
-      this.pageRowList = this._computePageList()
-      // 位置信息
-      this.position.computePositionList()
-      // 区域信息
-      this.area.compute()
-      if (!this.isPrintMode()) {
-        // 搜索信息
-        const searchKeyword = this.search.getSearchKeyword()
-        if (searchKeyword) {
-          this.search.compute(searchKeyword)
-        }
-        // 控件关键词高亮
-        this.control.computeHighlightList()
-      }
-      // 涂鸦信息
-      if (this.isGraffitiMode()) {
-        this.graffiti.compute()
-      }
-    }
-    // 清除光标等副作用
-    this.imageObserver.clearAll()
-    this.cursor.recoveryCursor()
-    // 创建纸张
-    for (let i = 0; i < this.pageRowList.length; i++) {
-      if (!this.pageList[i]) {
-        this._createPage(i)
-      }
-    }
-    // 移除多余页
-    const curPageCount = this.pageRowList.length
-    const prePageCount = this.pageList.length
-    if (prePageCount > curPageCount) {
-      const deleteCount = prePageCount - curPageCount
-      this.ctxList.splice(curPageCount, deleteCount)
-      this.pageList
-        .splice(curPageCount, deleteCount)
-        .forEach(page => page.remove())
-    }
-    // 绘制元素
-    // 连续页因为有高度的变化会导致canvas渲染空白，需立即渲染，否则会出现闪动
-    if (isLazy && isPagingMode) {
-      this._lazyRender()
-    } else {
-      this._immediateRender()
-    }
-    // 光标重绘
-    if (isSetCursor) {
-      curIndex = this.setCursor(curIndex)
-    } else if (this.range.getIsSelection()) {
-      // 存在选区时仅定位避免事件无法捕获
-      this.cursor.focus()
-    }
-    // 历史记录用于undo、redo（非首次渲染内容变更 || 第一次存在光标时）
-    if (
-      (isSubmitHistory && !isFirstRender) ||
-      (curIndex !== undefined && this.historyManager.isStackEmpty())
-    ) {
-      this.submitHistory(curIndex)
-    }
-    // 信息变动回调
-    nextTick(() => {
-      // 选区样式
-      this.range.setRangeStyle()
-      // 重新唤起弹窗类控件
-      if (isCompute && this.control.getActiveControl()) {
-        this.control.reAwakeControl()
-      }
-      // 表格工具重新渲染
-      if (
-        isCompute &&
-        !this.isReadonly() &&
-        this.position.getPositionContext().isTable
-      ) {
-        this.tableTool.render()
-      }
-      // 页眉指示器重新渲染
-      if (isCompute && !this.zone.isMainActive()) {
-        this.zone.drawZoneIndicator()
-      }
-      // 页数改变
-      if (oldPageSize !== this.pageRowList.length) {
-        if (this.listener.pageSizeChange) {
-          this.listener.pageSizeChange(this.pageRowList.length)
-        }
-        if (this.eventBus.isSubscribe('pageSizeChange')) {
-          this.eventBus.emit('pageSizeChange', this.pageRowList.length)
-        }
-      }
-      // 文档内容改变
-      if ((isSubmitHistory || isSourceHistory) && !isInit) {
-        if (this.listener.contentChange) {
-          this.listener.contentChange()
-        }
-        if (this.eventBus.isSubscribe('contentChange')) {
-          this.eventBus.emit('contentChange')
-        }
-      }
-    })
-  }
-
-  public setCursor(curIndex: number | undefined) {
-    const positionContext = this.position.getPositionContext()
-    const positionList = this.position.getPositionList()
-    if (positionContext.isTable) {
-      const { index, trIndex, tdIndex } = positionContext
-      const elementList = this.getOriginalElementList()
-      const tablePositionList =
-        elementList[index!].trList?.[trIndex!].tdList[tdIndex!].positionList
-      if (curIndex === undefined && tablePositionList) {
-        curIndex = tablePositionList.length - 1
-      }
-      const tablePosition = tablePositionList?.[curIndex!]
-      this.position.setCursorPosition(tablePosition || null)
-    } else {
-      this.position.setCursorPosition(
-        curIndex !== undefined ? positionList[curIndex] : null
-      )
-    }
-    // 定位到图片元素并且位置发生变化
-    let isShowCursor = true
-    if (
-      curIndex !== undefined &&
-      positionContext.isImage &&
-      positionContext.isDirectHit
-    ) {
-      const elementList = this.getElementList()
-      const element = elementList[curIndex]
-      if (IMAGE_ELEMENT_TYPE.includes(element.type!)) {
-        isShowCursor = false
-        const position = this.position.getCursorPosition()
-        this.previewer.updateResizer(element, position)
-      }
-    }
-    this.cursor.drawCursor({
-      isShow: isShowCursor
-    })
-    return curIndex
-  }
-
-  public submitHistory(curIndex: number | undefined) {
-    const positionContext = this.position.getPositionContext()
-    const oldElementList = getSlimCloneElementList(this.elementList)
-    const oldHeaderElementList = getSlimCloneElementList(
-      this.header.getElementList()
-    )
-    const oldFooterElementList = getSlimCloneElementList(
-      this.footer.getElementList()
-    )
-    const oldRange = deepClone(this.range.getRange())
-    const pageNo = this.pageNo
-    const oldPositionContext = deepClone(positionContext)
-    const zone = this.zone.getZone()
-    this.historyManager.execute(() => {
-      this.zone.setZone(zone)
-      this.setPageNo(pageNo)
-      this.position.setPositionContext(deepClone(oldPositionContext))
-      this.header.setElementList(deepClone(oldHeaderElementList))
-      this.footer.setElementList(deepClone(oldFooterElementList))
-      this.elementList = deepClone(oldElementList)
-      this.range.replaceRange(deepClone(oldRange))
-      this.render({
-        curIndex,
-        isSubmitHistory: false,
-        isSourceHistory: true
-      })
-    })
-  }
-
-  public destroy() {
-    this.container.remove()
-    this.globalEvent.removeEvent()
-    this.scrollObserver.removeEvent()
-    this.selectionObserver.removeEvent()
-  }
-
-  public clearSideEffect() {
-    // 预览工具组件
-    this.getPreviewer().clearResizer()
-    // 表格工具组件
-    this.getTableTool().dispose()
-    // 超链接弹窗
-    this.getHyperlinkParticle().clearHyperlinkPopup()
-    // 日期控件
-    this.getDateParticle().clearDatePicker()
-  }
-}