editor-svg 1.0.0

package/src/editor/core/history/HistoryManager.ts

@@ -0,0 +1,61 @@
+import { Draw } from '../draw/Draw'
+
+export class HistoryManager {
+  private undoStack: Array<Function> = []
+  private redoStack: Array<Function> = []
+  private maxRecordCount: number
+
+  constructor(draw: Draw) {
+    // 忽略第一次历史记录
+    this.maxRecordCount = draw.getOptions().historyMaxRecordCount + 1
+  }
+
+  public undo() {
+    if (this.undoStack.length > 1) {
+      const pop = this.undoStack.pop()!
+      this.redoStack.push(pop)
+      if (this.undoStack.length) {
+        this.undoStack[this.undoStack.length - 1]()
+      }
+    }
+  }
+
+  public redo() {
+    if (this.redoStack.length) {
+      const pop = this.redoStack.pop()!
+      this.undoStack.push(pop)
+      pop()
+    }
+  }
+
+  public execute(fn: Function) {
+    this.undoStack.push(fn)
+    if (this.redoStack.length) {
+      this.redoStack = []
+    }
+    while (this.undoStack.length > this.maxRecordCount) {
+      this.undoStack.shift()
+    }
+  }
+
+  public isCanUndo(): boolean {
+    return this.undoStack.length > 1
+  }
+
+  public isCanRedo(): boolean {
+    return !!this.redoStack.length
+  }
+
+  public isStackEmpty(): boolean {
+    return !this.undoStack.length && !this.redoStack.length
+  }
+
+  public recovery() {
+    this.undoStack = []
+    this.redoStack = []
+  }
+
+  public popUndo() {
+    return this.undoStack.pop()
+  }
+}

package/src/editor/core/i18n/I18n.ts

@@ -0,0 +1,51 @@
+import { ILang } from '../../interface/i18n/I18n'
+import zhCN from './lang/zh-CN.json'
+import en from './lang/en.json'
+import { mergeObject } from '../../utils'
+import { DeepPartial } from '../../interface/Common'
+
+export class I18n {
+  private currentLocale: string
+
+  private langMap: Map<string, ILang> = new Map([
+    ['zhCN', zhCN],
+    ['en', en]
+  ])
+
+  constructor(locale: string) {
+    this.currentLocale = locale
+  }
+
+  public registerLangMap(locale: string, lang: DeepPartial<ILang>) {
+    const sourceLang = this.langMap.get(locale)
+    this.langMap.set(locale, <ILang>mergeObject(sourceLang || zhCN, lang))
+  }
+
+  public getLocale(): string {
+    return this.currentLocale
+  }
+
+  public setLocale(locale: string) {
+    this.currentLocale = locale
+  }
+
+  public getLang(): ILang {
+    return this.langMap.get(this.currentLocale) || zhCN
+  }
+
+  public t(path: string): string {
+    const keyList = path.split('.')
+    let value = ''
+    let item = this.getLang()
+    for (let k = 0; k < keyList.length; k++) {
+      const key = keyList[k]
+      const currentValue = Reflect.get(item, key)
+      if (currentValue) {
+        value = item = currentValue
+      } else {
+        return ''
+      }
+    }
+    return value
+  }
+}

package/src/editor/core/i18n/lang/en.json

