gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

split window WIP

Browse Source
This commit is contained in:
zadam 2021-05-20 23:13:34 +02:00
parent a3847842cb
commit 1a13132a69
9 changed files with 186 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/public/app/layouts/desktop_layout.js
View File

@ -182,46 +182,44 @@ export default class DesktopLayout {
.child(new TitleBarButtonsWidget())
.css('height', '36px')
)
.child(new TabCachingWidget(() =>
new PaneContainer(() =>
new FlexContainer('column')
.css("flex-grow", "1")
.child(new FlexContainer('row').class('title-row')
.css('align-items: center;')
.cssBlock('.title-row > * { margin: 5px; }')
.overflowing()
.child(new NoteIconWidget())
.child(new NoteTitleWidget())
.child(new NotePathsWidget().hideInZenMode())
.child(new NoteTypeWidget().hideInZenMode())
.child(new NoteActionsWidget().hideInZenMode())
.child(new ButtonWidget()
.icon("bx-window-open bx-rotate-90")
.title("Create new pane")
.command("openNewPane"))
)
.child(
new CollapsibleSectionContainer()
.child(new SearchDefinitionWidget())
.child(new NotePropertiesWidget())
.child(new FilePropertiesWidget())
.child(new ImagePropertiesWidget())
.child(new PromotedAttributesWidget())
.child(new OwnedAttributeListWidget())
.child(new InheritedAttributesWidget())
)
.child(new NoteUpdateStatusWidget())
.child(
new ScrollingContainer()
.child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget())
.child(new SearchResultWidget())
.child(new SqlResultWidget())
)
.child(new SimilarNotesWidget())
.child(...this.customWidgets.get('center-pane'))
.child(new PaneContainer(() =>
new FlexContainer('column')
.css("flex-grow", "1")
.child(new FlexContainer('row').class('title-row')
.css('align-items: center;')
.cssBlock('.title-row > * { margin: 5px; }')
.overflowing()
.child(new NoteIconWidget())
.child(new NoteTitleWidget())
.child(new NotePathsWidget().hideInZenMode())
.child(new NoteTypeWidget().hideInZenMode())
.child(new NoteActionsWidget().hideInZenMode())
.child(new ButtonWidget()
.icon("bx-window-open bx-rotate-90")
.title("Create new pane")
.command("openNewPane"))
)
.child(
new CollapsibleSectionContainer()
.child(new SearchDefinitionWidget())
.child(new NotePropertiesWidget())
.child(new FilePropertiesWidget())
.child(new ImagePropertiesWidget())
.child(new PromotedAttributesWidget())
.child(new OwnedAttributeListWidget())
.child(new InheritedAttributesWidget())
)
.child(new NoteUpdateStatusWidget())
.child(
new ScrollingContainer()
.child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget())
.child(new SearchResultWidget())
.child(new SqlResultWidget())
)
.child(new SimilarNotesWidget())
.child(...this.customWidgets.get('center-pane'))
)
)
);

18
src/public/app/services/tab_context.js
View File

