feat: add form mode #221

docs/en/guide/option.md

@@ -14,7 +14,7 @@ new Editor(container, IEditorData | IElement[], {
 
 ```typescript
 interface IEditorOption {
-  mode?: EditorMode // Editor mode: Edit, Clean (Visual aids are not displayed.) For example: page break), read-only. default: Edit
+  mode?: EditorMode // Editor mode: Edit, Clean (Visual aids are not displayed, For example: page break), ReadOnly, Form (Only editable within the control). default: Edit
   defaultType?: string // Default element type. default: TEXT
   defaultFont?: string // Default font. default: Yahei
   defaultSize?: number // Default font size. default: 16

docs/guide/command-execute.md

@@ -11,7 +11,7 @@ instance.command.commandName()
 
 ## executeMode
 
-功能：切换编辑器模式（编辑、清洁、只读）
+功能：切换编辑器模式（编辑、清洁、只读、表单）
 
 用法：
 
@@ -745,9 +745,11 @@ instance.command.executeWordTool()
 ```
 
 ## executeSetHTML
+
 功能：设置编辑器 HTML 数据
 
 用法：
+
 ```javascript
 instance.command.executeSetHTML(payload: Partial<IEditorHTML)
 ```

docs/guide/option.md

@@ -14,7 +14,7 @@ new Editor(container, IEditorData | IElement[], {
 
 ```typescript
 interface IEditorOption {
-  mode?: EditorMode // 编辑器模式：编辑、清洁（不显示视觉辅助元素。如：分页符）、只读。默认：编辑
+  mode?: EditorMode // 编辑器模式：编辑、清洁（不显示视觉辅助元素。如：分页符）、只读、表单（仅控件内可编辑）。默认：编辑
   defaultType?: string // 默认元素类型。默认：TEXT
   defaultFont?: string // 默认字体。默认：Yahei
   defaultSize?: number // 默认字号。默认：16

index.html

@@ -331,7 +331,7 @@
         <span>页面：<span class="page-no">1</span>/<span class="page-size">1</span></span>
         <span>字数：<span class="word-count">0</span></span>
       </div>
-      <div class="editor-mode" title="编辑模式(编辑、清洁、只读)">编辑模式</div>
+      <div class="editor-mode" title="编辑模式(编辑、清洁、只读、表单)">编辑模式</div>
       <div>
         <div class="page-scale-minus" title="缩小(Ctrl+-)">
           <i></i>

src/editor/core/draw/Draw.ts

@@ -233,7 +233,14 @@ export class Draw {
   }
 
   public isReadonly() {
-    return this.mode === EditorMode.READONLY
+    switch (this.mode) {
+      case EditorMode.READONLY:
+        return true
+      case EditorMode.FORM:
+        return !this.control.isRangeWithinControl()
+      default:
+        return false
+    }
   }
 
   public getOriginalWidth(): number {

src/editor/core/draw/control/Control.ts

@@ -76,6 +76,24 @@ export class Control {
     return element.controlComponent === ControlComponent.POSTFIX
   }
 
+  // 判断选区是否在控件内
+  public isRangeWithinControl(): boolean {
+    const { startIndex, endIndex } = this.getRange()
+    if (!~startIndex && !~endIndex) return false
+    const elementList = this.getElementList()
+    const startElement = elementList[startIndex]
+    const endElement = elementList[endIndex]
+    if (
+      (startElement.type === ElementType.CONTROL ||
+        endElement.type === ElementType.CONTROL) &&
+      endElement.controlComponent !== ControlComponent.POSTFIX &&
+      startElement.controlId === endElement.controlId
+    ) {
+      return true
+    }
+    return false
+  }
+
   public getContainer(): HTMLDivElement {
     return this.draw.getContainer()
   }

src/editor/core/event/handlers/mouseup.ts

@@ -22,6 +22,7 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
   // 判断是否允许拖放
   if (host.isAllowDrop) {
     const draw = host.getDraw()
+    if (draw.isReadonly()) return
     const position = draw.getPosition()
     const positionList = position.getPositionList()
     const rangeManager = draw.getRange()

src/editor/core/position/Position.ts

@@ -13,7 +13,7 @@ import {
   IPositionContext
 } from '../../interface/Position'
 import { Draw } from '../draw/Draw'
-import { EditorZone } from '../../dataset/enum/Editor'
+import { EditorMode, EditorZone } from '../../dataset/enum/Editor'
 
 export class Position {
   private cursorPosition: IElementPosition | null
@@ -463,11 +463,13 @@ export class Position {
   public adjustPositionContext(
     payload: IGetPositionByXYPayload
   ): ICurrentPosition | null {
-    const isReadonly = this.draw.isReadonly()
     const positionResult = this.getPositionByXY(payload)
     if (!~positionResult.index) return null
     // 移动控件内光标
-    if (positionResult.isControl && !isReadonly) {
+    if (
+      positionResult.isControl &&
+      this.draw.getMode() !== EditorMode.READONLY
+    ) {
       const { index, isTable, trIndex, tdIndex, tdValueIndex } = positionResult
       const control = this.draw.getControl()
       const { newIndex } = control.moveCursor({

src/editor/dataset/enum/Editor.ts

@@ -16,7 +16,8 @@ export enum EditorContext {
 export enum EditorMode {
   EDIT = 'edit',
   CLEAN = 'clean',
-  READONLY = 'readonly'
+  READONLY = 'readonly',
+  FORM = 'form'
 }
 
 export enum EditorZone {

src/main.ts

@@ -1204,12 +1204,16 @@ window.onload = function () {
     {
       mode: EditorMode.READONLY,
       name: '只读模式'
+    },
+    {
+      mode: EditorMode.FORM,
+      name: '表单模式'
     }
   ]
   const modeElement = document.querySelector<HTMLDivElement>('.editor-mode')!
   modeElement.onclick = function () {
     // 模式选择循环
-    modeIndex === 2 ? (modeIndex = 0) : modeIndex++
+    modeIndex === modeList.length - 1 ? (modeIndex = 0) : modeIndex++
     // 设置模式
     const { name, mode } = modeList[modeIndex]
     modeElement.innerText = name