From e177dcac478f42adf1ef75b27767b79914404c44 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Thu, 24 Sep 2020 18:52:38 -0500 Subject: [PATCH] fix: simplify component logic --- .../directives/views/componentView.ts | 12 +++-- .../javascripts/services/themeManager.ts | 51 +++++++++---------- .../views/abstract/pure_view_ctrl.ts | 6 +++ .../javascripts/views/editor/editor_view.ts | 35 +++---------- .../javascripts/views/tags/tags_view.ts | 23 +++++---- .../templates/directives/component-view.pug | 2 +- .../services/autolock_service.d.ts | 1 + .../javascripts/services/themeManager.d.ts | 6 +-- .../views/abstract/pure_view_ctrl.d.ts | 1 + package-lock.json | 4 +- package.json | 2 +- 11 files changed, 64 insertions(+), 79 deletions(-) diff --git a/app/assets/javascripts/directives/views/componentView.ts b/app/assets/javascripts/directives/views/componentView.ts index 4f15778b2..5b593cee7 100644 --- a/app/assets/javascripts/directives/views/componentView.ts +++ b/app/assets/javascripts/directives/views/componentView.ts @@ -55,17 +55,18 @@ class ComponentViewCtrl implements ComponentViewScope { } $onDestroy() { + this.application.componentManager.onComponentIframeDestroyed(this.component.uuid); + if(this.liveComponent) { + this.liveComponent.deinit(); + } else { + this.application.componentManager.removeTemporaryTemplateComponent(this.templateComponent); + } this.cleanUpOn(); (this.cleanUpOn as any) = undefined; this.unregisterComponentHandler(); (this.unregisterComponentHandler as any) = undefined; this.unregisterDesktopObserver(); (this.unregisterDesktopObserver as any) = undefined; - if(this.liveComponent) { - this.liveComponent.deinit(); - } else { - this.application.componentManager.removeTemporaryTemplateComponent(this.templateComponent); - } (this.templateComponent as any) = undefined; (this.liveComponent as any) = undefined; (this.application as any) = undefined; @@ -91,6 +92,7 @@ class ComponentViewCtrl implements ComponentViewScope { return this.templateComponent || this.liveComponent?.item; } + /** @template */ public onIframeInit() { /** Perform in timeout required so that dynamic iframe id is set (based on ctrl values) */ this.$timeout(() => { diff --git a/app/assets/javascripts/services/themeManager.ts b/app/assets/javascripts/services/themeManager.ts index 487b4f7bb..f285ff143 100644 --- a/app/assets/javascripts/services/themeManager.ts +++ b/app/assets/javascripts/services/themeManager.ts @@ -6,7 +6,7 @@ import { SNTheme, ComponentArea, removeFromArray, - ApplicationEvent + ApplicationEvent, ContentType } from 'snjs'; import { AppStateEvent } from '@/ui_models/app_state'; @@ -17,24 +17,16 @@ export class ThemeManager extends ApplicationService { private activeThemes: string[] = [] private unsubState?: () => void private unregisterDesktop!: () => void - private unregisterComponent!: () => void + private unregisterStream!: () => void - /** @override */ - async onAppLaunch() { - super.onAppLaunch(); - this.unsubState = this.webApplication.getAppState().addObserver( - async (eventName) => { - if (eventName === AppStateEvent.DesktopExtsReady) { - this.activateCachedThemes(); - } - } - ); - } - - onAppEvent(event: ApplicationEvent) { + async onAppEvent(event: ApplicationEvent) { super.onAppEvent(event); if (event === ApplicationEvent.SignedOut) { this.deactivateAllThemes(); + } else if (event === ApplicationEvent.StorageReady) { + if (!this.webApplication.getDesktopService().isDesktop) { + await this.activateCachedThemes(); + } } } @@ -47,9 +39,9 @@ export class ThemeManager extends ApplicationService { (this.unsubState as any) = undefined; this.activeThemes.length = 0; this.unregisterDesktop(); - this.unregisterComponent(); + this.unregisterStream(); (this.unregisterDesktop as any) = undefined; - (this.unregisterComponent as any) = undefined; + (this.unregisterStream as any) = undefined; super.deinit(); } @@ -57,9 +49,13 @@ export class ThemeManager extends ApplicationService { async onAppStart() { super.onAppStart(); this.registerObservers(); - if (!this.webApplication.getDesktopService().isDesktop) { - this.activateCachedThemes(); - } + this.unsubState = this.webApplication.getAppState().addObserver( + async (eventName) => { + if (eventName === AppStateEvent.DesktopExtsReady) { + this.activateCachedThemes(); + } + } + ); } private async activateCachedThemes() { @@ -81,17 +77,16 @@ export class ThemeManager extends ApplicationService { } }); - this.unregisterComponent = this.application!.componentManager!.registerHandler({ - identifier: 'themeManager', - areas: [ComponentArea.Themes], - activationHandler: (uuid, component) => { - if (component?.active) { - this.activateTheme(component as SNTheme); + this.unregisterStream = this.application.streamItems(ContentType.Theme, (items) => { + const themes = items as SNTheme[]; + for (const theme of themes) { + if (theme.active) { + this.activateTheme(theme); } else { - this.deactivateTheme(uuid); + this.deactivateTheme(theme.uuid); } } - }); + }) } private deactivateAllThemes() { diff --git a/app/assets/javascripts/views/abstract/pure_view_ctrl.ts b/app/assets/javascripts/views/abstract/pure_view_ctrl.ts index 81734b617..7bab3ee98 100644 --- a/app/assets/javascripts/views/abstract/pure_view_ctrl.ts +++ b/app/assets/javascripts/views/abstract/pure_view_ctrl.ts @@ -124,6 +124,8 @@ export class PureViewCtrl

{ this.onAppFullSync(); } else if (eventName === ApplicationEvent.KeyStatusChanged) { this.onAppKeyChange(); + } else if (eventName === ApplicationEvent.LocalDataLoaded) { + this.onLocalDataLoaded(); } }); } @@ -137,6 +139,10 @@ export class PureViewCtrl

{ await this.resetState(); } + onLocalDataLoaded() { + /** Optional override */ + } + async onAppLaunch() { /** Optional override */ } diff --git a/app/assets/javascripts/views/editor/editor_view.ts b/app/assets/javascripts/views/editor/editor_view.ts index 75c239261..f0f0ee0f6 100644 --- a/app/assets/javascripts/views/editor/editor_view.ts +++ b/app/assets/javascripts/views/editor/editor_view.ts @@ -5,6 +5,7 @@ import angular from 'angular'; import { ApplicationEvent, isPayloadSourceRetrieved, + isPayloadSourceInternalChange, ContentType, ProtectedAction, SNComponent, @@ -209,12 +210,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { }); } - $onDestroy() { - if (this.state.tagsComponent) { - this.application.componentManager!.deregisterComponent(this.state.tagsComponent.uuid); - } - } - /** @override */ getInitialState() { return { @@ -337,7 +332,10 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { this.removeComponentsObserver = this.application.streamItems( ContentType.Component, - async () => { + async (_items, source) => { + if (isPayloadSourceInternalChange(source!)) { + return; + } if (!this.note) return; this.reloadStackComponents(); this.reloadNoteTagsComponent(); @@ -350,25 +348,15 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { const newEditor = this.application.componentManager!.editorForNote(this.note); const currentEditor = this.state.editorComponent; if (currentEditor?.uuid !== newEditor?.uuid) { - const unloading = this.setState({ + await this.setState({ /** Unload current component view so that we create a new one */ editorUnloading: true }); - if (newEditor) { - /** Register this new editor while the editor view is reloading */ - this.application.componentManager!.registerComponent(newEditor.uuid); - } - await unloading; - const reloading = this.setState({ + await this.setState({ /** Reload component view */ editorComponent: newEditor, editorUnloading: false, }); - if (currentEditor) { - /** Deregister the current (previous) editor while the editor view is reloading */ - this.application.componentManager!.deregisterComponent(currentEditor.uuid); - } - await reloading; this.reloadFont(); } this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.Editor); @@ -1066,15 +1054,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { reloadNoteTagsComponent() { const [tagsComponent] = this.application.componentManager!.componentsForArea(ComponentArea.NoteTags); - if (tagsComponent?.uuid !== this.state.tagsComponent?.uuid) { - if (tagsComponent) { - if (tagsComponent.active) { - this.application.componentManager!.registerComponent(tagsComponent.uuid); - } else { - this.application.componentManager!.deregisterComponent(tagsComponent.uuid); - } - } - } this.setState({ tagsComponent: tagsComponent?.active ? tagsComponent : undefined }); diff --git a/app/assets/javascripts/views/tags/tags_view.ts b/app/assets/javascripts/views/tags/tags_view.ts index 69a57f38e..cbde0bbee 100644 --- a/app/assets/javascripts/views/tags/tags_view.ts +++ b/app/assets/javascripts/views/tags/tags_view.ts @@ -46,7 +46,8 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> { private editingOriginalName?: string formData: { tagTitle?: string } = {} titles: Partial> = {} - private removeTagsObserver?: () => void + private removeTagsObserver!: () => void + private removeFoldersObserver!: () => void /* @ngInject */ constructor( @@ -60,7 +61,8 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> { deinit() { this.removeTagsObserver?.(); - this.removeTagsObserver = undefined; + (this.removeTagsObserver as any) = undefined; + (this.removeFoldersObserver as any) = undefined; this.unregisterComponent(); this.unregisterComponent = undefined; super.deinit(); @@ -112,6 +114,13 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> { } beginStreamingItems() { + this.removeFoldersObserver = this.application.streamItems( + [ContentType.Component], + async (_items) => { + this.component = this.application.componentManager + .componentsForArea(ComponentArea.TagsList)[0]; + }); + this.removeTagsObserver = this.application.streamItems( [ContentType.Tag, ContentType.SmartTag], async (items) => { @@ -218,8 +227,8 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> { onPanelResize = ( newWidth: number, - lastLeft: number, - isAtMaxWidth: boolean, + _lastLeft: number, + _isAtMaxWidth: boolean, isCollapsed: boolean ) => { this.application.getPrefsService().setUserPrefValue( @@ -237,12 +246,6 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> { this.unregisterComponent = this.application.componentManager!.registerHandler({ identifier: 'tags', areas: [ComponentArea.TagsList], - activationHandler: (_, component) => { - this.component = component; - }, - contextRequestHandler: () => { - return undefined; - }, actionHandler: (_, action, data) => { if (action === ComponentAction.SelectItem) { if (data.item.content_type === ContentType.Tag) { diff --git a/app/assets/templates/directives/component-view.pug b/app/assets/templates/directives/component-view.pug index 758b9d895..8e81371fd 100644 --- a/app/assets/templates/directives/component-view.pug +++ b/app/assets/templates/directives/component-view.pug @@ -25,7 +25,7 @@ .sk-p | Extensions are in a read-only state. .right - .sk-app-bar-item(ng-click='ctrl.reloadComponent()') + .sk-app-bar-item(ng-click='ctrl.reloadIframe()') .sk-button.info .sk-label Reload .sk-app-bar-item diff --git a/dist/@types/app/assets/javascripts/services/autolock_service.d.ts b/dist/@types/app/assets/javascripts/services/autolock_service.d.ts index 4ac99fcae..43a26367d 100644 --- a/dist/@types/app/assets/javascripts/services/autolock_service.d.ts +++ b/dist/@types/app/assets/javascripts/services/autolock_service.d.ts @@ -11,6 +11,7 @@ export declare class AutolockService extends ApplicationService { private lockApplication; setAutoLockInterval(interval: number): Promise; getAutoLockInterval(): Promise; + deleteAutolockPreference(): Promise; /** * Verify document is in focus every so often as visibilitychange event is * not triggered on a typical window blur event but rather on tab changes. diff --git a/dist/@types/app/assets/javascripts/services/themeManager.d.ts b/dist/@types/app/assets/javascripts/services/themeManager.d.ts index 6cbe19433..8faccbf8a 100644 --- a/dist/@types/app/assets/javascripts/services/themeManager.d.ts +++ b/dist/@types/app/assets/javascripts/services/themeManager.d.ts @@ -4,10 +4,8 @@ export declare class ThemeManager extends ApplicationService { private activeThemes; private unsubState?; private unregisterDesktop; - private unregisterComponent; - /** @override */ - onAppLaunch(): Promise; - onAppEvent(event: ApplicationEvent): void; + private unregisterStream; + onAppEvent(event: ApplicationEvent): Promise; get webApplication(): WebApplication; deinit(): void; /** @override */ diff --git a/dist/@types/app/assets/javascripts/views/abstract/pure_view_ctrl.d.ts b/dist/@types/app/assets/javascripts/views/abstract/pure_view_ctrl.d.ts index 937a04176..053bdd8d5 100644 --- a/dist/@types/app/assets/javascripts/views/abstract/pure_view_ctrl.d.ts +++ b/dist/@types/app/assets/javascripts/views/abstract/pure_view_ctrl.d.ts @@ -36,6 +36,7 @@ export declare class PureViewCtrl

{ onAppEvent(eventName: ApplicationEvent): void; /** @override */ onAppStart(): Promise; + onLocalDataLoaded(): void; onAppLaunch(): Promise; onAppKeyChange(): Promise; onAppIncrementalSync(): void; diff --git a/package-lock.json b/package-lock.json index 9af80f3cd..b781a4d14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10956,8 +10956,8 @@ "from": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad" }, "snjs": { - "version": "github:standardnotes/snjs#7abfb3eb46db1409dbcb152b3d9d14ee0453c4a6", - "from": "github:standardnotes/snjs#7abfb3eb46db1409dbcb152b3d9d14ee0453c4a6" + "version": "github:standardnotes/snjs#30520edbd80564d584c4b00a09b552d89d1c9e26", + "from": "github:standardnotes/snjs#30520edbd80564d584c4b00a09b552d89d1c9e26" }, "sockjs": { "version": "0.3.20", diff --git a/package.json b/package.json index 26b9dac49..9929dc93a 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,6 @@ }, "dependencies": { "sncrypto": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad", - "snjs": "github:standardnotes/snjs#7abfb3eb46db1409dbcb152b3d9d14ee0453c4a6" + "snjs": "github:standardnotes/snjs#30520edbd80564d584c4b00a09b552d89d1c9e26" } }