Repository: motion-canvas/motion-canvas
File: packages/2d/src/components/Node.ts (TypeScript)

Code before:
   * the sibling that's currently at the provided index (if any).
   *
   * @param index - The index to move the node to.
   */
  public moveTo(index: number): this {
    const parent = this.parent();
    if (!parent) {
      return this;
    }

    const currentIndex = parent.children().indexOf(this);
    const by = index - currentIndex;

    return this.move(by);
  }

  /**
   * Move the node below the provided node in the parent's layout.
   *
   * @remarks
   * The node will be moved below the provided node and from then on will be rendered
   * below it. By default, if the node is already positioned lower than the sibling
   * node, it will not get moved.
   *
   * @param node - The sibling node below which to move.
   * @param directlyAbove - Whether the node should be positioned directly below the
   *                        sibling. When true, will move the node even if it is
   *                        already positioned below the sibling.
   */
  public moveBelow(node: Node, directlyBelow = false): this {
    const parent = this.parent();
    if (!parent) {
      return this;
    }

    if (node.parent() !== parent) {
      useLogger().error(
        "Cannot position nodes relative to each other if they don't belong to the same parent.",
      );
      return this;
    }

    const children = parent.children();
    const ownIndex = children.indexOf(this);
    const otherIndex = children.indexOf(node);

    if (!directlyBelow && ownIndex < otherIndex) {
      // Nothing to do if the node is already positioned below the target node.
      // We could move the node so it's directly below the sibling node, but
      // that might suddenly move it on top of other nodes. This is likely
      // not what the user wanted to happen when calling this method.

Review comment (suggestion):
```suggestion
   * @param directlyBelow - Whether the node should be positioned directly below the
```

Code after:
   * the sibling that's currently at the provided index (if any).
   *
   * @param index - The index to move the node to.
   */
  public moveTo(index: number): this {
    const parent = this.parent();
    if (!parent) {
      return this;
    }

    const currentIndex = parent.children().indexOf(this);
    const by = index - currentIndex;

    return this.move(by);
  }

  /**
   * Move the node below the provided node in the parent's layout.
   *
   * @remarks
   * The node will be moved below the provided node and from then on will be
   * rendered below it. By default, if the node is already positioned lower than
   * the sibling node, it will not get moved.
   *
   * @param node - The sibling node below which to move.
   * @param directlyBelow - Whether the node should be positioned directly below
   *                        the sibling. When true, will move the node even if
   *                        it is already positioned below the sibling.
   */
  public moveBelow(node: Node, directlyBelow = false): this {
    const parent = this.parent();
    if (!parent) {
      return this;
    }

    if (node.parent() !== parent) {
      useLogger().error(
        "Cannot position nodes relative to each other if they don't belong to the same parent.",
      );
      return this;
    }

    const children = parent.children();
    const ownIndex = children.indexOf(this);
    const otherIndex = children.indexOf(node);

    if (!directlyBelow && ownIndex < otherIndex) {
      // Nothing to do if the node is already positioned below the target node.
      // We could move the node so it's directly below the sibling node, but
      // that might suddenly move it on top of other nodes. This is likely
      // not what the user wanted to happen when calling this method.