editor-svg 1.0.2 → 1.0.3

package/src/editor/core/draw/control/interactive/ControlSearch.ts

@@ -1,214 +0,0 @@
-import { ZERO } from '../../../../dataset/constant/Common'
-import { ControlComponent } from '../../../../dataset/enum/Control'
-import { ElementType } from '../../../../dataset/enum/Element'
-import { DeepRequired } from '../../../../interface/Common'
-import {
-  IControlHighlight,
-  IControlHighlightRule
-} from '../../../../interface/Control'
-import { IEditorOption } from '../../../../interface/Editor'
-import { IElement, IElementPosition } from '../../../../interface/Element'
-import {
-  ISearchResult,
-  ISearchResultRestArgs
-} from '../../../../interface/Search'
-import { Draw } from '../../Draw'
-import { Control } from '../Control'
-
-type IHighlightMatchResult = (ISearchResult & IControlHighlightRule)[]
-
-export class ControlSearch {
-  private draw: Draw
-  private control: Control
-  private options: DeepRequired<IEditorOption>
-  private highlightList: IControlHighlight[]
-  private highlightMatchResult: IHighlightMatchResult
-
-  constructor(control: Control) {
-    this.draw = control.getDraw()
-    this.control = control
-    this.options = this.draw.getOptions()
-
-    this.highlightList = []
-    this.highlightMatchResult = []
-  }
-
-  // 获取控件设置高亮信息
-  public getControlHighlight(elementList: IElement[], index: number) {
-    const {
-      control: {
-        activeBackgroundColor,
-        disabledBackgroundColor,
-        existValueBackgroundColor,
-        noValueBackgroundColor
-      }
-    } = this.options
-    const element = elementList[index]
-    const isPrintMode = this.draw.isPrintMode()
-    const activeControlElement = this.control.getActiveControl()?.getElement()
-    // 颜色配置：元素 > 控件激活 > 控件禁用 > 控件存在值 > 控件不存在值
-    let isActiveControlHighlight = false
-    let isDisabledControlHighlight = false
-    let isExitsValueControlHighlight = false
-    let isNoValueControlHighlight = false
-    if (!element.highlight) {
-      // 控件激活时高亮色
-      isActiveControlHighlight =
-        !isPrintMode &&
-        !!activeBackgroundColor &&
-        !!activeControlElement &&
-        element.controlId === activeControlElement.controlId &&
-        !this.control.getIsRangeInPostfix()
-    }
-    if (!isActiveControlHighlight) {
-      // 控件禁用时高亮色
-      isDisabledControlHighlight =
-        !isPrintMode && !!disabledBackgroundColor && !!element.control?.disabled
-    }
-    if (!isDisabledControlHighlight) {
-      // 控件存在值时高亮色
-      isExitsValueControlHighlight =
-        !isPrintMode &&
-        !!existValueBackgroundColor &&
-        !!element.controlId &&
-        this.control.getIsExistValueByElementListIndex(elementList, index)
-    }
-    if (!isExitsValueControlHighlight) {
-      // 控件不存在值时高亮色
-      isNoValueControlHighlight =
-        !isPrintMode &&
-        !!noValueBackgroundColor &&
-        !!element.controlId &&
-        !this.control.getIsExistValueByElementListIndex(elementList, index)
-    }
-    return (
-      (isActiveControlHighlight ? activeBackgroundColor : '') ||
-      (isDisabledControlHighlight ? disabledBackgroundColor : '') ||
-      (isExitsValueControlHighlight ? existValueBackgroundColor : '') ||
-      (isNoValueControlHighlight ? noValueBackgroundColor : '')
-    )
-  }
-
-  public getHighlightMatchResult(): IHighlightMatchResult {
-    return this.highlightMatchResult
-  }
-
-  public getHighlightList(): IControlHighlight[] {
-    return this.highlightList
-  }
-
-  public setHighlightList(payload: IControlHighlight[]) {
-    this.highlightList = payload
-  }
-
-  public computeHighlightList() {
-    const search = this.draw.getSearch()
-    const computeHighlight = (
-      elementList: IElement[],
-      restArgs?: ISearchResultRestArgs
-    ) => {
-      let i = 0
-      while (i < elementList.length) {
-        const element = elementList[i]
-        i++
-        // 表格下钻处理
-        if (element.type === ElementType.TABLE) {
-          const trList = element.trList!
-          for (let r = 0; r < trList.length; r++) {
-            const tr = trList[r]
-            for (let d = 0; d < tr.tdList.length; d++) {
-              const td = tr.tdList[d]
-              const restArgs: ISearchResultRestArgs = {
-                tableId: element.id,
-                tableIndex: i - 1,
-                trIndex: r,
-                tdIndex: d,
-                tdId: td.id
-              }
-              computeHighlight(td.value, restArgs)
-            }
-          }
-        }
-        const currentControl = element?.control
-        if (!currentControl) continue
-        const highlightIndex = this.highlightList.findIndex(
-          highlight =>
-            highlight.id === element.controlId ||
-            (currentControl.conceptId &&
-              currentControl.conceptId === highlight.conceptId)
-        )
-        if (!~highlightIndex) continue
-        // 搜索后控件结束索引
-        const startIndex = i
-        let newEndIndex = i
-        while (newEndIndex < elementList.length) {
-          const nextElement = elementList[newEndIndex]
-          if (nextElement.controlId !== element.controlId) break
-          newEndIndex++
-        }
-        i = newEndIndex
-        // 高亮信息
-        const controlElementList = elementList
-          .slice(startIndex, newEndIndex)
-          .map(element =>
-            element.controlComponent === ControlComponent.VALUE
-              ? element
-              : { value: ZERO }
-          )
-        const highlight = this.highlightList[highlightIndex]
-        const { ruleList } = highlight
-        for (let r = 0; r < ruleList.length; r++) {
-          const rule = ruleList[r]
-          const searchResult = search.getMatchList(
-            rule.keyword,
-            controlElementList
-          )
-          this.highlightMatchResult.push(
-            ...searchResult.map(result => ({
-              ...result,
-              ...rule,
-              ...restArgs,
-              index: result.index + startIndex // 实际索引
-            }))
-          )
-        }
-      }
-    }
-    this.highlightMatchResult = []
-    computeHighlight(this.draw.getOriginalMainElementList())
-  }
-
-  public renderHighlightList(ctx: CanvasRenderingContext2D, pageIndex: number) {
-    if (!this.highlightMatchResult?.length) return
-    const { searchMatchAlpha, searchMatchColor } = this.options
-    const positionList = this.draw.getPosition().getOriginalPositionList()
-    const elementList = this.draw.getOriginalElementList()
-    ctx.save()
-    for (let s = 0; s < this.highlightMatchResult.length; s++) {
-      const searchMatch = this.highlightMatchResult[s]
-      let position: IElementPosition | null = null
-      if (searchMatch.tableId) {
-        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
-      ctx.fillStyle = searchMatch.backgroundColor || searchMatchColor
-      ctx.globalAlpha = searchMatch.alpha || searchMatchAlpha
-      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()
-  }
-}

package/src/editor/core/draw/control/number/Calculator.ts

@@ -1,183 +0,0 @@
-import {
-  EDITOR_COMPONENT,
-  EDITOR_PREFIX
-} from '../../../../dataset/constant/Editor'
-import { EditorComponent } from '../../../../dataset/enum/Editor'
-import { CalculatorButtonType } from '../../../../dataset/enum/Control'
-import { Control } from '../Control'
-
-interface CalculatorOptions {
-  control: Control
-  onCalculate: (result: number) => void
-}
-
-export class Calculator {
-  private control: Control
-  private calculatorDom: HTMLDivElement | null
-  private onCalculate: (result: number) => void
-  private currentExpression: string
-
-  constructor(options: CalculatorOptions) {
-    this.control = options.control
-    this.onCalculate = options.onCalculate
-    this.calculatorDom = null
-    this.currentExpression = ''
-  }
-
-  public createPopup() {
-    const position = this.control.getPosition()
-    if (!position) return
-
-    // 创建计算器弹窗容器
-    const calculatorPopupContainer = document.createElement('div')
-    calculatorPopupContainer.classList.add(`${EDITOR_PREFIX}-calculator`)
-    calculatorPopupContainer.setAttribute(
-      EDITOR_COMPONENT,
-      EditorComponent.POPUP
-    )
-
-    // 创建显示区域
-    const display = document.createElement('div')
-    display.classList.add(`${EDITOR_PREFIX}-calculator-display`)
-    display.textContent = '0'
-
-    // 创建按钮容器
-    const buttonContainer = document.createElement('div')
-    buttonContainer.classList.add(`${EDITOR_PREFIX}-calculator-buttons`)
-
-    // 按钮布局
-    const buttons = [
-      [
-        { text: 'C', type: CalculatorButtonType.UTILITY },
-        { text: '←', type: CalculatorButtonType.UTILITY },
-        { text: '%', type: CalculatorButtonType.OPERATOR },
-        { text: '/', type: CalculatorButtonType.OPERATOR }
-      ],
-      [
-        { text: '7', type: CalculatorButtonType.NUMBER },
-        { text: '8', type: CalculatorButtonType.NUMBER },
-        { text: '9', type: CalculatorButtonType.NUMBER },
-        { text: '*', type: CalculatorButtonType.OPERATOR }
-      ],
-      [
-        { text: '4', type: CalculatorButtonType.NUMBER },
-        { text: '5', type: CalculatorButtonType.NUMBER },
-        { text: '6', type: CalculatorButtonType.NUMBER },
-        { text: '-', type: CalculatorButtonType.OPERATOR }
-      ],
-      [
-        { text: '1', type: CalculatorButtonType.NUMBER },
-        { text: '2', type: CalculatorButtonType.NUMBER },
-        { text: '3', type: CalculatorButtonType.NUMBER },
-        { text: '+', type: CalculatorButtonType.OPERATOR }
-      ],
-      [
-        { text: '0', type: CalculatorButtonType.NUMBER },
-        { text: '.', type: CalculatorButtonType.NUMBER },
-        { text: '=', type: CalculatorButtonType.EQUAL, span: 2 }
-      ]
-    ]
-
-    // 创建按钮
-    buttons.forEach(row => {
-      row.forEach(buttonInfo => {
-        const button = document.createElement('button')
-        button.classList.add(`${EDITOR_PREFIX}-calculator-button`)
-
-        // 添加按钮类型类名
-        if (buttonInfo.type === CalculatorButtonType.OPERATOR) {
-          button.classList.add('operator')
-        } else if (buttonInfo.type === CalculatorButtonType.EQUAL) {
-          button.classList.add('equal')
-        } else if (buttonInfo.type === CalculatorButtonType.UTILITY) {
-          button.classList.add('utility')
-        }
-
-        button.textContent = buttonInfo.text
-
-        // 按钮点击事件
-        button.onclick = () => {
-          const buttonText = buttonInfo.text
-          if (buttonText === 'C') {
-            // 清空
-            this.currentExpression = ''
-            display.textContent = '0'
-          } else if (buttonText === '←') {
-            // 退格
-            this.currentExpression = this.currentExpression.slice(0, -1)
-            display.textContent = this.currentExpression || '0'
-          } else if (buttonText === '=') {
-            const result = this.calculate(this.currentExpression)
-            if (Number.isFinite(result)) {
-              display.textContent = result.toString()
-              this.currentExpression = result.toString()
-
-              // 回调计算结果
-              this.onCalculate(result)
-            } else {
-              display.textContent = 'Error'
-              this.currentExpression = ''
-            }
-          } else {
-            // 其他按钮
-            this.currentExpression += buttonText
-            display.textContent = this.currentExpression
-          }
-        }
-
-        // 设置按钮跨度
-        if (buttonInfo.span) {
-          button.style.gridColumn = `span ${buttonInfo.span}`
-        }
-
-        buttonContainer.appendChild(button)
-      })
-    })
-
-    // 组装计算器
-    calculatorPopupContainer.appendChild(display)
-    calculatorPopupContainer.appendChild(buttonContainer)
-
-    // 定位
-    const {
-      coordinate: {
-        leftTop: [left, top]
-      },
-      lineHeight
-    } = position
-    const preY = this.control.getPreY()
-    calculatorPopupContainer.style.left = `${left}px`
-    calculatorPopupContainer.style.top = `${top + preY + lineHeight}px`
-
-    // 追加至container
-    const container = this.control.getContainer()
-    container.appendChild(calculatorPopupContainer)
-
-    this.calculatorDom = calculatorPopupContainer
-  }
-
-  public destroy() {
-    if (this.calculatorDom) {
-      this.calculatorDom.remove()
-      this.calculatorDom = null
-    }
-  }
-
-  private calculate(expression: string): number {
-    // 安全计算，使用Function而不是eval
-    const result = Function('return ' + expression)()
-
-    // 无限循环数，直接返回 1/0
-    if (!Number.isFinite(result)) {
-      return result
-    }
-
-    // 如果是整数，直接返回
-    if (Number.isInteger(result)) {
-      return result
-    }
-
-    // 如果是小数，保留最多10位小数，并去除末尾的0
-    return parseFloat(result.toFixed(10))
-  }
-}

package/src/editor/core/draw/control/number/NumberControl.ts

@@ -1,183 +0,0 @@
-import { NON_NUMBER_STR_REG } from '../../../../dataset/constant/Regular'
-import { ControlComponent } from '../../../../dataset/enum/Control'
-import { ElementType } from '../../../../dataset/enum/Element'
-import {
-  IControlContext,
-  IControlRuleOption
-} from '../../../../interface/Control'
-import { IElement } from '../../../../interface/Element'
-import { deepClone, omitObject, pickObject } from '../../../../utils'
-import { getElementListText, isTextElement } from '../../../../utils/element'
-import { TextControl } from '../text/TextControl'
-import { Calculator } from './Calculator'
-import {
-  CONTROL_STYLE_ATTR,
-  EDITOR_ELEMENT_STYLE_ATTR
-} from '../../../../dataset/constant/Element'
-
-export class NumberControl extends TextControl {
-  private isPopup: boolean
-  private calculator: Calculator | null
-
-  constructor(element: IElement, control: any) {
-    super(element, control)
-    this.isPopup = false
-    this.calculator = null
-  }
-
-  public getIsPopup(): boolean {
-    return this.isPopup
-  }
-
-  public setValue(
-    data: IElement[],
-    context: IControlContext = {},
-    options: IControlRuleOption = {}
-  ): number {
-    // 禁止存在非文本元素
-    if (
-      data.some(el => !isTextElement(el) || NON_NUMBER_STR_REG.test(el.value))
-    ) {
-      return -1
-    }
-    // 校验填充数据后是否是数值（任何数字都是可接受的值，只要它是有效的浮点数（即不是 NaN 或 Infinity））
-    const elementList = context.elementList || this.control.getElementList()
-    const range = context.range || this.control.getRange()
-    this.control.shrinkBoundary(context)
-    // 找到控件已经存在的元素并插入新元素后验证数值合法性
-    const controlElementList = deepClone(data)
-    const { startIndex, endIndex } = range
-    const startElement = elementList[startIndex]
-    if (
-      this.control.getIsExistValueByElementListIndex(elementList, startIndex)
-    ) {
-      // 向左查找
-      let preIndex = startIndex
-      while (preIndex > 0) {
-        const preElement = elementList[preIndex]
-        if (
-          preElement.controlId !== startElement.controlId ||
-          preElement.controlComponent === ControlComponent.PREFIX ||
-          preElement.controlComponent === ControlComponent.PRE_TEXT
-        ) {
-          break
-        }
-        controlElementList.unshift(preElement)
-        preIndex--
-      }
-      // 向右查找
-      let nextIndex = endIndex + 1
-      while (nextIndex < elementList.length) {
-        const nextElement = elementList[nextIndex]
-        if (
-          nextElement.controlId !== startElement.controlId ||
-          nextElement.controlComponent === ControlComponent.POSTFIX ||
-          nextElement.controlComponent === ControlComponent.POST_TEXT
-        ) {
-          break
-        }
-        controlElementList.push(nextElement)
-        nextIndex++
-      }
-    }
-    // 提取文本
-    const text = getElementListText(controlElementList)
-    if (Number.isNaN(Number(text)) || !Number.isFinite(Number(text))) {
-      return -1
-    }
-    return super.setValue(data, context, options)
-  }
-
-  private _setCalculatedValue(value: number) {
-    // 清空旧值
-    const prefixIndex = super.clearValue(
-      {},
-      {
-        isAddPlaceholder: false,
-        isIgnoreDeletedRule: true
-      }
-    )
-    if (!~prefixIndex) return
-
-    // 样式赋值元素-默认值的第一个字符样式，否则取默认样式
-    const elementList = this.control.getElementList()
-    const range = this.control.getRange()
-    const valueElement = this.getValue()[0]
-    const styleElement = valueElement
-      ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR)
-      : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR)
-
-    // 属性赋值元素-默认为前缀属性
-    const propertyElement = omitObject(
-      elementList[prefixIndex],
-      EDITOR_ELEMENT_STYLE_ATTR
-    )
-
-    // 创建新的元素
-    const valueStr = value.toString()
-    const data: IElement[] = []
-
-    for (let i = 0; i < valueStr.length; i++) {
-      const newElement: IElement = {
-        ...styleElement,
-        ...propertyElement,
-        type: ElementType.TEXT,
-        value: valueStr[i],
-        controlComponent: ControlComponent.VALUE
-      }
-      data.push(newElement)
-    }
-
-    // 设置值
-    this.setValue(data)
-
-    // 重新渲染控件
-    this.control.repaintControl({
-      curIndex: prefixIndex + data.length
-    })
-
-    // 触发控件内容变化事件
-    this.control.emitControlContentChange()
-
-    // 销毁弹窗
-    this.destroy()
-  }
-
-  public awake() {
-    // 检查是否启用计算器模式
-    const isCalculatorEnabled =
-      this.element.control?.numberExclusiveOptions?.calculatorDisabled === false
-    if (
-      this.isPopup ||
-      !isCalculatorEnabled ||
-      this.control.getIsDisabledControl() ||
-      !this.control.getIsRangeWithinControl()
-    ) {
-      return
-    }
-    const { startIndex } = this.control.getRange()
-    const elementList = this.control.getElementList()
-    if (elementList[startIndex + 1]?.controlId !== this.element.controlId) {
-      return
-    }
-
-    // 创建计算器实例
-    this.calculator = new Calculator({
-      control: this.control,
-      onCalculate: result => {
-        this._setCalculatedValue(result)
-      }
-    })
-
-    // 显示计算器弹窗
-    this.calculator.createPopup()
-    this.isPopup = true
-  }
-
-  public destroy() {
-    if (!this.isPopup) return
-    this.calculator?.destroy()
-    this.calculator = null
-    this.isPopup = false
-  }
-}

