clarity-js 0.8.41 → 0.8.42

package/src/interaction/pointer.ts

@@ -1,137 +1,137 @@
-import { Event } from "@clarity-types/data";
-import { PointerState, Setting } from "@clarity-types/interaction";
-import { bind } from "@src/core/event";
-import { schedule } from "@src/core/task";
-import { time } from "@src/core/time";
-import { clearTimeout, setTimeout } from "@src/core/timeout";
-import { iframe } from "@src/layout/dom";
-import { offset } from "@src/layout/offset";
-import { target } from "@src/layout/target";
-import encode from "./encode";
-
-export let state: PointerState[] = [];
-let timeout: number = null;
-let hasPrimaryTouch = false;
-let primaryTouchId = 0;
-const activeTouchPointIds = new Set<number>();
-
-export function start(): void {
-    reset();
-}
-
-export function observe(root: Node): void {
-    bind(root, "mousedown", mouse.bind(this, Event.MouseDown, root), true);
-    bind(root, "mouseup", mouse.bind(this, Event.MouseUp, root), true);
-    bind(root, "mousemove", mouse.bind(this, Event.MouseMove, root), true);
-    bind(root, "wheel", mouse.bind(this, Event.MouseWheel, root), true);
-    bind(root, "dblclick", mouse.bind(this, Event.DoubleClick, root), true);
-    bind(root, "touchstart", touch.bind(this, Event.TouchStart, root), true);
-    bind(root, "touchend", touch.bind(this, Event.TouchEnd, root), true);
-    bind(root, "touchmove", touch.bind(this, Event.TouchMove, root), true);
-    bind(root, "touchcancel", touch.bind(this, Event.TouchCancel, root), true);
-}
-
-function mouse(event: Event, root: Node, evt: MouseEvent): void {
-    let frame = iframe(root);
-    let d = frame && frame.contentDocument ? frame.contentDocument.documentElement : document.documentElement;
-    let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
-    let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
-    // In case of iframe, we adjust (x,y) to be relative to top parent's origin
-    if (frame) {
-        let distance = offset(frame);
-        x = x ? x + Math.round(distance.x) : x;
-        y = y ? y + Math.round(distance.y) : y;
-    }
-
-    // Check for null values before processing this event
-    if (x !== null && y !== null) { handler({ time: time(evt), event, data: { target: target(evt), x, y } }); }
-}
-
-function touch(event: Event, root: Node, evt: TouchEvent): void {
-    let frame = iframe(root);
-    let d = frame && frame.contentDocument ? frame.contentDocument.documentElement : document.documentElement;
-    let touches = evt.changedTouches;
-
-    let t = time(evt);
-    if (touches) {
-        for (let i = 0; i < touches.length; i++) {
-            let entry = touches[i];
-            let x = "clientX" in entry ? Math.round(entry["clientX"] + d.scrollLeft) : null;
-            let y = "clientY" in entry ? Math.round(entry["clientY"] + d.scrollTop) : null;
-            x = x && frame ? x + Math.round(frame.offsetLeft) : x;
-            y = y && frame ? y + Math.round(frame.offsetTop) : y;
-
-            // We cannot rely on identifier to determine primary touch as its value doesn't always start with 0.
-            // Safari/Webkit uses the address of the UITouch object as the identifier value for each touch point.
-            const id = "identifier" in entry ? entry["identifier"] : undefined;
-
-            switch(event) {
-                case Event.TouchStart:
-                    if (activeTouchPointIds.size === 0) {
-                        // Track presence of primary touch separately to handle scenarios when same id is repeated
-                        hasPrimaryTouch = true;  
-                        primaryTouchId = id;
-                    }
-                    activeTouchPointIds.add(id);
-                    break;
-                case Event.TouchEnd:
-                case Event.TouchCancel:
-                    activeTouchPointIds.delete(id);
-                    break;
-            }
-            const isPrimary = hasPrimaryTouch && primaryTouchId === id;
-
-            // Check for null values before processing this event
-            if (x !== null && y !== null) { handler({ time: t, event, data: { target: target(evt), x, y, id, isPrimary } }); }
-
-            // Reset primary touch point id once touch event ends
-            if (event === Event.TouchCancel || event === Event.TouchEnd) {
-                if (primaryTouchId === id) { hasPrimaryTouch = false; }
-            }
-        }
-    }
-}
-
-function handler(current: PointerState): void {
-    switch (current.event) {
-        case Event.MouseMove:
-        case Event.MouseWheel:
-        case Event.TouchMove:
-            let length = state.length;
-            let last = length > 1 ? state[length - 2] : null;
-            if (last && similar(last, current)) { state.pop(); }
-            state.push(current);
-
-            clearTimeout(timeout);
-            timeout = setTimeout(process, Setting.LookAhead, current.event);
-            break;
-        default:
-            state.push(current);
-            process(current.event);
-            break;
-    }
-}
-
-function process(event: Event): void {
-    schedule(encode.bind(this, event));
-}
-
-export function reset(): void {
-    state = [];
-}
-
-function similar(last: PointerState, current: PointerState): boolean {
-    let dx = last.data.x - current.data.x;
-    let dy = last.data.y - current.data.y;
-    let distance = Math.sqrt(dx * dx + dy * dy);
-    let gap = current.time - last.time;
-    let match = current.data.target === last.data.target;
-    let sameId = current.data.id !== undefined ? current.data.id === last.data.id : true;
-    return current.event === last.event && match && distance < Setting.Distance && gap < Setting.PointerInterval && sameId;
-}
-
-export function stop(): void {
-    clearTimeout(timeout);
-    // Send out any pending pointer events in the pipeline
-    if (state.length > 0) { process(state[state.length - 1].event); }
-}
+import { Event } from "@clarity-types/data";
+import { PointerState, Setting } from "@clarity-types/interaction";
+import { bind } from "@src/core/event";
+import { schedule } from "@src/core/task";
+import { time } from "@src/core/time";
+import { clearTimeout, setTimeout } from "@src/core/timeout";
+import { iframe } from "@src/layout/dom";
+import { offset } from "@src/layout/offset";
+import { target } from "@src/layout/target";
+import encode from "./encode";
+
+export let state: PointerState[] = [];
+let timeout: number = null;
+let hasPrimaryTouch = false;
+let primaryTouchId = 0;
+const activeTouchPointIds = new Set<number>();
+
+export function start(): void {
+    reset();
+}
+
+export function observe(root: Node): void {
+    bind(root, "mousedown", mouse.bind(this, Event.MouseDown, root), true);
+    bind(root, "mouseup", mouse.bind(this, Event.MouseUp, root), true);
+    bind(root, "mousemove", mouse.bind(this, Event.MouseMove, root), true);
+    bind(root, "wheel", mouse.bind(this, Event.MouseWheel, root), true);
+    bind(root, "dblclick", mouse.bind(this, Event.DoubleClick, root), true);
+    bind(root, "touchstart", touch.bind(this, Event.TouchStart, root), true);
+    bind(root, "touchend", touch.bind(this, Event.TouchEnd, root), true);
+    bind(root, "touchmove", touch.bind(this, Event.TouchMove, root), true);
+    bind(root, "touchcancel", touch.bind(this, Event.TouchCancel, root), true);
+}
+
+function mouse(event: Event, root: Node, evt: MouseEvent): void {
+    let frame = iframe(root);
+    let d = frame && frame.contentDocument ? frame.contentDocument.documentElement : document.documentElement;
+    let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
+    let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
+    // In case of iframe, we adjust (x,y) to be relative to top parent's origin
+    if (frame) {
+        let distance = offset(frame);
+        x = x ? x + Math.round(distance.x) : x;
+        y = y ? y + Math.round(distance.y) : y;
+    }
+
+    // Check for null values before processing this event
+    if (x !== null && y !== null) { handler({ time: time(evt), event, data: { target: target(evt), x, y } }); }
+}
+
+function touch(event: Event, root: Node, evt: TouchEvent): void {
+    let frame = iframe(root);
+    let d = frame && frame.contentDocument ? frame.contentDocument.documentElement : document.documentElement;
+    let touches = evt.changedTouches;
+
+    let t = time(evt);
+    if (touches) {
+        for (let i = 0; i < touches.length; i++) {
+            let entry = touches[i];
+            let x = "clientX" in entry ? Math.round(entry["clientX"] + d.scrollLeft) : null;
+            let y = "clientY" in entry ? Math.round(entry["clientY"] + d.scrollTop) : null;
+            x = x && frame ? x + Math.round(frame.offsetLeft) : x;
+            y = y && frame ? y + Math.round(frame.offsetTop) : y;
+
+            // We cannot rely on identifier to determine primary touch as its value doesn't always start with 0.
+            // Safari/Webkit uses the address of the UITouch object as the identifier value for each touch point.
+            const id = "identifier" in entry ? entry["identifier"] : undefined;
+
+            switch(event) {
+                case Event.TouchStart:
+                    if (activeTouchPointIds.size === 0) {
+                        // Track presence of primary touch separately to handle scenarios when same id is repeated
+                        hasPrimaryTouch = true;  
+                        primaryTouchId = id;
+                    }
+                    activeTouchPointIds.add(id);
+                    break;
+                case Event.TouchEnd:
+                case Event.TouchCancel:
+                    activeTouchPointIds.delete(id);
+                    break;
+            }
+            const isPrimary = hasPrimaryTouch && primaryTouchId === id;
+
+            // Check for null values before processing this event
+            if (x !== null && y !== null) { handler({ time: t, event, data: { target: target(evt), x, y, id, isPrimary } }); }
+
+            // Reset primary touch point id once touch event ends
+            if (event === Event.TouchCancel || event === Event.TouchEnd) {
+                if (primaryTouchId === id) { hasPrimaryTouch = false; }
+            }
+        }
+    }
+}
+
+function handler(current: PointerState): void {
+    switch (current.event) {
+        case Event.MouseMove:
+        case Event.MouseWheel:
+        case Event.TouchMove:
+            let length = state.length;
+            let last = length > 1 ? state[length - 2] : null;
+            if (last && similar(last, current)) { state.pop(); }
+            state.push(current);
+
+            clearTimeout(timeout);
+            timeout = setTimeout(process, Setting.LookAhead, current.event);
+            break;
+        default:
+            state.push(current);
+            process(current.event);
+            break;
+    }
+}
+
+function process(event: Event): void {
+    schedule(encode.bind(this, event));
+}
+
+export function reset(): void {
+    state = [];
+}
+
+function similar(last: PointerState, current: PointerState): boolean {
+    let dx = last.data.x - current.data.x;
+    let dy = last.data.y - current.data.y;
+    let distance = Math.sqrt(dx * dx + dy * dy);
+    let gap = current.time - last.time;
+    let match = current.data.target === last.data.target;
+    let sameId = current.data.id !== undefined ? current.data.id === last.data.id : true;
+    return current.event === last.event && match && distance < Setting.Distance && gap < Setting.PointerInterval && sameId;
+}
+
+export function stop(): void {
+    clearTimeout(timeout);
+    // Send out any pending pointer events in the pipeline
+    if (state.length > 0) { process(state[state.length - 1].event); }
+}

