@panyam/tsutils 0.0.65 → 0.0.66

package/lib/cjs/index.d.ts

@@ -10,4 +10,6 @@ export * as Geom from "./geom";
 export * as Num from "./numberutils";
 export * as Time from "./timeutils";
 export * as DAL from "./dal";
+export * as Scrolling from "./scrolling";
+export { Timer } from "./timer";
 export { Browser } from "./browser";

package/lib/cjs/index.js

@@ -22,7 +22,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Browser = exports.DAL = exports.Time = exports.Num = exports.Geom = exports.DOM = exports.Streams = exports.Misc = exports.Lists = exports.Events = exports.Constants = exports.Api = void 0;
+exports.Browser = exports.Timer = exports.Scrolling = exports.DAL = exports.Time = exports.Num = exports.Geom = exports.DOM = exports.Streams = exports.Misc = exports.Lists = exports.Events = exports.Constants = exports.Api = void 0;
 __exportStar(require("./types"), exports);
 exports.Api = __importStar(require("./apis/index"));
 exports.Constants = __importStar(require("./constants"));
@@ -35,6 +35,9 @@ exports.Geom = __importStar(require("./geom"));
 exports.Num = __importStar(require("./numberutils"));
 exports.Time = __importStar(require("./timeutils"));
 exports.DAL = __importStar(require("./dal"));
+exports.Scrolling = __importStar(require("./scrolling"));
+var timer_1 = require("./timer");
+Object.defineProperty(exports, "Timer", { enumerable: true, get: function () { return timer_1.Timer; } });
 var browser_1 = require("./browser");
 Object.defineProperty(exports, "Browser", { enumerable: true, get: function () { return browser_1.Browser; } });
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,oDAAoC;AACpC,yDAAyC;AACzC,yDAAyC;AACzC,gDAAgC;AAChC,+CAA+B;AAC/B,qDAAqC;AACrC,6CAA6B;AAC7B,+CAA+B;AAC/B,qDAAqC;AACrC,oDAAoC;AACpC,6CAA6B;AAC7B,qCAAoC;AAA3B,kGAAA,OAAO,OAAA","sourcesContent":["export * from \"./types\";\nexport * as Api from \"./apis/index\";\nexport * as Constants from \"./constants\";\nexport * as Events from \"./comms/events\";\nexport * as Lists from \"./list\";\nexport * as Misc from \"./misc\";\nexport * as Streams from \"./streams\";\nexport * as DOM from \"./dom\";\nexport * as Geom from \"./geom\";\nexport * as Num from \"./numberutils\";\nexport * as Time from \"./timeutils\";\nexport * as DAL from \"./dal\";\nexport { Browser } from \"./browser\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,oDAAoC;AACpC,yDAAyC;AACzC,yDAAyC;AACzC,gDAAgC;AAChC,+CAA+B;AAC/B,qDAAqC;AACrC,6CAA6B;AAC7B,+CAA+B;AAC/B,qDAAqC;AACrC,oDAAoC;AACpC,6CAA6B;AAC7B,yDAAyC;AACzC,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,qCAAoC;AAA3B,kGAAA,OAAO,OAAA","sourcesContent":["export * from \"./types\";\nexport * as Api from \"./apis/index\";\nexport * as Constants from \"./constants\";\nexport * as Events from \"./comms/events\";\nexport * as Lists from \"./list\";\nexport * as Misc from \"./misc\";\nexport * as Streams from \"./streams\";\nexport * as DOM from \"./dom\";\nexport * as Geom from \"./geom\";\nexport * as Num from \"./numberutils\";\nexport * as Time from \"./timeutils\";\nexport * as DAL from \"./dal\";\nexport * as Scrolling from \"./scrolling\";\nexport { Timer } from \"./timer\";\nexport { Browser } from \"./browser\";\n"]}

package/lib/cjs/scrolling.d.ts

@@ -0,0 +1,49 @@
+export interface Scrollable {
+    scrollOffset: number;
+    readonly scrollSize: number;
+    readonly pageSize: number;
+    attach(scrollGroup: ScrollGroup): void;
+    detach(): void;
+}
+export declare class HTMLElementScrollable implements Scrollable {
+    private _scrollGroup;
+    readonly element: HTMLElement;
+    private vertical;
+    private onScrollEventListener;
+    private onMouseEventListener;
+    private onTouchEventListener;
+    constructor(element: HTMLElement, vertical?: boolean);
+    attach(scrollGroup: ScrollGroup): void;
+    detach(): void;
+    get scrollGroup(): ScrollGroup | null;
+    get scrollOffset(): number;
+    set scrollOffset(value: number);
+    get scrollSize(): number;
+    get pageSize(): number;
+    onScrollEvent(event: Event): void;
+    onTouchEvent(event: TouchEvent): void;
+    onMouseEvent(event: MouseEvent): void;
+}
+export declare class ScrollGroup {
+    debugLogs: boolean;
+    private scrollables;
+    private _focussedScrollable;
+    private leadScrollable;
+    private lastScrolledAt;
+    private lastScrollOffset;
+    private scrollTimer;
+    private idleThreshold;
+    private offsetDeltaThreshold;
+    private eventDeltaThreshold;
+    constructor(debugLogs?: boolean);
+    add(scrollable: Scrollable): void;
+    remove(scrollable: Scrollable): void;
+    clear(): void;
+    detachAtIndex(index: number): Scrollable;
+    syncFollowersToLeader(): void;
+    set focussedScrollable(scrollable: Scrollable | null);
+    onScroll(scrollable: Scrollable, timestamp: number): void;
+    setLeadScrollable(scrollable: Scrollable): Scrollable | null;
+    onTimer(ts: number): void;
+    protected scrollingFinished(ts: number): void;
+}

