editor-svg 1.0.0

package/src/editor/interface/Radio.ts

@@ -0,0 +1,17 @@
+import { VerticalAlign } from '../dataset/enum/VerticalAlign'
+
+export interface IRadio {
+  value: boolean | null
+  code?: string
+  disabled?: boolean
+}
+
+export interface IRadioOption {
+  width?: number
+  height?: number
+  gap?: number
+  lineWidth?: number
+  fillStyle?: string
+  strokeStyle?: string
+  verticalAlign?: VerticalAlign
+}

package/src/editor/interface/Range.ts

@@ -0,0 +1,61 @@
+import { EditorZone } from '../dataset/enum/Editor'
+import { IElement, IElementFillRect, IElementStyle } from './Element'
+
+export interface IRange {
+  startIndex: number
+  endIndex: number
+  isCrossRowCol?: boolean
+  tableId?: string
+  startTdIndex?: number
+  endTdIndex?: number
+  startTrIndex?: number
+  endTrIndex?: number
+  zone?: EditorZone
+}
+
+export type RangeRowArray = Map<number, number[]>
+
+export type RangeRowMap = Map<number, Set<number>>
+
+export type RangeRect = IElementFillRect
+
+export type RangeContext = {
+  isCollapsed: boolean
+  startElement: IElement
+  endElement: IElement
+  startPageNo: number
+  endPageNo: number
+  startRowNo: number
+  endRowNo: number
+  startColNo: number
+  endColNo: number
+  rangeRects: RangeRect[]
+  zone: EditorZone
+  isTable: boolean
+  trIndex: number | null
+  tdIndex: number | null
+  tableElement: IElement | null
+  selectionText: string | null
+  selectionElementList: IElement[]
+  titleId: string | null
+  titleStartPageNo: number | null
+  startParagraphNo: number
+  endParagraphNo: number
+}
+
+export interface IRangeParagraphInfo {
+  elementList: IElement[]
+  startIndex: number
+}
+
+export type IRangeElementStyle = Pick<
+  IElementStyle,
+  | 'bold'
+  | 'color'
+  | 'highlight'
+  | 'font'
+  | 'size'
+  | 'italic'
+  | 'underline'
+  | 'strikeout'
+>

package/src/editor/interface/Row.ts

@@ -0,0 +1,25 @@
+import { RowFlex } from '../dataset/enum/Row'
+import { IElement, IElementMetrics } from './Element'
+
+export type IRowElement = IElement & {
+  metrics: IElementMetrics
+  style: string
+  left?: number
+}
+
+export interface IRow {
+  width: number
+  height: number
+  ascent: number
+  rowFlex?: RowFlex
+  startIndex: number
+  isPageBreak?: boolean
+  isList?: boolean
+  listIndex?: number
+  offsetX?: number
+  offsetY?: number
+  elementList: IRowElement[]
+  isWidthNotEnough?: boolean
+  rowIndex: number
+  isSurround?: boolean
+}

package/src/editor/interface/Search.ts

@@ -0,0 +1,36 @@
+import { EditorContext } from '../dataset/enum/Editor'
+import { IElementPosition } from './Element'
+import { IRange } from './Range'
+
+export interface ISearchResultBasic {
+  type: EditorContext
+  index: number
+  groupId: string
+}
+
+export interface ISearchResultRestArgs {
+  tableId?: string
+  tableIndex?: number
+  trIndex?: number
+  tdIndex?: number
+  tdId?: string
+  startIndex?: number
+}
+
+export type ISearchResult = ISearchResultBasic & ISearchResultRestArgs
+
+export interface ISearchResultContext {
+  range: IRange
+  startPosition: IElementPosition
+  endPosition: IElementPosition
+}
+
+export interface IReplaceOption {
+  index?: number
+}
+
+export interface ISearchOption {
+  isRegEnable?: boolean
+  isIgnoreCase?: boolean
+  isLimitSelection?: boolean
+}

package/src/editor/interface/Separator.ts

@@ -0,0 +1,4 @@
+export interface ISeparatorOption {
+  strokeStyle?: string
+  lineWidth?: number
+}

package/src/editor/interface/Text.ts

@@ -0,0 +1,15 @@
+import { TextDecorationStyle } from '../dataset/enum/Text'
+
+export interface ITextMetrics {
+  width: number
+  actualBoundingBoxAscent: number
+  actualBoundingBoxDescent: number
+  actualBoundingBoxLeft: number
+  actualBoundingBoxRight: number
+  fontBoundingBoxAscent: number
+  fontBoundingBoxDescent: number
+}
+
+export interface ITextDecoration {
+  style?: TextDecorationStyle
+}

package/src/editor/interface/Title.ts

