jqtree 1.7.5 → 1.8.1

package/src/mouseHandler.ts

@@ -0,0 +1,385 @@
+import {
+    getPositionInfoFromMouseEvent,
+    getPositionInfoFromTouch,
+    PositionInfo,
+} from "./mouseUtils";
+import { Node } from "./node";
+import { TriggerEvent } from "./jqtreeMethodTypes";
+
+interface ClickTarget {
+    node: Node;
+    type: "button" | "label";
+}
+
+type GetNode = (element: HTMLElement) => null | Node;
+
+interface MouseHandlerParams {
+    element: HTMLElement;
+    getMouseDelay: () => number;
+    getNode: GetNode;
+    onClickButton: (node: Node) => void;
+    onClickTitle: (node: Node) => void;
+    onMouseCapture: (positionInfo: PositionInfo) => boolean | null;
+    onMouseDrag: (positionInfo: PositionInfo) => void;
+    onMouseStart: (positionInfo: PositionInfo) => boolean;
+    onMouseStop: (positionInfo: PositionInfo) => void;
+    triggerEvent: TriggerEvent;
+    useContextMenu: boolean;
+}
+
+class MouseHandler {
+    private element: HTMLElement;
+    private getMouseDelay: () => number;
+    private getNode: GetNode;
+    private isMouseDelayMet: boolean;
+    private isMouseStarted: boolean;
+    private mouseDelayTimer: number | null;
+    private mouseDownInfo: PositionInfo | null;
+    private onClickButton: (node: Node) => void;
+    private onClickTitle: (node: Node) => void;
+    private onMouseCapture: (positionInfo: PositionInfo) => boolean | null;
+    private onMouseDrag: (positionInfo: PositionInfo) => void;
+    private onMouseStart: (positionInfo: PositionInfo) => boolean;
+    private onMouseStop: (positionInfo: PositionInfo) => void;
+    private triggerEvent: TriggerEvent;
+    private useContextMenu: boolean;
+
+    constructor({
+        element,
+        getMouseDelay,
+        getNode,
+        onClickButton,
+        onClickTitle,
+        onMouseCapture,
+        onMouseDrag,
+        onMouseStart,
+        onMouseStop,
+        triggerEvent,
+        useContextMenu,
+    }: MouseHandlerParams) {
+        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 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 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 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 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 mouseMove = (e: MouseEvent): void => {
+        this.handleMouseMove(e, getPositionInfoFromMouseEvent(e));
+    };
+
+    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) !== false;
+        }
+
+        if (this.isMouseStarted) {
+            this.onMouseDrag(positionInfo);
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        } else {
+            this.handleMouseUp(positionInfo);
+        }
+    }
+
+    private mouseUp = (e: MouseEvent): void => {
+        this.handleMouseUp(getPositionInfoFromMouseEvent(e));
+    };
+
+    private handleMouseUp(positionInfo: PositionInfo): void {
+        this.removeMouseMoveEventListeners();
+        this.isMouseDelayMet = false;
+        this.mouseDownInfo = null;
+
+        if (this.isMouseStarted) {
+            this.isMouseStarted = false;
+            this.onMouseStop(positionInfo);
+        }
+    }
+
+    private removeMouseMoveEventListeners() {
+        document.removeEventListener("mousemove", this.mouseMove);
+        document.removeEventListener("touchmove", this.touchMove);
+        document.removeEventListener("mouseup", this.mouseUp);
+        document.removeEventListener("touchend", this.touchEnd);
+    }
+
+    private touchStart = (e: TouchEvent): void => {
+        if (!e) {
+            return;
+        }
+
+        if (e.touches.length > 1) {
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
+        }
+
+        this.handleMouseDown(getPositionInfoFromTouch(touch, e));
+    };
+
+    private touchMove = (e: TouchEvent): void => {
+        if (!e) {
+            return;
+        }
+
+        if (e.touches.length > 1) {
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
+        }
+
+        this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
+    };
+
+    private touchEnd = (e: TouchEvent): void => {
+        if (!e) {
+            return;
+        }
+
+        if (e.touches.length > 1) {
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
+        }
+
+        this.handleMouseUp(getPositionInfoFromTouch(touch, e));
+    };
+
+    private handleClick = (e: MouseEvent): void => {
+        if (!e.target) {
+            return;
+        }
+
+        const clickTarget = this.getClickTarget(e.target as HTMLElement);
+
+        if (!clickTarget) {
+            return;
+        }
+
+        if (clickTarget.type === "button") {
+            this.onClickButton(clickTarget.node);
+
+            e.preventDefault();
+            e.stopPropagation();
+        } else if (clickTarget.type === "label") {
+            const event = this.triggerEvent("tree.click", {
+                node: clickTarget.node,
+                click_event: e,
+            });
+
+            if (!event.isDefaultPrevented()) {
+                this.onClickTitle(clickTarget.node);
+            }
+        }
+    };
+
+    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,
+                click_event: e,
+            });
+        }
+    };
+
+    private handleContextmenu = (e: MouseEvent) => {
+        if (!e.target) {
+            return;
+        }
+
+        const div = (e.target as HTMLElement).closest<HTMLElement>(
+            "ul.jqtree-tree .jqtree-element",
+        );
+
+        if (div) {
+            const node = this.getNode(div);
+            if (node) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                this.triggerEvent("tree.contextmenu", {
+                    node,
+                    click_event: e,
+                });
+                return false;
+            }
+        }
+
+        return null;
+    };
+
+    private getClickTarget(element: HTMLElement): ClickTarget | null {
+        const button = element.closest<HTMLElement>(".jqtree-toggler");
+
+        if (button) {
+            const node = this.getNode(button);
+
+            if (node) {
+                return {
+                    type: "button",
+                    node,
+                };
+            }
+        } else {
+            const jqTreeElement =
+                element.closest<HTMLElement>(".jqtree-element");
+
+            if (jqTreeElement) {
+                const node = this.getNode(jqTreeElement);
+                if (node) {
+                    return {
+                        type: "label",
+                        node,
+                    };
+                }
+            }
+        }
+
+        return null;
+    }
+}
+
+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,
+});

