import hoistedNoteService from "../services/hoisted_note.js"; import treeService from "../services/tree.js"; import utils from "../services/utils.js"; import contextMenuWidget from "../services/context_menu.js"; import treeKeyBindingService from "../services/tree_keybindings.js"; import treeCache from "../services/tree_cache.js"; import treeBuilder from "../services/tree_builder.js"; import TreeContextMenu from "../services/tree_context_menu.js"; import treeChangesService from "../services/branches.js"; import ws from "../services/ws.js"; import TabAwareWidget from "./tab_aware_widget.js"; import server from "../services/server.js"; import noteCreateService from "../services/note_create.js"; import toastService from "../services/toast.js"; const TPL = `
`; export default class NoteTreeWidget extends TabAwareWidget { constructor(appContext, parent) { super(appContext, parent); window.glob.cutIntoNote = () => this.cutIntoNoteListener(); this.tree = null; } doRender() { this.$widget = $(TPL); this.$widget.on("click", ".unhoist-button", hoistedNoteService.unhoist); this.$widget.on("click", ".refresh-search-button", () => this.refreshSearch()); // fancytree doesn't support middle click so this is a way to support it this.$widget.on('mousedown', '.fancytree-title', e => { if (e.which === 2) { const node = $.ui.fancytree.getNode(e); const notePath = treeService.getNotePath(node); if (notePath) { const tabContext = this.tabManager.openEmptyTab(); tabContext.setNote(notePath); } e.stopPropagation(); e.preventDefault(); } }); this.initialized = treeBuilder.prepareTree().then(treeData => this.initFancyTree(treeData)); return this.$widget; } async initFancyTree(treeData) { utils.assertArguments(treeData); this.$widget.fancytree({ autoScroll: true, keyboard: false, // we takover keyboard handling in the hotkeys plugin extensions: ["hotkeys", "dnd5", "clones"], source: treeData, scrollParent: this.$widget, minExpandLevel: 2, // root can't be collapsed click: (event, data) => { const targetType = data.targetType; const node = data.node; if (targetType === 'title' || targetType === 'icon') { if (event.shiftKey) { node.setSelected(!node.isSelected()); node.setFocus(true); } else if (event.ctrlKey) { const tabContext = this.tabManager.openEmptyTab(); const notePath = treeService.getNotePath(node); tabContext.setNote(notePath); this.tabManager.activateTab(tabContext.tabId); } else { node.setActive(); this.clearSelectedNodes(); } return false; } }, activate: async (event, data) => { // click event won't propagate so let's close context menu manually contextMenuWidget.hideContextMenu(); const notePath = treeService.getNotePath(data.node); const activeTabContext = this.tabManager.getActiveTabContext(); await activeTabContext.setNote(notePath); }, expand: (event, data) => this.setExpandedToServer(data.node.data.branchId, true), collapse: (event, data) => this.setExpandedToServer(data.node.data.branchId, false), hotkeys: { keydown: await treeKeyBindingService.getKeyboardBindings(this) }, dnd5: { autoExpandMS: 600, dragStart: (node, data) => { // don't allow dragging root node if (node.data.noteId === hoistedNoteService.getHoistedNoteId() || node.getParent().data.noteType === 'search') { return false; } node.setSelected(true); const notes = this.getSelectedNodes().map(node => { return { noteId: node.data.noteId, title: node.title }}); data.dataTransfer.setData("text", JSON.stringify(notes)); // This function MUST be defined to enable dragging for the tree. // Return false to cancel dragging of node. return true; }, dragEnter: (node, data) => true, // allow drop on any node dragOver: (node, data) => true, dragDrop: async (node, data) => { if ((data.hitMode === 'over' && node.data.noteType === 'search') || (['after', 'before'].includes(data.hitMode) && (node.data.noteId === hoistedNoteService.getHoistedNoteId() || node.getParent().data.noteType === 'search'))) { const infoDialog = await import('../dialogs/info.js'); await infoDialog.info("Dropping notes into this location is not allowed."); return; } const dataTransfer = data.dataTransfer; if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) { const files = [...dataTransfer.files]; // chrome has issue that dataTransfer.files empties after async operation const importService = await import('../services/import.js'); importService.uploadFiles(node.data.noteId, files, { safeImport: true, shrinkImages: true, textImportedAsText: true, codeImportedAsCode: true, explodeArchives: true }); } else { // This function MUST be defined to enable dropping of items on the tree. // data.hitMode is 'before', 'after', or 'over'. const selectedBranchIds = this.getSelectedNodes().map(node => node.data.branchId); if (data.hitMode === "before") { treeChangesService.moveBeforeBranch(selectedBranchIds, node.data.branchId); } else if (data.hitMode === "after") { treeChangesService.moveAfterBranch(selectedBranchIds, node.data.branchId); } else if (data.hitMode === "over") { treeChangesService.moveToParentNote(selectedBranchIds, node.data.noteId); } else { throw new Error("Unknown hitMode=" + data.hitMode); } } } }, lazyLoad: function(event, data) { const noteId = data.node.data.noteId; data.result = treeCache.getNote(noteId).then(note => treeBuilder.prepareBranch(note)); }, clones: { highlightActiveClones: true }, enhanceTitle: async function (event, data) { const node = data.node; const $span = $(node.span); if (node.data.noteId !== 'root' && node.data.noteId === hoistedNoteService.getHoistedNoteId() && $span.find('.unhoist-button').length === 0) { const unhoistButton = $('  (unhoist)'); $span.append(unhoistButton); } const note = await treeCache.getNote(node.data.noteId); if (note.type === 'search' && $span.find('.refresh-search-button').length === 0) { const refreshSearchButton = $('  '); $span.append(refreshSearchButton); } }, // this is done to automatically lazy load all expanded search notes after tree load loadChildren: (event, data) => { data.node.visit((subNode) => { // Load all lazy/unloaded child nodes // (which will trigger `loadChildren` recursively) if (subNode.isUndefined() && subNode.isExpanded()) { subNode.load(); } }); } }); this.$widget.on('contextmenu', '.fancytree-node', e => { const node = $.ui.fancytree.getNode(e); contextMenuWidget.initContextMenu(e, new TreeContextMenu(this, node)); return false; // blocks default browser right click menu }); this.tree = $.ui.fancytree.getTree(this.$widget); } /** @return {FancytreeNode[]} */ getSelectedNodes(stopOnParents = false) { return this.tree.getSelectedNodes(stopOnParents); } /** @return {FancytreeNode[]} */ getSelectedOrActiveNodes(node = null) { let notes = this.getSelectedNodes(true); if (notes.length === 0) { notes.push(node ? node : this.getActiveNode()); } return notes; } collapseTree(node = null) { if (!node) { const hoistedNoteId = hoistedNoteService.getHoistedNoteId(); node = this.getNodesByNoteId(hoistedNoteId)[0]; } node.setExpanded(false); node.visit(node => node.setExpanded(false)); } /** * @return {FancytreeNode|null} */ getActiveNode() { return this.tree.getActiveNode(); } /** * focused & not active node can happen during multiselection where the node is selected but not activated * (its content is not displayed in the detail) * @return {FancytreeNode|null} */ getFocusedNode() { return this.tree.getFocusNode(); } clearSelectedNodes() { for (const selectedNode of this.getSelectedNodes()) { selectedNode.setSelected(false); } } async scrollToActiveNoteListener() { const activeContext = this.tabManager.getActiveTabContext(); if (activeContext && activeContext.notePath) { this.tree.setFocus(); const node = await this.expandToNote(activeContext.notePath); await node.makeVisible({scrollIntoView: true}); node.setFocus(); } } /** @return {FancytreeNode} */ async getNodeFromPath(notePath, expand = false, expandOpts = {}) { utils.assertArguments(notePath); const hoistedNoteId = hoistedNoteService.getHoistedNoteId(); /** @var {FancytreeNode} */ let parentNode = null; const runPath = await treeService.getRunPath(notePath); if (!runPath) { console.error("Could not find run path for notePath:", notePath); return; } for (const childNoteId of runPath) { if (childNoteId === hoistedNoteId) { // there must be exactly one node with given hoistedNoteId parentNode = this.getNodesByNoteId(childNoteId)[0]; continue; } // we expand only after hoisted note since before then nodes are not actually present in the tree if (parentNode) { if (!parentNode.isLoaded()) { await parentNode.load(); } if (expand) { await parentNode.setExpanded(true, expandOpts); } await this.updateNode(parentNode); let foundChildNode = this.findChildNode(parentNode, childNoteId); if (!foundChildNode) { // note might be recently created so we'll force reload and try again await parentNode.load(true); foundChildNode = this.findChildNode(parentNode, childNoteId); if (!foundChildNode) { ws.logError(`Can't find node for child node of noteId=${childNoteId} for parent of noteId=${parentNode.data.noteId} and hoistedNoteId=${hoistedNoteId}, requested path is ${notePath}`); return; } } parentNode = foundChildNode; } } return parentNode; } /** @return {FancytreeNode} */ findChildNode(parentNode, childNoteId) { let foundChildNode = null; for (const childNode of parentNode.getChildren()) { if (childNode.data.noteId === childNoteId) { foundChildNode = childNode; break; } } return foundChildNode; } /** @return {FancytreeNode} */ async expandToNote(notePath, expandOpts) { return this.getNodeFromPath(notePath, true, expandOpts); } async updateNode(node) { const note = treeCache.getNoteFromCache(node.data.noteId); const branch = treeCache.getBranch(node.data.branchId); node.data.isProtected = note.isProtected; node.data.noteType = note.type; node.folder = note.type === 'search' || note.getChildNoteIds().length > 0; node.icon = await treeBuilder.getIcon(note); node.extraClasses = await treeBuilder.getExtraClasses(note); node.title = (branch.prefix ? (branch.prefix + " - ") : "") + note.title; node.renderTitle(); } /** @return {FancytreeNode[]} */ getNodesByBranchId(branchId) { utils.assertArguments(branchId); const branch = treeCache.getBranch(branchId); return this.getNodesByNoteId(branch.noteId).filter(node => node.data.branchId === branchId); } /** @return {FancytreeNode[]} */ getNodesByNoteId(noteId) { utils.assertArguments(noteId); const list = this.tree.getNodesByRef(noteId); return list ? list : []; // if no nodes with this refKey are found, fancy tree returns null } async reload(notes) { await this.tree.reload(notes); } createTopLevelNoteListener() { noteCreateService.createNewTopLevelNote(); } collapseTreeListener() { this.collapseTree(); } isEnabled() { return this.tabContext && this.tabContext.isActive(); } async refresh() { this.toggle(this.isEnabled()); const oldActiveNode = this.getActiveNode(); if (oldActiveNode) { oldActiveNode.setActive(false); oldActiveNode.setFocus(false); } if (this.tabContext && this.tabContext.notePath) { const newActiveNode = await this.getNodeFromPath(this.tabContext.notePath); if (newActiveNode) { if (!newActiveNode.isVisible()) { await this.expandToNote(this.tabContext.notePath); } newActiveNode.setActive(true, {noEvents: true}); newActiveNode.makeVisible({scrollIntoView: true}); } } } async refreshSearch() { const activeNode = this.getActiveNode(); activeNode.load(true); activeNode.setExpanded(true); toastService.showMessage("Saved search note refreshed."); } async entitiesReloadedListener({loadResults}) { const noteIdsToUpdate = new Set(); const noteIdsToReload = new Set(); for (const attr of loadResults.getAttributes()) { if (attr.type === 'label' && ['iconClass', 'cssClass'].includes(attr.name)) { if (attr.isInheritable) { noteIdsToReload.add(attr.noteId); } else { noteIdsToUpdate.add(attr.noteId); } } else if (attr.type === 'relation' && attr.name === 'template') { // missing handling of things inherited from template noteIdsToReload.add(attr.noteId); } } for (const branch of loadResults.getBranches()) { for (const node of this.getNodesByBranchId(branch.branchId)) { if (branch.isDeleted) { if (node.isActive()) { const newActiveNode = node.getNextSibling() || node.getPrevSibling() || node.getParent(); if (newActiveNode) { newActiveNode.setActive(true, {noEvents: true, noFocus: true}); } } node.remove(); noteIdsToUpdate.add(branch.parentNoteId); } else { noteIdsToUpdate.add(branch.noteId); } } if (!branch.isDeleted) { for (const parentNode of this.getNodesByNoteId(branch.parentNoteId)) { if (!parentNode.isLoaded()) { continue; } const found = parentNode.getChildren().find(child => child.data.noteId === branch.noteId); if (!found) { noteIdsToReload.add(branch.parentNoteId); } } } } const activeNode = this.getActiveNode(); const activeNotePath = activeNode ? treeService.getNotePath(activeNode) : null; for (const noteId of loadResults.getNoteIds()) { noteIdsToUpdate.add(noteId); } for (const noteId of noteIdsToReload) { for (const node of this.getNodesByNoteId(noteId)) { await node.load(true); await this.updateNode(node); } } for (const noteId of noteIdsToUpdate) { for (const node of this.getNodesByNoteId(noteId)) { await this.updateNode(node); } } for (const {parentNoteId} of loadResults.getNoteReorderings()) { for (const node of this.getNodesByNoteId(parentNoteId)) { if (node.isLoaded()) { node.sortChildren((nodeA, nodeB) => { const branchA = treeCache.branches[nodeA.data.branchId]; const branchB = treeCache.branches[nodeB.data.branchId]; if (!branchA || !branchB) { return 0; } return branchA.notePosition - branchB.notePosition; }); } } } if (activeNotePath) { this.tabManager.getActiveTabContext().setNote(activeNotePath); } } async createNoteAfterListener() { const node = this.getActiveNode(); const parentNoteId = node.data.parentNoteId; const isProtected = await treeService.getParentProtectedStatus(node); if (node.data.noteId === 'root' || node.data.noteId === hoistedNoteService.getHoistedNoteId()) { return; } await noteCreateService.createNote(parentNoteId, { target: 'after', targetBranchId: node.data.branchId, isProtected: isProtected, saveSelection: true }); } async createNoteIntoListener() { const node = this.getActiveNode(); if (node) { await noteCreateService.createNote(node.data.noteId, { isProtected: node.data.isProtected, saveSelection: false }); } } async cutIntoNoteListener() { const node = this.getActiveNode(); if (node) { await noteCreateService.createNote(node.data.noteId, { isProtected: node.data.isProtected, saveSelection: true }); } } async setExpandedToServer(branchId, isExpanded) { utils.assertArguments(branchId); const expandedNum = isExpanded ? 1 : 0; await server.put('branches/' + branchId + '/expanded/' + expandedNum); } async reloadTreeFromCache() { const notes = await treeBuilder.prepareTree(); const activeNode = this.getActiveNode(); const activeNotePath = activeNode !== null ? treeService.getNotePath(activeNode) : null; await this.reload(notes); if (activeNotePath) { const node = await this.getNodeFromPath(activeNotePath, true); await node.setActive(true, {noEvents: true}); } } hoistedNoteChangedListener() { this.reloadTreeFromCache(); } treeCacheReloadedListener() { this.reloadTreeFromCache(); } async cloneNotesToCommand() { const selectedOrActiveNoteIds = this.getSelectedOrActiveNodes().map(node => node.data.noteId); this.triggerCommand('cloneNoteIdsTo', {noteIds: selectedOrActiveNoteIds}); } async moveNotesToCommand() { const selectedOrActiveBranchIds = this.getSelectedOrActiveNodes().map(node => node.data.branchId); this.triggerCommand('moveBranchIdsTo', {branchIds: selectedOrActiveBranchIds}); } }