diff --git a/index.html b/index.html index 1d81623..6c2b510 100644 --- a/index.html +++ b/index.html @@ -79,6 +79,20 @@
+
+ +
+ +
+
diff --git a/src/assets/images/row-margin.svg b/src/assets/images/row-margin.svg new file mode 100644 index 0000000..97f2baa --- /dev/null +++ b/src/assets/images/row-margin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 9bb22a2..d73e0c3 100644 --- a/src/editor/core/command/Command.ts +++ b/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) diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index bf4ada6..5686b52 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/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() diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index bcf2008..9f2f0ab 100644 --- a/src/editor/core/draw/Draw.ts +++ b/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)) { diff --git a/src/editor/core/range/RangeManager.ts b/src/editor/core/range/RangeManager.ts index fdecf15..ece1c04 100644 --- a/src/editor/core/range/RangeManager.ts +++ b/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 }) } diff --git a/src/editor/index.ts b/src/editor/index.ts index e1de861..abf0573 100644 --- a/src/editor/index.ts +++ b/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, diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 65e7123..285c2d1 100644 --- a/src/editor/interface/Editor.ts +++ b/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; diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index d4c3de6..307fcee 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -12,6 +12,7 @@ export interface IElementStyle { underline?: boolean; strikeout?: boolean; rowFlex?: RowFlex; + rowMargin?: number; } export interface IElementBasic { diff --git a/src/editor/interface/Listener.ts b/src/editor/interface/Listener.ts index 42f28b8..4bf5502 100644 --- a/src/editor/interface/Listener.ts +++ b/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; diff --git a/src/main.ts b/src/main.ts index 536bd54..1709dd4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,7 +5,7 @@ window.onload = function () { const canvas = document.querySelector('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('.menu-item__row-margin')! + const rowOptionDom = rowMarginDom.querySelector('.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('.menu-item__search__collapse') const searchInputDom = document.querySelector('.menu-item__search__collapse__search input') @@ -232,6 +242,10 @@ window.onload = function () { } else { leftDom.classList.add('active') } + // 行间距 + rowOptionDom.querySelectorAll('li').forEach(li => li.classList.remove('active')) + const curRowMarginDom = rowOptionDom.querySelector(`[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') diff --git a/src/style.css b/src/style.css index 716a2d3..8057424 100644 --- a/src/style.css +++ b/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; }