@panyam/tsutils 0.0.68 → 0.0.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/cjs/scrolling.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
export declare class ScrollGroup {
|
|
2
|
+
scrollStopDelay: number;
|
|
2
3
|
debugLogs: boolean;
|
|
3
4
|
private scrollables;
|
|
4
5
|
private isScrolling;
|
|
5
6
|
private _focussedScrollable;
|
|
6
|
-
constructor(debugLogs?: boolean);
|
|
7
|
+
constructor(scrollStopDelay?: number, debugLogs?: boolean);
|
|
7
8
|
add(scrollable: Scrollable): void;
|
|
8
9
|
remove(scrollable: Scrollable): void;
|
|
9
10
|
clear(): void;
|
package/lib/cjs/scrolling.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.HTMLElementScrollable = exports.ScrollGroup = void 0;
|
|
4
4
|
class ScrollGroup {
|
|
5
|
-
constructor(debugLogs = false) {
|
|
5
|
+
constructor(scrollStopDelay = 50, debugLogs = false) {
|
|
6
|
+
this.scrollStopDelay = scrollStopDelay;
|
|
6
7
|
this.debugLogs = debugLogs;
|
|
7
8
|
this.scrollables = [];
|
|
8
9
|
this.isScrolling = false;
|
|
@@ -45,8 +46,8 @@ class ScrollGroup {
|
|
|
45
46
|
}
|
|
46
47
|
}
|
|
47
48
|
setTimeout(() => {
|
|
48
|
-
this.isScrolling =
|
|
49
|
-
},
|
|
49
|
+
this.isScrolling = false;
|
|
50
|
+
}, this.scrollStopDelay);
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
exports.ScrollGroup = ScrollGroup;
|
package/lib/cjs/scrolling.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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\nexport class ScrollGroup {\n private scrollables: Scrollable[] = [];\n private isScrolling = false;\n private _focussedScrollable: Scrollable | null = null;\n\n constructor(public debugLogs = false) {}\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 syncFollowers(source: Scrollable): void {\n if (this.isScrolling) return;\n this.isScrolling = true;\n\n const remScroll = Math.max(1, source.scrollSize - source.pageSize);\n const scrollPct = source.scrollOffset / remScroll;\n for (let i = this.scrollables.length - 1; i >= 0; i--) {\n const other = this.scrollables[i];\n if (other != source) {\n // const remOther = Math.max(1, other.scrollSize - other.pageSize);\n other.scrollOffset = scrollPct * (other.scrollSize - other.pageSize);\n }\n }\n\n setTimeout(() => {\n this.isScrolling = true;\n }, 50);\n }\n}\n\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?.syncFollowers(this);\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"]}
|
|
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\nexport class ScrollGroup {\n private scrollables: Scrollable[] = [];\n private isScrolling = false;\n private _focussedScrollable: Scrollable | null = null;\n\n constructor(\n public scrollStopDelay = 50,\n public debugLogs = false,\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 syncFollowers(source: Scrollable): void {\n if (this.isScrolling) return;\n this.isScrolling = true;\n\n const remScroll = Math.max(1, source.scrollSize - source.pageSize);\n const scrollPct = source.scrollOffset / remScroll;\n for (let i = this.scrollables.length - 1; i >= 0; i--) {\n const other = this.scrollables[i];\n if (other != source) {\n // const remOther = Math.max(1, other.scrollSize - other.pageSize);\n other.scrollOffset = scrollPct * (other.scrollSize - other.pageSize);\n }\n }\n\n setTimeout(() => {\n this.isScrolling = false;\n }, this.scrollStopDelay);\n }\n}\n\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?.syncFollowers(this);\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"]}
|
package/lib/esm/scrolling.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
export declare class ScrollGroup {
|
|
2
|
+
scrollStopDelay: number;
|
|
2
3
|
debugLogs: boolean;
|
|
3
4
|
private scrollables;
|
|
4
5
|
private isScrolling;
|
|
5
6
|
private _focussedScrollable;
|
|
6
|
-
constructor(debugLogs?: boolean);
|
|
7
|
+
constructor(scrollStopDelay?: number, debugLogs?: boolean);
|
|
7
8
|
add(scrollable: Scrollable): void;
|
|
8
9
|
remove(scrollable: Scrollable): void;
|
|
9
10
|
clear(): void;
|
package/lib/esm/scrolling.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export class ScrollGroup {
|
|
2
|
-
constructor(debugLogs = false) {
|
|
2
|
+
constructor(scrollStopDelay = 50, debugLogs = false) {
|
|
3
|
+
this.scrollStopDelay = scrollStopDelay;
|
|
3
4
|
this.debugLogs = debugLogs;
|
|
4
5
|
this.scrollables = [];
|
|
5
6
|
this.isScrolling = false;
|
|
@@ -42,8 +43,8 @@ export class ScrollGroup {
|
|
|
42
43
|
}
|
|
43
44
|
}
|
|
44
45
|
setTimeout(() => {
|
|
45
|
-
this.isScrolling =
|
|
46
|
-
},
|
|
46
|
+
this.isScrolling = false;
|
|
47
|
+
}, this.scrollStopDelay);
|
|
47
48
|
}
|
|
48
49
|
}
|
|
49
50
|
export class HTMLElementScrollable {
|
package/lib/esm/scrolling.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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\nexport class ScrollGroup {\n private scrollables: Scrollable[] = [];\n private isScrolling = false;\n private _focussedScrollable: Scrollable | null = null;\n\n constructor(public debugLogs = false) {}\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 syncFollowers(source: Scrollable): void {\n if (this.isScrolling) return;\n this.isScrolling = true;\n\n const remScroll = Math.max(1, source.scrollSize - source.pageSize);\n const scrollPct = source.scrollOffset / remScroll;\n for (let i = this.scrollables.length - 1; i >= 0; i--) {\n const other = this.scrollables[i];\n if (other != source) {\n // const remOther = Math.max(1, other.scrollSize - other.pageSize);\n other.scrollOffset = scrollPct * (other.scrollSize - other.pageSize);\n }\n }\n\n setTimeout(() => {\n this.isScrolling = true;\n }, 50);\n }\n}\n\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?.syncFollowers(this);\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"]}
|
|
1
|
+
{"version":3,"file":"scrolling.js","sourceRoot":"","sources":["../../src/scrolling.ts"],"names":[],"mappings":"AAgBA,MAAM,OAAO,WAAW;IAKtB,YACS,kBAAkB,EAAE,EACpB,YAAY,KAAK;QADjB,oBAAe,GAAf,eAAe,CAAK;QACpB,cAAS,GAAT,SAAS,CAAQ;QANlB,gBAAW,GAAiB,EAAE,CAAC;QAC/B,gBAAW,GAAG,KAAK,CAAC;QACpB,wBAAmB,GAAsB,IAAI,CAAC;IAKnD,CAAC;IAEJ,GAAG,CAAC,UAAsB;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,KAAK,IAAI,CAAC;YAAE,OAAO;QACvB,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,CAAC,UAAsB;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,KAAK,GAAG,CAAC;YAAE,OAAO;QACtB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,KAAK;QACH,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YACtD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,KAAa;QACzB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC3C,UAAU,CAAC,MAAM,EAAE,CAAC;QACpB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAClC,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,aAAa,CAAC,MAAkB;QAC9B,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO;QAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAExB,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;QACnE,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,GAAG,SAAS,CAAC;QAClD,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YACtD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;gBAEpB,KAAK,CAAC,YAAY,GAAG,SAAS,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;YACvE,CAAC;QACH,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC3B,CAAC;CACF;AAqBD,MAAM,OAAO,qBAAqB;IAQhC,YAAY,OAAoB,EAAE,QAAQ,GAAG,IAAI;QAPzC,iBAAY,GAAuB,IAAI,CAAC;QAExC,aAAQ,GAAG,IAAI,CAAC;QAChB,0BAAqB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC;QACvE,yBAAoB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC;QACrE,yBAAoB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC;QAG3E,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,MAAM,CAAC,WAAwB;QAC7B,IAAK,IAAI,CAAC,OAAe,CAAC,WAAW,IAAI,WAAW,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;aAAM,IAAK,IAAI,CAAC,OAAe,CAAC,WAAW,EAAE,CAAC;YAC7C,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAC5D,CAAC;QACA,IAAI,CAAC,OAAe,CAAC,WAAW,GAAG,WAAW,CAAC;QAChD,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;QAChC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACpE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACtE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACvE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACvE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACzE,CAAC;IAED,MAAM;QACH,IAAI,CAAC,OAAe,CAAC,WAAW,GAAG,IAAI,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACvE,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACzE,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC1E,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC1E,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAGD,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QACjC,CAAC;IACH,CAAC;IAED,IAAI,YAAY,CAAC,KAAa;QAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;QAClC,CAAC;IACH,CAAC;IAGD,IAAI,UAAU;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;QAClC,CAAC;IACH,CAAC;IAID,IAAI,QAAQ;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;QAClC,CAAC;IACH,CAAC;IAED,aAAa,CAAC,KAAY;;QAgBxB,MAAA,IAAI,CAAC,WAAW,0CAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED,YAAY,CAAC,KAAiB;QAE5B,IAAI,KAAK,CAAC,IAAI,IAAI,YAAY,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QAGrD,CAAC;IACH,CAAC;IAED,YAAY,CAAC,KAAiB;QAE5B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;QAC7B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,KAAK,CAAC,IAAI,IAAI,YAAY,EAAE,CAAC;YAEjC,CAAC;iBAAM,IAAI,KAAK,CAAC,IAAI,IAAI,YAAY,EAAE,CAAC;YAExC,CAAC;iBAAM,IAAI,KAAK,CAAC,IAAI,IAAI,WAAW,EAAE,CAAC;YAGvC,CAAC;QACH,CAAC;IACH,CAAC;CACF","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\nexport class ScrollGroup {\n private scrollables: Scrollable[] = [];\n private isScrolling = false;\n private _focussedScrollable: Scrollable | null = null;\n\n constructor(\n public scrollStopDelay = 50,\n public debugLogs = false,\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 syncFollowers(source: Scrollable): void {\n if (this.isScrolling) return;\n this.isScrolling = true;\n\n const remScroll = Math.max(1, source.scrollSize - source.pageSize);\n const scrollPct = source.scrollOffset / remScroll;\n for (let i = this.scrollables.length - 1; i >= 0; i--) {\n const other = this.scrollables[i];\n if (other != source) {\n // const remOther = Math.max(1, other.scrollSize - other.pageSize);\n other.scrollOffset = scrollPct * (other.scrollSize - other.pageSize);\n }\n }\n\n setTimeout(() => {\n this.isScrolling = false;\n }, this.scrollStopDelay);\n }\n}\n\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?.syncFollowers(this);\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"]}
|