editor-svg 1.0.0

package/docs/guide/command-get.md

@@ -0,0 +1,353 @@
+# 获取数据命令
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+const value = instance.command.commandName()
+```
+
+## getValue
+
+功能：获取当前文档信息
+
+用法：
+
+```javascript
+const {
+  version: string
+  data: IEditorData
+  options: IEditorOption
+} = instance.command.getValue(options?: IGetValueOption)
+```
+
+## getValueAsync
+
+功能：获取当前文档信息（异步）
+
+用法：
+
+```javascript
+const {
+  version: string
+  data: IEditorData
+  options: IEditorOption
+} = await instance.command.getValueAsync(options?: IGetValueOption)
+```
+
+## getImage
+
+功能：获取当前页面图片 base64 字符串
+
+用法：
+
+```javascript
+const base64StringList = await instance.command.getImage(option?: IGetImageOption)
+```
+
+## getOptions
+
+功能：获取编辑器配置
+
+用法：
+
+```javascript
+const editorOption = await instance.command.getOptions()
+```
+
+## getWordCount
+
+功能：获取文档字数
+
+用法：
+
+```javascript
+const wordCount = await instance.command.getWordCount()
+```
+
+## getCursorPosition
+
+功能: 获取光标位置坐标
+
+用法:
+
+```javascript
+const range = instance.command.getCursorPosition()
+```
+
+## getRemainingContentHeight
+
+功能：获取最后一页剩余可用内容高度
+
+用法：
+
+```javascript
+const remainingHeight = instance.command.getRemainingContentHeight()
+```
+
+## computeElementListHeight
+
+功能：计算元素列表占用高度
+
+用法：
+
+```javascript
+const height = instance.command.computeElementListHeight(
+  elementList: IElement[]
+)
+```
+
+## getRange
+
+功能：获取选区
+
+用法：
+
+```javascript
+const range = instance.command.getRange()
+```
+
+## getRangeText
+
+功能：获取选区文本
+
+用法：
+
+```javascript
+const rangeText = instance.command.getRangeText()
+```
+
+## getRangeContext
+
+功能：获取选区上下文
+
+用法：
+
+```javascript
+const rangeContext = instance.command.getRangeContext()
+```
+
+## getRangeRow
+
+功能：获取选区所在行元素列表
+
+用法：
+
+```javascript
+const rowElementList = instance.command.getRangeRow()
+```
+
+## getKeywordRangeList
+
+功能：获取关键词所在选区列表
+
+用法：
+
+```javascript
+const rangeList = instance.command.getKeywordRangeList()
+```
+
+## getKeywordContext
+
+功能：获取关键词所在上下文本信息
+
+用法：
+
+```javascript
+const keywordContextList = instance.command.getKeywordContext(payload: string)
+```
+
+## getRangeParagraph
+
+功能：获取选区所在段落元素列表
+
+用法：
+
+```javascript
+const paragraphElementList = instance.command.getRangeParagraph()
+```
+
+## getPaperMargin
+
+功能：获取页边距
+
+用法：
+
+```javascript
+const [top: number, right: number, bottom: number, left: number] =
+  instance.command.getPaperMargin()
+```
+
+## getSearchNavigateInfo
+
+功能：获取搜索导航信息
+
+用法：
+
+```javascript
+const {
+  index: number;
+  count: number;
+} = instance.command.getSearchNavigateInfo()
+```
+
+## getCatalog
+
+功能：获取目录
+
+用法：
+
+```javascript
+const catalog = await instance.command.getCatalog()
+```
+
+## getHTML
+
+功能：获取 HTML
+
+用法：
+
+```javascript
+const {
+  header: string
+  main: string
+  footer: string
+} = await instance.command.getHTML()
+```
+
+## getText
+
+功能：获取文本
+
+用法：
+
+```javascript
+const {
+  header: string
+  main: string
+  footer: string
+} = await instance.command.getText()
+```
+
+## getLocale
+
+功能：获取当前语言
+
+用法：
+
+```javascript
+const locale = await instance.command.getLocale()
+```
+
+## getGroupIds
+
+功能：获取所有成组 id
+
+用法：
+
+```javascript
+const groupIds = await instance.command.getGroupIds()
+```
+
+## getControlValue
+
+功能：获取控件值
+
+用法：
+
+```javascript
+const {
+  value: string | null
+  innerText: string | null
+  zone: EditorZone
+  elementList?: IElement[]
+}[] = await instance.command.getControlValue(payload: IGetControlValueOption)
+```
+
+## getControlList
+
+功能：获取所有控件
+
+用法：
+
+```javascript
+const controlList = await instance.command.getControlList()
+```
+
+## getContainer
+
+功能：获取编辑器容器
+
+用法：
+
+```javascript
+const container = await instance.command.getContainer()
+```
+
+## getTitleValue
+
+功能：获取标题值
+
+用法：
+
+```javascript
+const {
+  value: string | null
+  elementList: IElement[]
+  zone: EditorZone
+}[] = await instance.command.getTitleValue(payload: IGetTitleValueOption)
+```
+
+## getPositionContextByEvent
+
+功能：获取位置上下文信息通过鼠标事件
+
+用法：
+
+```javascript
+const {
+  pageNo: number
+  element: IElement | null
+  rangeRect: RangeRect | null
+  tableInfo: ITableInfoByEvent | null
+}[] = await instance.command.getPositionContextByEvent(evt: MouseEvent, options?: IPositionContextByEventOption)
+```
+
+示例：
+
+```javascript
+instance.eventBus.on(
+  'mousemove',
+  debounce(evt => {
+    const positionContext = instance.command.getPositionContextByEvent(evt)
+    console.log(positionContext)
+  }, 200)
+)``
+```
+
+## getElementById
+
+功能：根据 id 获取元素
+
+用法：
+
+```javascript
+const elementList = await instance.command.getElementById(payload: IGetElementByIdOption)
+```
+
+## getAreaValue
+
+功能: 获取区域数据
+用法：
+
+```js
+const {
+  id?: string
+  area: IArea
+  value: IElement[]
+  startPageNo: number
+  endPageNo: number
+} = instance.command.getAreaValue(options: IGetAreaValueOption)
+```

package/docs/guide/contextmenu-custom.md

@@ -0,0 +1,44 @@
+# 自定义右键菜单
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.register.contextMenuList([
+    {
+      key?: string;
+      isDivider?: boolean;
+      icon?: string;
+      name?: string; // 使用%s代表选区文本。示例：搜索：%s
+      shortCut?: string;
+      disable?: boolean;
+      when?: (payload: IContextMenuContext) => boolean;
+      callback?: (command: Command, context: IContextMenuContext) => any;
+      childMenus?: IRegisterContextMenu[];
+    }
+  ])
+```
+
+## getContextMenuList
+
+功能：获取注册的右键菜单列表
+
+用法：
+
+```javascript
+const contextMenuList = await instance.register.getContextMenuList()
+```
+
+备注：
+
+```javascript
+// 修改内部右键菜单示例
+contextmenuList.forEach(menu => {
+  // 通过菜单key找到菜单项后进行属性修改
+  if (menu.key === INTERNAL_CONTEXT_MENU_KEY.GLOBAL.PASTE) {
+    menu.when = () => false
+  }
+})
+```