package/lib/cjs/scrolling.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollGroup = exports.HTMLElementScrollable = void 0;
+const timer_1 = require("./timer");
+class HTMLElementScrollable {
+    constructor(element, vertical = true) {
+        this._scrollGroup = null;
+        this.vertical = true;
+        this.onScrollEventListener = this.onScrollEvent.bind(this);
+        this.onMouseEventListener = this.onMouseEvent.bind(this);
+        this.onTouchEventListener = this.onTouchEvent.bind(this);
+        this.element = element;
+        this.vertical = vertical;
+    }
+    attach(scrollGroup) {
+        if (this.element.scrollGroup == scrollGroup) {
+            return;
+        }
+        else if (this.element.scrollGroup) {
+            throw new Error("Detach element from ScrollGroup first.");
+        }
+        this.element.scrollGroup = scrollGroup;
+        this._scrollGroup = scrollGroup;
+        this.element.addEventListener("scroll", this.onScrollEventListener);
+        this.element.addEventListener("mousedown", this.onMouseEventListener);
+        this.element.addEventListener("mouseenter", this.onMouseEventListener);
+        this.element.addEventListener("mouseleave", this.onMouseEventListener);
+        this.element.addEventListener("touchstart", this.onTouchEventListener);
+    }
+    detach() {
+        this.element.scrollGroup = null;
+        this.element.removeEventListener("scroll", this.onScrollEventListener);
+        this.element.removeEventListener("mousedown", this.onMouseEventListener);
+        this.element.removeEventListener("mouseenter", this.onMouseEventListener);
+        this.element.removeEventListener("mouseleave", this.onMouseEventListener);
+        this.element.removeEventListener("touchstart", this.onTouchEventListener);
+    }
+    get scrollGroup() {
+        return this._scrollGroup;
+    }
+    get scrollOffset() {
+        if (this.vertical) {
+            return this.element.scrollTop;
+        }
+        else {
+            return this.element.scrollLeft;
+        }
+    }
+    set scrollOffset(value) {
+        if (this.vertical) {
+            this.element.scrollTop = value;
+        }
+        else {
+            this.element.scrollLeft = value;
+        }
+    }
+    get scrollSize() {
+        if (this.vertical) {
+            return this.element.scrollHeight;
+        }
+        else {
+            return this.element.scrollWidth;
+        }
+    }
+    get pageSize() {
+        if (this.vertical) {
+            return this.element.clientHeight;
+        }
+        else {
+            return this.element.clientWidth;
+        }
+    }
+    onScrollEvent(event) {
+        var _a;
+        (_a = this.scrollGroup) === null || _a === void 0 ? void 0 : _a.onScroll(this, event.timeStamp);
+    }
+    onTouchEvent(event) {
+        if (event.type == "touchstart" && this.scrollGroup) {
+            this.scrollGroup.focussedScrollable = this;
+        }
+    }
+    onMouseEvent(event) {
+        const element = event.target;
+        if (this.scrollGroup) {
+            if (event.type == "mouseenter") {
+                this.scrollGroup.focussedScrollable = this;
+            }
+            else if (event.type == "mouseleave") {
+                this.scrollGroup.focussedScrollable = null;
+            }
+            else if (event.type == "mousedown") {
+                this.scrollGroup.focussedScrollable = this;
+            }
+        }
+    }
+}
+exports.HTMLElementScrollable = HTMLElementScrollable;
+class ScrollGroup {
+    constructor(debugLogs = false) {
+        this.debugLogs = debugLogs;
+        this.scrollables = [];
+        this._focussedScrollable = null;
+        this.leadScrollable = null;
+        this.lastScrolledAt = -1;
+        this.lastScrollOffset = 0;
+        this.idleThreshold = 300;
+        this.offsetDeltaThreshold = 5;
+        this.eventDeltaThreshold = 50;
+        this.scrollTimer = new timer_1.Timer(500, this.onTimer.bind(this));
+    }
+    add(scrollable) {
+        const index = this.scrollables.indexOf(scrollable);
+        if (index >= 0)
+            return;
+        scrollable.attach(this);
+        this.scrollables.push(scrollable);
+    }
+    remove(scrollable) {
+        const index = this.scrollables.indexOf(scrollable);
+        if (index < 0)
+            return;
+        this.detachAtIndex(index);
+    }
+    clear() {
+        for (let i = this.scrollables.length - 1; i >= 0; i--) {
+            this.detachAtIndex(i);
+        }
+    }
+    detachAtIndex(index) {
+        const scrollable = this.scrollables[index];
+        scrollable.detach();
+        this.scrollables.splice(index, 1);
+        return scrollable;
+    }
+    syncFollowersToLeader() {
+        const scrollable = this.leadScrollable;
+        if (scrollable != null) {
+            this.lastScrollOffset = scrollable.scrollOffset;
+            const remScroll = Math.max(1, scrollable.scrollSize - scrollable.pageSize);
+            for (let i = this.scrollables.length - 1; i >= 0; i--) {
+                const other = this.scrollables[i];
+                const remOther = Math.max(1, other.scrollSize - other.pageSize);
+                if (other != scrollable) {
+                    other.scrollOffset = (scrollable.scrollOffset * remOther) / remScroll;
+                }
+            }
+        }
+    }
+    set focussedScrollable(scrollable) {
+        this._focussedScrollable = scrollable;
+    }
+    onScroll(scrollable, timestamp) {
+        if (this.leadScrollable == null) {
+            this.setLeadScrollable(scrollable);
+        }
+        const leader = this.leadScrollable;
+        if (leader != null) {
+            const offsetDelta = Math.abs(leader.scrollOffset - this.lastScrollOffset);
+            const timeDelta = Math.abs(timestamp - this.lastScrolledAt);
+            if (offsetDelta > this.offsetDeltaThreshold || timeDelta > this.eventDeltaThreshold) {
+                this.lastScrolledAt = timestamp;
+                this.syncFollowersToLeader();
+            }
+        }
+    }
+    setLeadScrollable(scrollable) {
+        if (this.leadScrollable == null) {
+            this.leadScrollable = scrollable;
+            if (this.debugLogs)
+                console.log("Scrolling started with: ", scrollable);
+            this.scrollTimer.start();
+        }
+        else {
+            throw new Error("This should now happen");
+        }
+        return this.leadScrollable;
+    }
+    onTimer(ts) {
+        if (this.leadScrollable != null && ts - this.lastScrolledAt > this.idleThreshold) {
+            const offsetDelta = Math.abs(this.leadScrollable.scrollOffset - this.lastScrollOffset);
+            if (offsetDelta == 0) {
+                this.scrollingFinished(ts);
+            }
+        }
+    }
+    scrollingFinished(ts) {
+        if (this.debugLogs)
+            console.log("Scrolling Finished at: ", ts);
+        this.syncFollowersToLeader();
+        this.leadScrollable = null;
+        this.scrollTimer.stop();
+    }
+}
+exports.ScrollGroup = ScrollGroup;
+//# sourceMappingURL=scrolling.js.map

