From 3df712b64ff37716ffffe9fbaa7e9a5f2d1b1c28 Mon Sep 17 00:00:00 2001 From: Tom <7283497+thfrei@users.noreply.github.com> Date: Tue, 10 May 2022 13:43:05 +0200 Subject: [PATCH] refactor canvas-note to canvas --- src/public/app/dialogs/note_revisions.js | 2 +- src/public/app/entities/note_short.js | 2 +- src/public/app/services/note_content_renderer.js | 4 ++-- src/public/app/services/note_list_renderer.js | 4 ++-- src/public/app/services/tree_context_menu.js | 2 +- src/public/app/widgets/note_detail.js | 6 +++--- src/public/app/widgets/note_type.js | 2 +- src/public/app/widgets/note_wrapper.js | 2 +- .../canvas-note-utils/replaceExternalAssets.js | 16 ---------------- .../errorSvg.js | 0 .../type_widgets/{canvas_note.js => canvas.js} | 12 ++++++------ src/routes/api/image.js | 6 +++--- src/services/backend_script_api.js | 2 +- src/services/export/single.js | 2 +- src/services/note_types.js | 2 +- src/services/notes.js | 4 ++-- src/services/utils.js | 4 ++-- src/share/content_renderer.js | 2 +- src/share/routes.js | 6 +++--- 19 files changed, 32 insertions(+), 48 deletions(-) delete mode 100644 src/public/app/widgets/type_widgets/canvas-note-utils/replaceExternalAssets.js rename src/public/app/widgets/type_widgets/{canvas-note-utils => canvas-utils}/errorSvg.js (100%) rename src/public/app/widgets/type_widgets/{canvas_note.js => canvas.js} (97%) diff --git a/src/public/app/dialogs/note_revisions.js b/src/public/app/dialogs/note_revisions.js index 19e5f8b81..95e13d70b 100644 --- a/src/public/app/dialogs/note_revisions.js +++ b/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 diff --git a/src/public/app/entities/note_short.js b/src/public/app/entities/note_short.js index 3ea507266..13bae5a93 100644 --- a/src/public/app/entities/note_short.js +++ b/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" }; /** diff --git a/src/public/app/services/note_content_renderer.js b/src/public/app/services/note_content_renderer.js index 7b446c7aa..07bd6a8b3 100644 --- a/src/public/app/services/note_content_renderer.js +++ b/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%"}); diff --git a/src/public/app/services/note_list_renderer.js b/src/public/app/services/note_list_renderer.js index 34b69afc1..705a0d31f 100644 --- a/src/public/app/services/note_list_renderer.js +++ b/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%; } diff --git a/src/public/app/services/tree_context_menu.js b/src/public/app/services/tree_context_menu.js index 71231bbfc..89d860804 100644 --- a/src/public/app/services/tree_context_menu.js +++ b/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" }, ]; } diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js index f6de7bda5..60dac4202 100644 --- a/src/public/app/widgets/note_detail.js +++ b/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'); } diff --git a/src/public/app/widgets/note_type.js b/src/public/app/widgets/note_type.js index 111b96e6a..e3206ebc0 100644 --- a/src/public/app/widgets/note_type.js +++ b/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 } diff --git a/src/public/app/widgets/note_wrapper.js b/src/public/app/widgets/note_wrapper.js index 7f5c37377..227543c65 100644 --- a/src/public/app/widgets/note_wrapper.js +++ b/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') ); } diff --git a/src/public/app/widgets/type_widgets/canvas-note-utils/replaceExternalAssets.js b/src/public/app/widgets/type_widgets/canvas-note-utils/replaceExternalAssets.js deleted file mode 100644 index d2ecfced8..000000000 --- a/src/public/app/widgets/type_widgets/canvas-note-utils/replaceExternalAssets.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/src/public/app/widgets/type_widgets/canvas-note-utils/errorSvg.js b/src/public/app/widgets/type_widgets/canvas-utils/errorSvg.js similarity index 100% rename from src/public/app/widgets/type_widgets/canvas-note-utils/errorSvg.js rename to src/public/app/widgets/type_widgets/canvas-utils/errorSvg.js diff --git a/src/public/app/widgets/type_widgets/canvas_note.js b/src/public/app/widgets/type_widgets/canvas.js similarity index 97% rename from src/public/app/widgets/type_widgets/canvas_note.js rename to src/public/app/widgets/type_widgets/canvas.js index 7f78da851..85215686a 100644 --- a/src/public/app/widgets/type_widgets/canvas_note.js +++ b/src/public/app/widgets/type_widgets/canvas.js @@ -7,7 +7,7 @@ import debounce from "../../../../../libraries/lodash.debounce.js"; const {sleep} = utils; const TPL = ` -
+
-
+
`; @@ -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 diff --git a/src/routes/api/image.js b/src/routes/api/image.js index 30e7b9899..7807f1fb9 100644 --- a/src/routes/api/image.js +++ b/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); diff --git a/src/services/backend_script_api.js b/src/services/backend_script_api.js index 305a39c94..dadc40c6a 100644 --- a/src/services/backend_script_api.js +++ b/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 diff --git a/src/services/export/single.js b/src/services/export/single.js index d3fe2144c..881bb394b 100644 --- a/src/services/export/single.js +++ b/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'; diff --git a/src/services/note_types.js b/src/services/note_types.js index 2b488424d..cdc890162 100644 --- a/src/services/note_types.js +++ b/src/services/note_types.js @@ -9,5 +9,5 @@ module.exports = [ 'book', 'note-map', 'mermaid', - 'canvas-note' + 'canvas' ]; \ No newline at end of file diff --git a/src/services/notes.js b/src/services/notes.js index 41ad60d09..9accb08d8 100644 --- a/src/services/notes.js +++ b/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 diff --git a/src/services/utils.js b/src/services/utils.js index d50716381..85b719d01 100644 --- a/src/services/utils.js +++ b/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) { diff --git a/src/share/content_renderer.js b/src/share/content_renderer.js index b2731a53d..9eb9f5803 100644 --- a/src/share/content_renderer.js +++ b/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 += ``; diff --git a/src/share/routes.js b/src/share/routes.js index 8d55cb9d8..80f2b20d5 100644 --- a/src/share/routes.js +++ b/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();