feat: add area element #216

Co-authored-by: zhaoxingwu <zhaoxingwu@neusoft.com>
Co-authored-by: Hufe921 <huangyunfeihufe@hotmail.com>

docs/en/guide/command-execute.md

@@ -971,3 +971,23 @@ Usage:
 ```javascript
 instance.command.executeFocus(payload?: IFocusOption)
 ```
+
+## executeInsertArea
+
+Feature: insert area element
+
+Usage:
+
+```javascript
+const areaId = instance.command.executeInsertArea(payload: IInsertAreaOption)
+```
+
+## executeSetAreaProperties
+
+Feature: set area properties
+
+Usage:
+
+```javascript
+instance.command.executeSetAreaProperties(payload: ISetAreaPropertiesOption)
+```

docs/en/guide/command-get.md

@@ -299,3 +299,19 @@ 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)
+```

docs/en/guide/schema.md

@@ -176,5 +176,14 @@ interface IElement {
   listType?: ListType;
   listStyle?: ListStyle;
   listWrap?: boolean;
+  // area
+  areaId?: string;
+  area?: {
+    extension?: unknown;
+    top?: number;
+    borderColor?: string;
+    backgroundColor?: string;
+    mode?: AreaMode;
+  };
 }
 ```

docs/guide/command-execute.md

@@ -971,3 +971,19 @@ instance.command.executeInsertTitle(payload: IElement)
 ```javascript
 instance.command.executeFocus(payload?: IFocusOption)
 ```
+
+## executeInsertArea
+
+功能： 插入区域
+
+```js
+const areaId = instance.command.executeInsertArea(payload: IInsertAreaOption)
+```
+
+## executeSetAreaProperties
+
+功能：设置区域属性
+
+```js
+instance.command.executeSetAreaProperties(payload: ISetAreaPropertiesOption)
+```

docs/guide/command-get.md