package/lib/cjs/scrolling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrolling.js","sourceRoot":"","sources":["../../src/scrolling.ts"],"names":[],"mappings":"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","sourcesContent":["import { Timer } from \"./timer\";\n\n/**\n * A scroll group allows one to \"connect\" multiple elements to be\n * scrolled synchronously.\n *\n * A typical usecase would be a div showing lines for a code editor\n * and one that shows a line numbers for a code editor.\n *\n * We could also have recursive relationships where elements in\n * a scroll group are connected to other items outside the scroll\n * group and the would form a super scroll group.  An example would\n * two UI components A and B that\n * a scroll group is synchronized\n */\n\ntype EventHandler = (evt: any) => void;\nexport interface Scrollable {\n  // Set or get the current scroll offset\n  scrollOffset: number;\n\n  // Get total scroll size\n  readonly scrollSize: number;\n\n  // Size of the current \"page\".\n  // Our scrollOffset + pageSize is always < scrollSize\n  readonly pageSize: number;\n\n  // Detaches a scrollable from further use\n  attach(scrollGroup: ScrollGroup): void;\n  detach(): void;\n}\n\n/**\n * A wrapper for html elements that can be scrolled.\n */\nexport class HTMLElementScrollable implements Scrollable {\n  private _scrollGroup: ScrollGroup | null = null;\n  readonly element: HTMLElement;\n  private vertical = true;\n  private onScrollEventListener = this.onScrollEvent.bind(this) as EventListener;\n  private onMouseEventListener = this.onMouseEvent.bind(this) as EventListener;\n  private onTouchEventListener = this.onTouchEvent.bind(this) as EventListener;\n\n  constructor(element: HTMLElement, vertical = true) {\n    this.element = element;\n    this.vertical = vertical;\n  }\n\n  attach(scrollGroup: ScrollGroup): void {\n    if ((this.element as any).scrollGroup == scrollGroup) {\n      return;\n    } else if ((this.element as any).scrollGroup) {\n      throw new Error(\"Detach element from ScrollGroup first.\");\n    }\n    (this.element as any).scrollGroup = scrollGroup;\n    this._scrollGroup = scrollGroup;\n    this.element.addEventListener(\"scroll\", this.onScrollEventListener);\n    this.element.addEventListener(\"mousedown\", this.onMouseEventListener);\n    this.element.addEventListener(\"mouseenter\", this.onMouseEventListener);\n    this.element.addEventListener(\"mouseleave\", this.onMouseEventListener);\n    this.element.addEventListener(\"touchstart\", this.onTouchEventListener);\n  }\n\n  detach(): void {\n    (this.element as any).scrollGroup = null;\n    this.element.removeEventListener(\"scroll\", this.onScrollEventListener);\n    this.element.removeEventListener(\"mousedown\", this.onMouseEventListener);\n    this.element.removeEventListener(\"mouseenter\", this.onMouseEventListener);\n    this.element.removeEventListener(\"mouseleave\", this.onMouseEventListener);\n    this.element.removeEventListener(\"touchstart\", this.onTouchEventListener);\n  }\n\n  get scrollGroup(): ScrollGroup | null {\n    return this._scrollGroup;\n  }\n\n  // Set or get the current scroll offset\n  get scrollOffset(): number {\n    if (this.vertical) {\n      return this.element.scrollTop;\n    } else {\n      return this.element.scrollLeft;\n    }\n  }\n\n  set scrollOffset(value: number) {\n    if (this.vertical) {\n      this.element.scrollTop = value;\n    } else {\n      this.element.scrollLeft = value;\n    }\n  }\n\n  // Get total scroll size\n  get scrollSize(): number {\n    if (this.vertical) {\n      return this.element.scrollHeight;\n    } else {\n      return this.element.scrollWidth;\n    }\n  }\n\n  // Size of the current \"page\".\n  // Our scrollOffset + pageSize is always < scrollSize\n  get pageSize(): number {\n    if (this.vertical) {\n      return this.element.clientHeight;\n    } else {\n      return this.element.clientWidth;\n    }\n  }\n\n  onScrollEvent(event: Event): void {\n    /**\n     * Scroll events will be sent for all elements that are scrolling\n     * either programatically or invoked via gestures.\n     * It is not possible to know which of these it is and the problem\n     * with this is that by handling all events it could result in an\n     * infinite loop kicking each other off.\n     *\n     * So we need a way to be able differentiate scroll events between\n     * those that were the \"source\" and those that are \"followers\".\n     * We can try a few strategies here:\n     *\n     * 1. Take the first scroll event's target as the source\n     * and kick off a timer to check when scroll events stop.  As long\n     * as scroll events come from this source we update followers.\n     */\n    this.scrollGroup?.onScroll(this, event.timeStamp);\n  }\n\n  onTouchEvent(event: TouchEvent): void {\n    // console.log(`Touched Eeent(${event.type}): `, event);\n    if (event.type == \"touchstart\" && this.scrollGroup) {\n      this.scrollGroup.focussedScrollable = this;\n      // this.setLeadScrollable(this.focussedElement);\n    }\n  }\n\n  onMouseEvent(event: MouseEvent): void {\n    // console.log(`Mouse Event(${event.type}): `, event);\n    const element = event.target;\n    if (this.scrollGroup) {\n      if (event.type == \"mouseenter\") {\n        this.scrollGroup.focussedScrollable = this;\n      } else if (event.type == \"mouseleave\") {\n        this.scrollGroup.focussedScrollable = null;\n      } else if (event.type == \"mousedown\") {\n        this.scrollGroup.focussedScrollable = this;\n        // this.setLeadScrollable(this.focussedElement);\n      }\n    }\n  }\n}\n\nexport class ScrollGroup {\n  private scrollables: Scrollable[] = [];\n  private _focussedScrollable: Scrollable | null = null;\n  private leadScrollable: Scrollable | null = null;\n  private lastScrolledAt = -1;\n  private lastScrollOffset = 0;\n  private scrollTimer: Timer;\n\n  // If there has been no change in scroll offset within this\n  // time then we can assume scrolling has completed and this\n  // can be used to infer that scrolling has finished.\n  private idleThreshold = 300;\n\n  // Apply sync to followers if we have a scroll distance of atleast\n  // this much or time between last even has crossed the\n  // `eventDeltaThreshold`.\n  private offsetDeltaThreshold = 5;\n  private eventDeltaThreshold = 50;\n\n  constructor(public debugLogs = false) {\n    this.scrollTimer = new Timer(500, this.onTimer.bind(this));\n  }\n\n  add(scrollable: Scrollable): void {\n    // skip if already exists\n    const index = this.scrollables.indexOf(scrollable);\n    if (index >= 0) return;\n    scrollable.attach(this);\n    this.scrollables.push(scrollable);\n  }\n\n  remove(scrollable: Scrollable): void {\n    const index = this.scrollables.indexOf(scrollable);\n    if (index < 0) return;\n    this.detachAtIndex(index);\n  }\n\n  clear(): void {\n    for (let i = this.scrollables.length - 1; i >= 0; i--) {\n      this.detachAtIndex(i);\n    }\n  }\n\n  detachAtIndex(index: number): Scrollable {\n    const scrollable = this.scrollables[index];\n    scrollable.detach();\n    this.scrollables.splice(index, 1);\n    return scrollable;\n  }\n\n  syncFollowersToLeader(): void {\n    const scrollable = this.leadScrollable;\n    if (scrollable != null) {\n      this.lastScrollOffset = scrollable.scrollOffset;\n      // console.log(\"Scrolled: \", scrollable.scrollOffset, event);\n\n      // set the scroll position of all others\n      // TODO - should this happen in this handler itself?\n      const remScroll = Math.max(1, scrollable.scrollSize - scrollable.pageSize);\n      for (let i = this.scrollables.length - 1; i >= 0; i--) {\n        const other = this.scrollables[i];\n        const remOther = Math.max(1, other.scrollSize - other.pageSize);\n        /*\n        console.log(\"Scrollable: \", i, other);\n        console.log(\n          \"scrollOffset, scrollSize, pageSize: \",\n          other.scrollOffset,\n          other.scrollSize,\n          other.pageSize,\n          remOther,\n        );\n        */\n        if (other != scrollable) {\n          other.scrollOffset = (scrollable.scrollOffset * remOther) / remScroll;\n        }\n      }\n    }\n  }\n\n  set focussedScrollable(scrollable: Scrollable | null) {\n    this._focussedScrollable = scrollable;\n  }\n\n  onScroll(scrollable: Scrollable, timestamp: number): void {\n    if (this.leadScrollable == null) {\n      this.setLeadScrollable(scrollable);\n    }\n    const leader = this.leadScrollable;\n    if (leader != null) {\n      // update followers\n      const offsetDelta = Math.abs(leader.scrollOffset - this.lastScrollOffset);\n      const timeDelta = Math.abs(timestamp - this.lastScrolledAt);\n      if (offsetDelta > this.offsetDeltaThreshold || timeDelta > this.eventDeltaThreshold) {\n        this.lastScrolledAt = timestamp;\n        this.syncFollowersToLeader();\n      }\n    }\n  }\n\n  /**\n   * Sets the active scrollable to the focussed element.\n   */\n  public setLeadScrollable(scrollable: Scrollable): Scrollable | null {\n    if (this.leadScrollable == null) {\n      // scrolling has not begun yet so set it as the \"root\" scroller\n      this.leadScrollable = scrollable;\n      if (this.debugLogs) console.log(\"Scrolling started with: \", scrollable);\n      this.scrollTimer.start();\n    } else {\n      // What if there was an already active scrollable?\n      // This can happen if:\n      throw new Error(\"This should now happen\");\n    }\n    return this.leadScrollable;\n  }\n\n  onTimer(ts: number): void {\n    // Called with our timer\n    if (this.leadScrollable != null && ts - this.lastScrolledAt > this.idleThreshold) {\n      const offsetDelta = Math.abs(this.leadScrollable.scrollOffset - this.lastScrollOffset);\n      if (offsetDelta == 0) {\n        // No change in delta within a time window\n        this.scrollingFinished(ts);\n      }\n    }\n  }\n\n  protected scrollingFinished(ts: number): void {\n    if (this.debugLogs) console.log(\"Scrolling Finished at: \", ts);\n    // TODO - See if this can have a jerking effect\n    this.syncFollowersToLeader();\n    this.leadScrollable = null;\n    this.scrollTimer.stop();\n  }\n}\n"]}

