editor-svg 1.0.0

package/src/editor/core/event/handlers/keydown/backspace.ts

@@ -0,0 +1,161 @@
+import { ZERO } from '../../../../dataset/constant/Common'
+import { CanvasEvent } from '../../CanvasEvent'
+
+// 删除光标前隐藏元素
+function backspaceHideElement(host: CanvasEvent) {
+  const draw = host.getDraw()
+  const rangeManager = draw.getRange()
+  const range = rangeManager.getRange()
+  // 光标所在位置为隐藏元素时触发循环删除
+  const elementList = draw.getElementList()
+  const element = elementList[range.startIndex]
+  if (!element.hide && !element.control?.hide && !element.area?.hide) return
+  // 向前删除所有隐藏元素
+  let index = range.startIndex
+  while (index > 0) {
+    const element = elementList[index]
+    let newIndex: number | null = null
+    if (element.controlId) {
+      newIndex = draw.getControl().removeControl(index)
+      if (newIndex !== null) {
+        index = newIndex
+      }
+    } else {
+      draw.spliceElementList(elementList, index, 1)
+      newIndex = index - 1
+      index--
+    }
+    const newElement = elementList[newIndex!]
+    if (
+      !newElement ||
+      (!newElement.hide && !newElement.control?.hide && !newElement.area?.hide)
+    ) {
+      // 更新上下文信息
+      if (newIndex) {
+        // 更新选区信息
+        range.startIndex = newIndex
+        range.endIndex = newIndex
+        rangeManager.replaceRange(range)
+        // 更新位置信息
+        const position = draw.getPosition()
+        const positionList = position.getPositionList()
+        position.setCursorPosition(positionList[newIndex])
+      }
+      break
+    }
+  }
+}
+
+export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
+  const draw = host.getDraw()
+  if (draw.isReadonly()) return
+  // 可输入性验证
+  const rangeManager = draw.getRange()
+  if (!rangeManager.getIsCanInput()) return
+  // 隐藏元素删除
+  if (rangeManager.getIsCollapsed()) {
+    backspaceHideElement(host)
+  }
+  // 删除操作
+  const control = draw.getControl()
+  const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange()
+  let curIndex: number | null
+  if (isCrossRowCol) {
+    // 表格跨行列选中时清空单元格内容
+    const rowCol = draw.getTableParticle().getRangeRowCol()
+    if (!rowCol) return
+    let isDeleted = false
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r]
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c]
+        if (col.value.length > 1) {
+          draw.spliceElementList(col.value, 1, col.value.length - 1)
+          isDeleted = true
+        }
+      }
+    }
+    // 删除成功后定位
+    curIndex = isDeleted ? 0 : null
+  } else if (
+    control.getActiveControl() &&
+    control.getIsRangeCanCaptureEvent()
+  ) {
+    // 光标在控件内
+    curIndex = control.keydown(evt)
+    if (curIndex) {
+      control.emitControlContentChange()
+    }
+  } else {
+    // 普通元素删除
+    const cursorPosition = draw.getPosition().getCursorPosition()
+    if (!cursorPosition) return
+    const { index } = cursorPosition
+    const isCollapsed = rangeManager.getIsCollapsed()
+    const elementList = draw.getElementList()
+    // 判断是否允许删除
+    if (isCollapsed && index === 0) {
+      const firstElement = elementList[index]
+      if (firstElement.value === ZERO) {
+        // 取消首字符列表设置
+        if (firstElement.listId) {
+          draw.getListParticle().unsetList()
+        }
+        evt.preventDefault()
+        return
+      }
+    }
+    //  替换当前行对齐方式
+    const startElement = elementList[startIndex]
+    if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
+      const rowFlexElementList = rangeManager.getRangeRowElementList()
+      if (rowFlexElementList) {
+        const preElement = elementList[startIndex - 1]
+        rowFlexElementList.forEach(element => {
+          element.rowFlex = preElement?.rowFlex
+        })
+      }
+    }
+    // 如果在标题中删除内容，恢复titleId
+    const preElement =
+      startElement.value === ZERO ? elementList[startIndex - 1] : startElement
+    const nextElement = elementList[endIndex + 1]
+    if (
+      preElement?.titleId &&
+      nextElement?.titleId &&
+      preElement.level === nextElement.level &&
+      preElement.titleId !== nextElement.titleId
+    ) {
+      const preTitleId = preElement.titleId
+      const nextTitleId = nextElement.titleId
+      // 循环处理后面的元素修改为前面标题的titleId
+      let nextIndex = endIndex + 1
+      while (
+        nextIndex < elementList.length &&
+        elementList[nextIndex]?.titleId === nextTitleId
+      ) {
+        elementList[nextIndex].titleId = preTitleId
+        nextIndex++
+      }
+    }
+    if (!isCollapsed) {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex)
+    } else {
+      draw.spliceElementList(elementList, index, 1)
+    }
+    curIndex = isCollapsed ? index - 1 : startIndex
+  }
+  draw.getGlobalEvent().setCanvasEventAbility()
+  if (curIndex === null) {
+    rangeManager.setRange(startIndex, startIndex)
+    draw.render({
+      curIndex: startIndex,
+      isSubmitHistory: false
+    })
+  } else {
+    rangeManager.setRange(curIndex, curIndex)
+    draw.render({
+      curIndex
+    })
+  }
+}

