@headless-tree/core 0.0.1

package/src/features/drag-and-drop/utils.ts

@@ -0,0 +1,88 @@
+import { ItemInstance, TreeInstance } from "../../types/core";
+import { DropTarget, DropTargetPosition } from "./types";
+
+export const getDragCode = ({ item, childIndex }: DropTarget<any>) =>
+  `${item.getId()}__${childIndex ?? "none"}`;
+
+export const getDropOffset = (e: any, item: ItemInstance<any>): number => {
+  const bb = item.getElement()?.getBoundingClientRect();
+  return bb ? (e.pageY - bb.top) / bb.height : 0.5;
+};
+
+export const canDrop = (
+  dataTransfer: DataTransfer | null,
+  target: DropTarget<any>,
+  tree: TreeInstance<any>
+) => {
+  const draggedItems = tree.getState().dnd?.draggedItems;
+  const config = tree.getConfig();
+
+  if (draggedItems && !(config.canDrop?.(draggedItems, target) ?? true)) {
+    return false;
+  }
+
+  if (
+    !draggedItems &&
+    dataTransfer &&
+    !config.canDropForeignDragObject?.(dataTransfer, target)
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+const getDropTargetPosition = (
+  offset: number,
+  topLinePercentage: number,
+  bottomLinePercentage: number
+) => {
+  if (offset < topLinePercentage) {
+    return DropTargetPosition.Top;
+  }
+  if (offset > bottomLinePercentage) {
+    return DropTargetPosition.Bottom;
+  }
+  return DropTargetPosition.Item;
+};
+
+export const getDropTarget = (
+  e: any,
+  item: ItemInstance<any>,
+  tree: TreeInstance<any>
+): DropTarget<any> => {
+  const config = tree.getConfig();
+  const offset = getDropOffset(e, item);
+
+  const dropOnItemTarget = { item, childIndex: null };
+
+  const pos = getDropTargetPosition(
+    offset,
+    config.topLinePercentage ?? 0.3,
+    config.bottomLinePercentage ?? 0.7
+  );
+  const inbetweenPos = getDropTargetPosition(offset, 0.5, 0.5);
+
+  if (!config.canDropInbetween) {
+    return dropOnItemTarget;
+  }
+
+  if (!canDrop(e.dataTransfer, dropOnItemTarget, tree)) {
+    return {
+      item: item.getParent(),
+      childIndex:
+        item.getIndexInParent() +
+        (inbetweenPos === DropTargetPosition.Top ? 0 : 1),
+    };
+  }
+
+  if (pos === DropTargetPosition.Item) {
+    return dropOnItemTarget;
+  }
+
+  return {
+    item: item.getParent(),
+    childIndex:
+      item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1),
+  };
+};

package/src/features/expand-all/feature.ts

@@ -0,0 +1,62 @@
+import { FeatureImplementation } from "../../types/core";
+import { ExpandAllFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
+import { poll } from "../../utils";
+
+export const expandAllFeature: FeatureImplementation<
+  any,
+  ExpandAllFeatureDef,
+  | MainFeatureDef
+  | TreeFeatureDef<any>
+  | SyncDataLoaderFeatureDef<any>
+  | ExpandAllFeatureDef
+> = {
+  key: "expand-all",
+  dependingFeatures: ["main", "tree"],
+
+  createTreeInstance: (prev, tree) => ({
+    ...prev,
+
+    expandAll: async (cancelToken) => {
+      await Promise.all(
+        tree.getItems().map((item) => item.expandAll(cancelToken))
+      );
+    },
+
+    collapseAll: async () => {
+      tree.getConfig().setExpandedItems?.([]);
+    },
+  }),
+
+  createItemInstance: (prev, item, tree) => ({
+    ...prev,
+
+    expandAll: async (cancelToken) => {
+      if (cancelToken?.current) {
+        return;
+      }
+
+      item.expand();
+      await poll(() => !tree.getState().loadingItems.includes(item.getId()));
+      await Promise.all(
+        item.getChildren().map(async (child) => {
+          await poll(
+            () => !tree.getState().loadingItems.includes(child.getId())
+          );
+          await child?.expandAll(cancelToken);
+        })
+      );
+    },
+
+    collapseAll: async () => {
+      await Promise.all(
+        item.getChildren().map(async (child) => {
+          await child?.collapseAll();
+        })
+      );
+      item.collapse();
+    },
+  }),
+};

package/src/features/expand-all/types.ts

@@ -0,0 +1,13 @@
+export type ExpandAllFeatureDef = {
+  state: {};
+  config: {};
+  treeInstance: {
+    expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
+    collapseAll: () => Promise<void>;
+  };
+  itemInstance: {
+    expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
+    collapseAll: () => Promise<void>;
+  };
+  hotkeys: never;
+};

package/src/features/hotkeys-core/feature.ts

@@ -0,0 +1,111 @@
+import {
+  FeatureImplementation,
+  HotkeysConfig,
+  TreeInstance,
+} from "../../types/core";
+import {
+  HotkeyConfig,
+  HotkeysCoreDataRef,
+  HotkeysCoreFeatureDef,
+} from "./types";
+import { MainFeatureDef } from "../main/types";
+
+const specialKeys: Record<string, RegExp> = {
+  Letter: /^[a-z]$/,
+  LetterOrNumber: /^[a-z0-9]$/,
+};
+
+const testHotkeyMatch = (
+  pressedKeys: Set<string>,
+  tree: TreeInstance<any>,
+  hotkey: HotkeyConfig<any>
+) => {
+  const supposedKeys = hotkey.hotkey.split("+");
+  const doKeysMatch = supposedKeys.every((key) =>
+    key in specialKeys
+      ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
+      : pressedKeys.has(key)
+  );
+  const isEnabled = !hotkey.isEnabled || hotkey.isEnabled(tree);
+  const equalCounts = pressedKeys.size === supposedKeys.length;
+  return doKeysMatch && isEnabled && equalCounts;
+};
+
+const findHotkeyMatch = (
+  pressedKeys: Set<string>,
+  tree: TreeInstance<any>,
+  config1: HotkeysConfig<any, any>,
+  config2: HotkeysConfig<any, any>
+) => {
+  return Object.entries({ ...config1, ...config2 }).find(([, hotkey]) =>
+    testHotkeyMatch(pressedKeys, tree, hotkey)
+  )?.[0];
+};
+
+export const hotkeysCoreFeature: FeatureImplementation<
+  any,
+  HotkeysCoreFeatureDef<any>,
+  MainFeatureDef | HotkeysCoreFeatureDef<any>
+> = {
+  key: "hotkeys-core",
+  dependingFeatures: ["main", "tree"],
+
+  onTreeMount: (tree, element) => {
+    const data = tree.getDataRef<HotkeysCoreDataRef>();
+    const keydown = (e: KeyboardEvent) => {
+      data.current.pressedKeys ??= new Set();
+      const newMatch = !data.current.pressedKeys.has(e.key);
+      data.current.pressedKeys.add(e.key);
+
+      const hotkeyName = findHotkeyMatch(
+        data.current.pressedKeys,
+        tree as any,
+        tree.getHotkeyPresets(),
+        tree.getConfig().hotkeys as HotkeysConfig<any>
+      );
+
+      if (!hotkeyName) return;
+
+      const hotkeyConfig: HotkeyConfig<any> = {
+        ...tree.getHotkeyPresets()[hotkeyName],
+        ...tree.getConfig().hotkeys?.[hotkeyName],
+      };
+
+      if (!hotkeyConfig) return;
+      if (
+        !hotkeyConfig.allowWhenInputFocused &&
+        e.target instanceof HTMLInputElement
+      )
+        return;
+      if (!hotkeyConfig.canRepeat && !newMatch) return;
+      if (hotkeyConfig.preventDefault) e.preventDefault();
+
+      hotkeyConfig.handler(e, tree as any);
+    };
+
+    const keyup = (e: KeyboardEvent) => {
+      data.current.pressedKeys ??= new Set();
+      data.current.pressedKeys.delete(e.key);
+    };
+
+    // keyup is registered on document, because some hotkeys shift
+    // the focus away from the tree (i.e. search)
+    // and then we wouldn't get the keyup event anymore
+    element.addEventListener("keydown", keydown);
+    document.addEventListener("keyup", keyup);
+    data.current.keydownHandler = keydown;
+    data.current.keyupHandler = keyup;
+  },
+
+  onTreeUnmount: (tree, element) => {
+    const data = tree.getDataRef<HotkeysCoreDataRef>();
+    if (data.current.keyupHandler) {
+      document.removeEventListener("keyup", data.current.keyupHandler);
+      delete data.current.keyupHandler;
+    }
+    if (data.current.keydownHandler) {
+      element.removeEventListener("keydown", data.current.keydownHandler);
+      delete data.current.keydownHandler;
+    }
+  },
+};

package/src/features/hotkeys-core/types.ts

@@ -0,0 +1,36 @@
+import {
+  CustomHotkeysConfig,
+  ItemInstance,
+  TreeInstance,
+} from "../../types/core";
+
+export interface HotkeyConfig<T> {
+  hotkey: string;
+  canRepeat?: boolean;
+  allowWhenInputFocused?: boolean;
+  isEnabled?: (tree: TreeInstance<T>) => boolean;
+  preventDefault?: boolean;
+  handler: (e: KeyboardEvent, tree: TreeInstance<T>) => void;
+}
+
+export type HotkeysCoreDataRef = {
+  keydownHandler?: (e: KeyboardEvent) => void;
+  keyupHandler?: (e: KeyboardEvent) => void;
+  pressedKeys: Set<string>;
+};
+
+export type HotkeysCoreFeatureDef<T> = {
+  state: {};
+  config: {
+    hotkeys?: CustomHotkeysConfig<T>;
+    onTreeHotkey?: (name: string, element: HTMLElement) => void;
+    onItemHotkey?: (
+      name: string,
+      item: ItemInstance<T>,
+      element: HTMLElement
+    ) => void;
+  };
+  treeInstance: {};
+  itemInstance: {};
+  hotkeys: never;
+};

package/src/features/main/types.ts

@@ -0,0 +1,41 @@
+import {
+  FeatureImplementation,
+  HotkeysConfig,
+  ItemInstance,
+  SetStateFn,
+  TreeConfig,
+  TreeState,
+} from "../../types/core";
+import { ItemMeta } from "../tree/types";
+
+export type MainFeatureDef<T = any> = {
+  state: {};
+  config: {
+    features?: FeatureImplementation<any>[];
+    state?: Partial<TreeState<T>>;
+    setState?: SetStateFn<TreeState<T>>;
+  };
+  treeInstance: {
+    setState: SetStateFn<TreeState<T>>;
+    getState: () => TreeState<T>;
+    setConfig: SetStateFn<TreeConfig<T>>;
+    getConfig: () => TreeConfig<T>;
+    getItemInstance: (itemId: string) => ItemInstance<T>;
+    getItems: () => ItemInstance<T>[];
+    registerElement: (element: HTMLElement | null) => void;
+    getElement: () => HTMLElement | undefined | null;
+    /** @internal */
+    getDataRef: <D>() => { current: D };
+    /* @internal */
+    getHotkeyPresets: () => HotkeysConfig<T>;
+    rebuildTree: () => void;
+  };
+  itemInstance: {
+    registerElement: (element: HTMLElement | null) => void;
+    getItemMeta: () => ItemMeta;
+    getElement: () => HTMLElement | undefined | null;
+    /** @internal */
+    getDataRef: <D>() => { current: D };
+  };
+  hotkeys: never;
+};

package/src/features/renaming/feature.ts

@@ -0,0 +1,102 @@
+import { FeatureImplementation, ItemInstance } from "../../types/core";
+import { RenamingFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+import { makeStateUpdater } from "../../utils";
+
+export const renamingFeature: FeatureImplementation<
+  any,
+  RenamingFeatureDef<any>,
+  MainFeatureDef | TreeFeatureDef<any> | RenamingFeatureDef<any>
+> = {
+  key: "renaming",
+  dependingFeatures: ["main", "tree"],
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setRenamingItem: makeStateUpdater("renamingItem", tree),
+    setRenamingValue: makeStateUpdater("renamingValue", tree),
+    canRename: () => true,
+    ...defaultConfig,
+  }),
+
+  createTreeInstance: (prev, instance) => ({
+    ...prev,
+
+    startRenamingItem: (itemId) => {
+      const config = instance.getConfig();
+      const item = instance.getItemInstance(itemId);
+
+      if (!item.canRename()) {
+        return;
+      }
+
+      config.setRenamingItem?.(itemId);
+      config.setRenamingValue?.(item.getItemName());
+    },
+
+    getRenamingItem: () => {
+      const itemId = instance.getState().renamingItem;
+      return itemId ? instance.getItemInstance(itemId) : null;
+    },
+
+    getRenamingValue: () => instance.getState().renamingValue || "",
+
+    abortRenaming: () => {
+      instance.getConfig().setRenamingItem?.(null);
+    },
+
+    completeRenaming: () => {
+      const config = instance.getConfig();
+      const item = instance.getRenamingItem();
+      if (item) {
+        config.onRename?.(item, instance.getState().renamingValue || "");
+      }
+      instance.getConfig().setRenamingItem?.(null);
+    },
+
+    isRenamingItem: () => !!instance.getState().renamingItem,
+  }),
+
+  createItemInstance: (prev, instance, tree) => ({
+    ...prev,
+    getRenameInputProps: () => ({
+      onBlur: () => tree.abortRenaming(),
+      value: tree.getRenamingValue(),
+      onChange: (e) => {
+        tree.getConfig().setRenamingValue?.(e.target.value);
+      },
+    }),
+
+    canRename: () =>
+      tree.getConfig().canRename?.(instance as ItemInstance<any>) ?? true,
+
+    isRenaming: () => instance.getId() === tree.getState().renamingItem,
+  }),
+
+  hotkeys: {
+    renameItem: {
+      hotkey: "F2",
+      handler: (e, tree) => {
+        tree.startRenamingItem(tree.getFocusedItem().getId());
+      },
+    },
+
+    abortRenaming: {
+      hotkey: "Escape",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isRenamingItem(),
+      handler: (e, tree) => {
+        tree.abortRenaming();
+      },
+    },
+
+    completeRenaming: {
+      hotkey: "Enter",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isRenamingItem(),
+      handler: (e, tree) => {
+        tree.completeRenaming();
+      },
+    },
+  },
+};

package/src/features/renaming/types.ts

@@ -0,0 +1,28 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+
+export type RenamingFeatureDef<T> = {
+  state: {
+    renamingItem?: string | null;
+    renamingValue?: string;
+  };
+  config: {
+    setRenamingItem?: SetStateFn<string | null>;
+    setRenamingValue?: SetStateFn<string | undefined>;
+    canRename?: (item: ItemInstance<T>) => boolean;
+    onRename?: (item: ItemInstance<T>, value: string) => void;
+  };
+  treeInstance: {
+    startRenamingItem: (itemId: string) => void;
+    getRenamingItem: () => ItemInstance<T> | null;
+    getRenamingValue: () => string;
+    abortRenaming: () => void;
+    completeRenaming: () => void;
+    isRenamingItem: () => boolean;
+  };
+  itemInstance: {
+    getRenameInputProps: () => any;
+    canRename: () => boolean;
+    isRenaming: () => boolean;
+  };
+  hotkeys: "renameItem" | "abortRenaming" | "completeRenaming";
+};

package/src/features/search/feature.ts

@@ -0,0 +1,142 @@
+import { FeatureImplementation } from "../../types/core";
+import { SearchFeatureDataRef, SearchFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+import { makeStateUpdater, memo } from "../../utils";
+
+export const searchFeature: FeatureImplementation<
+  any,
+  SearchFeatureDef<any>,
+  MainFeatureDef | TreeFeatureDef<any> | SearchFeatureDef<any>
+> = {
+  key: "search",
+  dependingFeatures: ["main", "tree"],
+
+  getInitialState: (initialState) => ({
+    search: null,
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setSearch: makeStateUpdater("search", tree),
+    isSearchMatchingItem: (search, item) =>
+      search.length > 0 &&
+      item.getItemName().toLowerCase().includes(search.toLowerCase()),
+    ...defaultConfig,
+  }),
+
+  createTreeInstance: (prev, instance) => ({
+    ...prev,
+
+    setSearch: (search) => {
+      instance.getConfig().setSearch?.(search);
+      instance
+        .getItems()
+        .find((item) =>
+          instance
+            .getConfig()
+            .isSearchMatchingItem?.(instance.getSearchValue(), item)
+        )
+        ?.setFocused();
+    },
+    openSearch: (initialValue = "") => {
+      instance.setSearch(initialValue);
+      setTimeout(() => {
+        instance
+          .getDataRef<SearchFeatureDataRef>()
+          .current.searchInput?.focus();
+      });
+    },
+    closeSearch: () => {
+      instance.setSearch(null);
+      instance.updateDomFocus();
+    },
+    isSearchOpen: () => instance.getState().search !== null,
+    getSearchValue: () => instance.getState().search || "",
+    registerSearchInputElement: (element) => {
+      const dataRef = instance.getDataRef<SearchFeatureDataRef>();
+      dataRef.current.searchInput = element;
+      if (element && dataRef.current.keydownHandler) {
+        element.addEventListener("keydown", dataRef.current.keydownHandler);
+      }
+    },
+    getSearchInputElement: () =>
+      instance.getDataRef<SearchFeatureDataRef>().current.searchInput ?? null,
+
+    getSearchInputElementProps: () => ({
+      value: instance.getSearchValue(),
+      onChange: (e: any) => instance.setSearch(e.target.value),
+      onBlur: () => instance.closeSearch(),
+    }),
+
+    getSearchMatchingItems: memo(
+      (search, items) =>
+        items.filter((item) =>
+          instance.getConfig().isSearchMatchingItem?.(search, item)
+        ),
+      () => [instance.getSearchValue(), instance.getItems()]
+    ),
+  }),
+
+  createItemInstance: (prev, item, tree) => ({
+    ...prev,
+    isMatchingSearch: () =>
+      tree.getSearchMatchingItems().some((i) => i.getId() === item.getId()),
+  }),
+
+  hotkeys: {
+    openSearch: {
+      hotkey: "LetterOrNumber",
+      preventDefault: true, // TODO make true default
+      isEnabled: (tree) => !tree.isSearchOpen(),
+      handler: (e, tree) => {
+        e.stopPropagation();
+        tree.openSearch(e.key);
+      },
+    },
+
+    closeSearch: {
+      // TODO allow multiple, i.e. Enter
+      hotkey: "Escape",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isSearchOpen(),
+      handler: (e, tree) => {
+        tree.closeSearch();
+      },
+    },
+
+    nextSearchItem: {
+      hotkey: "ArrowDown",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isSearchOpen(),
+      handler: (e, tree) => {
+        // TODO scroll into view
+        const focusItem = tree
+          .getSearchMatchingItems()
+          .find(
+            (item) =>
+              item.getItemMeta().index >
+              tree.getFocusedItem().getItemMeta().index
+          );
+        focusItem?.setFocused();
+      },
+    },
+
+    previousSearchItem: {
+      hotkey: "ArrowUp",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isSearchOpen(),
+      handler: (e, tree) => {
+        // TODO scroll into view
+        const focusItem = [...tree.getSearchMatchingItems()]
+          .reverse()
+          .find(
+            (item) =>
+              item.getItemMeta().index <
+              tree.getFocusedItem().getItemMeta().index
+          );
+        focusItem?.setFocused();
+      },
+    },
+  },
+};

package/src/features/search/types.ts

@@ -0,0 +1,39 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+import { HotkeysCoreDataRef } from "../hotkeys-core/types";
+
+export type SearchFeatureDataRef<T = any> = HotkeysCoreDataRef & {
+  matchingItems: ItemInstance<T>[];
+  searchInput: HTMLInputElement | null;
+};
+
+export type SearchFeatureDef<T> = {
+  state: {
+    search: string | null;
+  };
+  config: {
+    setSearch?: SetStateFn<string | null>;
+    onOpenSearch?: () => void;
+    onCloseSearch?: () => void;
+    onSearchMatchesItems?: (search: string, items: ItemInstance<T>[]) => void;
+    isSearchMatchingItem?: (search: string, item: ItemInstance<T>) => boolean;
+  };
+  treeInstance: {
+    setSearch: (search: string | null) => void;
+    openSearch: (initialValue?: string) => void;
+    closeSearch: () => void;
+    isSearchOpen: () => boolean;
+    getSearchValue: () => string;
+    registerSearchInputElement: (element: HTMLInputElement | null) => void;
+    getSearchInputElement: () => HTMLInputElement | null;
+    getSearchInputElementProps: () => any;
+    getSearchMatchingItems: () => ItemInstance<T>[];
+  };
+  itemInstance: {
+    isMatchingSearch: () => boolean;
+  };
+  hotkeys:
+    | "openSearch"
+    | "closeSearch"
+    | "nextSearchItem"
+    | "previousSearchItem";
+};