@react-stately/layout 3.13.10-nightly.4685 → 3.13.10-nightly.4694

package/src/GridLayout.ts

@@ -0,0 +1,215 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node} from '@react-types/shared';
+import {Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
+
+export interface GridLayoutOptions {
+  /**
+   * The minimum item size.
+   * @default 200 x 200
+   */
+  minItemSize?: Size,
+  /**
+   * The maximum item size.
+   * @default Infinity
+   */
+  maxItemSize?: Size,
+  /**
+   * The minimum space required between items.
+   * @default 18 x 18
+   */
+  minSpace?: Size,
+  /**
+   * The maximum number of columns.
+   * @default Infinity
+   */
+  maxColumns?: number,
+  /**
+   * The thickness of the drop indicator.
+   * @default 2
+   */
+  dropIndicatorThickness?: number
+}
+
+export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
+  protected minItemSize: Size;
+  protected maxItemSize: Size;
+  protected minSpace: Size;
+  protected maxColumns: number;
+  protected dropIndicatorThickness: number;
+  protected itemSize: Size;
+  protected numColumns: number;
+  protected horizontalSpacing: number;
+  protected layoutInfos: LayoutInfo[];
+
+  constructor(options: GridLayoutOptions) {
+    super();
+    this.minItemSize = options.minItemSize || new Size(200, 200);
+    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);
+    this.minSpace = options.minSpace || new Size(18, 18);
+    this.maxColumns = options.maxColumns || Infinity;
+    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
+  }
+
+  validate(): void {
+    let visibleWidth = this.virtualizer.visibleRect.width;
+
+    // The max item width is always the entire viewport.
+    // If the max item height is infinity, scale in proportion to the max width.
+    let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
+    let maxItemHeight = Number.isFinite(this.maxItemSize.height) 
+      ? this.maxItemSize.height
+      : Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);
+
+    // Compute the number of rows and columns needed to display the content
+    let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
+    this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
+
+    // Compute the available width (minus the space between items)
+    let width = visibleWidth - (this.minSpace.width * Math.max(0, this.numColumns));
+
+    // Compute the item width based on the space available
+    let itemWidth = Math.floor(width / this.numColumns);
+    itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
+
+    // Compute the item height, which is proportional to the item width
+    let t = ((itemWidth - this.minItemSize.width) / (maxItemWidth - this.minItemSize.width));
+    let itemHeight = this.minItemSize.height +  Math.floor((maxItemHeight - this.minItemSize.height) * t);
+    itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));
+    this.itemSize = new Size(itemWidth, itemHeight);
+
+    // Compute the horizontal spacing and content height
+    this.horizontalSpacing = Math.floor((visibleWidth - this.numColumns * this.itemSize.width) / (this.numColumns + 1));
+
+    this.layoutInfos = [];
+    for (let node of this.virtualizer.collection) {
+      this.layoutInfos.push(this.getLayoutInfoForNode(node));
+    }
+  }
+
+  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
+    let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
+    let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
+    let result = this.layoutInfos.slice(firstVisibleItem, lastVisibleItem + 1);
+    let persistedIndices = [...this.virtualizer.persistedKeys].map(key => this.virtualizer.collection.getItem(key).index).sort((a, b) => a - b);
+    let persistedBefore = [];
+    for (let index of persistedIndices) {
+      if (index < firstVisibleItem) {
+        persistedBefore.push(this.layoutInfos[index]);
+      } else if (index > lastVisibleItem) {
+        result.push(this.layoutInfos[index]);
+      }
+    }
+    result.unshift(...persistedBefore);
+    return result;
+  }
+
+  protected getIndexAtPoint(x: number, y: number) {
+    let itemHeight = this.itemSize.height + this.minSpace.height;
+    let itemWidth = this.itemSize.width + this.horizontalSpacing;
+    return Math.max(0,
+      Math.min(
+        this.virtualizer.collection.size - 1,
+        Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)
+      )
+    );
+  }
+
+  getLayoutInfo(key: Key): LayoutInfo | null {
+    let node = this.virtualizer.collection.getItem(key);
+    return node ? this.layoutInfos[node.index] : null;
+  }
+
+  protected getLayoutInfoForNode(node: Node<T>): LayoutInfo {
+    let idx = node.index;
+    let row = Math.floor(idx / this.numColumns);
+    let column = idx % this.numColumns;
+    let x = this.horizontalSpacing + column * (this.itemSize.width + this.horizontalSpacing);
+    let y = this.minSpace.height + row * (this.itemSize.height + this.minSpace.height);
+    let rect = new Rect(x, y, this.itemSize.width, this.itemSize.height);
+    return new LayoutInfo(node.type, node.key, rect);
+  }
+
+  getContentSize(): Size {
+    let numRows = Math.ceil(this.virtualizer.collection.size / this.numColumns);
+    let contentHeight = this.minSpace.height + numRows * (this.itemSize.height + this.minSpace.height);  
+    return new Size(this.virtualizer.visibleRect.width, contentHeight);
+  }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+    if (this.layoutInfos.length === 0) {
+      return {type: 'root'};
+    }
+
+    x += this.virtualizer.visibleRect.x;
+    y += this.virtualizer.visibleRect.y;
+    let index = this.getIndexAtPoint(x, y);
+
+    let layoutInfo = this.layoutInfos[index];
+    let target: DropTarget =  {
+      type: 'item',
+      key: layoutInfo.key,
+      dropPosition: 'on'
+    };
+
+    let pos = this.numColumns === 1 ? y : x;
+    let layoutInfoPos = this.numColumns === 1 ? layoutInfo.rect.y : layoutInfo.rect.x;
+    let size = this.numColumns === 1 ? layoutInfo.rect.height : layoutInfo.rect.width;
+    if (isValidDropTarget(target)) {
+      // If dropping on the item is accepted, try the before/after positions
+      // if within 5px of the start or end of the item.
+      if (pos < layoutInfoPos + 5) {
+        target.dropPosition = 'before';
+      } else if (pos > layoutInfoPos + size - 5) {
+        target.dropPosition = 'after';
+      }
+    } else {
+      // If dropping on the item isn't accepted, try the target before or after depending on the position.
+      let mid = layoutInfoPos + size / 2;
+      if (pos <= mid && isValidDropTarget({...target, dropPosition: 'before'})) {
+        target.dropPosition = 'before';
+      } else if (pos >= mid && isValidDropTarget({...target, dropPosition: 'after'})) {
+        target.dropPosition = 'after';
+      }
+    }
+
+    return target;
+  }
+
+  getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
+    let layoutInfo = this.getLayoutInfo(target.key);
+    let rect: Rect;
+    if (this.numColumns === 1) {
+      // Flip from vertical to horizontal if only one column is visible.
+      rect = new Rect(
+        layoutInfo.rect.x,
+        target.dropPosition === 'before' 
+          ? layoutInfo.rect.y - this.minSpace.height / 2 - this.dropIndicatorThickness / 2
+          : layoutInfo.rect.maxY + this.minSpace.height / 2 - this.dropIndicatorThickness / 2,
+        layoutInfo.rect.width,
+        this.dropIndicatorThickness
+      );
+    } else {
+      rect = new Rect(
+        target.dropPosition === 'before' 
+          ? layoutInfo.rect.x - this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2 
+          : layoutInfo.rect.maxX + this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2,
+        layoutInfo.rect.y,
+        this.dropIndicatorThickness,
+        layoutInfo.rect.height
+      );
+    }
+
+    return new LayoutInfo('dropIndicator', target.key + ':' + target.dropPosition, rect);
+  }
+}