package/src/editor/core/event/handlers/keydown/delete.ts

@@ -0,0 +1,119 @@
+import { CanvasEvent } from '../../CanvasEvent'
+
+// 删除光后前隐藏元素
+function deleteHideElement(host: CanvasEvent) {
+  const draw = host.getDraw()
+  const rangeManager = draw.getRange()
+  const range = rangeManager.getRange()
+  // 光标所在位置为隐藏元素时触发循环删除
+  const elementList = draw.getElementList()
+  const nextElement = elementList[range.startIndex + 1]
+  if (
+    !nextElement.hide &&
+    !nextElement.control?.hide &&
+    !nextElement.area?.hide
+  ) {
+    return
+  }
+  // 向后删除所有隐藏元素
+  const index = range.startIndex + 1
+  while (index < elementList.length) {
+    const element = elementList[index]
+    let newIndex: number | null = null
+    if (element.controlId) {
+      newIndex = draw.getControl().removeControl(index)
+    } else {
+      draw.spliceElementList(elementList, index, 1)
+      newIndex = index
+    }
+    const newElement = elementList[newIndex!]
+    if (
+      !newElement ||
+      (!newElement.hide && !newElement.control?.hide && !newElement.area?.hide)
+    ) {
+      break
+    }
+  }
+}
+
+export function del(evt: KeyboardEvent, host: CanvasEvent) {
+  const draw = host.getDraw()
+  if (draw.isReadonly()) return
+  // 可输入性验证
+  const rangeManager = draw.getRange()
+  if (!rangeManager.getIsCanInput()) return
+  const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange()
+  // 隐藏控件删除
+  const elementList = draw.getElementList()
+  const control = draw.getControl()
+  if (rangeManager.getIsCollapsed()) {
+    deleteHideElement(host)
+  }
+  // 删除操作
+  let curIndex: number | null
+  if (isCrossRowCol) {
+    // 表格跨行列选中时清空单元格内容
+    const rowCol = draw.getTableParticle().getRangeRowCol()
+    if (!rowCol) return
+    let isDeleted = false
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r]
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c]
+        if (col.value.length > 1) {
+          draw.spliceElementList(col.value, 1, col.value.length - 1)
+          isDeleted = true
+        }
+      }
+    }
+    // 删除成功后定位
+    curIndex = isDeleted ? 0 : null
+  } else if (control.getActiveControl() && control.getIsRangeWithinControl()) {
+    // 光标在控件内
+    curIndex = control.keydown(evt)
+    if (curIndex) {
+      control.emitControlContentChange()
+    }
+  } else if (elementList[endIndex + 1]?.controlId) {
+    // 光标在控件前
+    curIndex = control.removeControl(endIndex + 1)
+  } else {
+    // 普通元素
+    const position = draw.getPosition()
+    const cursorPosition = position.getCursorPosition()
+    if (!cursorPosition) return
+    const { index } = cursorPosition
+    // 命中图片直接删除
+    const positionContext = position.getPositionContext()
+    if (positionContext.isDirectHit && positionContext.isImage) {
+      draw.spliceElementList(elementList, index, 1)
+      curIndex = index - 1
+    } else {
+      const isCollapsed = rangeManager.getIsCollapsed()
+      if (!isCollapsed) {
+        draw.spliceElementList(
+          elementList,
+          startIndex + 1,
+          endIndex - startIndex
+        )
+      } else {
+        if (!elementList[index + 1]) return
+        draw.spliceElementList(elementList, index + 1, 1)
+      }
+      curIndex = isCollapsed ? index : startIndex
+    }
+  }
+  draw.getGlobalEvent().setCanvasEventAbility()
+  if (curIndex === null) {
+    rangeManager.setRange(startIndex, startIndex)
+    draw.render({
+      curIndex: startIndex,
+      isSubmitHistory: false
+    })
+  } else {
+    rangeManager.setRange(curIndex, curIndex)
+    draw.render({
+      curIndex
+    })
+  }
+}