package/src/editor/core/draw/control/radio/RadioControl.ts

@@ -1,68 +0,0 @@
-import { ControlComponent } from '../../../../dataset/enum/Control'
-import {
-  IControlContext,
-  IControlRuleOption
-} from '../../../../interface/Control'
-import { CheckboxControl } from '../checkbox/CheckboxControl'
-
-export class RadioControl extends CheckboxControl {
-  public setSelect(
-    codes: string[],
-    context: IControlContext = {},
-    options: IControlRuleOption = {}
-  ) {
-    // 校验是否可以设置
-    if (
-      !options.isIgnoreDisabledRule &&
-      this.control.getIsDisabledControl(context)
-    ) {
-      return
-    }
-    const { control } = this.element
-    const elementList = context.elementList || this.control.getElementList()
-    const { startIndex } = context.range || this.control.getRange()
-    const startElement = elementList[startIndex]
-    // 向左查找
-    let preIndex = startIndex
-    while (preIndex > 0) {
-      const preElement = elementList[preIndex]
-      if (
-        preElement.controlId !== startElement.controlId ||
-        preElement.controlComponent === ControlComponent.PREFIX ||
-        preElement.controlComponent === ControlComponent.PRE_TEXT
-      ) {
-        break
-      }
-      if (preElement.controlComponent === ControlComponent.RADIO) {
-        const radio = preElement.radio!
-        radio.value = codes.includes(radio.code!)
-      }
-      preIndex--
-    }
-    // 向右查找
-    let nextIndex = startIndex + 1
-    while (nextIndex < elementList.length) {
-      const nextElement = elementList[nextIndex]
-      if (
-        nextElement.controlId !== startElement.controlId ||
-        nextElement.controlComponent === ControlComponent.POSTFIX ||
-        nextElement.controlComponent === ControlComponent.POST_TEXT
-      ) {
-        break
-      }
-      if (nextElement.controlComponent === ControlComponent.RADIO) {
-        const radio = nextElement.radio!
-        radio.value = codes.includes(radio.code!)
-      }
-      nextIndex++
-    }
-    control!.code = codes.join(',')
-    this.control.repaintControl({
-      curIndex: startIndex,
-      isSetCursor: false
-    })
-    this.control.emitControlContentChange({
-      context
-    })
-  }
-}

