tree-element 0.1.0

package/src/keyHandler.ts

@@ -0,0 +1,139 @@
+import type {
+    CloseNode,
+    GetSelectedNode,
+    IsFocusOnTree,
+    OpenNode,
+    SelectNode,
+} from "./methodTypes";
+import type { Node } from "./node";
+
+interface KeyHandlerParams {
+    closeNode: CloseNode;
+    getSelectedNode: GetSelectedNode;
+    isFocusOnTree: IsFocusOnTree;
+    keyboardSupport: boolean;
+    openNode: OpenNode;
+    selectNode: SelectNode;
+}
+
+export default class KeyHandler {
+    private closeNode: CloseNode;
+    private getSelectedNode: GetSelectedNode;
+
+    private isFocusOnTree: IsFocusOnTree;
+
+    private keyboardSupport: boolean;
+    private openNode: OpenNode;
+    private originalSelectNode: SelectNode;
+    constructor({
+        closeNode,
+        getSelectedNode,
+        isFocusOnTree,
+        keyboardSupport,
+        openNode,
+        selectNode,
+    }: KeyHandlerParams) {
+        this.closeNode = closeNode;
+        this.getSelectedNode = getSelectedNode;
+        this.isFocusOnTree = isFocusOnTree;
+        this.keyboardSupport = keyboardSupport;
+        this.openNode = openNode;
+        this.originalSelectNode = selectNode;
+
+        if (keyboardSupport) {
+            document.addEventListener("keydown", this.handleKeyDown);
+        }
+    }
+
+    public deinit(): void {
+        if (this.keyboardSupport) {
+            document.removeEventListener("keydown", this.handleKeyDown);
+        }
+    }
+
+    public moveDown(selectedNode: Node): boolean {
+        return this.selectNode(selectedNode.getNextVisibleNode());
+    }
+
+    public moveUp(selectedNode: Node): boolean {
+        return this.selectNode(selectedNode.getPreviousVisibleNode());
+    }
+
+    private canHandleKeyboard(): boolean {
+        return this.keyboardSupport && this.isFocusOnTree();
+    }
+
+    private handleKeyDown = (e: KeyboardEvent): void => {
+        if (!this.canHandleKeyboard()) {
+            return;
+        }
+
+        let isKeyHandled = false;
+
+        const selectedNode = this.getSelectedNode();
+        if (selectedNode) {
+            switch (e.key) {
+                case "ArrowDown":
+                    isKeyHandled = this.moveDown(selectedNode);
+                    break;
+
+                case "ArrowLeft":
+                    isKeyHandled = this.moveLeft(selectedNode);
+                    break;
+
+                case "ArrowRight":
+                    isKeyHandled = this.moveRight(selectedNode);
+                    break;
+
+                case "ArrowUp":
+                    isKeyHandled = this.moveUp(selectedNode);
+                    break;
+            }
+        }
+
+        if (isKeyHandled) {
+            e.preventDefault();
+        }
+    };
+
+    private moveLeft(selectedNode: Node): boolean {
+        if (selectedNode.isFolder() && selectedNode.is_open) {
+            // Left on an open node closes the node
+            this.closeNode(selectedNode);
+            return true;
+        } else {
+            // Left on a closed or end node moves focus to the node's parent
+            return this.selectNode(selectedNode.getParent());
+        }
+    }
+
+    private moveRight(selectedNode: Node): boolean {
+        if (!selectedNode.isFolder()) {
+            return false;
+        } else {
+            // folder node
+            if (selectedNode.is_open) {
+                // Right moves to the first child of an open node
+                return this.selectNode(selectedNode.getNextVisibleNode());
+            } else {
+                // Right expands a closed node
+                void this.openNode(selectedNode);
+                return true;
+            }
+        }
+    }
+
+    /* Select the node.
+     * Don't do anything if the node is null.
+     * Result: a different node was selected.
+     */
+    private selectNode(node: Node | null): boolean {
+        if (!node) {
+            return false;
+        } else {
+            this.originalSelectNode(node);
+
+            return true;
+        }
+    }
+}

package/src/methodTypes.ts