@@ -299,3 +299,18 @@ instance.eventBus.on(
 ```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)
+```

docs/guide/schema.md

@@ -176,5 +176,14 @@ interface IElement {
   listType?: ListType;
   listStyle?: ListStyle;
   listWrap?: boolean;
+  // 区域
+  areaId?: string;
+  area?: {
+    extension?: unknown;
+    top?: number;
+    borderColor?: string;
+    backgroundColor?: string;
+    mode?: AreaMode;
+  };
 }
 ```

src/editor/core/command/Command.ts

@@ -75,6 +75,8 @@ export class Command {
   public executePaperDirection: CommandAdapt['paperDirection']
   public executeSetPaperMargin: CommandAdapt['setPaperMargin']
   public executeInsertElementList: CommandAdapt['insertElementList']
+  public executeInsertArea: CommandAdapt['insertArea']
+  public executeSetAreaProperties: CommandAdapt['setAreaProperties']
   public executeAppendElementList: CommandAdapt['appendElementList']
   public executeUpdateElementById: CommandAdapt['updateElementById']
   public executeSetValue: CommandAdapt['setValue']
@@ -100,6 +102,7 @@ export class Command {
   public getImage: CommandAdapt['getImage']
   public getOptions: CommandAdapt['getOptions']
   public getValue: CommandAdapt['getValue']
+  public getAreaValue: CommandAdapt['getAreaValue']
   public getHTML: CommandAdapt['getHTML']
   public getText: CommandAdapt['getText']
   public getWordCount: CommandAdapt['getWordCount']
@@ -202,6 +205,10 @@ export class Command {
     this.executePaperSize = adapt.paperSize.bind(adapt)
     this.executePaperDirection = adapt.paperDirection.bind(adapt)
     this.executeSetPaperMargin = adapt.setPaperMargin.bind(adapt)
+    // 区域
+    this.getAreaValue = adapt.getAreaValue.bind(adapt)
+    this.executeInsertArea = adapt.insertArea.bind(adapt)
+    this.executeSetAreaProperties = adapt.setAreaProperties.bind(adapt)
     // 通用
     this.executeInsertElementList = adapt.insertElementList.bind(adapt)
     this.executeAppendElementList = adapt.appendElementList.bind(adapt)

src/editor/core/command/CommandAdapt.ts

@@ -107,6 +107,12 @@ import { Position } from '../position/Position'
 import { RangeManager } from '../range/RangeManager'
 import { WorkerManager } from '../worker/WorkerManager'
 import { Zone } from '../zone/Zone'
+import {
+  IGetAreaValueOption,
+  IGetAreaValueResult,
+  IInsertAreaOption,
+  ISetAreaPropertiesOption
+} from '../../interface/Area'
 
 export class CommandAdapt {
   private draw: Draw
@@ -1337,6 +1343,12 @@ export class CommandAdapt {
     return this.draw.getValue(options)
   }
 
+  public getAreaValue(
+    options?: IGetAreaValueOption
+  ): IGetAreaValueResult | null {
+    return this.draw.getArea().getAreaValue(options)
+  }
+
   public getHTML(): IEditorHTML {
     const options = this.options
     const headerElementList = this.draw.getHeaderElementList()
@@ -2143,4 +2155,12 @@ export class CommandAdapt {
       direction: MoveDirection.DOWN
     })
   }
+
+  public insertArea(payload: IInsertAreaOption) {
+    return this.draw.getArea().insertArea(payload)
+  }
+
+  public setAreaProperties(payload: ISetAreaPropertiesOption) {
+    this.draw.getArea().setAreaProperties(payload)
+  }
 }

src/editor/core/draw/Draw.ts

@@ -108,6 +108,7 @@ import { PageBorder } from './frame/PageBorder'
 import { ITd } from '../../interface/table/Td'
 import { Actuator } from '../actuator/Actuator'
 import { TableOperate } from './particle/table/TableOperate'
+import { Area } from './interactive/Area'
 
 export class Draw {
   private container: HTMLDivElement
@@ -134,6 +135,7 @@ export class Draw {
   private background: Background
   private search: Search
   private group: Group
+  private area: Area
   private underline: Underline
   private strikeout: Strikeout
   private highlight: Highlight
@@ -213,6 +215,7 @@ export class Draw {
     this.background = new Background(this)
     this.search = new Search(this)
     this.group = new Group(this)
+    this.area = new Area(this)
     this.underline = new Underline(this)
     this.strikeout = new Strikeout(this)
     this.highlight = new Highlight(this)
@@ -321,6 +324,9 @@ export class Draw {
   }
 
   public isReadonly() {
+    if (this.area.getActiveAreaId()) {
+      return this.area.isReadonly()
+    }
     switch (this.mode) {
       case EditorMode.DESIGN:
         return false
@@ -565,6 +571,10 @@ export class Draw {
     return this.group
   }
 
+  public getArea(): Area {
+    return this.area
+  }
+
   public getHistoryManager(): HistoryManager {
     return this.historyManager
   }
@@ -1097,7 +1107,8 @@ export class Draw {
         extraPickAttrs
       }),
       main: zipElementList(mainElementList, {
-        extraPickAttrs
+        extraPickAttrs,
+        isClassifyArea: true
       }),
       footer: zipElementList(this.getFooterElementList(), {
         extraPickAttrs
@@ -1294,7 +1305,9 @@ export class Draw {
         0
       const availableWidth = innerWidth - offsetX
       // 增加起始位置坐标偏移量
-      x += curRow.elementList.length === 1 ? offsetX : 0
+      const isStartElement = curRow.elementList.length === 1
+      x += isStartElement ? offsetX : 0
+      y += isStartElement ? curRow.offsetY || 0 : 0
       if (
         element.type === ElementType.IMAGE ||
         element.type === ElementType.LATEX
@@ -1447,13 +1460,14 @@ export class Draw {
           let curPagePreHeight = marginHeight
           for (let r = 0; r < rowList.length; r++) {
             const row = rowList[r]
+            const rowOffsetY = row.offsetY || 0
             if (
-              row.height + curPagePreHeight > height ||
+              row.height + curPagePreHeight + rowOffsetY > height ||
               rowList[r - 1]?.isPageBreak
             ) {
-              curPagePreHeight = marginHeight + row.height
+              curPagePreHeight = marginHeight + row.height + rowOffsetY
             } else {
-              curPagePreHeight += row.height
+              curPagePreHeight += row.height + rowOffsetY
             }
           }
           // 当前剩余高度是否能容下当前表格第一行（可拆分）的高度，排除掉表头类型
@@ -1730,6 +1744,7 @@ export class Draw {
         preElement?.imgDisplay === ImageDisplay.INLINE ||
         element.imgDisplay === ImageDisplay.INLINE ||
         preElement?.listId !== element.listId ||
+        preElement?.areaId !== element.areaId ||
         (i !== 0 && element.value === ZERO)
       // 是否宽度不足导致换行
       const isWidthNotEnough = curRowWidth > availableWidth
@@ -1774,11 +1789,21 @@ export class Draw {
           row.offsetX = listStyleMap.get(element.listId!)
           row.listIndex = listIndex
         }
+        // Y轴偏移量
+        row.offsetY =
+          !isFromTable &&
+          element.area?.top &&
+          element.areaId !== elementList[i - 1]?.areaId
+            ? element.area.top * scale
+            : 0
         rowList.push(row)
       } else {
         curRow.width += metrics.width
         // 减小块元素前第一行空行行高
-        if (i === 0 && getIsBlockElement(elementList[1])) {
+        if (
+          i === 0 &&
+          (getIsBlockElement(elementList[1]) || !!elementList[1]?.areaId)
+        ) {
           curRow.height = defaultBasicRowMarginHeight
           curRow.ascent = defaultBasicRowMarginHeight
         } else if (curRow.height < height) {
@@ -1864,7 +1889,10 @@ export class Draw {
     if (pageMode === PageMode.CONTINUITY) {
       pageRowList[0] = this.rowList
       // 重置高度
-      pageHeight += this.rowList.reduce((pre, cur) => pre + cur.height, 0)
+      pageHeight += this.rowList.reduce(
+        (pre, cur) => pre + cur.height + (cur.offsetY || 0),
+        0
+      )
       const dpr = this.getPagePixelRatio()
       const pageDom = this.pageList[0]
       const pageDomHeight = Number(pageDom.style.height.replace('px', ''))
@@ -1880,19 +1908,20 @@ export class Draw {
     } else {
       for (let i = 0; i < this.rowList.length; i++) {
         const row = this.rowList[i]
+        const rowOffsetY = row.offsetY || 0
         if (
-          row.height + pageHeight > height ||
+          row.height + rowOffsetY + pageHeight > height ||
           this.rowList[i - 1]?.isPageBreak
         ) {
           if (Number.isInteger(maxPageNo) && pageNo >= maxPageNo!) {
             this.elementList = this.elementList.slice(0, row.startIndex)
             break
           }
-          pageHeight = marginHeight + row.height
+          pageHeight = marginHeight + row.height + rowOffsetY
           pageRowList.push([row])
           pageNo++
         } else {
-          pageHeight += row.height
+          pageHeight += row.height + rowOffsetY
           pageRowList[pageNo].push(row)
         }
       }
@@ -2363,6 +2392,8 @@ export class Draw {
     this._clearPage(pageNo)
     // 绘制背景
     this.background.render(ctx, pageNo)
+    // 绘制区域
+    this.area.render(ctx, pageNo)
     // 绘制页边距
     if (this.mode !== EditorMode.PRINT) {
       this.margin.render(ctx, pageNo)
@@ -2517,6 +2548,8 @@ export class Draw {
       this.pageRowList = this._computePageList()
       // 位置信息
       this.position.computePositionList()
+      // 区域信息
+      this.area.compute()
       // 搜索信息
       const searchKeyword = this.search.getSearchKeyword()
       if (searchKeyword) {