editor-svg 1.0.0

package/src/editor/core/draw/control/checkbox/CheckboxControl.ts

@@ -0,0 +1,154 @@
+import { ControlComponent } from '../../../../dataset/enum/Control'
+import { KeyMap } from '../../../../dataset/enum/KeyMap'
+import {
+  IControlContext,
+  IControlInstance,
+  IControlRuleOption
+} from '../../../../interface/Control'
+import { IElement } from '../../../../interface/Element'
+import { Control } from '../Control'
+
+export class CheckboxControl implements IControlInstance {
+  protected element: IElement
+  protected control: Control
+
+  constructor(element: IElement, control: Control) {
+    this.element = element
+    this.control = control
+  }
+
+  public setElement(element: IElement) {
+    this.element = element
+  }
+
+  public getElement(): IElement {
+    return this.element
+  }
+
+  public getCode(): string | null {
+    return this.element.control?.code || null
+  }
+
+  public getValue(): IElement[] {
+    const elementList = this.control.getElementList()
+    const { startIndex } = this.control.getRange()
+    const startElement = elementList[startIndex]
+    const data: IElement[] = []
+    // 向左查找
+    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.VALUE) {
+        data.unshift(preElement)
+      }
+      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.VALUE) {
+        data.push(nextElement)
+      }
+      nextIndex++
+    }
+    return data
+  }
+
+  public setValue(): number {
+    return -1
+  }
+
+  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.CHECKBOX) {
+        const checkbox = preElement.checkbox!
+        checkbox.value = codes.includes(checkbox.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.CHECKBOX) {
+        const checkbox = nextElement.checkbox!
+        checkbox.value = codes.includes(checkbox.code!)
+      }
+      nextIndex++
+    }
+    control!.code = codes.join(',')
+    this.control.repaintControl({
+      curIndex: startIndex,
+      isSetCursor: false
+    })
+    this.control.emitControlContentChange({
+      context
+    })
+  }
+
+  public keydown(evt: KeyboardEvent): number | null {
+    if (this.control.getIsDisabledControl()) {
+      return null
+    }
+    const range = this.control.getRange()
+    // 收缩边界到Value内
+    this.control.shrinkBoundary()
+    const { startIndex, endIndex } = range
+    // 删除
+    if (evt.key === KeyMap.Backspace || evt.key === KeyMap.Delete) {
+      return this.control.removeControl(startIndex)
+    }
+    return endIndex
+  }
+
+  public cut(): number {
+    return -1
+  }
+}

package/src/editor/core/draw/control/date/DateControl.ts

