tree-element 0.1.0

package/src/dataLoader.ts

@@ -0,0 +1,92 @@
+import type { ClassNames } from "./classNames";
+import type { LoadData, TriggerEvent } from "./methodTypes";
+import type { Node, NodeData } from "./node";
+import type { DataFilter } from "./options";
+import type RequestUrl from "./requestUrl";
+
+interface DataLoaderParams {
+    classNames: ClassNames;
+    dataFilter?: DataFilter;
+    loadData: LoadData;
+    treeElement: HTMLElement;
+    triggerEvent: TriggerEvent;
+}
+
+export default class DataLoader {
+    private abortController: AbortController;
+    private classNames: ClassNames;
+    private dataFilter?: DataFilter;
+    private loadData: LoadData;
+    private treeElement: HTMLElement;
+    private triggerEvent: TriggerEvent;
+
+    constructor({
+        classNames,
+        dataFilter,
+        loadData,
+        treeElement,
+        triggerEvent,
+    }: DataLoaderParams) {
+        this.abortController = new AbortController();
+        this.classNames = classNames;
+        this.dataFilter = dataFilter;
+        this.loadData = loadData;
+        this.treeElement = treeElement;
+        this.triggerEvent = triggerEvent;
+    }
+
+    public deinit(): void {
+        this.abortController.abort();
+    }
+
+    public async loadFromUrl(
+        url: RequestUrl,
+        node?: Node,
+    ): Promise<void> {
+        const element = node?.element ?? this.treeElement;
+        element.classList.add(this.classNames.loading);
+
+        this.triggerEvent("tree.loading_data", {
+            element,
+            node,
+        });
+
+        const stopLoading = (): void => {
+            element.classList.remove(this.classNames.loading);
+            this.triggerEvent("tree.loaded_data", {
+                element,
+                node,
+            });
+        };
+
+        const handleResponse = async (response: Response): Promise<void> => {
+            if (response.ok) {
+                const data = (await response.json()) as NodeData[];
+
+                stopLoading();
+                this.loadData(
+                    this.dataFilter ? this.dataFilter(data) : data,
+                    node
+                );
+            } else {
+                stopLoading();
+
+                this.triggerEvent("tree.load_failed", { response });
+            }
+        };
+
+        const signal = this.abortController.signal;
+        url.setSearchParam("_", Date.now().toString());
+
+        return fetch(url.toString(), { headers: { "Content-Type": "application/json" }, signal })
+            .then(handleResponse)
+            .catch((error: unknown) => {
+                if (this.abortController.signal.aborted) {
+                    // The request was aborted by deinit.
+                    return;
+                }
+
+                throw error;
+            });
+    }
+}

package/src/dragAndDropHandler/binarySearch.ts

@@ -0,0 +1,27 @@
+function binarySearch<T>(items: T[], compareFn: (a: T) => number): null | T {
+    let low = 0;
+    let high = items.length;
+
+    while (low < high) {
+        const mid = (low + high) >> 1;
+        const item = items[mid];
+
+        if (item === undefined) {
+            return null;
+        }
+
+        const compareResult = compareFn(item);
+
+        if (compareResult > 0) {
+            high = mid;
+        } else if (compareResult < 0) {
+            low = mid + 1;
+        } else {
+            return item;
+        }
+    }
+
+    return null;
+}
+
+export default binarySearch;

package/src/dragAndDropHandler/dragElement.ts

@@ -0,0 +1,62 @@
+import type { ClassNames } from "../classNames";
+
+interface DragElementParams {
+    autoEscape: boolean;
+    classNames: ClassNames;
+    nodeName: string;
+    offsetX: number;
+    offsetY: number;
+    treeElement: HTMLElement;
+}
+
+class DragElement {
+    private element: HTMLElement;
+    private offsetX: number;
+    private offsetY: number;
+
+    constructor({
+        autoEscape,
+        classNames,
+        nodeName,
+        offsetX,
+        offsetY,
+        treeElement,
+    }: DragElementParams) {
+        this.offsetX = offsetX;
+        this.offsetY = offsetY;
+
+        this.element = this.createElement(nodeName, autoEscape, classNames);
+
+        treeElement.appendChild(this.element);
+    }
+
+    public move(pageX: number, pageY: number): void {
+        this.element.style.left = `${pageX - this.offsetX}px`;
+        this.element.style.top = `${pageY - this.offsetY}px`;
+    }
+
+    public remove(): void {
+        this.element.remove();
+    }
+
+    private createElement(
+        nodeName: string,
+        autoEscape: boolean,
+        classNames: ClassNames,
+    ) {
+        const element = document.createElement("span");
+        element.classList.add(classNames.title, classNames.dragging);
+
+        if (autoEscape) {
+            element.textContent = nodeName;
+        } else {
+            element.innerHTML = nodeName;
+        }
+
+        element.style.position = "absolute";
+
+        return element;
+    }
+}
+
+export default DragElement;

package/src/dragAndDropHandler/generateHitAreas.ts

