refactoring of tree handling to recommended fancytree

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.39.0-beta",
+  "version": "0.39.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9390,9 +9390,9 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
     "string-similarity": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-3.0.0.tgz",
-      "integrity": "sha512-7kS7LyTp56OqOI2BDWQNVnLX/rCxIQn+/5M0op1WV6P8Xx6TZNdajpuqQdiJ7Xx+p1C5CsWMvdiBp9ApMhxzEQ=="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-4.0.1.tgz",
+      "integrity": "sha512-v36MJzloekKVvKAsYi6O/qpn2mIuvwEFIT9Gx3yg4spkNjXYsk7yxc37g4ZTyMVIBvt/9PZGxnqEtme8XHK+Mw=="
     },
     "string-width": {
       "version": "1.0.2",

package.json

@@ -69,7 +69,7 @@
     "simple-node-logger": "18.12.23",
     "sqlite": "3.0.3",
     "sqlite3": "4.1.1",
-    "string-similarity": "3.0.0",
+    "string-similarity": "4.0.1",
     "tar-stream": "2.1.0",
     "turndown": "5.0.3",
     "turndown-plugin-gfm": "1.0.2",

src/public/javascripts/dialogs/recent_changes.js

@@ -68,11 +68,16 @@ export async function showDialog() {
                 const note = await treeCache.getNote(change.noteId);
                 const notePath = await treeService.getSomeNotePath(note);
 
+                if (notePath) {
                     $noteLink = await linkService.createNoteLink(notePath, {
                         title: change.title,
                         showNotePath: true
                     });
                 }
+                else {
+                    $noteLink = $("<span>").text(note.title);
+                }
+            }
 
             $changesList.append($('<li>')
                 .append(formattedTime + ' - ')

src/public/javascripts/mobile.js

@@ -37,12 +37,12 @@ $detail.on("click", ".close-detail-button",() => {
 });
 
 async function showTree() {
-    const tree = await treeService.loadTree();
+    const treeData = await treeService.loadTreeData();
 
     $tree.fancytree({
         autoScroll: true,
         extensions: ["dnd5", "clones"],
-        source: tree,
+        source: treeData,
         scrollParent: $tree,
         minExpandLevel: 2, // root can't be collapsed
         click: (event, data) => {

src/public/javascripts/services/clipboard.js

@@ -1,4 +1,4 @@
-import treeUtils from "./tree_utils.js";
+import treeService from "./tree.js";
 import treeChangesService from "./branches.js";
 import cloningService from "./cloning.js";
 import toastService from "./toast.js";
@@ -19,7 +19,7 @@ async function pasteAfter(afterNode) {
     }
 
     if (clipboardMode === 'cut') {
-        const nodes = clipboardNodeKeys.map(nodeKey => treeUtils.getNodeByKey(nodeKey));
+        const nodes = clipboardNodeKeys.map(nodeKey => treeService.getNodeByKey(nodeKey));
 
         await treeChangesService.moveAfterNode(nodes, afterNode);
 
@@ -28,7 +28,7 @@ async function pasteAfter(afterNode) {
     }
     else if (clipboardMode === 'copy') {
         for (const nodeKey of clipboardNodeKeys) {
-            const clipNode = treeUtils.getNodeByKey(nodeKey);
+            const clipNode = treeService.getNodeByKey(nodeKey);
 
             await cloningService.cloneNoteAfter(clipNode.data.noteId, afterNode.data.branchId);
         }
@@ -46,7 +46,7 @@ async function pasteInto(parentNode) {
     }
 
     if (clipboardMode === 'cut') {
-        const nodes = clipboardNodeKeys.map(nodeKey => treeUtils.getNodeByKey(nodeKey));
+        const nodes = clipboardNodeKeys.map(nodeKey => treeService.getNodeByKey(nodeKey));
 
         await treeChangesService.moveToNode(nodes, parentNode);
 
@@ -57,7 +57,7 @@ async function pasteInto(parentNode) {
     }
     else if (clipboardMode === 'copy') {
         for (const nodeKey of clipboardNodeKeys) {
-            const clipNode = treeUtils.getNodeByKey(nodeKey);
+            const clipNode = treeService.getNodeByKey(nodeKey);
 
             await cloningService.cloneNoteTo(clipNode.data.noteId, parentNode.data.noteId);
         }
@@ -92,7 +92,7 @@ function cut(nodes) {
 }
 
 function isClipboardEmpty() {
-    clipboardNodeKeys = clipboardNodeKeys.filter(key => !!treeUtils.getNodeByKey(key));
+    clipboardNodeKeys = clipboardNodeKeys.filter(key => !!treeService.getNodeByKey(key));
 
     return clipboardNodeKeys.length === 0;
 }

src/public/javascripts/services/tree.js

@@ -16,6 +16,8 @@ import TreeContextMenu from "./tree_context_menu.js";
 import bundle from "./bundle.js";
 import keyboardActionService from "./keyboard_actions.js";
 
+let tree;
+
 const $tree = $("#tree");
 const $createTopLevelNoteButton = $("#create-top-level-note-button");
 const $collapseTreeButton = $("#collapse-tree-button");
@@ -30,8 +32,6 @@ const frontendLoaded = new Promise(resolve => { setFrontendAsLoaded = resolve; }
  * @return {FancytreeNode|null}
  */
 function getFocusedNode() {
-    const tree = $tree.fancytree("getTree");
-
     return tree.getFocusNode();
 }
 
@@ -40,7 +40,7 @@ function getFocusedNode() {
  * @return {FancytreeNode|null}
  */
 function getActiveNode() {
-    return $tree.fancytree("getActiveNode");
+    return tree.getActiveNode();
 }
 
 /** @return {FancytreeNode[]} */
@@ -56,7 +56,7 @@ async function getNodesByBranchId(branchId) {
 function getNodesByNoteId(noteId) {
     utils.assertArguments(noteId);
 
-    const list = getTree().getNodesByRef(noteId);
+    const list = tree.getNodesByRef(noteId);
     return list ? list : []; // if no nodes with this refKey are found, fancy tree returns null
 }
 
@@ -309,7 +309,7 @@ async function getSomeNotePath(note) {
         const parents = await cur.getParentNotes();
 
         if (!parents.length) {
-            toastService.throwError(`Can't find parents for note ${cur.noteId}`);
+            console.error(`Can't find parents for note ${cur.noteId}`);
             return;
         }
 
@@ -331,7 +331,7 @@ async function setExpandedToServer(branchId, isExpanded) {
 
 /** @return {FancytreeNode[]} */
 function getSelectedNodes(stopOnParents = false) {
-    return getTree().getSelectedNodes(stopOnParents);
+    return tree.getSelectedNodes(stopOnParents);
 }
 
 /** @return {FancytreeNode[]} */
@@ -429,14 +429,14 @@ async function treeInitialized() {
     setFrontendAsLoaded();
 }
 
-async function initFancyTree(tree) {
-    utils.assertArguments(tree);
+async function initFancyTree(treeData) {
+    utils.assertArguments(treeData);
 
     $tree.fancytree({
         autoScroll: true,
         keyboard: false, // we takover keyboard handling in the hotkeys plugin
         extensions: ["hotkeys", "dnd5", "clones"],
-        source: tree,
+        source: treeData,
         scrollParent: $tree,
         minExpandLevel: 2, // root can't be collapsed
         click: (event, data) => {
@@ -523,19 +523,16 @@ async function initFancyTree(tree) {
 
         return false; // blocks default browser right click menu
     });
-}
 
-/** @return {Fancytree} */
-function getTree() {
-    return $tree.fancytree('getTree');
+    tree = $.ui.fancytree.getTree("#tree");
 }
 
 async function reload() {
-    const notes = await loadTree();
+    const notes = await loadTreeData();
 
     const activeNotePath = getActiveNode() !== null ? await treeUtils.getNotePath(getActiveNode()) : null;
 
-    await getTree().reload(notes);
+    await tree.reload(notes);
 
     // reactivate originally activated node, but don't trigger note loading
     if (activeNotePath) {
@@ -559,7 +556,7 @@ function getHashValueFromAddress() {
     return str.split("-");
 }
 
-async function loadTree() {
+async function loadTreeData() {
     const resp = await server.get('tree');
 
     treeCache.load(resp.notes, resp.branches);
@@ -580,7 +577,7 @@ async function collapseTree(node = null) {
 }
 
 function focusTree() {
-    getTree().setFocus();
+    tree.setFocus();
 }
 
 async function scrollToActiveNote() {
@@ -754,9 +751,9 @@ async function sortAlphabetically(noteId) {
 }
 
 async function showTree() {
-    const tree = await loadTree();
+    const treeData = await loadTreeData();
 
-    await initFancyTree(tree);
+    await initFancyTree(treeData);
 }
 
 ws.subscribeToMessages(message => {
@@ -912,6 +909,9 @@ async function duplicateNote(noteId, parentNoteId) {
     toastService.showMessage(`Note "${origNote.title}" has been duplicated`);
 }
 
+function getNodeByKey(key) {
+    return tree.getNodeByKey(key);
+}
 
 keyboardActionService.setGlobalActionHandler('CollapseTree', () => collapseTree()); // don't use shortened form since collapseTree() accepts argument
 $collapseTreeButton.on('click', () => collapseTree());
@@ -931,13 +931,12 @@ export default {
     setNoteTitle,
     setPrefix,
     createNote,
-    createNoteInto,
     getSelectedNodes,
     getSelectedOrActiveNodes,
     clearSelectedNodes,
     sortAlphabetically,
     showTree,
-    loadTree,
+    loadTreeData,
     treeInitialized,
     setExpandedToServer,
     getNodesByNoteId,
@@ -949,5 +948,6 @@ export default {
     getSomeNotePath,
     focusTree,
     scrollToActiveNote,
-    duplicateNote
+    duplicateNote,
+    getNodeByKey
 };

src/public/javascripts/services/tree_utils.js

@@ -2,16 +2,10 @@ import utils from './utils.js';
 import hoistedNoteService from './hoisted_note.js';
 import treeCache from "./tree_cache.js";
 
-const $tree = $("#tree");
-
 async function getParentProtectedStatus(node) {
     return await hoistedNoteService.isRootNode(node) ? 0 : node.getParent().data.isProtected;
 }
 
-function getNodeByKey(key) {
-    return $tree.fancytree('getNodeByKey', key);
-}
-
 function getNoteIdFromNotePath(notePath) {
     if (!notePath) {
         return null;
@@ -123,7 +117,6 @@ async function getNotePathTitle(notePath) {
 
 export default {
     getParentProtectedStatus,
-    getNodeByKey,
     getNotePath,
     getNoteIdFromNotePath,
     getNoteIdAndParentIdFromNotePath,