@@ -0,0 +1,363 @@
+import {
+  CONTROL_STYLE_ATTR,
+  EDITOR_ELEMENT_STYLE_ATTR,
+  TEXTLIKE_ELEMENT_TYPE
+} from '../../../../dataset/constant/Element'
+import { ControlComponent } from '../../../../dataset/enum/Control'
+import { ElementType } from '../../../../dataset/enum/Element'
+import { KeyMap } from '../../../../dataset/enum/KeyMap'
+import { DeepRequired } from '../../../../interface/Common'
+import {
+  IControlContext,
+  IControlInstance,
+  IControlRuleOption
+} from '../../../../interface/Control'
+import { IEditorOption } from '../../../../interface/Editor'
+import { IElement } from '../../../../interface/Element'
+import { omitObject, pickObject } from '../../../../utils'
+import { formatElementContext } from '../../../../utils/element'
+import { Draw } from '../../Draw'
+import { DatePicker } from '../../particle/date/DatePicker'
+import { Control } from '../Control'
+
+export class DateControl implements IControlInstance {
+  private draw: Draw
+  private element: IElement
+  private control: Control
+  private isPopup: boolean
+  private datePicker: DatePicker | null
+  private options: DeepRequired<IEditorOption>
+
+  constructor(element: IElement, control: Control) {
+    const draw = control.getDraw()
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.element = element
+    this.control = control
+    this.isPopup = false
+    this.datePicker = null
+  }
+
+  public setElement(element: IElement) {
+    this.element = element
+  }
+
+  public getElement(): IElement {
+    return this.element
+  }
+
+  public getIsPopup(): boolean {
+    return this.isPopup
+  }
+
+  public getValue(context: IControlContext = {}): IElement[] {
+    const elementList = context.elementList || this.control.getElementList()
+    const range = this.control.getValueRange(context)
+    if (!range) return []
+    const data: IElement[] = []
+    const { startIndex, endIndex } = range
+    for (let i = startIndex; i <= endIndex; i++) {
+      const element = elementList[i]
+      if (element.controlComponent === ControlComponent.VALUE) {
+        data.push(element)
+      }
+    }
+    return data
+  }
+
+  public setValue(
+    data: IElement[],
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    // 校验是否可以设置
+    if (
+      !options.isIgnoreDisabledRule &&
+      this.control.getIsDisabledControl(context)
+    ) {
+      return -1
+    }
+    const elementList = context.elementList || this.control.getElementList()
+    const range = context.range || this.control.getRange()
+    // 收缩边界到Value内
+    this.control.shrinkBoundary(context)
+    const { startIndex, endIndex } = range
+    const draw = this.control.getDraw()
+    // 移除选区元素
+    if (startIndex !== endIndex) {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex)
+    } else {
+      // 移除空白占位符
+      this.control.removePlaceholder(startIndex, context)
+    }
+    // 非文本类元素或前缀过渡掉样式属性
+    const startElement = elementList[startIndex]
+    const anchorElement =
+      (startElement.type &&
+        !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type)) ||
+      startElement.controlComponent === ControlComponent.PREFIX ||
+      startElement.controlComponent === ControlComponent.PRE_TEXT
+        ? pickObject(startElement, [
+            'control',
+            'controlId',
+            ...CONTROL_STYLE_ATTR
+          ])
+        : omitObject(startElement, ['type'])
+    // 插入起始位置
+    const start = range.startIndex + 1
+    for (let i = 0; i < data.length; i++) {
+      const newElement: IElement = {
+        ...anchorElement,
+        ...data[i],
+        controlComponent: ControlComponent.VALUE
+      }
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      })
+      draw.spliceElementList(elementList, start + i, 0, [newElement])
+    }
+    return start + data.length - 1
+  }
+
+  public clearSelect(
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    const { isIgnoreDisabledRule = false, isAddPlaceholder = true } = options
+    // 校验是否可以设置
+    if (!isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return -1
+    }
+    const range = this.control.getValueRange(context)
+    if (!range) return -1
+    const { startIndex, endIndex } = range
+    if (!~startIndex || !~endIndex) return -1
+    const elementList = context.elementList || this.control.getElementList()
+    // 删除元素
+    const draw = this.control.getDraw()
+    draw.spliceElementList(
+      elementList,
+      startIndex + 1,
+      endIndex - startIndex,
+      [],
+      {
+        isIgnoreDeletedRule: options.isIgnoreDeletedRule
+      }
+    )
+    // 增加占位符
+    if (isAddPlaceholder) {
+      this.control.addPlaceholder(startIndex, context)
+    }
+    return startIndex
+  }
+
+  public setSelect(
+    date: string,
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ) {
+    // 校验是否可以设置
+    if (
+      !options.isIgnoreDisabledRule &&
+      this.control.getIsDisabledControl(context)
+    ) {
+      return
+    }
+    const elementList = context.elementList || this.control.getElementList()
+    const range = context.range || this.control.getRange()
+    // 样式赋值元素-默认值的第一个字符样式，否则取默认样式
+    const valueElement = this.getValue(context)[0]
+    const styleElement = valueElement
+      ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR)
+      : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR)
+    // 清空选项
+    const prefixIndex = this.clearSelect(context, {
+      isAddPlaceholder: false,
+      isIgnoreDeletedRule: options.isIgnoreDeletedRule
+    })
+    if (!~prefixIndex) return
+    // 属性赋值元素-默认为前缀属性
+    const propertyElement = omitObject(
+      elementList[prefixIndex],
+      EDITOR_ELEMENT_STYLE_ATTR
+    )
+    const start = prefixIndex + 1
+    const draw = this.control.getDraw()
+    for (let i = 0; i < date.length; i++) {
+      const newElement: IElement = {
+        ...styleElement,
+        ...propertyElement,
+        type: ElementType.TEXT,
+        value: date[i],
+        controlComponent: ControlComponent.VALUE
+      }
+      formatElementContext(elementList, [newElement], prefixIndex, {
+        editorOptions: this.options
+      })
+      draw.spliceElementList(elementList, start + i, 0, [newElement])
+    }
+    // 重新渲染控件
+    if (!context.range) {
+      const newIndex = start + date.length - 1
+      this.control.repaintControl({
+        curIndex: newIndex
+      })
+      this.control.emitControlContentChange({
+        context
+      })
+      this.destroy()
+    }
+  }
+
+  public keydown(evt: KeyboardEvent): number | null {
+    if (this.control.getIsDisabledControl()) {
+      return null
+    }
+    const elementList = this.control.getElementList()
+    const range = this.control.getRange()
+    // 收缩边界到Value内
+    this.control.shrinkBoundary()
+    const { startIndex, endIndex } = range
+    const startElement = elementList[startIndex]
+    const endElement = elementList[endIndex]
+    const draw = this.control.getDraw()
+    // backspace
+    if (evt.key === KeyMap.Backspace) {
+      // 移除选区元素
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(
+          elementList,
+          startIndex + 1,
+          endIndex - startIndex
+        )
+        const value = this.getValue()
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex)
+        }
+        return startIndex
+      } else {
+        if (
+          startElement.controlComponent === ControlComponent.PREFIX ||
+          startElement.controlComponent === ControlComponent.PRE_TEXT ||
+          endElement.controlComponent === ControlComponent.POSTFIX ||
+          endElement.controlComponent === ControlComponent.POST_TEXT ||
+          startElement.controlComponent === ControlComponent.PLACEHOLDER
+        ) {
+          // 前缀、后缀、占位符
+          return this.control.removeControl(startIndex)
+        } else {
+          // 文本
+          draw.spliceElementList(elementList, startIndex, 1)
+          const value = this.getValue()
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex - 1)
+          }
+          return startIndex - 1
+        }
+      }
+    } else if (evt.key === KeyMap.Delete) {
+      // 移除选区元素
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(
+          elementList,
+          startIndex + 1,
+          endIndex - startIndex
+        )
+        const value = this.getValue()
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex)
+        }
+        return startIndex
+      } else {
+        const endNextElement = elementList[endIndex + 1]
+        if (
+          ((startElement.controlComponent === ControlComponent.PREFIX ||
+            startElement.controlComponent === ControlComponent.PRE_TEXT) &&
+            endNextElement.controlComponent === ControlComponent.PLACEHOLDER) ||
+          endNextElement.controlComponent === ControlComponent.POSTFIX ||
+          endNextElement.controlComponent === ControlComponent.POST_TEXT ||
+          startElement.controlComponent === ControlComponent.PLACEHOLDER
+        ) {
+          // 前缀、后缀、占位符
+          return this.control.removeControl(startIndex)
+        } else {
+          // 文本
+          draw.spliceElementList(elementList, startIndex + 1, 1)
+          const value = this.getValue()
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex)
+          }
+          return startIndex
+        }
+      }
+    }
+    return endIndex
+  }
+
+  public cut(): number {
+    if (this.control.getIsDisabledControl()) {
+      return -1
+    }
+    this.control.shrinkBoundary()
+    const { startIndex, endIndex } = this.control.getRange()
+    if (startIndex === endIndex) {
+      return startIndex
+    }
+    const draw = this.control.getDraw()
+    const elementList = this.control.getElementList()
+    draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex)
+    const value = this.getValue()
+    if (!value.length) {
+      this.control.addPlaceholder(startIndex)
+    }
+    return startIndex
+  }
+
+  public awake() {
+    if (
+      this.isPopup ||
+      this.control.getIsDisabledControl() ||
+      !this.control.getIsRangeWithinControl()
+    ) {
+      return
+    }
+    const position = this.control.getPosition()
+    if (!position) return
+    const elementList = this.draw.getElementList()
+    const { startIndex } = this.control.getRange()
+    if (elementList[startIndex + 1]?.controlId !== this.element.controlId) {
+      return
+    }
+    // 渲染日期控件
+    this.datePicker = new DatePicker(this.draw, {
+      onSubmit: this._setDate.bind(this)
+    })
+    const value =
+      this.getValue()
+        .map(el => el.value)
+        .join('') || ''
+    const dateFormat = this.element.control?.dateFormat
+    this.datePicker.render({
+      value,
+      position,
+      dateFormat
+    })
+    // 弹窗状态
+    this.isPopup = true
+  }
+
+  public destroy() {
+    if (!this.isPopup) return
+    this.datePicker?.destroy()
+    this.isPopup = false
+  }
+
+  private _setDate(date: string) {
+    if (!date) {
+      this.clearSelect()
+    } else {
+      this.setSelect(date)
+    }
+    this.destroy()
+  }
+}