package/lib/cjs/timer.d.ts

@@ -0,0 +1,12 @@
+declare type StepFunc = (ts: number) => void;
+export declare class Timer {
+    private refreshInterval;
+    private lastRefreshAt;
+    private updateLoop;
+    stepFunc: StepFunc;
+    constructor(refreshInterval: number, stepFunc: StepFunc);
+    stop(): void;
+    start(): void;
+    protected kickOffUpdate(): void;
+}
+export {};

package/lib/cjs/timer.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timer = void 0;
+class Timer {
+    constructor(refreshInterval, stepFunc) {
+        this.refreshInterval = 1000;
+        this.lastRefreshAt = 0;
+        this.updateLoop = null;
+        this.refreshInterval = refreshInterval;
+        this.stepFunc = stepFunc;
+    }
+    stop() {
+        if (this.updateLoop != null) {
+            cancelAnimationFrame(this.updateLoop);
+            this.updateLoop = null;
+        }
+    }
+    start() {
+        this.kickOffUpdate();
+    }
+    kickOffUpdate() {
+        if (this.updateLoop != null) {
+            cancelAnimationFrame(this.updateLoop);
+        }
+        this.updateLoop = requestAnimationFrame((timestamp) => {
+            if (this.updateLoop != null) {
+                if (timestamp - this.lastRefreshAt >= this.refreshInterval) {
+                    try {
+                        this.stepFunc(timestamp);
+                    }
+                    catch (err) {
+                        console.log("Error from Timer Handler: ", err);
+                        alert("Error from Timer Handler: " + err.message);
+                        return;
+                    }
+                    this.lastRefreshAt = timestamp;
+                }
+                this.updateLoop = null;
+                this.kickOffUpdate();
+            }
+        });
+    }
+}
+exports.Timer = Timer;
+//# sourceMappingURL=timer.js.map

