From 7929a8ceca2355d29f26124f90f54284fba745a3 Mon Sep 17 00:00:00 2001 From: Alex Kaminskii Date: Mon, 16 May 2022 19:35:20 +0200 Subject: [PATCH 1/3] refactor(player): move lists to separate file + renaming --- .../app/player/MessageDistributor/Lists.ts | 23 ++++++ .../MessageDistributor/MessageDistributor.ts | 81 +++++++------------ .../managers/MobXStateManager.ts | 14 ---- .../{MouseManager.ts => MouseMoveManager.ts} | 4 +- 4 files changed, 55 insertions(+), 67 deletions(-) create mode 100644 frontend/app/player/MessageDistributor/Lists.ts delete mode 100644 frontend/app/player/MessageDistributor/managers/MobXStateManager.ts rename frontend/app/player/MessageDistributor/managers/{MouseManager.ts => MouseMoveManager.ts} (90%) diff --git a/frontend/app/player/MessageDistributor/Lists.ts b/frontend/app/player/MessageDistributor/Lists.ts new file mode 100644 index 000000000..0173b2667 --- /dev/null +++ b/frontend/app/player/MessageDistributor/Lists.ts @@ -0,0 +1,23 @@ +import type { Message } from './messages' +import ListWalker from './managers/ListWalker'; + +export const LIST_NAMES = ["redux", "mobx", "vuex", "ngrx", "graphql", "exceptions", "profiles", "longtasks"] as const; + +export const INITIAL_STATE = {} +LIST_NAMES.forEach(name => { + INITIAL_STATE[`${name}ListNow`] = [] + INITIAL_STATE[`${name}List`] = [] +}) + + +type ListsObject = { + [key in typeof LIST_NAMES[number]]: ListWalker +} + +export function initLists(): ListsObject { + const lists: Partial = {}; + for (var i = 0; i < LIST_NAMES.length; i++) { + lists[LIST_NAMES[i]] = new ListWalker(); + } + return lists as ListsObject; +} diff --git a/frontend/app/player/MessageDistributor/MessageDistributor.ts b/frontend/app/player/MessageDistributor/MessageDistributor.ts index 653b05f54..1c7da6485 100644 --- a/frontend/app/player/MessageDistributor/MessageDistributor.ts +++ b/frontend/app/player/MessageDistributor/MessageDistributor.ts @@ -4,8 +4,6 @@ import logger from 'App/logger'; import Resource, { TYPES } from 'Types/session/resource'; // MBTODO: player types? import { TYPES as EVENT_TYPES } from 'Types/session/event'; import Log from 'Types/session/log'; -import Profile from 'Types/session/profile'; -import ReduxAction from 'Types/session/reduxAction'; import { update } from '../store'; import { @@ -18,7 +16,7 @@ import StatedScreen from './StatedScreen/StatedScreen'; import ListWalker from './managers/ListWalker'; import PagesManager from './managers/PagesManager'; -import MouseManager from './managers/MouseManager'; +import MouseMoveManager from './managers/MouseMoveManager'; import PerformanceTrackManager from './managers/PerformanceTrackManager'; import WindowNodeCounter from './managers/WindowNodeCounter'; @@ -30,16 +28,11 @@ import loadFiles from './network/loadFiles'; import { INITIAL_STATE as SUPER_INITIAL_STATE, State as SuperState } from './StatedScreen/StatedScreen'; import { INITIAL_STATE as ASSIST_INITIAL_STATE, State as AssistState } from './managers/AssistManager'; +import { INITIAL_STATE as LISTS_INITIAL_STATE , LIST_NAMES, initLists } from './Lists'; import type { PerformanceChartPoint } from './managers/PerformanceTrackManager'; import type { SkipInterval } from './managers/ActivityManager'; -const LIST_NAMES = ["redux", "mobx", "vuex", "ngrx", "graphql", "exceptions", "profiles", "longtasks"] as const; -const LISTS_INITIAL_STATE = {}; -LIST_NAMES.forEach(name => { - LISTS_INITIAL_STATE[`${name}ListNow`] = []; - LISTS_INITIAL_STATE[`${name}List`] = []; -}) export interface State extends SuperState, AssistState { performanceChartData: PerformanceChartPoint[], @@ -61,18 +54,6 @@ export const INITIAL_STATE: State = { skipIntervals: [], }; -type ListsObject = { - [key in typeof LIST_NAMES[number]]: ListWalker // -} - -function initLists(): ListsObject { - const lists: Partial = {}; - for (var i = 0; i < LIST_NAMES.length; i++) { - lists[LIST_NAMES[i]] = new ListWalker(); - } - return lists as ListsObject; -} - import type { Message, @@ -97,7 +78,7 @@ export default class MessageDistributor extends StatedScreen { private readonly resizeManager: ListWalker = new ListWalker([]); private readonly pagesManager: PagesManager; - private readonly mouseManager: MouseManager; + private readonly mouseMoveManager: MouseMoveManager; private readonly assistManager: AssistManager; private readonly scrollManager: ListWalker = new ListWalker(); @@ -114,7 +95,7 @@ export default class MessageDistributor extends StatedScreen { constructor(private readonly session: any /*Session*/, jwt: string, config, live: boolean) { super(); this.pagesManager = new PagesManager(this, this.session.isMobile) - this.mouseManager = new MouseManager(this); + this.mouseMoveManager = new MouseMoveManager(this); this.assistManager = new AssistManager(session, this, config); this.sessionStart = this.session.startedAt; @@ -136,11 +117,11 @@ export default class MessageDistributor extends StatedScreen { eventList.forEach(e => { if (e.type === EVENT_TYPES.LOCATION) { //TODO type system - this.locationEventManager.add(e); + this.locationEventManager.append(e); } }); this.session.errors.forEach(e => { - this.lists.exceptions.add(e); + this.lists.exceptions.append(e); }); /* === */ this.loadMessages(); @@ -286,7 +267,7 @@ export default class MessageDistributor extends StatedScreen { this.window.scrollTo(lastScroll.x, lastScroll.y); } // Moving mouse and setting :hover classes on ready view - this.mouseManager.move(t); + this.mouseMoveManager.move(t); const lastClick = this.clickManager.moveToLast(t); if (!!lastClick && t - lastClick.time < 600) { // happend during last 600ms this.cursor.click(); @@ -300,7 +281,7 @@ export default class MessageDistributor extends StatedScreen { } } - _decodeMessage(msg, keys: Array) { + private decodeMessage(msg, keys: Array) { const decoded = {}; try { keys.forEach(key => { @@ -314,7 +295,7 @@ export default class MessageDistributor extends StatedScreen { } /* Binded */ - distributeMessage = (msg: Message, index: number): void => { + distributeMessage(msg: Message, index: number): void { if ([ "mouse_move", "mouse_click", @@ -355,74 +336,72 @@ export default class MessageDistributor extends StatedScreen { break; /* */ case "set_page_location": - this.locationManager.add(msg); + this.locationManager.append(msg); if (msg.navigationStart > 0) { - this.loadedLocationManager.add(msg); + this.loadedLocationManager.append(msg); } break; case "set_viewport_size": - this.resizeManager.add(msg); + this.resizeManager.append(msg); break; case "mouse_move": - this.mouseManager.add(msg); + this.mouseMoveManager.append(msg); break; case "mouse_click": - this.clickManager.add(msg); + this.clickManager.append(msg); break; case "set_viewport_scroll": - this.scrollManager.add(msg); + this.scrollManager.append(msg); break; case "performance_track": - this.performanceTrackManager.add(msg); + this.performanceTrackManager.append(msg); break; case "set_page_visibility": this.performanceTrackManager.handleVisibility(msg) break; case "connection_information": - this.connectionInfoManger.add(msg); + this.connectionInfoManger.append(msg); break; case "o_table": this.decoder.set(msg.key, msg.value); break; case "redux": - decoded = this._decodeMessage(msg, ["state", "action"]); + decoded = this.decodeMessage(msg, ["state", "action"]); logger.log(decoded) if (decoded != null) { - this.lists.redux.add(decoded); + this.lists.redux.append(decoded); } break; case "ng_rx": - decoded = this._decodeMessage(msg, ["state", "action"]); + decoded = this.decodeMessage(msg, ["state", "action"]); logger.log(decoded) if (decoded != null) { - this.lists.ngrx.add(decoded); + this.lists.ngrx.append(decoded); } break; case "vuex": - decoded = this._decodeMessage(msg, ["state", "mutation"]); + decoded = this.decodeMessage(msg, ["state", "mutation"]); logger.log(decoded) if (decoded != null) { - this.lists.vuex.add(decoded); + this.lists.vuex.append(decoded); } break; case "mob_x": - decoded = this._decodeMessage(msg, ["payload"]); + decoded = this.decodeMessage(msg, ["payload"]); logger.log(decoded) if (decoded != null) { - this.lists.mobx.add(decoded); + this.lists.mobx.append(decoded); } break; case "graph_ql": - // @ts-ignore some hack? TODO: remove - msg.duration = 0; - this.lists.graphql.add(msg); + this.lists.graphql.append(msg); break; case "profiler": - this.lists.profiles.add(msg); + this.lists.profiles.append(msg); break; case "long_task": - this.lists.longtasks.add({ + this.lists.longtasks.append({ ...msg, time: msg.timestamp - this.sessionStart, }); @@ -447,7 +426,7 @@ export default class MessageDistributor extends StatedScreen { this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count); break; } - this.pagesManager.add(msg); + this.pagesManager.append(msg); break; } } @@ -457,7 +436,7 @@ export default class MessageDistributor extends StatedScreen { } getFirstMessageTime(): number { - return 0; //this.pagesManager.minTime; + return 0; } // TODO: clean managers? diff --git a/frontend/app/player/MessageDistributor/managers/MobXStateManager.ts b/frontend/app/player/MessageDistributor/managers/MobXStateManager.ts deleted file mode 100644 index 7a181fcf0..000000000 --- a/frontend/app/player/MessageDistributor/managers/MobXStateManager.ts +++ /dev/null @@ -1,14 +0,0 @@ -// import type { MobX } from '../messages'; -// import type { Timed } from '../Timed'; - -// import ListWalker from './ListWalker'; - -// type MobXTimed = MobX & Timed; - -// export default class MobXStateManager extends ListWalker { -// moveToLast(t: number) { -// super.moveApply(t, ) -// } - - -// } \ No newline at end of file diff --git a/frontend/app/player/MessageDistributor/managers/MouseManager.ts b/frontend/app/player/MessageDistributor/managers/MouseMoveManager.ts similarity index 90% rename from frontend/app/player/MessageDistributor/managers/MouseManager.ts rename to frontend/app/player/MessageDistributor/managers/MouseMoveManager.ts index 859afea59..9525a543d 100644 --- a/frontend/app/player/MessageDistributor/managers/MouseManager.ts +++ b/frontend/app/player/MessageDistributor/managers/MouseMoveManager.ts @@ -6,10 +6,10 @@ import ListWalker from './ListWalker'; const HOVER_CLASS = "-openreplay-hover"; const HOVER_CLASS_DEPR = "-asayer-hover"; -export default class MouseManager extends ListWalker { +export default class MouseMoveManager extends ListWalker { private hoverElements: Array = []; - constructor(private screen: StatedScreen) {super();} + constructor(private screen: StatedScreen) {super()} private updateHover(): void { // @ts-ignore TODO From d495f1aa9729fec94e8ca36268dbcdaec0a6b6ec Mon Sep 17 00:00:00 2001 From: Alex Kaminskii Date: Mon, 16 May 2022 20:02:19 +0200 Subject: [PATCH 2/3] style(player): few renamings --- .../MessageDistributor/MessageDistributor.ts | 18 ++--- .../managers/ActivityManager.ts | 4 +- .../MessageDistributor/managers/DOMManager.ts | 8 +- .../MessageDistributor/managers/ListWalker.ts | 76 ++++++------------- .../managers/MouseMoveManager.ts | 2 +- .../managers/PagesManager.js | 6 +- .../managers/PerformanceTrackManager.ts | 2 +- frontend/app/player/ios/ImagePlayer.js | 8 +- frontend/app/player/ios/PerformanceList.js | 4 +- frontend/app/player/ios/ScreenList.js | 4 +- 10 files changed, 52 insertions(+), 80 deletions(-) diff --git a/frontend/app/player/MessageDistributor/MessageDistributor.ts b/frontend/app/player/MessageDistributor/MessageDistributor.ts index 1c7da6485..d60ae1790 100644 --- a/frontend/app/player/MessageDistributor/MessageDistributor.ts +++ b/frontend/app/player/MessageDistributor/MessageDistributor.ts @@ -207,12 +207,12 @@ export default class MessageDistributor extends StatedScreen { move(t: number, index?: number): void { const stateToUpdate: Partial = {}; /* == REFACTOR_ME == */ - const lastLoadedLocationMsg = this.loadedLocationManager.moveToLast(t, index); + const lastLoadedLocationMsg = this.loadedLocationManager.moveGetLast(t, index); if (!!lastLoadedLocationMsg) { setListsStartTime(lastLoadedLocationMsg.time) this.navigationStartOffset = lastLoadedLocationMsg.navigationStart - this.sessionStart; } - const llEvent = this.locationEventManager.moveToLast(t, index); + const llEvent = this.locationEventManager.moveGetLast(t, index); if (!!llEvent) { if (llEvent.domContentLoadedTime != null) { stateToUpdate.domContentLoadedTime = { @@ -231,22 +231,22 @@ export default class MessageDistributor extends StatedScreen { } } /* === */ - const lastLocationMsg = this.locationManager.moveToLast(t, index); + const lastLocationMsg = this.locationManager.moveGetLast(t, index); if (!!lastLocationMsg) { stateToUpdate.location = lastLocationMsg.url; } - const lastConnectionInfoMsg = this.connectionInfoManger.moveToLast(t, index); + const lastConnectionInfoMsg = this.connectionInfoManger.moveGetLast(t, index); if (!!lastConnectionInfoMsg) { stateToUpdate.connType = lastConnectionInfoMsg.type; stateToUpdate.connBandwidth = lastConnectionInfoMsg.downlink; } - const lastPerformanceTrackMessage = this.performanceTrackManager.moveToLast(t, index); + const lastPerformanceTrackMessage = this.performanceTrackManager.moveGetLast(t, index); if (!!lastPerformanceTrackMessage) { stateToUpdate.performanceChartTime = lastPerformanceTrackMessage.time; } LIST_NAMES.forEach(key => { - const lastMsg = this.lists[key].moveToLast(t, key === 'exceptions' ? undefined : index); + const lastMsg = this.lists[key].moveGetLast(t, key === 'exceptions' ? undefined : index); if (lastMsg != null) { stateToUpdate[`${key}ListNow`] = this.lists[key].listNow; } @@ -256,19 +256,19 @@ export default class MessageDistributor extends StatedScreen { /* Sequence of the managers is important here */ // Preparing the size of "screen" - const lastResize = this.resizeManager.moveToLast(t, index); + const lastResize = this.resizeManager.moveGetLast(t, index); if (!!lastResize) { this.setSize(lastResize) } this.pagesManager.moveReady(t).then(() => { - const lastScroll = this.scrollManager.moveToLast(t, index); + const lastScroll = this.scrollManager.moveGetLast(t, index); if (!!lastScroll && this.window) { this.window.scrollTo(lastScroll.x, lastScroll.y); } // Moving mouse and setting :hover classes on ready view this.mouseMoveManager.move(t); - const lastClick = this.clickManager.moveToLast(t); + const lastClick = this.clickManager.moveGetLast(t); if (!!lastClick && t - lastClick.time < 600) { // happend during last 600ms this.cursor.click(); } diff --git a/frontend/app/player/MessageDistributor/managers/ActivityManager.ts b/frontend/app/player/MessageDistributor/managers/ActivityManager.ts index ba17d295e..b70e4aefd 100644 --- a/frontend/app/player/MessageDistributor/managers/ActivityManager.ts +++ b/frontend/app/player/MessageDistributor/managers/ActivityManager.ts @@ -27,14 +27,14 @@ export default class ActivityManager extends ListWalker { updateAcctivity(time: number) { if (time - this.lastActivity >= this.minInterval) { - this.add(new SkipIntervalCls(this.lastActivity, time)); + this.append(new SkipIntervalCls(this.lastActivity, time)); } this.lastActivity = time; } end() { if (this.endTime - this.lastActivity >= this.minInterval) { - this.add(new SkipIntervalCls(this.lastActivity, this.endTime)); + this.append(new SkipIntervalCls(this.lastActivity, this.endTime)); } } diff --git a/frontend/app/player/MessageDistributor/managers/DOMManager.ts b/frontend/app/player/MessageDistributor/managers/DOMManager.ts index 685a34f2c..187ebc8a0 100644 --- a/frontend/app/player/MessageDistributor/managers/DOMManager.ts +++ b/frontend/app/player/MessageDistributor/managers/DOMManager.ts @@ -40,12 +40,12 @@ export default class DOMManager extends ListWalker { if (!this.nodeScrollManagers[ m.id ]) { this.nodeScrollManagers[ m.id ] = new ListWalker(); } - this.nodeScrollManagers[ m.id ].add(m); + this.nodeScrollManagers[ m.id ].append(m); return; //case "css_insert_rule": // || //set_css_data ??? //case "css_delete_rule": // (m.tp === "set_node_attribute" && this.isLink[ m.id ] && m.key === "href")) { - // this.stylesManager.add(m); + // this.stylesManager.append(m); // return; default: if (m.tp === "create_element_node") { @@ -62,7 +62,7 @@ export default class DOMManager extends ListWalker { logger.log("Ignorring message: ", m) return; // Ignoring... } - super.add(m); + super.append(m); } } @@ -299,7 +299,7 @@ export default class DOMManager extends ListWalker { moveReady(t: number): Promise { this.moveApply(t, this.applyMessage); // This function autoresets pointer if necessary (better name?) this.nodeScrollManagers.forEach(manager => { - const msg = manager.moveToLast(t); // TODO: reset (?) + const msg = manager.moveGetLast(t); // TODO: reset (?) if (!!msg && !!this.nl[msg.id]) { const node = this.nl[msg.id] as HTMLElement; diff --git a/frontend/app/player/MessageDistributor/managers/ListWalker.ts b/frontend/app/player/MessageDistributor/managers/ListWalker.ts index dcfe5cd96..63f549338 100644 --- a/frontend/app/player/MessageDistributor/managers/ListWalker.ts +++ b/frontend/app/player/MessageDistributor/managers/ListWalker.ts @@ -1,26 +1,19 @@ import type { Timed } from '../messages/timed'; export default class ListWalker { - // Optimisation: #prop compiles to method that costs mor than strict property call. - _p = 0; - _list: Array; - constructor(list: Array = []) { - this._list = list; - } - - add(m: T): void { - return this.append(m); - } + private p = 0 + constructor(private _list: Array = []) {} append(m: T): void { if (this.length > 0 && this.last && m.time < this.last.time) { - console.error("Trying to append message with the less time then the list tail: ", m); + console.error("Trying to append message with the less time then the list tail: ", m) + return } this._list.push(m); } reset(): void { - this._p = 0; + this.p = 0 } sort(comparator): void { @@ -32,14 +25,6 @@ export default class ListWalker { this._list.forEach(f); } - // set pointer(p: number): void { - // if (p >= this.length || p < 0) { - // // console.error("Trying to set wrong pointer") - // return; - // } - // this._p = p; - // } - get last(): T | null { if (this._list.length === 0) { return null; @@ -48,17 +33,17 @@ export default class ListWalker { } get current(): T | null { - if (this._p === 0) { + if (this.p === 0) { return null; } - return this._list[ this._p - 1 ]; + return this._list[ this.p - 1 ]; } get timeNow(): number { - if (this._p === 0) { + if (this.p === 0) { return 0; } - return this._list[ this._p - 1 ].time; + return this._list[ this.p - 1 ].time; } get length(): number { @@ -79,7 +64,7 @@ export default class ListWalker { } get listNow(): Array { - return this._list.slice(0, this._p); + return this._list.slice(0, this.p); } get list(): Array { @@ -91,15 +76,15 @@ export default class ListWalker { } get countNow(): number { - return this._p; + return this.p; } /* Returns last message with the time <= t. Assumed that the current message is already handled so - if pointer doesn't cahnge is returned. + if pointer doesn't cahnge is returned. */ - moveToLast(t: number, index?: number): T | null { + moveGetLast(t: number, index?: number): T | null { let key: string = "time"; //TODO let val = t; if (index) { @@ -108,42 +93,29 @@ export default class ListWalker { } let changed = false; - while (this._p < this.length && this._list[this._p][key] <= val) { - this._p++; + while (this.p < this.length && this._list[this.p][key] <= val) { + this.p++; changed = true; } - while (this._p > 0 && this._list[ this._p - 1 ][key] > val) { - this._p--; + while (this.p > 0 && this._list[ this.p - 1 ][key] > val) { + this.p--; changed = true; } - return changed ? this._list[ this._p - 1 ] : null; + return changed ? this._list[ this.p - 1 ] : null; } - // moveToLastByIndex(i: number): ?T { - // let changed = false; - // while (!!this._list[this._p] && this._list[this._p]._index <= i) { - // this._p++; - // changed = true; - // } - // while (this._p > 0 && this._list[ this._p - 1 ]._index > i) { - // this._p--; - // changed = true; - // } - // return changed ? this._list[ this._p - 1 ] : undefined; - // } - - moveApply(t: number, fn: (T) => void): void { + moveApply(t: number, fn: (T) => void, fnBack?: (T) => void): void { // Applying only in increment order for now if (t < this.timeNow) { this.reset(); } - while (!!this._list[this._p] && this._list[this._p].time <= t) { - fn(this._list[ this._p++ ]); + while (!!this._list[this.p] && this._list[this.p].time <= t) { + fn(this._list[ this.p++ ]); + } + while (fnBack && this.p > 0 && this._list[ this.p - 1 ].time > t) { + fnBack(this._list[ --this.p ]); } - //while (this._p > 0 && this._list[ this._p - 1 ].time > t) { - // fnBack(this._list[ --this._p ]); - //} } } \ No newline at end of file diff --git a/frontend/app/player/MessageDistributor/managers/MouseMoveManager.ts b/frontend/app/player/MessageDistributor/managers/MouseMoveManager.ts index 9525a543d..f92d53ee9 100644 --- a/frontend/app/player/MessageDistributor/managers/MouseMoveManager.ts +++ b/frontend/app/player/MessageDistributor/managers/MouseMoveManager.ts @@ -32,7 +32,7 @@ export default class MouseMoveManager extends ListWalker { } move(t: number) { - const lastMouseMove = this.moveToLast(t); + const lastMouseMove = this.moveGetLast(t); if (!!lastMouseMove){ this.screen.cursor.move(lastMouseMove); //window.getComputedStyle(this.screen.getCursorTarget()).cursor === 'pointer' // might nfluence performance though diff --git a/frontend/app/player/MessageDistributor/managers/PagesManager.js b/frontend/app/player/MessageDistributor/managers/PagesManager.js index d5816c57c..01909e194 100644 --- a/frontend/app/player/MessageDistributor/managers/PagesManager.js +++ b/frontend/app/player/MessageDistributor/managers/PagesManager.js @@ -25,13 +25,13 @@ export default class PagesManager extends ListWalker { */ add(m: TimedMessage): void { if (m.tp === "create_document") { - super.add(new DOMManager(this.#screen, this.#isMobile, m.time)) + super.append(new DOMManager(this.#screen, this.#isMobile, m.time)) } if (this.last === null) { // Log wrong return; } - this.last.add(m); + this.last.append(m); } sort(comparator) { @@ -39,7 +39,7 @@ export default class PagesManager extends ListWalker { } moveReady(t: number): Promise { - const requiredPage = this.moveToLast(t); + const requiredPage = this.moveGetLast(t); if (!!requiredPage) { this.#currentPage = requiredPage; this.#currentPage.reset(); // Otherwise it won't apply create_document diff --git a/frontend/app/player/MessageDistributor/managers/PerformanceTrackManager.ts b/frontend/app/player/MessageDistributor/managers/PerformanceTrackManager.ts index 4c756616e..ceace6581 100644 --- a/frontend/app/player/MessageDistributor/managers/PerformanceTrackManager.ts +++ b/frontend/app/player/MessageDistributor/managers/PerformanceTrackManager.ts @@ -62,7 +62,7 @@ export default class PerformanceTrackManager extends ListWalker list.moveToLast(0)); // In case of negative values + Object.values(this.lists).forEach(list => list.moveGetLast(0)); // In case of negative values }) if (session.socket == null || typeof session.socket.jwt !== "string" || typeof session.socket.url !== "string") { @@ -190,8 +190,8 @@ export default class ImagePlayer { _setTime(ts) { ts = Math.max(Math.min(ts, this.state.endTime), 0); this.state.setTime(ts); - Object.values(this.lists).forEach(list => list.moveToLast(ts)); - const screen = this._screens.moveToLast(ts); + Object.values(this.lists).forEach(list => list.moveGetLast(ts)); + const screen = this._screens.moveGetLast(ts); if (screen != null) { const { dataURL, width, height } = screen; this.state.setSize(width, height); @@ -199,7 +199,7 @@ export default class ImagePlayer { //this._screen.style.backgroundImage = `url(${screen.dataURL})`; screen.loadImage.then(() => this._screen.style.backgroundImage = `url(${screen.dataURL})`); } - const lastClick = this._clicks.moveToLast(ts); + const lastClick = this._clicks.moveGetLast(ts); if (lastClick != null && lastClick.time > ts - 600) { this._animateClick(lastClick); } diff --git a/frontend/app/player/ios/PerformanceList.js b/frontend/app/player/ios/PerformanceList.js index 5da8272dc..47d7918f3 100644 --- a/frontend/app/player/ios/PerformanceList.js +++ b/frontend/app/player/ios/PerformanceList.js @@ -27,8 +27,8 @@ export default class PerformanceList { return this._list.count; } - moveToLast(t) { - this._list.moveToLast(t); + moveGetLast(t) { + this._list.moveGetLast(t); } append(m) { diff --git a/frontend/app/player/ios/ScreenList.js b/frontend/app/player/ios/ScreenList.js index a19b9bd2a..ef6d1e73f 100644 --- a/frontend/app/player/ios/ScreenList.js +++ b/frontend/app/player/ios/ScreenList.js @@ -34,8 +34,8 @@ export default class ScreenList { this._walker._list.splice(p, 0, m); } - moveToLast(time) { - return this._walker.moveToLast(time); + moveGetLast(time) { + return this._walker.moveGetLast(time); } insertScreen(time, width, height, arrayBuffer): void { From 8ff0249814c2db53353924debdecd0879ba61c36 Mon Sep 17 00:00:00 2001 From: Alex Kaminskii Date: Mon, 16 May 2022 20:24:58 +0200 Subject: [PATCH 3/3] few files to ts --- .../managers/PagesManager.js | 53 ---------- .../managers/PagesManager.ts | 50 ++++++++++ .../managers/ReduxStateManager.ts | 53 ++++++++++ .../managers/WindowNodeCounter.js | 96 ------------------- .../managers/WindowNodeCounter.ts | 96 +++++++++++++++++++ 5 files changed, 199 insertions(+), 149 deletions(-) delete mode 100644 frontend/app/player/MessageDistributor/managers/PagesManager.js create mode 100644 frontend/app/player/MessageDistributor/managers/PagesManager.ts create mode 100644 frontend/app/player/MessageDistributor/managers/ReduxStateManager.ts delete mode 100644 frontend/app/player/MessageDistributor/managers/WindowNodeCounter.js create mode 100644 frontend/app/player/MessageDistributor/managers/WindowNodeCounter.ts diff --git a/frontend/app/player/MessageDistributor/managers/PagesManager.js b/frontend/app/player/MessageDistributor/managers/PagesManager.js deleted file mode 100644 index 01909e194..000000000 --- a/frontend/app/player/MessageDistributor/managers/PagesManager.js +++ /dev/null @@ -1,53 +0,0 @@ -//@flow -import type StatedScreen from '../StatedScreen'; -import type { Message } from '../messages'; -import type { Timed } from '../Timed'; - -import ListWalker from './ListWalker'; -import DOMManager from './DOMManager'; - -type TimedMessage = Timed & Message; - -export default class PagesManager extends ListWalker { - #currentPage: DOMManager; - - #isMobile: boolean; - #screen: StatedScreen; - - constructor(screen: StatedScreen, isMobile: boolean): void { - super(); - this.#screen = screen; - this.#isMobile = isMobile; - } - - /* - Assumed that messages added in a correct time sequence. - */ - add(m: TimedMessage): void { - if (m.tp === "create_document") { - super.append(new DOMManager(this.#screen, this.#isMobile, m.time)) - } - if (this.last === null) { - // Log wrong - return; - } - this.last.append(m); - } - - sort(comparator) { - this.forEach(page => page.sort(comparator)) - } - - moveReady(t: number): Promise { - const requiredPage = this.moveGetLast(t); - if (!!requiredPage) { - this.#currentPage = requiredPage; - this.#currentPage.reset(); // Otherwise it won't apply create_document - } - if (!!this.#currentPage) { - return this.#currentPage.moveReady(t); - } - return Promise.resolve(); - } - -} \ No newline at end of file diff --git a/frontend/app/player/MessageDistributor/managers/PagesManager.ts b/frontend/app/player/MessageDistributor/managers/PagesManager.ts new file mode 100644 index 000000000..2431183dd --- /dev/null +++ b/frontend/app/player/MessageDistributor/managers/PagesManager.ts @@ -0,0 +1,50 @@ +import type StatedScreen from '../StatedScreen'; +import type { Message } from '../messages'; + +import ListWalker from './ListWalker'; +import DOMManager from './DOMManager'; + + +export default class PagesManager extends ListWalker { + private currentPage: DOMManager | null = null + + private isMobile: boolean; + private screen: StatedScreen; + + constructor(screen: StatedScreen, isMobile: boolean) { + super() + this.screen = screen + this.isMobile = isMobile + } + + /* + Assumed that messages added in a correct time sequence. + */ + add(m: Message): void { + if (m.tp === "create_document") { + super.append(new DOMManager(this.screen, this.isMobile, m.time)) + } + if (this.last === null) { + // Log wrong + return; + } + this.last.append(m) + } + + sort(comparator) { + this.forEach(page => page.sort(comparator)) + } + + moveReady(t: number): Promise { + const requiredPage = this.moveGetLast(t) + if (requiredPage != null) { + this.currentPage = requiredPage + this.currentPage.reset() // Otherwise it won't apply create_document + } + if (this.currentPage != null) { + return this.currentPage.moveReady(t) + } + return Promise.resolve() + } + +} \ No newline at end of file diff --git a/frontend/app/player/MessageDistributor/managers/ReduxStateManager.ts b/frontend/app/player/MessageDistributor/managers/ReduxStateManager.ts new file mode 100644 index 000000000..691d84c15 --- /dev/null +++ b/frontend/app/player/MessageDistributor/managers/ReduxStateManager.ts @@ -0,0 +1,53 @@ +import { applyChange, revertChange } from 'deep-diff'; +import ListWalker from './ListWalker'; +import type { Redux } from '../messages'; + +export default class ReduxStateManager extends ListWalker { + private state: Object = {} + private finalStates: Object[] = [] + + moveWasUpdated(time, index) { + super.moveApply( + time, + this.onIncrement, + this.onDecrement, + ) + } + + onIncrement = (item) => { + this.processRedux(item, true); + } + + onDecrement = (item) => { + this.processRedux(item, false); + } + + private processRedux(action, forward) { + if (forward) { + if (!!action.state) { + this.finalStates.push(this.state); + this.state = JSON.parse(JSON.stringify(action.state)); // Deep clone :( + } else { + action.diff.forEach(d => { + try { + applyChange(this.state, d); + } catch (e) { + //console.warn("Deepdiff error") + } + }); + } + } else { + if (!!action.state) { + this.state = this.finalStates.pop(); + } else { + action.diff.forEach(d => { + try { + revertChange(this.state, 1, d); // bad lib :( TODO: write our own diff + } catch (e) { + //console.warn("Deepdiff error") + } + }); + } + } + } +} \ No newline at end of file diff --git a/frontend/app/player/MessageDistributor/managers/WindowNodeCounter.js b/frontend/app/player/MessageDistributor/managers/WindowNodeCounter.js deleted file mode 100644 index 245ac9084..000000000 --- a/frontend/app/player/MessageDistributor/managers/WindowNodeCounter.js +++ /dev/null @@ -1,96 +0,0 @@ -// @flow - -class NodeCounter { - _id: number; - _parent: NodeCount | null = null; - _count: number = 0; - _children: Array = []; - - - bubbleCount(count: number) { - this._count += count; - if (this._parent != null) { - this._parent.bubbleCount(count); - } - } - - newChild(): NodeCounter { - const child = new NodeCounter(); - this._children.push(child); - child._parent = this; - this.bubbleCount(1); - return child - } - - removeChild(child: NodeCounter) { - this._children = this._children.filter(c => c != child); - this.bubbleCount(-(child._count + 1)); - } - - removeNode() { - this._parent.removeChild(this); - this._parent = null; - } - - moveNode(newParent: NodeCounter) { - this.removeNode(); - newParent._children.push(this); - this._parent = newParent; - newParent.bubbleCount(this._count + 1); - } - - get count() { - return this._count; - } -} - - -export default class WindowNodeCounter { - _root: NodeCounter = new NodeCounter(); - _nodes: Array = [ this._root ]; - - - reset() { - this._root = new NodeCounter(); - this._nodes = [ this._root ]; - } - - addNode(id: number, parentID: number) { - if (!this._nodes[ parentID ]) { - //TODO: iframe case - //console.error(`Wrong! Node with id ${ parentID } (parentId) not found.`); - return; - } - if (!!this._nodes[ id ]) { - //console.error(`Wrong! Node with id ${ id } already exists.`); - return; - } - this._nodes[id] = this._nodes[ parentID ].newChild(); - } - - removeNode(id: number) { - if (!this._nodes[ id ]) { - // Might be text node - //console.error(`Wrong! Node with id ${ id } not found.`); - return; - } - this._nodes[ id ].removeNode(); - } - - moveNode(id: number, parentId: number) { - if (!this._nodes[ id ]) { - console.error(`Wrong! Node with id ${ id } not found.`); - return; - } - if (!this._nodes[ parentId ]) { - console.error(`Wrong! Node with id ${ parentId } (parentId) not found.`); - return; - } - this._nodes[ id ].moveNode(this._nodes[ parentId ]); - } - - get count() { - return this._root.count; - } - -} \ No newline at end of file diff --git a/frontend/app/player/MessageDistributor/managers/WindowNodeCounter.ts b/frontend/app/player/MessageDistributor/managers/WindowNodeCounter.ts new file mode 100644 index 000000000..7f827f6bd --- /dev/null +++ b/frontend/app/player/MessageDistributor/managers/WindowNodeCounter.ts @@ -0,0 +1,96 @@ + +class NodeCounter { + private parent: NodeCounter | null = null + private _count: number = 0 + private children: Array = [] + + + bubbleCount(count: number) { + this._count += count + if (this.parent != null) { + this.parent.bubbleCount(count) + } + } + + newChild(): NodeCounter { + const child = new NodeCounter() + this.children.push(child) + child.parent = this + this.bubbleCount(1) + return child + } + + removeChild(child: NodeCounter) { + this.children = this.children.filter(c => c != child) + this.bubbleCount(-(child._count + 1)) + } + + removeNode() { + if (this.parent) { + this.parent.removeChild(this) + } + this.parent = null + } + + moveNode(newParent: NodeCounter) { + this.removeNode() + newParent.children.push(this) + this.parent = newParent + newParent.bubbleCount(this._count + 1) + } + + get count() { + return this._count + } +} + + +export default class WindowNodeCounter { + private root: NodeCounter = new NodeCounter() + private nodes: Array = [ this.root ] + + + reset() { + this.root = new NodeCounter() + this.nodes = [ this.root ] + } + + addNode(id: number, parentID: number) { + if (!this.nodes[ parentID ]) { + //TODO: iframe case + //console.error(`Wrong! Node with id ${ parentID } (parentId) not found.`); + return + } + if (!!this.nodes[ id ]) { + //console.error(`Wrong! Node with id ${ id } already exists.`); + return + } + this.nodes[id] = this.nodes[ parentID ].newChild() + } + + removeNode(id: number) { + if (!this.nodes[ id ]) { + // Might be text node + //console.error(`Wrong! Node with id ${ id } not found.`); + return + } + this.nodes[ id ].removeNode() + } + + moveNode(id: number, parentId: number) { + if (!this.nodes[ id ]) { + console.error(`Wrong! Node with id ${ id } not found.`) + return + } + if (!this.nodes[ parentId ]) { + console.error(`Wrong! Node with id ${ parentId } (parentId) not found.`) + return + } + this.nodes[ id ].moveNode(this.nodes[ parentId ]) + } + + get count() { + return this.root.count + } + +} \ No newline at end of file