clarity-js 0.6.23

package/src/interaction/pointer.ts

@@ -0,0 +1,108 @@
+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;
+
+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, "mousewheel", 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.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(), 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.documentElement : document.documentElement;
+    let touches = evt.changedTouches;
+
+    let t = time();
+    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;
+
+            // Check for null values before processing this event
+            if (x !== null && y !== null) { handler({ time: t, event, data: { target: target(evt), x, y } }); }
+        }
+    }
+}
+
+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;
+    return current.event === last.event && match && distance < Setting.Distance && gap < Setting.Interval;
+}
+
+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

@@ -0,0 +1,30 @@
+import { Event } from "@clarity-types/data";
+import { ResizeData } from "@clarity-types/interaction";
+import { bind } from "@src/core/event";
+import encode from "./encode";
+
+export let data: ResizeData;
+
+export function start(): void {
+    bind(window, "resize", recompute);
+    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,
+    };
+    encode(Event.Resize);
+}
+
+export function reset(): void {
+    data = null;
+}
+
+export function stop(): void {
+    reset();
+}

package/src/interaction/scroll.ts

@@ -0,0 +1,73 @@
+import { 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 { iframe } from "@src/layout/dom";
+import { target } from "@src/layout/target";
+import encode from "./encode";
+
+export let state: ScrollState[] = [];
+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", recompute, true);
+}
+
+function recompute(event: UIEvent = null): void {
+    let w = window as Window;
+    let de = document.documentElement;
+    let element = event ? target(event) : de;
+
+    // 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);
+    let current: ScrollState = { time: time(), event: Event.Scroll, data: {target: element, x, y} };
+
+    // 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)) { 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);
+}
+
+export function reset(): void {
+    state = [];
+}
+
+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.Interval);
+}
+
+export function stop(): void {
+    clearTimeout(timeout);
+    state = [];
+}

package/src/interaction/selection.ts

@@ -0,0 +1,66 @@
+import { Event } from "@clarity-types/data";
+import { SelectionData, Setting } from "@clarity-types/interaction";
+import { bind } from "@src/core/event";
+import { schedule } from "@src/core/task";
+import { clearTimeout, setTimeout } from "@src/core/timeout";
+import encode from "./encode";
+
+export let data: SelectionData = null;
+let previous: Selection = null;
+let timeout: number = null;
+
+export function start(): void {
+    reset();
+}
+
+export function observe(root: Node): void {
+    bind(root, "selectstart", recompute.bind(this, root), true);
+    bind(root, "selectionchange", recompute.bind(this, root), true);
+}
+
+function recompute(root: Node): void {
+    let doc = root.nodeType === Node.DOCUMENT_NODE ? root as Document : document;
+    let current = doc.getSelection();
+
+    // Bail out if we don't have a valid selection
+    if (current === null) { return; }
+
+    // Bail out if we got a valid selection but not valid nodes
+    // In Edge, selectionchange gets fired even on interactions like right clicks and
+    // can result in null anchorNode and focusNode if there was no previous selection on page
+    // Also, ignore any selections that start and end at the exact same point
+    if ((current.anchorNode === null && current.focusNode === null) ||
+        (current.anchorNode === current.focusNode && current.anchorOffset === current.focusOffset)) {
+        return;
+    }
+    let startNode = data.start ? data.start : null;
+    if (previous !== null && data.start !== null && startNode !== current.anchorNode) {
+        clearTimeout(timeout);
+        process(Event.Selection);
+    }
+
+    data = {
+        start: current.anchorNode,
+        startOffset: current.anchorOffset,
+        end: current.focusNode,
+        endOffset: current.focusOffset
+    };
+    previous = current;
+
+    clearTimeout(timeout);
+    timeout = setTimeout(process, Setting.LookAhead, Event.Selection);
+}
+
+function process(event: Event): void {
+    schedule(encode.bind(this, event));
+}
+
+export function reset(): void {
+    previous = null;
+    data = { start: 0, startOffset: 0, end: 0, endOffset: 0 };
+}
+
+export function stop(): void {
+    reset();
+    clearTimeout(timeout);
+}

package/src/interaction/timeline.ts

