refactor canvas-note to canvas

src/public/app/dialogs/note_revisions.js

@@ -171,7 +171,7 @@ async function setContentPane() {
 
         $content.html($table);
     }
-    else if (revisionItem.type === 'canvas-note') {
+    else if (revisionItem.type === 'canvas') {
         /**
          * FIXME: We load a font called Virgil.wof2, which originates from excalidraw.com
          *        REMOVE external dependency!!!! This is defined in the svg in defs.style

src/public/app/entities/note_short.js

@@ -17,7 +17,7 @@ const NOTE_TYPE_ICONS = {
     "book": "bx bx-book",
     "note-map": "bx bx-map-alt",
     "mermaid": "bx bx-selection",
-    "canvas-note": "bx bx-pen"
+    "canvas": "bx bx-pen"
 };
 
 /**

src/public/app/services/note_content_renderer.js

@@ -7,7 +7,7 @@ import openService from "./open.js";
 import froca from "./froca.js";
 import utils from "./utils.js";
 import linkService from "./link.js";
-import errorSvg from "../widgets/type_widgets/canvas-note-utils/errorSvg.js";
+import errorSvg from "../widgets/type_widgets/canvas-utils/errorSvg.js";
 
 let idCounter = 1;
 
@@ -142,7 +142,7 @@ async function getRenderedContent(note, options = {}) {
 
         $renderedContent.append($content);
     }
-    else if (type === 'canvas-note') {
+    else if (type === 'canvas') {
         // make sure surrounding container has size of what is visible. Then image is shrinked to its boundaries
         $renderedContent.css({height: "100%", width:"100%"});
         

src/public/app/services/note_list_renderer.js

@@ -99,7 +99,7 @@ const TPL = `
         padding: 10px;
     }
     
-    .note-book-content.type-image img, .note-book-content.type-canvas-note svg {
+    .note-book-content.type-image img, .note-book-content.type-canvas svg {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
@@ -107,7 +107,7 @@ const TPL = `
     
     .note-book-card.type-image .note-book-content img,
     .note-book-card.type-text .note-book-content img,
-    .note-book-card.type-canvas-note .note-book-content img {
+    .note-book-card.type-canvas .note-book-content img {
         max-width: 100%;
         max-height: 100%;
     }

src/public/app/services/tree_context_menu.js

@@ -34,7 +34,7 @@ class TreeContextMenu {
             { title: "Render HTML note", command: command, type: "render", uiIcon: "extension" },
             { title: "Book", command: command, type: "book", uiIcon: "book" },
             { title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "selection" },
-            { title: "Canvas Note", command: command, type: "canvas-note", uiIcon: "pen" },
+            { title: "Canvas", command: command, type: "canvas", uiIcon: "pen" },
         ];
     }
 

src/public/app/widgets/note_detail.js

@@ -10,7 +10,7 @@ import FileTypeWidget from "./type_widgets/file.js";
 import ImageTypeWidget from "./type_widgets/image.js";
 import RenderTypeWidget from "./type_widgets/render.js";
 import RelationMapTypeWidget from "./type_widgets/relation_map.js";
-import CanvasNoteTypeWidget from "./type_widgets/canvas_note.js";
+import CanvasTypeWidget from "./type_widgets/canvas.js";
 import ProtectedSessionTypeWidget from "./type_widgets/protected_session.js";
 import BookTypeWidget from "./type_widgets/book.js";
 import appContext from "../services/app_context.js";
@@ -51,7 +51,7 @@ const typeWidgetClasses = {
     'search': NoneTypeWidget,
     'render': RenderTypeWidget,
     'relation-map': RelationMapTypeWidget,
-    'canvas-note': CanvasNoteTypeWidget,
+    'canvas': CanvasTypeWidget,
     'protected-session': ProtectedSessionTypeWidget,
     'book': BookTypeWidget,
     'note-map': NoteMapTypeWidget
@@ -154,7 +154,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         // https://github.com/zadam/trilium/issues/2522
         this.$widget.toggleClass("full-height",
             !this.noteContext.hasNoteList()
-            && ['editable-text', 'editable-code', 'canvas-note'].includes(this.type)
+            && ['editable-text', 'editable-code', 'canvas'].includes(this.type)
             && this.mime !== 'text/x-sqlite;schema=trilium');
     }
 

src/public/app/widgets/note_type.js

@@ -11,7 +11,7 @@ const NOTE_TYPES = [
     { type: "text", mime: "text/html", title: "Text", selectable: true },
     { type: "relation-map", mime: "application/json", title: "Relation Map", selectable: true },
     { type: "render", mime: '', title: "Render Note", selectable: true },
-    { type: "canvas-note", mime: 'application/json', title: "Canvas Note", selectable: true },
+    { type: "canvas", mime: 'application/json', title: "Canvas", selectable: true },
     { type: "book", mime: '', title: "Book", selectable: true },
     { type: "mermaid", mime: 'text/mermaid', title: "Mermaid Diagram", selectable: true },
     { type: "code", mime: 'text/plain', title: "Code", selectable: true }

src/public/app/widgets/note_wrapper.js

@@ -32,7 +32,7 @@ export default class NoteWrapperWidget extends FlexContainer {
 
     refresh(noteContext) {
         this.$widget.toggleClass("full-content-width",
-            ['image', 'mermaid', 'book', 'render', 'canvas-note'].includes(noteContext?.note?.type)
+            ['image', 'mermaid', 'book', 'render', 'canvas'].includes(noteContext?.note?.type)
             || !!noteContext?.note?.hasLabel('fullContentWidth')
         );
     }

src/public/app/widgets/type_widgets/canvas-note-utils/replaceExternalAssets.js

@@ -1,16 +0,0 @@
-/**
- * replaces exlicraw.com and unpkg.com with own assets
- * 
- * workaround until https://github.com/excalidraw/excalidraw/pull/5065 is merged and published
- * 
- * @param {string} string 
- * @returns 
- */
-const replaceExternalAssets = (string) => {
-    let result = string;
-    // exlidraw.com asset in react usage
-    result = result.replaceAll("https://excalidraw.com/", window.EXCALIDRAW_ASSET_PATH+"excalidraw-assets/");
-    return result;
-}
-
-export default replaceExternalAssets;

src/public/app/widgets/type_widgets/canvas.js

@@ -7,7 +7,7 @@ import debounce from "../../../../../libraries/lodash.debounce.js";
 const {sleep} = utils;
 
 const TPL = `
-    <div class="canvas-note-widget note-detail-canvas-note note-detail-printable note-detail">
+    <div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
         <style type="text/css">
         .excalidraw .App-menu_top .buttonList {
             display: flex;
@@ -26,7 +26,7 @@ const TPL = `
 
         </style>
         <!-- height here necessary. otherwise excalidraw not shown -->
-        <div class="canvas-note-render" style="height: 100%"></div>
+        <div class="canvas-render" style="height: 100%"></div>
     </div>
 `;
 
@@ -85,10 +85,10 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
 
     /**
      * (trilium)
-     * @returns {string} "canvas-note"
+     * @returns {string} "canvas"
      */
     static getType() {
-        return "canvas-note";
+        return "canvas";
     }
 
     /**
@@ -99,7 +99,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         this.$widget = $(TPL);
 
         this.$widget.toggleClass("full-height", true); // only add
-        this.$render = this.$widget.find('.canvas-note-render');
+        this.$render = this.$widget.find('.canvas-render');
         this.renderElement = this.$render.get(0);
 
         libraryLoader
@@ -249,7 +249,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         })
 
         const content = {
-            _meta: "This note has type `canvas-note`. It uses excalidraw and stores an exported svg alongside.",
+            _meta: "This note has type `canvas`. It uses excalidraw and stores an exported svg alongside.",
             elements, // excalidraw
             appState, // excalidraw
             files: activeFiles, // excalidraw

src/routes/api/image.js

@@ -11,7 +11,7 @@ function returnImage(req, res) {
     if (!image) {
         return res.sendStatus(404);
     }
-    else if (!["image", "canvas-note"].includes(image.type)){
+    else if (!["image", "canvas"].includes(image.type)){
         return res.sendStatus(400);
     }
     else if (image.isDeleted || image.data === null) {
@@ -20,10 +20,10 @@ function returnImage(req, res) {
     }
 
     /**
-     * special "image" type. the canvas-note is actually type application/json 
+     * special "image" type. the canvas is actually type application/json 
      * to avoid bitrot and enable usage as referenced image the svg is included.
      */
-    if (image.type === 'canvas-note') {
+    if (image.type === 'canvas') {
         const content = image.getContent();
         try {
             const data = JSON.parse(content);

src/services/backend_script_api.js

@@ -210,7 +210,7 @@ function BackendScriptApi(currentNote, apiParams) {
      * @property {string} parentNoteId - MANDATORY
      * @property {string} title - MANDATORY
      * @property {string|buffer} content - MANDATORY
-     * @property {string} type - text, code, file, image, search, book, relation-map, canvas-note - MANDATORY
+     * @property {string} type - text, code, file, image, search, book, relation-map, canvas - MANDATORY
      * @property {string} mime - value is derived from default mimes for type
      * @property {boolean} isProtected - default is false
      * @property {boolean} isExpanded - default is false

src/services/export/single.js

@@ -41,7 +41,7 @@ function exportSingleNote(taskContext, branch, format, res) {
         extension = mimeTypes.extension(note.mime) || 'code';
         mime = note.mime;
     }
-    else if (note.type === 'relation-map' || note.type === 'canvas-note' || note.type === 'search') {
+    else if (note.type === 'relation-map' || note.type === 'canvas' || note.type === 'search') {
         payload = content;
         extension = 'json';
         mime = 'application/json';

src/services/note_types.js

@@ -9,5 +9,5 @@ module.exports = [
     'book', 
     'note-map',
     'mermaid',
-    'canvas-note'
+    'canvas'
 ];

src/services/notes.js

@@ -53,7 +53,7 @@ function deriveMime(type, mime) {
         mime = 'text/html';
     } else if (type === 'code' || type === 'mermaid') {
         mime = 'text/plain';
-    } else if (['relation-map', 'search', 'canvas-note'].includes(type)) {
+    } else if (['relation-map', 'search', 'canvas'].includes(type)) {
         mime = 'application/json';
     } else if (['render', 'book'].includes(type)) {
         mime = '';
@@ -84,7 +84,7 @@ function copyChildAttributes(parentNote, childNote) {
  * - {string} parentNoteId
  * - {string} title
  * - {*} content
- * - {string} type - text, code, file, image, search, book, relation-map, canvas-note, render
+ * - {string} type - text, code, file, image, search, book, relation-map, canvas, render
  *
  * Following are optional (have defaults)
  * - {string} mime - value is derived from default mimes for type

src/services/utils.js

@@ -168,7 +168,7 @@ const STRING_MIME_TYPES = [
 
 function isStringNote(type, mime) {
     // render and book are string note in the sense that they are expected to contain empty string
-    return ["text", "code", "relation-map", "search", "render", "book", "mermaid", "canvas-note"].includes(type)
+    return ["text", "code", "relation-map", "search", "render", "book", "mermaid", "canvas"].includes(type)
         || mime.startsWith('text/')
         || STRING_MIME_TYPES.includes(mime);
 }
@@ -192,7 +192,7 @@ function formatDownloadTitle(filename, type, mime) {
 
     if (type === 'text') {
         return filename + '.html';
-    } else if (['relation-map', 'canvas-note', 'search'].includes(type)) {
+    } else if (['relation-map', 'canvas', 'search'].includes(type)) {
         return filename + '.json';
     } else {
         if (!mime) {

src/share/content_renderer.js

@@ -85,7 +85,7 @@ document.addEventListener("DOMContentLoaded", function() {
     else if (note.type === 'book') {
         isEmpty = true;
     }
-    else if (note.type === 'canvas-note') {
+    else if (note.type === 'canvas') {
         header += `<script>
                     window.EXCALIDRAW_ASSET_PATH = window.location.origin + "/node_modules/@excalidraw/excalidraw/dist/";
                    </script>`;

src/share/routes.js

@@ -124,11 +124,11 @@ function register(router) {
         if (!image) {
             return res.status(404).send(`Note '${req.params.noteId}' not found`);
         }
-        else if (!["image", "canvas-note"].includes(image.type)) {
+        else if (!["image", "canvas"].includes(image.type)) {
             return res.status(400).send("Requested note is not a shareable image");
-        } else if (image.type === "canvas-note") {
+        } else if (image.type === "canvas") {
             /**
-             * special "image" type. the canvas-note is actually type application/json 
+             * special "image" type. the canvas is actually type application/json 
              * to avoid bitrot and enable usage as referenced image the svg is included.
              */
             const content = image.getContent();