package/src/node.ts

@@ -1,36 +1,8 @@
 import { isNodeRecordWithChildren } from "./nodeUtils";
-
-export enum Position {
-    Before = 1,
-    After,
-    Inside,
-    None,
-}
-
-const positionNames: Record<string, Position> = {
-    before: Position.Before,
-    after: Position.After,
-    inside: Position.Inside,
-    none: Position.None,
-};
+import { Position } from "./position";
 
 type IterateCallback = (node: Node, level: number) => boolean;
 
-export const getPositionName = (position: Position): string => {
-    for (const name in positionNames) {
-        if (Object.prototype.hasOwnProperty.call(positionNames, name)) {
-            if (positionNames[name] === position) {
-                return name;
-            }
-        }
-    }
-
-    return "";
-};
-
-export const getPosition = (name: string): Position | undefined =>
-    positionNames[name];
-
 export class Node implements INode {
     public id?: NodeId;
     public name: string;

package/src/nodeElement/borderDropHint.ts

@@ -0,0 +1,32 @@
+import { DropHint } from "../dragAndDropHandler/types";
+
+class BorderDropHint implements DropHint {
+    private hint?: HTMLElement;
+
+    constructor(element: HTMLElement, scrollLeft: number) {
+        const div = element.querySelector(":scope > .jqtree-element");
+
+        if (!div) {
+            this.hint = undefined;
+            return;
+        }
+
+        const width = Math.max(element.offsetWidth + scrollLeft - 4, 0);
+        const height = Math.max(element.clientHeight - 4, 0);
+
+        const hint = document.createElement("span");
+        hint.className = "jqtree-border";
+        hint.style.width = `${width}px`;
+        hint.style.height = `${height}px`;
+
+        this.hint = hint;
+
+        div.append(this.hint);
+    }
+
+    public remove(): void {
+        this.hint?.remove();
+    }
+}
+
+export default BorderDropHint;

package/src/nodeElement/folderElement.ts

@@ -0,0 +1,133 @@
+import { Position } from "../position";
+import NodeElement, { NodeElementParams } from "./index";
+import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
+
+interface FolderElementParams extends NodeElementParams {
+    closedIconElement?: HTMLElement | Text;
+    openedIconElement?: HTMLElement | Text;
+    triggerEvent: TriggerEvent;
+}
+
+class FolderElement extends NodeElement {
+    private closedIconElement?: HTMLElement | Text;
+    private openedIconElement?: HTMLElement | Text;
+    private triggerEvent: TriggerEvent;
+
+    constructor({
+        closedIconElement,
+        getScrollLeft,
+        node,
+        openedIconElement,
+        tabIndex,
+        $treeElement,
+        triggerEvent,
+    }: FolderElementParams) {
+        super({
+            getScrollLeft,
+            node,
+            tabIndex,
+            $treeElement,
+        });
+
+        this.closedIconElement = closedIconElement;
+        this.openedIconElement = openedIconElement;
+        this.triggerEvent = triggerEvent;
+    }
+
+    public open(
+        onFinished: OnFinishOpenNode | undefined,
+        slide = true,
+        animationSpeed: JQuery.Duration = "fast",
+    ): void {
+        if (this.node.is_open) {
+            return;
+        }
+
+        this.node.is_open = true;
+
+        const button = this.getButton();
+        button.classList.remove("jqtree-closed");
+        button.innerHTML = "";
+
+        const openedIconElement = this.openedIconElement;
+
+        if (openedIconElement) {
+            const icon = openedIconElement.cloneNode(true);
+            button.appendChild(icon);
+        }
+
+        const doOpen = (): void => {
+            this.element.classList.remove("jqtree-closed");
+
+            const titleSpan = this.getTitleSpan();
+            titleSpan.setAttribute("aria-expanded", "true");
+
+            if (onFinished) {
+                onFinished(this.node);
+            }
+
+            this.triggerEvent("tree.open", {
+                node: this.node,
+            });
+        };
+
+        if (slide) {
+            jQuery(this.getUl()).slideDown(animationSpeed, doOpen);
+        } else {
+            jQuery(this.getUl()).show();
+            doOpen();
+        }
+    }
+
+    public close(
+        slide = true,
+        animationSpeed: JQuery.Duration | undefined = "fast",
+    ): void {
+        if (!this.node.is_open) {
+            return;
+        }
+
+        this.node.is_open = false;
+
+        const button = this.getButton();
+        button.classList.add("jqtree-closed");
+        button.innerHTML = "";
+
+        const closedIconElement = this.closedIconElement;
+
+        if (closedIconElement) {
+            const icon = closedIconElement.cloneNode(true);
+            button.appendChild(icon);
+        }
+
+        const doClose = (): void => {
+            this.element.classList.add("jqtree-closed");
+
+            const titleSpan = this.getTitleSpan();
+            titleSpan.setAttribute("aria-expanded", "false");
+
+            this.triggerEvent("tree.close", {
+                node: this.node,
+            });
+        };
+
+        if (slide) {
+            jQuery(this.getUl()).slideUp(animationSpeed, doClose);
+        } else {
+            jQuery(this.getUl()).hide();
+            doClose();
+        }
+    }
+
+    protected mustShowBorderDropHint(position: Position): boolean {
+        return !this.node.is_open && position === Position.Inside;
+    }
+
+    private getButton(): HTMLLinkElement {
+        return this.element.querySelector(
+            ":scope > .jqtree-element > a.jqtree-toggler",
+        ) as HTMLLinkElement;
+    }
+}
+
+export default FolderElement;

package/src/nodeElement/ghostDropHint.ts

@@ -0,0 +1,69 @@
+import { Node } from "../node";
+import { Position } from "../position";
+import { DropHint } from "../dragAndDropHandler/types";
+
+class GhostDropHint implements DropHint {
+    private element: HTMLElement;
+    private node: Node;
+    private ghost: HTMLElement;
+
+    constructor(node: Node, element: HTMLElement, position: Position) {
+        this.element = element;
+        this.node = node;
+        this.ghost = this.createGhostElement();
+
+        if (position === Position.After) {
+            this.moveAfter();
+        } else if (position === Position.Before) {
+            this.moveBefore();
+        } else if (position === Position.Inside) {
+            if (node.isFolder() && node.is_open) {
+                this.moveInsideOpenFolder();
+            } else {
+                this.moveInside();
+            }
+        }
+    }
+
+    public remove(): void {
+        this.ghost.remove();
+    }
+
+    private moveAfter(): void {
+        this.element.after(this.ghost);
+    }
+
+    private moveBefore(): void {
+        this.element.before(this.ghost);
+    }
+
+    private moveInsideOpenFolder(): void {
+        const childElement = this.node.children[0]?.element;
+
+        if (childElement) {
+            childElement.before(this.ghost);
+        }
+    }
+
+    private moveInside(): void {
+        this.element.after(this.ghost);
+        this.ghost.classList.add("jqtree-inside");
+    }
+
+    private createGhostElement() {
+        const ghost = document.createElement("li");
+        ghost.className = "jqtree_common jqtree-ghost";
+
+        const circleSpan = document.createElement("span");
+        circleSpan.className = "jqtree_common jqtree-circle";
+        ghost.append(circleSpan);
+
+        const lineSpan = document.createElement("span");
+        lineSpan.className = "jqtree_common jqtree-line";
+        ghost.append(lineSpan);
+
+        return ghost;
+    }
+}
+
+export default GhostDropHint;