From 272bb136d84065da7b96cda6cfc76195bd826a92 Mon Sep 17 00:00:00 2001
From: Tom <7283497+thfrei@users.noreply.github.com>
Date: Sun, 10 Apr 2022 13:56:15 +0200
Subject: [PATCH] make canvas_note height 100%

---
 src/public/app/widgets/note_detail.js         |  2 +-
 .../app/widgets/type_widgets/canvas_note.js   | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js
index be61f6bc3..f19107bab 100644
--- a/src/public/app/widgets/note_detail.js
+++ b/src/public/app/widgets/note_detail.js
@@ -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() {
diff --git a/src/public/app/widgets/type_widgets/canvas_note.js b/src/public/app/widgets/type_widgets/canvas_note.js
index 49f5d9aa1..b7ccd82e4 100644
--- a/src/public/app/widgets/type_widgets/canvas_note.js
+++ b/src/public/app/widgets/type_widgets/canvas_note.js
@@ -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);