feat: add form mode #221

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