editor-svg 1.0.0

package/docs/en/guide/command-get.md

@@ -0,0 +1,355 @@
+# Get Data Command
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+const value = instance.command.commandName()
+```
+
+## getValue
+
+Feature: Get the current document value
+
+Usage:
+
+```javascript
+const {
+  version: string
+  data: IEditorData
+  options: IEditorOption
+} = instance.command.getValue(options?: IGetValueOption)
+```
+
+## getValueAsync
+
+Feature: Get the current document value (async)
+
+Usage:
+
+```javascript
+const {
+  version: string
+  data: IEditorData
+  options: IEditorOption
+} = await instance.command.getValueAsync(options?: IGetValueOption)
+```
+
+
+## getImage
+
+Feature: Gets the base64 string of the current page image
+
+Usage:
+
+```javascript
+const base64StringList = await instance.command.getImage(option?: IGetImageOption)
+```
+
+## getOptions
+
+Feature: Get editor options
+
+Usage:
+
+```javascript
+const editorOption = await instance.command.getOptions()
+```
+
+## getWordCount
+
+Feature: Get document word count
+
+Usage:
+
+```javascript
+const wordCount = await instance.command.getWordCount()
+```
+
+## getCursorPosition
+
+Feature: Get cursor position with coordinates
+
+Usage:
+
+```javascript
+const range = instance.command.getCursorPosition()
+```
+
+## getRemainingContentHeight
+
+Feature: Get remaining available content height on last page
+
+Usage:
+
+```javascript
+const remainingHeight = instance.command.getRemainingContentHeight()
+```
+
+## computeElementListHeight
+
+Feature: Compute element list height
+
+Usage:
+
+```javascript
+const height = instance.command.computeElementListHeight(
+  elementList: IElement[]
+)
+```
+
+## getRange
+
+Feature: Get range
+
+Usage:
+
+```javascript
+const range = instance.command.getRange()
+```
+
+## getRangeText
+
+Feature: Get range text
+
+Usage:
+
+```javascript
+const rangeText = instance.command.getRangeText()
+```
+
+## getRangeContext
+
+Feature: Get range context
+
+Usage:
+
+```javascript
+const rangeContext = instance.command.getRangeContext()
+```
+
+## getRangeRow
+
+Feature: Get range row element list
+
+Usage:
+
+```javascript
+const rowElementList = instance.command.getRangeRow()
+```
+
+## getKeywordRangeList
+
+Feature: Get range list by keyword
+
+Usage:
+
+```javascript
+const rangeList = instance.command.getKeywordRangeList()
+```
+
+## getKeywordContext
+
+Feature: Get context list by keyword
+
+Usage:
+
+```javascript
+const keywordContextList = instance.command.getKeywordContext(payload: string)
+```
+
+## getRangeParagraph
+
+Feature: Get range paragraph element list
+
+Usage:
+
+```javascript
+const paragraphElementList = instance.command.getRangeParagraph()
+```
+
+## getPaperMargin
+
+Feature: Gets the margins
+
+Usage:
+
+```javascript
+const [top: number, right: number, bottom: number, left: number] =
+  instance.command.getPaperMargin()
+```
+
+## getSearchNavigateInfo
+
+Feature: Get search navigation information
+
+Usage:
+
+```javascript
+const {
+  index: number;
+  count: number;
+} = instance.command.getSearchNavigateInfo()
+```
+
+## getCatalog
+
+Feature: Get directory
+
+Usage:
+
+```javascript
+const catalog = await instance.command.getCatalog()
+```
+
+## getHTML
+
+Feature: Get HTML
+
+Usage:
+
+```javascript
+const {
+  header: string
+  main: string
+  footer: string
+} = await instance.command.getHTML()
+```
+
+## getText
+
+Feature: Get text
+
+Usage:
+
+```javascript
+const {
+  header: string
+  main: string
+  footer: string
+} = await instance.command.getText()
+```
+
+## getLocale
+
+Feature: Get current locale
+
+Usage:
+
+```javascript
+const locale = await instance.command.getLocale()
+```
+
+## getGroupIds
+
+Feature: Get all group ids
+
+Usage:
+
+```javascript
+const groupIds = await instance.command.getGroupIds()
+```
+
+## getControlValue
+
+Feature: Get control value
+
+Usage:
+
+```javascript
+const {
+  value: string | null
+  innerText: string | null
+  zone: EditorZone
+  elementList?: IElement[]
+} = await instance.command.getControlValue(payload: IGetControlValueOption)
+```
+
+## getControlList
+
+Feature: Get control list
+
+Usage:
+
+```javascript
+const controlList = await instance.command.getControlList()
+```
+
+## getContainer
+
+Feature: Get editor container
+
+Usage:
+
+```javascript
+const container = await instance.command.getContainer()
+```
+
+## getTitleValue
+
+Feature: Get title value
+
+Usage:
+
+```javascript
+const {
+  value: string | null
+  elementList: IElement[]
+  zone: EditorZone
+}[] = await instance.command.getTitleValue(payload: IGetTitleValueOption)
+```
+
+## getPositionContextByEvent
+
+Feature: Get position context by mouse event
+
+Usage:
+
+```javascript
+const {
+  pageNo: number
+  element: IElement | null
+  rangeRect: RangeRect | null
+  tableInfo: ITableInfoByEvent | null
+}[] = await instance.command.getPositionContextByEvent(evt: MouseEvent, options?: IPositionContextByEventOption)
+```
+
+demo:
+
+```javascript
+instance.eventBus.on(
+  'mousemove',
+  debounce(evt => {
+    const positionContext = instance.command.getPositionContextByEvent(evt)
+    console.log(positionContext)
+  }, 200)
+)``
+```
+
+## getElementById
+
+Feature: Get element list by id
+
+Usage:
+
+```javascript
+const elementList = await instance.command.getElementById(payload: IGetElementByIdOption)
+```
+
+## getAreaValue
+
+Feature: Get area value
+
+Usage:
+
+```javascript
+const {
+  id?: string
+  area: IArea
+  value: IElement[]
+  startPageNo: number
+  endPageNo: number
+} = instance.command.getAreaValue(options: IGetAreaValueOption)
+```

package/docs/en/guide/contextmenu-custom.md

@@ -0,0 +1,44 @@
+# Customize Contextmenu
+
+## How to Use
+
+```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; // Use %s for selection text. Example: Search: %s
+      shortCut?: string;
+      disable?: boolean;
+      when?: (payload: IContextMenuContext) => boolean;
+      callback?: (command: Command, context: IContextMenuContext) => any;
+      childMenus?: IRegisterContextMenu[];
+    }
+  ])
+```
+
+## getContextMenuList
+
+Feature: Get context menu list
+
+Usage:
+
+```javascript
+const contextMenuList = await instance.register.getContextMenuList()
+```
+
+Remark:
+
+```javascript
+// Example of modifying internal contextmenu
+contextmenuList.forEach(menu => {
+  // Find the menu item through the menu key and modify its properties
+  if (menu.key === INTERNAL_CONTEXT_MENU_KEY.GLOBAL.PASTE) {
+    menu.when = () => false
+  }
+})
+```

package/docs/en/guide/contextmenu-internal.md

@@ -0,0 +1,61 @@
+# Internal Contextmenu
+
+## Global
+
+- Cut
+- Copy
+- Paste
+- Select all
+- Print
+
+## Hyperlinks
+
+- Delete the link
+- Unlink
+- Edit the link
+
+## Image
+
+- Change the picture
+- Save as picture
+- Text wrapping
+  - Embed
+  - Up down
+  - Surround
+  - Float above text
+  - Float below text
+
+## Table
+
+- Table borders
+- All borders
+- Borderless
+- Dashed border
+- Outer border
+- Internal border
+- Td borders
+  - Top border
+  - Right border
+  - Bottom border
+  - Left border
+  - Forward border
+  - Back border
+- Vertical alignment
+- Top alignment
+- Center vertically
+- Bottom end alignment
+- Insert rows and columns
+- Insert 1 row above
+- Insert 1 row below
+- Insert 1 column on the left
+- Insert 1 column on the right side
+- Delete rows and columns
+- Delete 1 row
+- Remove 1 column
+- Delete the entire table
+- Merge cells
+- Cancel the merge
+
+## control
+
+- Delete the control

package/docs/en/guide/eventbus.md

@@ -0,0 +1,260 @@
+# Event Listening(eventBus)
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+
+// register
+instance.eventBus.on<K keyof EventMap>(
+  eventName: K,
+  callback: EventMap[K]
+)
+
+// remove
+instance.eventBus.off<K keyof EventMap>(
+  eventName: K,
+  callback: EventMap[K]
+)
+```
+
+## rangeStyleChange
+
+Feature: The selection style changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('rangeStyleChange', (payload: IRangeStyle) => void)
+```
+
+## visiblePageNoListChange
+
+Feature: The visible page changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('visiblePageNoListChange', (payload: number[]) => void)
+```
+
+## intersectionPageNoChange
+
+Feature: The current page changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('intersectionPageNoChange', (payload: number) => void)
+```
+
+## pageSizeChange
+
+Feature: The current number of pages has changed
+
+Usage:
+
+```javascript
+instance.eventBus.on('pageSizeChange', (payload: number) => void)
+```
+
+## pageScaleChange
+
+Feature: The current page scaling has changed
+
+Usage:
+
+```javascript
+instance.eventBus.on('pageScaleChange', (payload: number) => void)
+```
+
+## contentChange
+
+Feature: The current content has changed
+
+Usage:
+
+```javascript
+instance.eventBus.on('contentChange', () => void)
+```
+
+## controlChange
+
+Feature: The control where the current cursor is located changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('controlChange', (payload: IControlChangeResult) => void)
+```
+
+## controlContentChange
+
+Feature: The control content changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('controlContentChange', (payload: IControlContentChangeResult) => void)
+```
+
+## pageModeChange
+
+Feature: The page mode changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('pageModeChange', (payload: PageMode) => void)
+```
+
+## saved
+
+Feature: Document saved
+
+Usage:
+
+```javascript
+instance.eventBus.on('saved', (payload: IEditorResult) => void)
+```
+
+## zoneChange
+
+Feature: The zone changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('zoneChange', (payload: EditorZone) => void)
+```
+
+## mousemove
+
+Feature: Editor mousemove event
+
+Usage:
+
+```javascript
+instance.eventBus.on('mousemove', (evt: MouseEvent) => void)
+```
+
+## mouseenter
+
+Feature: Editor mouseenter event
+
+Usage:
+
+```javascript
+instance.eventBus.on('mouseenter', (evt: MouseEvent) => void)
+```
+
+## mouseleave
+
+Feature: Editor mouseleave event
+
+Usage:
+
+```javascript
+instance.eventBus.on('mouseleave', (evt: MouseEvent) => void)
+```
+
+## mousedown
+
+Feature: Editor mousedown event
+
+Usage:
+
+```javascript
+instance.eventBus.on('mousedown', (evt: MouseEvent) => void)
+```
+
+## mouseup
+
+Feature: Editor mouseup event
+
+Usage:
+
+```javascript
+instance.eventBus.on('mouseup', (evt: MouseEvent) => void)
+```
+
+## click
+
+Feature: Editor click event
+
+Usage:
+
+```javascript
+instance.eventBus.on('click', (evt: MouseEvent) => void)
+```
+
+## input
+
+Feature: Editor input event
+
+Usage:
+
+```javascript
+instance.eventBus.on('input', (evt: Event) => void)
+```
+
+## positionContextChange
+
+Feature: The position context change
+
+Usage:
+
+```javascript
+instance.eventBus.on('positionContextChange', (payload: IPositionContextChangePayload) => void)
+```
+
+## imageSizeChange
+
+Feature: The image size change
+
+Usage:
+
+```javascript
+instance.eventBus.on('imageSizeChange', (payload: { element: IElement }) => void)
+```
+
+## imageMousedown
+
+Feature: The image mousedown event
+
+Usage:
+
+```javascript
+instance.eventBus.on('imageMousedown', (payload: {
+  evt: MouseEvent
+  element: IElement
+}) => void)
+```
+
+## imageDblclick
+
+Feature: The image double click event
+
+Usage:
+
+```javascript
+instance.eventBus.on('imageDblclick', (payload: {
+  evt: MouseEvent
+  element: IElement
+}) => void)
+```
+
+## labelMousedown
+
+Feature: The label mousedown event
+
+Usage:
+
+```javascript
+instance.eventBus.on('labelMousedown', (payload: {
+  evt: MouseEvent
+  element: IElement
+}) => void)
+```