diff --git a/app/assets/javascripts/services/themeManager.ts b/app/assets/javascripts/services/themeManager.ts index 1af5a15f0..d223beb01 100644 --- a/app/assets/javascripts/services/themeManager.ts +++ b/app/assets/javascripts/services/themeManager.ts @@ -7,7 +7,7 @@ import { SNTheme, ComponentArea, removeFromArray, - ApplicationEvent, + ApplicationEvent } from 'snjs'; import { AppStateEvent } from '@/ui_models/app_state'; @@ -85,11 +85,11 @@ export class ThemeManager extends ApplicationService { this.unregisterComponent = this.application!.componentManager!.registerHandler({ identifier: 'themeManager', areas: [ComponentArea.Themes], - activationHandler: (component) => { - if (component.active) { + activationHandler: (uuid, component) => { + if (component?.active) { this.activateTheme(component as SNTheme); } else { - this.deactivateTheme(component.uuid); + this.deactivateTheme(uuid); } } }); diff --git a/app/assets/javascripts/views/editor/editor_view.ts b/app/assets/javascripts/views/editor/editor_view.ts index 03199d0d5..65156a4cc 100644 --- a/app/assets/javascripts/views/editor/editor_view.ts +++ b/app/assets/javascripts/views/editor/editor_view.ts @@ -59,8 +59,8 @@ type NoteStatus = { type EditorState = { stackComponents: SNComponent[] - activeEditorComponent?: SNComponent - activeTagsComponent?: SNComponent + editorComponent?: SNComponent + tagsComponent?: SNComponent saveError?: any noteStatus?: NoteStatus tagsAsStrings?: string @@ -74,9 +74,11 @@ type EditorState = { showSessionHistory: boolean altKeyDown: boolean spellcheck: boolean - /** Setting to false then true will allow the current editor component-view to be destroyed - * then re-initialized. Used when changing between component editors. */ - editorComponentUnloading: boolean + /** + * Setting to false then true will allow the current editor component-view to be destroyed + * then re-initialized. Used when changing between component editors. + */ + editorUnloading: boolean /** Setting to true then false will allow the main content textarea to be destroyed * then re-initialized. Used when reloading spellcheck status. */ textareaUnloading: boolean @@ -112,7 +114,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { private removeTrashKeyObserver?: any private removeDeleteKeyObserver?: any private removeTabObserver?: any - private removeComponentGroupObserver: any private removeTagsObserver!: () => void private removeComponentsObserver!: () => void @@ -148,8 +149,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { this.removeComponentsObserver(); (this.removeTagsObserver as any) = undefined; (this.removeComponentsObserver as any) = undefined; - this.removeComponentGroupObserver(); - this.removeComponentGroupObserver = undefined; this.removeAltKeyObserver(); this.removeAltKeyObserver = undefined; this.removeTrashKeyObserver(); @@ -204,25 +203,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { } } }); - this.removeComponentGroupObserver = this.componentGroup.addChangeObserver( - async () => { - const currentEditor = this.activeEditorComponent; - const newEditor = this.componentGroup.activeComponentForArea(ComponentArea.Editor); - if (currentEditor && newEditor && currentEditor.uuid !== newEditor.uuid) { - /** Unload current component view so that we create a new one, - * then change the active editor */ - await this.setState({ - editorComponentUnloading: true - }); - } - this.setState({ - activeEditorComponent: newEditor, - activeTagsComponent: this.componentGroup.activeComponentForArea(ComponentArea.NoteTags), - /** Stop unloading, if we were already unloading */ - editorComponentUnloading: false - }); - } - ) } /** @override */ @@ -239,7 +219,7 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { showSessionHistory: false, altKeyDown: false, noteStatus: undefined, - editorComponentUnloading: false, + editorUnloading: false, textareaUnloading: false, mutable: { tagsString: '' @@ -288,18 +268,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { } } - get activeEditorComponent() { - return this.state.activeEditorComponent; - } - - get activeTagsComponent() { - return this.state.activeTagsComponent; - } - - get componentGroup() { - return this.application.componentGroup; - } - async handleEditorNoteChange() { this.cancelPendingSetStatus(); await this.setState({ @@ -313,37 +281,15 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { const note = this.editor.note; this.editorValues.title = note.title; this.editorValues.text = note.text; - await this.reloadComponentEditorState(); + this.reloadEditor(); this.reloadTagsString(); this.reloadPreferences(); - this.reloadComponentContext(); + this.reloadStackComponents(); if (note.safeText().length === 0) { this.focusTitle(); } } - async reloadComponentEditorState(): Promise<{ editor?: SNComponent, changed: boolean }> { - const editor = this.application.componentManager!.editorForNote(this.note); - if (!editor) { - let changed: boolean; - if (this.activeEditorComponent) { - await this.componentGroup.deactivateComponentForArea(ComponentArea.Editor); - changed = true; - } else { - changed = false; - } - return { editor, changed }; - } - - if (editor.uuid === this.activeEditorComponent?.uuid) { - /** Same editor, no change */ - return { editor, changed: false }; - } - - await this.componentGroup.activateComponent(editor); - return { editor, changed: true }; - } - /** * Because note.locked accesses note.content.appData, * we do not want to expose the template to direct access to note.locked, @@ -383,30 +329,34 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { ContentType.Component, async (items) => { if (!this.note) return; - this.setState({ - stackComponents: sortAlphabetically( - this.application.componentManager!.componentsForArea(ComponentArea.EditorStack) - .filter(component => component.active) - ) - }); - this.reloadComponentContext(); + this.reloadStackComponents(); this.reloadNoteTagsComponent(); - /** Observe editor changes to see if the current note should update its editor */ - const components = items as SNComponent[]; - const editors = components.filter((component) => { - return component.isEditor(); - }); - if (editors.length) { - /** Find the most recent editor for note */ - const { editor, changed } = await this.reloadComponentEditorState(); - if (!editor && changed) { - this.reloadFont(); - } - } + this.reloadEditor(); } ); } + private async reloadEditor() { + const newEditor = this.application.componentManager!.editorForNote(this.note); + const currentEditor = this.state.editorComponent; + if (currentEditor?.uuid !== newEditor?.uuid) { + await this.setState({ + editorComponent: newEditor, + /** Unload current component view so that we create a new one */ + editorUnloading: true + }); + if (newEditor && !newEditor.active) { + await this.application.componentManager?.activateComponent(newEditor.uuid); + } + await this.setState({ + /** Reload component view */ + editorUnloading: false + }); + this.reloadFont(); + this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.Editor); + } + } + setMenuState(menu: string, state: boolean) { this.setState({ [menu]: state @@ -443,14 +393,13 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { noteMutator.prefersPlainEditor = true; }) } - if (this.activeEditorComponent?.isExplicitlyEnabledForItem(this.note.uuid)) { - await this.disassociateComponentWithCurrentNote(this.activeEditorComponent); + if (this.state.editorComponent?.isExplicitlyEnabledForItem(this.note.uuid)) { + await this.disassociateComponentWithCurrentNote(this.state.editorComponent); } - await this.reloadComponentEditorState(); this.reloadFont(); } else if (component.area === ComponentArea.Editor) { - const currentEditor = this.activeEditorComponent; + const currentEditor = this.state.editorComponent; if (currentEditor && component !== currentEditor) { await this.disassociateComponentWithCurrentNote(currentEditor); } @@ -462,7 +411,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { }) } await this.associateComponentWithCurrentNote(component); - await this.reloadComponentEditorState(); } else if (component.area === ComponentArea.EditorStack) { await this.toggleStackComponentForCurrentItem(component); @@ -1048,10 +996,10 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { ComponentArea.Editor ], contextRequestHandler: (componentUuid) => { - const currentEditor = this.activeEditorComponent; + const currentEditor = this.state.editorComponent; if ( componentUuid === currentEditor?.uuid || - componentUuid === this.activeTagsComponent?.uuid || + componentUuid === this.state.tagsComponent?.uuid || Uuids(this.state.stackComponents).includes(componentUuid) ) { return this.note; @@ -1103,20 +1051,25 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { } reloadNoteTagsComponent() { - const components = this.application.componentManager! - .componentsForArea(ComponentArea.NoteTags); - for (const component of components) { - if (component.active) { - this.componentGroup.activateComponent(component); - } else { - this.componentGroup.deactivateComponent(component); - } + const [tagsComponent] = + this.application.componentManager!.componentsForArea(ComponentArea.NoteTags); + if (tagsComponent?.uuid !== this.state.tagsComponent?.uuid) { + this.setState({ + tagsComponent: tagsComponent?.active ? tagsComponent : undefined + }); } + this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.NoteTags); } - reloadComponentContext() { + reloadStackComponents() { + this.setState({ + stackComponents: sortAlphabetically( + this.application.componentManager!.componentsForArea(ComponentArea.EditorStack) + .filter(component => component.active) + ) + }); if (this.note) { - for (const component of this.state.stackComponents!) { + for (const component of this.state.stackComponents) { if (component.active) { this.application.componentManager!.setComponentHidden( component, @@ -1125,9 +1078,7 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { } } } - this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.NoteTags); this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack); - this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.Editor); } @@ -1140,9 +1091,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { if (hidden || !component.active) { this.application.componentManager!.setComponentHidden(component, false); await this.associateComponentWithCurrentNote(component); - if (!component.active) { - this.componentGroup!.activateComponent(component); - } this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack); } else { this.application.componentManager!.setComponentHidden(component, true); diff --git a/app/assets/javascripts/views/footer/footer_view.ts b/app/assets/javascripts/views/footer/footer_view.ts index 543a9a7a7..2d4c1c44f 100644 --- a/app/assets/javascripts/views/footer/footer_view.ts +++ b/app/assets/javascripts/views/footer/footer_view.ts @@ -10,7 +10,8 @@ import { ComponentArea, ComponentAction, topLevelCompare, - CollectionSort + CollectionSort, + ComponentMutator, } from 'snjs'; import template from './footer-view.pug'; import { AppStateEvent, EventSource } from '@/ui_models/app_state'; @@ -20,7 +21,6 @@ import { STRING_CONFIRM_APP_QUIT_DURING_UPGRADE } from '@/strings'; import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl'; -import { ComponentMutator } from '@node_modules/snjs/dist/@types/models'; type DockShortcut = { name: string, @@ -250,13 +250,11 @@ class FooterViewCtrl extends PureViewCtrl { this.unregisterComponent = this.application!.componentManager!.registerHandler({ identifier: 'room-bar', areas: [ComponentArea.Rooms, ComponentArea.Modal], - activationHandler: () => { }, actionHandler: (component, action, data) => { if (action === ComponentAction.SetSize) { /** Do comparison to avoid repetitive calls by arbitrary component */ if (!topLevelCompare(component.getLastSize(), data)) { - this.application!.changeItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; + this.application!.changeItem(component.uuid, (mutator) => { mutator.setLastSize(data); }) } diff --git a/app/assets/javascripts/views/tags/tags_view.ts b/app/assets/javascripts/views/tags/tags_view.ts index 964760136..4c98770d5 100644 --- a/app/assets/javascripts/views/tags/tags_view.ts +++ b/app/assets/javascripts/views/tags/tags_view.ts @@ -8,15 +8,15 @@ import { SNSmartTag, ComponentArea, SNComponent, - WebPrefKey + WebPrefKey, + UuidString, + TagMutator } from 'snjs'; import template from './tags-view.pug'; import { AppStateEvent } from '@/ui_models/app_state'; import { PANEL_NAME_TAGS } from '@/views/constants'; import { STRING_DELETE_TAG } from '@/strings'; import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl'; -import { UuidString } from '@node_modules/snjs/dist/@types/types'; -import { TagMutator } from '@node_modules/snjs/dist/@types/models/app/tag'; import { confirmDialog } from '@/services/alertService'; type NoteCounts = Partial> @@ -239,7 +239,7 @@ class TagsViewCtrl extends PureViewCtrl { this.unregisterComponent = this.application.componentManager!.registerHandler({ identifier: 'tags', areas: [ComponentArea.TagsList], - activationHandler: (component) => { + activationHandler: (_, component) => { this.component = component; }, contextRequestHandler: () => { @@ -321,9 +321,8 @@ class TagsViewCtrl extends PureViewCtrl { ); return; }; - await this.application.changeAndSaveItem(tag.uuid, (mutator) => { - const tagMutator = mutator as TagMutator; - tagMutator.title = newTitle; + await this.application.changeAndSaveItem(tag.uuid, (mutator) => { + mutator.title = newTitle; }); await this.setTagState({ editingTag: undefined @@ -347,9 +346,8 @@ class TagsViewCtrl extends PureViewCtrl { return; }; const insertedTag = await this.application.insertItem(newTag); - const changedTag = await this.application.changeItem(insertedTag.uuid, (m) => { - const mutator = m as TagMutator; - mutator.title = newTitle + const changedTag = await this.application.changeItem(insertedTag.uuid, (m) => { + m.title = newTitle; }); await this.setTagState({ templateTag: undefined,