feat:增加行间距

index.html

@@ -79,6 +79,20 @@
         <div class="menu-item__right">
           <i></i>
         </div>
+        <div class="menu-item__row-margin">
+          <i></i>
+          <div class="options">
+            <ul>
+              <li data-rowmargin='1'>1</li>
+              <li data-rowmargin="1.25">1.25</li>
+              <li data-rowmargin="1.5">1.5</li>
+              <li data-rowmargin="1.75">1.75</li>
+              <li data-rowmargin="2">2</li>
+              <li data-rowmargin="2.5">2.5</li>
+              <li data-rowmargin="3">3</li>
+            </ul>
+          </div>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">

src/assets/images/row-margin.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 14h12v1H2v-1zm7-5h5v1H9V9zm0-3h5v1H9V6zM2 1h12v1H2V1zm2.5 3L7 7H2zm0 8L7 9H2z" fill="#3D4757" fill-rule="evenodd"/></svg>

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 rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin)
-      const fontBoundingBoxDescent = metrics.fontBoundingBoxDescent
+      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;

src/main.ts

@@ -5,7 +5,7 @@ window.onload = function () {
 
   const canvas = document.querySelector<HTMLCanvasElement>('canvas')
   if (!canvas) return
-  const text = `人民医院门诊病历\n\n主诉：\n发热三天，咳嗽五天。\n现病史：\n发病前14天内有病历报告社区的旅行时或居住史；发病前14天内与新型冠状病毒感染的患者或无症状感染者有接触史；发病前14天内解除过来自病历报告社区的发热或有呼吸道症状的患者；聚集性发病，2周内在小范围如家庭、办公室、学校班级等场所，出现2例及以上发热或呼吸道症状的病例。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。\n体格检查：\nT：36.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10^9/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n4.氯化钠注射液 250ml/袋、1袋；\n5.七叶皂苷钠片（欧开）、30mg/片*24/盒、1片、口服、BID（每日两次）、1天`
+  const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n发病前14天内有病历报告社区的旅行时或居住史；发病前14天内与新型冠状病毒感染的患者或无症状感染者有接触史；发病前14天内解除过来自病历报告社区的发热或有呼吸道症状的患者；聚集性发病，2周内在小范围如家庭、办公室、学校班级等场所，出现2例及以上发热或呼吸道症状的病例。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。\n体格检查：\nT：36.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10^9/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n4.氯化钠注射液 250ml/袋、1袋；\n5.七叶皂苷钠片（欧开）、30mg/片*24/盒、1片、口服；`
   // 模拟行居中
   const centerText = ['人民医院门诊病历']
   const centerIndex: number[] = centerText.map(c => {
@@ -66,7 +66,7 @@ window.onload = function () {
   })
   // 初始化编辑器
   const instance = new Editor(canvas, data, {
-    margins: [120, 120, 200, 120]
+    margins: [100, 120, 100, 120]
   })
   console.log('编辑器实例: ', instance)
 
@@ -167,6 +167,16 @@ window.onload = function () {
     console.log('right')
     instance.command.executeRight()
   }
+  const rowMarginDom = document.querySelector<HTMLDivElement>('.menu-item__row-margin')!
+  const rowOptionDom = rowMarginDom.querySelector<HTMLDivElement>('.options')!
+  rowMarginDom.onclick = function () {
+    console.log('row-margin')
+    rowOptionDom.classList.toggle('visible')
+  }
+  rowOptionDom.onclick = function (evt) {
+    const li = evt.target as HTMLLIElement
+    instance.command.executeRowMargin(Number(li.dataset.rowmargin!))
+  }
   // 搜索、打印
   const collspanDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')
@@ -232,6 +242,10 @@ window.onload = function () {
     } else {
       leftDom.classList.add('active')
     }
+    // 行间距
+    rowOptionDom.querySelectorAll<HTMLLIElement>('li').forEach(li => li.classList.remove('active'))
+    const curRowMarginDom = rowOptionDom.querySelector<HTMLLIElement>(`[data-rowmargin='${payload.rowMargin}']`)!
+    curRowMarginDom.classList.add('active')
     // 功能
     payload.undo ? undoDom.classList.remove('no-allow') : undoDom.classList.add('no-allow')
     payload.redo ? redoDom.classList.remove('no-allow') : redoDom.classList.add('no-allow')

src/style.css

@@ -112,6 +112,7 @@ ul {
 .menu-item .options li {
   padding: 5px;
   margin: 5px 0;
+  user-select: none;
   transition: all .3s;
 }
 
@@ -223,6 +224,14 @@ ul {
   background-image: url('./assets/images/right.svg');
 }
 
+.menu-item__row-margin {
+  position: relative;
+}
+
+.menu-item__row-margin i {
+  background-image: url('./assets/images/row-margin.svg');
+}
+
 .menu-item__search {
   position: relative;
 }