editor-svg 1.0.0

package/src/editor/core/draw/graffiti/Graffiti.ts

@@ -0,0 +1,125 @@
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { IGraffitiData, IGraffitiStroke } from '../../../interface/Graffiti'
+import { Draw } from '../Draw'
+
+export class Graffiti {
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+  private data: IGraffitiData[]
+  private pageContainer: HTMLDivElement
+  private isDrawing = false
+  private startStroke: IGraffitiStroke | null = null
+
+  constructor(draw: Draw, data?: IGraffitiData[]) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.data = data || []
+    this.pageContainer = draw.getPageContainer()
+    this.register()
+  }
+
+  private register() {
+    this.pageContainer.addEventListener('mousedown', this.start.bind(this))
+    this.pageContainer.addEventListener('mouseup', this.stop.bind(this))
+    this.pageContainer.addEventListener('mouseleave', this.stop.bind(this))
+    this.pageContainer.addEventListener('mousemove', this.drawing.bind(this))
+  }
+
+  private start(evt: MouseEvent) {
+    if (!this.draw.isGraffitiMode()) return
+    this.isDrawing = true
+    // 缓存起始数据
+    const { scale } = this.options
+    this.startStroke = {
+      lineColor: this.options.graffiti.defaultLineColor,
+      lineWidth: this.options.graffiti.defaultLineWidth,
+      points: [evt.offsetX / scale, evt.offsetY / scale]
+    }
+  }
+
+  private stop() {
+    this.isDrawing = false
+  }
+
+  private drawing(evt: MouseEvent) {
+    if (!this.isDrawing || !this.draw.isGraffitiMode()) return
+    // 移动超过至少2个像素后开始绘制
+    const { offsetX, offsetY } = evt
+    const DISTANCE = 2
+    if (
+      this.startStroke &&
+      Math.abs(this.startStroke.points[0] - offsetX) < DISTANCE &&
+      Math.abs(this.startStroke.points[1] - offsetY) < DISTANCE
+    ) {
+      return
+    }
+    // 修改数据
+    const pageNo = this.draw.getPageNo()
+    let currentValue = this.data.find(item => item.pageNo === pageNo)
+    if (this.startStroke) {
+      if (!currentValue) {
+        currentValue = {
+          pageNo,
+          strokes: []
+        }
+        this.data.push(currentValue)
+      }
+      currentValue.strokes.push(this.startStroke)
+      // 清空起始数据
+      this.startStroke = null
+    }
+    if (!currentValue?.strokes?.length) return
+    const { scale } = this.options
+    const lastPoints =
+      currentValue.strokes[currentValue.strokes.length - 1].points
+    lastPoints.push(offsetX / scale, offsetY / scale)
+    // 重新渲染
+    this.draw.render({
+      isCompute: false,
+      isSetCursor: false,
+      isSubmitHistory: false
+    })
+  }
+
+  public getValue(): IGraffitiData[] {
+    return this.data
+  }
+
+  // 页面减少时清空对应页面涂鸦信息
+  public compute() {
+    const pageSize = this.draw.getPageRowList().length
+    for (let d = this.data.length - 1; d >= 0; d--) {
+      const pageNo = this.data[d].pageNo
+      if (pageNo > pageSize - 1) {
+        this.data.splice(d, 1)
+      }
+    }
+  }
+
+  public clear() {
+    this.data = []
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    const strokes = this.data.find(item => item.pageNo === pageNo)?.strokes
+    if (!strokes?.length) return
+    const {
+      graffiti: { defaultLineColor, defaultLineWidth },
+      scale
+    } = this.options
+    ctx.save()
+    for (let s = 0; s < strokes.length; s++) {
+      const stroke = strokes[s]
+      ctx.beginPath()
+      ctx.strokeStyle = stroke.lineColor || defaultLineColor
+      ctx.lineWidth = (stroke.lineWidth || defaultLineWidth) * scale
+      ctx.moveTo(stroke.points[0] * scale, stroke.points[1] * scale)
+      for (let p = 2; p < stroke.points.length; p += 2) {
+        ctx.lineTo(stroke.points[p] * scale, stroke.points[p + 1] * scale)
+      }
+      ctx.stroke()
+    }
+    ctx.restore()
+  }
+}

