refactoring of layout finished

src/public/javascripts/services/app_context.js

@@ -17,7 +17,6 @@ class AppContext extends Component {
         super(null);
 
         this.layout = layout;
-        this.tabManager = new TabManager(this);
         this.executors = [];
     }
 
@@ -45,16 +44,22 @@ class AppContext extends Component {
             this.triggerEvent(eventName);
         });
 
+        this.tabManager = new TabManager();
+
         this.executors = [
             this.tabManager,
-            new DialogCommandExecutor(this),
+            new DialogCommandExecutor(),
-            new Entrypoints(this)
+            new Entrypoints()
         ];
 
-        this.children = [ rootWidget, ...this.executors ];
+        this.child(rootWidget);
+
+        for (const executor of this.executors) {
+            this.child(executor);
+        }
 
         if (utils.isElectron()) {
-            this.children.push(new ZoomService(this));
+            this.child(new ZoomService());
 
             import("./spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
         }

src/public/javascripts/services/entrypoints.js

@@ -8,8 +8,8 @@ import appContext from "./app_context.js";
 import Component from "../widgets/component.js";
 
 export default class Entrypoints extends Component {
-    constructor(parent) {
+    constructor() {
-        super(parent);
+        super();
 
         // hot keys are active also inside inputs and content editables
         jQuery.hotkeys.options.filterInputAcceptingElements = false;

src/public/javascripts/services/tab_context.js

@@ -9,15 +9,12 @@ import hoistedNoteService from "./hoisted_note.js";
 
 class TabContext extends Component {
     /**
-     * @param {Component} parent
      * @param {string|null} tabId
      */
-    constructor(parent, tabId = null) {
+    constructor(tabId = null) {
-        super(parent);
+        super();
 
         this.tabId = tabId || utils.randomString(4);
-
-        this.triggerEvent('newTabOpened', {tabId: this.tabId});
     }
 
     async setNote(inputNotePath) {

src/public/javascripts/services/tab_manager.js

@@ -6,11 +6,10 @@ import treeCache from "./tree_cache.js";
 import treeService from "./tree.js";
 import utils from "./utils.js";
 import TabContext from "./tab_context.js";
-import appContext from "./app_context.js";
 
 export default class TabManager extends Component {
-    constructor(parent) {
+    constructor() {
-        super(parent);
+        super();
 
         this.activeTabId = null;
 
@@ -183,8 +182,11 @@ export default class TabManager extends Component {
     }
 
     openEmptyTab(tabId) {
-        const tabContext = new TabContext(appContext, tabId);
+        const tabContext = new TabContext(tabId);
-        this.children.push(tabContext);
+        this.child(tabContext);
+
+        this.triggerEvent('newTabOpened', {tabId: this.tabId})
+
         return tabContext;
     }
 

src/public/javascripts/services/zoom.js

@@ -5,8 +5,8 @@ const MIN_ZOOM = 0.5;
 const MAX_ZOOM = 2.0;
 
 export default class ZoomService extends Component {
-    constructor(parent) {
+    constructor() {
-        super(parent);
+        super();
 
         this.setZoomFactor(options.getFloat('zoomFactor'));
     }

src/public/javascripts/widgets/component.js

@@ -13,6 +13,15 @@ export default class Component {
     setParent(parent) {
         /** @type Component */
         this.parent = parent;
+        return this;
+    }
+
+    child(component) {
+        component.setParent(this);
+
+        this.children.push(component);
+
+        return this;
     }
 
     async handleEvent(name, data) {

src/public/javascripts/widgets/flex_container.js

@@ -4,12 +4,12 @@ export default class FlexContainer extends BasicWidget {
     constructor(direction) {
         super();
 
-        if (!direction) {
+        if (!direction || !['row', 'column'].includes(direction)) {
-            throw new Error(`Direction argument missing, use either 'row' or 'column'`);
+            throw new Error(`Direction argument given as "${direction}", use either 'row' or 'column'`);
         }
 
         this.attrs = {
-            style: 'display: flex;'
+            style: `display: flex; flex-direction: ${direction};`,
         };
 
         this.children = [];
@@ -25,13 +25,8 @@ export default class FlexContainer extends BasicWidget {
         return this;
     }
 
-    rowFlex() {
+    collapsible() {
-        this.css('flex-direction', 'row');
+        this.css('min-height', '0');
-        return this;
-    }
-
-    columnFlex() {
-        this.css('flex-direction', 'column');
         return this;
     }
 
@@ -40,10 +35,6 @@ export default class FlexContainer extends BasicWidget {
         return this;
     }
 
-    child(widgetFactory) {
-        this.children = widgetFactory(this);
-    }
-
     doRender() {
         this.$widget = $(`<div>`);
 
@@ -55,8 +46,6 @@ export default class FlexContainer extends BasicWidget {
             this.$widget.attr(key, this.attrs[key]);
         }
 
-        if (!this.children)
-
         for (const widget of this.children) {
             this.$widget.append(widget.render());
         }

src/public/javascripts/widgets/layout.js

@@ -28,43 +28,42 @@ import SidePaneToggles from "./side_pane_toggles.js";
 
 export default class Layout {
     getRootWidget(appContext) {
-        const root = new FlexContainer(appContext)
+        const root = new FlexContainer('column').id('root-widget')
             .child(new FlexContainer('row')
                 .child(new GlobalMenuWidget())
                 .child(new TabRowWidget())
                 .child(new TitleBarButtonsWidget()))
             .child(new StandardTopWidget())
-            new FlexContainer({ 'flex-direction': 'row', 'min-height': '0' }, [
+            .child(new FlexContainer('row').collapsible()
-                new SidePaneContainer('left', [
+                .child(new SidePaneContainer('left')
-                    new GlobalButtonsWidget(),
+                    .child(new GlobalButtonsWidget())
-                    new SearchBoxWidget(),
+                    .child(new SearchBoxWidget())
-                    new SearchResultsWidget(),
+                    .child(new SearchResultsWidget())
-                    new NoteTreeWidget()
+                    .child(new NoteTreeWidget())
-                ]),
+                )
-                new FlexContainer({ id: 'center-pane', 'flex-direction': 'column' }, [
+                .child(new FlexContainer('column').id('center-pane')
-                    new FlexContainer({ 'flex-direction': 'row' }, [
+                    .child(new FlexContainer('row')
-                        new TabCachingWidget(new NotePathsWidget()),
+                        .child(new TabCachingWidget(() => new NotePathsWidget()))
-                        new NoteTitleWidget(),
+                        .child(new NoteTitleWidget())
-                        new RunScriptButtonsWidget(),
+                        .child(new RunScriptButtonsWidget())
-                        new ProtectedNoteSwitchWidget(),
+                        .child(new ProtectedNoteSwitchWidget())
-                        new NoteTypeWidget(),
+                        .child(new NoteTypeWidget())
-                        new NoteActionsWidget()
+                        .child(new NoteActionsWidget())
-                    ]),
+                    )
-                    new TabCachingWidget(new PromotedAttributesWidget()),
+                    .child(new TabCachingWidget(() => new PromotedAttributesWidget()))
-                    new TabCachingWidget(new NoteDetailWidget())
+                    .child(new TabCachingWidget(() => new NoteDetailWidget()))
-                ]),
+                )
-                new SidePaneContainer('right', [
+                .child(new SidePaneContainer('right')
-                    new NoteInfoWidget(),
+                    .child(new NoteInfoWidget())
-                    new TabCachingWidget(() => new CalendarWidget()),
+                    .child(new TabCachingWidget(() => new CalendarWidget()))
-                    new TabCachingWidget(() => new AttributesWidget()),
+                    .child(new TabCachingWidget(() => new AttributesWidget()))
-                    new TabCachingWidget(() => new LinkMapWidget()),
+                    .child(new TabCachingWidget(() => new LinkMapWidget()))
-                    new TabCachingWidget(() => new NoteRevisionsWidget()),
+                    .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
-                    new TabCachingWidget(() => new SimilarNotesWidget()),
+                    .child(new TabCachingWidget(() => new SimilarNotesWidget()))
-                    new TabCachingWidget(() => new WhatLinksHereWidget())
+                    .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
-                ]),
+                )
-                new SidePaneToggles()
+                .child(new SidePaneToggles())
-            ])
+            );
-        ]);
 
         root.setParent(appContext);
         

src/public/javascripts/widgets/note_detail.js

@@ -43,8 +43,8 @@ const typeWidgetClasses = {
 };
 
 export default class NoteDetailWidget extends TabAwareWidget {
-    constructor(parent) {
+    constructor() {
-        super(parent);
+        super();
 
         this.typeWidgets = {};
 
@@ -107,10 +107,10 @@ export default class NoteDetailWidget extends TabAwareWidget {
         if (!(this.type in this.typeWidgets)) {
             const clazz = typeWidgetClasses[this.type];
 
-            const typeWidget = this.typeWidgets[this.type] = new clazz(this);
+            const typeWidget = this.typeWidgets[this.type] = new clazz();
             typeWidget.spacedUpdate = this.spacedUpdate;
 
-            this.children.push(typeWidget);
+            this.child(typeWidget);
 
             const $renderedWidget = typeWidget.render();
             keyboardActionsService.updateDisplayedShortcuts($renderedWidget);

src/public/javascripts/widgets/note_title.js

@@ -23,8 +23,8 @@ const TPL = `
 </div>`;
 
 export default class NoteTitleWidget extends TabAwareWidget {
-    constructor(parent) {
+    constructor() {
-        super(parent);
+        super();
 
         this.spacedUpdate = new SpacedUpdate(async () => {
             const title = this.$noteTitle.val();

src/public/javascripts/widgets/side_pane_container.js

@@ -2,10 +2,13 @@ import options from "../services/options.js";
 import FlexContainer from "./flex_container.js";
 
 export default class SidePaneContainer extends FlexContainer {
-    constructor(parent, side, widgetFactories) {
+    constructor(side) {
-        super(parent, {id: side + '-pane', 'flex-direction': 'column', 'height': '100%'}, widgetFactories);
+        super('column');
 
         this.side = side;
+
+        this.id(side + '-pane');
+        this.css('height', '100%');
     }
 
     isEnabled() {

src/public/javascripts/widgets/side_pane_toggles.js

@@ -29,8 +29,8 @@ const TPL = `
 `;
 
 export default class SidePaneToggles extends BasicWidget {
-    constructor(parent) {
+    constructor() {
-        super(parent);
+        super();
 
         this.paneVisible = {};
     }

src/public/javascripts/widgets/type_widgets/type_widget.js

@@ -1,13 +1,6 @@
 import TabAwareWidget from "../tab_aware_widget.js";
 
 export default class TypeWidget extends TabAwareWidget {
-    constructor(parent) {
-        super(parent);
-
-        /** @var {NoteDetailWidget} */
-        this.noteDetailWidget = parent;
-    }
-
     // for overriding
     static getType() {}
 
@@ -18,7 +11,7 @@ export default class TypeWidget extends TabAwareWidget {
 
     async refresh() {
         const thisWidgetType = this.constructor.getType();
-        const noteWidgetType = await this.noteDetailWidget.getWidgetType();
+        const noteWidgetType = await this.parent.getWidgetType();
 
         if (thisWidgetType !== noteWidgetType) {
             this.toggle(false);