@@ -0,0 +1,44 @@
+import type { TreeEventName, TreeEvents } from "./events";
+import type { Node, NodeData, NodeId } from "./node";
+import type NodeElement from "./nodeElement";
+
+export type AddToSelection = (node: Node) => void;
+
+export type CloseNode = (node: Node) => void;
+
+export type GetNodeById = (nodeId: NodeId) => Node | null;
+
+export type GetNodeElementForNode = (node: Node) => NodeElement;
+
+export type GetScrollLeft = () => number;
+
+export type GetSelectedNode = () => false | Node;
+
+export type GetSelectedNodes = () => Node[];
+
+export type GetTree = () => Node | null;
+
+export type IsFocusOnTree = () => boolean;
+
+export type IsNodeSelected = (node: Node) => boolean;
+
+export type LoadData = (data: NodeData[], parentNode?: Node) => void;
+
+export type OpenNode = (
+    node: Node,
+    slide?: boolean,
+) => Promise<void>;
+
+export type OpenParents = (node: Node) => void;
+
+export type RefreshElements = (fromNode: Node | null) => void;
+
+export type RemoveFromSelection = (node: Node) => void;
+
+export type SelectNode = (node: Node) => void;
+
+// Trigger an event. Return if the event is processed (true) or cancelled (false).
+export type TriggerEvent = <Name extends TreeEventName>(
+    eventName: Name,
+    values?: TreeEvents[Name],
+) => boolean;

package/src/mouseHandler.ts

