feat: add control disabled rule

docs/en/guide/schema.md

@@ -82,6 +82,7 @@ interface IElement {
     underline?: boolean;
     extension?: unknown;
     deletable?: boolean;
+    disabled?: boolean;
     code: string | null;
     min?: number;
     max?: number;

docs/guide/schema.md

@@ -82,6 +82,7 @@ interface IElement {
     underline?: boolean;
     extension?: unknown;
     deletable?: boolean;
+    disabled?: boolean;
     code: string | null;
     min?: number;
     max?: number;

src/editor/core/command/CommandAdapt.ts

@@ -242,8 +242,6 @@ export class CommandAdapt {
   }
 
   public painter(options: IPainterOption) {
-    const isReadonly = this.draw.isReadonly()
-    if (isReadonly) return
     const selection = this.range.getSelection()
     if (!selection) return
     const painterStyle: IElementStyle = {}
@@ -260,12 +258,16 @@ export class CommandAdapt {
   }
 
   public applyPainterStyle() {
+    const isDisabled =
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     this.canvasEvent.applyPainterStyle()
   }
 
   public format() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     selection.forEach(el => {
@@ -280,8 +282,9 @@ export class CommandAdapt {
   }
 
   public font(payload: string) {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     selection.forEach(el => {
@@ -293,8 +296,9 @@ export class CommandAdapt {
   public size(payload: number) {
     const { minSize, maxSize, defaultSize } = this.options
     if (payload < minSize || payload > maxSize) return
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getTextLikeSelectionElementList()
     if (!selection || !selection.length) return
     let isExistUpdate = false
@@ -314,8 +318,9 @@ export class CommandAdapt {
   }
 
   public sizeAdd() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getTextLikeSelectionElementList()
     if (!selection || !selection.length) return
     const { defaultSize, maxSize } = this.options
@@ -338,8 +343,9 @@ export class CommandAdapt {
   }
 
   public sizeMinus() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getTextLikeSelectionElementList()
     if (!selection || !selection.length) return
     const { defaultSize, minSize } = this.options
@@ -362,8 +368,9 @@ export class CommandAdapt {
   }
 
   public bold() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     const noBoldIndex = selection.findIndex(s => !s.bold)
@@ -374,8 +381,9 @@ export class CommandAdapt {
   }
 
   public italic() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     const noItalicIndex = selection.findIndex(s => !s.italic)
@@ -386,8 +394,9 @@ export class CommandAdapt {
   }
 
   public underline() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     const noUnderlineIndex = selection.findIndex(s => !s.underline)
@@ -401,8 +410,9 @@ export class CommandAdapt {
   }
 
   public strikeout() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     const noStrikeoutIndex = selection.findIndex(s => !s.strikeout)
@@ -416,8 +426,9 @@ export class CommandAdapt {
   }
 
   public superscript() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     const superscriptIndex = selection.findIndex(
@@ -445,8 +456,9 @@ export class CommandAdapt {
   }
 
   public subscript() {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     const subscriptIndex = selection.findIndex(
@@ -474,8 +486,9 @@ export class CommandAdapt {
   }
 
   public color(payload: string) {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     selection.forEach(el => {
@@ -488,8 +501,9 @@ export class CommandAdapt {
   }
 
   public highlight(payload: string) {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     selection.forEach(el => {
@@ -1447,6 +1461,8 @@ export class CommandAdapt {
   }
 
   public deleteHyperlink() {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
     // 获取超链接索引
     const hyperRange = this.getHyperlinkRange()
     if (!hyperRange) return
@@ -1468,6 +1484,8 @@ export class CommandAdapt {
   }
 
   public cancelHyperlink() {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
     // 获取超链接索引
     const hyperRange = this.getHyperlinkRange()
     if (!hyperRange) return
@@ -1491,6 +1509,8 @@ export class CommandAdapt {
   }
 
   public editHyperlink(payload: string) {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
     // 获取超链接索引
     const hyperRange = this.getHyperlinkRange()
     if (!hyperRange) return
@@ -1595,8 +1615,9 @@ export class CommandAdapt {
   }
 
   public image(payload: IDrawImagePayload) {
-    const isReadonly = this.draw.isReadonly()
+    const isDisabled =
-    if (isReadonly) return
+      this.draw.isReadonly() || this.control.isDisabledControl()
+    if (isDisabled) return
     const activeControl = this.control.getActiveControl()
     if (activeControl) return
     const { startIndex, endIndex } = this.range.getRange()

src/editor/core/draw/Draw.ts

@@ -560,7 +560,9 @@ export class Draw {
     // 判断是否在控件内
     const activeControl = this.control.getActiveControl()
     if (activeControl && !this.control.isRangInPostfix()) {
-      curIndex = activeControl.setValue(payload)
+      curIndex = activeControl.setValue(payload, undefined, {
+        isIgnoreDisabledRule: true
+      })
     } else {
       const elementList = this.getElementList()
       const isCollapsed = startIndex === endIndex

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

@@ -6,6 +6,7 @@ import {
   IControlInitOption,
   IControlInstance,
   IControlOption,
+  IControlRuleOption,
   IGetControlValueOption,
   IGetControlValueResult,
   ISetControlExtensionOption,
@@ -122,6 +123,10 @@ export class Control {
     return false
   }
 
+  public isDisabledControl(): boolean {
+    return !!this.activeControl?.getElement().control?.disabled
+  }
+
   public getContainer(): HTMLDivElement {
     return this.draw.getContainer()
   }
@@ -226,12 +231,19 @@ export class Control {
     }
   }
 
-  public repaintControl(curIndex: number) {
+  public repaintControl(curIndex?: number) {
+    if (curIndex === undefined) {
+      this.range.clearRange()
+      this.draw.render({
+        isSetCursor: false
+      })
+    } else {
       this.range.setRange(curIndex, curIndex)
       this.draw.render({
         curIndex
       })
     }
+  }
 
   public moveCursor(position: IControlInitOption): IMoveCursorResult {
     const { index, trIndex, tdIndex, tdValueIndex } = position
@@ -528,6 +540,9 @@ export class Control {
           range: fakeRange,
           elementList
         }
+        const controlRule: IControlRuleOption = {
+          isIgnoreDisabledRule: true
+        }
         if (type === ControlType.TEXT) {
           const formatValue = [{ value }]
           formatElementList(formatValue, {
@@ -536,31 +551,21 @@ export class Control {
           })
           const text = new TextControl(element, this)
           if (value) {
-            text.setValue(formatValue, controlContext)
+            text.setValue(formatValue, controlContext, controlRule)
           } else {
-            text.clearValue(controlContext)
+            text.clearValue(controlContext, controlRule)
           }
         } else if (type === ControlType.SELECT) {
           const select = new SelectControl(element, this)
           if (value) {
-            select.setSelect(value, controlContext)
+            select.setSelect(value, controlContext, controlRule)
           } else {
-            select.clearSelect(controlContext)
+            select.clearSelect(controlContext, controlRule)
           }
         } else if (type === ControlType.CHECKBOX) {
           const checkbox = new CheckboxControl(element, this)
-          const checkboxElementList = elementList.slice(
-            fakeRange.startIndex + 1,
-            fakeRange.endIndex + 1
-          )
           const codes = value?.split(',') || []
-          for (const checkElement of checkboxElementList) {
+          checkbox.setSelect(codes, controlContext, controlRule)
-            if (checkElement.controlComponent === ControlComponent.CHECKBOX) {
-              const checkboxItem = checkElement.checkbox!
-              checkboxItem.value = codes.includes(checkboxItem.code!)
-            }
-          }
-          checkbox.setSelect(controlContext)
         }
         // 修改后控件结束索引
         let newEndIndex = i

src/editor/core/draw/control/checkbox/CheckboxControl.ts

@@ -2,7 +2,8 @@ import { ControlComponent } from '../../../../dataset/enum/Control'
 import { KeyMap } from '../../../../dataset/enum/KeyMap'
 import {
   IControlContext,
-  IControlInstance
+  IControlInstance,
+  IControlRuleOption
 } from '../../../../interface/Control'
 import { IElement } from '../../../../interface/Element'
 import { Control } from '../Control'
@@ -66,12 +67,19 @@ export class CheckboxControl implements IControlInstance {
     return -1
   }
 
-  public setSelect(context: IControlContext = {}) {
+  public setSelect(
+    codes: string[],
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ) {
+    // 校验是否可以设置
+    if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
+      return
+    }
     const { control } = this.element
     const elementList = context.elementList || this.control.getElementList()
     const { startIndex } = context.range || this.control.getRange()
     const startElement = elementList[startIndex]
-    const data: string[] = []
     // 向左查找
     let preIndex = startIndex
     while (preIndex > 0) {
@@ -83,10 +91,8 @@ export class CheckboxControl implements IControlInstance {
         break
       }
       if (preElement.controlComponent === ControlComponent.CHECKBOX) {
-        const checkbox = preElement.checkbox
+        const checkbox = preElement.checkbox!
-        if (checkbox && checkbox.value && checkbox.code) {
+        checkbox.value = codes.includes(checkbox.code!)
-          data.unshift(checkbox.code)
-        }
       }
       preIndex--
     }
@@ -101,17 +107,19 @@ export class CheckboxControl implements IControlInstance {
         break
       }
       if (nextElement.controlComponent === ControlComponent.CHECKBOX) {
-        const checkbox = nextElement.checkbox
+        const checkbox = nextElement.checkbox!
-        if (checkbox && checkbox.value && checkbox.code) {
+        checkbox.value = codes.includes(checkbox.code!)
-          data.push(checkbox.code)
-        }
       }
       nextIndex++
     }
-    control!.code = data.join(',')
+    control!.code = codes.join(',')
+    this.control.repaintControl()
   }
 
   public keydown(evt: KeyboardEvent): number | null {
+    if (this.control.isDisabledControl()) {
+      return null
+    }
     const range = this.control.getRange()
     // 收缩边界到Value内
     this.control.shrinkBoundary()

src/editor/core/draw/control/select/SelectControl.ts

@@ -8,7 +8,8 @@ import { EditorComponent } from '../../../../dataset/enum/Editor'
 import { KeyMap } from '../../../../dataset/enum/KeyMap'
 import {
   IControlContext,
-  IControlInstance
+  IControlInstance,
+  IControlRuleOption
 } from '../../../../interface/Control'
 import { IElement } from '../../../../interface/Element'
 import { omitObject, pickObject, splitText } from '../../../../utils'
@@ -79,6 +80,9 @@ export class SelectControl implements IControlInstance {
   }
 
   public keydown(evt: KeyboardEvent): number | null {
+    if (this.control.isDisabledControl()) {
+      return null
+    }
     const elementList = this.control.getElementList()
     const range = this.control.getRange()
     // 收缩边界到Value内
@@ -129,6 +133,9 @@ export class SelectControl implements IControlInstance {
   }
 
   public cut(): number {
+    if (this.control.isDisabledControl()) {
+      return -1
+    }
     this.control.shrinkBoundary()
     const { startIndex, endIndex } = this.control.getRange()
     if (startIndex === endIndex) {
@@ -138,7 +145,14 @@ export class SelectControl implements IControlInstance {
     return this.clearSelect()
   }
 
-  public clearSelect(context: IControlContext = {}): number {
+  public clearSelect(
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    // 校验是否可以设置
+    if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
+      return -1
+    }
     const elementList = context.elementList || this.control.getElementList()
     const { startIndex } = context.range || this.control.getRange()
     const startElement = elementList[startIndex]
@@ -180,7 +194,15 @@ export class SelectControl implements IControlInstance {
     return preIndex
   }
 
-  public setSelect(code: string, context: IControlContext = {}) {
+  public setSelect(
+    code: string,
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ) {
+    // 校验是否可以设置
+    if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
+      return
+    }
     const control = this.element.control!
     const valueSets = control.valueSets
     if (!Array.isArray(valueSets) || !valueSets.length) return
@@ -195,6 +217,7 @@ export class SelectControl implements IControlInstance {
     )
     // 清空选项
     const prefixIndex = this.clearSelect(context)
+    if (!~prefixIndex) return
     this.control.removePlaceholder(prefixIndex, context)
     // 属性赋值元素-默认为前缀属性
     const propertyElement = omitObject(
@@ -266,7 +289,7 @@ export class SelectControl implements IControlInstance {
   }
 
   public awake() {
-    if (this.isPopup) return
+    if (this.isPopup || this.control.isDisabledControl()) return
     const { startIndex } = this.control.getRange()
     const elementList = this.control.getElementList()
     if (elementList[startIndex + 1]?.controlId !== this.element.controlId) {

src/editor/core/draw/control/text/TextControl.ts

@@ -3,7 +3,8 @@ import { ControlComponent } from '../../../../dataset/enum/Control'
 import { KeyMap } from '../../../../dataset/enum/KeyMap'
 import {
   IControlContext,
-  IControlInstance
+  IControlInstance,
+  IControlRuleOption
 } from '../../../../interface/Control'
 import { IElement } from '../../../../interface/Element'
 import { omitObject, pickObject } from '../../../../utils'
@@ -61,7 +62,15 @@ export class TextControl implements IControlInstance {
     return data
   }
 
-  public setValue(data: IElement[], context: IControlContext = {}): number {
+  public setValue(
+    data: IElement[],
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    // 校验是否可以设置
+    if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
+      return -1
+    }
     const elementList = context.elementList || this.control.getElementList()
     const range = context.range || this.control.getRange()
     // 收缩边界到Value内
@@ -97,7 +106,14 @@ export class TextControl implements IControlInstance {
     return start + data.length - 1
   }
 
-  public clearValue(context: IControlContext = {}): number {
+  public clearValue(
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    // 校验是否可以设置
+    if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
+      return -1
+    }
     const elementList = context.elementList || this.control.getElementList()
     const range = context.range || this.control.getRange()
     const { startIndex, endIndex } = range
@@ -112,6 +128,9 @@ export class TextControl implements IControlInstance {
   }
 
   public keydown(evt: KeyboardEvent): number | null {
+    if (this.control.isDisabledControl()) {
+      return null
+    }
     const elementList = this.control.getElementList()
     const range = this.control.getRange()
     // 收缩边界到Value内
@@ -190,6 +209,9 @@ export class TextControl implements IControlInstance {
   }
 
   public cut(): number {
+    if (this.control.isDisabledControl()) {
+      return -1
+    }
     this.control.shrinkBoundary()
     const { startIndex, endIndex } = this.control.getRange()
     if (startIndex === endIndex) {

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

@@ -27,7 +27,6 @@ export function input(data: string, host: CanvasEvent) {
     const cursor = draw.getCursor()
     cursor.clearAgentDomValue()
   }
-  const activeControl = control.getActiveControl()
   const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType
   const text = data.replaceAll(`\n`, ZERO)
   const rangeManager = draw.getRange()
@@ -65,7 +64,7 @@ export function input(data: string, host: CanvasEvent) {
   })
   // 控件-移除placeholder
   let curIndex: number
-  if (activeControl && !control.isRangInPostfix()) {
+  if (control.getActiveControl() && !control.isRangInPostfix()) {
     curIndex = control.setValue(inputData)
   } else {
     const start = startIndex + 1

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

@@ -67,26 +67,28 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
     // 复选框
     const isSetCheckbox = isDirectHitCheckbox && !isReadonly
     if (isSetCheckbox) {
-      const { checkbox } = curElement
+      const { checkbox, control } = curElement
-      if (checkbox) {
+      const codes = control?.code?.split(',') || []
-        checkbox.value = !checkbox.value
+      if (checkbox?.value) {
+        const codeIndex = codes.findIndex(c => c === checkbox.code)
+        codes.splice(codeIndex, 1)
       } else {
-        curElement.checkbox = {
+        if (checkbox?.code) {
-          value: true
+          codes.push(checkbox.code)
         }
       }
-      const control = draw.getControl()
+      const activeControl = draw.getControl().getActiveControl()
-      const activeControl = control.getActiveControl()
       if (activeControl instanceof CheckboxControl) {
-        activeControl.setSelect()
+        activeControl.setSelect(codes)
-      }
       }
+    } else {
       draw.render({
         curIndex,
-      isSubmitHistory: isSetCheckbox,
+        isCompute: false,
-      isSetCursor: !isDirectHitImage && !isDirectHitCheckbox,
+        isSubmitHistory: false,
-      isCompute: false
+        isSetCursor: !isDirectHitImage && !isDirectHitCheckbox
       })
+    }
     // 首字需定位到行首，非上一行最后一个字后
     if (hitLineStartIndex) {
       host.getDraw().getCursor().drawCursor({

src/editor/interface/Control.ts

@@ -23,6 +23,7 @@ export interface IControlCheckbox {
 
 export interface IControlRule {
   deletable?: boolean
+  disabled?: boolean
 }
 
 export interface IControlBasic {
@@ -66,7 +67,11 @@ export interface IControlInstance {
 
   getValue(): IElement[]
 
-  setValue(data: IElement[]): number
+  setValue(
+    data: IElement[],
+    context?: IControlContext,
+    options?: IControlRuleOption
+  ): number
 
   keydown(evt: KeyboardEvent): number | null
 
@@ -78,6 +83,10 @@ export interface IControlContext {
   elementList?: IElement[]
 }
 
+export interface IControlRuleOption {
+  isIgnoreDisabledRule?: boolean // 忽略禁用校验规则
+}
+
 export interface IGetControlValueOption {
   conceptId: string
 }