package/src/interaction/resize.ts

@@ -1,50 +1,50 @@
-import { Event } from "@clarity-types/data";
-import { ResizeData, Setting } from "@clarity-types/interaction";
-import { clearTimeout, setTimeout } from "@src/core/timeout";
-import { bind } from "@src/core/event";
-import throttle from "@src/core/throttle";
-import encode from "./encode";
-import { schedule } from "@src/core/task";
-
-export let data: ResizeData;
-let timeout: number = null;
-let initialStateLogged = false;
-
-const throttledRecompute = throttle(recompute, Setting.LookAhead);
-
-export function start(): void {
-    initialStateLogged = false;
-    bind(window, "resize", throttledRecompute);
-    recompute();
-}
-
-function recompute(): void {
-    let de = document.documentElement;
-    // window.innerWidth includes width of the scrollbar and is not a true representation of the viewport width.
-    // Therefore, when possible, use documentElement's clientWidth property.
-    data = {
-        width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
-        height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
-    };
-    if (initialStateLogged) {
-        clearTimeout(timeout);
-        timeout = setTimeout(process, Setting.LookAhead, Event.Resize);
-    } else {
-        encode(Event.Resize);
-        initialStateLogged = true;
-    }
-}
-
-function process(event: Event): void {
-    schedule(encode.bind(this, event));
-}
-
-export function reset(): void {
-    data = null;
-    clearTimeout(timeout);
-    throttledRecompute.cleanup();
-}
-
-export function stop(): void {
-    reset();
-}
+import { Event } from "@clarity-types/data";
+import { ResizeData, Setting } from "@clarity-types/interaction";
+import { clearTimeout, setTimeout } from "@src/core/timeout";
+import { bind } from "@src/core/event";
+import throttle from "@src/core/throttle";
+import encode from "./encode";
+import { schedule } from "@src/core/task";
+
+export let data: ResizeData;
+let timeout: number = null;
+let initialStateLogged = false;
+
+const throttledRecompute = throttle(recompute, Setting.LookAhead);
+
+export function start(): void {
+    initialStateLogged = false;
+    bind(window, "resize", throttledRecompute);
+    recompute();
+}
+
+function recompute(): void {
+    let de = document.documentElement;
+    // window.innerWidth includes width of the scrollbar and is not a true representation of the viewport width.
+    // Therefore, when possible, use documentElement's clientWidth property.
+    data = {
+        width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
+        height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
+    };
+    if (initialStateLogged) {
+        clearTimeout(timeout);
+        timeout = setTimeout(process, Setting.LookAhead, Event.Resize);
+    } else {
+        encode(Event.Resize);
+        initialStateLogged = true;
+    }
+}
+
+function process(event: Event): void {
+    schedule(encode.bind(this, event));
+}
+
+export function reset(): void {
+    data = null;
+    clearTimeout(timeout);
+    throttledRecompute.cleanup();
+}
+
+export function stop(): void {
+    reset();
+}

