From be98c15ce16f3713493bcb70c75d1cddacc10907 Mon Sep 17 00:00:00 2001 From: AndresCT-98 Date: Fri, 31 May 2024 13:55:33 -0600 Subject: [PATCH 1/5] export min height --- packages/roosterjs-content-model-dom/lib/index.ts | 6 +++++- .../lib/modelApi/editing/normalizeTable.ts | 9 ++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/roosterjs-content-model-dom/lib/index.ts b/packages/roosterjs-content-model-dom/lib/index.ts index 00eaa77bd95..f10c7245898 100644 --- a/packages/roosterjs-content-model-dom/lib/index.ts +++ b/packages/roosterjs-content-model-dom/lib/index.ts @@ -125,7 +125,11 @@ export { deleteSelection } from './modelApi/editing/deleteSelection'; export { deleteSegment } from './modelApi/editing/deleteSegment'; export { deleteBlock } from './modelApi/editing/deleteBlock'; export { applyTableFormat, setFirstColumnFormatBorders } from './modelApi/editing/applyTableFormat'; -export { normalizeTable, MIN_ALLOWED_TABLE_CELL_WIDTH } from './modelApi/editing/normalizeTable'; +export { + normalizeTable, + MIN_ALLOWED_TABLE_CELL_WIDTH, + MIN_ALLOWED_TABLE_CELL_HEIGHT, +} from './modelApi/editing/normalizeTable'; export { setTableCellBackgroundColor } from './modelApi/editing/setTableCellBackgroundColor'; export { retrieveModelFormatState } from './modelApi/editing/retrieveModelFormatState'; export { getListStyleTypeFromString } from './modelApi/editing/getListStyleTypeFromString'; diff --git a/packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts b/packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts index 1760a8c7d87..1c6c4ffeb7c 100644 --- a/packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts +++ b/packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts @@ -14,7 +14,10 @@ import type { * Minimum width for a table cell */ export const MIN_ALLOWED_TABLE_CELL_WIDTH: number = 30; -const MIN_HEIGHT = 22; +/** + * Minimum height for a table cell + */ +export const MIN_ALLOWED_TABLE_CELL_HEIGHT: number = 22; /** * Normalize a Content Model table, make sure: @@ -77,8 +80,8 @@ export function normalizeTable( }); // Make sure table has correct width and height array - if (row.height < MIN_HEIGHT) { - row.height = MIN_HEIGHT; + if (row.height < MIN_ALLOWED_TABLE_CELL_HEIGHT) { + row.height = MIN_ALLOWED_TABLE_CELL_HEIGHT; } }); From e8c899c3afca12b7b83b2648ff7d365ad3cb530d Mon Sep 17 00:00:00 2001 From: AndresCT-98 Date: Fri, 31 May 2024 13:56:15 -0600 Subject: [PATCH 2/5] only normalise height --- .../lib/tableEdit/editors/features/CellResizer.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts index 759025c1493..cc9cebacc57 100644 --- a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts +++ b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts @@ -7,6 +7,7 @@ import { normalizeRect, MIN_ALLOWED_TABLE_CELL_WIDTH, normalizeTable, + MIN_ALLOWED_TABLE_CELL_HEIGHT, } from 'roosterjs-content-model-dom'; import type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler'; import type { ContentModelTable, IEditor } from 'roosterjs-content-model-types'; @@ -146,14 +147,18 @@ function onDraggingHorizontal( // Modify the CM Table size cmTable.rows[anchorRow].height = (anchorRowHeight ?? 0) + deltaY; - // Normalize the table - normalizeTable(cmTable); + // Normalize the new height value + const newHeight = + cmTable.rows[anchorRow] && + cmTable.rows[anchorRow].height > MIN_ALLOWED_TABLE_CELL_HEIGHT + ? cmTable.rows[anchorRow].height + : MIN_ALLOWED_TABLE_CELL_HEIGHT; // Writeback CM Table size changes to DOM Table const tableRow = table.rows[anchorRow]; for (let col = 0; col < tableRow.cells.length; col++) { const td = tableRow.cells[col]; - td.style.height = cmTable.rows[anchorRow].height + 'px'; + td.style.height = newHeight + 'px'; } return true; From f995a0737e09ea132f623d9611865b4b1fb95655 Mon Sep 17 00:00:00 2001 From: AndresCT-98 Date: Fri, 31 May 2024 13:59:37 -0600 Subject: [PATCH 3/5] move undefined check --- .../lib/tableEdit/editors/features/CellResizer.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts index cc9cebacc57..cfe9edb56c1 100644 --- a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts +++ b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts @@ -143,13 +143,12 @@ function onDraggingHorizontal( const { cmTable, anchorRow, anchorRowHeight } = initValue; // Assign new widths and heights to the CM table - if (cmTable && anchorRow != undefined) { + if (cmTable && anchorRow != undefined && cmTable.rows[anchorRow] != undefined) { // Modify the CM Table size cmTable.rows[anchorRow].height = (anchorRowHeight ?? 0) + deltaY; // Normalize the new height value const newHeight = - cmTable.rows[anchorRow] && cmTable.rows[anchorRow].height > MIN_ALLOWED_TABLE_CELL_HEIGHT ? cmTable.rows[anchorRow].height : MIN_ALLOWED_TABLE_CELL_HEIGHT; From d7ed0ce38dc1da2fdeb1c8da965fafd8b5bca978 Mon Sep 17 00:00:00 2001 From: AndresCT-98 Date: Tue, 4 Jun 2024 11:55:19 -0600 Subject: [PATCH 4/5] fix table and cell resizer --- .../tableEdit/editors/features/CellResizer.ts | 11 +++++----- .../editors/features/TableResizer.ts | 22 ++++++++++++++----- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts index dd10700f8b3..9ecfef46ba6 100644 --- a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts +++ b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts @@ -6,7 +6,6 @@ import { isElementOfType, normalizeRect, MIN_ALLOWED_TABLE_CELL_WIDTH, - normalizeTable, mutateBlock, MIN_ALLOWED_TABLE_CELL_HEIGHT, } from 'roosterjs-content-model-dom'; @@ -206,7 +205,12 @@ export function onDraggingVertical( // This is the last column if (lastColumn) { // Only the last column changes - mutableTable.widths[anchorColumn] = allWidths[anchorColumn] + change; + // Normalize the new width value + const newWidth = + allWidths[anchorColumn] + change < MIN_ALLOWED_TABLE_CELL_WIDTH + ? MIN_ALLOWED_TABLE_CELL_WIDTH + : allWidths[anchorColumn] + change; + mutableTable.widths[anchorColumn] = newWidth; } else { // Any other two columns const anchorChange = allWidths[anchorColumn] + change; @@ -221,9 +225,6 @@ export function onDraggingVertical( mutableTable.widths[anchorColumn + 1] = nextAnchorChange; } - // Normalize the table - normalizeTable(cmTable); - // Writeback CM Table size changes to DOM Table for (let row = 0; row < table.rows.length; row++) { const tableRow = table.rows[row]; diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts index 144af8ea229..5f5dd4bdef8 100644 --- a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts +++ b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts @@ -2,10 +2,10 @@ import { createElement } from '../../../pluginUtils/CreateElement/createElement' import { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper'; import { getCMTableFromTable } from '../utils/getTableFromContentModel'; import { + MIN_ALLOWED_TABLE_CELL_HEIGHT, isNodeOfType, mutateBlock, normalizeRect, - normalizeTable, } from 'roosterjs-content-model-dom'; import type { TableEditFeature } from './TableEditFeature'; import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback'; @@ -209,9 +209,6 @@ export function onDragging( } } - // Normalize the table - normalizeTable(cmTable); - // Writeback CM Table size changes to DOM Table for (let row = 0; row < table.rows.length; row++) { const tableRow = table.rows[row]; @@ -221,10 +218,23 @@ export function onDragging( continue; } + // Normalize the new height value + const newHeight = + cmTable.rows[row].height > MIN_ALLOWED_TABLE_CELL_HEIGHT + ? cmTable.rows[row].height + : MIN_ALLOWED_TABLE_CELL_HEIGHT; + for (let col = 0; col < tableRow.cells.length; col++) { const td = tableRow.cells[col]; - td.style.width = cmTable.widths[col] + 'px'; - td.style.height = cmTable.rows[row].height + 'px'; + + // Normalize the new width value + const newWidth = + cmTable.widths[col] > MIN_ALLOWED_TABLE_CELL_HEIGHT + ? cmTable.widths[col] + : MIN_ALLOWED_TABLE_CELL_HEIGHT; + + td.style.width = newWidth + 'px'; + td.style.height = newHeight + 'px'; } } return true; From 45012043762745bfb6a3ce0d3d6f72db65e86f77 Mon Sep 17 00:00:00 2001 From: AndresCT-98 Date: Tue, 4 Jun 2024 15:37:21 -0600 Subject: [PATCH 5/5] use Math.max --- .../lib/tableEdit/editors/features/CellResizer.ts | 13 +++++-------- .../lib/tableEdit/editors/features/TableResizer.ts | 10 ++-------- 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts index 9ecfef46ba6..fa2d8f79e0c 100644 --- a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts +++ b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts @@ -164,10 +164,7 @@ export function onDraggingHorizontal( mutateBlock(cmTable).rows[anchorRow].height = (anchorRowHeight ?? 0) + deltaY; // Normalize the new height value - const newHeight = - cmTable.rows[anchorRow].height > MIN_ALLOWED_TABLE_CELL_HEIGHT - ? cmTable.rows[anchorRow].height - : MIN_ALLOWED_TABLE_CELL_HEIGHT; + const newHeight = Math.max(cmTable.rows[anchorRow].height, MIN_ALLOWED_TABLE_CELL_HEIGHT); // Writeback CM Table size changes to DOM Table const tableRow = table.rows[anchorRow]; @@ -206,10 +203,10 @@ export function onDraggingVertical( if (lastColumn) { // Only the last column changes // Normalize the new width value - const newWidth = - allWidths[anchorColumn] + change < MIN_ALLOWED_TABLE_CELL_WIDTH - ? MIN_ALLOWED_TABLE_CELL_WIDTH - : allWidths[anchorColumn] + change; + const newWidth = Math.max( + allWidths[anchorColumn] + change, + MIN_ALLOWED_TABLE_CELL_WIDTH + ); mutableTable.widths[anchorColumn] = newWidth; } else { // Any other two columns diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts index 5f5dd4bdef8..af2e67f0ba3 100644 --- a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts +++ b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts @@ -219,19 +219,13 @@ export function onDragging( } // Normalize the new height value - const newHeight = - cmTable.rows[row].height > MIN_ALLOWED_TABLE_CELL_HEIGHT - ? cmTable.rows[row].height - : MIN_ALLOWED_TABLE_CELL_HEIGHT; + const newHeight = Math.max(cmTable.rows[row].height, MIN_ALLOWED_TABLE_CELL_HEIGHT); for (let col = 0; col < tableRow.cells.length; col++) { const td = tableRow.cells[col]; // Normalize the new width value - const newWidth = - cmTable.widths[col] > MIN_ALLOWED_TABLE_CELL_HEIGHT - ? cmTable.widths[col] - : MIN_ALLOWED_TABLE_CELL_HEIGHT; + const newWidth = Math.max(cmTable.widths[col], MIN_ALLOWED_TABLE_CELL_HEIGHT); td.style.width = newWidth + 'px'; td.style.height = newHeight + 'px';