@@ -0,0 +1,65 @@
+import { BooleanFlag, Event } from "@clarity-types/data";
+import { BrowsingContext, Setting, TimelineState } from "@clarity-types/interaction";
+import * as baseline from "@src/data/baseline";
+import * as envelope from "@src/data/envelope";
+import encode from "@src/interaction/encode";
+
+let state: TimelineState[] = [];
+export let updates: TimelineState[] = [];
+
+export function start(): void {
+    state = [];
+    reset();
+}
+
+export function reset(): void {
+    updates = [];
+}
+
+export function track(time: number,
+    event: Event,
+    hash: string,
+    x: number,
+    y: number,
+    reaction: number = BooleanFlag.True,
+    context: number = BrowsingContext.Self): void {
+    state.push({
+        time,
+        event: Event.Timeline,
+        data: {
+            type: event,
+            hash,
+            x,
+            y,
+            reaction,
+            context
+        }
+    });
+
+    // Since timeline only keeps the data for configured time, we still want to continue tracking these values
+    // as part of the baseline. For instance, in a scenario where last scroll happened 5s ago.
+    // We would still need to capture the last scroll position as part of the baseline event, even when timeline will be empty.
+    baseline.track(event, x, y);
+}
+
+export function compute(): void {
+    const temp = [];
+    updates = [];
+    let max = envelope.data.start + envelope.data.duration;
+    let min = Math.max(max - Setting.TimelineSpan, 0);
+
+    for (let s of state) {
+        if (s.time >= min) {
+            if (s.time <= max) { updates.push(s); }
+            temp.push(s);
+        }
+    }
+
+    state = temp; // Drop events less than the min time
+    encode(Event.Timeline);
+}
+
+export function stop(): void {
+    state = [];
+    reset();
+}

package/src/interaction/unload.ts

@@ -0,0 +1,25 @@
+import { Event } from "@clarity-types/data";
+import { UnloadData } from "@clarity-types/interaction";
+import * as clarity from "@src/clarity";
+import { bind } from "@src/core/event";
+import encode from "./encode";
+
+export let data: UnloadData;
+
+export function start(): void {
+    bind(window, "pagehide", recompute);
+}
+
+function recompute(evt: UIEvent): void {
+    data = { name: evt.type };
+    encode(Event.Unload);
+    clarity.stop();
+}
+
+export function reset(): void {
+    data = null;
+}
+
+export function stop(): void {
+    reset();
+}

package/src/interaction/visibility.ts

@@ -0,0 +1,24 @@
+import { Event } from "@clarity-types/data";
+import { VisibilityData } from "@clarity-types/interaction";
+import { bind } from "@src/core/event";
+import encode from "./encode";
+
+export let data: VisibilityData;
+
+export function start(): void {
+    bind(document, "visibilitychange", recompute);
+    recompute();
+}
+
+function recompute(): void {
+    data = { visible: "visibilityState" in document ? document.visibilityState : "default" };
+    encode(Event.Visibility);
+}
+
+export function reset(): void {
+    data = null;
+}
+
+export function stop(): void {
+    reset();
+}

package/src/layout/box.ts

@@ -0,0 +1,83 @@
+import { Event, Setting } from "@clarity-types/data";
+import { BoxData } from "@clarity-types/layout";
+import * as dom from "@src/layout/dom";
+import encode from "@src/layout/encode";
+
+export let data: BoxData[] = [];
+let enabled = false;
+let observer: ResizeObserver = null;
+
+export function start(): void {
+    reset();
+    observer = null;
+    enabled = window["ResizeObserver"] ? true : false;
+}
+
+export function compute(id: number): void {
+    if (enabled === false) { return; }
+    observer = observer === null ? new ResizeObserver(handler) : observer;
+    if (observer) {
+        let value = dom.getValue(id);
+        // If this is the first time computing size for this node, go ahead and wire up ResizeObserver
+        // In all other cases, value.metadata.size will be null or an array with two elements [width, height]
+        // And, in those cases, we will skip through the following section and not attach the observer
+        if (value && value.metadata.size !== null && value.metadata.size.length === 0) {
+            let node = dom.getNode(id);
+            if (node && node.nodeType === Node.ELEMENT_NODE) {
+                let e = node as HTMLElement;
+                let r = e.getBoundingClientRect();
+                value.metadata.size = [Math.floor(r.width * Setting.BoxPrecision), Math.floor(r.height * Setting.BoxPrecision)];
+                observer.observe(e);
+            }
+        }
+    }
+}
+
+function handler(entries: ResizeObserverEntry[]): void {
+    window.requestAnimationFrame(() => {
+        for (let entry of entries) {
+            let target = entry.target;
+            let id = target ? dom.getId(target) : null;
+            if (id) {
+                let v = dom.getValue(id);
+                let s = v.metadata.size;
+                let b = entry.borderBoxSize as any;
+                let w = null;
+                let h = null;
+                // Check if browser supports borderBoxSize property on ResizeObserverEntry object
+                // Otherwise, fall back to using getBoundingClientRect() to be cross browser compatible
+                // Reference: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize
+                if(b && b.length > 0) {
+                    w = Math.floor(b[0].inlineSize * Setting.BoxPrecision);
+                    h = Math.floor(b[0].blockSize * Setting.BoxPrecision);
+                } else {
+                    let r = target.getBoundingClientRect();
+                    w = Math.floor(r.width * Setting.BoxPrecision);
+                    h = Math.floor(r.height * Setting.BoxPrecision);
+                }
+
+                // Capture new width & height only if they are different from what we have in in-memory cache
+                if (w !== s[0] && h !== s[1]) {
+                    s = [w,h];
+                    data.push({ id, width: w, height: h });
+                }
+            }
+        }
+
+        // Schedule encode only when we have at least one valid data entry
+        if (data.length > 0) { encode(Event.Box); }
+    });
+}
+
+export function reset(): void {
+    data = [];
+}
+
+export function stop(): void {
+    reset();
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
+    enabled = false;
+}

