jqtree 1.8.0 → 1.8.2

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/folderElement.ts

@@ -1,4 +1,4 @@
-import { Position } from "../node";
+import { Position } from "../position";
 import NodeElement, { NodeElementParams } from "./index";
 import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
 

package/src/nodeElement/ghostDropHint.ts

@@ -1,4 +1,5 @@
-import { Position, Node } from "../node";
+import { Node } from "../node";
+import { Position } from "../position";
 import { DropHint } from "../dragAndDropHandler/types";
 
 class GhostDropHint implements DropHint {

package/src/nodeElement/index.ts

@@ -1,4 +1,5 @@
-import { Position, Node } from "../node";
+import { Node } from "../node";
+import { Position } from "../position";
 import { DropHint } from "../dragAndDropHandler/types";
 import BorderDropHint from "./borderDropHint";
 import GhostDropHint from "./ghostDropHint";

package/src/playwright/coverage.ts

@@ -16,11 +16,11 @@ export const initCoverage = async (context: BrowserContext) => {
             if (coverageJSON) {
                 const filename = path.join(
                     istanbulCLIOutput,
-                    `playwright_coverage_${generateUUID()}.json`
+                    `playwright_coverage_${generateUUID()}.json`,
                 );
                 fs.writeFileSync(filename, coverageJSON);
             }
-        }
+        },
     );
 };
 
@@ -31,7 +31,7 @@ export const saveCoverage = async (context: BrowserContext) => {
             const anyWindow = window as any;
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
             const coverageData = anyWindow.__coverage__;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, playwright/no-unsafe-references
             anyWindow.collectIstanbulCoverage(JSON.stringify(coverageData));
         });
     }