From 758bbdd36ad160093a07297d5dac25abdebd2217 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Thu, 13 Oct 2022 16:40:00 +0800 Subject: [PATCH] feat:add row alignment --- index.html | 3 +++ src/assets/images/alignment.svg | 1 + src/editor/core/command/Command.ts | 6 ++++++ src/editor/core/draw/Draw.ts | 25 ++++++++++++++++++------- src/editor/dataset/enum/Row.ts | 3 ++- src/main.ts | 9 +++++++++ src/style.css | 4 ++++ 7 files changed, 43 insertions(+), 8 deletions(-) create mode 100644 src/assets/images/alignment.svg diff --git a/index.html b/index.html index 6edf530..bc2a615 100644 --- a/index.html +++ b/index.html @@ -85,6 +85,9 @@
+
+ +
diff --git a/src/assets/images/alignment.svg b/src/assets/images/alignment.svg new file mode 100644 index 0000000..08b66e3 --- /dev/null +++ b/src/assets/images/alignment.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 ca3c1dc..e81593f 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -35,6 +35,7 @@ export class Command { private static left: CommandAdapt['rowFlex'] private static center: CommandAdapt['rowFlex'] private static right: CommandAdapt['rowFlex'] + private static alignment: CommandAdapt['rowFlex'] private static rowMargin: CommandAdapt['rowMargin'] private static insertTable: CommandAdapt['insertTable'] private static insertTableTopRow: CommandAdapt['insertTableTopRow'] @@ -104,6 +105,7 @@ export class Command { Command.left = adapt.rowFlex.bind(adapt) Command.center = adapt.rowFlex.bind(adapt) Command.right = adapt.rowFlex.bind(adapt) + Command.alignment = adapt.rowFlex.bind(adapt) Command.rowMargin = adapt.rowMargin.bind(adapt) Command.insertTable = adapt.insertTable.bind(adapt) Command.insertTableTopRow = adapt.insertTableTopRow.bind(adapt) @@ -254,6 +256,10 @@ export class Command { return Command.right(RowFlex.RIGHT) } + public executeAlignment() { + return Command.alignment(RowFlex.ALIGNMENT) + } + public executeRowMargin(payload: number) { return Command.rowMargin(payload) } diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 1db601e..c6adc84 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -744,6 +744,15 @@ export class Draw { || curRow.width + metrics.width > innerWidth || (i !== 0 && element.value === ZERO) ) { + // 两端对齐 + if (preElement?.rowFlex === RowFlex.ALIGNMENT && curRow.width + metrics.width > innerWidth) { + const gap = (innerWidth - curRow.width) / curRow.elementList.length + for (let e = 0; e < curRow.elementList.length; e++) { + const el = curRow.elementList[e] + el.metrics.width += gap + } + curRow.width = innerWidth + } rowList.push({ width: metrics.width, height, @@ -785,13 +794,11 @@ export class Draw { let index = startIndex for (let i = 0; i < rowList.length; i++) { const curRow = rowList[i] - // 计算行偏移量（行居左、居中、居右） - if (curRow.rowFlex && curRow.rowFlex !== RowFlex.LEFT) { - if (curRow.rowFlex === RowFlex.CENTER) { - x += (innerWidth - curRow.width) / 2 - } else { - x += innerWidth - curRow.width - } + // 计算行偏移量（行居中、居右） + if (curRow.rowFlex === RowFlex.CENTER) { + x += (innerWidth - curRow.width) / 2 + } else if (curRow.rowFlex === RowFlex.RIGHT) { + x += innerWidth - curRow.width } // 当前td所在位置 const tablePreX = x @@ -869,6 +876,10 @@ export class Draw { this.checkboxParticle.render(ctx, element, x, y + offsetY) } else if (element.type === ElementType.TAB) { this._drawRichText(ctx) + } else if (element.rowFlex === RowFlex.ALIGNMENT) { + // 如果是两端对齐，因canvas目前不支持letterSpacing需单独绘制文本 + this.textParticle.record(ctx, element, x, y + offsetY) + this._drawRichText(ctx) } else { this.textParticle.record(ctx, element, x, y + offsetY) } diff --git a/src/editor/dataset/enum/Row.ts b/src/editor/dataset/enum/Row.ts index deebe45..089fa52 100644 --- a/src/editor/dataset/enum/Row.ts +++ b/src/editor/dataset/enum/Row.ts @@ -1,5 +1,6 @@ export enum RowFlex { LEFT = 'left', CENTER = 'center', - RIGHT = 'right' + RIGHT = 'right', + ALIGNMENT = 'alignment' } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index ed6f662..2cc40f9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -146,6 +146,12 @@ window.onload = function () { instance.command.executeRight() } + const alignmentDom = document.querySelector('.menu-item__alignment')! + alignmentDom.onclick = function () { + console.log('alignment') + instance.command.executeAlignment() + } + const rowMarginDom = document.querySelector('.menu-item__row-margin')! const rowOptionDom = rowMarginDom.querySelector('.options')! rowMarginDom.onclick = function () { @@ -866,10 +872,13 @@ window.onload = function () { leftDom.classList.remove('active') centerDom.classList.remove('active') rightDom.classList.remove('active') + alignmentDom.classList.remove('active') if (payload.rowFlex && payload.rowFlex === 'right') { rightDom.classList.add('active') } else if (payload.rowFlex && payload.rowFlex === 'center') { centerDom.classList.add('active') + } else if (payload.rowFlex && payload.rowFlex === 'alignment') { + alignmentDom.classList.add('active') } else { leftDom.classList.add('active') } diff --git a/src/style.css b/src/style.css index d3db468..0284d9c 100644 --- a/src/style.css +++ b/src/style.css @@ -266,6 +266,10 @@ ul { background-image: url('./assets/images/right.svg'); } +.menu-item__alignment i { + background-image: url('./assets/images/alignment.svg'); +} + .menu-item__row-margin { position: relative; }