fix: better column resize performance (#434)

* fix: table padding when it gets scrolled

The handler was getting out of region when table width was wider
than editor size.

* fix: modify scroll view padding

* fix: better column resize performance

Author: zoli

lib/src/editor/block_component/table_block_component/table_col.dart

@@ -33,6 +33,8 @@ class TableCol extends StatefulWidget {
 class _TableColState extends State<TableCol> {
   bool _colActionVisiblity = false;
 
+  Map<String, void Function()> listeners = {};
+
   @override
   Widget build(BuildContext context) {
     List<Widget> children = [];
@@ -98,10 +100,9 @@ class _TableColState extends State<TableCol> {
 
     for (var i = 0; i < rowsLen; i++) {
       final node = widget.tableNode.getCell(widget.colIdx, i);
-
       updateRowHeightCallback(i);
-      node.addListener(() => updateRowHeightCallback(i));
-      node.children.first.addListener(() => updateRowHeightCallback(i));
+      addListener(node, i);
+      addListener(node.children.first, i);
 
       cells.addAll([
         widget.editorState.renderer.build(
@@ -118,14 +119,23 @@ class _TableColState extends State<TableCol> {
     ];
   }
 
+  void addListener(Node node, int row) {
+    if (listeners.containsKey(node.id)) {
+      return;
+    }
+
+    listeners[node.id] = () => updateRowHeightCallback(row);
+    node.addListener(listeners[node.id]!);
+  }
+
   void updateRowHeightCallback(int row) =>
       WidgetsBinding.instance.addPostFrameCallback((_) {
         if (row >= widget.tableNode.rowsLen) {
           return;
         }
 
         final transaction = widget.editorState.transaction;
-        widget.tableNode.updateRowHeight(row, transaction);
+        widget.tableNode.updateRowHeight(row, transaction: transaction);
         if (transaction.operations.isNotEmpty) {
           transaction.afterSelection = transaction.beforeSelection;
           widget.editorState.apply(transaction);

lib/src/editor/block_component/table_block_component/table_col_border.dart

@@ -31,6 +31,8 @@ class _TableColBorderState extends State<TableColBorder> {
   bool _borderHovering = false;
   bool _borderDragging = false;
 
+  Offset initialOffset = const Offset(0, 0);
+
   @override
   Widget build(BuildContext context) {
     return widget.resizable
@@ -44,31 +46,26 @@ class _TableColBorderState extends State<TableColBorder> {
       onEnter: (_) => setState(() => _borderHovering = true),
       onExit: (_) => setState(() => _borderHovering = false),
       child: GestureDetector(
-        onHorizontalDragStart: (_) => setState(() => _borderDragging = true),
-        onHorizontalDragEnd: (_) => setState(() => _borderDragging = false),
-        onHorizontalDragUpdate: (DragUpdateDetails details) async {
-          final RenderBox box =
-              _borderKey.currentContext?.findRenderObject() as RenderBox;
-          final Offset pos = box.localToGlobal(Offset.zero);
-          final double colsHeight = widget.tableNode.colsHeight;
-          final int direction = details.delta.dx > 0 ? 1 : -1;
-          if ((details.globalPosition.dx - pos.dx - (direction * 90)).abs() >
-                  110 ||
-              (details.globalPosition.dy - pos.dy) > colsHeight + 50 ||
-              (details.globalPosition.dy - pos.dy) < -50) {
-            return;
-          }
-
-          final colWidth = widget.tableNode.getColWidth(widget.colIdx);
-
+        onHorizontalDragStart: (DragStartDetails details) {
+          setState(() => _borderDragging = true);
+          initialOffset = details.globalPosition;
+        },
+        onHorizontalDragEnd: (_) {
           final transaction = widget.editorState.transaction;
           widget.tableNode.setColWidth(
             widget.colIdx,
-            colWidth + details.delta.dx,
-            transaction,
+            widget.tableNode.getColWidth(widget.colIdx),
+            transaction: transaction,
+            force: true,
           );
           transaction.afterSelection = transaction.beforeSelection;
-          await widget.editorState.apply(transaction);
+          widget.editorState.apply(transaction);
+          setState(() => _borderDragging = false);
+        },
+        onHorizontalDragUpdate: (DragUpdateDetails details) {
+          final colWidth = widget.tableNode.getColWidth(widget.colIdx);
+          widget.tableNode
+              .setColWidth(widget.colIdx, colWidth + details.delta.dx);
         },
         child: Container(
           key: _borderKey,

lib/src/editor/block_component/table_block_component/table_node.dart

@@ -142,34 +142,59 @@ class TableNode {
       ) +
       _config.borderWidth;
 
-  void setColWidth(int col, double w, Transaction transaction) {
+  void setColWidth(
+    int col,
+    double w, {
+    Transaction? transaction,
+    bool force = false,
+  }) {
     w = w < _config.colMinimumWidth ? _config.colMinimumWidth : w;
-    if (getColWidth(col) != w) {
+    if (getColWidth(col) != w || force) {
       for (var i = 0; i < rowsLen; i++) {
-        transaction.updateNode(_cells[col][i], {TableCellBlockKeys.width: w});
-        updateRowHeight(i, transaction);
+        if (transaction != null) {
+          transaction.updateNode(_cells[col][i], {TableCellBlockKeys.width: w});
+        } else {
+          _cells[col][i].updateAttributes({TableCellBlockKeys.width: w});
+        }
+        updateRowHeight(i, transaction: transaction);
+      }
+      if (transaction != null) {
+        transaction.updateNode(node, node.attributes);
+      } else {
+        node.updateAttributes(node.attributes);
       }
-      transaction.updateNode(node, node.attributes);
     }
   }
 
-  void updateRowHeight(int row, Transaction transaction) {
+  void updateRowHeight(
+    int row, {
+    Transaction? transaction,
+  }) {
     // The extra 8 is because of paragraph padding
     double maxHeight = _cells
         .map<double>((c) => c[row].children.first.rect.height + 8)
         .reduce(max);
 
     if (_cells[0][row].attributes[TableCellBlockKeys.height] != maxHeight) {
       for (var i = 0; i < colsLen; i++) {
-        transaction.updateNode(
-          _cells[i][row],
-          {TableCellBlockKeys.height: maxHeight},
-        );
+        if (transaction != null) {
+          transaction.updateNode(
+            _cells[i][row],
+            {TableCellBlockKeys.height: maxHeight},
+          );
+        } else {
+          _cells[i][row]
+              .updateAttributes({TableCellBlockKeys.height: maxHeight});
+        }
       }
     }
 
     if (node.attributes[TableBlockKeys.colsHeight] != colsHeight) {
-      transaction.updateNode(node, {TableBlockKeys.colsHeight: colsHeight});
+      if (transaction != null) {
+        transaction.updateNode(node, {TableBlockKeys.colsHeight: colsHeight});
+      } else {
+        node.updateAttributes({TableBlockKeys.colsHeight: colsHeight});
+      }
     }
   }
 }

test/new/block_component/table_block_component/table_view_test.dart

@@ -38,7 +38,7 @@ void main() async {
       await editor.ime.insertText('aaaaaaaaa');
 
       final transaction = editor.editorState.transaction;
-      tableNode.updateRowHeight(0, transaction);
+      tableNode.updateRowHeight(0, transaction: transaction);
       await editor.editorState.apply(transaction);
 
       expect(tableNode.getRowHeight(0) != row0beforeHeight, true);
@@ -72,14 +72,14 @@ void main() async {
       await editor.ime.insertText('aaaaaaaaa');
 
       Transaction transaction = editor.editorState.transaction;
-      tableNode.updateRowHeight(0, transaction);
+      tableNode.updateRowHeight(0, transaction: transaction);
       await editor.editorState.apply(transaction);
 
       expect(tableNode.getRowHeight(0) != row0beforeHeight, true);
       expect(tableNode.getRowHeight(0), cell10.children.first.rect.height + 8);
 
       transaction = editor.editorState.transaction;
-      tableNode.setColWidth(1, 302.5, transaction);
+      tableNode.setColWidth(1, 302.5, transaction: transaction);
       await editor.editorState.apply(transaction);
 
       await tester.pumpAndSettle(const Duration(milliseconds: 300));