@@ -0,0 +1,195 @@
+import type { Node, Position } from "../node";
+import type { HitArea } from "./types";
+
+import { getOffsetTop } from "../positionUtils";
+import iterateVisibleNodes from "./iterateVisibleNodes";
+
+interface HitPosition {
+    node: Node;
+    position: null | Position;
+    top: number;
+}
+
+export const generateHitPositions = (
+    tree: Node,
+    currentNode: Node,
+): HitPosition[] => {
+    const hitPositions: HitPosition[] = [];
+    let lastTop = 0;
+
+    const addHitPosition = (
+        node: Node,
+        position: null | Position,
+        top: number,
+    ) => {
+        hitPositions.push({
+            node,
+            position,
+            top,
+        });
+        lastTop = top;
+    };
+
+    const handleAfterOpenFolder = (node: Node, nextNode: Node | null) => {
+        if (node === currentNode || nextNode === currentNode) {
+            // Cannot move before or after current item
+            addHitPosition(node, null, lastTop);
+        } else {
+            addHitPosition(node, "after", lastTop);
+        }
+    };
+
+    const handleClosedFolder = (
+        node: Node,
+        nextNode: Node | null,
+        element: HTMLElement,
+    ) => {
+        const top = getOffsetTop(element);
+
+        if (node === currentNode) {
+            // Cannot move after current item
+            addHitPosition(node, null, top);
+        } else {
+            addHitPosition(node, "inside", top);
+
+            // Cannot move before current item
+            if (nextNode !== currentNode) {
+                addHitPosition(node, "after", top);
+            }
+        }
+    };
+
+    const handleFirstNode = (node: Node) => {
+        if (node !== currentNode && node.element) {
+            addHitPosition(node, "before", getOffsetTop(node.element));
+        }
+    };
+
+    const handleNode = (
+        node: Node,
+        nextNode: Node | null,
+        element: HTMLElement,
+    ) => {
+        const top = getOffsetTop(element);
+
+        if (node === currentNode) {
+            // Cannot move inside current item
+            addHitPosition(node, null, top);
+        } else {
+            addHitPosition(node, "inside", top);
+        }
+
+        if (nextNode === currentNode || node === currentNode) {
+            // Cannot move before or after current item
+            addHitPosition(node, null, top);
+        } else {
+            addHitPosition(node, "after", top);
+        }
+    };
+
+    const handleOpenFolder = (node: Node, element: HTMLElement) => {
+        if (node === currentNode) {
+            // Cannot move inside current item
+
+            // Dnd over the current element is not possible: add a position with type None for the top and the bottom.
+            const top = getOffsetTop(element);
+            const height = element.clientHeight;
+            addHitPosition(node, null, top);
+
+            if (height > 5) {
+                // Subtract 5 pixels to allow more space for the next element.
+                addHitPosition(node, null, top + height - 5);
+            }
+
+            // Stop iterating
+            return false;
+        }
+
+        // Cannot move before current item
+        if (node.children[0] !== currentNode) {
+            addHitPosition(node, "inside", getOffsetTop(element));
+        }
+
+        // Continue iterating
+        return true;
+    };
+
+    iterateVisibleNodes(tree, {
+        handleAfterOpenFolder,
+        handleClosedFolder,
+        handleFirstNode,
+        handleNode,
+        handleOpenFolder,
+    });
+
+    return hitPositions;
+};
+
+export const generateHitAreasForGroup = (
+    hitAreas: HitArea[],
+    positionsInGroup: HitPosition[],
+    top: number,
+    bottom: number,
+) => {
+    // limit positions in group
+    const positionCount = Math.min(positionsInGroup.length, 4);
+
+    const areaHeight = Math.round((bottom - top) / positionCount);
+    let areaTop = top;
+
+    for (let i = 0; i < positionCount; i++) {
+        const position = positionsInGroup[i] as HitPosition;
+
+        if (position.position) {
+            hitAreas.push({
+                bottom: areaTop + areaHeight,
+                node: position.node,
+                position: position.position,
+                top: areaTop,
+            });
+        }
+
+        areaTop += areaHeight;
+    }
+};
+
+export const generateHitAreasFromPositions = (
+    hitPositions: HitPosition[],
+    treeBottom: number,
+): HitArea[] => {
+    if (!hitPositions.length) {
+        return [];
+    }
+
+    let previousTop = (hitPositions[0] as HitPosition).top;
+    let group: HitPosition[] = [];
+    const hitAreas: HitArea[] = [];
+
+    for (const position of hitPositions) {
+        if (position.top !== previousTop && group.length) {
+            generateHitAreasForGroup(
+                hitAreas,
+                group,
+                previousTop,
+                position.top,
+            );
+
+            previousTop = position.top;
+            group = [];
+        }
+
+        group.push(position);
+    }
+
+    generateHitAreasForGroup(hitAreas, group, previousTop, treeBottom);
+
+    return hitAreas;
+};
+
+const generateHitAreas = (tree: Node, currentNode: Node, treeBottom: number) =>
+    generateHitAreasFromPositions(
+        generateHitPositions(tree, currentNode),
+        treeBottom,
+    );
+
+export default generateHitAreas;