From 3c95c61ff07f83d8257c84520c71edf62a6c6049 Mon Sep 17 00:00:00 2001 From: zzxming Date: Tue, 10 Dec 2024 18:03:16 +0800 Subject: [PATCH] fix: if width out of 100% convert to fixed width --- README.md | 1 + docs/index.js | 1 + src/index.ts | 1 + src/modules/table-resize/table-resize-box.ts | 6 +- .../table-resize/table-resize-common.ts | 93 ++++++++++--------- src/modules/table-resize/table-resize-line.ts | 2 +- src/utils/types.ts | 1 + 7 files changed, 59 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 81d09f4..4a96471 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,7 @@ const defaultTexts = { custom: 'Custom', clear: 'Clear', transparent: 'Transparent', + perWidthInsufficient: 'The percentage width is insufficient. To complete the operation, the table needs to be converted to a fixed width. Do you want to continue?', }; ``` diff --git a/docs/index.js b/docs/index.js index e7d62c9..77135bf 100644 --- a/docs/index.js +++ b/docs/index.js @@ -90,6 +90,7 @@ const quill1 = new Quill('#editor1', { custom: '自定义', clear: '清除', transparent: '透明', + perWidthInsufficient: '百分比宽度不足, 如需完成操作需要转换表格为固定宽度，是否继续?', }, }, }, diff --git a/src/index.ts b/src/index.ts index 6eac82a..0600f5c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -373,6 +373,7 @@ export class TableUp { custom: 'Custom', clear: 'Clear', transparent: 'Transparent', + perWidthInsufficient: 'The percentage width is insufficient. To complete the operation, the table needs to be converted to a fixed width. Do you want to continue?', }, options); }; diff --git a/src/modules/table-resize/table-resize-box.ts b/src/modules/table-resize/table-resize-box.ts index 7459cea..3614817 100644 --- a/src/modules/table-resize/table-resize-box.ts +++ b/src/modules/table-resize/table-resize-box.ts @@ -26,7 +26,7 @@ export class TableResizeBox extends TableResizeCommon { lastHeaderSelect: [Point, Point] | null = null; constructor(public tableModule: TableUp, public table: HTMLElement, quill: Quill, options: Partial) { - super(quill); + super(tableModule, quill); this.options = this.resolveOptions(options); this.tableMain = Quill.find(this.table) as TableMainFormat; @@ -220,9 +220,9 @@ export class TableResizeBox extends TableResizeCommon { if (this.tableCols.length > 0) { let colHeadStr = ''; - for (const col of this.tableCols) { + for (const [index, col] of this.tableCols.entries()) { const width = col.domNode.getBoundingClientRect().width; - colHeadStr += `
+ colHeadStr += `
`; } diff --git a/src/modules/table-resize/table-resize-common.ts b/src/modules/table-resize/table-resize-common.ts index 3eb3ed0..396aa33 100644 --- a/src/modules/table-resize/table-resize-common.ts +++ b/src/modules/table-resize/table-resize-common.ts @@ -1,4 +1,5 @@ import type Quill from 'quill'; +import type TableUp from '../..'; import type { TableMainFormat } from '../../formats'; import { createButton, createDialog, tableUpEvent, tableUpSize } from '../../utils'; import { isTableAlignRight } from './utils'; @@ -18,7 +19,7 @@ export class TableResizeCommon { handleRowMouseMoveFunc = this.handleRowMouseMove.bind(this); handleRowMouseDownFunc = this.handleRowMouseDown.bind(this); - constructor(public quill: Quill) {} + constructor(public tableModule: TableUp, public quill: Quill) {} findCurrentColIndex(_e: MouseEvent) { return -1; @@ -26,22 +27,28 @@ export class TableResizeCommon { colWidthChange(_i: number, _w: number, _isFull: boolean) {} - async createConfirmDialog() { + async createConfirmDialog({ message, confirm, cancel }: { + message: string; + confirm: string; + cancel: string; + }) { return new Promise((resolve) => { const content = document.createElement('div'); Object.assign(content.style, { padding: '8px 12px', + fontSize: '14px', + lineHeight: '1.5', }); const tip = document.createElement('p'); - tip.textContent = '半分比宽度不足, 如需完成操作需要转换表格为固定宽度，是否继续?'; + tip.textContent = message; const btnWrapper = document.createElement('div'); Object.assign(btnWrapper.style, { display: 'flex', justifyContent: 'flex-end', gap: `6px`, }); - const cancelBtn = createButton({ content: '取消' }); - const confirmBtn = createButton({ type: 'confirm', content: '确认' }); + const cancelBtn = createButton({ content: cancel }); + const confirmBtn = createButton({ type: 'confirm', content: confirm }); btnWrapper.appendChild(cancelBtn); btnWrapper.appendChild(confirmBtn); @@ -65,9 +72,9 @@ export class TableResizeCommon { if (!this.dragColBreak || !this.tableMain || this.colIndex === -1) return; const cols = this.tableMain.getCols(); const w = Number.parseInt(this.dragColBreak.dataset.w || '0'); - const isFull = this.tableMain.full; + let isFull = this.tableMain.full; let needUpdate = false; - const updateInfo: { index: number; width: number; full: boolean }[] = []; + const updateInfo: { index: number; width: number }[] = []; if (isFull) { const tableMainWidth = this.tableMain.domNode.getBoundingClientRect().width; let pre = (w / tableMainWidth) * 100; @@ -79,13 +86,13 @@ export class TableResizeCommon { pre = Math.max(tableUpSize.colMinWidthPre, pre); if (cols[this.colIndex + 1] || cols[this.colIndex - 1]) { const i = cols[this.colIndex + 1] ? this.colIndex + 1 : this.colIndex - 1; - updateInfo.push({ index: i, width: cols[i].width + oldWidthPre - pre, full: isFull }); + updateInfo.push({ index: i, width: cols[i].width + oldWidthPre - pre }); } else { pre = 100; } needUpdate = true; - updateInfo.push({ index: this.colIndex, width: pre, full: isFull }); + updateInfo.push({ index: this.colIndex, width: pre }); } else { // magnify col @@ -95,8 +102,8 @@ export class TableResizeCommon { pre = Math.min(totalWidthNextPre - tableUpSize.colMinWidthPre, pre); needUpdate = true; updateInfo.push( - { index: this.colIndex, width: pre, full: isFull }, - { index: this.colIndex + 1, width: totalWidthNextPre - pre, full: isFull }, + { index: this.colIndex, width: pre }, + { index: this.colIndex + 1, width: totalWidthNextPre - pre }, ); } } @@ -108,7 +115,7 @@ export class TableResizeCommon { + w }px`; needUpdate = true; - updateInfo.push({ index: this.colIndex, width: w, full: isFull }); + updateInfo.push({ index: this.colIndex, width: w }); } document.body.removeChild(this.dragColBreak); @@ -117,45 +124,47 @@ export class TableResizeCommon { document.removeEventListener('mousemove', this.handleColMouseMoveFunc); this.dragging = false; - // update col width - let updated = true; if (needUpdate) { - for (let { index, width, full } of updateInfo) { - // table full maybe change. every time update need check data full and transform width - const tableWidth = this.tableMain.domNode.getBoundingClientRect().width; - let isFull = this.tableMain.full; - if (full !== isFull) { - if (full === true && isFull === false) { - width = width / 100 * tableWidth; - } - else if (full === false && isFull === true) { - width = width / tableWidth * 100; - } + const tableWidth = this.tableMain.domNode.getBoundingClientRect().width; + if (isFull) { + // if full table and percentage width is larger than 100%. check if convert to fixed px + let resultWidth = 0; + const skipColIndex = new Set(updateInfo.map(({ index, width }) => { + resultWidth += width; + return index; + })); + for (const [index, col] of cols.entries()) { + if (skipColIndex.has(index)) continue; + resultWidth += col.width; } - // if tableis full and width larger then 100. check user want to change table to fixed width - if (isFull) { - const totalWidth = cols.reduce((total, cur, i) => { - total += i === index ? width : cur.width; - return total; - }, 0); - if (totalWidth > 100) { - if (!await this.createConfirmDialog()) { - updated = false; - break; - } - this.tableMain.cancelFull(); - isFull = false; - width = width / 100 * tableWidth; + + if (resultWidth > 100) { + if (!await this.createConfirmDialog({ + message: this.tableModule.options.texts.perWidthInsufficient, + confirm: this.tableModule.options.texts.confirmText, + cancel: this.tableModule.options.texts.cancelText, + })) { + return; + } + this.tableMain.cancelFull(); + isFull = false; + for (const [i, info] of updateInfo.entries()) { + const { width, index } = info; + updateInfo[i] = { + index, + width: width / 100 * tableWidth, + }; } } + } + + for (const { index, width } of updateInfo) { cols[index].width = `${width}${isFull ? '%' : 'px'}`; this.colWidthChange(index, isFull ? width / 100 * tableWidth : width, isFull); } } - if (updated) { - this.quill.emitter.emit(tableUpEvent.AFTER_TABLE_RESIZE); - } + this.quill.emitter.emit(tableUpEvent.AFTER_TABLE_RESIZE); }; handleColMouseMove(e: MouseEvent): { left: number; width: number } | undefined { diff --git a/src/modules/table-resize/table-resize-line.ts b/src/modules/table-resize/table-resize-line.ts index d1a3a1c..6ac0768 100644 --- a/src/modules/table-resize/table-resize-line.ts +++ b/src/modules/table-resize/table-resize-line.ts @@ -18,7 +18,7 @@ export class TableResizeLine extends TableResizeCommon { tableCellBlot?: TableCellFormat; constructor(public tableModule: TableUp, quill: Quill, options: Partial) { - super(quill); + super(tableModule, quill); this.options = this.resolveOptions(options); this.colResizer = this.tableModule.addContainer('ql-table-resize-line-col'); this.rowResizer = this.tableModule.addContainer('ql-table-resize-line-row'); diff --git a/src/utils/types.ts b/src/utils/types.ts index e5146dd..51b81f9 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -32,6 +32,7 @@ export interface TableCreatorTextOptions { rowText: string; colText: string; notPositiveNumberError: string; + perWidthInsufficient: string; }; export interface TableTextOptions extends TableCreatorTextOptions { custom: string;