From a1293aff228595cafe2c730d9fb5dbdb1241c3d8 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sat, 4 May 2024 17:35:47 +0800 Subject: [PATCH] feat: add justify-all property to row flex #535 --- docs/en/guide/schema.md | 3 ++- docs/en/guide/shortcut-internal.md | 4 ++++ docs/guide/schema.md | 3 ++- docs/guide/shortcut-internal.md | 4 ++++ index.html | 3 +++ src/assets/images/justify.svg | 7 ++++++ src/editor/core/draw/Draw.ts | 22 +++++++++++++------ src/editor/core/shortcut/keys/richtextKeys.ts | 8 +++++++ src/editor/dataset/enum/Row.ts | 3 ++- src/editor/utils/element.ts | 2 ++ src/main.ts | 12 ++++++++++ src/style.css | 4 ++++ 12 files changed, 65 insertions(+), 10 deletions(-) create mode 100644 src/assets/images/justify.svg diff --git a/docs/en/guide/schema.md b/docs/en/guide/schema.md index 3ab9de7..93bf789 100644 --- a/docs/en/guide/schema.md +++ b/docs/en/guide/schema.md @@ -39,7 +39,8 @@ interface IElement { LEFT = 'left', CENTER = 'center', RIGHT = 'right', - ALIGNMENT = 'alignment' + ALIGNMENT = 'alignment', + JUSTIFY = 'justify' }; rowMargin?: number; letterSpacing?: number; diff --git a/docs/en/guide/shortcut-internal.md b/docs/en/guide/shortcut-internal.md index 33e6b13..0f76cbc 100644 --- a/docs/en/guide/shortcut-internal.md +++ b/docs/en/guide/shortcut-internal.md @@ -132,6 +132,10 @@ Feature: Line right Feature: Both sides are aligned +## Ctrl/Cmd + Shift + J + +Feature: Line justify + ## Ctrl + Shift + X Feature: Strikethrough diff --git a/docs/guide/schema.md b/docs/guide/schema.md index b4ec204..c4078c7 100644 --- a/docs/guide/schema.md +++ b/docs/guide/schema.md @@ -39,7 +39,8 @@ interface IElement { LEFT = 'left', CENTER = 'center', RIGHT = 'right', - ALIGNMENT = 'alignment' + ALIGNMENT = 'alignment', + JUSTIFY = 'justify' }; rowMargin?: number; letterSpacing?: number; diff --git a/docs/guide/shortcut-internal.md b/docs/guide/shortcut-internal.md index 1ae9ca8..1bc1a3f 100644 --- a/docs/guide/shortcut-internal.md +++ b/docs/guide/shortcut-internal.md @@ -132,6 +132,10 @@ 功能：两端对齐 +## Ctrl/Cmd + Shift + J + +功能：分散对齐 + ## Ctrl + Shift + X 功能：删除线 diff --git a/index.html b/index.html index 2cbbdcc..a40ba94 100644 --- a/index.html +++ b/index.html @@ -158,6 +158,9 @@
+
+ +
diff --git a/src/assets/images/justify.svg b/src/assets/images/justify.svg new file mode 100644 index 0000000..e522de5 --- /dev/null +++ b/src/assets/images/justify.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index fbab7c7..023f578 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -1585,15 +1585,20 @@ export class Draw { ) { curRow.height = defaultBasicRowMarginHeight } - // 两端对齐 + // 两端对齐、分散对齐 if ( - preElement?.rowFlex === RowFlex.ALIGNMENT && - curRowWidth > availableWidth + preElement?.rowFlex === RowFlex.JUSTIFY || + (preElement?.rowFlex === RowFlex.ALIGNMENT && isWidthNotEnough) ) { + // 忽略换行符及尾部元素间隔设置 + const rowElementList = + curRow.elementList[0]?.value === ZERO + ? curRow.elementList.slice(1) + : curRow.elementList const gap = - (availableWidth - curRow.width) / curRow.elementList.length - for (let e = 0; e < curRow.elementList.length; e++) { - const el = curRow.elementList[e] + (availableWidth - curRow.width) / (rowElementList.length - 1) + for (let e = 0; e < rowElementList.length - 1; e++) { + const el = rowElementList[e] el.metrics.width += gap } curRow.width = availableWidth @@ -1832,7 +1837,10 @@ export class Draw { this.radioParticle.render(ctx, element, x, y + offsetY) } else if (element.type === ElementType.TAB) { this.textParticle.complete() - } else if (element.rowFlex === RowFlex.ALIGNMENT) { + } else if ( + element.rowFlex === RowFlex.ALIGNMENT || + element.rowFlex === RowFlex.JUSTIFY + ) { // 如果是两端对齐，因canvas目前不支持letterSpacing需单独绘制文本 this.textParticle.record(ctx, element, x, y + offsetY) this.textParticle.complete() diff --git a/src/editor/core/shortcut/keys/richtextKeys.ts b/src/editor/core/shortcut/keys/richtextKeys.ts index 4a9ee3b..6e97a31 100644 --- a/src/editor/core/shortcut/keys/richtextKeys.ts +++ b/src/editor/core/shortcut/keys/richtextKeys.ts @@ -90,5 +90,13 @@ export const richtextKeys: IRegisterShortcut[] = [ callback: (command: Command) => { command.executeRowFlex(RowFlex.ALIGNMENT) } + }, + { + key: KeyMap.J, + mod: true, + shift: true, + callback: (command: Command) => { + command.executeRowFlex(RowFlex.JUSTIFY) + } } ] diff --git a/src/editor/dataset/enum/Row.ts b/src/editor/dataset/enum/Row.ts index 7041fe0..0f44493 100644 --- a/src/editor/dataset/enum/Row.ts +++ b/src/editor/dataset/enum/Row.ts @@ -2,5 +2,6 @@ export enum RowFlex { LEFT = 'left', CENTER = 'center', RIGHT = 'right', - ALIGNMENT = 'alignment' + ALIGNMENT = 'alignment', + JUSTIFY = 'justify' } diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index f5d0675..289d268 100644 --- a/src/editor/utils/element.ts +++ b/src/editor/utils/element.ts @@ -736,6 +736,8 @@ export function getElementRowFlex(node: HTMLElement) { return RowFlex.RIGHT case 'justify': return RowFlex.ALIGNMENT + case 'justify-all': + return RowFlex.JUSTIFY default: return RowFlex.LEFT } diff --git a/src/main.ts b/src/main.ts index a3846f1..61b03a9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -313,6 +313,15 @@ window.onload = function () { instance.command.executeRowFlex(RowFlex.ALIGNMENT) } + const justifyDom = document.querySelector( + '.menu-item__justify' + )! + justifyDom.title = `分散对齐(${isApple ? '⌘' : 'Ctrl'}+Shift+J)` + justifyDom.onclick = function () { + console.log('justify') + instance.command.executeRowFlex(RowFlex.JUSTIFY) + } + const rowMarginDom = document.querySelector( '.menu-item__row-margin' )! @@ -1503,12 +1512,15 @@ window.onload = function () { centerDom.classList.remove('active') rightDom.classList.remove('active') alignmentDom.classList.remove('active') + justifyDom.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 if (payload.rowFlex && payload.rowFlex === 'justify') { + justifyDom.classList.add('active') } else { leftDom.classList.add('active') } diff --git a/src/style.css b/src/style.css index 959a6b5..93a723e 100644 --- a/src/style.css +++ b/src/style.css @@ -339,6 +339,10 @@ ul { background-image: url('./assets/images/alignment.svg'); } +.menu-item__justify i { + background-image: url('./assets/images/justify.svg'); +} + .menu-item__row-margin { position: relative; }