From 220df662adabddb50af9c6bd6fb37abb0ab6e57b Mon Sep 17 00:00:00 2001
From: Tom <7283497+thfrei@users.noreply.github.com>
Date: Fri, 8 Apr 2022 20:42:38 +0200
Subject: [PATCH] make pasted images in excalidraw work (save and load "files")

---
 .../app/widgets/type_widgets/canvas_note.js   | 50 ++++++++++++++++---
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/canvas_note.js b/src/public/app/widgets/type_widgets/canvas_note.js
index 402800777..a2f0217e2 100644
--- a/src/public/app/widgets/type_widgets/canvas_note.js
+++ b/src/public/app/widgets/type_widgets/canvas_note.js
@@ -69,6 +69,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         this.isNewSceneVersion = this.isNewSceneVersion.bind(this);
         this.updateSceneVersion = this.updateSceneVersion.bind(this);
         this.getSceneVersion = this.getSceneVersion.bind(this);
+        this.test = this.test.bind(this);
 
         // debugging helper
         this.uniqueId = uniqueId();
@@ -79,6 +80,10 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         window.triliumexcalidraw[this.uniqueId] = this;
         // end debug 
     }
+    
+    test() {
+        this.log("test", str);
+    }
 
     static getType() {
         return "canvas-note";
@@ -143,20 +148,29 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
 
         if (this.excalidrawRef.current && noteComplement.content) {
             const content = JSON.parse(noteComplement.content || "");
-            const {elements, appState} = content;
+            const {elements, appState, files} = content;
 
             const sceneData = {
                 elements, 
-                appState, 
+                appState,
                 collaborators: []
             };
 
-            this.log("doRefresh(note) sceneData", sceneData);
+            // files are expected in an array when loading. they are stored as an key-index object
+            // see example for loading here:
+            // https://github.com/excalidraw/excalidraw/blob/c5a7723185f6ca05e0ceb0b0d45c4e3fbcb81b2a/src/packages/excalidraw/example/App.js#L68
+            const fileArray = [];
+            for (const fileId in files) {
+                fileArray.push(files[fileId]);
+            }
+
+            this.log("doRefresh(note) sceneData, files", sceneData, files, fileArray);
 
             this.sceneVersion = window.Excalidraw.getSceneVersion(elements);
             this.log("doRefresh sceneVersion", window.Excalidraw.getSceneVersion(elements));
 
             this.excalidrawRef.current.updateScene(sceneData);
+            this.excalidrawRef.current.addFiles(fileArray);
 
             // set initial version
             if (this.currentSceneVersion === -1) {
@@ -174,10 +188,12 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
 
         const elements = this.excalidrawRef.current.getSceneElements();
         const appState = this.excalidrawRef.current.getAppState();
+        const files = this.excalidrawRef.current.getFiles();
 
         const content = {
             elements,
             appState,
+            files,
             time
         };
 
@@ -195,15 +211,32 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         this.spacedUpdate.scheduleUpdate();
     }
 
+
     /**
-     * FIXME: 2-canvas-split: onChangehandler is fired for both, even though only one instance changed.
-     *        Bug in excalidraw?! yes => see isNewSceneVersion()
+     * 
+        // FIXME: also, after we save, a refresh is triggered. if we switch too fast, we might get the saved
+        //        version instead of our (draw something, activate circle, then refresh happens, circle activation
+        //        is revoked)         
      */
     onChangeHandler() {
-        this.log("onChangeHandler() =================", new Date(), this.isNewSceneVersion());
-        if (this.isNewSceneVersion()) {
+        this.log("onChangeHandler() =================", new Date(), this.isNewSceneVersion());        
+        const appState = this.excalidrawRef.current.getAppState() || {};
+
+        // if cursor is down, rectangle is not yet part of elements. updating and refreshing breaks stuff
+        const isCursorUp = appState.cursorButton === "up";
+        // changeHandler is called upon any tiny change in excalidraw. button clicked, hover, etc.
+        // make sure only when a new element is added, we actually save something.
+        const isNewSceneVersion = this.isNewSceneVersion();
+        // FIXME: however, we might want to make an exception, if viewport changed, since viewport
+        //        is desired to save? (add)
+
+        const shouldSave = isCursorUp && isNewSceneVersion;
+
+        if (shouldSave) {
             this.updateSceneVersion();
             this.saveData();
+        } else {
+            // do nothing
         }
     }
 
@@ -281,6 +314,9 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
                     zenModeEnabled: zenModeEnabled,
                     gridModeEnabled: gridModeEnabled,
                     isCollaborating: false,
+                    detectScroll: false,
+                    handleKeyboardGlobally: false,
+                    autoFocus: true,
                 })
             )
         );