From 4e8e9eae265a8a9ad2369ac72ba19d8c13da8e0b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 12 Oct 2020 18:31:55 +0200 Subject: [PATCH] first round of fixes --- src/domain/navigation/Navigation.js | 6 +++--- src/domain/navigation/URLRouter.js | 11 ++++++++--- src/domain/session/RoomGridViewModel.js | 2 +- src/domain/session/SessionViewModel.js | 18 +++++++++--------- .../session/leftpanel/LeftPanelViewModel.js | 14 ++++++-------- .../session/leftpanel/RoomTileViewModel.js | 4 +--- src/main.js | 6 +++--- src/observable/map/MappedMap.js | 4 ++++ src/ui/web/session/leftpanel/LeftPanelView.js | 1 - 9 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/domain/navigation/Navigation.js b/src/domain/navigation/Navigation.js index 70c79a01..40ce1806 100644 --- a/src/domain/navigation/Navigation.js +++ b/src/domain/navigation/Navigation.js @@ -32,11 +32,11 @@ export class Navigation { this._path = path; // clear values not in the new path in reverse order of path for (let i = oldPath.segments.length - 1; i >= 0; i -= 1) { - const segment = oldPath[i]; + const segment = oldPath.segments[i]; if (!this._path.get(segment.type)) { const observable = this._observables.get(segment.type); if (observable) { - observable.set(segment.type, undefined); + observable.set(undefined); } } } @@ -45,7 +45,7 @@ export class Navigation { const observable = this._observables.get(segment.type); if (observable) { if (!segmentValueEqual(segment?.value, observable.get())) { - observable.set(segment.type, segment.value); + observable.set(segment.value); } } } diff --git a/src/domain/navigation/URLRouter.js b/src/domain/navigation/URLRouter.js index 6d7dc385..e27c0fef 100644 --- a/src/domain/navigation/URLRouter.js +++ b/src/domain/navigation/URLRouter.js @@ -41,7 +41,7 @@ export class URLRouter { applyUrl(url) { const urlPath = this._history.urlAsPath(url) - const navPath = this._navigation.pathFrom(this._parseUrlPath(urlPath)); + const navPath = this._navigation.pathFrom(this._parseUrlPath(urlPath, this._navigation.path)); this._navigation.applyPath(navPath); return this._history.pathAsUrl(this._stringifyPath(navPath)); } @@ -76,12 +76,17 @@ export class URLRouter { } disableGridUrl() { - + let path = this._navigation.path.until("session"); + const room = this._navigation.path.get("room"); + if (room) { + path = path.with(room); + } + return this.urlForPath(path); } enableGridUrl() { let path = this._navigation.path.until("session"); - const room = this._navigation.get("room"); + const room = this._navigation.path.get("room"); if (room) { path = path.with(this._navigation.segment("rooms", [room.value])); path = path.with(room); diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js index 67cbf04c..d8a1f90a 100644 --- a/src/domain/session/RoomGridViewModel.js +++ b/src/domain/session/RoomGridViewModel.js @@ -47,7 +47,7 @@ export class RoomGridViewModel extends ViewModel { this._selectedIndex = focusTileIndex.get(); } - const focusedRoom = this.navigation.get("room"); + const focusedRoom = this.navigation.observe("room"); this.track(focusedRoom.subscribe(roomId => { if (roomId) { this._openRoom(roomId); diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 2ad2bb73..5269b62b 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -99,15 +99,20 @@ export class SessionViewModel extends ViewModel { const currentRoomId = this.navigation.path.get("room"); if (roomIds) { if (!this._gridViewModel) { + const vm = this._currentRoomViewModel; + const index = roomIds.indexOf(vm.id); + const shouldTransfer = vm && index !== -1; + if (shouldTransfer) { + roomIds = roomIds.slice(); + roomIds[index] = undefined; + } this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({ width: 3, height: 2, createRoomViewModel: roomId => this._createRoomViewModel(roomId), roomIds: roomIds }))); - const vm = this._currentRoomViewModel; - const index = roomIds.indexOf(vm.id); - if (vm && index !== -1) { + if (shouldTransfer) { this.untrack(vm); this._gridViewModel.transferRoomViewModel(index, vm); this._currentRoomViewModel = null; @@ -128,7 +133,7 @@ export class SessionViewModel extends ViewModel { } _createRoomViewModel(roomId) { - const room = this._session.rooms.get(roomId); + const room = this._sessionContainer.session.rooms.get(roomId); if (!room) { return null; } @@ -149,11 +154,6 @@ export class SessionViewModel extends ViewModel { const roomVM = this._createRoomViewModel(roomId); if (roomVM) { this._currentRoomViewModel = this.track(roomVM); - } - if (this._gridViewModel) { - this._gridViewModel.setRoomViewModel(roomVM); - } else { - this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel); this.emitChange("currentRoom"); } } diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js index 6dfce6e1..15c30218 100644 --- a/src/domain/session/leftpanel/LeftPanelViewModel.js +++ b/src/domain/session/leftpanel/LeftPanelViewModel.js @@ -23,16 +23,14 @@ import {ApplyMap} from "../../../observable/map/ApplyMap.js"; export class LeftPanelViewModel extends ViewModel { constructor(options) { super(options); - const {rooms, openRoom, gridEnabled} = options; - this._gridEnabled = gridEnabled; - const roomTileVMs = rooms.mapValues((room, emitChange) => { + const {rooms} = options; + this._roomTileViewModels = rooms.mapValues((room, emitChange) => { return new RoomTileViewModel(this.childOptions({ room, - emitChange, - emitOpen: openRoom + emitChange })); }); - this._roomListFilterMap = new ApplyMap(roomTileVMs); + this._roomListFilterMap = new ApplyMap(this._roomTileViewModels); this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b)); this._currentTileVM = null; this._setupNavigation(); @@ -58,14 +56,14 @@ export class LeftPanelViewModel extends ViewModel { this._currentTileVM?.close(); this._currentTileVM = null; if (roomId) { - this._currentTileVM = this._roomListFilterMap.get(roomId); + this._currentTileVM = this._roomTileViewModels.get(roomId); this._currentTileVM?.open(); } } toggleGrid() { let url; - if (this._gridEnabled) { + if (this.gridEnabled) { url = this.urlRouter.disableGridUrl(); } else { url = this.urlRouter.enableGridUrl(); diff --git a/src/domain/session/leftpanel/RoomTileViewModel.js b/src/domain/session/leftpanel/RoomTileViewModel.js index 9b4260ae..a1e43d9f 100644 --- a/src/domain/session/leftpanel/RoomTileViewModel.js +++ b/src/domain/session/leftpanel/RoomTileViewModel.js @@ -25,9 +25,8 @@ function isSortedAsUnread(vm) { export class RoomTileViewModel extends ViewModel { constructor(options) { super(options); - const {room, emitOpen} = options; + const {room} = options; this._room = room; - this._emitOpen = emitOpen; this._isOpen = false; this._wasUnreadWhenOpening = false; this._hidden = false; @@ -57,7 +56,6 @@ export class RoomTileViewModel extends ViewModel { this._isOpen = true; this._wasUnreadWhenOpening = this._room.isUnread; this.emitChange("isOpen"); - this._emitOpen(this._room, this); } } diff --git a/src/main.js b/src/main.js index 6b302c34..4daeccf7 100644 --- a/src/main.js +++ b/src/main.js @@ -22,8 +22,7 @@ import {SessionContainer} from "./matrix/SessionContainer.js"; import {StorageFactory} from "./matrix/storage/idb/StorageFactory.js"; import {SessionInfoStorage} from "./matrix/sessioninfo/localstorage/SessionInfoStorage.js"; import {RootViewModel} from "./domain/RootViewModel.js"; -import {createNavigation} from "./domain/navigation/index.js"; -import {URLRouter} from "./domain/navigation/URLRouter.js"; +import {createNavigation, createRouter} from "./domain/navigation/index.js"; import {RootView} from "./ui/web/RootView.js"; import {Clock} from "./ui/web/dom/Clock.js"; import {History} from "./ui/web/dom/History.js"; @@ -119,8 +118,9 @@ export async function main(container, paths, legacyExtras) { } const navigation = createNavigation(); - const urlRouter = new URLRouter(new History(), navigation); + const urlRouter = createRouter({navigation, history: new History()}); urlRouter.attach(); + console.log("starting with navigation path", navigation.path); const vm = new RootViewModel({ createSessionContainer: () => { diff --git a/src/observable/map/MappedMap.js b/src/observable/map/MappedMap.js index 28b7d1e8..48a1d1ad 100644 --- a/src/observable/map/MappedMap.js +++ b/src/observable/map/MappedMap.js @@ -84,4 +84,8 @@ export class MappedMap extends BaseObservableMap { get size() { return this._mappedValues.size; } + + get(key) { + return this._mappedValues.get(key); + } } diff --git a/src/ui/web/session/leftpanel/LeftPanelView.js b/src/ui/web/session/leftpanel/LeftPanelView.js index 3eeaaada..efd97703 100644 --- a/src/ui/web/session/leftpanel/LeftPanelView.js +++ b/src/ui/web/session/leftpanel/LeftPanelView.js @@ -83,7 +83,6 @@ export class LeftPanelView extends TemplateView { { className: "RoomList", list: vm.roomList, - onItemClick: (roomTile, event) => roomTile.clicked(event) }, roomTileVM => new RoomTileView(roomTileVM) ))