package/lib/cjs/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/timer.ts"],"names":[],"mappings":";;;AAEA,MAAa,KAAK;IAMhB,YAAY,eAAuB,EAAE,QAAkB;QAL/C,oBAAe,GAAG,IAAI,CAAC;QACvB,kBAAa,GAAG,CAAC,CAAC;QAClB,eAAU,GAAkB,IAAI,CAAC;QAIvC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,IAAI;QACF,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;YAC3B,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAES,aAAa;QACrB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;YAC3B,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACvC;QACD,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,CAAC,SAAS,EAAE,EAAE;YACpD,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;gBAC3B,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,eAAe,EAAE;oBAC1D,IAAI;wBACF,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;qBAC1B;oBAAC,OAAO,GAAQ,EAAE;wBACjB,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,GAAG,CAAC,CAAC;wBAC/C,KAAK,CAAC,4BAA4B,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;wBAClD,OAAO;qBACR;oBACD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;iBAChC;gBACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AA3CD,sBA2CC","sourcesContent":["type StepFunc = (ts: number) => void;\n\nexport class Timer {\n  private refreshInterval = 1000;\n  private lastRefreshAt = 0;\n  private updateLoop: number | null = null;\n  stepFunc: StepFunc;\n\n  constructor(refreshInterval: number, stepFunc: StepFunc) {\n    this.refreshInterval = refreshInterval;\n    this.stepFunc = stepFunc;\n  }\n\n  stop(): void {\n    if (this.updateLoop != null) {\n      cancelAnimationFrame(this.updateLoop);\n      this.updateLoop = null;\n    }\n  }\n\n  start(): void {\n    this.kickOffUpdate();\n  }\n\n  protected kickOffUpdate(): void {\n    if (this.updateLoop != null) {\n      cancelAnimationFrame(this.updateLoop);\n    }\n    this.updateLoop = requestAnimationFrame((timestamp) => {\n      if (this.updateLoop != null) {\n        if (timestamp - this.lastRefreshAt >= this.refreshInterval) {\n          try {\n            this.stepFunc(timestamp);\n          } catch (err: any) {\n            console.log(\"Error from Timer Handler: \", err);\n            alert(\"Error from Timer Handler: \" + err.message);\n            return;\n          }\n          this.lastRefreshAt = timestamp;\n        }\n        this.updateLoop = null;\n        this.kickOffUpdate();\n      }\n    });\n  }\n}\n"]}

package/lib/esm/index.d.ts

@@ -10,4 +10,6 @@ export * as Geom from "./geom";
 export * as Num from "./numberutils";
 export * as Time from "./timeutils";
 export * as DAL from "./dal";
+export * as Scrolling from "./scrolling";
+export { Timer } from "./timer";
 export { Browser } from "./browser";

package/lib/esm/index.js

@@ -21,5 +21,8 @@ import * as Time_1 from "./timeutils";
 export { Time_1 as Time };
 import * as DAL_1 from "./dal";
 export { DAL_1 as DAL };
+import * as Scrolling_1 from "./scrolling";
+export { Scrolling_1 as Scrolling };
+export { Timer } from "./timer";
 export { Browser } from "./browser";
 //# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;uBACH,cAAc;kBAAvB,GAAG;6BACY,aAAa;wBAA5B,SAAS;0BACG,gBAAgB;qBAA5B,MAAM;yBACK,QAAQ;oBAAnB,KAAK;wBACK,QAAQ;mBAAlB,IAAI;2BACS,WAAW;sBAAxB,OAAO;uBACE,OAAO;kBAAhB,GAAG;wBACO,QAAQ;mBAAlB,IAAI;uBACK,eAAe;kBAAxB,GAAG;wBACO,aAAa;mBAAvB,IAAI;uBACK,OAAO;kBAAhB,GAAG;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export * from \"./types\";\nexport * as Api from \"./apis/index\";\nexport * as Constants from \"./constants\";\nexport * as Events from \"./comms/events\";\nexport * as Lists from \"./list\";\nexport * as Misc from \"./misc\";\nexport * as Streams from \"./streams\";\nexport * as DOM from \"./dom\";\nexport * as Geom from \"./geom\";\nexport * as Num from \"./numberutils\";\nexport * as Time from \"./timeutils\";\nexport * as DAL from \"./dal\";\nexport { Browser } from \"./browser\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;uBACH,cAAc;kBAAvB,GAAG;6BACY,aAAa;wBAA5B,SAAS;0BACG,gBAAgB;qBAA5B,MAAM;yBACK,QAAQ;oBAAnB,KAAK;wBACK,QAAQ;mBAAlB,IAAI;2BACS,WAAW;sBAAxB,OAAO;uBACE,OAAO;kBAAhB,GAAG;wBACO,QAAQ;mBAAlB,IAAI;uBACK,eAAe;kBAAxB,GAAG;wBACO,aAAa;mBAAvB,IAAI;uBACK,OAAO;kBAAhB,GAAG;6BACY,aAAa;wBAA5B,SAAS;AACrB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export * from \"./types\";\nexport * as Api from \"./apis/index\";\nexport * as Constants from \"./constants\";\nexport * as Events from \"./comms/events\";\nexport * as Lists from \"./list\";\nexport * as Misc from \"./misc\";\nexport * as Streams from \"./streams\";\nexport * as DOM from \"./dom\";\nexport * as Geom from \"./geom\";\nexport * as Num from \"./numberutils\";\nexport * as Time from \"./timeutils\";\nexport * as DAL from \"./dal\";\nexport * as Scrolling from \"./scrolling\";\nexport { Timer } from \"./timer\";\nexport { Browser } from \"./browser\";\n"]}

package/lib/esm/scrolling.d.ts

@@ -0,0 +1,49 @@
+export interface Scrollable {
+    scrollOffset: number;
+    readonly scrollSize: number;
+    readonly pageSize: number;
+    attach(scrollGroup: ScrollGroup): void;
+    detach(): void;
+}
+export declare class HTMLElementScrollable implements Scrollable {
+    private _scrollGroup;
+    readonly element: HTMLElement;
+    private vertical;
+    private onScrollEventListener;
+    private onMouseEventListener;
+    private onTouchEventListener;
+    constructor(element: HTMLElement, vertical?: boolean);
+    attach(scrollGroup: ScrollGroup): void;
+    detach(): void;
+    get scrollGroup(): ScrollGroup | null;
+    get scrollOffset(): number;
+    set scrollOffset(value: number);
+    get scrollSize(): number;
+    get pageSize(): number;
+    onScrollEvent(event: Event): void;
+    onTouchEvent(event: TouchEvent): void;
+    onMouseEvent(event: MouseEvent): void;
+}
+export declare class ScrollGroup {
+    debugLogs: boolean;
+    private scrollables;
+    private _focussedScrollable;
+    private leadScrollable;
+    private lastScrolledAt;
+    private lastScrollOffset;
+    private scrollTimer;
+    private idleThreshold;
+    private offsetDeltaThreshold;
+    private eventDeltaThreshold;
+    constructor(debugLogs?: boolean);
+    add(scrollable: Scrollable): void;
+    remove(scrollable: Scrollable): void;
+    clear(): void;
+    detachAtIndex(index: number): Scrollable;
+    syncFollowersToLeader(): void;
+    set focussedScrollable(scrollable: Scrollable | null);
+    onScroll(scrollable: Scrollable, timestamp: number): void;
+    setLeadScrollable(scrollable: Scrollable): Scrollable | null;
+    onTimer(ts: number): void;
+    protected scrollingFinished(ts: number): void;
+}

package/lib/esm/scrolling.js

@@ -0,0 +1,190 @@
+import { Timer } from "./timer";
+export class HTMLElementScrollable {
+    constructor(element, vertical = true) {
+        this._scrollGroup = null;
+        this.vertical = true;
+        this.onScrollEventListener = this.onScrollEvent.bind(this);
+        this.onMouseEventListener = this.onMouseEvent.bind(this);
+        this.onTouchEventListener = this.onTouchEvent.bind(this);
+        this.element = element;
+        this.vertical = vertical;
+    }
+    attach(scrollGroup) {
+        if (this.element.scrollGroup == scrollGroup) {
+            return;
+        }
+        else if (this.element.scrollGroup) {
+            throw new Error("Detach element from ScrollGroup first.");
+        }
+        this.element.scrollGroup = scrollGroup;
+        this._scrollGroup = scrollGroup;
+        this.element.addEventListener("scroll", this.onScrollEventListener);
+        this.element.addEventListener("mousedown", this.onMouseEventListener);
+        this.element.addEventListener("mouseenter", this.onMouseEventListener);
+        this.element.addEventListener("mouseleave", this.onMouseEventListener);
+        this.element.addEventListener("touchstart", this.onTouchEventListener);
+    }
+    detach() {
+        this.element.scrollGroup = null;
+        this.element.removeEventListener("scroll", this.onScrollEventListener);
+        this.element.removeEventListener("mousedown", this.onMouseEventListener);
+        this.element.removeEventListener("mouseenter", this.onMouseEventListener);
+        this.element.removeEventListener("mouseleave", this.onMouseEventListener);
+        this.element.removeEventListener("touchstart", this.onTouchEventListener);
+    }
+    get scrollGroup() {
+        return this._scrollGroup;
+    }
+    get scrollOffset() {
+        if (this.vertical) {
+            return this.element.scrollTop;
+        }
+        else {
+            return this.element.scrollLeft;
+        }
+    }
+    set scrollOffset(value) {
+        if (this.vertical) {
+            this.element.scrollTop = value;
+        }
+        else {
+            this.element.scrollLeft = value;
+        }
+    }
+    get scrollSize() {
+        if (this.vertical) {
+            return this.element.scrollHeight;
+        }
+        else {
+            return this.element.scrollWidth;
+        }
+    }
+    get pageSize() {
+        if (this.vertical) {
+            return this.element.clientHeight;
+        }
+        else {
+            return this.element.clientWidth;
+        }
+    }
+    onScrollEvent(event) {
+        var _a;
+        (_a = this.scrollGroup) === null || _a === void 0 ? void 0 : _a.onScroll(this, event.timeStamp);
+    }
+    onTouchEvent(event) {
+        if (event.type == "touchstart" && this.scrollGroup) {
+            this.scrollGroup.focussedScrollable = this;
+        }
+    }
+    onMouseEvent(event) {
+        const element = event.target;
+        if (this.scrollGroup) {
+            if (event.type == "mouseenter") {
+                this.scrollGroup.focussedScrollable = this;
+            }
+            else if (event.type == "mouseleave") {
+                this.scrollGroup.focussedScrollable = null;
+            }
+            else if (event.type == "mousedown") {
+                this.scrollGroup.focussedScrollable = this;
+            }
+        }
+    }
+}
+export class ScrollGroup {
+    constructor(debugLogs = false) {
+        this.debugLogs = debugLogs;
+        this.scrollables = [];
+        this._focussedScrollable = null;
+        this.leadScrollable = null;
+        this.lastScrolledAt = -1;
+        this.lastScrollOffset = 0;
+        this.idleThreshold = 300;
+        this.offsetDeltaThreshold = 5;
+        this.eventDeltaThreshold = 50;
+        this.scrollTimer = new Timer(500, this.onTimer.bind(this));
+    }
+    add(scrollable) {
+        const index = this.scrollables.indexOf(scrollable);
+        if (index >= 0)
+            return;
+        scrollable.attach(this);
+        this.scrollables.push(scrollable);
+    }
+    remove(scrollable) {
+        const index = this.scrollables.indexOf(scrollable);
+        if (index < 0)
+            return;
+        this.detachAtIndex(index);
+    }
+    clear() {
+        for (let i = this.scrollables.length - 1; i >= 0; i--) {
+            this.detachAtIndex(i);
+        }
+    }
+    detachAtIndex(index) {
+        const scrollable = this.scrollables[index];
+        scrollable.detach();
+        this.scrollables.splice(index, 1);
+        return scrollable;
+    }
+    syncFollowersToLeader() {
+        const scrollable = this.leadScrollable;
+        if (scrollable != null) {
+            this.lastScrollOffset = scrollable.scrollOffset;
+            const remScroll = Math.max(1, scrollable.scrollSize - scrollable.pageSize);
+            for (let i = this.scrollables.length - 1; i >= 0; i--) {
+                const other = this.scrollables[i];
+                const remOther = Math.max(1, other.scrollSize - other.pageSize);
+                if (other != scrollable) {
+                    other.scrollOffset = (scrollable.scrollOffset * remOther) / remScroll;
+                }
+            }
+        }
+    }
+    set focussedScrollable(scrollable) {
+        this._focussedScrollable = scrollable;
+    }
+    onScroll(scrollable, timestamp) {
+        if (this.leadScrollable == null) {
+            this.setLeadScrollable(scrollable);
+        }
+        const leader = this.leadScrollable;
+        if (leader != null) {
+            const offsetDelta = Math.abs(leader.scrollOffset - this.lastScrollOffset);
+            const timeDelta = Math.abs(timestamp - this.lastScrolledAt);
+            if (offsetDelta > this.offsetDeltaThreshold || timeDelta > this.eventDeltaThreshold) {
+                this.lastScrolledAt = timestamp;
+                this.syncFollowersToLeader();
+            }
+        }
+    }
+    setLeadScrollable(scrollable) {
+        if (this.leadScrollable == null) {
+            this.leadScrollable = scrollable;
+            if (this.debugLogs)
+                console.log("Scrolling started with: ", scrollable);
+            this.scrollTimer.start();
+        }
+        else {
+            throw new Error("This should now happen");
+        }
+        return this.leadScrollable;
+    }
+    onTimer(ts) {
+        if (this.leadScrollable != null && ts - this.lastScrolledAt > this.idleThreshold) {
+            const offsetDelta = Math.abs(this.leadScrollable.scrollOffset - this.lastScrollOffset);
+            if (offsetDelta == 0) {
+                this.scrollingFinished(ts);
+            }
+        }
+    }
+    scrollingFinished(ts) {
+        if (this.debugLogs)
+            console.log("Scrolling Finished at: ", ts);
+        this.syncFollowersToLeader();
+        this.leadScrollable = null;
+        this.scrollTimer.stop();
+    }
+}
+//# sourceMappingURL=scrolling.js.map

package/lib/esm/scrolling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrolling.js","sourceRoot":"","sources":["../../src/scrolling.ts"],"names":[],"mappings":"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","sourcesContent":["import { Timer } from \"./timer\";\n\n/**\n * A scroll group allows one to \"connect\" multiple elements to be\n * scrolled synchronously.\n *\n * A typical usecase would be a div showing lines for a code editor\n * and one that shows a line numbers for a code editor.\n *\n * We could also have recursive relationships where elements in\n * a scroll group are connected to other items outside the scroll\n * group and the would form a super scroll group.  An example would\n * two UI components A and B that\n * a scroll group is synchronized\n */\n\ntype EventHandler = (evt: any) => void;\nexport interface Scrollable {\n  // Set or get the current scroll offset\n  scrollOffset: number;\n\n  // Get total scroll size\n  readonly scrollSize: number;\n\n  // Size of the current \"page\".\n  // Our scrollOffset + pageSize is always < scrollSize\n  readonly pageSize: number;\n\n  // Detaches a scrollable from further use\n  attach(scrollGroup: ScrollGroup): void;\n  detach(): void;\n}\n\n/**\n * A wrapper for html elements that can be scrolled.\n */\nexport class HTMLElementScrollable implements Scrollable {\n  private _scrollGroup: ScrollGroup | null = null;\n  readonly element: HTMLElement;\n  private vertical = true;\n  private onScrollEventListener = this.onScrollEvent.bind(this) as EventListener;\n  private onMouseEventListener = this.onMouseEvent.bind(this) as EventListener;\n  private onTouchEventListener = this.onTouchEvent.bind(this) as EventListener;\n\n  constructor(element: HTMLElement, vertical = true) {\n    this.element = element;\n    this.vertical = vertical;\n  }\n\n  attach(scrollGroup: ScrollGroup): void {\n    if ((this.element as any).scrollGroup == scrollGroup) {\n      return;\n    } else if ((this.element as any).scrollGroup) {\n      throw new Error(\"Detach element from ScrollGroup first.\");\n    }\n    (this.element as any).scrollGroup = scrollGroup;\n    this._scrollGroup = scrollGroup;\n    this.element.addEventListener(\"scroll\", this.onScrollEventListener);\n    this.element.addEventListener(\"mousedown\", this.onMouseEventListener);\n    this.element.addEventListener(\"mouseenter\", this.onMouseEventListener);\n    this.element.addEventListener(\"mouseleave\", this.onMouseEventListener);\n    this.element.addEventListener(\"touchstart\", this.onTouchEventListener);\n  }\n\n  detach(): void {\n    (this.element as any).scrollGroup = null;\n    this.element.removeEventListener(\"scroll\", this.onScrollEventListener);\n    this.element.removeEventListener(\"mousedown\", this.onMouseEventListener);\n    this.element.removeEventListener(\"mouseenter\", this.onMouseEventListener);\n    this.element.removeEventListener(\"mouseleave\", this.onMouseEventListener);\n    this.element.removeEventListener(\"touchstart\", this.onTouchEventListener);\n  }\n\n  get scrollGroup(): ScrollGroup | null {\n    return this._scrollGroup;\n  }\n\n  // Set or get the current scroll offset\n  get scrollOffset(): number {\n    if (this.vertical) {\n      return this.element.scrollTop;\n    } else {\n      return this.element.scrollLeft;\n    }\n  }\n\n  set scrollOffset(value: number) {\n    if (this.vertical) {\n      this.element.scrollTop = value;\n    } else {\n      this.element.scrollLeft = value;\n    }\n  }\n\n  // Get total scroll size\n  get scrollSize(): number {\n    if (this.vertical) {\n      return this.element.scrollHeight;\n    } else {\n      return this.element.scrollWidth;\n    }\n  }\n\n  // Size of the current \"page\".\n  // Our scrollOffset + pageSize is always < scrollSize\n  get pageSize(): number {\n    if (this.vertical) {\n      return this.element.clientHeight;\n    } else {\n      return this.element.clientWidth;\n    }\n  }\n\n  onScrollEvent(event: Event): void {\n    /**\n     * Scroll events will be sent for all elements that are scrolling\n     * either programatically or invoked via gestures.\n     * It is not possible to know which of these it is and the problem\n     * with this is that by handling all events it could result in an\n     * infinite loop kicking each other off.\n     *\n     * So we need a way to be able differentiate scroll events between\n     * those that were the \"source\" and those that are \"followers\".\n     * We can try a few strategies here:\n     *\n     * 1. Take the first scroll event's target as the source\n     * and kick off a timer to check when scroll events stop.  As long\n     * as scroll events come from this source we update followers.\n     */\n    this.scrollGroup?.onScroll(this, event.timeStamp);\n  }\n\n  onTouchEvent(event: TouchEvent): void {\n    // console.log(`Touched Eeent(${event.type}): `, event);\n    if (event.type == \"touchstart\" && this.scrollGroup) {\n      this.scrollGroup.focussedScrollable = this;\n      // this.setLeadScrollable(this.focussedElement);\n    }\n  }\n\n  onMouseEvent(event: MouseEvent): void {\n    // console.log(`Mouse Event(${event.type}): `, event);\n    const element = event.target;\n    if (this.scrollGroup) {\n      if (event.type == \"mouseenter\") {\n        this.scrollGroup.focussedScrollable = this;\n      } else if (event.type == \"mouseleave\") {\n        this.scrollGroup.focussedScrollable = null;\n      } else if (event.type == \"mousedown\") {\n        this.scrollGroup.focussedScrollable = this;\n        // this.setLeadScrollable(this.focussedElement);\n      }\n    }\n  }\n}\n\nexport class ScrollGroup {\n  private scrollables: Scrollable[] = [];\n  private _focussedScrollable: Scrollable | null = null;\n  private leadScrollable: Scrollable | null = null;\n  private lastScrolledAt = -1;\n  private lastScrollOffset = 0;\n  private scrollTimer: Timer;\n\n  // If there has been no change in scroll offset within this\n  // time then we can assume scrolling has completed and this\n  // can be used to infer that scrolling has finished.\n  private idleThreshold = 300;\n\n  // Apply sync to followers if we have a scroll distance of atleast\n  // this much or time between last even has crossed the\n  // `eventDeltaThreshold`.\n  private offsetDeltaThreshold = 5;\n  private eventDeltaThreshold = 50;\n\n  constructor(public debugLogs = false) {\n    this.scrollTimer = new Timer(500, this.onTimer.bind(this));\n  }\n\n  add(scrollable: Scrollable): void {\n    // skip if already exists\n    const index = this.scrollables.indexOf(scrollable);\n    if (index >= 0) return;\n    scrollable.attach(this);\n    this.scrollables.push(scrollable);\n  }\n\n  remove(scrollable: Scrollable): void {\n    const index = this.scrollables.indexOf(scrollable);\n    if (index < 0) return;\n    this.detachAtIndex(index);\n  }\n\n  clear(): void {\n    for (let i = this.scrollables.length - 1; i >= 0; i--) {\n      this.detachAtIndex(i);\n    }\n  }\n\n  detachAtIndex(index: number): Scrollable {\n    const scrollable = this.scrollables[index];\n    scrollable.detach();\n    this.scrollables.splice(index, 1);\n    return scrollable;\n  }\n\n  syncFollowersToLeader(): void {\n    const scrollable = this.leadScrollable;\n    if (scrollable != null) {\n      this.lastScrollOffset = scrollable.scrollOffset;\n      // console.log(\"Scrolled: \", scrollable.scrollOffset, event);\n\n      // set the scroll position of all others\n      // TODO - should this happen in this handler itself?\n      const remScroll = Math.max(1, scrollable.scrollSize - scrollable.pageSize);\n      for (let i = this.scrollables.length - 1; i >= 0; i--) {\n        const other = this.scrollables[i];\n        const remOther = Math.max(1, other.scrollSize - other.pageSize);\n        /*\n        console.log(\"Scrollable: \", i, other);\n        console.log(\n          \"scrollOffset, scrollSize, pageSize: \",\n          other.scrollOffset,\n          other.scrollSize,\n          other.pageSize,\n          remOther,\n        );\n        */\n        if (other != scrollable) {\n          other.scrollOffset = (scrollable.scrollOffset * remOther) / remScroll;\n        }\n      }\n    }\n  }\n\n  set focussedScrollable(scrollable: Scrollable | null) {\n    this._focussedScrollable = scrollable;\n  }\n\n  onScroll(scrollable: Scrollable, timestamp: number): void {\n    if (this.leadScrollable == null) {\n      this.setLeadScrollable(scrollable);\n    }\n    const leader = this.leadScrollable;\n    if (leader != null) {\n      // update followers\n      const offsetDelta = Math.abs(leader.scrollOffset - this.lastScrollOffset);\n      const timeDelta = Math.abs(timestamp - this.lastScrolledAt);\n      if (offsetDelta > this.offsetDeltaThreshold || timeDelta > this.eventDeltaThreshold) {\n        this.lastScrolledAt = timestamp;\n        this.syncFollowersToLeader();\n      }\n    }\n  }\n\n  /**\n   * Sets the active scrollable to the focussed element.\n   */\n  public setLeadScrollable(scrollable: Scrollable): Scrollable | null {\n    if (this.leadScrollable == null) {\n      // scrolling has not begun yet so set it as the \"root\" scroller\n      this.leadScrollable = scrollable;\n      if (this.debugLogs) console.log(\"Scrolling started with: \", scrollable);\n      this.scrollTimer.start();\n    } else {\n      // What if there was an already active scrollable?\n      // This can happen if:\n      throw new Error(\"This should now happen\");\n    }\n    return this.leadScrollable;\n  }\n\n  onTimer(ts: number): void {\n    // Called with our timer\n    if (this.leadScrollable != null && ts - this.lastScrolledAt > this.idleThreshold) {\n      const offsetDelta = Math.abs(this.leadScrollable.scrollOffset - this.lastScrollOffset);\n      if (offsetDelta == 0) {\n        // No change in delta within a time window\n        this.scrollingFinished(ts);\n      }\n    }\n  }\n\n  protected scrollingFinished(ts: number): void {\n    if (this.debugLogs) console.log(\"Scrolling Finished at: \", ts);\n    // TODO - See if this can have a jerking effect\n    this.syncFollowersToLeader();\n    this.leadScrollable = null;\n    this.scrollTimer.stop();\n  }\n}\n"]}

package/lib/esm/timer.d.ts

@@ -0,0 +1,12 @@
+declare type StepFunc = (ts: number) => void;
+export declare class Timer {
+    private refreshInterval;
+    private lastRefreshAt;
+    private updateLoop;
+    stepFunc: StepFunc;
+    constructor(refreshInterval: number, stepFunc: StepFunc);
+    stop(): void;
+    start(): void;
+    protected kickOffUpdate(): void;
+}
+export {};

package/lib/esm/timer.js

@@ -0,0 +1,41 @@
+export class Timer {
+    constructor(refreshInterval, stepFunc) {
+        this.refreshInterval = 1000;
+        this.lastRefreshAt = 0;
+        this.updateLoop = null;
+        this.refreshInterval = refreshInterval;
+        this.stepFunc = stepFunc;
+    }
+    stop() {
+        if (this.updateLoop != null) {
+            cancelAnimationFrame(this.updateLoop);
+            this.updateLoop = null;
+        }
+    }
+    start() {
+        this.kickOffUpdate();
+    }
+    kickOffUpdate() {
+        if (this.updateLoop != null) {
+            cancelAnimationFrame(this.updateLoop);
+        }
+        this.updateLoop = requestAnimationFrame((timestamp) => {
+            if (this.updateLoop != null) {
+                if (timestamp - this.lastRefreshAt >= this.refreshInterval) {
+                    try {
+                        this.stepFunc(timestamp);
+                    }
+                    catch (err) {
+                        console.log("Error from Timer Handler: ", err);
+                        alert("Error from Timer Handler: " + err.message);
+                        return;
+                    }
+                    this.lastRefreshAt = timestamp;
+                }
+                this.updateLoop = null;
+                this.kickOffUpdate();
+            }
+        });
+    }
+}
+//# sourceMappingURL=timer.js.map

package/lib/esm/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/timer.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,KAAK;IAMhB,YAAY,eAAuB,EAAE,QAAkB;QAL/C,oBAAe,GAAG,IAAI,CAAC;QACvB,kBAAa,GAAG,CAAC,CAAC;QAClB,eAAU,GAAkB,IAAI,CAAC;QAIvC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,IAAI;QACF,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;YAC3B,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAES,aAAa;QACrB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;YAC3B,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACvC;QACD,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,CAAC,SAAS,EAAE,EAAE;YACpD,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;gBAC3B,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,eAAe,EAAE;oBAC1D,IAAI;wBACF,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;qBAC1B;oBAAC,OAAO,GAAQ,EAAE;wBACjB,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,GAAG,CAAC,CAAC;wBAC/C,KAAK,CAAC,4BAA4B,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;wBAClD,OAAO;qBACR;oBACD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;iBAChC;gBACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["type StepFunc = (ts: number) => void;\n\nexport class Timer {\n  private refreshInterval = 1000;\n  private lastRefreshAt = 0;\n  private updateLoop: number | null = null;\n  stepFunc: StepFunc;\n\n  constructor(refreshInterval: number, stepFunc: StepFunc) {\n    this.refreshInterval = refreshInterval;\n    this.stepFunc = stepFunc;\n  }\n\n  stop(): void {\n    if (this.updateLoop != null) {\n      cancelAnimationFrame(this.updateLoop);\n      this.updateLoop = null;\n    }\n  }\n\n  start(): void {\n    this.kickOffUpdate();\n  }\n\n  protected kickOffUpdate(): void {\n    if (this.updateLoop != null) {\n      cancelAnimationFrame(this.updateLoop);\n    }\n    this.updateLoop = requestAnimationFrame((timestamp) => {\n      if (this.updateLoop != null) {\n        if (timestamp - this.lastRefreshAt >= this.refreshInterval) {\n          try {\n            this.stepFunc(timestamp);\n          } catch (err: any) {\n            console.log(\"Error from Timer Handler: \", err);\n            alert(\"Error from Timer Handler: \" + err.message);\n            return;\n          }\n          this.lastRefreshAt = timestamp;\n        }\n        this.updateLoop = null;\n        this.kickOffUpdate();\n      }\n    });\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panyam/tsutils",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "author": "Sriram Panyam",
   "description": "Some basic TS utils for personal use",
   "homepage": "https://github.com/panyam/tsutils#readme",