Skip to content

Commit

Permalink
Refactor table resizer rendering logic (facebook#5957)
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexanderReznik authored Apr 25, 2024
1 parent 937432c commit db7b242
Showing 1 changed file with 24 additions and 27 deletions.
51 changes: 24 additions & 27 deletions packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,11 @@ import {
$getTableRowIndexFromTableCellNode,
$isTableCellNode,
$isTableRowNode,
$isTableSelection,
getDOMCellFromTarget,
TableCellNode,
} from '@lexical/table';
import {calculateZoomLevel} from '@lexical/utils';
import {
$getNearestNodeFromDOMNode,
$getSelection,
COMMAND_PRIORITY_HIGH,
SELECTION_CHANGE_COMMAND,
} from 'lexical';
import {$getNearestNodeFromDOMNode} from 'lexical';
import * as React from 'react';
import {
MouseEventHandler,
Expand Down Expand Up @@ -61,27 +55,10 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
useState<MousePosition | null>(null);

const [activeCell, updateActiveCell] = useState<TableDOMCell | null>(null);
const [isSelectingGrid, updateIsSelectingGrid] = useState<boolean>(false);
const [isMouseDown, updateIsMouseDown] = useState<boolean>(false);
const [draggingDirection, updateDraggingDirection] =
useState<MouseDraggingDirection | null>(null);

useEffect(() => {
return editor.registerCommand(
SELECTION_CHANGE_COMMAND,
(payload) => {
const selection = $getSelection();
const isTableSelection = $isTableSelection(selection);

if (isSelectingGrid !== isTableSelection) {
updateIsSelectingGrid(isTableSelection);
}

return false;
},
COMMAND_PRIORITY_HIGH,
);
});

const resetState = useCallback(() => {
updateActiveCell(null);
targetRef.current = null;
Expand All @@ -90,6 +67,10 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
tableRectRef.current = null;
}, []);

const isMouseDownOnEvent = (event: MouseEvent) => {
return (event.buttons & 1) === 1;
};

useEffect(() => {
const onMouseMove = (event: MouseEvent) => {
setTimeout(() => {
Expand All @@ -102,7 +83,7 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
});
return;
}

updateIsMouseDown(isMouseDownOnEvent(event));
if (resizerRef.current && resizerRef.current.contains(target as Node)) {
return;
}
Expand Down Expand Up @@ -137,10 +118,26 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
}, 0);
};

const onMouseDown = (event: MouseEvent) => {
setTimeout(() => {
updateIsMouseDown(true);
}, 0);
};

const onMouseUp = (event: MouseEvent) => {
setTimeout(() => {
updateIsMouseDown(false);
}, 0);
};

document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mousedown', onMouseDown);
document.addEventListener('mouseup', onMouseUp);

return () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mousedown', onMouseDown);
document.removeEventListener('mouseup', onMouseUp);
};
}, [activeCell, draggingDirection, editor, resetState]);

Expand Down Expand Up @@ -390,7 +387,7 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {

return (
<div ref={resizerRef}>
{activeCell != null && !isSelectingGrid && (
{activeCell != null && !isMouseDown && (
<>
<div
className="TableCellResizer__resizer TableCellResizer__ui"
Expand Down

0 comments on commit db7b242

Please sign in to comment.