first round of fixes

This commit is contained in:
Bruno Windels 2020-10-12 18:31:55 +02:00
parent 14d2dcbc60
commit 4e8e9eae26
9 changed files with 35 additions and 31 deletions

View file

@ -32,11 +32,11 @@ export class Navigation {
this._path = path; this._path = path;
// clear values not in the new path in reverse order of path // clear values not in the new path in reverse order of path
for (let i = oldPath.segments.length - 1; i >= 0; i -= 1) { 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)) { if (!this._path.get(segment.type)) {
const observable = this._observables.get(segment.type); const observable = this._observables.get(segment.type);
if (observable) { if (observable) {
observable.set(segment.type, undefined); observable.set(undefined);
} }
} }
} }
@ -45,7 +45,7 @@ export class Navigation {
const observable = this._observables.get(segment.type); const observable = this._observables.get(segment.type);
if (observable) { if (observable) {
if (!segmentValueEqual(segment?.value, observable.get())) { if (!segmentValueEqual(segment?.value, observable.get())) {
observable.set(segment.type, segment.value); observable.set(segment.value);
} }
} }
} }

View file

@ -41,7 +41,7 @@ export class URLRouter {
applyUrl(url) { applyUrl(url) {
const urlPath = this._history.urlAsPath(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); this._navigation.applyPath(navPath);
return this._history.pathAsUrl(this._stringifyPath(navPath)); return this._history.pathAsUrl(this._stringifyPath(navPath));
} }
@ -76,12 +76,17 @@ export class URLRouter {
} }
disableGridUrl() { 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() { enableGridUrl() {
let path = this._navigation.path.until("session"); let path = this._navigation.path.until("session");
const room = this._navigation.get("room"); const room = this._navigation.path.get("room");
if (room) { if (room) {
path = path.with(this._navigation.segment("rooms", [room.value])); path = path.with(this._navigation.segment("rooms", [room.value]));
path = path.with(room); path = path.with(room);

View file

@ -47,7 +47,7 @@ export class RoomGridViewModel extends ViewModel {
this._selectedIndex = focusTileIndex.get(); this._selectedIndex = focusTileIndex.get();
} }
const focusedRoom = this.navigation.get("room"); const focusedRoom = this.navigation.observe("room");
this.track(focusedRoom.subscribe(roomId => { this.track(focusedRoom.subscribe(roomId => {
if (roomId) { if (roomId) {
this._openRoom(roomId); this._openRoom(roomId);

View file

@ -99,15 +99,20 @@ export class SessionViewModel extends ViewModel {
const currentRoomId = this.navigation.path.get("room"); const currentRoomId = this.navigation.path.get("room");
if (roomIds) { if (roomIds) {
if (!this._gridViewModel) { 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({ this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({
width: 3, width: 3,
height: 2, height: 2,
createRoomViewModel: roomId => this._createRoomViewModel(roomId), createRoomViewModel: roomId => this._createRoomViewModel(roomId),
roomIds: roomIds roomIds: roomIds
}))); })));
const vm = this._currentRoomViewModel; if (shouldTransfer) {
const index = roomIds.indexOf(vm.id);
if (vm && index !== -1) {
this.untrack(vm); this.untrack(vm);
this._gridViewModel.transferRoomViewModel(index, vm); this._gridViewModel.transferRoomViewModel(index, vm);
this._currentRoomViewModel = null; this._currentRoomViewModel = null;
@ -128,7 +133,7 @@ export class SessionViewModel extends ViewModel {
} }
_createRoomViewModel(roomId) { _createRoomViewModel(roomId) {
const room = this._session.rooms.get(roomId); const room = this._sessionContainer.session.rooms.get(roomId);
if (!room) { if (!room) {
return null; return null;
} }
@ -149,11 +154,6 @@ export class SessionViewModel extends ViewModel {
const roomVM = this._createRoomViewModel(roomId); const roomVM = this._createRoomViewModel(roomId);
if (roomVM) { if (roomVM) {
this._currentRoomViewModel = this.track(roomVM); this._currentRoomViewModel = this.track(roomVM);
}
if (this._gridViewModel) {
this._gridViewModel.setRoomViewModel(roomVM);
} else {
this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
this.emitChange("currentRoom"); this.emitChange("currentRoom");
} }
} }

View file

@ -23,16 +23,14 @@ import {ApplyMap} from "../../../observable/map/ApplyMap.js";
export class LeftPanelViewModel extends ViewModel { export class LeftPanelViewModel extends ViewModel {
constructor(options) { constructor(options) {
super(options); super(options);
const {rooms, openRoom, gridEnabled} = options; const {rooms} = options;
this._gridEnabled = gridEnabled; this._roomTileViewModels = rooms.mapValues((room, emitChange) => {
const roomTileVMs = rooms.mapValues((room, emitChange) => {
return new RoomTileViewModel(this.childOptions({ return new RoomTileViewModel(this.childOptions({
room, room,
emitChange, emitChange
emitOpen: openRoom
})); }));
}); });
this._roomListFilterMap = new ApplyMap(roomTileVMs); this._roomListFilterMap = new ApplyMap(this._roomTileViewModels);
this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b)); this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b));
this._currentTileVM = null; this._currentTileVM = null;
this._setupNavigation(); this._setupNavigation();
@ -58,14 +56,14 @@ export class LeftPanelViewModel extends ViewModel {
this._currentTileVM?.close(); this._currentTileVM?.close();
this._currentTileVM = null; this._currentTileVM = null;
if (roomId) { if (roomId) {
this._currentTileVM = this._roomListFilterMap.get(roomId); this._currentTileVM = this._roomTileViewModels.get(roomId);
this._currentTileVM?.open(); this._currentTileVM?.open();
} }
} }
toggleGrid() { toggleGrid() {
let url; let url;
if (this._gridEnabled) { if (this.gridEnabled) {
url = this.urlRouter.disableGridUrl(); url = this.urlRouter.disableGridUrl();
} else { } else {
url = this.urlRouter.enableGridUrl(); url = this.urlRouter.enableGridUrl();

View file

@ -25,9 +25,8 @@ function isSortedAsUnread(vm) {
export class RoomTileViewModel extends ViewModel { export class RoomTileViewModel extends ViewModel {
constructor(options) { constructor(options) {
super(options); super(options);
const {room, emitOpen} = options; const {room} = options;
this._room = room; this._room = room;
this._emitOpen = emitOpen;
this._isOpen = false; this._isOpen = false;
this._wasUnreadWhenOpening = false; this._wasUnreadWhenOpening = false;
this._hidden = false; this._hidden = false;
@ -57,7 +56,6 @@ export class RoomTileViewModel extends ViewModel {
this._isOpen = true; this._isOpen = true;
this._wasUnreadWhenOpening = this._room.isUnread; this._wasUnreadWhenOpening = this._room.isUnread;
this.emitChange("isOpen"); this.emitChange("isOpen");
this._emitOpen(this._room, this);
} }
} }

View file

@ -22,8 +22,7 @@ import {SessionContainer} from "./matrix/SessionContainer.js";
import {StorageFactory} from "./matrix/storage/idb/StorageFactory.js"; import {StorageFactory} from "./matrix/storage/idb/StorageFactory.js";
import {SessionInfoStorage} from "./matrix/sessioninfo/localstorage/SessionInfoStorage.js"; import {SessionInfoStorage} from "./matrix/sessioninfo/localstorage/SessionInfoStorage.js";
import {RootViewModel} from "./domain/RootViewModel.js"; import {RootViewModel} from "./domain/RootViewModel.js";
import {createNavigation} from "./domain/navigation/index.js"; import {createNavigation, createRouter} from "./domain/navigation/index.js";
import {URLRouter} from "./domain/navigation/URLRouter.js";
import {RootView} from "./ui/web/RootView.js"; import {RootView} from "./ui/web/RootView.js";
import {Clock} from "./ui/web/dom/Clock.js"; import {Clock} from "./ui/web/dom/Clock.js";
import {History} from "./ui/web/dom/History.js"; import {History} from "./ui/web/dom/History.js";
@ -119,8 +118,9 @@ export async function main(container, paths, legacyExtras) {
} }
const navigation = createNavigation(); const navigation = createNavigation();
const urlRouter = new URLRouter(new History(), navigation); const urlRouter = createRouter({navigation, history: new History()});
urlRouter.attach(); urlRouter.attach();
console.log("starting with navigation path", navigation.path);
const vm = new RootViewModel({ const vm = new RootViewModel({
createSessionContainer: () => { createSessionContainer: () => {

View file

@ -84,4 +84,8 @@ export class MappedMap extends BaseObservableMap {
get size() { get size() {
return this._mappedValues.size; return this._mappedValues.size;
} }
get(key) {
return this._mappedValues.get(key);
}
} }

View file

@ -83,7 +83,6 @@ export class LeftPanelView extends TemplateView {
{ {
className: "RoomList", className: "RoomList",
list: vm.roomList, list: vm.roomList,
onItemClick: (roomTile, event) => roomTile.clicked(event)
}, },
roomTileVM => new RoomTileView(roomTileVM) roomTileVM => new RoomTileView(roomTileVM)
)) ))