react-arborist 0.1.14 → 0.2.0-beta.0

package/src/components/tree.tsx

@@ -0,0 +1,118 @@
+import { forwardRef, MouseEventHandler, ReactElement, useMemo, useRef } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { FixedSizeList } from "react-window";
+import { useStaticContext } from "../context";
+import { enrichTree } from "../data/enrich-tree";
+import { useOuterDrop } from "../dnd/outer-drop-hook";
+import { TreeViewProvider } from "../provider";
+import { TreeApi } from "../tree-api";
+import { IdObj, Node, TreeProps } from "../types";
+import { noop } from "../utils";
+import { DropCursor } from "./drop-cursor";
+import { Preview } from "./preview";
+import { Row } from "./row";
+
+const OuterElement = forwardRef(function Outer(
+  props: React.HTMLProps<HTMLDivElement>,
+  ref
+) {
+  const { children, ...rest } = props;
+  const tree = useStaticContext();
+  return (
+    // @ts-ignore
+    <div ref={ref} {...rest} onClick={tree.onClick}>
+      <div
+        style={{
+          height: tree.api.visibleNodes.length * tree.rowHeight,
+          width: "100%",
+          overflow: "hidden",
+          position: "absolute",
+          left: "0",
+          right: "0",
+        }}
+      >
+        <DropCursor />
+      </div>
+      {children}
+    </div>
+  );
+});
+
+function List(props: { className?: string}) {
+  const tree = useStaticContext();
+  return (
+    <div style={{ height: tree.height, width: tree.width, overflow: "hidden" }}>
+      <FixedSizeList
+        className={props.className}
+        outerRef={tree.listEl}
+        itemCount={tree.api.visibleNodes.length}
+        height={tree.height}
+        width={tree.width}
+        itemSize={tree.rowHeight}
+        itemKey={(index) => tree.api.visibleNodes[index]?.id || index}
+        outerElementType={OuterElement}
+        // @ts-ignore
+        ref={tree.list}
+      >
+        {Row}
+      </FixedSizeList>
+    </div>
+  );
+}
+
+function OuterDrop(props: { children: ReactElement }) {
+  useOuterDrop();
+  return props.children;
+}
+
+export const Tree = forwardRef(function Tree<T extends IdObj>(
+  props: TreeProps<T>,
+  ref: React.Ref<TreeApi<T>>
+) {
+  const root = useMemo<Node<T>>(
+    () =>
+      enrichTree<T>(
+        props.data,
+        props.hideRoot,
+        props.getChildren,
+        props.isOpen,
+        props.disableDrag,
+        props.disableDrop,
+        props.openByDefault
+      ),
+    [
+      props.data,
+      props.hideRoot,
+      props.getChildren,
+      props.isOpen,
+      props.disableDrag,
+      props.disableDrop,
+      props.openByDefault,
+    ]
+  );
+  return (
+    <TreeViewProvider
+      imperativeHandle={ref}
+      root={root}
+      listEl={useRef<HTMLDivElement | null>(null)}
+      renderer={props.children}
+      width={props.width === undefined ? 300 : props.width}
+      height={props.height === undefined ? 500 : props.height}
+      indent={props.indent === undefined ? 24 : props.indent}
+      rowHeight={props.rowHeight === undefined ? 24 : props.rowHeight}
+      onMove={props.onMove || noop}
+      onToggle={props.onToggle || noop}
+      onEdit={props.onEdit || noop}
+      onClick={props.onClick}
+      onContextMenu={props.onContextMenu}
+    >
+      <DndProvider backend={HTML5Backend}>
+        <OuterDrop>
+          <List className={props.className}/>
+        </OuterDrop>
+        <Preview />
+      </DndProvider>
+    </TreeViewProvider>
+  );
+});

