editor-svg 1.0.2 → 1.0.3

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

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

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

@@ -1,198 +0,0 @@
-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()
-  }
-}