@ -11,12 +11,12 @@ class TabContext extends Component {
/**
* @param {string|null} tabId
*/
constructor(tabId = null, hoistedNoteId = 'root') {
constructor(tabId = null, hoistedNoteId = 'root', parentTabId = null) {
super();
this.tabId = tabId || utils.randomString(4);
this.hoistedNoteId = hoistedNoteId;
this.parentTabId = null;
this.parentTabId = parentTabId;
}
setEmpty() {
@ -60,6 +60,19 @@ class TabContext extends Component {
}
}
getAllSubTabContexts() {
return appContext.tabManager.tabContexts.filter(tc => tc.tabId === this.tabId || tc.parentTabId === this.tabId);
}
getMainTabContext() {
if (this.parentTabId) {
return appContext.tabManager.getTabContextById(this.parentTabId);
}
else {
return this;
}
}
saveToRecentNotes(resolvedNotePath) {
setTimeout(async () => {
// we include the note into recent list only if the user stayed on the note at least 5 seconds
@ -135,6 +148,7 @@ class TabContext extends Component {
return {
tabId: this.tabId,
parentTabId: this.parentTabId,
notePath: this.notePath,
hoistedNoteId: this.hoistedNoteId,
active: this.isActive()

61
src/public/app/services/tab_manager.js
View File

@ -36,6 +36,11 @@ export default class TabManager extends Component {
return this.children;
}
/** @type {TabContext[]} */
get mainTabContexts() {
return this.tabContexts.filter(tc => !tc.parentTabId)
}
async loadTabs() {
const tabsToOpen = appContext.isMainWindow
? (options.getJson('openTabs') || [])
@ -97,7 +102,7 @@ export default class TabManager extends Component {
await this.tabsUpdate.allowUpdateWithoutChange(async () => {
for (const tab of filteredTabs) {
await this.openTabWithNote(tab.notePath, tab.active, tab.tabId, tab.hoistedNoteId);
await this.openTabWithNote(tab.notePath, tab.active, tab.tabId, tab.hoistedNoteId, tab.parentTabId);
}
});
}
@ -138,12 +143,20 @@ export default class TabManager extends Component {
/** @returns {TabContext} */
getTabContextById(tabId) {
return this.tabContexts.find(tc => tc.tabId === tabId);
const tabContext = this.tabContexts.find(tc => tc.tabId === tabId);
if (!tabContext) {
throw new Error(`Cannot find tabContext id='${tabId}'`);
}
return tabContext;
}
/** @returns {TabContext} */
getActiveTabContext() {
return this.getTabContextById(this.activeTabId);
return this.activeTabId
? this.getTabContextById(this.activeTabId)
: null;
}
/** @returns {string|null} */
@ -188,8 +201,8 @@ export default class TabManager extends Component {
await tabContext.setEmpty();
}
async openEmptyTab(tabId, hoistedNoteId) {
const tabContext = new TabContext(tabId, hoistedNoteId);
async openEmptyTab(tabId, hoistedNoteId, parentTabId = null) {
const tabContext = new TabContext(tabId, hoistedNoteId, parentTabId);
this.child(tabContext);
await this.triggerEvent('newTabOpened', {tabContext});
@ -215,8 +228,8 @@ export default class TabManager extends Component {
return this.openTabWithNote(notePath, false, null, hoistedNoteId);
}
async openTabWithNote(notePath, activate, tabId, hoistedNoteId) {
const tabContext = await this.openEmptyTab(tabId, hoistedNoteId);
async openTabWithNote(notePath, activate, tabId, hoistedNoteId, parentTabId = null) {
const tabContext = await this.openEmptyTab(tabId, hoistedNoteId, parentTabId);
if (notePath) {
await tabContext.setNote(notePath, !activate); // if activate is false then send normal noteSwitched event
@ -267,24 +280,30 @@ export default class TabManager extends Component {
}
async removeTab(tabId) {
const tabContextToRemove = this.getTabContextById(tabId);
let mainTabContextToRemove = this.getTabContextById(tabId);
if (!tabContextToRemove) {
if (!mainTabContextToRemove) {
return;
}
if (mainTabContextToRemove.parentTabId) {
mainTabContextToRemove = this.getTabContextById(mainTabContextToRemove.parentTabId);
}
// close dangling autocompletes after closing the tab
$(".aa-input").autocomplete("close");
await this.triggerEvent('beforeTabRemove', {tabId});
const tabIdsToRemove = mainTabContextToRemove.getAllSubTabContexts().map(tc => tc.tabId);
if (this.tabContexts.length <= 1) {
this.openAndActivateEmptyTab();
await this.triggerEvent('beforeTabRemove', { tabIds: tabIdsToRemove });
if (this.mainTabContexts.length <= 1) {
await this.openAndActivateEmptyTab();
}
else if (tabContextToRemove.isActive()) {
const idx = this.tabContexts.findIndex(tc => tc.tabId === tabId);
else if (tabIdsToRemove.includes(this.activeTabId)) {
const idx = this.mainTabContexts.findIndex(tc => tc.tabId === mainTabContextToRemove.tabId);
if (idx === this.tabContexts.length - 1) {
if (idx === this.mainTabContexts.length - 1) {
this.activatePreviousTabCommand();
}
else {
@ -292,9 +311,9 @@ export default class TabManager extends Component {
}
}
this.children = this.children.filter(tc => tc.tabId !== tabId);
this.children = this.children.filter(tc => !tabIdsToRemove.includes(tc.tabId));
this.triggerEvent('tabRemoved', {tabId});
this.triggerEvent('tabRemoved', {tabIds: tabIdsToRemove});
this.tabsUpdate.scheduleUpdate();
}
@ -312,15 +331,15 @@ export default class TabManager extends Component {
}
activateNextTabCommand() {
const oldIdx = this.tabContexts.findIndex(tc => tc.tabId === this.activeTabId);
const newActiveTabId = this.tabContexts[oldIdx === this.tabContexts.length - 1 ? 0 : oldIdx + 1].tabId;
const oldIdx = this.mainTabContexts.findIndex(tc => tc.tabId === this.activeTabId);
const newActiveTabId = this.mainTabContexts[oldIdx === this.tabContexts.length - 1 ? 0 : oldIdx + 1].tabId;
this.activateTab(newActiveTabId);
}
activatePreviousTabCommand() {
const oldIdx = this.tabContexts.findIndex(tc => tc.tabId === this.activeTabId);
const newActiveTabId = this.tabContexts[oldIdx === 0 ? this.tabContexts.length - 1 : oldIdx - 1].tabId;
const oldIdx = this.mainTabContexts.findIndex(tc => tc.tabId === this.activeTabId);
const newActiveTabId = this.mainTabContexts[oldIdx === 0 ? this.tabContexts.length - 1 : oldIdx - 1].tabId;
this.activateTab(newActiveTabId);
}

99
src/public/app/widgets/containers/pane_container.js
View File

@ -1,6 +1,5 @@
import FlexContainer from "./flex_container.js";
import appContext from "../../services/app_context.js";
import TabContext from "../../services/tab_context.js";
export default class PaneContainer extends FlexContainer {
constructor(widgetFactory) {
@ -9,48 +8,90 @@ export default class PaneContainer extends FlexContainer {
this.counter = 0;
this.widgetFactory = widgetFactory;
this.widgets = {};
this.child(this.widgetFactory());
this.id('pane-container-widget');
this.class('pane-container-widget');
this.css('flex-grow', '1');
}
doRender() {
super.doRender();
this.$widget.find("div").on("click", () => {
const activeTabContext = appContext.tabManager.getActiveTabContext();
const tabId = activeTabContext.parentTabId || activeTabContext.tabId;
appContext.tabManager.activateTab(tabId);
});
setTabContextEvent({tabContext}) {
/** @var {TabContext} */
this.tabContext = tabContext;
}
async openNewPaneCommand() {
const newWidget = this.widgetFactory();
async newTabOpenedEvent({tabContext}) {
const widget = this.widgetFactory();
const $rendered = newWidget.render();
const $renderedWidget = widget.render();
this.$widget.append($rendered);
const tabContext = new TabContext();
appContext.tabManager.tabContexts.push(tabContext);
appContext.tabManager.child(tabContext);
$rendered.on('click', () => {
$renderedWidget.on('click', () => {
appContext.tabManager.activateTab(tabContext.tabId);
});
tabContext.parentTabId = appContext.tabManager.getActiveTabContext().tabId;
let $parent;
await newWidget.handleEvent('setTabContext', { tabContext });
if (!tabContext.parentTabId) {
$parent = $("<div>")
.attr("data-main-tab-id", tabContext.tabId)
.css("display", "flex")
.css("flex-grow", "1");
this.child(newWidget);
this.$widget.append($parent);
}
else {
$parent = this.$widget.find(`[data-main-tab-id="${tabContext.parentTabId}"]`);
}
tabContext.setEmpty();
$parent.append($renderedWidget);
appContext.tabManager.activateTab(tabContext.tabId);
this.widgets[tabContext.tabId] = widget;
await widget.handleEvent('setTabContext', { tabContext });
this.child(widget);
}
async openNewPaneCommand() {
const tabContext = await appContext.tabManager.openEmptyTab(null, null, appContext.tabManager.getActiveTabContext().tabId);
await appContext.tabManager.activateTab(tabContext.tabId);
await tabContext.setEmpty();
}
/**
* widget.hasBeenAlreadyShown is intended for lazy loading of cached tabs - initial note switches of new tabs
* are not executed, we're waiting for the first tab activation and then we update the tab. After this initial
* activation further note switches are always propagated to the tabs.
*/
handleEventInChildren(name, data) {
if (['tabNoteSwitched', 'tabNoteSwitchedAndActivated'].includes(name)) {
// this event is propagated only to the widgets of a particular tab
const widget = this.widgets[data.tabContext.tabId];
if (widget && (widget.hasBeenAlreadyShown || name === 'tabNoteSwitchedAndActivated')) {
widget.hasBeenAlreadyShown = true;
return widget.handleEvent('tabNoteSwitched', data);
}
else {
return Promise.resolve();
}
}
if (name === 'activeTabChanged') {
const widget = this.widgets[data.tabContext.tabId];
if (widget.hasBeenAlreadyShown) {
return Promise.resolve();
}
else {
widget.hasBeenAlreadyShown = true;
return widget.handleEvent(name, data);
}
} else {
return super.handleEventInChildren(name, data);
}
}
}

4
src/public/app/widgets/note_detail.js
View File

@ -202,8 +202,8 @@ export default class NoteDetailWidget extends TabAwareWidget {
}
}
async beforeTabRemoveEvent({tabId}) {
if (this.isTab(tabId)) {
async beforeTabRemoveEvent({tabIds}) {
if (this.isTab(tabIds)) {
await this.spacedUpdate.updateNowIfNecessary();
}
}

4
src/public/app/widgets/note_title.js
View File

@ -72,8 +72,8 @@ export default class NoteTitleWidget extends TabAwareWidget {
}
}
async beforeTabRemoveEvent({tabId}) {
if (this.isTab(tabId)) {
async beforeTabRemoveEvent({tabIds}) {
if (this.isTab(tabIds)) {
await this.spacedUpdate.updateNowIfNecessary();
}
}

7
src/public/app/widgets/tab_aware_widget.js
View File

@ -3,7 +3,12 @@ import appContext from "../services/app_context.js";
export default class TabAwareWidget extends BasicWidget {
isTab(tabId) {
return this.tabContext && this.tabContext.tabId === tabId;
if (Array.isArray(tabId)) {
return this.tabContext && tabId.includes(this.tabContext.tabId);
}
else {
return this.tabContext && this.tabContext.tabId === tabId;
}
}
isTabOrParent(tabId) {

14
src/public/app/widgets/tab_caching_widget.js
View File

@ -34,14 +34,16 @@ export default class TabCachingWidget extends TabAwareWidget {
this.child(this.widgets[tabId]); // add as child only once it is ready (rendered with tabContext)
}
tabRemovedEvent({tabId}) {
const widget = this.widgets[tabId];
tabRemovedEvent({tabIds}) {
for (const tabId of tabIds) {
const widget = this.widgets[tabId];
if (widget) {
widget.remove();
delete this.widgets[tabId];
if (widget) {
widget.remove();
delete this.widgets[tabId];
this.children = this.children.filter(ch => ch !== widget);
this.children = this.children.filter(ch => ch !== widget);
}
}
}

8
src/public/app/widgets/tab_row.js
View File

@ -445,7 +445,7 @@ export default class TabRowWidget extends BasicWidget {
}
newTabOpenedEvent({tabContext}) {
if (!tabContext.parentId) {
if (!tabContext.parentTabId) {
this.addTab(tabContext.tabId);
}
}
@ -478,8 +478,10 @@ export default class TabRowWidget extends BasicWidget {
return $tab.attr('data-tab-id');
}
tabRemovedEvent({tabId}) {
this.removeTab(tabId);
tabRemovedEvent({tabIds}) {
for (const tabId of tabIds) {
this.removeTab(tabId);
}
}
cleanUpPreviouslyDraggedTabs() {