refactor canvas-note to canvas

This commit is contained in:
Tom 2022-05-10 13:43:05 +02:00
parent 160bd0a790
commit 3df712b64f
19 changed files with 32 additions and 48 deletions

View File

@ -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

View File

@ -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"
};
/**

View File

@ -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%"});

View File

@ -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%;
}

View File

@ -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" },
];
}

View File

@ -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');
}

View File

@ -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 }

View File

@ -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')
);
}

View File

@ -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;

View File

@ -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

View File

@ -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);

View File

@ -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

View File

@ -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';

View File

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

View File

@ -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

View File

@ -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) {

View File

@ -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>`;

View File

@ -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();