package/src/ListLayout.ts

@@ -10,70 +10,55 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, DropTarget, DropTargetDelegate, Key, Node} from '@react-types/shared';
+import {Collection, DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node} from '@react-types/shared';
 import {getChildNodes} from '@react-stately/collections';
 import {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
 
-export type ListLayoutOptions<T> = {
-  /** The height of a row in px. */
+export interface ListLayoutOptions {
+  /** The fixed height of a row in px. */
   rowHeight?: number,
+  /** The estimated height of a row, when row heights are variable. */
   estimatedRowHeight?: number,
+  /** The fixed height of a section header in px. */
   headingHeight?: number,
+  /** The estimated height of a section header, when the height is variable. */
   estimatedHeadingHeight?: number,
-  padding?: number,
-  indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number,
-  loaderHeight?: number,
-  placeholderHeight?: number,
-  forceSectionHeaders?: boolean,
-  enableEmptyState?: boolean
-};
+  /** The thickness of the drop indicator. */
+  dropIndicatorThickness?: number
+}
 
 // A wrapper around LayoutInfo that supports hierarchy
 export interface LayoutNode {
   node?: Node<unknown>,
   layoutInfo: LayoutInfo,
-  header?: LayoutInfo,
   children?: LayoutNode[],
   validRect: Rect,
   index?: number
 }
 
-export interface ListLayoutProps {
-  isLoading?: boolean
-}
-
 const DEFAULT_HEIGHT = 48;
 
 /**
- * The ListLayout class is an implementation of a virtualizer {@link Layout}
- * it is used for creating lists and lists with indented sub-lists.
- *
+ * The ListLayout class is an implementation of a virtualizer {@link Layout}.
  * To configure a ListLayout, you can use the properties to define the
  * layouts and/or use the method for defining indentation.
  * The {@link ListKeyboardDelegate} extends the existing virtualizer
  * delegate with an additional method to do this (it uses the same delegate object as
  * the virtualizer itself).
  */
-export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements DropTargetDelegate {
+export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
   protected rowHeight: number;
   protected estimatedRowHeight: number;
   protected headingHeight: number;
   protected estimatedHeadingHeight: number;
-  protected forceSectionHeaders: boolean;
-  protected padding: number;
-  protected indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number;
-  protected layoutInfos: Map<Key, LayoutInfo>;
+  protected dropIndicatorThickness: number;
   protected layoutNodes: Map<Key, LayoutNode>;
   protected contentSize: Size;
   protected collection: Collection<Node<T>>;
-  protected isLoading: boolean;
-  protected lastWidth: number;
-  protected lastCollection: Collection<Node<T>>;
+  private lastCollection: Collection<Node<T>>;
+  private lastWidth: number;
   protected rootNodes: LayoutNode[];
-  protected invalidateEverything: boolean;
-  protected loaderHeight: number;
-  protected placeholderHeight: number;
-  protected enableEmptyState: boolean;
+  private invalidateEverything: boolean;
   /** The rectangle containing currently valid layout infos. */
   protected validRect: Rect;
   /** The rectangle of requested layout infos so far. */
@@ -83,19 +68,13 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
    * Creates a new ListLayout with options. See the list of properties below for a description
    * of the options that can be provided.
    */
-  constructor(options: ListLayoutOptions<T> = {}) {
+  constructor(options: ListLayoutOptions = {}) {
     super();
     this.rowHeight = options.rowHeight;
     this.estimatedRowHeight = options.estimatedRowHeight;
     this.headingHeight = options.headingHeight;
     this.estimatedHeadingHeight = options.estimatedHeadingHeight;
-    this.forceSectionHeaders = options.forceSectionHeaders;
-    this.padding = options.padding || 0;
-    this.indentationForItem = options.indentationForItem;
-    this.loaderHeight = options.loaderHeight;
-    this.placeholderHeight = options.placeholderHeight;
-    this.enableEmptyState = options.enableEmptyState || false;
-    this.layoutInfos = new Map();
+    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
     this.layoutNodes = new Map();
     this.rootNodes = [];
     this.lastWidth = 0;
@@ -107,7 +86,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
 
   getLayoutInfo(key: Key) {
     this.ensureLayoutInfo(key);
-    return this.layoutInfos.get(key)!;
+    return this.layoutNodes.get(key)?.layoutInfo || null;
   }
 
   getVisibleLayoutInfos(rect: Rect) {
@@ -129,9 +108,6 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       for (let node of nodes) {
         if (this.isVisible(node, rect)) {
           res.push(node.layoutInfo);
-          if (node.header) {
-            res.push(node.header);
-          }
 
           if (node.children) {
             addNodes(node.children);
@@ -166,7 +142,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     // If the layout info wasn't found, it might be outside the bounds of the area that we've
     // computed layout for so far. This can happen when accessing a random key, e.g pressing Home/End.
     // Compute the full layout and try again.
-    if (!this.layoutInfos.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
+    if (!this.layoutNodes.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
       this.requestedRect = new Rect(0, 0, Infinity, Infinity);
       this.rootNodes = this.buildCollection();
       this.requestedRect = new Rect(0, 0, this.contentSize.width, this.contentSize.height);
@@ -176,19 +152,18 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     return false;
   }
 
-  private isVisible(node: LayoutNode, rect: Rect) {
-    return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || this.virtualizer.isPersistedKey(node.layoutInfo.key);
+  protected isVisible(node: LayoutNode, rect: Rect) {
+    return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer.isPersistedKey(node.layoutInfo.key);
   }
 
-  protected shouldInvalidateEverything(invalidationContext: InvalidationContext<ListLayoutProps>) {
+  protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>) {
     // Invalidate cache if the size of the collection changed.
     // In this case, we need to recalculate the entire layout.
     return invalidationContext.sizeChanged;
   }
 
-  validate(invalidationContext: InvalidationContext<ListLayoutProps>) {
+  validate(invalidationContext: InvalidationContext<O>) {
     this.collection = this.virtualizer.collection;
-    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
 
     // Reset valid rect if we will have to invalidate everything.
     // Otherwise we can reuse cached layout infos outside the current visible rect.
@@ -205,8 +180,6 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
         if (!this.collection.getItem(key)) {
           let layoutNode = this.layoutNodes.get(key);
           if (layoutNode) {
-            this.layoutInfos.delete(layoutNode.layoutInfo.key);
-            this.layoutInfos.delete(layoutNode.header?.key);
             this.layoutNodes.delete(key);
           }
         }
@@ -219,12 +192,11 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     this.validRect = this.requestedRect.copy();
   }
 
-  protected buildCollection(): LayoutNode[] {
-    let y = this.padding;
+  protected buildCollection(y = 0): LayoutNode[] {
     let skipped = 0;
     let nodes = [];
     for (let node of this.collection) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
+      let rowHeight = this.rowHeight ?? this.estimatedRowHeight;
 
       // Skip rows before the valid rectangle unless they are already cached.
       if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
@@ -243,25 +215,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       }
     }
 
-    if (this.isLoading) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width,
-        this.loaderHeight ?? this.virtualizer.visibleRect.height);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      nodes.push({layoutInfo: loader});
-      y = loader.rect.maxY;
-    }
-
-    if (nodes.length === 0 && this.enableEmptyState) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width,
-        this.placeholderHeight ?? this.virtualizer.visibleRect.height);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      nodes.push({layoutInfo: placeholder});
-      y = placeholder.rect.maxY;
-    }
-
-    this.contentSize = new Size(this.virtualizer.visibleRect.width, y + this.padding);
+    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
     return nodes;
   }
 
@@ -271,7 +225,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       !this.invalidateEverything &&
       cached &&
       cached.node === node &&
-      y === (cached.header || cached.layoutInfo).rect.y &&
+      y === cached.layoutInfo.rect.y &&
       cached.layoutInfo.rect.intersects(this.validRect) &&
       cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect))
     );
@@ -286,11 +240,6 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     layoutNode.node = node;
 
     layoutNode.layoutInfo.parentKey = parentKey ?? null;
-    this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
-    if (layoutNode.header) {
-      this.layoutInfos.set(layoutNode.header.key, layoutNode.header);
-    }
-
     this.layoutNodes.set(node.key, layoutNode);
     return layoutNode;
   }
@@ -306,17 +255,8 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     }
   }
 