package/src/context.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext, useMemo } from "react";
+import { Cursor } from "./dnd/compute-drop";
+import { Selection } from "./selection/selection";
+import { IdObj, SelectionState, StaticContext } from "./types";
+
+export const CursorParentId = createContext<string | null>(null);
+export function useCursorParentId() {
+  return useContext(CursorParentId);
+}
+
+export const IsCursorOverFolder = createContext<boolean>(false);
+export function useIsCursorOverFolder() {
+  return useContext(IsCursorOverFolder);
+}
+
+export const CursorLocationContext = createContext<Cursor | null>(null);
+export function useCursorLocation() {
+  return useContext(CursorLocationContext);
+}
+
+export const Static = createContext<StaticContext<IdObj> | null>(null);
+export function useStaticContext() {
+  const value = useContext(Static);
+  if (!value) throw new Error("Context must be in a provider");
+  return value;
+}
+
+export const DispatchContext = createContext(null);
+export function useDispatch() {
+  const dispatch = useContext(DispatchContext);
+  if (!dispatch) throw new Error("No dispatch provided");
+  return dispatch;
+}
+
+export const SelectionContext = createContext<SelectionState | null>(null);
+export function useSelectedIds(): string[] {
+  const value = useContext(SelectionContext);
+  if (!value) throw new Error("Must provide selection context");
+  return value.ids;
+}
+
+export function useIsSelected(): (index: number | null) => boolean {
+  const value = useContext(SelectionContext);
+  if (!value) throw new Error("Must provide selection context");
+  const s = useMemo(() => Selection.parse(value.data, []), [value.data]);
+  return (i) => s.contains(i);
+}
+
+export const EditingIdContext = createContext<string | null>(null);
+export function useEditingId(): string | null {
+  return useContext(EditingIdContext);
+}

package/src/data/enrich-tree.ts

@@ -0,0 +1,74 @@
+import { TreeProps, IdObj, Node } from "../types";
+
+function createNode<T extends IdObj>(
+  model: T,
+  level: number,
+  parent: Node<T> | null,
+  children: Node<T>[] | null,
+  isOpen: boolean,
+  isDraggable: boolean,
+  isDroppable: boolean
+): Node<T> {
+  return {
+    id: model.id,
+    level,
+    parent,
+    children,
+    isOpen,
+    isDraggable,
+    isDroppable,
+    model,
+    rowIndex: null,
+  };
+}
+
+function access(obj: any, accessor: string | boolean | Function) {
+  if (typeof accessor === "boolean") {
+    return accessor;
+  }
+
+  if (typeof accessor === "string") {
+    return obj[accessor];
+  }
+
+  return accessor(obj);
+}
+
+export function enrichTree<T extends IdObj>(
+  model: T,
+  hideRoot: boolean = false,
+  getChildren: TreeProps<T>["getChildren"] = "children",
+  isOpen: TreeProps<T>["isOpen"] = "isOpen",
+  disableDrag: TreeProps<T>["disableDrag"] = false,
+  disableDrop: TreeProps<T>["disableDrop"] = false,
+  openByDefault: boolean = true
+): Node<T> {
+  function visitSelfAndChildren(
+    model: T,
+    level: number,
+    parent: Node<T> | null
+  ) {
+    const open = access(model, isOpen) as boolean;
+    const draggable = !access(model, disableDrag) as boolean;
+    const droppable = !access(model, disableDrop) as boolean;
+    const node = createNode<T>(
+      model,
+      level,
+      parent,
+      null,
+      open === undefined ? openByDefault : open,
+      draggable,
+      droppable
+    );
+    const children = access(model, getChildren) as T[];
+
+    if (children) {
+      node.children = children.map((child: T) =>
+        visitSelfAndChildren(child, level + 1, node)
+      );
+    }
+    return node;
+  }
+
+  return visitSelfAndChildren(model, hideRoot ? -1 : 0, null);
+}

package/src/data/flatten-tree.ts

@@ -0,0 +1,17 @@
+import { Node } from "../types";
+
+export function flattenTree<T>(root: Node<T>): Node<T>[] {
+  const list: Node<T>[] = [];
+  let index = 0;
+  function collect(node: Node<T>) {
+    if (node.level >= 0) {
+      node.rowIndex = index++;
+      list.push(node);
+    }
+    if (node.isOpen) {
+      node.children?.forEach(collect);
+    }
+  }
+  collect(root);
+  return list;
+}

package/src/data/make-tree.ts

