fix: autoscroll while dragging element

gravity-ui · Sep 24, 2024 · 3049390 · 3049390
1 parent d6c0f5d
commit 3049390
Showing 1 changed file with 68 additions and 0 deletions.
diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js
@@ -262,6 +262,62 @@ export default class GridLayout extends React.PureComponent {
         this.setState({currentDraggingElement, draggedOverGroup: group});
     }
 
+    _renderRectBlock(element) {
+        const parent = element.parentElement;
+        const elementRect = element.getBoundingClientRect();
+        const rectBlocks = {
+            spacers: {
+                top: document.createElement('div'),
+                bottom: document.createElement('div'),
+            },
+            parent,
+        };
+
+        Object.entries(rectBlocks.spacers).forEach(([pos, block]) => {
+            block.style.position = 'absolute';
+            block.style.width = `${elementRect.width}px`;
+            block.style.height = '1px';
+            block.style.left = '0px';
+
+            if (pos === 'top') {
+                block.style.top = '0px';
+            } else {
+                block.style.top = `${elementRect.height - 1}px`;
+            }
+
+            parent.appendChild(block);
+        });
+
+        this._rectBlocks = rectBlocks;
+
+        this._updateRectBlock(element);
+    }
+
+    _updateRectBlock(element) {
+        if (!this._rectBlocks) {
+            return;
+        }
+
+        const parent = this._rectBlocks.parent;
+        const parentRect = parent.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const left = elementRect.left - parentRect.left;
+        const top = elementRect.top - parentRect.top;
+
+        Object.values(this._rectBlocks.spacers).forEach((block) => {
+            block.style.transform = `translate(${left}px, ${top}px)`;
+        });
+    }
+
+    _cleanRectGroup() {
+        if (this._rectBlocks) {
+            Object.values(this._rectBlocks.spacers).forEach((block) => {
+                block.remove();
+            });
+            this._rectBlocks = null;
+        }
+    }
+
     _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
         this.context.onDragStart?.call(
             this,
@@ -276,6 +332,10 @@ export default class GridLayout extends React.PureComponent {
             ),
         );
 
+        if (!this.state.currentDraggingElement) {
+            this._renderRectBlock(element);
+        }
+
         if (this.context.dragOverPlugin) {
             this.setState({isDragging: true});
         } else {
@@ -285,13 +345,17 @@ export default class GridLayout extends React.PureComponent {
     }
 
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
+        this._updateRectBlock(element);
+
         this.context.onDrag?.call(
             this,
             this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element),
         );
     }
 
     _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
+        this._cleanRectGroup();
+
         this._onStop(group, layout);
 
         this.context.onDragStop?.call(
@@ -466,6 +530,10 @@ export default class GridLayout extends React.PureComponent {
         return false;
     };
 
+    renderRectBlocks() {
+        return <div className="test">123</div>;
+    }
+
     renderTemporaryPlaceholder() {
         const {temporaryLayout, noOverlay, draggableHandleClassName} = this.context;