package/src/editor/core/draw/interactive/Area.ts

@@ -0,0 +1,312 @@
+import { Draw } from '../Draw'
+import { deepClone, getUUID, isNonValue } from '../../../utils'
+import { ElementType } from '../../../dataset/enum/Element'
+import {
+  IArea,
+  IAreaInfo,
+  IGetAreaValueOption,
+  IGetAreaValueResult,
+  IInsertAreaOption,
+  ILocationAreaOption,
+  ISetAreaPropertiesOption,
+  ISetAreaValueOption
+} from '../../../interface/Area'
+import { EditorZone } from '../../../dataset/enum/Editor'
+import { LocationPosition } from '../../../dataset/enum/Common'
+import { RangeManager } from '../../range/RangeManager'
+import { Zone } from '../../zone/Zone'
+import { Position } from '../../position/Position'
+import { formatElementList, zipElementList } from '../../../utils/element'
+import { AreaMode } from '../../../dataset/enum/Area'
+import { IRange } from '../../../interface/Range'
+import { IElementPosition } from '../../../interface/Element'
+import { Placeholder } from '../frame/Placeholder'
+import { defaultPlaceholderOption } from '../../../dataset/constant/Placeholder'
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+
+export class Area {
+  private draw: Draw
+  private zone: Zone
+  private range: RangeManager
+  private position: Position
+  private options: DeepRequired<IEditorOption>
+  private areaInfoMap = new Map<string, IAreaInfo>()
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.zone = draw.getZone()
+    this.range = draw.getRange()
+    this.position = draw.getPosition()
+  }
+
+  public getAreaInfo(): Map<string, IAreaInfo> {
+    return this.areaInfoMap
+  }
+
+  public getActiveAreaId(): string | null {
+    if (!this.areaInfoMap.size) return null
+    const { startIndex } = this.range.getRange()
+    const elementList = this.draw.getElementList()
+    const element = elementList[startIndex]
+    return element?.areaId || null
+  }
+
+  public getActiveAreaInfo(): IAreaInfo | null {
+    const activeAreaId = this.getActiveAreaId()
+    if (!activeAreaId) return null
+    return this.areaInfoMap.get(activeAreaId) || null
+  }
+
+  public isReadonly() {
+    const activeAreaInfo = this.getActiveAreaInfo()
+    if (!activeAreaInfo?.area) return false
+    switch (activeAreaInfo.area.mode) {
+      case AreaMode.EDIT:
+        return false
+      case AreaMode.READONLY:
+        return true
+      case AreaMode.FORM:
+        return !this.draw.getControl().getIsRangeWithinControl()
+      default:
+        return false
+    }
+  }
+
+  public insertArea(payload: IInsertAreaOption): string | null {
+    const { id, value, area, position, range } = payload
+    // 切换至正文
+    if (this.zone.getZone() !== EditorZone.MAIN) {
+      this.zone.setZone(EditorZone.MAIN)
+    }
+    // 跳出表格
+    this.draw.getPosition().setPositionContext({
+      isTable: false
+    })
+    // 通过光标插入area && 不能在area内再次插入area
+    if (range && !this.getActiveAreaId()) {
+      const { startIndex, endIndex } = range
+      // 校验位置合法性
+      const elementList = this.draw.getOriginalMainElementList()
+      if (!elementList[startIndex] || !elementList[endIndex]) {
+        return null
+      }
+      this.range.setRange(range.startIndex, range.endIndex)
+    } else {
+      // 设置插入位置
+      if (position === LocationPosition.BEFORE) {
+        this.range.setRange(0, 0)
+      } else {
+        const elementList = this.draw.getOriginalMainElementList()
+        const lastIndex = elementList.length - 1
+        this.range.setRange(lastIndex, lastIndex)
+      }
+    }
+    const areaId = id || getUUID()
+    this.draw.insertElementList([
+      {
+        type: ElementType.AREA,
+        value: '',
+        areaId,
+        valueList: value,
+        area: deepClone(area)
+      }
+    ])
+    return areaId
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    if (!this.areaInfoMap.size) return
+    ctx.save()
+    const margins = this.draw.getMargins()
+    const width = this.draw.getInnerWidth()
+
+    for (const areaInfoItem of this.areaInfoMap) {
+      const { area, positionList } = areaInfoItem[1]
+      if (
+        area?.hide ||
+        (!area?.backgroundColor && !area?.borderColor && !area?.placeholder)
+      ) {
+        continue
+      }
+      const pagePositionList = positionList.filter(p => p.pageNo === pageNo)
+      if (!pagePositionList.length) continue
+      ctx.translate(0.5, 0.5)
+      const firstPosition = pagePositionList[0]
+      const lastPosition = pagePositionList[pagePositionList.length - 1]
+      // 起始位置
+      const x = margins[3]
+      const y = Math.ceil(firstPosition.coordinate.leftTop[1])
+      const height = Math.ceil(lastPosition.coordinate.rightBottom[1] - y)
+      // 背景色
+      if (area.backgroundColor) {
+        ctx.fillStyle = area.backgroundColor
+      }
+      // 边框
+      if (area.borderColor || area.borderWidth) {
+        ctx.strokeStyle = area.borderColor || 'black'
+        ctx.lineWidth = area.borderWidth || 1
+        ctx.setLineDash([3, 2])
+        ctx.strokeRect(x, y, width, height)
+      }
+
+      // 提示词
+      if (area.placeholder && positionList.length <= 1) {
+        const placeholder = new Placeholder(this.draw)
+        placeholder.render(ctx, {
+          placeholder: {
+            ...defaultPlaceholderOption,
+            ...area.placeholder
+          },
+          startY: firstPosition.coordinate.leftTop[1]
+        })
+      }
+      ctx.translate(-0.5, -0.5)
+    }
+    ctx.restore()
+  }
+
+  public compute() {
+    this.areaInfoMap.clear()
+    const elementList = this.draw.getOriginalMainElementList()
+    const positionList = this.position.getOriginalMainPositionList()
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e]
+      const areaId = element.areaId
+      if (areaId) {
+        const areaInfo = this.areaInfoMap.get(areaId)
+        if (!areaInfo) {
+          this.areaInfoMap.set(areaId, {
+            id: areaId,
+            area: element.area!,
+            elementList: [element],
+            positionList: [positionList[e]]
+          })
+        } else {
+          areaInfo.elementList.push(element)
+          areaInfo.positionList.push(positionList[e])
+        }
+      }
+    }
+  }
+
+  public getAreaValue(
+    options: IGetAreaValueOption = {}
+  ): IGetAreaValueResult | null {
+    const areaId = options.id || this.getActiveAreaId()
+    if (!areaId) return null
+    const areaInfo = this.areaInfoMap.get(areaId)
+    if (!areaInfo) return null
+    return {
+      area: areaInfo.area,
+      id: areaInfo.id,
+      startPageNo: areaInfo.positionList[0].pageNo,
+      endPageNo: areaInfo.positionList[areaInfo.positionList.length - 1].pageNo,
+      value: zipElementList(areaInfo.elementList)
+    }
+  }
+
+  public getContextByAreaId(
+    areaId: string,
+    options?: ILocationAreaOption
+  ): { range: IRange; elementPosition: IElementPosition } | null {
+    const elementList = this.draw.getOriginalMainElementList()
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e]
+      if (options?.position === LocationPosition.OUTER_BEFORE) {
+        // 区域外面最前
+        if (elementList[e + 1]?.areaId !== areaId) continue
+      } else if (options?.position === LocationPosition.AFTER) {
+        // 区域内部最后
+        if (
+          !(element.areaId === areaId && elementList[e + 1]?.areaId !== areaId)
+        ) {
+          continue
+        }
+      } else if (options?.position === LocationPosition.OUTER_AFTER) {
+        // 区域外部最后
+        if (
+          !(element.areaId !== areaId && elementList[e - 1]?.areaId === areaId)
+        ) {
+          continue
+        }
+      } else {
+        // 区域内部最前
+        if (element.areaId !== areaId) continue
+      }
+      const positionList = this.position.getOriginalMainPositionList()
+      return {
+        range: {
+          startIndex: e,
+          endIndex: e
+        },
+        elementPosition: positionList[e]
+      }
+    }
+    return null
+  }
+
+  public setAreaProperties(payload: ISetAreaPropertiesOption) {
+    const areaId = payload.id || this.getActiveAreaId()
+    if (!areaId) return
+    const areaInfo = this.areaInfoMap.get(areaId)
+    if (!areaInfo) return
+    if (!areaInfo.area) {
+      areaInfo.area = {}
+    }
+    // 需要计算的属性
+    let isCompute = false
+    const computeProps: Array<keyof IArea> = ['top', 'hide']
+    // 循环设置
+    Object.entries(payload.properties).forEach(([key, value]) => {
+      if (isNonValue(value)) return
+      const propKey = key as keyof IArea
+      areaInfo.area[propKey] = value
+      if (computeProps.includes(propKey)) {
+        isCompute = true
+      }
+    })
+    this.draw.render({
+      isCompute,
+      isSetCursor: false
+    })
+  }
+
+  public setAreaValue(payload: ISetAreaValueOption) {
+    const areaId = payload.id || this.getActiveAreaId()
+    if (!areaId) return
+    const areaInfo = this.areaInfoMap.get(areaId)
+    if (!areaInfo) return
+    // 删除旧数据并替换新的格式化数据
+    const { positionList } = areaInfo
+    const elementList = this.draw.getOriginalMainElementList()
+    const valueList = payload.value
+    formatElementList(
+      [
+        {
+          type: ElementType.AREA,
+          value: '',
+          valueList,
+          areaId: areaInfo.id,
+          area: areaInfo.area
+        }
+      ],
+      {
+        editorOptions: this.options
+      }
+    )
+    this.draw.spliceElementList(
+      elementList,
+      positionList[0].index,
+      positionList.length,
+      valueList,
+      {
+        isIgnoreDeletedRule: true
+      }
+    )
+    this.draw.render({
+      isSetCursor: false
+    })
+  }
+}

