fix hamburger icon in canvas

This commit is contained in:
zadam 2023-05-07 11:54:04 +02:00
parent 4d5612e845
commit 9f5f0aeddd

View File

@ -11,6 +11,13 @@ const TPL = `
.excalidraw .App-menu_top .buttonList {
display: flex;
}
/* Conflict between excalidraw and bootstrap classes keeps the menu hidden */
/* https://github.com/zadam/trilium/issues/3780 */
/* https://github.com/excalidraw/excalidraw/issues/6567 */
.excalidraw .dropdown-menu {
display: block;
}
.excalidraw-wrapper {
height: 100%;
@ -39,7 +46,7 @@ const TPL = `
* @author thfrei 2022-05-11
*
* Background:
* excalidraw gives great support for hand drawn notes. It also allows to include images and support
* excalidraw gives great support for hand-drawn notes. It also allows including images and support
* for sketching. Excalidraw has a vibrant and active community.
*
* Functionality:
@ -50,17 +57,17 @@ const TPL = `
* Paths not taken.
* - excalidraw-to-svg (node.js) could be used to avoid storing the svg in the backend.
* We could render the SVG on the fly. However, as of now, it does not render any hand drawn
* (freedraw) paths. There is an issue with Path2D object not present in node-canvas library
* used by jsdom. (See Trilium PR for samples and other issues in respective library.
* (freedraw) paths. There is an issue with Path2D object not present in the node-canvas library
* used by jsdom. (See Trilium PR for samples and other issues in the respective library.
* Link will be added later). Related links:
* - https://github.com/Automattic/node-canvas/pull/2013
* - https://github.com/google/canvas-5-polyfill
* - https://github.com/Automattic/node-canvas/issues/1116
* - https://www.npmjs.com/package/path2d-polyfill
* - excalidraw-to-svg (node.js) takes quite some time to load an image (1-2s)
* - excalidraw-utils (browser) does render freedraw, however NOT freedraw with background. It is not
* - excalidraw-utils (browser) does render freedraw, however NOT freedraw with a background. It is not
* used, since it is a big dependency, and has the same functionality as react + excalidraw.
* - infinite-drawing-canvas with fabric.js. This library lacked a lot of feature, excalidraw already
* - infinite-drawing-canvas with fabric.js. This library lacked a lot of features, excalidraw already
* has.
*
* Known issues:
@ -83,7 +90,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
super();
// constants
this.SCENE_VERSION_INITIAL = -1; // -1 indicates, that it is fresh. excalidraw scene version is always >0
this.SCENE_VERSION_INITIAL = -1; // -1 indicates that it is fresh. excalidraw scene version is always >0
this.SCENE_VERSION_ERROR = -2; // -2 indicates error
// config
@ -146,10 +153,10 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
* @param {FNote} note
*/
async doRefresh(note) {
// see if note changed, since we do not get a new class for a new note
// see if the note changed, since we do not get a new class for a new note
const noteChanged = this.currentNoteId !== note.noteId;
if (noteChanged) {
// reset scene to omit unnecessary onchange handler
// reset the scene to omit unnecessary onchange handler
this.currentSceneVersion = this.SCENE_VERSION_INITIAL;
}
this.currentNoteId = note.noteId;
@ -250,14 +257,14 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
const appState = this.excalidrawRef.current.getAppState();
/**
* A file is not deleted, even though removed from canvas. therefore we only keep
* files that are referenced by an element. Maybe this will change with new excalidraw version?
* A file is not deleted, even though removed from canvas. Therefore, we only keep
* files that are referenced by an element. Maybe this will change with a new excalidraw version?
*/
const files = this.excalidrawRef.current.getFiles();
/**
* parallel svg export to combat bitrot and enable rendering image for note inclusion,
* preview and share.
* preview, and share.
*/
const svg = await window.ExcalidrawLib.exportToSvg({
elements,
@ -369,7 +376,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
// do a custom redirect, such as passing to react-router
// ...
} else {
// open in same tab
// open in the same tab
}
}, []);