@@ -0,0 +1,391 @@
+import type { ClassNames } from "./classNames";
+import type { TriggerEvent } from "./methodTypes";
+import type { PositionInfo } from "./mouseUtils";
+import type { Node } from "./node";
+
+import {
+    getPositionInfoFromMouseEvent,
+    getPositionInfoFromTouch,
+} from "./mouseUtils";
+
+export type GetMouseDelay = () => number;
+export type GetNode = (element: HTMLElement) => Node | null;
+export type MouseCapture = (positionInfo: PositionInfo) => boolean | null;
+export type MouseStart = (positionInfo: PositionInfo) => boolean;
+
+interface ClickTarget {
+    node: Node;
+    type: "button" | "label";
+}
+
+interface MouseHandlerParams {
+    classNames: ClassNames;
+    element: HTMLElement;
+    getMouseDelay: () => number;
+    getNode: GetNode;
+    onClickButton: (node: Node) => void;
+    onClickTitle: (node: Node) => void;
+    onMouseCapture: MouseCapture;
+    onMouseDrag: (positionInfo: PositionInfo) => void;
+    onMouseStart: MouseStart;
+    onMouseStop: (positionInfo: PositionInfo) => void;
+    triggerEvent: TriggerEvent;
+    useContextMenu: boolean;
+}
+
+class MouseHandler {
+    private classNames: ClassNames;
+    private element: HTMLElement;
+    private getMouseDelay: GetMouseDelay;
+    private getNode: GetNode;
+
+    private isMouseDelayMet: boolean;
+
+    private isMouseStarted: boolean;
+
+    private mouseDelayTimer: null | number;
+
+    private mouseDownInfo: null | PositionInfo;
+    private onClickButton: (node: Node) => void;
+    private onClickTitle: (node: Node) => void;
+
+    private onMouseCapture: MouseCapture;
+
+    private onMouseDrag: (positionInfo: PositionInfo) => void;
+
+    private onMouseStart: MouseStart;
+
+    private onMouseStop: (positionInfo: PositionInfo) => void;
+
+    private triggerEvent: TriggerEvent;
+    private useContextMenu: boolean;
+    constructor({
+        classNames,
+        element,
+        getMouseDelay,
+        getNode,
+        onClickButton,
+        onClickTitle,
+        onMouseCapture,
+        onMouseDrag,
+        onMouseStart,
+        onMouseStop,
+        triggerEvent,
+        useContextMenu,
+    }: MouseHandlerParams) {
+        this.classNames = classNames;
+        this.element = element;
+        this.getMouseDelay = getMouseDelay;
+        this.getNode = getNode;
+        this.onClickButton = onClickButton;
+        this.onClickTitle = onClickTitle;
+        this.onMouseCapture = onMouseCapture;
+        this.onMouseDrag = onMouseDrag;
+        this.onMouseStart = onMouseStart;
+        this.onMouseStop = onMouseStop;
+        this.triggerEvent = triggerEvent;
+        this.useContextMenu = useContextMenu;
+
+        element.addEventListener("click", this.handleClick);
+        element.addEventListener("dblclick", this.handleDblclick);
+        element.addEventListener("mousedown", this.mouseDown, {
+            passive: false,
+        });
+        element.addEventListener("touchstart", this.touchStart, {
+            passive: false,
+        });
+
+        if (useContextMenu) {
+            element.addEventListener("contextmenu", this.handleContextmenu);
+        }
+
+        this.isMouseStarted = false;
+        this.mouseDelayTimer = null;
+        this.isMouseDelayMet = false;
+        this.mouseDownInfo = null;
+    }
+    public deinit(): void {
+        this.element.removeEventListener("click", this.handleClick);
+        this.element.removeEventListener("dblclick", this.handleDblclick);
+
+        if (this.useContextMenu) {
+            this.element.removeEventListener(
+                "contextmenu",
+                this.handleContextmenu,
+            );
+        }
+
+        this.element.removeEventListener("mousedown", this.mouseDown);
+        this.element.removeEventListener("touchstart", this.touchStart);
+        this.removeMouseMoveEventListeners();
+    }
+    private getClickTarget(element: HTMLElement): ClickTarget | null {
+        const button = element.closest<HTMLElement>(
+            `.${this.classNames.toggler}`,
+        );
+
+        if (button) {
+            const node = this.getNode(button);
+
+            if (node) {
+                return {
+                    node,
+                    type: "button",
+                };
+            }
+        } else {
+            const treeElement = element.closest<HTMLElement>(
+                `.${this.classNames.element}`,
+            );
+
+            if (treeElement) {
+                const node = this.getNode(treeElement);
+                if (node) {
+                    return {
+                        node,
+                        type: "label",
+                    };
+                }
+            }
+        }
+
+        return null;
+    }
+    private handleClick = (e: MouseEvent): void => {
+        if (!e.target) {
+            return;
+        }
+
+        const clickTarget = this.getClickTarget(e.target as HTMLElement);
+
+        if (!clickTarget) {
+            return;
+        }
+
+        switch (clickTarget.type) {
+            case "button":
+                this.onClickButton(clickTarget.node);
+
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+
+            case "label": {
+                if (this.triggerEvent("tree.click", {
+                    node: clickTarget.node,
+                    originalEvent: e,
+                })) {
+                    this.onClickTitle(clickTarget.node);
+                }
+                break;
+            }
+        }
+    };
+
+    private handleContextmenu = (e: MouseEvent) => {
+        if (!e.target) {
+            return;
+        }
+
+        const div = (e.target as HTMLElement).closest<HTMLElement>(
+            `ul.${this.classNames.tree} .${this.classNames.element}`,
+        );
+
+        if (div) {
+            const node = this.getNode(div);
+            if (node) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                this.triggerEvent("tree.contextmenu", {
+                    node,
+                    originalEvent: e,
+                });
+                return false;
+            }
+        }
+
+        return null;
+    };
+
+    private handleDblclick = (e: MouseEvent): void => {
+        if (!e.target) {
+            return;
+        }
+
+        const clickTarget = this.getClickTarget(e.target as HTMLElement);
+
+        if (clickTarget?.type === "label") {
+            this.triggerEvent("tree.dblclick", {
+                node: clickTarget.node,
+                originalEvent: e,
+            });
+        }
+    };
+
+    private handleMouseDown(positionInfo: PositionInfo): boolean {
+        // We may have missed mouseup (out of window)
+        if (this.isMouseStarted) {
+            this.handleMouseUp(positionInfo);
+        }
+
+        this.mouseDownInfo = positionInfo;
+
+        if (!this.onMouseCapture(positionInfo)) {
+            return false;
+        }
+
+        this.handleStartMouse();
+
+        return true;
+    }
+
+    private handleMouseMove(
+        e: MouseEvent | TouchEvent,
+        positionInfo: PositionInfo,
+    ): void {
+        if (this.isMouseStarted) {
+            this.onMouseDrag(positionInfo);
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+            return;
+        }
+
+        if (!this.isMouseDelayMet) {
+            return;
+        }
+
+        if (this.mouseDownInfo) {
+            this.isMouseStarted = this.onMouseStart(this.mouseDownInfo);
+        }
+
+        if (this.isMouseStarted) {
+            this.onMouseDrag(positionInfo);
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        } else {
+            this.handleMouseUp(positionInfo);
+        }
+    }
+    private handleMouseUp(positionInfo: PositionInfo): void {
+        this.removeMouseMoveEventListeners();
+        this.isMouseDelayMet = false;
+        this.mouseDownInfo = null;
+
+        if (this.isMouseStarted) {
+            this.isMouseStarted = false;
+            this.onMouseStop(positionInfo);
+        }
+    }
+
+    private handleStartMouse(): void {
+        document.addEventListener("mousemove", this.mouseMove, {
+            passive: false,
+        });
+        document.addEventListener("touchmove", this.touchMove, {
+            passive: false,
+        });
+        document.addEventListener("mouseup", this.mouseUp, { passive: false });
+        document.addEventListener("touchend", this.touchEnd, {
+            passive: false,
+        });
+
+        const mouseDelay = this.getMouseDelay();
+
+        if (mouseDelay) {
+            this.startMouseDelayTimer(mouseDelay);
+        } else {
+            this.isMouseDelayMet = true;
+        }
+    }
+
+    private mouseDown = (e: MouseEvent): void => {
+        // Left mouse button?
+        if (e.button !== 0) {
+            return;
+        }
+
+        const result = this.handleMouseDown(getPositionInfoFromMouseEvent(e));
+
+        if (result && e.cancelable) {
+            e.preventDefault();
+        }
+    };
+
+    private mouseMove = (e: MouseEvent): void => {
+        this.handleMouseMove(e, getPositionInfoFromMouseEvent(e));
+    };
+
+    private mouseUp = (e: MouseEvent): void => {
+        this.handleMouseUp(getPositionInfoFromMouseEvent(e));
+    };
+
+    private removeMouseMoveEventListeners() {
+        document.removeEventListener("mousemove", this.mouseMove);
+        document.removeEventListener("touchmove", this.touchMove);
+        document.removeEventListener("mouseup", this.mouseUp);
+        document.removeEventListener("touchend", this.touchEnd);
+    }
+
+    private startMouseDelayTimer(mouseDelay: number): void {
+        if (this.mouseDelayTimer) {
+            clearTimeout(this.mouseDelayTimer);
+        }
+
+        this.mouseDelayTimer = window.setTimeout(() => {
+            if (this.mouseDownInfo) {
+                this.isMouseDelayMet = true;
+            }
+        }, mouseDelay);
+
+        this.isMouseDelayMet = false;
+    }
+
+    private touchEnd = (e: TouchEvent): void => {
+        if (e.touches.length > 1) {
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
+        }
+
+        this.handleMouseUp(getPositionInfoFromTouch(touch, e));
+    };
+
+    private touchMove = (e: TouchEvent): void => {
+        if (e.touches.length > 1) {
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
+        }
+
+        this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
+    };
+
+    private touchStart = (e: TouchEvent): void => {
+        if (e.touches.length > 1) {
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
+        }
+
+        this.handleMouseDown(getPositionInfoFromTouch(touch, e));
+    };
+}
+
+export default MouseHandler;

package/src/mouseUtils.ts

@@ -0,0 +1,23 @@
+export interface PositionInfo {
+    originalEvent: Event;
+    pageX: number;
+    pageY: number;
+    target: HTMLElement;
+}
+
+export const getPositionInfoFromMouseEvent = (e: MouseEvent): PositionInfo => ({
+    originalEvent: e,
+    pageX: e.pageX,
+    pageY: e.pageY,
+    target: e.target as HTMLElement,
+});
+
+export const getPositionInfoFromTouch = (
+    touch: Touch,
+    e: TouchEvent,
+): PositionInfo => ({
+    originalEvent: e,
+    pageX: touch.pageX,
+    pageY: touch.pageY,
+    target: touch.target as HTMLElement,
+});