minor canvas note cleanup

This commit is contained in:
zadam 2022-05-19 23:00:07 +02:00
parent a1d1b4580a
commit 2085dc5ed4
2 changed files with 56 additions and 81 deletions

View File

@ -85,7 +85,7 @@
}, },
"devDependencies": { "devDependencies": {
"cross-env": "7.0.3", "cross-env": "7.0.3",
"electron": "16.2.6", "electron": "16.2.7",
"electron-builder": "23.0.3", "electron-builder": "23.0.3",
"electron-packager": "15.5.1", "electron-packager": "15.5.1",
"electron-rebuild": "3.2.7", "electron-rebuild": "3.2.7",

View File

@ -95,7 +95,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
// will be overwritten // will be overwritten
this.excalidrawRef; this.excalidrawRef;
this.$render; this.$render;
this.renderElement;
this.$widget; this.$widget;
this.reactHandlers; // used to control react state this.reactHandlers; // used to control react state
@ -104,40 +103,31 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
this.isNewSceneVersion = this.isNewSceneVersion.bind(this); this.isNewSceneVersion = this.isNewSceneVersion.bind(this);
} }
/**
* (trilium)
* @returns {string} "canvas"
*/
static getType() { static getType() {
return "canvas"; return "canvas";
} }
/**
* (trilium)
* renders note
*/
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$widget.toggleClass("full-height", true); // only add this.$widget.toggleClass("full-height", true); // only add
this.$render = this.$widget.find('.canvas-render'); this.$render = this.$widget.find('.canvas-render');
this.renderElement = this.$render.get(0);
libraryLoader libraryLoader
.requireLibrary(libraryLoader.EXCALIDRAW) .requireLibrary(libraryLoader.EXCALIDRAW)
.then(() => { .then(() => {
const React = window.React; const React = window.React;
const ReactDOM = window.ReactDOM; const ReactDOM = window.ReactDOM;
const renderElement = this.$render.get(0);
ReactDOM.unmountComponentAtNode(this.renderElement); ReactDOM.unmountComponentAtNode(renderElement);
ReactDOM.render(React.createElement(this.createExcalidrawReactApp), this.renderElement); ReactDOM.render(React.createElement(this.createExcalidrawReactApp), renderElement);
}) });
return this.$widget; return this.$widget;
} }
/** /**
* (trilium)
* called to populate the widget container with the note content * called to populate the widget container with the note content
* *
* @param {note} note * @param {note} note
@ -166,7 +156,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
* note into this fresh note. Probably due to that this note-instance does not get * note into this fresh note. Probably due to that this note-instance does not get
* newly instantiated? * newly instantiated?
*/ */
if (this.excalidrawRef.current && noteComplement.content === "") { if (this.excalidrawRef.current && noteComplement.content?.trim() === "") {
const sceneData = { const sceneData = {
elements: [], elements: [],
appState: {}, appState: {},
@ -175,16 +165,9 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
this.excalidrawRef.current.updateScene(sceneData); this.excalidrawRef.current.updateScene(sceneData);
} }
/**
* load saved content into excalidraw canvas
*/
else if (this.excalidrawRef.current && noteComplement.content) { else if (this.excalidrawRef.current && noteComplement.content) {
let content ={ // load saved content into excalidraw canvas
elements: [], let content;
appState: [],
files: [],
};
try { try {
content = JSON.parse(noteComplement.content || ""); content = JSON.parse(noteComplement.content || "");
@ -192,6 +175,12 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
console.error("Error parsing content. Probably note.type changed", console.error("Error parsing content. Probably note.type changed",
"Starting with empty canvas" "Starting with empty canvas"
, note, noteComplement, err); , note, noteComplement, err);
content = {
elements: [],
appState: [],
files: [],
};
} }
const {elements, appState, files} = content; const {elements, appState, files} = content;
@ -225,8 +214,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
fileArray.push(file); fileArray.push(file);
} }
this.sceneVersion = window.Excalidraw.getSceneVersion(elements);
this.excalidrawRef.current.updateScene(sceneData); this.excalidrawRef.current.updateScene(sceneData);
this.excalidrawRef.current.addFiles(fileArray); this.excalidrawRef.current.addFiles(fileArray);
} }
@ -238,7 +225,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
} }
/** /**
* (trilium)
* gets data from widget container that will be sent via spacedUpdate.scheduleUpdate(); * gets data from widget container that will be sent via spacedUpdate.scheduleUpdate();
* this is automatically called after this.saveData(); * this is automatically called after this.saveData();
*/ */
@ -285,13 +271,10 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
svg: svgSafeString, // not needed for excalidraw, used for note_short, content, and image api svg: svgSafeString, // not needed for excalidraw, used for note_short, content, and image api
}; };
const contentString = JSON.stringify(content); return JSON.stringify(content);
return contentString;
} }
/** /**
* (trilium)
* save content to backend * save content to backend
* spacedUpdate is kind of a debouncer. * spacedUpdate is kind of a debouncer.
*/ */
@ -300,8 +283,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
} }
onChangeHandler() { onChangeHandler() {
const appState = this.excalidrawRef.current.getAppState() || {};
// changeHandler is called upon any tiny change in excalidraw. button clicked, hover, etc. // 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. // make sure only when a new element is added, we actually save something.
const isNewSceneVersion = this.isNewSceneVersion(); const isNewSceneVersion = this.isNewSceneVersion();
@ -336,11 +317,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
height: undefined height: undefined
}); });
const [viewModeEnabled, setViewModeEnabled] = React.useState(false);
const [zenModeEnabled, setZenModeEnabled] = React.useState(false);
const [gridModeEnabled, setGridModeEnabled] = React.useState(false);
const [synchronized, setSynchronized] = React.useState(true);
React.useEffect(() => { React.useEffect(() => {
const dimensions = { const dimensions = {
width: excalidrawWrapperRef.current.getBoundingClientRect().width, width: excalidrawWrapperRef.current.getBoundingClientRect().width,
@ -401,9 +377,9 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
onCollabButtonClick: () => { onCollabButtonClick: () => {
window.alert("You clicked on collab button. No collaboration is implemented."); window.alert("You clicked on collab button. No collaboration is implemented.");
}, },
viewModeEnabled: viewModeEnabled, viewModeEnabled: false,
zenModeEnabled: zenModeEnabled, zenModeEnabled: false,
gridModeEnabled: gridModeEnabled, gridModeEnabled: false,
isCollaborating: false, isCollaborating: false,
detectScroll: false, detectScroll: false,
handleKeyboardGlobally: false, handleKeyboardGlobally: false,
@ -432,8 +408,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
getSceneVersion() { getSceneVersion() {
if (this.excalidrawRef) { if (this.excalidrawRef) {
const elements = this.excalidrawRef.current.getSceneElements(); const elements = this.excalidrawRef.current.getSceneElements();
const sceneVersion = window.Excalidraw.getSceneVersion(elements); return window.Excalidraw.getSceneVersion(elements);
return sceneVersion;
} else { } else {
return this.SCENE_VERSION_ERROR; return this.SCENE_VERSION_ERROR;
} }