feat: control element support set row flex #839

docs/en/guide/schema.md

@@ -101,6 +101,7 @@ interface IElement {
     border?: boolean;
     extension?: unknown;
     indentation?: ControlIndentation;
+    rowFlex?: RowFlex
     deletable?: boolean;
     disabled?: boolean;
     code: string | null;

docs/guide/schema.md

@@ -101,6 +101,7 @@ interface IElement {
     border?: boolean;
     extension?: unknown;
     indentation?: ControlIndentation;
+    rowFlex?: RowFlex
     deletable?: boolean;
     disabled?: boolean;
     code: string | null;

src/editor/core/draw/Draw.ts

@@ -1646,16 +1646,13 @@ export class Draw {
           controlRealWidth += metrics.width
         }
         if (rowElement.controlComponent === ControlComponent.POSTFIX) {
-          const extraWidth = rowElement.control.minWidth - controlRealWidth
-          // 消费超出实际最小宽度的长度
-          if (extraWidth > 0) {
-            // 超出行宽时截断
-            const rowRemainingWidth =
-              availableWidth - curRow.width - metrics.width
-            const left = Math.min(rowRemainingWidth, extraWidth) * scale
-            rowElement.left = left
-            curRow.width += left
-          }
+          // 设置最小宽度控件属性（字符偏移量）
+          this.control.setMinWidthControlInfo({
+            row: curRow,
+            rowElement,
+            availableWidth,
+            controlRealWidth
+          })
           controlRealWidth = 0
         }
       }
@@ -2142,10 +2139,9 @@ export class Draw {
             offsetY = this.subscriptParticle.getOffsetY(element)
           }
           // 占位符不参与颜色计算
-          const color =
-            element.controlComponent === ControlComponent.PLACEHOLDER
-              ? undefined
-              : element.color
+          const color = element.control?.underline
+            ? this.options.underlineColor
+            : element.color
           this.underline.recordFillInfo(
             ctx,
             x - offsetX,

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

@@ -17,6 +17,7 @@ import {
   IRepaintControlOption,
   ISetControlExtensionOption,
   ISetControlProperties,
+  ISetControlRowFlexOption,
   ISetControlValueOption
 } from '../../../interface/Control'
 import { IEditorData, IEditorOption } from '../../../interface/Editor'
@@ -54,6 +55,8 @@ import {
   LIST_CONTEXT_ATTR,
   TITLE_CONTEXT_ATTR
 } from '../../../dataset/constant/Element'
+import { IRowElement } from '../../../interface/Row'
+import { RowFlex } from '../../../dataset/enum/Row'
 
 interface IMoveCursorResult {
   newIndex: number
@@ -1228,4 +1231,60 @@ export class Control {
       direction
     })
   }
+
+  public setMinWidthControlInfo(option: ISetControlRowFlexOption) {
+    const { row, rowElement, controlRealWidth, availableWidth } = option
+    if (!rowElement.control?.minWidth) return
+    const { scale } = this.options
+    const controlMinWidth = rowElement.control.minWidth * scale
+    // 设置首字符偏移量：如果控件内设置对齐方式&&存在设置最小宽度
+    let controlFirstElement: IRowElement | null = null
+    if (
+      rowElement.control?.minWidth &&
+      (rowElement.control?.rowFlex === RowFlex.CENTER ||
+        rowElement.control?.rowFlex === RowFlex.RIGHT)
+    ) {
+      // 计算当前控件内容宽度是否超出最小宽度设置
+      let controlContentWidth = rowElement.metrics.width
+      let controlElementIndex = row.elementList.length - 1
+      while (controlElementIndex >= 0) {
+        const controlRowElement = row.elementList[controlElementIndex]
+        controlContentWidth += controlRowElement.metrics.width
+        // 找到首字符结束循环
+        if (
+          row.elementList[controlElementIndex - 1]?.controlComponent ===
+          ControlComponent.PREFIX
+        ) {
+          controlFirstElement = controlRowElement
+          break
+        }
+        controlElementIndex--
+      }
+      // 计算首字符偏移量
+      if (controlFirstElement) {
+        if (controlContentWidth < controlMinWidth) {
+          if (rowElement.control.rowFlex === RowFlex.CENTER) {
+            controlFirstElement.left =
+              (controlMinWidth - controlContentWidth) / 2
+          } else if (rowElement.control.rowFlex === RowFlex.RIGHT) {
+            // 最小宽度 - 实际宽度 - 后缀元素宽度
+            controlFirstElement.left =
+              controlMinWidth - controlContentWidth - rowElement.metrics.width
+          }
+        }
+      }
+    }
+    // 设置后缀偏移量：消费小于实际最小宽度
+    const extraWidth = controlMinWidth - controlRealWidth
+    if (extraWidth > 0) {
+      const controlFirstElementLeft = controlFirstElement?.left || 0
+      // 超出行宽时截断
+      const rowRemainingWidth =
+        availableWidth - row.width - rowElement.metrics.width
+      const left = Math.min(rowRemainingWidth, extraWidth)
+      // 后缀偏移量需减去首字符的偏移量，避免重复偏移
+      rowElement.left = left - controlFirstElementLeft
+      row.width += left - controlFirstElementLeft
+    }
+  }
 }

src/editor/interface/Control.ts

@@ -2,10 +2,12 @@ import { LocationPosition } from '../dataset/enum/Common'
 import { ControlType, ControlIndentation } from '../dataset/enum/Control'
 import { EditorZone } from '../dataset/enum/Editor'
 import { MoveDirection } from '../dataset/enum/Observer'
+import { RowFlex } from '../dataset/enum/Row'
 import { IDrawOption } from './Draw'
 import { IElement } from './Element'
 import { IPositionContext } from './Position'
 import { IRange } from './Range'
+import { IRow, IRowElement } from './Row'
 
 export interface IValueSet {
   value: string
@@ -62,6 +64,7 @@ export interface IControlBasic {
   border?: boolean
   extension?: unknown
   indentation?: ControlIndentation
+  rowFlex?: RowFlex
 }
 
 export interface IControlStyle {
@@ -175,3 +178,10 @@ export interface IInitNextControlOption {
 export interface ILocationControlOption {
   position: LocationPosition
 }
+
+export interface ISetControlRowFlexOption {
+  row: IRow
+  rowElement: IRowElement
+  availableWidth: number
+  controlRealWidth: number
+}