editor-svg 1.0.2 → 1.0.3

package/src/editor/core/draw/interactive/Search.ts

@@ -1,527 +0,0 @@
-import { ZERO } from '../../../dataset/constant/Common'
-import { TEXTLIKE_ELEMENT_TYPE } from '../../../dataset/constant/Element'
-import { ControlComponent } from '../../../dataset/enum/Control'
-import { EditorContext } from '../../../dataset/enum/Editor'
-import { ElementType } from '../../../dataset/enum/Element'
-import { IEditorOption } from '../../../interface/Editor'
-import { IElement, IElementPosition } from '../../../interface/Element'
-import {
-  IReplaceOption,
-  ISearchOption,
-  ISearchResult,
-  ISearchResultRestArgs
-} from '../../../interface/Search'
-import { getUUID, indexOf, isNumber } from '../../../utils'
-import { Position } from '../../position/Position'
-import { RangeManager } from '../../range/RangeManager'
-import { Draw } from '../Draw'
-
-export interface INavigateInfo {
-  index: number
-  count: number
-}
-
-export class Search {
-  private draw: Draw
-  private options: Required<IEditorOption>
-  private position: Position
-  private range: RangeManager
-  private searchKeyword: string | null
-  private searchNavigateIndex: number | null
-  private searchOptions: ISearchOption | null
-  private searchMatchList: ISearchResult[]
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.options = draw.getOptions()
-    this.position = draw.getPosition()
-    this.range = draw.getRange()
-    this.searchNavigateIndex = null
-    this.searchOptions = null
-    this.searchKeyword = null
-    this.searchMatchList = []
-  }
-
-  public getSearchKeyword(): string | null {
-    return this.searchKeyword
-  }
-
-  public setSearchKeyword(payload: string | null, options?: ISearchOption) {
-    this.searchKeyword = payload
-    this.searchNavigateIndex = null
-    this.searchOptions = options || null
-  }
-
-  public searchNavigatePre(): number | null {
-    if (!this.searchMatchList.length || !this.searchKeyword) return null
-    if (this.searchNavigateIndex === null) {
-      this.searchNavigateIndex = 0
-    } else {
-      let index = this.searchNavigateIndex - 1
-      let isExistPre = false
-      const searchNavigateId =
-        this.searchMatchList[this.searchNavigateIndex].groupId
-      while (index >= 0) {
-        const match = this.searchMatchList[index]
-        if (searchNavigateId !== match.groupId) {
-          isExistPre = true
-          this.searchNavigateIndex = index - (this.searchKeyword.length - 1)
-          break
-        }
-        index--
-      }
-      if (!isExistPre) {
-        const lastSearchMatch =
-          this.searchMatchList[this.searchMatchList.length - 1]
-        if (lastSearchMatch.groupId === searchNavigateId) return null
-        this.searchNavigateIndex =
-          this.searchMatchList.length - 1 - (this.searchKeyword.length - 1)
-      }
-    }
-    return this.searchNavigateIndex
-  }
-
-  public searchNavigateNext(): number | null {
-    if (!this.searchMatchList.length || !this.searchKeyword) return null
-    if (this.searchNavigateIndex === null) {
-      this.searchNavigateIndex = 0
-    } else {
-      let index = this.searchNavigateIndex + 1
-      let isExistNext = false
-      const searchNavigateId =
-        this.searchMatchList[this.searchNavigateIndex].groupId
-      while (index < this.searchMatchList.length) {
-        const match = this.searchMatchList[index]
-        if (searchNavigateId !== match.groupId) {
-          isExistNext = true
-          this.searchNavigateIndex = index
-          break
-        }
-        index++
-      }
-      if (!isExistNext) {
-        const firstSearchMatch = this.searchMatchList[0]
-        if (firstSearchMatch.groupId === searchNavigateId) return null
-        this.searchNavigateIndex = 0
-      }
-    }
-    return this.searchNavigateIndex
-  }
-
-  public searchNavigateScrollIntoView(position: IElementPosition) {
-    const {
-      coordinate: { leftTop, leftBottom, rightTop },
-      pageNo
-    } = position
-    const height = this.draw.getHeight()
-    const pageGap = this.draw.getPageGap()
-    const preY = pageNo * (height + pageGap)
-    // 创建定位锚点
-    const anchor = document.createElement('div')
-    anchor.style.position = 'absolute'
-    // 扩大搜索词尺寸，使可视范围更广
-    const ANCHOR_OVERFLOW_SIZE = 50
-    anchor.style.width = `${rightTop[0] - leftTop[0] + ANCHOR_OVERFLOW_SIZE}px`
-    anchor.style.height = `${
-      leftBottom[1] - leftTop[1] + ANCHOR_OVERFLOW_SIZE
-    }px`
-    anchor.style.left = `${leftTop[0]}px`
-    anchor.style.top = `${leftTop[1] + preY}px`
-    this.draw.getContainer().append(anchor)
-    // 移动到可视范围
-    anchor.scrollIntoView(false)
-    anchor.remove()
-  }
-
-  public getSearchNavigateIndexList() {
-    if (this.searchNavigateIndex === null || !this.searchKeyword) return []
-    return new Array(this.searchKeyword.length)
-      .fill(this.searchNavigateIndex)
-      .map((navigate, index) => navigate + index)
-  }
-
-  public getSearchMatchList(): ISearchResult[] {
-    return this.searchMatchList
-  }
-
-  public getSearchNavigateInfo(): null | INavigateInfo {
-    if (!this.searchKeyword || !this.searchMatchList.length) return null
-    const index =
-      this.searchNavigateIndex !== null
-        ? this.searchNavigateIndex / this.searchKeyword.length + 1
-        : 0
-    let count = 0
-    let groupId = null
-    for (let s = 0; s < this.searchMatchList.length; s++) {
-      const match = this.searchMatchList[s]
-      if (groupId === match.groupId) continue
-      groupId = match.groupId
-      count += 1
-    }
-    return {
-      index,
-      count
-    }
-  }
-
-  public getMatchList(
-    payload: string,
-    originalElementList: IElement[]
-  ): ISearchResult[] {
-    const { isRegEnable = false, isIgnoreCase = true } =
-      this.searchOptions || {}
-    const keyword = isIgnoreCase ? payload.toLocaleLowerCase() : payload
-    const searchMatchList: ISearchResult[] = []
-    // 分组
-    const elementListGroup: {
-      type: EditorContext
-      elementList: IElement[]
-      index: number
-    }[] = []
-    const originalElementListLength = originalElementList.length
-    // 查找表格所在位置
-    const tableIndexList = []
-    for (let e = 0; e < originalElementListLength; e++) {
-      const element = originalElementList[e]
-      if (element.type === ElementType.TABLE) {
-        tableIndexList.push(e)
-      }
-    }
-    let i = 0
-    let elementIndex = 0
-    while (elementIndex < originalElementListLength - 1) {
-      const endIndex = tableIndexList.length
-        ? tableIndexList[i]
-        : originalElementListLength
-      const pageElement = originalElementList.slice(elementIndex, endIndex)
-      if (pageElement.length) {
-        elementListGroup.push({
-          index: elementIndex,
-          type: EditorContext.PAGE,
-          elementList: pageElement
-        })
-      }
-      const tableElement = originalElementList[endIndex]
-      if (tableElement) {
-        elementListGroup.push({
-          index: endIndex,
-          type: EditorContext.TABLE,
-          elementList: [tableElement]
-        })
-      }
-      elementIndex = endIndex + 1
-      i++
-    }
-    // 搜索文本
-    function searchClosure(
-      payload: string | null,
-      type: EditorContext,
-      elementList: IElement[],
-      restArgs?: ISearchResultRestArgs
-    ) {
-      if (!payload) return
-      let text = elementList
-        .map(e =>
-          !e.type ||
-          (TEXTLIKE_ELEMENT_TYPE.includes(e.type) &&
-            e.controlComponent !== ControlComponent.CHECKBOX &&
-            e.controlComponent !== ControlComponent.RADIO &&
-            !e.hide &&
-            !e.control?.hide &&
-            !e.area?.hide)
-            ? e.value
-            : ZERO
-        )
-        .filter(Boolean)
-        .join('')
-      if (isIgnoreCase) {
-        text = text.toLocaleLowerCase()
-      }
-      // 匹配的结果列表
-      const matchList: { index: number; length: number }[] = []
-      // 从索引0开始依次匹配
-      const searchStr = isRegEnable ? new RegExp(payload) : payload
-      let { index, length } = indexOf(text, searchStr)
-      while (index !== -1 && length !== 0) {
-        matchList.push({
-          index,
-          length
-        })
-        const matchResult = indexOf(text, searchStr, index + length)
-        index = matchResult.index
-        length = matchResult.length
-      }
-      for (let m = 0; m < matchList.length; m++) {
-        const { index: startIndex, length: matchLength } = matchList[m]
-        const groupId = getUUID()
-        for (let i = 0; i < matchLength; i++) {
-          const index = startIndex + i + (restArgs?.startIndex || 0)
-          searchMatchList.push({
-            type,
-            index,
-            groupId,
-            ...restArgs
-          })
-        }
-      }
-    }
-    for (let e = 0; e < elementListGroup.length; e++) {
-      const group = elementListGroup[e]
-      if (group.type === EditorContext.TABLE) {
-        const tableElement = group.elementList[0]
-        for (let t = 0; t < tableElement.trList!.length; t++) {
-          const tr = tableElement.trList![t]
-          for (let d = 0; d < tr.tdList.length; d++) {
-            const td = tr.tdList[d]
-            const restArgs: ISearchResultRestArgs = {
-              tableId: tableElement.id,
-              tableIndex: group.index,
-              trIndex: t,
-              tdIndex: d,
-              tdId: td.id
-            }
-            searchClosure(keyword, group.type, td.value, restArgs)
-          }
-        }
-      } else {
-        searchClosure(keyword, group.type, group.elementList, {
-          startIndex: group.index
-        })
-      }
-    }
-    return searchMatchList
-  }
-
-  public compute(payload: string) {
-    const isPickSelectionElementList =
-      this.searchOptions?.isLimitSelection && !this.range.getIsCollapsed()
-    // 搜索元素范围（默认全部 || 设置搜索选中区域）
-    const searchElementList = isPickSelectionElementList
-      ? this.range.getSelectionElementList()
-      : this.draw.getOriginalElementList()
-    if (!searchElementList?.length) return
-    this.searchMatchList = this.getMatchList(payload, searchElementList)
-    // 根据选区位置index/tableIndex往后移动
-    if (!isPickSelectionElementList || !this.searchMatchList.length) return
-    const { startIndex } = this.range.getRange()
-    // getSelectionElementList实际返回的元素列表为选区位置之后的元素列表，所以需要+1
-    const offset = startIndex + 1
-    for (const searchMatch of this.searchMatchList) {
-      if (searchMatch.type === EditorContext.TABLE) {
-        searchMatch.tableIndex! += offset
-      } else {
-        searchMatch.index += offset
-      }
-    }
-  }
-
-  public render(ctx: CanvasRenderingContext2D, pageIndex: number) {
-    if (
-      !this.searchMatchList ||
-      !this.searchMatchList.length ||
-      !this.searchKeyword
-    ) {
-      return
-    }
-    const { searchMatchAlpha, searchMatchColor, searchNavigateMatchColor } =
-      this.options
-    const positionList = this.position.getOriginalPositionList()
-    const elementList = this.draw.getOriginalElementList()
-    ctx.save()
-    ctx.globalAlpha = searchMatchAlpha
-    for (let s = 0; s < this.searchMatchList.length; s++) {
-      const searchMatch = this.searchMatchList[s]
-      let position: IElementPosition | null = null
-      if (searchMatch.type === EditorContext.TABLE) {
-        const { tableIndex, trIndex, tdIndex, index } = searchMatch
-        position =
-          elementList[tableIndex!]?.trList![trIndex!].tdList[tdIndex!]
-            ?.positionList![index]
-      } else {
-        position = positionList[searchMatch.index]
-      }
-      if (!position) continue
-      const {
-        coordinate: { leftTop, leftBottom, rightTop },
-        pageNo
-      } = position
-      if (pageNo !== pageIndex) continue
-      // 高亮并定位当前搜索词
-      const searchMatchIndexList = this.getSearchNavigateIndexList()
-      if (searchMatchIndexList.includes(s)) {
-        ctx.fillStyle = searchNavigateMatchColor
-        // 是否是第一个字符，则移动到可视范围
-        const preSearchMatch = this.searchMatchList[s - 1]
-        if (!preSearchMatch || preSearchMatch.groupId !== searchMatch.groupId) {
-          this.searchNavigateScrollIntoView(position)
-        }
-      } else {
-        ctx.fillStyle = searchMatchColor
-      }
-      const x = leftTop[0]
-      const y = leftTop[1]
-      const width = rightTop[0] - leftTop[0]
-      const height = leftBottom[1] - leftTop[1]
-      ctx.fillRect(x, y, width, height)
-    }
-    ctx.restore()
-  }
-
-  public replace(payload: string, option?: IReplaceOption) {
-    const isReadonly = this.draw.isReadonly()
-    if (isReadonly) return
-    if (payload === undefined || payload === null) return
-    let matchList = this.getSearchMatchList()
-    // 替换搜索项
-    const replaceIndex = option?.index
-    if (isNumber(replaceIndex)) {
-      const matchGroup: ISearchResult[][] = []
-      matchList.forEach(match => {
-        const last = matchGroup[matchGroup.length - 1]
-        if (!last || last[0].groupId !== match.groupId) {
-          matchGroup.push([match])
-        } else {
-          last.push(match)
-        }
-      })
-      matchList = matchGroup[replaceIndex]
-    }
-    if (!matchList?.length) return
-    const isDesignMode = this.draw.isDesignMode()
-    // 匹配index变化的差值
-    let pageDiffCount = 0
-    let tableDiffCount = 0
-    // 匹配搜索词的组标识
-    let curGroupId = ''
-    // 表格上下文
-    let curTdId = ''
-    // 搜索值 > 替换值：增加元素；搜索值 < 替换值：减少元素
-    let firstMatchIndex = -1
-    const elementList = this.draw.getOriginalElementList()
-    for (let m = 0; m < matchList.length; m++) {
-      const match = matchList[m]
-      if (match.type === EditorContext.TABLE) {
-        const { tableIndex, trIndex, tdIndex, index, tdId } = match
-        if (curTdId && tdId !== curTdId) {
-          tableDiffCount = 0
-        }
-        curTdId = tdId!
-        const curTableIndex = tableIndex! + pageDiffCount
-        const tableElementList =
-          elementList[curTableIndex].trList![trIndex!].tdList[tdIndex!].value
-        // 表格内元素
-        const curIndex = index + tableDiffCount
-        const tableElement = tableElementList[curIndex]
-        // 非设计模式下设置元素不可删除 || 控件结构元素 => 禁止替换
-        if (
-          !isDesignMode &&
-          (tableElement?.control?.deletable === false ||
-            tableElement?.title?.deletable === false)
-        ) {
-          continue
-        }
-        if (payload === '') {
-          this.draw.spliceElementList(tableElementList, curIndex, 1)
-          tableDiffCount--
-          if (!~firstMatchIndex) {
-            firstMatchIndex = m
-          }
-          continue
-        }
-        if (curGroupId === match.groupId) {
-          this.draw.spliceElementList(tableElementList, curIndex, 1)
-          tableDiffCount--
-          continue
-        }
-        if (!~firstMatchIndex) {
-          firstMatchIndex = m
-        }
-        for (let p = 0; p < payload.length; p++) {
-          const value = payload[p]
-          if (p === 0) {
-            tableElement.value = value
-          } else {
-            this.draw.spliceElementList(tableElementList, curIndex + p, 0, [
-              {
-                ...tableElement,
-                value
-              }
-            ])
-            tableDiffCount++
-          }
-        }
-      } else {
-        const curIndex = match.index + pageDiffCount
-        const element = elementList[curIndex]
-        // 非设计模式下设置元素不可删除 || 控件结构元素 => 禁止替换
-        if (
-          (!isDesignMode &&
-            (element?.control?.deletable === false ||
-              element?.title?.deletable === false)) ||
-          (element.type === ElementType.CONTROL &&
-            element.controlComponent !== ControlComponent.VALUE)
-        ) {
-          continue
-        }
-        if (payload === '') {
-          this.draw.spliceElementList(elementList, curIndex, 1)
-          pageDiffCount--
-          if (!~firstMatchIndex) {
-            firstMatchIndex = m
-          }
-          continue
-        }
-        if (!~firstMatchIndex) {
-          firstMatchIndex = m
-        }
-        if (curGroupId === match.groupId) {
-          this.draw.spliceElementList(elementList, curIndex, 1)
-          pageDiffCount--
-          continue
-        }
-        for (let p = 0; p < payload.length; p++) {
-          const value = payload[p]
-          if (p === 0) {
-            element.value = value
-          } else {
-            this.draw.spliceElementList(elementList, curIndex + p, 0, [
-              {
-                ...element,
-                value
-              }
-            ])
-            pageDiffCount++
-          }
-        }
-      }
-      curGroupId = match.groupId
-    }
-    if (!~firstMatchIndex) return
-    // 定位-首个被匹配关键词后
-    const firstMatch = matchList[firstMatchIndex]
-    const firstIndex = firstMatch.index + (payload.length - 1)
-    if (firstMatch.type === EditorContext.TABLE) {
-      const { tableIndex, trIndex, tdIndex, index } = firstMatch
-      const element =
-        elementList[tableIndex!].trList![trIndex!].tdList[tdIndex!].value[index]
-      this.position.setPositionContext({
-        isTable: true,
-        index: tableIndex,
-        trIndex,
-        tdIndex,
-        tdId: element.tdId,
-        trId: element.trId,
-        tableId: element.tableId
-      })
-    } else {
-      this.position.setPositionContext({
-        isTable: false
-      })
-    }
-    this.draw.getRange().setRange(firstIndex, firstIndex)
-    // 重新渲染
-    this.draw.render({
-      curIndex: firstIndex
-    })
-  }
-}