@@ -0,0 +1,92 @@
+{
+  "contextmenu": {
+    "global": {
+      "cut": "Cut",
+      "copy": "Copy",
+      "paste": "Paste",
+      "selectAll": "Select all",
+      "print": "Print"
+    },
+    "control": {
+      "delete": "Delete control"
+    },
+    "hyperlink": {
+      "delete": "Delete hyperlink",
+      "cancel": "Cancel hyperlink",
+      "edit": "Edit hyperlink"
+    },
+    "image": {
+      "change": "Change image",
+      "saveAs": "Save as image",
+      "textWrap": "Text wrap",
+      "textWrapType": {
+        "embed": "Embed",
+        "upDown": "Up down",
+        "surround": "Surround",
+        "floatTop": "Float above text",
+        "floatBottom": "Float below text"
+      }
+    },
+    "table": {
+      "insertRowCol": "Insert row col",
+      "insertTopRow": "Insert top 1 row",
+      "insertBottomRow": "Insert bottom 1 row",
+      "insertLeftCol": "Insert left 1 col",
+      "insertRightCol": "Insert right 1 col",
+      "deleteRowCol": "Delete row col",
+      "deleteRow": "Delete 1 row",
+      "deleteCol": "Delete 1 col",
+      "deleteTable": "Delete table",
+      "mergeCell": "Merge cell",
+      "mergeCancelCell": "Cancel merge cell",
+      "verticalAlign": "Vertical align",
+      "verticalAlignTop": "Top",
+      "verticalAlignMiddle": "Middle",
+      "verticalAlignBottom": "Bottom",
+      "border": "Table border",
+      "borderAll": "All",
+      "borderEmpty": "Empty",
+      "borderDash": "Dash",
+      "borderExternal": "External",
+      "borderInternal": "Internal",
+      "borderTd": "Table cell border",
+      "borderTdTop": "Top",
+      "borderTdRight": "Right",
+      "borderTdBottom": "Bottom",
+      "borderTdLeft": "Left",
+      "borderTdForward": "Forward",
+      "borderTdBack": "Back"
+    }
+  },
+  "datePicker": {
+    "now": "Now",
+    "confirm": "Confirm",
+    "return": "Return",
+    "timeSelect": "Time select",
+    "weeks": {
+      "sun": "Sun",
+      "mon": "Mon",
+      "tue": "Tue",
+      "wed": "Wed",
+      "thu": "Thu",
+      "fri": "Fri",
+      "sat": "Sat"
+    },
+    "year": " ",
+    "month": " ",
+    "hour": "Hour",
+    "minute": "Minute",
+    "second": "Second"
+  },
+  "frame": {
+    "header": "Header",
+    "footer": "Footer"
+  },
+  "pageBreak": {
+    "displayName": "Page Break"
+  },
+  "zone": {
+    "headerTip": "Double click to edit header",
+    "footerTip": "Double click to edit footer"
+  }
+}

package/src/editor/core/i18n/lang/zh-CN.json

@@ -0,0 +1,92 @@
+{
+  "contextmenu": {
+    "global": {
+      "cut": "剪切",
+      "copy": "复制",
+      "paste": "粘贴",
+      "selectAll": "全选",
+      "print": "打印"
+    },
+    "control": {
+      "delete": "删除控件"
+    },
+    "hyperlink": {
+      "delete": "删除链接",
+      "cancel": "取消链接",
+      "edit": "编辑链接"
+    },
+    "image": {
+      "change": "更改图片",
+      "saveAs": "另存为图片",
+      "textWrap": "文字环绕",
+      "textWrapType": {
+        "embed": "嵌入型",
+        "upDown": "上下型环绕",
+        "surround": "四周型环绕",
+        "floatTop": "浮于文字上方",
+        "floatBottom": "衬于文字下方"
+      }
+    },
+    "table": {
+      "insertRowCol": "插入行列",
+      "insertTopRow": "上方插入1行",
+      "insertBottomRow": "下方插入1行",
+      "insertLeftCol": "左侧插入1列",
+      "insertRightCol": "右侧插入1列",
+      "deleteRowCol": "删除行列",
+      "deleteRow": "删除1行",
+      "deleteCol": "删除1列",
+      "deleteTable": "删除整个表格",
+      "mergeCell": "合并单元格",
+      "mergeCancelCell": "取消合并",
+      "verticalAlign": "垂直对齐",
+      "verticalAlignTop": "顶端对齐",
+      "verticalAlignMiddle": "垂直居中",
+      "verticalAlignBottom": "底端对齐",
+      "border": "表格边框",
+      "borderAll": "所有框线",
+      "borderEmpty": "无框线",
+      "borderDash": "虚框线",
+      "borderExternal": "外侧框线",
+      "borderInternal": "内侧框线",
+      "borderTd": "单元格边框",
+      "borderTdTop": "上边框",
+      "borderTdRight": "右边框",
+      "borderTdBottom": "下边框",
+      "borderTdLeft": "左边框",
+      "borderTdForward": "正斜线",
+      "borderTdBack": "反斜线"
+    }
+  },
+  "datePicker": {
+    "now": "此刻",
+    "confirm": "确定",
+    "return": "返回日期",
+    "timeSelect": "时间选择",
+    "weeks": {
+      "sun": "日",
+      "mon": "一",
+      "tue": "二",
+      "wed": "三",
+      "thu": "四",
+      "fri": "五",
+      "sat": "六"
+    },
+    "year": "年",
+    "month": "月",
+    "hour": "时",
+    "minute": "分",
+    "second": "秒"
+  },
+  "frame": {
+    "header": "页眉",
+    "footer": "页脚"
+  },
+  "pageBreak": {
+    "displayName": "分页符"
+  },
+  "zone": {
+    "headerTip": "双击编辑页眉",
+    "footerTip": "双击编辑页脚"
+  }
+}

