feat:增加行间距

src/editor/core/command/Command.ts

@@ -19,6 +19,7 @@ export class Command {
   private static left: Function
   private static center: Function
   private static right: Function
+  private static rowMargin: Function
   private static search: Function
   private static print: Function
 
@@ -39,6 +40,7 @@ export class Command {
     Command.left = adapt.rowFlex.bind(adapt)
     Command.center = adapt.rowFlex.bind(adapt)
     Command.right = adapt.rowFlex.bind(adapt)
+    Command.rowMargin = adapt.rowMargin.bind(adapt)
     Command.search = adapt.search.bind(adapt)
     Command.print = adapt.print.bind(adapt)
   }
@@ -109,6 +111,10 @@ export class Command {
     return Command.right(RowFlex.RIGHT)
   }
 
+  public executeRowMargin(payload: number) {
+    return Command.rowMargin(payload)
+  }
+
   // 搜索、打印
   public executeSearch(payload: string | null) {
     return Command.search(payload)

src/editor/core/command/CommandAdapt.ts

@@ -183,6 +183,28 @@ export class CommandAdapt {
     this.draw.render({ curIndex, isSetCursor })
   }
 
+  public rowMargin(payload: number) {
+    const { startIndex, endIndex } = this.range.getRange()
+    if (startIndex === 0 && endIndex === 0) return
+    const positionList = this.position.getPositionList()
+    // 开始/结束行号
+    const startRowNo = positionList[startIndex].rowNo
+    const endRowNo = positionList[endIndex].rowNo
+    const elementList = this.draw.getElementList()
+    // 当前选区所在行
+    for (let p = 0; p < positionList.length; p++) {
+      const postion = positionList[p]
+      if (postion.rowNo > endRowNo) break
+      if (postion.rowNo >= startRowNo && postion.rowNo <= endRowNo) {
+        elementList[p].rowMargin = payload
+      }
+    }
+    // 光标定位
+    const isSetCursor = startIndex === endIndex
+    const curIndex = isSetCursor ? endIndex : startIndex
+    this.draw.render({ curIndex, isSetCursor })
+  }
+
   public search(payload: string | null) {
     if (payload) {
       const elementList = this.draw.getElementList()

src/editor/core/draw/Draw.ts

@@ -160,7 +160,7 @@ export class Draw {
     this.background.render(canvasRect)
     // 绘制页边距
     const { width } = canvasRect
-    const { margins } = this.options
+    const { margins, defaultRowMargin, defaultBasicRowMarginHeight } = this.options
     const leftTopPoint: [number, number] = [margins[3], margins[0]]
     const rightTopPoint: [number, number] = [width - margins[1], margins[0]]
     this.margin.render(canvasRect)
@@ -182,8 +182,9 @@ export class Draw {
       this.ctx.font = this.getFont(element)
       const metrics = this.ctx.measureText(element.value)
       const width = metrics.width
-      const fontBoundingBoxAscent = metrics.fontBoundingBoxAscent
-      const fontBoundingBoxDescent = metrics.fontBoundingBoxDescent
+      const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin)
+      const fontBoundingBoxAscent = metrics.fontBoundingBoxAscent + rowMargin
+      const fontBoundingBoxDescent = metrics.fontBoundingBoxDescent + rowMargin
       const height = fontBoundingBoxAscent + fontBoundingBoxDescent
       const lineText = { ...element, metrics }
       if (curRow.width + width > rightTopPoint[0] - leftTopPoint[0] || (i !== 0 && element.value === ZERO)) {

src/editor/core/range/RangeManager.ts

@@ -60,6 +60,7 @@ export class RangeManager {
     const color = curElement.color || null
     const highlight = curElement.highlight || null
     const rowFlex = curElement.rowFlex || null
+    const rowMargin = curElement.rowMargin || this.options.defaultRowMargin
     // 菜单
     const painter = !!this.draw.getPainterStyle()
     const undo = this.historyManager.isCanUndo()
@@ -75,13 +76,15 @@ export class RangeManager {
       strikeout,
       color,
       highlight,
-      rowFlex
+      rowFlex,
+      rowMargin
     })
   }
 
   public recoveryRangeStyle() {
     if (!this.listener.rangeStyleChange) return
     const font = this.options.defaultFont
+    const rowMargin = this.options.defaultRowMargin
     const painter = !!this.draw.getPainterStyle()
     const undo = this.historyManager.isCanUndo()
     const redo = this.historyManager.isCanRedo()
@@ -96,7 +99,8 @@ export class RangeManager {
       strikeout: false,
       color: null,
       highlight: null,
-      rowFlex: null
+      rowFlex: null,
+      rowMargin
     })
   }
 

src/editor/index.ts

@@ -18,6 +18,8 @@ export default class Editor {
       defaultType: 'TEXT',
       defaultFont: 'Yahei',
       defaultSize: 16,
+      defaultRowMargin: 1,
+      defaultBasicRowMarginHeight: 5,
       underlineColor: '#000000',
       strikeoutColor: '#FF0000',
       rangeAlpha: 0.6,

src/editor/interface/Editor.ts

@@ -2,6 +2,8 @@ export interface IEditorOption {
   defaultType?: string;
   defaultFont?: string;
   defaultSize?: number;
+  defaultBasicRowMarginHeight?: number;
+  defaultRowMargin?: number;
   underlineColor?: string;
   strikeoutColor?: string;
   rangeColor?: string;

src/editor/interface/Element.ts

@@ -12,6 +12,7 @@ export interface IElementStyle {
   underline?: boolean;
   strikeout?: boolean;
   rowFlex?: RowFlex;
+  rowMargin?: number;
 }
 
 export interface IElementBasic {

src/editor/interface/Listener.ts

@@ -12,6 +12,7 @@ export interface IRangeStype {
   color: string | null;
   highlight: string | null;
   rowFlex: RowFlex | null;
+  rowMargin: number
 }
 
 export type IRangeStyleChange = (payload: IRangeStype) => void;