@dxos/react-ui-mosaic 0.3.3-main.ff5734a → 0.3.3

package/src/views/Tree/Tree.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef } from 'react';
 
 import { Card, Tree as TreeComponent, TreeItem as TreeItemComponent } from '@dxos/react-ui';
 import { dropRing, mx } from '@dxos/react-ui-theme';
@@ -15,8 +15,7 @@ import {
   useContainer,
   useMosaic,
   Path,
-  useItemsWithPreview,
-  type MosaicCompareDataItem,
+  useItemsWithOrigin,
 } from '../../mosaic';
 
 // TODO(burdon): Tree data model that provides a pure abstraction of the plugin Graph.
@@ -27,7 +26,6 @@ import {
 export type TreeProps<TData extends MosaicDataItem = TreeData> = MosaicContainerProps<TData, number> & {
   items?: TData[];
   debug?: boolean;
-  compare?: MosaicCompareDataItem;
 };
 
 export type TreeData = {
@@ -37,7 +35,7 @@ export type TreeData = {
 };
 
 // TODO(burdon): Make generic (and forwardRef).
-export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], debug, compare }: TreeProps) => {
+export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], debug }: TreeProps) => {
   return (
     <Mosaic.Container
       {...{
@@ -46,7 +44,6 @@ export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], deb
         Component,
         onOver,
         onDrop,
-        compare,
       }}
     >
       <TreeRoot items={items} />
@@ -55,16 +52,13 @@ export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], deb
 };
 
 const TreeRoot = ({ items }: { items: TreeData[] }) => {
-  const { id, Component, compare } = useContainer();
-  const sortedItems = useMemo(() => {
-    return compare ? [...items].sort(compare) : items;
-  }, [items, compare]);
-  const itemsWithPreview = useItemsWithPreview({ items: sortedItems, path: id, strategy: 'layout-stable' });
+  const { id, Component } = useContainer();
+  const itemsWithOrigin = useItemsWithOrigin(id, items);
 
   return (
     <TreeComponent.Root classNames='flex flex-col'>
-      <Mosaic.SortableContext id={id} items={itemsWithPreview} direction='vertical'>
-        {itemsWithPreview.map((item, index) => (
+      <Mosaic.SortableContext id={id} items={itemsWithOrigin} direction='vertical'>
+        {itemsWithOrigin.map((item, index) => (
           <TreeItemComponent.Root key={item.id} collapsible defaultOpen>
             <Mosaic.SortableTile item={item} path={id} position={index} Component={Component!} />
           </TreeItemComponent.Root>
@@ -104,16 +98,13 @@ const TreeItem: MosaicTileComponent<TreeData> = forwardRef(
 
 const TreeBranch = ({ path, items }: { path: string; items: TreeData[] }) => {
   const { operation, overItem } = useMosaic();
-  const { Component, compare } = useContainer();
-  const sortedItems = useMemo(() => {
-    return compare ? [...items].sort(compare) : items;
-  }, [items, compare]);
-  const itemsWithPreview = useItemsWithPreview({ items: sortedItems, path, strategy: 'layout-stable' });
+  const { Component } = useContainer();
+  const itemsWithOrigin = useItemsWithOrigin(path, items);
 
   return (
     <TreeItemComponent.Body className='pis-4'>
-      <Mosaic.SortableContext id={path} items={itemsWithPreview} direction='vertical'>
-        {itemsWithPreview.map((child, index) => (
+      <Mosaic.SortableContext id={path} items={itemsWithOrigin} direction='vertical'>
+        {itemsWithOrigin.map((child, index) => (
           <TreeComponent.Branch key={child.id}>
             <TreeItemComponent.Root collapsible defaultOpen>
               <Mosaic.SortableTile

package/src/views/Tree/testing.tsx

@@ -5,13 +5,13 @@
 import { faker } from '@faker-js/faker';
 import React, { useCallback, useState } from 'react';
 
-import { type Graph, GraphBuilder, type Node } from '@dxos/app-graph';
+import { type Graph, GraphBuilder } from '@dxos/app-graph';
 import { buildGraph } from '@dxos/app-graph/testing';
 import { arrayMove } from '@dxos/util';
 
 import { Tree, type TreeData, type TreeProps } from './Tree';
 import { type MosaicDropEvent, type MosaicMoveEvent, Path, type MosaicOperation } from '../../mosaic';
-import { TestObjectGenerator, nextRearrangeIndex } from '../../testing';
+import { TestObjectGenerator } from '../../testing';
 
 const fake = faker.helpers.fake;
 
@@ -104,18 +104,6 @@ export const createGraph = () => {
   return buildGraph(new GraphBuilder().build(), 'tree', content);
 };
 
-const graphNodeCompare = (a: Node, b: Node) => {
-  if (a.properties.index && b.properties.index) {
-    if (a.properties.index < b.properties.index) {
-      return -1;
-    } else if (a.properties.index > b.properties.index) {
-      return 1;
-    }
-    return 0;
-  }
-  return 0;
-};
-
 export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; graph?: Graph; debug: boolean }) => {
   const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
     // Moving within the tree.
@@ -134,8 +122,7 @@ export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; gr
         operation === 'rearrange'
       ) {
         // This is a rearrange operation
-        const nextIndex = nextRearrangeIndex(activeParent.children.sort(graphNodeCompare), activeNode.id, overNode.id);
-        activeNode.properties.index = nextIndex ?? 'a0';
+        console.warn('[react-ui-mosaic]', 'Tree', 'rearrange', 'needs implementation');
       } else if (activeNode && activeParent && overParent && operation === 'transfer') {
         activeParent.removeNode(active.item.id);
         overNode.addNode('tree', { ...activeNode });
@@ -146,13 +133,6 @@ export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; gr
   const handleOver = (): MosaicOperation => 'transfer';
 
   return (
-    <Tree
-      id={id}
-      items={graph.root.children as TreeData[]}
-      onDrop={handleDrop}
-      onOver={handleOver}
-      debug={debug}
-      compare={graphNodeCompare}
-    />
+    <Tree id={id} items={graph.root.children as TreeData[]} onDrop={handleDrop} onOver={handleOver} debug={debug} />
   );
 };

package/dist/types/src/testing/next-fractional-index.d.ts

@@ -1,5 +0,0 @@
-import { type UniqueIdentifier } from '@dnd-kit/core';
-import { type Node } from '@dxos/app-graph';
-export declare const nextRearrangeIndex: (nodes: Node[], activeId: UniqueIdentifier, overId?: UniqueIdentifier) => string | null;
-export declare const nextCopyIndex: (nodes: Node[], overId?: UniqueIdentifier) => string;
-//# sourceMappingURL=next-fractional-index.d.ts.map

package/dist/types/src/testing/next-fractional-index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"next-fractional-index.d.ts","sourceRoot":"","sources":["../../../../src/testing/next-fractional-index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE5C,eAAO,MAAM,kBAAkB,UAAW,IAAI,EAAE,YAAY,gBAAgB,WAAW,gBAAgB,kBAYtG,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,IAAI,EAAE,WAAW,gBAAgB,WAYrE,CAAC"}

package/src/testing/next-fractional-index.ts

@@ -1,36 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type UniqueIdentifier } from '@dnd-kit/core';
-import { getIndexAbove, getIndexBelow, getIndexBetween } from '@tldraw/indices';
-
-import { type Node } from '@dxos/app-graph';
-
-export const nextRearrangeIndex = (nodes: Node[], activeId: UniqueIdentifier, overId?: UniqueIdentifier) => {
-  const overOrderIndex = nodes.length > 0 ? nodes.findIndex(({ id }) => id === overId) : -1;
-  if (overOrderIndex >= 0) {
-    const activeOrderIndex = nodes.findIndex(({ id }) => id === activeId);
-    return overOrderIndex < 1
-      ? getIndexBelow(nodes[overOrderIndex].properties.index)
-      : activeOrderIndex < overOrderIndex
-      ? getIndexBetween(nodes[overOrderIndex].properties.index, nodes[overOrderIndex + 1]?.properties.index)
-      : getIndexBetween(nodes[overOrderIndex - 1].properties.index, nodes[overOrderIndex].properties.index);
-  } else {
-    return null;
-  }
-};
-
-export const nextCopyIndex = (nodes: Node[], overId?: UniqueIdentifier) => {
-  const overOrderIndex = nodes.length > 0 ? nodes.findIndex(({ id }) => id === overId) : -1;
-  const previewOrderIndex = nodes.findIndex(({ id }) => id.startsWith('preview--'));
-  if (overOrderIndex >= 0) {
-    return overOrderIndex < 1
-      ? getIndexBelow(nodes[overOrderIndex].properties.index)
-      : previewOrderIndex < overOrderIndex && previewOrderIndex >= 0
-      ? getIndexBetween(nodes[overOrderIndex].properties.index, nodes[overOrderIndex + 1]?.properties.index)
-      : getIndexBetween(nodes[overOrderIndex - 1].properties.index, nodes[overOrderIndex]?.properties.index);
-  } else {
-    return nodes.length ? getIndexAbove(nodes[nodes.length - 1].properties.index) : 'a0';
-  }
-};