@@ -0,0 +1,37 @@
+// A function that turns a string of text into a tree
+// Each line is a node
+// The number of spaces at the beginning indicate the level
+
+export function makeTree(string: string) {
+  const root = { id: "ROOT", name: "ROOT", isOpen: true };
+  let prevNode = root;
+  let prevLevel = -1;
+  let id = 1;
+  string.split("\n").forEach((line) => {
+    const name = line.trimStart();
+    const level = line.length - name.length;
+    const diff = level - prevLevel;
+    const node = { id: (id++).toString(), name, isOpen: false };
+    if (diff === 1) {
+      // First child
+      //@ts-ignore
+      node.parent = prevNode;
+      //@ts-ignore
+      prevNode.children = [node];
+    } else {
+      // Find the parent and go up
+      //@ts-ignore
+      let parent = prevNode.parent;
+      for (let i = diff; i < 0; i++) {
+        parent = parent.parent;
+      }
+      //@ts-ignore
+      node.parent = parent;
+      parent.children.push(node);
+    }
+    prevNode = node;
+    prevLevel = level;
+  });
+
+  return root;
+}

package/src/dnd/compute-drop.ts

@@ -0,0 +1,184 @@
+import { XYCoord } from "react-dnd";
+import { Node } from "../types";
+import { bound, indexOf, isClosed, isFolder, isItem } from "../utils";
+import { DropResult } from "./drop-hook";
+
+function measureHover(el: HTMLElement, offset: XYCoord) {
+  const rect = el.getBoundingClientRect();
+  const x = offset.x - Math.round(rect.x);
+  const y = offset.y - Math.round(rect.y);
+  const height = rect.height;
+  const inTopHalf = y < height / 2;
+  const inBottomHalf = !inTopHalf;
+  const pad = height / 4;
+  const inMiddle = y > pad && y < height - pad;
+  const atTop = !inMiddle && inTopHalf;
+  const atBottom = !inMiddle && inBottomHalf;
+  return { x, inTopHalf, inBottomHalf, inMiddle, atTop, atBottom };
+}
+
+type HoverData = ReturnType<typeof measureHover>;
+
+function getNodesAroundCursor(
+  node: Node | null,
+  prev: Node | null,
+  next: Node | null,
+  hover: HoverData
+): [Node | null, Node | null] {
+  if (!node) {
+    // We're hoving over the empty part of the list, not over an item,
+    // Put the cursor below the last item which is "prev"
+    return [prev, null];
+  }
+  if (isFolder(node)) {
+    if (hover.atTop) {
+      return [prev, node];
+    } else if (hover.inMiddle) {
+      return [node, node];
+    } else {
+      return [node, next];
+    }
+  } else {
+    if (hover.inTopHalf) {
+      return [prev, node];
+    } else {
+      return [node, next];
+    }
+  }
+}
+
+type Args = {
+  element: HTMLElement;
+  offset: XYCoord;
+  indent: number;
+  node: Node | null;
+  prevNode: Node | null;
+  nextNode: Node | null;
+};
+
+function getDropLevel(
+  hovering: HoverData,
+  aboveCursor: Node | null,
+  belowCursor: Node | null,
+  indent: number
+) {
+  const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
+  let min, max;
+  if (!aboveCursor) {
+    max = 0;
+    min = 0;
+  } else if (!belowCursor) {
+    max = aboveCursor.level;
+    min = 0;
+  } else {
+    max = aboveCursor.level;
+    min = belowCursor.level;
+  }
+
+  return bound(hoverLevel, min, max);
+}
+
+function canDrop(above: Node | null, below: Node | null) {
+  if (!above) {
+    return true;
+  }
+
+  let n: Node | null = above;
+  if (isClosed(above) && above !== below) n = above.parent;
+
+  while (n) {
+    if (!n.isDroppable) return false;
+    n = n.parent;
+  }
+  return true;
+}
+
+export type ComputedDrop = {
+  drop: DropResult | null;
+  cursor: Cursor | null;
+};
+
+function dropAt(parentId: string | undefined, index: number): DropResult {
+  return { parentId: parentId || null, index };
+}
+
+function lineCursor(index: number, level: number) {
+  return {
+    type: "line" as "line",
+    index,
+    level,
+  };
+}
+
+function noCursor() {
+  return {
+    type: "none" as "none",
+  };
+}
+
+function highlightCursor(id: string) {
+  return {
+    type: "highlight" as "highlight",
+    id,
+  };
+}
+
+function walkUpFrom(node: Node, level: number) {
+  let drop = node;
+  while (drop.parent && drop.level > level) {
+    drop = drop.parent;
+  }
+  const parentId = drop.parent?.id || null;
+  const index = indexOf(drop) + 1;
+  return { parentId, index };
+}
+
+export type LineCursor = ReturnType<typeof lineCursor>;
+export type NoCursor = ReturnType<typeof noCursor>;
+export type HighlightCursor = ReturnType<typeof highlightCursor>;
+export type Cursor = LineCursor | NoCursor | HighlightCursor;
+
+/**
+ * This is the most complex, tricky function in the whole repo.
+ * It could be simplified and made more understandable.
+ */
+export function computeDrop(args: Args): ComputedDrop {
+  const hover = measureHover(args.element, args.offset);
+  const { node, nextNode, prevNode } = args;
+  const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
+
+  if (!canDrop(above, below)) {
+    return { drop: null, cursor: noCursor() };
+  }
+
+  /* Hovering over the middle of a folder */
+  if (node && isFolder(node) && hover.inMiddle) {
+    return {
+      drop: dropAt(node.id, 0),
+      cursor: highlightCursor(node.id),
+    };
+  }
+
+  /* At the top of the list */
+  if (!above) {
+    return {
+      drop: dropAt(below?.parent?.id, 0),
+      cursor: lineCursor(0, 0),
+    };
+  }
+
+  /* The above node is an item or a closed folder */
+  if (isItem(above) || isClosed(above)) {
+    const level = getDropLevel(hover, above, below, args.indent);
+    return {
+      drop: walkUpFrom(above, level),
+      cursor: lineCursor(above.rowIndex! + 1, level),
+    };
+  }
+
+  /* The above node is an open folder */
+  return {
+    drop: dropAt(above?.id, 0),
+    cursor: lineCursor(above.rowIndex! + 1, above.level + 1),
+  };
+}