package/src/editor/core/listener/Listener.ts

@@ -0,0 +1,41 @@
+import {
+  IContentChange,
+  IControlChange,
+  IControlContentChange,
+  IIntersectionPageNoChange,
+  IPageModeChange,
+  IPageScaleChange,
+  IPageSizeChange,
+  IRangeStyleChange,
+  ISaved,
+  IVisiblePageNoListChange,
+  IZoneChange
+} from '../../interface/Listener'
+
+export class Listener {
+  public rangeStyleChange: IRangeStyleChange | null
+  public visiblePageNoListChange: IVisiblePageNoListChange | null
+  public intersectionPageNoChange: IIntersectionPageNoChange | null
+  public pageSizeChange: IPageSizeChange | null
+  public pageScaleChange: IPageScaleChange | null
+  public saved: ISaved | null
+  public contentChange: IContentChange | null
+  public controlChange: IControlChange | null
+  public controlContentChange: IControlContentChange | null
+  public pageModeChange: IPageModeChange | null
+  public zoneChange: IZoneChange | null
+
+  constructor() {
+    this.rangeStyleChange = null
+    this.visiblePageNoListChange = null
+    this.intersectionPageNoChange = null
+    this.pageSizeChange = null
+    this.pageScaleChange = null
+    this.saved = null
+    this.contentChange = null
+    this.controlChange = null
+    this.controlContentChange = null
+    this.pageModeChange = null
+    this.zoneChange = null
+  }
+}

package/src/editor/core/observer/ImageObserver.ts

@@ -0,0 +1,19 @@
+export class ImageObserver {
+  private promiseList: Promise<unknown>[]
+
+  constructor() {
+    this.promiseList = []
+  }
+
+  public add(payload: Promise<unknown>) {
+    this.promiseList.push(payload)
+  }
+
+  public clearAll() {
+    this.promiseList = []
+  }
+
+  public allSettled() {
+    return Promise.allSettled(this.promiseList)
+  }
+}

package/src/editor/core/observer/MouseObserver.ts

@@ -0,0 +1,56 @@
+import { EventBusMap } from '../../interface/EventBus'
+import { Draw } from '../draw/Draw'
+import { EventBus } from '../event/eventbus/EventBus'
+
+export class MouseObserver {
+  private draw: Draw
+  private eventBus: EventBus<EventBusMap>
+  private pageContainer: HTMLDivElement
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.eventBus = this.draw.getEventBus()
+    this.pageContainer = this.draw.getPageContainer()
+    this.pageContainer.addEventListener('mousemove', this._mousemove.bind(this))
+    this.pageContainer.addEventListener(
+      'mouseenter',
+      this._mouseenter.bind(this)
+    )
+    this.pageContainer.addEventListener(
+      'mouseleave',
+      this._mouseleave.bind(this)
+    )
+    this.pageContainer.addEventListener('mousedown', this._mousedown.bind(this))
+    this.pageContainer.addEventListener('mouseup', this._mouseup.bind(this))
+    this.pageContainer.addEventListener('click', this._click.bind(this))
+  }
+
+  private _mousemove(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('mousemove')) return
+    this.eventBus.emit('mousemove', evt)
+  }
+
+  private _mouseenter(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('mouseenter')) return
+    this.eventBus.emit('mouseenter', evt)
+  }
+
+  private _mouseleave(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('mouseleave')) return
+    this.eventBus.emit('mouseleave', evt)
+  }
+
+  private _mousedown(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('mousedown')) return
+    this.eventBus.emit('mousedown', evt)
+  }
+
+  private _mouseup(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('mouseup')) return
+    this.eventBus.emit('mouseup', evt)
+  }
+
+  private _click(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('click')) return
+    this.eventBus.emit('click', evt)
+  }
+}

package/src/editor/core/observer/ScrollObserver.ts

