tree-element 0.1.1 → 0.2.0

package/src/dragAndDropHandler/dragElement.ts

@@ -1,62 +1,62 @@
 import type { ClassNames } from "../classNames";
 
 interface DragElementParams {
-    autoEscape: boolean;
-    classNames: ClassNames;
-    nodeName: string;
-    offsetX: number;
-    offsetY: number;
-    treeElement: HTMLElement;
+  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);
+  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;
     }
 
-    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);
+    element.style.position = "absolute";
 
-        if (autoEscape) {
-            element.textContent = nodeName;
-        } else {
-            element.innerHTML = nodeName;
-        }
-
-        element.style.position = "absolute";
-
-        return element;
-    }
+    return element;
+  }
 }
 
 export default DragElement;

package/src/dragAndDropHandler/generateHitAreas.ts

@@ -5,191 +5,186 @@ import { getOffsetTop } from "../positionUtils";
 import iterateVisibleNodes from "./iterateVisibleNodes";
 
 interface HitPosition {
-    node: Node;
-    position: null | Position;
-    top: number;
+  node: Node;
+  position: null | Position;
+  top: number;
 }
 
 export const generateHitPositions = (
-    tree: Node,
-    currentNode: Node,
+  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,
+  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);
+      }
+    }
+  };
 
-    return hitPositions;
-};
+  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);
+    }
 
-export const generateHitAreasForGroup = (
-    hitAreas: HitArea[],
-    positionsInGroup: HitPosition[],
-    top: number,
-    bottom: number,
-) => {
-    // limit positions in group
-    const positionCount = Math.min(positionsInGroup.length, 4);
+    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
 
-    const areaHeight = Math.round((bottom - top) / positionCount);
-    let areaTop = top;
+      // 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);
 
-    for (let i = 0; i < positionCount; i++) {
-        const position = positionsInGroup[i] as HitPosition;
+      if (height > 5) {
+        // Subtract 5 pixels to allow more space for the next element.
+        addHitPosition(node, null, top + height - 5);
+      }
 
-        if (position.position) {
-            hitAreas.push({
-                bottom: areaTop + areaHeight,
-                node: position.node,
-                position: position.position,
-                top: areaTop,
-            });
-        }
+      // Stop iterating
+      return false;
+    }
 
-        areaTop += areaHeight;
+    // 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 generateHitAreasFromPositions = (
-    hitPositions: HitPosition[],
-    treeBottom: number,
-): HitArea[] => {
-    if (!hitPositions.length) {
-        return [];
+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,
+      });
     }
 
-    let previousTop = (hitPositions[0] as HitPosition).top;
-    let group: HitPosition[] = [];
-    const hitAreas: HitArea[] = [];
+    areaTop += areaHeight;
+  }
+};
+
+export const generateHitAreasFromPositions = (
+  hitPositions: HitPosition[],
+  treeBottom: number,
+): HitArea[] => {
+  if (!hitPositions.length) {
+    return [];
+  }
 
-    for (const position of hitPositions) {
-        if (position.top !== previousTop && group.length) {
-            generateHitAreasForGroup(
-                hitAreas,
-                group,
-                previousTop,
-                position.top,
-            );
+  let previousTop = (hitPositions[0] as HitPosition).top;
+  let group: HitPosition[] = [];
+  const hitAreas: HitArea[] = [];
 
-            previousTop = position.top;
-            group = [];
-        }
+  for (const position of hitPositions) {
+    if (position.top !== previousTop && group.length) {
+      generateHitAreasForGroup(hitAreas, group, previousTop, position.top);
 
-        group.push(position);
+      previousTop = position.top;
+      group = [];
     }
 
-    generateHitAreasForGroup(hitAreas, group, previousTop, treeBottom);
+    group.push(position);
+  }
+
+  generateHitAreasForGroup(hitAreas, group, previousTop, treeBottom);
 
-    return hitAreas;
+  return hitAreas;
 };
 
 const generateHitAreas = (tree: Node, currentNode: Node, treeBottom: number) =>
-    generateHitAreasFromPositions(
-        generateHitPositions(tree, currentNode),
-        treeBottom,
-    );
+  generateHitAreasFromPositions(
+    generateHitPositions(tree, currentNode),
+    treeBottom,
+  );
 
 export default generateHitAreas;