package/src/editor/core/event/handlers/keydown/end.ts

@@ -0,0 +1,69 @@
+import { CanvasEvent } from '../../CanvasEvent'
+
+export function end(evt: KeyboardEvent, host: CanvasEvent) {
+  const draw = host.getDraw()
+  if (draw.isReadonly()) return
+
+  const position = draw.getPosition()
+  const cursorPosition = position.getCursorPosition()
+  if (!cursorPosition) return
+
+  const rangeManager = draw.getRange()
+  const { startIndex, endIndex } = rangeManager.getRange()
+  const positionList = position.getPositionList()
+
+  // Determine which side is active (same as updown)
+  let anchorPosition = cursorPosition
+
+  if (evt.shiftKey && startIndex !== endIndex) {
+    if (startIndex === cursorPosition.index) {
+      anchorPosition = positionList[endIndex]
+    } else {
+      anchorPosition = positionList[startIndex]
+    }
+  }
+
+  const { rowNo } = anchorPosition
+
+  // Find the end of the line based on the active side
+  let lineEndIndex = anchorPosition.index
+  for (let i = anchorPosition.index + 1; i < positionList.length; i++) {
+    if (positionList[i].rowNo !== rowNo) break
+    lineEndIndex = i
+  }
+
+  let anchorStart = lineEndIndex
+  let anchorEnd = lineEndIndex
+
+  if (evt.shiftKey) {
+    if (startIndex !== endIndex) {
+      if (startIndex === cursorPosition.index) {
+        anchorStart = startIndex
+        anchorEnd = lineEndIndex
+      } else {
+        anchorStart = lineEndIndex
+        anchorEnd = endIndex
+      }
+    } else {
+      anchorStart = startIndex
+      anchorEnd = lineEndIndex
+    }
+  }
+
+  if (anchorStart > anchorEnd) {
+    [anchorStart, anchorEnd] = [anchorEnd, anchorStart]
+  }
+
+  rangeManager.setRange(anchorStart, anchorEnd)
+
+  const isCollapsed = anchorStart === anchorEnd
+
+  draw.render({
+    curIndex: isCollapsed ? anchorStart : undefined,
+    isSetCursor: isCollapsed,
+    isSubmitHistory: false,
+    isCompute: false
+  })
+
+  evt.preventDefault()
+}

package/src/editor/core/event/handlers/keydown/enter.ts

