editor-svg 1.0.0

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

@@ -0,0 +1,527 @@
+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

@@ -0,0 +1,111 @@
+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()
+  }
+}