-  private buildSection(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
-    let header = null;
-    if (node.rendered || this.forceSectionHeaders) {
-      let headerNode = this.buildSectionHeader(node, x, y);
-      header = headerNode.layoutInfo;
-      header.key += ':header';
-      header.parentKey = node.key;
-      y += header.rect.height;
-    }
-
     let rect = new Rect(0, y, width, 0);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
 
@@ -347,14 +287,13 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     rect.height = y - startY;
 
     return {
-      header,
       layoutInfo,
       children,
       validRect: layoutInfo.rect.intersection(this.requestedRect)
     };
   }
 
-  private buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let rectHeight = this.headingHeight;
     let isEstimated = false;
@@ -365,7 +304,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       // Mark as estimated if the size of the overall virtualizer changed,
       // or the content of the item changed.
       let previousLayoutNode = this.layoutNodes.get(node.key);
-      let previousLayoutInfo = previousLayoutNode?.header || previousLayoutNode?.layoutInfo;
+      let previousLayoutInfo = previousLayoutNode?.layoutInfo;
       if (previousLayoutInfo) {
         let curNode = this.collection.getItem(node.key);
         let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
@@ -391,7 +330,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     };
   }
 
-  private buildItem(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let rectHeight = this.rowHeight;
     let isEstimated = false;
@@ -415,14 +354,8 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       rectHeight = DEFAULT_HEIGHT;
     }
 