package/src/interaction/scroll.ts

@@ -1,129 +1,129 @@
-import { Constant, Dimension, Event } from "@clarity-types/data";
-import { ScrollState, Setting } from "@clarity-types/interaction";
-import { bind } from "@src/core/event";
-import { schedule } from "@src/core/task";
-import { time } from "@src/core/time";
-import { clearTimeout, setTimeout } from "@src/core/timeout";
-import throttle from "@src/core/throttle";
-import { iframe } from "@src/layout/dom";
-import { target, metadata } from "@src/layout/target";
-import encode from "./encode";
-import * as dimension from "@src/data/dimension";
-
-export let state: ScrollState[] = [];
-let initialTop: Node = null;
-let initialBottom: Node = null;
-let timeout: number = null;
-
-export function start(): void {
-    state = [];
-    recompute();
-}
-
-export function observe(root: Node): void {
-    let frame = iframe(root);
-    let node = frame ? frame.contentWindow : (root === document ? window : root);
-    bind(node, "scroll", throttledRecompute, true);
-}
-
-function recompute(event: UIEvent = null): void {
-    let w = window as Window;
-    let de = document.documentElement;
-    let element = event ? target(event) : de;
-
-    // In some edge cases, it's possible for target to be null.
-    // In those cases, we cannot proceed with scroll event instrumentation.
-    if (!element) { return; }
-
-    // If the target is a Document node, then identify corresponding documentElement and window for this document
-    if (element && element.nodeType === Node.DOCUMENT_NODE) {
-        let frame = iframe(element);
-        w = frame ? frame.contentWindow : w;
-        element = de = (element as Document).documentElement;
-    }
-
-    // Edge doesn't support scrollTop position on document.documentElement.
-    // For cross browser compatibility, looking up pageYOffset on window if the scroll is on document.
-    // And, if for some reason that is not available, fall back to looking up scrollTop on document.documentElement.
-    let x = element === de && "pageXOffset" in w ? Math.round(w.pageXOffset) : Math.round((element as HTMLElement).scrollLeft);
-    let y = element === de && "pageYOffset" in w ? Math.round(w.pageYOffset) : Math.round((element as HTMLElement).scrollTop);
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    const xPosition = width / 3;
-    const yOffset = width > height ? height * 0.15 : height * 0.2;
-    const startYPosition = yOffset;
-    const endYPosition = height - yOffset;
-    const top = getPositionNode(xPosition, startYPosition);
-    const bottom = getPositionNode(xPosition, endYPosition);
-
-    let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y, top, bottom} };
-
-    // We don't send any scroll events if this is the first event and the current position is top (0,0)
-    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
-        initialTop = top;
-        initialBottom = bottom;
-        return;
-    }
-
-    let length = state.length;
-    let last = length > 1 ? state[length - 2] : null;
-    if (last && similar(last, current)) { state.pop(); }
-    state.push(current);
-
-    clearTimeout(timeout);
-    timeout = setTimeout(process, Setting.LookAhead, Event.Scroll);
-}
-
-const throttledRecompute = throttle(recompute, Setting.Throttle);
-
-function getPositionNode(x: number, y: number): Node {
-    let node: Node;
-    if ("caretPositionFromPoint" in document) {
-        node = (document as any).caretPositionFromPoint(x, y)?.offsetNode;
-    } else if ("caretRangeFromPoint" in document) {
-        node = (document as any).caretRangeFromPoint(x, y)?.startContainer;
-    }
-    if (!node) {
-        node = document.elementFromPoint(x, y) as Node;
-    }
-    if (node && node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
-    }
-
-    return node;
-}
-
-export function reset(): void {
-    state = [];
-    initialTop = null;
-    initialBottom = null;
-}
-
-function process(event: Event): void {
-    schedule(encode.bind(this, event));
-}
-
-function similar(last: ScrollState, current: ScrollState): boolean {
-    let dx = last.data.x - current.data.x;
-    let dy = last.data.y - current.data.y;
-    return (dx * dx + dy * dy < Setting.Distance * Setting.Distance) && (current.time - last.time < Setting.ScrollInterval);
-}
-
-export function compute(): void {
-    if (initialTop) {
-        const top = metadata(initialTop, null);
-        dimension.log(Dimension.InitialScrollTop, top?.hash?.join(Constant.Dot));
-    }
-    if (initialBottom) {
-        const bottom = metadata(initialBottom, null);
-        dimension.log(Dimension.InitialScrollBottom, bottom?.hash?.join(Constant.Dot));
-    }
-}
-
-export function stop(): void {
-    clearTimeout(timeout);
-    throttledRecompute.cleanup();
-    state = [];
-    initialTop = null;
-    initialBottom = null;
-}
+import { Constant, Dimension, Event } from "@clarity-types/data";
+import { ScrollState, Setting } from "@clarity-types/interaction";
+import { bind } from "@src/core/event";
+import { schedule } from "@src/core/task";
+import { time } from "@src/core/time";
+import { clearTimeout, setTimeout } from "@src/core/timeout";
+import throttle from "@src/core/throttle";
+import { iframe } from "@src/layout/dom";
+import { target, metadata } from "@src/layout/target";
+import encode from "./encode";
+import * as dimension from "@src/data/dimension";
+
+export let state: ScrollState[] = [];
+let initialTop: Node = null;
+let initialBottom: Node = null;
+let timeout: number = null;
+
+export function start(): void {
+    state = [];
+    recompute();
+}
+
+export function observe(root: Node): void {
+    let frame = iframe(root);
+    let node = frame ? frame.contentWindow : (root === document ? window : root);
+    bind(node, "scroll", throttledRecompute, true);
+}
+
+function recompute(event: UIEvent = null): void {
+    let w = window as Window;
+    let de = document.documentElement;
+    let element = event ? target(event) : de;
+
+    // In some edge cases, it's possible for target to be null.
+    // In those cases, we cannot proceed with scroll event instrumentation.
+    if (!element) { return; }
+
+    // If the target is a Document node, then identify corresponding documentElement and window for this document
+    if (element && element.nodeType === Node.DOCUMENT_NODE) {
+        let frame = iframe(element);
+        w = frame ? frame.contentWindow : w;
+        element = de = (element as Document).documentElement;
+    }
+
+    // Edge doesn't support scrollTop position on document.documentElement.
+    // For cross browser compatibility, looking up pageYOffset on window if the scroll is on document.
+    // And, if for some reason that is not available, fall back to looking up scrollTop on document.documentElement.
+    let x = element === de && "pageXOffset" in w ? Math.round(w.pageXOffset) : Math.round((element as HTMLElement).scrollLeft);
+    let y = element === de && "pageYOffset" in w ? Math.round(w.pageYOffset) : Math.round((element as HTMLElement).scrollTop);
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const xPosition = width / 3;
+    const yOffset = width > height ? height * 0.15 : height * 0.2;
+    const startYPosition = yOffset;
+    const endYPosition = height - yOffset;
+    const top = getPositionNode(xPosition, startYPosition);
+    const bottom = getPositionNode(xPosition, endYPosition);
+
+    let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y, top, bottom} };
+
+    // We don't send any scroll events if this is the first event and the current position is top (0,0)
+    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
+        initialTop = top;
+        initialBottom = bottom;
+        return;
+    }
+
+    let length = state.length;
+    let last = length > 1 ? state[length - 2] : null;
+    if (last && similar(last, current)) { state.pop(); }
+    state.push(current);
+
+    clearTimeout(timeout);
+    timeout = setTimeout(process, Setting.LookAhead, Event.Scroll);
+}
+
+const throttledRecompute = throttle(recompute, Setting.Throttle);
+
+function getPositionNode(x: number, y: number): Node {
+    let node: Node;
+    if ("caretPositionFromPoint" in document) {
+        node = (document as any).caretPositionFromPoint(x, y)?.offsetNode;
+    } else if ("caretRangeFromPoint" in document) {
+        node = (document as any).caretRangeFromPoint(x, y)?.startContainer;
+    }
+    if (!node) {
+        node = document.elementFromPoint(x, y) as Node;
+    }
+    if (node && node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    return node;
+}
+
+export function reset(): void {
+    state = [];
+    initialTop = null;
+    initialBottom = null;
+}
+
+function process(event: Event): void {
+    schedule(encode.bind(this, event));
+}
+
+function similar(last: ScrollState, current: ScrollState): boolean {
+    let dx = last.data.x - current.data.x;
+    let dy = last.data.y - current.data.y;
+    return (dx * dx + dy * dy < Setting.Distance * Setting.Distance) && (current.time - last.time < Setting.ScrollInterval);
+}
+
+export function compute(): void {
+    if (initialTop) {
+        const top = metadata(initialTop, null);
+        dimension.log(Dimension.InitialScrollTop, top?.hash?.join(Constant.Dot));
+    }
+    if (initialBottom) {
+        const bottom = metadata(initialBottom, null);
+        dimension.log(Dimension.InitialScrollBottom, bottom?.hash?.join(Constant.Dot));
+    }
+}
+
+export function stop(): void {
+    clearTimeout(timeout);
+    throttledRecompute.cleanup();
+    state = [];
+    initialTop = null;
+    initialBottom = null;
+}