@@ -0,0 +1,32 @@
+import { EditorZone } from '../dataset/enum/Editor'
+import { IElement } from './Element'
+
+export interface ITitleSizeOption {
+  defaultFirstSize?: number
+  defaultSecondSize?: number
+  defaultThirdSize?: number
+  defaultFourthSize?: number
+  defaultFifthSize?: number
+  defaultSixthSize?: number
+}
+
+export type ITitleOption = ITitleSizeOption & {}
+
+export interface ITitleRule {
+  deletable?: boolean
+  disabled?: boolean
+}
+
+export type ITitle = ITitleRule & {
+  conceptId?: string
+}
+
+export interface IGetTitleValueOption {
+  conceptId: string
+}
+
+export type IGetTitleValueResult = (ITitle & {
+  value: string | null
+  elementList: IElement[]
+  zone: EditorZone
+})[]

package/src/editor/interface/Watermark.ts

@@ -0,0 +1,16 @@
+import { NumberType } from '../dataset/enum/Common'
+import { WatermarkType } from '../dataset/enum/Watermark'
+
+export interface IWatermark {
+  data: string
+  type?: WatermarkType
+  width?: number
+  height?: number
+  color?: string
+  opacity?: number
+  size?: number
+  font?: string
+  repeat?: boolean
+  numberType?: NumberType
+  gap?: [horizontal: number, vertical: number]
+}

package/src/editor/interface/WhiteSpace.ts

@@ -0,0 +1,5 @@
+export interface IWhiteSpaceOption {
+  disabled?: boolean
+  color?: string
+  radius?: number
+}

package/src/editor/interface/Zone.ts

@@ -0,0 +1,3 @@
+export interface IZoneOption {
+  tipDisabled?: boolean
+}

package/src/editor/interface/contextmenu/ContextMenu.ts

@@ -0,0 +1,76 @@
+import { Command } from '../../core/command/Command'
+import { EditorZone } from '../../dataset/enum/Editor'
+import { DeepRequired } from '../Common'
+import { IEditorOption } from '../Editor'
+import { IElement } from '../Element'
+
+export interface IContextMenuContext {
+  startElement: IElement | null
+  endElement: IElement | null
+  isReadonly: boolean
+  editorHasSelection: boolean
+  editorTextFocus: boolean
+  isInTable: boolean
+  isCrossRowCol: boolean
+  zone: EditorZone
+  trIndex: number | null
+  tdIndex: number | null
+  tableElement: IElement | null
+  options: DeepRequired<IEditorOption>
+}
+
+export interface IRegisterContextMenu {
+  key?: string
+  i18nPath?: string
+  isDivider?: boolean
+  icon?: string
+  name?: string
+  shortCut?: string
+  disable?: boolean
+  when?: (payload: IContextMenuContext) => boolean
+  callback?: (command: Command, context: IContextMenuContext) => void
+  childMenus?: IRegisterContextMenu[]
+}
+
+export interface IContextmenuLang {
+  global: {
+    cut: string
+    copy: string
+    paste: string
+    selectAll: string
+    print: string
+  }
+  control: {
+    delete: string
+  }
+  hyperlink: {
+    delete: string
+    cancel: string
+    edit: string
+  }
+  image: {
+    change: string
+    saveAs: string
+    textWrap: string
+    textWrapType: {
+      embed: string
+      upDown: string
+      surround: string
+      floatTop: string
+      floatBottom: string
+    }
+  }
+  table: {
+    insertRowCol: string
+    insertTopRow: string
+    insertBottomRow: string
+    insertLeftCol: string
+    insertRightCol: string
+    deleteRowCol: string
+    deleteRow: string
+    deleteCol: string
+    deleteTable: string
+    mergeCell: string
+    mergeCancelCell: string
+  }
+}

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

@@ -0,0 +1,7 @@
+import { IDatePickerLang } from '../../core/draw/particle/date/DatePicker'
+import { IContextmenuLang } from '../contextmenu/ContextMenu'
+
+export interface ILang {
+  contextmenu: IContextmenuLang
+  datePicker: IDatePickerLang
+}

package/src/editor/interface/shortcut/Shortcut.ts

@@ -0,0 +1,14 @@
+import { Command } from '../../core/command/Command'
+import { KeyMap } from '../../dataset/enum/KeyMap'
+
+export interface IRegisterShortcut {
+  key: KeyMap
+  ctrl?: boolean
+  meta?: boolean
+  mod?: boolean // windows:ctrl || mac:command
+  shift?: boolean
+  alt?: boolean // windows:alt || mac:option
+  isGlobal?: boolean
+  callback?: (command: Command) => void
+  disable?: boolean
+}

package/src/editor/interface/table/Colgroup.ts

@@ -0,0 +1,4 @@
+export interface IColgroup {
+  id?: string
+  width: number
+}

package/src/editor/interface/table/Table.ts

@@ -0,0 +1,9 @@
+import { IPadding } from '../Common'
+
+export interface ITableOption {
+  tdPadding?: IPadding
+  defaultTrMinHeight?: number
+  defaultColMinWidth?: number
+  defaultBorderColor?: string
+  overflow?: boolean
+}

package/src/editor/interface/table/Td.ts

