editor-svg 1.0.0

package/src/editor/core/draw/control/select/SelectControl.ts

@@ -0,0 +1,567 @@
+import {
+  EDITOR_COMPONENT,
+  EDITOR_PREFIX
+} from '../../../../dataset/constant/Editor'
+import {
+  CONTROL_STYLE_ATTR,
+  EDITOR_ELEMENT_STYLE_ATTR,
+  TEXTLIKE_ELEMENT_TYPE
+} from '../../../../dataset/constant/Element'
+import { ControlComponent } from '../../../../dataset/enum/Control'
+import { EditorComponent } from '../../../../dataset/enum/Editor'
+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 {
+  isArrayEqual,
+  isNonValue,
+  omitObject,
+  pickObject,
+  scrollIntoView,
+  splitText
+} from '../../../../utils'
+import { formatElementContext } from '../../../../utils/element'
+import { Draw } from '../../Draw'
+import { Control } from '../Control'
+
+export class SelectControl implements IControlInstance {
+  private draw: Draw
+  private element: IElement
+  private control: Control
+  private isPopup: boolean
+  private selectDom: HTMLDivElement | null
+  private options: DeepRequired<IEditorOption>
+  private VALUE_DELIMITER = ','
+  private DEFAULT_MULTI_SELECT_DELIMITER = ','
+
+  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.selectDom = null
+  }
+
+  public setElement(element: IElement) {
+    this.element = element
+  }
+
+  public getElement(): IElement {
+    return this.element
+  }
+
+  public getIsPopup(): boolean {
+    return this.isPopup
+  }
+
+  public getCodes(): string[] {
+    return this.element?.control?.code
+      ? this.element.control.code.split(',')
+      : []
+  }
+
+  public getText(codes: string[]): string | null {
+    if (!this.element?.control) return null
+    const control = this.element.control
+    if (!control.valueSets?.length) return null
+    const multiSelectDelimiter =
+      control?.multiSelectDelimiter || this.DEFAULT_MULTI_SELECT_DELIMITER
+    const valueSets = control.valueSets
+    const valueList: string[] = []
+    codes.forEach(code => {
+      const valueSet = valueSets.find(v => v.code === code)
+      if (valueSet && !isNonValue(valueSet.value)) {
+        valueList.push(valueSet.value)
+      }
+    })
+    return valueList.join(multiSelectDelimiter) || null
+  }
+
+  public getValue(context: IControlContext = {}): IElement[] {
+    const elementList = context.elementList || this.control.getElementList()
+    const { startIndex } = context.range || 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(
+    data: IElement[],
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    // 校验是否可以设置
+    if (
+      !this.element.control?.selectExclusiveOptions?.inputAble ||
+      (!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 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]
+    // backspace
+    const inputAble = this.element.control?.selectExclusiveOptions?.inputAble
+    if (evt.key === KeyMap.Backspace) {
+      // 清空选项
+      if (startIndex !== endIndex) {
+        // 设置可输入时：仅删除选择元素
+        if (inputAble) {
+          this.draw.spliceElementList(
+            elementList,
+            startIndex + 1,
+            endIndex - startIndex
+          )
+          const value = this.getValue()
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex)
+          }
+          return startIndex
+        }
+        return this.clearSelect()
+      } 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 {
+          // 设置可输入时：仅往前删除元素
+          if (inputAble) {
+            this.draw.spliceElementList(elementList, startIndex, 1)
+            const value = this.getValue()
+            if (!value.length) {
+              this.control.addPlaceholder(startIndex - 1)
+            }
+            return startIndex - 1
+          }
+          // 清空选项
+          return this.clearSelect()
+        }
+      }
+    } else if (evt.key === KeyMap.Delete) {
+      // 移除选区元素
+      if (startIndex !== endIndex) {
+        // 删除元素
+        if (inputAble) {
+          this.draw.spliceElementList(
+            elementList,
+            startIndex + 1,
+            endIndex - startIndex
+          )
+          const value = this.getValue()
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex)
+          }
+          return startIndex
+        }
+        // 清空选项
+        return this.clearSelect()
+      } 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 {
+          // 删除元素
+          if (inputAble) {
+            this.draw.spliceElementList(elementList, startIndex + 1, 1)
+            const value = this.getValue()
+            if (!value.length) {
+              this.control.addPlaceholder(startIndex)
+            }
+            return startIndex
+          }
+          // 清空选项
+          return this.clearSelect()
+        }
+      }
+    }
+    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
+    }
+    // 清空选项
+    return this.clearSelect()
+  }
+
+  public clearSelect(
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    const { isIgnoreDisabledRule = false, isAddPlaceholder = true } = options
+    // 校验是否可以设置
+    if (!isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return -1
+    }
+    const elementList = context.elementList || this.control.getElementList()
+    const { startIndex } = context.range || this.control.getRange()
+    const startElement = elementList[startIndex]
+    let leftIndex = -1
+    let rightIndex = -1
+    // 向左查找
+    let preIndex = startIndex
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex]
+      if (
+        preElement.controlId !== startElement.controlId ||
+        preElement.controlComponent === ControlComponent.PREFIX ||
+        preElement.controlComponent === ControlComponent.PRE_TEXT
+      ) {
+        leftIndex = preIndex
+        break
+      }
+      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
+      ) {
+        rightIndex = nextIndex - 1
+        break
+      }
+      nextIndex++
+    }
+    if (!~leftIndex || !~rightIndex) return -1
+    // 删除元素
+    const draw = this.control.getDraw()
+    draw.spliceElementList(
+      elementList,
+      leftIndex + 1,
+      rightIndex - leftIndex,
+      [],
+      {
+        isIgnoreDeletedRule: options.isIgnoreDeletedRule
+      }
+    )
+    // 增加占位符
+    if (isAddPlaceholder) {
+      this.control.addPlaceholder(preIndex, context)
+    }
+    this.control.setControlProperties(
+      {
+        code: null
+      },
+      {
+        elementList,
+        range: { startIndex: preIndex, endIndex: preIndex }
+      }
+    )
+    return preIndex
+  }
+
+  public setSelect(
+    code: 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 control = this.element.control!
+    const newCodes = code?.split(this.VALUE_DELIMITER) || []
+    // 缓存旧值
+    const oldCode = control.code
+    const oldCodes = control.code?.split(this.VALUE_DELIMITER) || []
+    // 选项相同时无需重复渲染
+    const isMultiSelect = control.isMultiSelect
+    if (
+      (!isMultiSelect && code === oldCode) ||
+      (isMultiSelect && isArrayEqual(oldCodes, newCodes))
+    ) {
+      this.control.repaintControl({
+        curIndex: range.startIndex,
+        isCompute: false,
+        isSubmitHistory: false
+      })
+      this.destroy()
+      return
+    }
+    const valueSets = control.valueSets
+    if (!Array.isArray(valueSets) || !valueSets.length) return
+    // 转换文本
+    const text = this.getText(newCodes)
+    if (!text) {
+      // 之前存在内容时清空文本
+      if (oldCode) {
+        const prefixIndex = this.clearSelect(context, {
+          isIgnoreDeletedRule: options.isIgnoreDeletedRule
+        })
+        if (~prefixIndex) {
+          this.control.repaintControl({
+            curIndex: prefixIndex
+          })
+          this.control.emitControlContentChange({
+            controlValue: []
+          })
+        }
+      }
+      return
+    }
+    // 样式赋值元素-默认值的第一个字符样式，否则取默认样式
+    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
+    // 当前无值时清空占位符
+    if (!oldCode) {
+      this.control.removePlaceholder(prefixIndex, context)
+    }
+    // 属性赋值元素-默认为前缀属性
+    const propertyElement = omitObject(
+      elementList[prefixIndex],
+      EDITOR_ELEMENT_STYLE_ATTR
+    )
+    const start = prefixIndex + 1
+    const data = splitText(text)
+    const draw = this.control.getDraw()
+    for (let i = 0; i < data.length; i++) {
+      const newElement: IElement = {
+        ...styleElement,
+        ...propertyElement,
+        type: ElementType.TEXT,
+        value: data[i],
+        controlComponent: ControlComponent.VALUE
+      }
+      formatElementContext(elementList, [newElement], prefixIndex, {
+        editorOptions: this.options
+      })
+      draw.spliceElementList(elementList, start + i, 0, [newElement])
+    }
+    // 设置状态
+    this.control.setControlProperties(
+      {
+        code
+      },
+      {
+        elementList,
+        range: { startIndex: prefixIndex, endIndex: prefixIndex }
+      }
+    )
+    // 重新渲染控件
+    if (!context.range) {
+      const newIndex = start + data.length - 1
+      this.control.repaintControl({
+        curIndex: newIndex
+      })
+      this.control.emitControlContentChange({
+        context
+      })
+      if (!isMultiSelect) {
+        this.destroy()
+      }
+    }
+  }
+
+  private _createSelectPopupDom() {
+    const control = this.element.control!
+    const valueSets = control.valueSets
+    if (!Array.isArray(valueSets) || !valueSets.length) return
+    const position = this.control.getPosition()
+    if (!position) return
+    // dom树：<div><ul><li>item</li></ul></div>
+    const selectPopupContainer = document.createElement('div')
+    selectPopupContainer.classList.add(`${EDITOR_PREFIX}-select-control-popup`)
+    selectPopupContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.POPUP)
+    const ul = document.createElement('ul')
+    let activeSelectDom: HTMLLIElement | null = null
+    for (let v = 0; v < valueSets.length; v++) {
+      const valueSet = valueSets[v]
+      const li = document.createElement('li')
+      let codes = this.getCodes()
+      if (codes.includes(valueSet.code)) {
+        li.classList.add('active')
+        activeSelectDom = li
+      }
+      li.onclick = () => {
+        const codeIndex = codes.findIndex(code => code === valueSet.code)
+        if (control.isMultiSelect) {
+          if (~codeIndex) {
+            codes.splice(codeIndex, 1)
+          } else {
+            codes.push(valueSet.code)
+          }
+        } else {
+          if (~codeIndex) {
+            codes = []
+          } else {
+            codes = [valueSet.code]
+          }
+        }
+        this.setSelect(codes.join(this.VALUE_DELIMITER))
+      }
+      li.append(document.createTextNode(valueSet.value))
+      ul.append(li)
+    }
+    selectPopupContainer.append(ul)
+    // 定位
+    const {
+      coordinate: {
+        leftTop: [left, top]
+      },
+      lineHeight
+    } = position
+    const preY = this.control.getPreY()
+    selectPopupContainer.style.left = `${left}px`
+    selectPopupContainer.style.top = `${top + preY + lineHeight}px`
+    // 追加至container
+    const container = this.control.getContainer()
+    container.append(selectPopupContainer)
+    this.selectDom = selectPopupContainer
+    // 将激活项跳转到可视视野范围内
+    if (activeSelectDom) {
+      scrollIntoView(selectPopupContainer, activeSelectDom)
+    }
+  }
+
+  public awake() {
+    if (
+      this.isPopup ||
+      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._createSelectPopupDom()
+    this.isPopup = true
+  }
+
+  public destroy() {
+    if (!this.isPopup) return
+    this.selectDom?.remove()
+    this.isPopup = false
+  }
+}