Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix cell resizer normalisation #2678

Merged
merged 7 commits into from
Jun 4, 2024
Merged

Fix cell resizer normalisation #2678

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
be98c15
export min height
Andres-CT98 May 31, 2024
e8c899c
only normalise height
Andres-CT98 May 31, 2024
f995a07
move undefined check
Andres-CT98 May 31, 2024
ada5940
Merge branch 'master' of https://github.com/microsoft/roosterjs into …
Andres-CT98 May 31, 2024
d7ed0ce
fix table and cell resizer
Andres-CT98 Jun 4, 2024
146c1e9
Merge branch 'master' of https://github.com/microsoft/roosterjs into …
Andres-CT98 Jun 4, 2024
4501204
use Math.max
Andres-CT98 Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/roosterjs-content-model-dom/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
9 changes: 6 additions & 3 deletions packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -76,8 +79,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;
}
});

Expand Down
20 changes: 11 additions & 9 deletions packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import {
isElementOfType,
normalizeRect,
MIN_ALLOWED_TABLE_CELL_WIDTH,
normalizeTable,
mutateBlock,
MIN_ALLOWED_TABLE_CELL_HEIGHT,
} from 'roosterjs-content-model-dom';
import type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';
import type { IEditor, ReadonlyContentModelTable } from 'roosterjs-content-model-types';
Expand Down Expand Up @@ -159,18 +159,18 @@ export 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
mutateBlock(cmTable).rows[anchorRow].height = (anchorRowHeight ?? 0) + deltaY;

// Normalize the table
normalizeTable(cmTable);
// Normalize the new height value
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];
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;
Expand Down Expand Up @@ -202,7 +202,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 = Math.max(
allWidths[anchorColumn] + change,
MIN_ALLOWED_TABLE_CELL_WIDTH
);
mutableTable.widths[anchorColumn] = newWidth;
} else {
// Any other two columns
const anchorChange = allWidths[anchorColumn] + change;
Expand All @@ -217,9 +222,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];
Expand Down
16 changes: 10 additions & 6 deletions packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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];
Expand All @@ -221,10 +218,17 @@ export function onDragging(
continue;
}

// Normalize the new height value
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];
td.style.width = cmTable.widths[col] + 'px';
td.style.height = cmTable.rows[row].height + 'px';

// Normalize the new width value
const newWidth = Math.max(cmTable.widths[col], MIN_ALLOWED_TABLE_CELL_HEIGHT);

td.style.width = newWidth + 'px';
td.style.height = newHeight + 'px';
}
}
return true;
Expand Down
Loading