package/src/layout/discover.ts

@@ -0,0 +1,27 @@
+import { Priority, Timer } from "@clarity-types/core";
+import { Event, Metric } from "@clarity-types/data";
+import { Source } from "@clarity-types/layout";
+import measure from "@src/core/measure";
+import * as task from "@src/core/task";
+import { time } from "@src/core/time";
+import { id } from "@src/data/metadata";
+import * as doc from "@src/layout/document";
+import encode from "@src/layout/encode";
+import * as region from "@src/layout/region";
+import traverse from "@src/layout/traverse";
+
+export function start(): void {
+    task.schedule(discover, Priority.High).then((): void => {
+        measure(doc.compute)();
+        measure(region.compute)();
+    });
+}
+
+async function discover(): Promise<void> {
+    let ts = time();
+    let timer: Timer = { id: id(), cost: Metric.LayoutCost };
+    task.start(timer);
+    await traverse(document, timer, Source.Discover);
+    await encode(Event.Discover, timer, ts);
+    task.stop(timer);
+}

package/src/layout/document.ts

@@ -0,0 +1,46 @@
+import { Event } from "@clarity-types/data";
+import { DocumentData } from "@clarity-types/layout";
+import encode from "./encode";
+
+export let data: DocumentData;
+
+export function reset(): void {
+    data = null;
+}
+
+export function start(): void {
+    reset();
+    compute();
+}
+
+export function compute(): void {
+    let body = document.body;
+    let d = document.documentElement;
+    let bodyClientWidth = body ? body.clientWidth : null;
+    let bodyScrollWidth = body ? body.scrollWidth : null;
+    let bodyOffsetWidth = body ? body.offsetWidth : null;
+    let documentClientWidth = d ? d.clientWidth : null;
+    let documentScrollWidth = d ? d.scrollWidth : null;
+    let documentOffsetWidth = d ? d.offsetWidth : null;
+    let width = Math.max(bodyClientWidth, bodyScrollWidth, bodyOffsetWidth,
+        documentClientWidth, documentScrollWidth, documentOffsetWidth);
+
+    let bodyClientHeight = body ? body.clientHeight : null;
+    let bodyScrollHeight = body ? body.scrollHeight : null;
+    let bodyOffsetHeight = body ? body.offsetHeight : null;
+    let documentClientHeight = d ? d.clientHeight : null;
+    let documentScrollHeight = d ? d.scrollHeight : null;
+    let documentOffsetHeight = d ? d.offsetHeight : null;
+    let height = Math.max(bodyClientHeight, bodyScrollHeight, bodyOffsetHeight,
+    documentClientHeight, documentScrollHeight, documentOffsetHeight);
+
+    // Check that width or height has changed from before, and also that width & height are not null values
+    if ((data === null || width !== data.width || height !== data.height) && width !== null && height !== null) {
+        data = { width, height };
+        encode(Event.Document);
+    }
+}
+
+export function end(): void {
+    reset();
+}