package/docs/guide/contextmenu-internal.md

@@ -0,0 +1,61 @@
+# 内部右键菜单
+
+## 全局
+
+- 剪切
+- 复制
+- 粘贴
+- 全选
+- 打印
+
+## 超链接
+
+- 删除链接
+- 取消链接
+- 编辑链接
+
+## 图片
+
+- 更改图片
+- 另存为图片
+- 文字环绕
+  - 嵌入型
+  - 上下型环绕
+  - 四周型环绕
+  - 浮于文字上方
+  - 衬于文字下方
+
+## 表格
+
+- 表格边框
+  - 所有框线
+  - 无框线
+  - 虚框线
+  - 外侧框线
+  - 内侧框线
+  - 单元格边框
+    - 上边框
+    - 右边框
+    - 下边框
+    - 左边框
+    - 正斜线
+    - 反斜线
+- 垂直对齐
+  - 顶端对齐
+  - 垂直居中
+  - 底端对齐
+- 插入行列
+  - 上方插入 1 行
+  - 下方插入 1 行
+  - 左侧插入 1 列
+  - 右侧插入 1 列
+- 删除行列
+  - 删除 1 行
+  - 删除 1 列
+  - 删除整个表格
+- 合并单元格
+- 取消合并
+
+## 控件
+
+- 删除控件