package/src/editor/core/draw/particle/CheckboxParticle.ts

@@ -1,111 +0,0 @@
-import { NBSP, ZERO } from '../../../dataset/constant/Common'
-import { VerticalAlign } from '../../../dataset/enum/VerticalAlign'
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IElement } from '../../../interface/Element'
-import { IRow, IRowElement } from '../../../interface/Row'
-import { Draw } from '../Draw'
-
-interface ICheckboxRenderOption {
-  ctx: CanvasRenderingContext2D
-  x: number
-  y: number
-  row: IRow
-  index: number
-}
-
-export class CheckboxParticle {
-  private draw: Draw
-  private options: DeepRequired<IEditorOption>
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.options = draw.getOptions()
-  }
-
-  public setSelect(element: IElement) {
-    const { checkbox } = element
-    if (checkbox) {
-      checkbox.value = !checkbox.value
-    } else {
-      element.checkbox = {
-        value: true
-      }
-    }
-    this.draw.render({
-      isCompute: false,
-      isSetCursor: false
-    })
-  }
-
-  public render(payload: ICheckboxRenderOption) {
-    const { ctx, x, index, row } = payload
-    let { y } = payload
-    const {
-      checkbox: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign },
-      scale
-    } = this.options
-    const { metrics, checkbox } = row.elementList[index]
-    // 垂直布局设置
-    if (
-      verticalAlign === VerticalAlign.TOP ||
-      verticalAlign === VerticalAlign.MIDDLE
-    ) {
-      let nextIndex = index + 1
-      let nextElement: IRowElement | null = null
-      while (nextIndex < row.elementList.length) {
-        nextElement = row.elementList[nextIndex]
-        if (nextElement.value !== ZERO && nextElement.value !== NBSP) break
-        nextIndex++
-      }
-      // 以后一个非空格元素为基准
-      if (nextElement) {
-        const {
-          metrics: { boundingBoxAscent, boundingBoxDescent }
-        } = nextElement
-        const textHeight = boundingBoxAscent + boundingBoxDescent
-        if (textHeight > metrics.height) {
-          if (verticalAlign === VerticalAlign.TOP) {
-            y -= boundingBoxAscent - metrics.height
-          } else if (verticalAlign === VerticalAlign.MIDDLE) {
-            y -= (textHeight - metrics.height) / 2
-          }
-        }
-      }
-    }
-    // left top 四舍五入避免1像素问题
-    const left = Math.round(x + gap * scale)
-    const top = Math.round(y - metrics.height + lineWidth)
-    const width = metrics.width - gap * 2 * scale
-    const height = metrics.height
-    ctx.save()
-    ctx.beginPath()
-    ctx.translate(0.5, 0.5)
-    // 绘制勾选状态
-    if (checkbox?.value) {
-      // 边框
-      ctx.lineWidth = lineWidth
-      ctx.strokeStyle = fillStyle
-      ctx.rect(left, top, width, height)
-      ctx.stroke()
-      // 背景色
-      ctx.beginPath()
-      ctx.fillStyle = fillStyle
-      ctx.fillRect(left, top, width, height)
-      // 勾选对号
-      ctx.beginPath()
-      ctx.strokeStyle = strokeStyle
-      ctx.lineWidth = lineWidth * 2 * scale
-      ctx.moveTo(left + 2 * scale, top + height / 2)
-      ctx.lineTo(left + width / 2, top + height - 3 * scale)
-      ctx.lineTo(left + width - 2 * scale, top + 3 * scale)
-      ctx.stroke()
-    } else {
-      ctx.lineWidth = lineWidth
-      ctx.rect(left, top, width, height)
-      ctx.stroke()
-    }
-    ctx.closePath()
-    ctx.restore()
-  }
-}