@@ -0,0 +1,126 @@
+import { ZERO } from '../../../../dataset/constant/Common'
+import {
+  AREA_CONTEXT_ATTR,
+  EDITOR_ELEMENT_STYLE_ATTR,
+  EDITOR_ROW_ATTR
+} from '../../../../dataset/constant/Element'
+import { ControlComponent } from '../../../../dataset/enum/Control'
+import { IElement } from '../../../../interface/Element'
+import { getUUID, omitObject } from '../../../../utils'
+import { formatElementContext } from '../../../../utils/element'
+import { CanvasEvent } from '../../CanvasEvent'
+
+export function enter(evt: KeyboardEvent, host: CanvasEvent) {
+  const draw = host.getDraw()
+  if (draw.isReadonly()) return
+  const rangeManager = draw.getRange()
+  if (!rangeManager.getIsCanInput()) return
+  const { startIndex, endIndex } = rangeManager.getRange()
+  const isCollapsed = rangeManager.getIsCollapsed()
+  const elementList = draw.getElementList()
+  const startElement = elementList[startIndex]
+  const endElement = elementList[endIndex]
+  // 最后一个列表项行首回车取消列表设置
+  if (
+    isCollapsed &&
+    endElement.listId &&
+    endElement.value === ZERO &&
+    elementList[endIndex + 1]?.listId !== endElement.listId
+  ) {
+    draw.getListParticle().unsetList()
+    return
+  }
+  // 列表块内换行
+  let enterText: IElement = {
+    value: ZERO
+  }
+  if (evt.shiftKey && startElement.listId) {
+    enterText.listWrap = true
+  }
+  // 格式化上下文
+  formatElementContext(elementList, [enterText], startIndex, {
+    isBreakWhenWrap: true,
+    editorOptions: draw.getOptions()
+  })
+  // shift长按 && 最后位置回车无需复制区域上下文
+  if (
+    evt.shiftKey &&
+    endElement.areaId &&
+    endElement.areaId !== elementList[endIndex + 1]?.areaId
+  ) {
+    enterText = omitObject(enterText, AREA_CONTEXT_ATTR)
+  }
+  // 标题开始 && 标题结尾处回车 => 无需格式化及样式复制
+  if (
+    !(
+      elementList[startIndex + 1]?.titleId &&
+      (!startElement.titleId ||
+        startElement.titleId !== elementList[startIndex + 1]?.titleId)
+    ) &&
+    !(
+      endElement.titleId &&
+      endElement.titleId !== elementList[endIndex + 1]?.titleId
+    )
+  ) {
+    // 复制样式属性
+    const copyElement = rangeManager.getRangeAnchorStyle(elementList, endIndex)
+    if (copyElement) {
+      const copyAttr = [...EDITOR_ROW_ATTR]
+      // 不复制控件后缀样式
+      if (copyElement.controlComponent !== ControlComponent.POSTFIX) {
+        copyAttr.push(...EDITOR_ELEMENT_STYLE_ATTR)
+      }
+      copyAttr.forEach(attr => {
+        const value = copyElement[attr] as never
+        if (value !== undefined) {
+          enterText[attr] = value
+        }
+      })
+    }
+  }
+  // 控件或文档插入换行元素
+  const control = draw.getControl()
+  const activeControl = control.getActiveControl()
+  let curIndex: number
+  if (activeControl && control.getIsRangeWithinControl()) {
+    curIndex = control.setValue([enterText])
+    control.emitControlContentChange()
+  } else {
+    const position = draw.getPosition()
+    const cursorPosition = position.getCursorPosition()
+    if (!cursorPosition) return
+    const { index } = cursorPosition
+    if (isCollapsed) {
+      draw.spliceElementList(elementList, index + 1, 0, [enterText])
+      // 如果在标题中间回车，为换行后的元素生成新的titleId
+      if (
+        endElement.titleId &&
+        elementList[index + 2]?.titleId === endElement.titleId
+      ) {
+        const newTitleId = getUUID()
+        // 循环处理换行符后面的标题元素
+        let nextIndex = index + 2
+        while (
+          nextIndex < elementList.length &&
+          elementList[nextIndex]?.titleId === endElement.titleId
+        ) {
+          elementList[nextIndex].titleId = newTitleId
+          nextIndex++
+        }
+      }
+    } else {
+      draw.spliceElementList(
+        elementList,
+        startIndex + 1,
+        endIndex - startIndex,
+        [enterText]
+      )
+    }
+    curIndex = index + 1
+  }
+  if (~curIndex) {
+    rangeManager.setRange(curIndex, curIndex)
+    draw.render({ curIndex })
+  }
+  evt.preventDefault()
+}

package/src/editor/core/event/handlers/keydown/home.ts

@@ -0,0 +1,69 @@
+import { CanvasEvent } from '../../CanvasEvent'
+
+export function home(evt: KeyboardEvent, host: CanvasEvent) {
+  const draw = host.getDraw()
+  if (draw.isReadonly()) return
+
+  const position = draw.getPosition()
+  const cursorPosition = position.getCursorPosition()
+  if (!cursorPosition) return
+
+  const rangeManager = draw.getRange()
+  const { startIndex, endIndex } = rangeManager.getRange()
+  const positionList = position.getPositionList()
+
+  // Determine which side is active (same as updown)
+  let anchorPosition = cursorPosition
+
+  if (evt.shiftKey && startIndex !== endIndex) {
+    if (startIndex === cursorPosition.index) {
+      anchorPosition = positionList[endIndex]
+    } else {
+      anchorPosition = positionList[startIndex]
+    }
+  }
+
+  const { rowNo } = anchorPosition
+
+  // Find the start of the line based on the active side
+  let lineStartIndex = anchorPosition.index
+  for (let i = anchorPosition.index - 1; i >= 0; i--) {
+    if (positionList[i].rowNo !== rowNo) break
+    lineStartIndex = i
+  }
+
+  let anchorStart = lineStartIndex
+  let anchorEnd = lineStartIndex
+
+  if (evt.shiftKey) {
+    if (startIndex !== endIndex) {
+      if (startIndex === cursorPosition.index) {
+        anchorStart = startIndex
+        anchorEnd = lineStartIndex
+      } else {
+        anchorStart = lineStartIndex
+        anchorEnd = endIndex
+      }
+    } else {
+      anchorStart = lineStartIndex
+      anchorEnd = startIndex
+    }
+  }
+
+  if (anchorStart > anchorEnd) {
+    [anchorStart, anchorEnd] = [anchorEnd, anchorStart]
+  }
+
+  rangeManager.setRange(anchorStart, anchorEnd)
+
+  const isCollapsed = anchorStart === anchorEnd
+
+  draw.render({
+    curIndex: isCollapsed ? anchorStart : undefined,
+    isSetCursor: isCollapsed,
+    isSubmitHistory: false,
+    isCompute: false
+  })
+
+  evt.preventDefault()
+}

