feat: draw white space marker #1329

Author: Hufe921

docs/en/guide/option.md

@@ -74,6 +74,7 @@ interface IEditorOption {
   zone?: IZoneOption // Zone option。{tipDisabled?:boolean;}
   background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。default: {color: '#FFFFFF'}
   lineBreak?: ILineBreakOption // LineBreak option. {disabled?:boolean; color?:string; lineWidth?:number;}
+  whiteSpace?: IWhiteSpaceOption // WhiteSpace option. {disabled?:boolean; color?:string; radius?:number;}
   separator?: ISeparatorOption // Separator option. {lineWidth?:number; strokeStyle?:string;}
   lineNumber?: ILineNumberOption // LineNumber option. {size?:number; font?:string; color?:string; disabled?:boolean; right?:number}
   pageBorder?: IPageBorderOption // PageBorder option. {color?:string; lineWidth:number; padding?:IPadding; disabled?:boolean;}

docs/guide/option.md

@@ -74,6 +74,7 @@ interface IEditorOption {
   zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;}
   background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。默认：{color: '#FFFFFF'}
   lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;}
+  whiteSpace?: IWhiteSpaceOption // 空格符配置。{disabled?:boolean; color?:string; radius?:number;}
   separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;}
   lineNumber?: ILineNumberOption // 行号配置。{size?:number; font?:string; color?:string; disabled?:boolean; right?:number}
   pageBorder?: IPageBorderOption // 页面边框配置。{color?:string; lineWidth:number; padding?:IPadding; disabled?:boolean;}

src/editor/core/draw/Draw.ts

@@ -103,8 +103,12 @@ import { EventBusMap } from '../../interface/EventBus'
 import { Group } from './interactive/Group'
 import { Override } from '../override/Override'
 import { FlexDirection, ImageDisplay } from '../../dataset/enum/Common'
-import { PUNCTUATION_REG } from '../../dataset/constant/Regular'
+import {
+  PUNCTUATION_REG,
+  WHITE_SPACE_REG
+} from '../../dataset/constant/Regular'
 import { LineBreakParticle } from './particle/LineBreakParticle'
+import { WhiteSpaceParticle } from './particle/WhiteSpaceParticle'
 import { MouseObserver } from '../observer/MouseObserver'
 import { LineNumber } from './frame/LineNumber'
 import { PageBorder } from './frame/PageBorder'