package/docs/guide/eventbus.md

@@ -0,0 +1,260 @@
+# 事件监听(eventBus)
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+
+// 注册
+instance.eventBus.on<K keyof EventMap>(
+  eventName: K,
+  callback: EventMap[K]
+)
+
+// 移除
+instance.eventBus.off<K keyof EventMap>(
+  eventName: K,
+  callback: EventMap[K]
+)
+```
+
+## rangeStyleChange
+
+功能：选区样式发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('rangeStyleChange', (payload: IRangeStyle) => void)
+```
+
+## visiblePageNoListChange
+
+功能：可见页发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('visiblePageNoListChange', (payload: number[]) => void)
+```
+
+## intersectionPageNoChange
+
+功能：当前页发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('intersectionPageNoChange', (payload: number) => void)
+```
+
+## pageSizeChange
+
+功能：当前页数发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('pageSizeChange', (payload: number) => void)
+```
+
+## pageScaleChange
+
+功能：当前页面缩放比例发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('pageScaleChange', (payload: number) => void)
+```
+
+## contentChange
+
+功能：当前内容发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('contentChange', () => void)
+```
+
+## controlChange
+
+功能：当前光标所在控件发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('controlChange', (payload: IControlChangeResult) => void)
+```
+
+## controlContentChange
+
+功能：控件内容发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('controlContentChange', (payload: IControlContentChangeResult) => void)
+```
+
+## pageModeChange
+
+功能：页面模式发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('pageModeChange', (payload: PageMode) => void)
+```
+
+## saved
+
+功能：文档执行保存
+
+用法：
+
+```javascript
+instance.eventBus.on('saved', (payload: IEditorResult) => void)
+```
+
+## zoneChange
+
+功能：区域发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('zoneChange', (payload: EditorZone) => void)
+```
+
+## mousemove
+
+功能：编辑器 mousemove 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mousemove', (evt: MouseEvent) => void)
+```
+
+## mouseenter
+
+功能：编辑器 mouseenter 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mouseenter', (evt: MouseEvent) => void)
+```
+
+## mouseleave
+
+功能：编辑器 mouseleave 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mouseleave', (evt: MouseEvent) => void)
+```
+
+## mousedown
+
+功能：编辑器 mousedown 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mousedown', (evt: MouseEvent) => void)
+```
+
+## mouseup
+
+功能：编辑器 mouseup 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mouseup', (evt: MouseEvent) => void)
+```
+
+## click
+
+功能：编辑器 click 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('click', (evt: MouseEvent) => void)
+```
+
+## input
+
+功能：编辑器 input 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('input', (evt: Event) => void)
+```
+
+## positionContextChange
+
+功能：上下文内容发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('positionContextChange', (payload: IPositionContextChangePayload) => void)
+```
+
+## imageSizeChange
+
+功能：图片尺寸发生改变事件
+
+用法：
+
+```javascript
+instance.eventBus.on('imageSizeChange', (payload: { element: IElement }) => void)
+```
+
+## imageMousedown
+
+功能：图片 mousedown 事件
+
+用法：
+
+```javascript
+instance.eventBus.on('imageMousedown', (payload: {
+  evt: MouseEvent
+  element: IElement
+}) => void)
+```
+
+## imageDblclick
+
+功能：图片双击事件
+
+用法：
+
+```javascript
+instance.eventBus.on('imageDblclick', (payload: {
+  evt: MouseEvent
+  element: IElement
+}) => void)
+```
+
+## labelMousedown
+
+功能：标签 mousedown 事件
+
+用法：
+
+```javascript
+instance.eventBus.on('labelMousedown', (payload: {
+  evt: MouseEvent
+  element: IElement
+}) => void)
+```