feat: add executeUpdateElementById api #648

docs/en/guide/command-execute.md

@@ -772,6 +772,16 @@ Usage:
 instance.command.executeAppendElementList(elementList: IElement[], options?: IAppendElementListOption)
 ```
 
+## executeUpdateElementById
+
+Feature: Update element by id
+
+Usage:
+
+```javascript
+instance.command.executeUpdateElementById(payload: IUpdateElementByIdOption)
+```
+
 ## executeSetValue
 
 Feature: Set the editor data

docs/guide/command-execute.md

@@ -772,6 +772,16 @@ instance.command.executeInsertElementList(elementList: IElement[])
 instance.command.executeAppendElementList(elementList: IElement[], options?: IAppendElementListOption)
 ```
 
+## executeUpdateElementById
+
+功能：根据 id 修改元素属性
+
+用法：
+
+```javascript
+instance.command.executeUpdateElementById(payload: IUpdateElementByIdOption)
+```
+
 ## executeSetValue
 
 功能：设置编辑器数据

src/editor/core/command/Command.ts

@@ -76,6 +76,7 @@ export class Command {
   public executeSetPaperMargin: CommandAdapt['setPaperMargin']
   public executeInsertElementList: CommandAdapt['insertElementList']
   public executeAppendElementList: CommandAdapt['appendElementList']
+  public executeUpdateElementById: CommandAdapt['updateElementById']
   public executeSetValue: CommandAdapt['setValue']
   public executeRemoveControl: CommandAdapt['removeControl']
   public executeSetLocale: CommandAdapt['setLocale']
@@ -198,6 +199,7 @@ export class Command {
     // 通用
     this.executeInsertElementList = adapt.insertElementList.bind(adapt)
     this.executeAppendElementList = adapt.appendElementList.bind(adapt)
+    this.executeUpdateElementById = adapt.updateElementById.bind(adapt)
     this.executeSetValue = adapt.setValue.bind(adapt)
     this.executeRemoveControl = adapt.removeControl.bind(adapt)
     this.executeSetLocale = adapt.setLocale.bind(adapt)

src/editor/core/command/CommandAdapt.ts

@@ -53,7 +53,11 @@ import {
   IEditorText,
   IUpdateOption
 } from '../../interface/Editor'
-import { IElement, IElementStyle } from '../../interface/Element'
+import {
+  IElement,
+  IElementStyle,
+  IUpdateElementByIdOption
+} from '../../interface/Element'
 import { IPasteOption } from '../../interface/Event'
 import { IMargin } from '../../interface/Margin'
 import { ILocationPosition } from '../../interface/Position'
@@ -2093,9 +2097,14 @@ export class CommandAdapt {
     // 元素信息
     const elementList = this.draw.getElementList()
     const startElement = pickElementAttr(
-      elementList[isCollapsed ? startIndex : startIndex + 1]
+      elementList[isCollapsed ? startIndex : startIndex + 1],
+      {
+        extraPickAttrs: ['id']
+      }
     )
-    const endElement = pickElementAttr(elementList[endIndex])
+    const endElement = pickElementAttr(elementList[endIndex], {
+      extraPickAttrs: ['id']
+    })
     // 页码信息
     const positionList = this.position.getPositionList()
     const startPageNo = positionList[startIndex].pageNo
@@ -2262,6 +2271,42 @@ export class CommandAdapt {
     this.draw.appendElementList(deepClone(elementList), options)
   }
 
+  public updateElementById(payload: IUpdateElementByIdOption) {
+    function getElementIndexById(elementList: IElement[]): number {
+      for (let e = 0; e < elementList.length; e++) {
+        const element = elementList[e]
+        if (element.id === payload.id) {
+          return e
+        }
+      }
+      return -1
+    }
+    // 优先正文再页眉页脚
+    const getElementListFnList = [
+      this.draw.getOriginalMainElementList,
+      this.draw.getHeaderElementList,
+      this.draw.getFooterElementList
+    ]
+    for (const getElementList of getElementListFnList) {
+      const elementList = getElementList.call(this.draw)
+      const elementIndex = getElementIndexById(elementList)
+      if (~elementIndex) {
+        elementList[elementIndex] = {
+          ...elementList[elementIndex],
+          ...payload.properties
+        }
+        formatElementList([elementList[elementIndex]], {
+          isHandleFirstElement: false,
+          editorOptions: this.options
+        })
+        this.draw.render({
+          isSetCursor: false
+        })
+        break
+      }
+    }
+  }
+
   public setValue(payload: Partial<IEditorData>) {
     this.draw.setValue(payload)
   }

src/editor/interface/Element.ts

@@ -174,3 +174,8 @@ export interface IElementFillRect {
   width: number
   height: number
 }
+
+export interface IUpdateElementByIdOption {
+  id: string
+  properties: Omit<IElement, 'id'>
+}