package/src/editor/core/draw/interactive/Group.ts

@@ -0,0 +1,198 @@
+import { EditorZone } from '../../../dataset/enum/Editor'
+import { ElementType } from '../../../dataset/enum/Element'
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { IElement, IElementFillRect } from '../../../interface/Element'
+import { IPositionContext } from '../../../interface/Position'
+import { IRange } from '../../../interface/Range'
+import { getUUID } from '../../../utils'
+import { RangeManager } from '../../range/RangeManager'
+import { Draw } from '../Draw'
+
+export class Group {
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+  private range: RangeManager
+  private fillRectMap: Map<string, IElementFillRect>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.range = draw.getRange()
+    this.fillRectMap = new Map()
+  }
+
+  public setGroup(): string | null {
+    if (
+      this.draw.isReadonly() ||
+      this.draw.getZone().getZone() !== EditorZone.MAIN
+    ) {
+      return null
+    }
+    const selection = this.range.getSelection()
+    if (!selection) return null
+    const groupId = getUUID()
+    selection.forEach(el => {
+      if (!Array.isArray(el.groupIds)) {
+        el.groupIds = []
+      }
+      el.groupIds.push(groupId)
+    })
+    this.draw.render({
+      isSetCursor: false,
+      isCompute: false
+    })
+    return groupId
+  }
+
+  public getElementListByGroupId(
+    elementList: IElement[],
+    groupId: string
+  ): IElement[] {
+    const groupElementList: IElement[] = []
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e]
+      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 tdGroupElementList = this.getElementListByGroupId(
+              td.value,
+              groupId
+            )
+            if (tdGroupElementList.length) {
+              groupElementList.push(...tdGroupElementList)
+              return groupElementList
+            }
+          }
+        }
+      }
+      if (element?.groupIds?.includes(groupId)) {
+        groupElementList.push(element)
+        const nextElement = elementList[e + 1]
+        if (!nextElement?.groupIds?.includes(groupId)) break
+      }
+    }
+    return groupElementList
+  }
+
+  public deleteGroup(groupId: string) {
+    if (this.draw.isReadonly()) return
+    // 仅主体内容可以成组
+    const elementList = this.draw.getOriginalMainElementList()
+    const groupElementList = this.getElementListByGroupId(elementList, groupId)
+    if (!groupElementList.length) return
+    for (let e = 0; e < groupElementList.length; e++) {
+      const element = groupElementList[e]
+      const groupIds = element.groupIds!
+      const groupIndex = groupIds.findIndex(id => id === groupId)
+      groupIds.splice(groupIndex, 1)
+      // 不包含成组时删除字段，减少存储及内存占用
+      if (!groupIds.length) {
+        delete element.groupIds
+      }
+    }
+    this.draw.render({
+      isSetCursor: false,
+      isCompute: false
+    })
+  }
+
+  public getContextByGroupId(
+    elementList: IElement[],
+    groupId: string
+  ): (IRange & IPositionContext) | null {
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e]
+      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 range = this.getContextByGroupId(td.value, groupId)
+            if (range) {
+              return {
+                ...range,
+                isTable: true,
+                index: e,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id,
+                trId: tr.id,
+                tableId: element.tableId
+              }
+            }
+          }
+        }
+      }
+      const nextElement = elementList[e + 1]
+      if (
+        element.groupIds?.includes(groupId) &&
+        !nextElement?.groupIds?.includes(groupId)
+      ) {
+        return {
+          isTable: false,
+          startIndex: e,
+          endIndex: e
+        }
+      }
+    }
+    return null
+  }
+
+  public clearFillInfo() {
+    this.fillRectMap.clear()
+  }
+
+  public recordFillInfo(
+    element: IElement,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) {
+    const groupIds = element.groupIds
+    if (!groupIds) return
+    for (const groupId of groupIds) {
+      const fillRect = this.fillRectMap.get(groupId)
+      if (!fillRect) {
+        this.fillRectMap.set(groupId, {
+          x,
+          y,
+          width,
+          height
+        })
+      } else {
+        fillRect.width += width
+      }
+    }
+  }
+
+  public render(ctx: CanvasRenderingContext2D) {
+    if (!this.fillRectMap.size) return
+    // 当前激活组信息
+    const range = this.range.getRange()
+    const elementList = this.draw.getElementList()
+    const anchorGroupIds = elementList[range.endIndex]?.groupIds
+    const {
+      group: { backgroundColor, opacity, activeOpacity, activeBackgroundColor }
+    } = this.options
+    ctx.save()
+    this.fillRectMap.forEach((fillRect, groupId) => {
+      const { x, y, width, height } = fillRect
+      if (anchorGroupIds?.includes(groupId)) {
+        ctx.globalAlpha = activeOpacity
+        ctx.fillStyle = activeBackgroundColor
+      } else {
+        ctx.globalAlpha = opacity
+        ctx.fillStyle = backgroundColor
+      }
+      ctx.fillRect(x, y, width, height)
+    })
+    ctx.restore()
+    this.clearFillInfo()
+  }
+}