package/src/dnd/drag-hook.ts

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { ConnectDragSource, useDrag } from "react-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+import { useIsSelected, useSelectedIds, useStaticContext } from "../context";
+import { DragItem, Node } from "../types";
+import { DropResult } from "./drop-hook";
+
+type CollectedProps = { isDragging: boolean };
+
+export function useDragHook(
+  node: Node
+): [{ isDragging: boolean }, ConnectDragSource] {
+  const tree = useStaticContext();
+  const isSelected = useIsSelected();
+  const ids = useSelectedIds();
+  const [{ isDragging }, ref, preview] = useDrag<
+    DragItem,
+    DropResult,
+    CollectedProps
+  >(
+    () => ({
+      canDrag: () => node.isDraggable,
+      type: "NODE",
+      item: () => ({
+        id: node.id,
+        dragIds: isSelected(node.rowIndex) ? ids : [node.id],
+      }),
+      collect: (m) => ({
+        isDragging: m.isDragging(),
+      }),
+      end: (item, monitor) => {
+        tree.api.hideCursor();
+        const drop = monitor.getDropResult();
+        if (drop && drop.parentId) {
+          tree.onMove(item.dragIds, drop.parentId, drop.index);
+          tree.onToggle(drop.parentId, true);
+        }
+      },
+    }),
+    [ids, node]
+  );
+
+  useEffect(() => {
+    preview(getEmptyImage());
+  }, [preview]);
+
+  return [{ isDragging }, ref];
+}

package/src/dnd/drop-hook.ts

