editor-svg 1.0.2 → 1.0.3

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

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