feat: add area hide option #1139

Author: Hufe921

docs/en/guide/schema.md

@@ -196,6 +196,7 @@ interface IElement {
   area?: {
     extension?: unknown;
     top?: number;
+    hide?: boolean;
     borderColor?: string;
     backgroundColor?: string;
     mode?: AreaMode;

docs/guide/schema.md

@@ -196,6 +196,7 @@ interface IElement {
   area?: {
     extension?: unknown;
     top?: number;
+    hide?: boolean;
     borderColor?: string;
     backgroundColor?: string;
     mode?: AreaMode;

src/editor/core/draw/Draw.ts

@@ -820,6 +820,7 @@ export class Draw {
           const deleteElement = elementList[deleteIndex]
           if (
             deleteElement?.control?.hide ||
+            deleteElement?.area?.hide ||
             (tdDeletable !== false &&
               deleteElement?.control?.deletable !== false &&
               deleteElement?.title?.deletable !== false &&
@@ -1377,7 +1378,10 @@ export class Draw {
       const isStartElement = curRow.elementList.length === 1
       x += isStartElement ? offsetX : 0
       y += isStartElement ? curRow.offsetY || 0 : 0
-      if (element.control?.hide && !this.isDesignMode()) {
+      if (
+        (element.control?.hide || element.area?.hide) &&
+        !this.isDesignMode()
+      ) {
         metrics.height =
           curRow.elementList[curRow.elementList.length - 1]?.metrics.height ||
           this.options.defaultSize * scale
@@ -1829,12 +1833,12 @@ export class Draw {
         preElement?.imgDisplay === ImageDisplay.INLINE ||
         element.imgDisplay === ImageDisplay.INLINE ||
         preElement?.listId !== element.listId ||
-        preElement?.areaId !== element.areaId ||
+        (preElement?.areaId !== element.areaId && !element.area?.hide) ||
         (element.control?.flexDirection === FlexDirection.COLUMN &&
           (element.controlComponent === ControlComponent.CHECKBOX ||
             element.controlComponent === ControlComponent.RADIO) &&
           preElement?.controlComponent === ControlComponent.VALUE) ||
-        (i !== 0 && element.value === ZERO)
+        (i !== 0 && element.value === ZERO && !element.area?.hide)
       // 是否宽度不足导致换行
       const isWidthNotEnough = curRowWidth > availableWidth
       const isWrap = isForceBreak || isWidthNotEnough
@@ -2127,7 +2131,10 @@ export class Draw {
         } = positionList[curRow.startIndex + j]
         const preElement = curRow.elementList[j - 1]
         // 元素绘制
-        if (element.control?.hide && !this.isDesignMode()) {
+        if (
+          (element.control?.hide || element.area?.hide) &&
+          !this.isDesignMode()
+        ) {
           // 控件隐藏时不绘制
           this.textParticle.complete()
         } else if (element.type === ElementType.IMAGE) {

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

@@ -554,7 +554,7 @@ export class Control {
       element = elementList[index]
     }
     // 隐藏元素移动光标
-    if (element.control?.hide) {
+    if (element.control?.hide || element.area?.hide) {
       const nonHideIndex = getNonHideElementIndex(elementList, newIndex)
       return {
         newIndex: nonHideIndex,
@@ -636,7 +636,11 @@ export class Control {
     const elementList = context.elementList || this.getElementList()
     const startElement = elementList[startIndex]
     // 设计模式 || 元素隐藏 => 不验证删除权限
-    if (!this.draw.isDesignMode() && !startElement?.control?.hide) {
+    if (
+      !this.draw.isDesignMode() &&
+      !startElement?.control?.hide &&
+      !startElement?.area?.hide
+    ) {
       const { deletable = true } = startElement.control!
       if (!deletable) return null
     }

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

@@ -2,6 +2,7 @@ import { Draw } from '../Draw'
 import { deepClone, getUUID, isNonValue } from '../../../utils'
 import { ElementType } from '../../../dataset/enum/Element'
 import {
+  IArea,
   IAreaInfo,
   IGetAreaValueOption,
   IGetAreaValueResult,
@@ -105,7 +106,10 @@ export class Area {
     const width = this.draw.getInnerWidth()
     for (const areaInfoItem of this.areaInfoMap) {
       const { area, positionList } = areaInfoItem[1]
-      if (!area?.backgroundColor && !area?.borderColor && !area?.placeholder) {
+      if (
+        area.hide ||
+        (!area?.backgroundColor && !area?.borderColor && !area?.placeholder)
+      ) {
         continue
       }
       const pagePositionList = positionList.filter(p => p.pageNo === pageNo)
@@ -211,22 +215,18 @@ export class Area {
     if (!areaInfo.area) {
       areaInfo.area = {}
     }
-    // 是否计算
+    // 需要计算的属性
     let isCompute = false
-    // 修改属性
-    if (payload.properties.mode) {
-      areaInfo.area.mode = payload.properties.mode
-    }
-    if (payload.properties.borderColor) {
-      areaInfo.area.borderColor = payload.properties.borderColor
-    }
-    if (payload.properties.backgroundColor) {
-      areaInfo.area.backgroundColor = payload.properties.backgroundColor
-    }
-    if (!isNonValue(payload.properties.top)) {
-      isCompute = true
-      areaInfo.area.top = payload.properties.top
-    }
+    const computeProps: Array<keyof IArea> = ['top', 'hide']
+    // 循环设置
+    Object.entries(payload.properties).forEach(([key, value]) => {
+      if (isNonValue(value)) return
+      const propKey = key as keyof IArea
+      areaInfo.area[propKey] = value
+      if (computeProps.includes(propKey)) {
+        isCompute = true
+      }
+    })
     this.draw.render({
       isCompute,
       isSetCursor: false

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

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

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

@@ -14,7 +14,7 @@ export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
     const range = rangeManager.getRange()
     const elementList = draw.getElementList()
     const element = elementList[range.startIndex]
-    if (element.control?.hide) {
+    if (element.control?.hide || element.area?.hide) {
       const newIndex = control.removeControl(range.startIndex)
       if (newIndex) {
         // 更新选区信息

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

@@ -12,7 +12,7 @@ export function del(evt: KeyboardEvent, host: CanvasEvent) {
   const control = draw.getControl()
   if (rangeManager.getIsCollapsed()) {
     const nextElement = elementList[startIndex + 1]
-    if (nextElement?.control?.hide) {
+    if (nextElement?.control?.hide || nextElement?.area?.hide) {
       const newIndex = control.removeControl(startIndex + 1)
       if (newIndex) {
         // 更新位置信息

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

@@ -62,7 +62,10 @@ function pickText(elementList: IElement[]): string {
         }
         text += pickText(valueList)
       }
-    } else if (!element.type || element.type === ElementType.TEXT) {
+    } else if (
+      (!element.type || element.type === ElementType.TEXT) &&
+      !element.area?.hide
+    ) {
       text += element.value
     }
     e++

src/editor/interface/Area.ts

@@ -16,6 +16,7 @@ export interface IAreaStyle {
 
 export interface IAreaRule {
   mode?: AreaMode
+  hide?: boolean
   deletable?: boolean
 }