@@ -0,0 +1,66 @@
+import { RefObject } from "react";
+import { ConnectDropTarget, useDrop } from "react-dnd";
+import { useStaticContext } from "../context";
+import { DragItem, Node } from "../types";
+import { isDecendent, isFolder } from "../utils";
+import { computeDrop } from "./compute-drop";
+
+export type DropResult = {
+  parentId: string | null;
+  index: number;
+};
+
+export type CollectedProps = undefined;
+
+export function useDropHook(
+  el: RefObject<HTMLElement | null>,
+  node: Node,
+  prev: Node | null,
+  next: Node | null
+): [CollectedProps, ConnectDropTarget] {
+  const tree = useStaticContext();
+  return useDrop<DragItem, DropResult | null, CollectedProps>(
+    () => ({
+      accept: "NODE",
+      canDrop: (item) => {
+        for (let id of item.dragIds) {
+          const drag = tree.api.getNode(id);
+          if (!drag) return false;
+          if (isFolder(drag) && isDecendent(node, drag)) return false;
+        }
+        return true;
+      },
+      hover: (item, m) => {
+        if (m.canDrop()) {
+          const offset = m.getClientOffset();
+          if (!el.current || !offset) return;
+          const { cursor } = computeDrop({
+            element: el.current,
+            offset: offset,
+            indent: tree.indent,
+            node: node,
+            prevNode: prev,
+            nextNode: next,
+          });
+          if (cursor) tree.api.showCursor(cursor);
+        } else {
+          tree.api.hideCursor();
+        }
+      },
+      drop: (item, m): DropResult | undefined | null => {
+        const offset = m.getClientOffset();
+        if (!el.current || !offset) return;
+        const { drop } = computeDrop({
+          element: el.current,
+          offset: offset,
+          indent: tree.indent,
+          node: node,
+          prevNode: prev,
+          nextNode: next,
+        });
+        return drop;
+      },
+    }),
+    [node, prev, el, tree]
+  );
+}

package/src/dnd/measure-hover.ts

@@ -0,0 +1,26 @@
+import { XYCoord } from "react-dnd";
+import { bound } from "../utils";
+
+export function measureHover(el: HTMLElement, offset: XYCoord, indent: number) {
+  const nextEl = el.nextElementSibling as HTMLElement | null;
+  const prevEl = el.previousElementSibling as HTMLElement | null;
+  const rect = el.getBoundingClientRect();
+  const x = offset.x - Math.round(rect.x);
+  const y = offset.y - Math.round(rect.y);
+  const height = rect.height;
+  const inTopHalf = y < height / 2;
+  const inBottomHalf = !inTopHalf;
+  const pad = height / 4;
+  const inMiddle = y > pad && y < height - pad;
+  const maxLevel = Number(
+    inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0
+  );
+  const minLevel = Number(
+    inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0
+  );
+  const level = bound(Math.floor(x / indent), minLevel, maxLevel);
+
+  return { level, inTopHalf, inBottomHalf, inMiddle };
+}
+
+export type HoverData = ReturnType<typeof measureHover>;

package/src/dnd/outer-drop-hook.ts

@@ -0,0 +1,50 @@
+import { useDrop } from "react-dnd";
+import { useStaticContext } from "../context";
+import { DragItem } from "../types";
+import { computeDrop } from "./compute-drop";
+import { DropResult } from "./drop-hook";
+
+export function useOuterDrop() {
+  const tree = useStaticContext();
+
+  // In case we drop an item at the bottom of the list
+  const [, drop] = useDrop<DragItem, DropResult | null, { isOver: boolean }>(
+    () => ({
+      accept: "NODE",
+      hover: (item, m) => {
+        if (!m.isOver({ shallow: true })) return;
+        const offset = m.getClientOffset();
+        if (!tree.listEl.current || !offset) return;
+        const { cursor } = computeDrop({
+          element: tree.listEl.current,
+          offset: offset,
+          indent: tree.indent,
+          node: null,
+          prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
+          nextNode: null,
+        });
+        if (cursor) tree.api.showCursor(cursor);
+      },
+      canDrop: (item, m) => {
+        return m.isOver({ shallow: true });
+      },
+      drop: (item, m) => {
+        if (m.didDrop()) return;
+        const offset = m.getClientOffset();
+        if (!tree.listEl.current || !offset) return;
+        const { drop } = computeDrop({
+          element: tree.listEl.current,
+          offset: offset,
+          indent: tree.indent,
+          node: null,
+          prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
+          nextNode: null,
+        });
+        return drop;
+      },
+    }),
+    [tree]
+  );
+
+  drop(tree.listEl);
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import { Tree } from "./components/tree";
+import { TreeApi } from "./tree-api";
+import type { NodeRenderer, NodeState, NodeHandlers } from "./types";
+
+export { Tree, TreeApi, NodeRenderer, NodeState, NodeHandlers };