package/src/editor/core/event/handlers/keydown/index.ts

@@ -0,0 +1,85 @@
+import { EditorMode, EditorZone } from '../../../../dataset/enum/Editor'
+import { KeyMap } from '../../../../dataset/enum/KeyMap'
+import { isMod } from '../../../../utils/hotkey'
+import { CanvasEvent } from '../../CanvasEvent'
+import { backspace } from './backspace'
+import { del } from './delete'
+import { enter } from './enter'
+import { left } from './left'
+import { right } from './right'
+import { tab } from './tab'
+import { updown } from './updown'
+import { home } from './home'
+import { end } from './end'
+
+export function keydown(evt: KeyboardEvent, host: CanvasEvent) {
+  if (host.isComposing) return
+  const draw = host.getDraw()
+  // 键盘事件逻辑分发
+  if (evt.key === KeyMap.Backspace) {
+    backspace(evt, host)
+  } else if (evt.key === KeyMap.Delete) {
+    del(evt, host)
+  } else if (evt.key === KeyMap.Enter) {
+    enter(evt, host)
+  } else if (evt.key === KeyMap.Left) {
+    // Mac: Cmd+Left = Home
+    if (isMod(evt)) {
+      home(evt, host)
+    } else {
+      left(evt, host)
+    }
+  } else if (evt.key === KeyMap.Right) {
+    // Mac: Cmd+Right = End
+    if (isMod(evt)) {
+      end(evt, host)
+    } else {
+      right(evt, host)
+    }
+  } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
+    updown(evt, host)
+  } else if (evt.key === KeyMap.Home) {
+    home(evt, host)
+  } else if (evt.key === KeyMap.End) {
+    end(evt, host)
+  } else if (isMod(evt) && evt.key.toLocaleLowerCase() === KeyMap.Z) {
+    if (draw.isReadonly() && draw.getMode() !== EditorMode.FORM) return
+    draw.getHistoryManager().undo()
+    evt.preventDefault()
+  } else if (isMod(evt) && evt.key.toLocaleLowerCase() === KeyMap.Y) {
+    if (draw.isReadonly() && draw.getMode() !== EditorMode.FORM) return
+    draw.getHistoryManager().redo()
+    evt.preventDefault()
+  } else if (isMod(evt) && evt.key.toLocaleLowerCase() === KeyMap.C) {
+    host.copy()
+    evt.preventDefault()
+  } else if (isMod(evt) && evt.key.toLocaleLowerCase() === KeyMap.X) {
+    host.cut()
+    evt.preventDefault()
+  } else if (isMod(evt) && evt.key.toLocaleLowerCase() === KeyMap.A) {
+    host.selectAll()
+    evt.preventDefault()
+  } else if (isMod(evt) && evt.key.toLocaleLowerCase() === KeyMap.S) {
+    if (draw.isReadonly()) return
+    const listener = draw.getListener()
+    if (listener.saved) {
+      listener.saved(draw.getValue())
+    }
+    const eventBus = draw.getEventBus()
+    if (eventBus.isSubscribe('saved')) {
+      eventBus.emit('saved', draw.getValue())
+    }
+    evt.preventDefault()
+  } else if (evt.key === KeyMap.ESC) {
+    // 退出格式刷
+    host.clearPainterStyle()
+    // 退出页眉页脚编辑
+    const zoneManager = draw.getZone()
+    if (!zoneManager.isMainActive()) {
+      zoneManager.setZone(EditorZone.MAIN)
+    }
+    evt.preventDefault()
+  } else if (evt.key === KeyMap.TAB) {
+    tab(evt, host)
+  }
+}