@@ -171,6 +175,7 @@ export class Draw {
   private blockParticle: BlockParticle
   private listParticle: ListParticle
   private lineBreakParticle: LineBreakParticle
+  private whiteSpaceParticle: WhiteSpaceParticle
   private control: Control
   private pageBorder: PageBorder
   private workerManager: WorkerManager
@@ -253,6 +258,7 @@ export class Draw {
     this.blockParticle = new BlockParticle(this)
     this.listParticle = new ListParticle(this)
     this.lineBreakParticle = new LineBreakParticle(this)
+    this.whiteSpaceParticle = new WhiteSpaceParticle(this)
     this.control = new Control(this)
     this.pageBorder = new PageBorder(this)
     this.graffiti = new Graffiti(this, data.graffiti)
@@ -2128,7 +2134,8 @@ export class Draw {
       scale,
       table: { tdPadding },
       group,
-      lineBreak
+      lineBreak,
+      whiteSpace
     } = this.options
     const {
       rowList,
@@ -2137,7 +2144,8 @@ export class Draw {
       positionList,
       startIndex,
       zone,
-      isDrawLineBreak = !lineBreak.disabled
+      isDrawLineBreak = !lineBreak.disabled,
+      isDrawWhiteSpace = !whiteSpace.disabled
     } = payload
     const isPrintMode = this.isPrintMode()
     const isGraffitiMode = this.isGraffitiMode()
@@ -2279,6 +2287,10 @@ export class Draw {
         ) {
           this.lineBreakParticle.render(ctx, element, x, y + curRow.height / 2)
         }
+        // 空白符绘制
+        if (isDrawWhiteSpace && WHITE_SPACE_REG.test(element.value)) {
+          this.whiteSpaceParticle.render(ctx, element, x, y + curRow.height / 2)
+        }
         // 边框绘制（目前仅支持控件）
         if (element.control?.border) {
           // 不同控件边框立刻绘制

src/editor/core/draw/particle/WhiteSpaceParticle.ts

@@ -0,0 +1,32 @@
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { IRowElement } from '../../../interface/Row'
+import { Draw } from '../Draw'
+
+export class WhiteSpaceParticle {
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.options = draw.getOptions()
+  }
+
+  public render(
+    ctx: CanvasRenderingContext2D,
+    element: IRowElement,
+    x: number,
+    y: number
+  ) {
+    const {
+      scale,
+      whiteSpace: { color, radius }
+    } = this.options
+    const metrics = element.metrics
+    ctx.save()
+    ctx.fillStyle = color
+    ctx.beginPath()
+    ctx.arc(x + metrics.width / 2, y, radius * scale, 0, Math.PI * 2)
+    ctx.fill()
+    ctx.closePath()
+    ctx.restore()
+  }
+}

src/editor/dataset/constant/Regular.ts

@@ -19,3 +19,5 @@ export const PUNCTUATION_REG =
 export const START_LINE_BREAK_REG = new RegExp(`^[${ZERO}\n]`)
 
 export const NON_NUMBER_STR_REG = /[^0-9\+\-\.eE,]/
+
+export const WHITE_SPACE_REG = /\s/

src/editor/dataset/constant/WhiteSpace.ts

@@ -0,0 +1,7 @@
+import { IWhiteSpaceOption } from '../../interface/WhiteSpace'
+
+export const defaultWhiteSpaceOption: Readonly<Required<IWhiteSpaceOption>> = {
+  disabled: true,
+  color: '#CCCCCC',
+  radius: 1
+}

src/editor/interface/Draw.ts

@@ -37,6 +37,7 @@ export interface IDrawRowPayload {
   innerWidth: number
   zone?: EditorZone
   isDrawLineBreak?: boolean
+  isDrawWhiteSpace?: boolean
 }
 
 export interface IDrawFloatPayload {

src/editor/interface/Editor.ts

@@ -30,6 +30,7 @@ import { IElement } from './Element'
 import { LocationPosition } from '../dataset/enum/Common'
 import { IRange } from './Range'
 import { IGraffitiData, IGraffitiOption } from './Graffiti'
+import { IWhiteSpaceOption } from './WhiteSpace'
 
 export interface IEditorData {
   header?: IElement[]
@@ -99,6 +100,7 @@ export interface IEditorOption {
   zone?: IZoneOption
   background?: IBackgroundOption
   lineBreak?: ILineBreakOption
+  whiteSpace?: IWhiteSpaceOption
   separator?: ISeparatorOption
   lineNumber?: ILineNumberOption
   pageBorder?: IPageBorderOption

src/editor/interface/WhiteSpace.ts

@@ -0,0 +1,5 @@
+export interface IWhiteSpaceOption {
+  disabled?: boolean
+  color?: string
+  radius?: number
+}

src/editor/utils/option.ts

@@ -51,6 +51,8 @@ import { IBadgeOption } from '../interface/Badge'
 import { defaultModeRuleOption } from '../dataset/constant/Editor'
 import { IGraffitiOption } from '../interface/Graffiti'
 import { defaultGraffitiOption } from '../dataset/constant/Graffiti'
+import { IWhiteSpaceOption } from '../interface/WhiteSpace'
+import { defaultWhiteSpaceOption } from '../dataset/constant/WhiteSpace'
 
 export function mergeOption(
   options: IEditorOption = {}
@@ -119,6 +121,10 @@ export function mergeOption(
     ...defaultLineBreak,
     ...options.lineBreak
   }
+  const whiteSpaceOptions: Required<IWhiteSpaceOption> = {
+    ...defaultWhiteSpaceOption,
+    ...options.whiteSpace
+  }
   const separatorOptions: Required<ISeparatorOption> = {
     ...defaultSeparatorOption,
     ...options.separator
@@ -216,6 +222,7 @@ export function mergeOption(
     zone: zoneOptions,
     background: backgroundOptions,
     lineBreak: lineBreakOptions,
+    whiteSpace: whiteSpaceOptions,
     separator: separatorOptions,
     lineNumber: lineNumberOptions,
     pageBorder: pageBorderOptions,