From a629ee4db31a6c89a630bee26e981561ae476b2a Mon Sep 17 00:00:00 2001 From: AndresCT-98 Date: Fri, 4 Aug 2023 12:10:16 -0600 Subject: [PATCH 1/2] add anchor container --- .../lib/plugins/TableResize/editors/CellResizer.ts | 5 +++-- .../lib/plugins/TableResize/editors/TableInserter.ts | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/CellResizer.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/CellResizer.ts index 9de03c29b8e..3e2d63edd48 100644 --- a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/CellResizer.ts +++ b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/CellResizer.ts @@ -20,7 +20,8 @@ export default function createCellResizer( onShowHelperElement?: ( elementData: CreateElementData, helperType: 'CellResizer' | 'TableInserter' | 'TableResizer' | 'TableSelector' - ) => void + ) => void, + anchorContainer?: HTMLElement ): TableEditFeature | null { const document = td.ownerDocument; const createElementData = { @@ -32,7 +33,7 @@ export default function createCellResizer( const div = createElement(createElementData, document) as HTMLDivElement; - document.body.appendChild(div); + (anchorContainer || document.body).appendChild(div); const context: DragAndDropContext = { td, isRTL, zoomScale, onStart }; const setPosition = isHorizontal ? setHorizontalPosition : setVerticalPosition; diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableInserter.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableInserter.ts index 94519b87a76..2fdf6af3639 100644 --- a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableInserter.ts +++ b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableInserter.ts @@ -21,7 +21,8 @@ export default function createTableInserter( onShowHelperElement?: ( elementData: CreateElementData, helperType: 'CellResizer' | 'TableInserter' | 'TableResizer' | 'TableSelector' - ) => void + ) => void, + anchorContainer?: HTMLElement ): TableEditFeature | null { const table = editor.getElementAtCursor('table', td); @@ -61,7 +62,7 @@ export default function createTableInserter( (div.firstChild as HTMLElement).style.height = `${tableRect.bottom - tableRect.top}px`; } - document.body.appendChild(div); + (anchorContainer || document.body).appendChild(div); const handler = new TableInsertHandler( div, From 104db61f341e5180c66619dfbe7926a440b990ac Mon Sep 17 00:00:00 2001 From: AndresCT-98 Date: Fri, 4 Aug 2023 12:11:46 -0600 Subject: [PATCH 2/2] fix cel resize bug, pass anchors, optimise --- .../TableResize/editors/TableEditor.ts | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditor.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditor.ts index d5146c2981e..bfebe230958 100644 --- a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditor.ts +++ b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditor.ts @@ -127,7 +127,7 @@ export default class TableEditor { return; } - //Determine if cursor is on top or side + // Determine if cursor is on top or side const topOrSide = y <= firstCellRect.top + INSERTER_HOVER_OFFSET ? TOP_OR_SIDE.top @@ -138,14 +138,16 @@ export default class TableEditor { : x <= firstCellRect.left + INSERTER_HOVER_OFFSET ? TOP_OR_SIDE.side : undefined; + const topOrSideBinary = topOrSide ? 1 : 0; + // Get whole table rect + const tableRect = normalizeRect(this.table.getBoundingClientRect()); // i is row index, j is column index for (let i = 0; i < this.table.rows.length; i++) { const tr = this.table.rows[i]; let j = 0; for (; j < tr.cells.length; j++) { const td = tr.cells[j]; - const tableRect = normalizeRect(this.table.getBoundingClientRect()); const tdRect = normalizeRect(td.getBoundingClientRect()); if (!tdRect || !tableRect) { @@ -153,13 +155,14 @@ export default class TableEditor { } // Determine the cell the cursor is in range of + // Offset is only used for first row and column const lessThanBottom = y <= tdRect.bottom; const lessThanRight = this.isRTL - ? x <= tdRect.right + INSERTER_HOVER_OFFSET + ? x <= tdRect.right + INSERTER_HOVER_OFFSET * topOrSideBinary : x <= tdRect.right; const moreThanLeft = this.isRTL ? x >= tdRect.left - : x >= tdRect.left - INSERTER_HOVER_OFFSET; + : x >= tdRect.left - INSERTER_HOVER_OFFSET * topOrSideBinary; if (lessThanBottom && lessThanRight && moreThanLeft) { const isOnLeftOrRight = this.isRTL @@ -196,6 +199,7 @@ export default class TableEditor { this.setResizingTd(td); + //Cell found break; } } @@ -205,6 +209,7 @@ export default class TableEditor { } } + // Create Selector and Resizer this.setEditorFeatures(); } @@ -248,7 +253,8 @@ export default class TableEditor { true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, - this.onShowHelperElement + this.onShowHelperElement, + this.anchorContainer ); this.verticalResizer = createCellResizer( td, @@ -257,7 +263,8 @@ export default class TableEditor { false /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, - this.onShowHelperElement + this.onShowHelperElement, + this.anchorContainer ); } } @@ -280,7 +287,8 @@ export default class TableEditor { !!isHorizontal, this.onInserted, this.getOnMouseOut, - this.onShowHelperElement + this.onShowHelperElement, + this.anchorContainer ); if (isHorizontal) { this.horizontalInserter = newInserter;