@@ -0,0 +1,88 @@
+import { IEditorOption } from '../../interface/Editor'
+import { debounce } from '../../utils'
+import { Draw } from '../draw/Draw'
+
+export interface IElementVisibleInfo {
+  intersectionHeight: number
+}
+
+export interface IPageVisibleInfo {
+  intersectionPageNo: number
+  visiblePageNoList: number[]
+}
+
+export class ScrollObserver {
+  private draw: Draw
+  private options: Required<IEditorOption>
+  private scrollContainer: Element | Document
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.scrollContainer = this.getScrollContainer()
+    // 监听滚轮
+    setTimeout(() => {
+      if (!window.scrollY) {
+        this._observer()
+      }
+    })
+    this._addEvent()
+  }
+
+  public getScrollContainer(): Element | Document {
+    return this.options.scrollContainerSelector
+      ? document.querySelector(this.options.scrollContainerSelector) || document
+      : document
+  }
+
+  private _addEvent() {
+    this.scrollContainer.addEventListener('scroll', this._observer)
+  }
+
+  public removeEvent() {
+    this.scrollContainer.removeEventListener('scroll', this._observer)
+  }
+
+  public getElementVisibleInfo(element: Element): IElementVisibleInfo {
+    const rect = element.getBoundingClientRect()
+    const viewHeight =
+      this.scrollContainer === document
+        ? Math.max(document.documentElement.clientHeight, window.innerHeight)
+        : (<Element>this.scrollContainer).clientHeight
+    const visibleHeight =
+      Math.min(rect.bottom, viewHeight) - Math.max(rect.top, 0)
+    return {
+      intersectionHeight: visibleHeight > 0 ? visibleHeight : 0
+    }
+  }
+
+  public getPageVisibleInfo(): IPageVisibleInfo {
+    const pageList = this.draw.getPageList()
+    const visiblePageNoList: number[] = []
+    let intersectionPageNo = 0
+    let intersectionMaxHeight = 0
+    for (let i = 0; i < pageList.length; i++) {
+      const curPage = pageList[i]
+      const { intersectionHeight } = this.getElementVisibleInfo(curPage)
+      // 之前页存在交叉 && 当前页不交叉则后续均不交叉，结束循环
+      if (intersectionMaxHeight && !intersectionHeight) break
+      if (intersectionHeight) {
+        visiblePageNoList.push(i)
+      }
+      if (intersectionHeight > intersectionMaxHeight) {
+        intersectionMaxHeight = intersectionHeight
+        intersectionPageNo = i
+      }
+    }
+    return {
+      intersectionPageNo,
+      visiblePageNoList
+    }
+  }
+
+  private _observer = debounce(() => {
+    const { intersectionPageNo, visiblePageNoList } = this.getPageVisibleInfo()
+    this.draw.setIntersectionPageNo(intersectionPageNo)
+    this.draw.setVisiblePageNoList(visiblePageNoList)
+  }, 150)
+}

package/src/editor/core/observer/SelectionObserver.ts

