feat: add separator option #530

docs/en/guide/option.md

@@ -71,6 +71,7 @@ interface IEditorOption {
   zone?: IZoneOption // Zone option。{tipDisabled?:boolean;}
   background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。default: {color: '#FFFFFF'}
   lineBreak?: ILineBreakOption // LineBreak option. {disabled?:boolean; color?:string; lineWidth?:number;}
+  separator?: ISeparatorOption // Separator option. {lineWidth?:number; strokeStyle?:string;}
 }
 ```
 

docs/guide/option.md

@@ -71,6 +71,7 @@ interface IEditorOption {
   zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;}
   background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。默认：{color: '#FFFFFF'}
   lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;}
+  separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;}
 }
 ```
 

src/editor/core/draw/Draw.ts

@@ -1412,11 +1412,14 @@ export class Draw {
           }
         }
       } else if (element.type === ElementType.SEPARATOR) {
+        const {
+          separator: { lineWidth }
+        } = this.options
         element.width = availableWidth / scale
         metrics.width = availableWidth
-        metrics.height = defaultSize
+        metrics.height = lineWidth * scale
         metrics.boundingBoxAscent = -rowMargin
-        metrics.boundingBoxDescent = -rowMargin
+        metrics.boundingBoxDescent = -rowMargin + metrics.height
       } else if (element.type === ElementType.PAGE_BREAK) {
         element.width = availableWidth / scale
         metrics.width = availableWidth

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

@@ -16,18 +16,20 @@ export class SeparatorParticle {
     y: number
   ) {
     ctx.save()
-    const { scale } = this.options
+    const {
-    ctx.lineWidth = scale
+      scale,
-    if (element.color) {
+      separator: { lineWidth, strokeStyle }
-      ctx.strokeStyle = element.color
+    } = this.options
-    }
+    ctx.lineWidth = lineWidth * scale
-    if (element.dashArray && element.dashArray.length) {
+    ctx.strokeStyle = element.color || strokeStyle
+    if (element.dashArray?.length) {
       ctx.setLineDash(element.dashArray)
     }
-    ctx.translate(0, 0.5) // 从1处渲染，避免线宽度等于3
+    const offsetY = Math.round(y) // 四舍五入避免绘制模糊
+    ctx.translate(0, ctx.lineWidth / 2)
     ctx.beginPath()
-    ctx.moveTo(x, y)
+    ctx.moveTo(x, offsetY)
-    ctx.lineTo(x + element.width! * scale, y)
+    ctx.lineTo(x + element.width! * scale, offsetY)
     ctx.stroke()
     ctx.restore()
   }

src/editor/dataset/constant/Separator.ts

@@ -0,0 +1,6 @@
+import { ISeparatorOption } from '../../interface/Separator'
+
+export const defaultSeparatorOption: Readonly<Required<ISeparatorOption>> = {
+  lineWidth: 1,
+  strokeStyle: '#000000'
+}

src/editor/index.ts

@@ -80,6 +80,8 @@ import { BackgroundRepeat, BackgroundSize } from './dataset/enum/Background'
 import { TextDecorationStyle } from './dataset/enum/Text'
 import { ILineBreakOption } from './interface/LineBreak'
 import { defaultLineBreak } from './dataset/constant/LineBreak'
+import { ISeparatorOption } from './interface/Separator'
+import { defaultSeparatorOption } from './dataset/constant/Separator'
 
 export default class Editor {
   public command: Command
@@ -155,6 +157,10 @@ export default class Editor {
       ...defaultLineBreak,
       ...options.lineBreak
     }
+    const separatorOptions: Required<ISeparatorOption> = {
+      ...defaultSeparatorOption,
+      ...options.separator
+    }
 
     const editorOptions: DeepRequired<IEditorOption> = {
       mode: EditorMode.EDIT,
@@ -214,7 +220,8 @@ export default class Editor {
       pageBreak: pageBreakOptions,
       zone: zoneOptions,
       background: backgroundOptions,
-      lineBreak: lineBreakOptions
+      lineBreak: lineBreakOptions,
+      separator: separatorOptions
     }
     // 数据处理
     data = deepClone(data)

src/editor/interface/Editor.ts

@@ -22,6 +22,7 @@ import { IPlaceholder } from './Placeholder'
 import { ITitleOption } from './Title'
 import { IWatermark } from './Watermark'
 import { IZoneOption } from './Zone'
+import { ISeparatorOption } from './Separator'
 
 export interface IEditorData {
   header?: IElement[]
@@ -87,6 +88,7 @@ export interface IEditorOption {
   zone?: IZoneOption
   background?: IBackgroundOption
   lineBreak?: ILineBreakOption
+  separator?: ISeparatorOption
 }
 
 export interface IEditorResult {

src/editor/interface/Separator.ts

@@ -0,0 +1,4 @@
+export interface ISeparatorOption {
+  strokeStyle?: string
+  lineWidth?: number
+}