feat: add hide property to control element #979

docs/en/guide/schema.md

@@ -110,6 +110,7 @@ interface IElement {
     deletable?: boolean;
     disabled?: boolean;
     pasteDisabled?: boolean;
+    hide?: boolean;
     code: string | null;
     min?: number;
     max?: number;

docs/guide/schema.md

@@ -110,6 +110,7 @@ interface IElement {
     deletable?: boolean;
     disabled?: boolean;
     pasteDisabled?: boolean;
+    hide?: boolean;
     code: string | null;
     min?: number;
     max?: number;

src/editor/core/draw/Draw.ts

@@ -782,6 +782,7 @@ export class Draw {
           const deleteElement = elementList[deleteIndex]
           if (
             isDesignMode ||
+            deleteElement?.control?.hide ||
             (tdDeletable !== false &&
               deleteElement?.control?.deletable !== false &&
               deleteElement?.title?.deletable !== false)
@@ -1322,7 +1323,11 @@ export class Draw {
       const isStartElement = curRow.elementList.length === 1
       x += isStartElement ? offsetX : 0
       y += isStartElement ? curRow.offsetY || 0 : 0
-      if (
+      if (element.control?.hide && !this.isDesignMode()) {
+        metrics.height =
+          curRow.elementList[curRow.elementList.length - 1]?.metrics.height ||
+          this.options.defaultSize * scale
+      } else if (
         element.type === ElementType.IMAGE ||
         element.type === ElementType.LATEX
       ) {
@@ -2057,7 +2062,10 @@ export class Draw {
         } = positionList[curRow.startIndex + j]
         const preElement = curRow.elementList[j - 1]
         // 元素绘制
-        if (element.type === ElementType.IMAGE) {
+        if (element.control?.hide && !this.isDesignMode()) {
+          // 控件隐藏时不绘制
+          this.textParticle.complete()
+        } else if (element.type === ElementType.IMAGE) {
           this.textParticle.complete()
           // 浮动图片单独绘制
           if (

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

@@ -36,6 +36,7 @@ import { deepClone, omitObject, pickObject, splitText } from '../../../utils'
 import {
   formatElementContext,
   formatElementList,
+  getNonHideElementIndex,
   pickElementAttr,
   zipElementList
 } from '../../../utils/element'
@@ -539,6 +540,15 @@ export class Control {
     } else {
       element = elementList[index]
     }
+    // 隐藏元素移动光标
+    if (element.control?.hide) {
+      const nonHideIndex = getNonHideElementIndex(elementList, newIndex)
+      return {
+        newIndex: nonHideIndex,
+        newElement: elementList[nonHideIndex]
+      }
+    }
+    // 控件内移动光标
     if (element.controlComponent === ControlComponent.VALUE) {
       // VALUE-无需移动
       return {

src/editor/core/draw/interactive/Search.ts

@@ -215,7 +215,8 @@ export class Search {
         .map(e =>
           !e.type ||
           (TEXTLIKE_ELEMENT_TYPE.includes(e.type) &&
-            e.controlComponent !== ControlComponent.CHECKBOX)
+            e.controlComponent !== ControlComponent.CHECKBOX &&
+            !e.control?.hide)
             ? e.value
             : ZERO
         )

src/editor/core/event/handlers/keydown/backspace.ts

@@ -7,8 +7,28 @@ export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
   // 可输入性验证
   const rangeManager = draw.getRange()
   if (!rangeManager.getIsCanInput()) return
-  const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange()
+  // 隐藏控件删除
   const control = draw.getControl()
+  const position = draw.getPosition()
+  if (rangeManager.getIsCollapsed()) {
+    const range = rangeManager.getRange()
+    const elementList = draw.getElementList()
+    const element = elementList[range.startIndex]
+    if (element.control?.hide) {
+      const newIndex = control.removeControl(range.startIndex)
+      if (newIndex) {
+        // 更新选区信息
+        range.startIndex = newIndex
+        range.endIndex = newIndex
+        rangeManager.replaceRange(range)
+        // 更新位置信息
+        const positionList = position.getPositionList()
+        position.setCursorPosition(positionList[newIndex])
+      }
+    }
+  }
+  // 删除操作
+  const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange()
   let curIndex: number | null
   if (isCrossRowCol) {
     // 表格跨行列选中时清空单元格内容
@@ -38,7 +58,6 @@ export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
     }
   } else {
     // 普通元素删除
-    const position = draw.getPosition()
     const cursorPosition = position.getCursorPosition()
     if (!cursorPosition) return
     const { index } = cursorPosition

src/editor/core/event/handlers/keydown/delete.ts

@@ -7,8 +7,22 @@ export function del(evt: KeyboardEvent, host: CanvasEvent) {
   const rangeManager = draw.getRange()
   if (!rangeManager.getIsCanInput()) return
   const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange()
+  // 隐藏控件删除
   const elementList = draw.getElementList()
   const control = draw.getControl()
+  if (rangeManager.getIsCollapsed()) {
+    const nextElement = elementList[startIndex + 1]
+    if (nextElement?.control?.hide) {
+      const newIndex = control.removeControl(startIndex + 1)
+      if (newIndex) {
+        // 更新位置信息
+        const position = draw.getPosition()
+        const positionList = position.getPositionList()
+        position.setCursorPosition(positionList[newIndex])
+      }
+    }
+  }
+  // 删除操作
   let curIndex: number | null
   if (isCrossRowCol) {
     // 表格跨行列选中时清空单元格内容

src/editor/core/event/handlers/keydown/left.ts

@@ -2,6 +2,7 @@ import { EditorMode } from '../../../..'
 import { ControlComponent } from '../../../../dataset/enum/Control'
 import { ElementType } from '../../../../dataset/enum/Element'
 import { MoveDirection } from '../../../../dataset/enum/Observer'
+import { getNonHideElementIndex } from '../../../../utils/element'
 import { isMod } from '../../../../utils/hotkey'
 import { CanvasEvent } from '../../CanvasEvent'
 
@@ -144,6 +145,11 @@ export function left(evt: KeyboardEvent, host: CanvasEvent) {
   }
   // 执行跳转
   if (!~anchorStartIndex || !~anchorEndIndex) return
+  // 隐藏元素跳过
+  const newElementList = draw.getElementList()
+  anchorStartIndex = getNonHideElementIndex(newElementList, anchorStartIndex)
+  anchorEndIndex = getNonHideElementIndex(newElementList, anchorEndIndex)
+  // 设置上下文
   rangeManager.setRange(anchorStartIndex, anchorEndIndex)
   const isAnchorCollapsed = anchorStartIndex === anchorEndIndex
   draw.render({

src/editor/core/event/handlers/keydown/right.ts

@@ -1,7 +1,9 @@
+import { LocationPosition } from '../../../../dataset/enum/Common'
 import { ControlComponent } from '../../../../dataset/enum/Control'
 import { EditorMode } from '../../../../dataset/enum/Editor'
 import { ElementType } from '../../../../dataset/enum/Element'
 import { MoveDirection } from '../../../../dataset/enum/Observer'
+import { getNonHideElementIndex } from '../../../../utils/element'
 import { isMod } from '../../../../utils/hotkey'
 import { CanvasEvent } from '../../CanvasEvent'
 
@@ -151,6 +153,19 @@ export function right(evt: KeyboardEvent, host: CanvasEvent) {
   ) {
     return
   }
+  // 隐藏元素跳过
+  const newElementList = draw.getElementList()
+  anchorStartIndex = getNonHideElementIndex(
+    newElementList,
+    anchorStartIndex,
+    LocationPosition.AFTER
+  )
+  anchorEndIndex = getNonHideElementIndex(
+    newElementList,
+    anchorEndIndex,
+    LocationPosition.AFTER
+  )
+  // 设置上下文
   rangeManager.setRange(anchorStartIndex, anchorEndIndex)
   const isAnchorCollapsed = anchorStartIndex === anchorEndIndex
   draw.render({

src/editor/core/worker/works/wordCount.ts

@@ -45,21 +45,23 @@ function pickText(elementList: IElement[]): string {
       }
       text += pickText(valueList)
     } else if (element.controlId) {
-      const controlId = element.controlId
-      const valueList: IElement[] = []
-      while (e < elementList.length) {
-        const controlE = elementList[e]
-        if (controlId !== controlE.controlId) {
-          e--
-          break
-        }
-        if (controlE.controlComponent === ControlComponent.VALUE) {
-          delete controlE.controlId
-          valueList.push(controlE)
+      if (!element.control?.hide) {
+        const controlId = element.controlId
+        const valueList: IElement[] = []
+        while (e < elementList.length) {
+          const controlE = elementList[e]
+          if (controlId !== controlE.controlId) {
+            e--
+            break
+          }
+          if (controlE.controlComponent === ControlComponent.VALUE) {
+            delete controlE.controlId
+            valueList.push(controlE)
+          }
+          e++
         }
-        e++
+        text += pickText(valueList)
       }
-      text += pickText(valueList)
     } else if (!element.type || element.type === ElementType.TEXT) {
       text += element.value
     }

src/editor/interface/Control.ts

@@ -62,6 +62,7 @@ export interface IControlRule {
   deletable?: boolean
   disabled?: boolean
   pasteDisabled?: boolean
+  hide?: boolean
 }
 
 export interface IControlBasic {

src/editor/utils/element.ts

@@ -16,6 +16,7 @@ import {
   ImageDisplay,
   ListStyle,
   ListType,
+  LocationPosition,
   RowFlex,
   TableBorder,
   TdBorder
@@ -1706,3 +1707,30 @@ export function deleteSurroundElementList(
     }
   }
 }
+
+export function getNonHideElementIndex(
+  elementList: IElement[],
+  index: number,
+  position: LocationPosition = LocationPosition.BEFORE
+) {
+  if (!elementList[index]?.control?.hide) return index
+  let i = index
+  if (position === LocationPosition.BEFORE) {
+    i = index - 1
+    while (i > 0) {
+      if (!elementList[i]?.control?.hide) {
+        return i
+      }
+      i--
+    }
+  } else {
+    i = index + 1
+    while (i < elementList.length) {
+      if (!elementList[i]?.control?.hide) {
+        return i
+      }
+      i++
+    }
+  }
+  return i
+}