@@ -0,0 +1,143 @@
+import { MoveDirection } from '../../dataset/enum/Observer'
+import { Draw } from '../draw/Draw'
+import { RangeManager } from '../range/RangeManager'
+
+export class SelectionObserver {
+  // 每次滚动长度
+  private readonly step: number = 5
+  // 触发滚动阀值
+  private readonly thresholdPoints: [
+    top: number,
+    down: number,
+    left: number,
+    right: number
+  ] = [70, 40, 10, 20]
+
+  private selectionContainer: Element | Document
+  private rangeManager: RangeManager
+  private requestAnimationFrameId: number | null
+  private isMousedown: boolean
+  private isMoving: boolean
+  private clientWidth: number
+  private clientHeight: number
+  private containerRect: DOMRect | null
+
+  constructor(draw: Draw) {
+    this.rangeManager = draw.getRange()
+    // 优先使用配置的滚动容器dom
+    const { scrollContainerSelector } = draw.getOptions()
+    this.selectionContainer = scrollContainerSelector
+      ? document.querySelector(scrollContainerSelector) || document
+      : document
+    this.requestAnimationFrameId = null
+    this.isMousedown = false
+    this.isMoving = false
+    // 缓存尺寸
+    this.clientWidth = 0
+    this.clientHeight = 0
+    this.containerRect = null
+    // 添加监听
+    this._addEvent()
+  }
+
+  private _addEvent() {
+    const container = <Document>this.selectionContainer
+    container.addEventListener('mousedown', this._mousedown)
+    container.addEventListener('mousemove', this._mousemove)
+    container.addEventListener('mouseup', this._mouseup)
+    document.addEventListener('mouseleave', this._mouseup)
+  }
+
+  public removeEvent() {
+    const container = <Document>this.selectionContainer
+    container.removeEventListener('mousedown', this._mousedown)
+    container.removeEventListener('mousemove', this._mousemove)
+    container.removeEventListener('mouseup', this._mouseup)
+    document.removeEventListener('mouseleave', this._mouseup)
+  }
+
+  private _mousedown = () => {
+    this.isMousedown = true
+    // 更新容器宽高
+    this.clientWidth =
+      this.selectionContainer instanceof Document
+        ? document.documentElement.clientWidth
+        : this.selectionContainer.clientWidth
+    this.clientHeight =
+      this.selectionContainer instanceof Document
+        ? document.documentElement.clientHeight
+        : this.selectionContainer.clientHeight
+    // 更新容器位置信息
+    if (!(this.selectionContainer instanceof Document)) {
+      const rect = this.selectionContainer.getBoundingClientRect()
+      this.containerRect = rect
+    }
+  }
+
+  private _mouseup = () => {
+    this.isMousedown = false
+    this._stopMove()
+  }
+
+  private _mousemove = (evt: MouseEvent) => {
+    if (!this.isMousedown || this.rangeManager.getIsCollapsed()) return
+    let { x, y } = evt
+    if (this.containerRect) {
+      x = x - this.containerRect.x
+      y = y - this.containerRect.y
+    }
+    if (y < this.thresholdPoints[0]) {
+      this._startMove(MoveDirection.UP)
+    } else if (this.clientHeight - y <= this.thresholdPoints[1]) {
+      this._startMove(MoveDirection.DOWN)
+    } else if (x < this.thresholdPoints[2]) {
+      this._startMove(MoveDirection.LEFT)
+    } else if (this.clientWidth - x < this.thresholdPoints[3]) {
+      this._startMove(MoveDirection.RIGHT)
+    } else {
+      this._stopMove()
+    }
+  }
+
+  private _move(direction: MoveDirection) {
+    // Document使用window
+    const container =
+      this.selectionContainer instanceof Document
+        ? window
+        : this.selectionContainer
+    const x =
+      this.selectionContainer instanceof Document
+        ? window.scrollX
+        : (<Element>container).scrollLeft
+    const y =
+      this.selectionContainer instanceof Document
+        ? window.scrollY
+        : (<Element>container).scrollTop
+    if (direction === MoveDirection.DOWN) {
+      container.scrollTo(x, y + this.step)
+    } else if (direction === MoveDirection.UP) {
+      container.scrollTo(x, y - this.step)
+    } else if (direction === MoveDirection.LEFT) {
+      container.scrollTo(x - this.step, y)
+    } else {
+      container.scrollTo(x + this.step, y)
+    }
+    this.requestAnimationFrameId = window.requestAnimationFrame(
+      this._move.bind(this, direction)
+    )
+  }
+
+  private _startMove(direction: MoveDirection) {
+    if (this.isMoving) return
+    this.isMoving = true
+    this._move(direction)
+  }
+
+  private _stopMove() {
+    if (this.requestAnimationFrameId) {
+      window.cancelAnimationFrame(this.requestAnimationFrameId)
+      this.requestAnimationFrameId = null
+      this.isMoving = false
+    }
+  }
+}

package/src/editor/core/override/Override.ts

@@ -0,0 +1,14 @@
+export interface IOverrideResult {
+  preventDefault?: boolean
+}
+
+export class Override {
+  public paste:
+    | ((evt?: ClipboardEvent) => unknown | IOverrideResult)
+    | undefined
+  public pasteImage:
+    | ((file: File | Blob) => unknown | IOverrideResult)
+    | undefined
+  public copy: (() => unknown | IOverrideResult) | undefined
+  public drop: ((evt: DragEvent) => unknown | IOverrideResult) | undefined
+}

package/src/editor/core/plugin/Plugin.ts

@@ -0,0 +1,17 @@
+import Editor from '../..'
+import { PluginFunction } from '../../interface/Plugin'
+
+export class Plugin {
+  private editor: Editor
+
+  constructor(editor: Editor) {
+    this.editor = editor
+  }
+
+  public use<Options>(
+    pluginFunction: PluginFunction<Options>,
+    options?: Options
+  ) {
+    pluginFunction(this.editor, options)
+  }
+}