-    if (typeof this.indentationForItem === 'function') {
-      x += this.indentationForItem(this.collection, node.key) || 0;
-    }
-
     let rect = new Rect(x, y, width - x, rectHeight);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-    // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
-    layoutInfo.allowOverflow = true;
     layoutInfo.estimatedSize = isEstimated;
     return {
       layoutInfo,
@@ -431,18 +364,19 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
   }
 
   updateItemSize(key: Key, size: Size) {
-    let layoutInfo = this.layoutInfos.get(key);
+    let layoutNode = this.layoutNodes.get(key);
     // If no layoutInfo, item has been deleted/removed.
-    if (!layoutInfo) {
+    if (!layoutNode) {
       return false;
     }
 
+    let layoutInfo = layoutNode.layoutInfo;
     layoutInfo.estimatedSize = false;
     if (layoutInfo.rect.height !== size.height) {
       // Copy layout info rather than mutating so that later caches are invalidated.
       let newLayoutInfo = layoutInfo.copy();
       newLayoutInfo.rect.height = size.height;
-      this.layoutInfos.set(key, newLayoutInfo);
+      layoutNode.layoutInfo = newLayoutInfo;
 
       // Items after this layoutInfo will need to be repositioned to account for the new height.
       // Adjust the validRect so that only items above remain valid.
@@ -473,9 +407,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       n.validRect = n.validRect.intersection(this.validRect);
 
       // Replace layout info in LayoutNode
-      if (n.header === oldLayoutInfo) {
-        n.header = newLayoutInfo;
-      } else if (n.layoutInfo === oldLayoutInfo) {
+      if (n.layoutInfo === oldLayoutInfo) {
         n.layoutInfo = newLayoutInfo;
       }
     }
@@ -519,4 +451,18 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
 
     return target;
   }
+
+  getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
+    let layoutInfo = this.getLayoutInfo(target.key);
+    let rect: Rect;
+    if (target.dropPosition === 'before') {
+      rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.y - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+    } else if (target.dropPosition === 'after') {
+      rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+    } else {
+      rect = layoutInfo.rect;
+    }
+
+    return new LayoutInfo('dropIndicator', target.key + ':' + target.dropPosition, rect);
+  }
 }