editor-svg 1.0.0

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

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

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

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

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

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