@@ -0,0 +1,36 @@
+import { VerticalAlign } from '../../dataset/enum/VerticalAlign'
+import { TdBorder, TdSlash } from '../../dataset/enum/table/Table'
+import { IElement, IElementPosition } from '../Element'
+import { IRow } from '../Row'
+
+export interface ITd {
+  conceptId?: string
+  id?: string
+  extension?: unknown
+  externalId?: string
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  colspan: number
+  rowspan: number
+  value: IElement[]
+  trIndex?: number
+  tdIndex?: number
+  isLastRowTd?: boolean
+  isLastColTd?: boolean
+  isLastTd?: boolean
+  rowIndex?: number
+  colIndex?: number
+  rowList?: IRow[]
+  positionList?: IElementPosition[]
+  verticalAlign?: VerticalAlign
+  backgroundColor?: string
+  borderTypes?: TdBorder[]
+  slashTypes?: TdSlash[]
+  mainHeight?: number // 内容 + 内边距高度
+  realHeight?: number // 真实高度（包含跨列）
+  realMinHeight?: number // 真实最小高度（包含跨列）
+  disabled?: boolean // 内容不可编辑
+  deletable?: boolean // 内容不可删除
+}

package/src/editor/interface/table/Tr.ts

@@ -0,0 +1,11 @@
+import { ITd } from './Td'
+
+export interface ITr {
+  id?: string
+  extension?: unknown
+  externalId?: string
+  height: number
+  tdList: ITd[]
+  minHeight?: number
+  pagingRepeat?: boolean // 在各页顶端以标题行的形式重复出现
+}

package/src/editor/types/index.d.ts

@@ -0,0 +1,5 @@
+// 部分浏览器canvas上下文支持设置以下属性
+interface CanvasRenderingContext2D {
+  letterSpacing: string
+  wordSpacing: string
+}

package/src/editor/utils/clipboard.ts

@@ -0,0 +1,94 @@
+import { EDITOR_CLIPBOARD } from '../dataset/constant/Editor'
+import { DeepRequired } from '../interface/Common'
+import { IEditorOption } from '../interface/Editor'
+import { IElement } from '../interface/Element'
+import { createDomFromElementList, zipElementList } from './element'
+
+export interface IClipboardData {
+  text: string
+  elementList: IElement[]
+}
+
+export function setClipboardData(data: IClipboardData) {
+  localStorage.setItem(
+    EDITOR_CLIPBOARD,
+    JSON.stringify({
+      text: data.text,
+      elementList: data.elementList
+    })
+  )
+}
+
+export function getClipboardData(): IClipboardData | null {
+  const clipboardText = localStorage.getItem(EDITOR_CLIPBOARD)
+  return clipboardText ? JSON.parse(clipboardText) : null
+}
+
+export function removeClipboardData() {
+  localStorage.removeItem(EDITOR_CLIPBOARD)
+}
+
+export async function writeClipboardItem(
+  text: string,
+  html: string,
+  elementList: IElement[]
+) {
+  if (!text && !html && !elementList.length) return
+  const plainText = new Blob([text], { type: 'text/plain' })
+  const htmlText = new Blob([html], { type: 'text/html' })
+  if (window.ClipboardItem) {
+    // @ts-ignore
+    const item = new ClipboardItem({
+      [plainText.type]: plainText,
+      [htmlText.type]: htmlText
+    })
+    await window.navigator.clipboard.write([item])
+  } else {
+    const fakeElement = document.createElement('div')
+    fakeElement.setAttribute('contenteditable', 'true')
+    fakeElement.innerHTML = html
+    document.body.append(fakeElement)
+    // add new range
+    const selection = window.getSelection()
+    const range = document.createRange()
+    // 增加尾行换行字符避免dom复制缺失
+    const br = document.createElement('span')
+    br.innerText = '\n'
+    fakeElement.append(br)
+    // 扩选选区并执行复制
+    range.selectNodeContents(fakeElement)
+    selection?.removeAllRanges()
+    selection?.addRange(range)
+    document.execCommand('copy')
+    fakeElement.remove()
+  }
+  // 编辑器结构化数据
+  setClipboardData({ text, elementList })
+}
+
+export async function writeElementList(
+  elementList: IElement[],
+  options: DeepRequired<IEditorOption>
+) {
+  const clipboardDom = createDomFromElementList(elementList, options)
+  // 写入剪贴板
+  document.body.append(clipboardDom)
+  const text = clipboardDom.innerText
+  // 先追加后移除，否则innerText无法解析换行符
+  clipboardDom.remove()
+  const html = clipboardDom.innerHTML
+  if (!text && !html && !elementList.length) return
+  await writeClipboardItem(text, html, zipElementList(elementList))
+}
+
+export function getIsClipboardContainFile(clipboardData: DataTransfer) {
+  let isFile = false
+  for (let i = 0; i < clipboardData.items.length; i++) {
+    const item = clipboardData.items[i]
+    if (item.kind === 'file') {
+      isFile = true
+      break
+    }
+  }
+  return isFile
+}