make canvas_note height 100%

This commit is contained in:
Tom 2022-04-10 13:56:15 +02:00
parent 27d0388d79
commit 272bb136d8
2 changed files with 18 additions and 10 deletions

View File

@ -151,7 +151,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'].includes(this.type));
&& ['editable-text', 'editable-code', 'canvas-note'].includes(this.type));
}
getTypeWidget() {

View File

@ -10,19 +10,14 @@ import uniqueId from "./canvas-note-utils/lodash.uniqueId.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = `
<div class="canvas-note-widget note-detail-canvas-note note-detail-printable">
<div class="canvas-note-widget note-detail-canvas-note note-detail-printable note-detail">
<style type="text/css">
.note-detail-canvas-note {
height: 100%;
}
.excalidraw .App-menu_top .buttonList {
/*display: flex;*/
}
.excalidraw-wrapper {
height: 100%;
position: relative;
}
:root[dir="ltr"]
@ -33,8 +28,8 @@ const TPL = `
}
</style>
<!-- height here necessary .otherwise excalidraw not shown. also, one window resize necessary! -->
<div class="canvas-note-render" style="height: 500px"></div>
<!-- height here necessary. otherwise excalidraw not shown -->
<div class="canvas-note-render" style="height: 100%"></div>
</div>
`;
@ -42,6 +37,18 @@ const TPL = `
* FIXME: Buttons from one excalidraw get activated. Problems with instance?! (maybe it is only visually, once
* mouse is over one instance they change?)
*/
/**
* FIXME: FONTS from unpkg.com are loaded. Change font to HELVETICA?
* See: https://www.npmjs.com/package/@excalidraw/excalidraw => FONT_FAMILY
*/
/**
* FIXME: when loading a note, onchangehandler gets fired and then note is automatically saved. this leads to
* network overhead, and also sometimes to an empty note, if somehow loading failed, then empty content
* is saved.
*/
/**
* Discussion?: add complete @excalidraw/excalidraw, utils, react, react-dom as library? maybe also node_modules?
*/
export default class ExcalidrawTypeWidget extends TypeWidget {
constructor() {
super();
@ -96,7 +103,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
// leads to contain: none
// https://developer.mozilla.org/en-US/docs/Web/CSS/contain
this.contentSized();
// this.contentSized();
this.$widget.toggleClass("full-height", true); // only add
this.$render = this.$widget.find('.canvas-note-render');
this.$renderElement = this.$render.get(0);
this.log("doRender", this.$widget);