package/src/editor/core/draw/control/richtext/Border.ts

@@ -1,52 +0,0 @@
-import { DeepRequired } from '../../../../interface/Common'
-import { IEditorOption } from '../../../../interface/Editor'
-import { IElementFillRect } from '../../../../interface/Element'
-import { Draw } from '../../Draw'
-
-export class ControlBorder {
-  protected borderRect: IElementFillRect
-  private options: DeepRequired<IEditorOption>
-
-  constructor(draw: Draw) {
-    this.borderRect = this.clearBorderInfo()
-    this.options = draw.getOptions()
-  }
-
-  public clearBorderInfo() {
-    this.borderRect = {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    }
-    return this.borderRect
-  }
-
-  public recordBorderInfo(x: number, y: number, width: number, height: number) {
-    const isFirstRecord = !this.borderRect.width
-    if (isFirstRecord) {
-      this.borderRect.x = x
-      this.borderRect.y = y
-      this.borderRect.height = height
-    }
-    this.borderRect.width += width
-  }
-
-  public render(ctx: CanvasRenderingContext2D) {
-    if (!this.borderRect.width) return
-    const {
-      scale,
-      control: { borderWidth, borderColor }
-    } = this.options
-    const { x, y, width, height } = this.borderRect
-    ctx.save()
-    ctx.translate(0, 1 * scale)
-    ctx.lineWidth = borderWidth * scale
-    ctx.strokeStyle = borderColor
-    ctx.beginPath()
-    ctx.rect(x, y, width, height)
-    ctx.stroke()
-    ctx.restore()
-    this.clearBorderInfo()
-  }
-}