gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

use widget element to render for multiple excalidraw instances

Browse Source
This commit is contained in:
Tom 2022-04-08 10:31:44 +02:00
parent a33b0f1e1c
commit 5c46fe792d
1 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/public/app/widgets/type_widgets/canvas_note.js
View File

@ -1,24 +1,21 @@
import libraryLoader from "../../services/library_loader.js"; import libraryLoader from "../../services/library_loader.js";
import TypeWidget from "./type_widget.js"; import TypeWidget from "./type_widget.js";
import appContext from "../../services/app_context.js"; import appContext from "../../services/app_context.js";
import _debounce from './canvas-note-utils/lodash.debounce.js';
import _throttle from './canvas-note-utils/lodash.throttle.js';
import sleep from './canvas-note-utils/sleep.js'; import sleep from './canvas-note-utils/sleep.js';
import froca from "../../services/froca.js"; import froca from "../../services/froca.js";
import throttle from "./canvas-note-utils/lodash.throttle.js";
import debounce from "./canvas-note-utils/lodash.debounce.js"; import debounce from "./canvas-note-utils/lodash.debounce.js";
// NoteContextAwareWidget does not handle loading/refreshing of note context
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = ` const TPL = `
<div <div class="canvas-note-widget note-detail-canvas-note note-detail-printable">
id="parentContainer"
class="note-detail-canvas-note note-detail-printable"
style="overflow:auto; width: 100%; height: 500px; background-color: rgba(255,248,230,0.58); border: 1px double #efefef;"
>
<div id="app" style="width:100%; height: 100%"></div>
</div>
<style type="text/css"> <style type="text/css">
.note-detail-canvas-note {
height: 100%;
}
.excalidraw .App-menu_top .buttonList { .excalidraw .App-menu_top .buttonList {
display: flex; /*display: flex;*/
} }
.excalidraw-wrapper { .excalidraw-wrapper {
@ -34,6 +31,9 @@ const TPL = `
} }
</style> </style>
<!-- height here necessary .otherwise excalidraw not shown. also, one window resize necessary! -->
<div class="canvas-note-render" style="height: 500px"></div>
</div>
`; `;
@ -54,20 +54,23 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
} }
doRender() { doRender() {
const self = this;
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$render = this.$widget.find('.canvas-note-render');
this.$renderElement = this.$render.get(0);
libraryLoader libraryLoader
.requireLibrary(libraryLoader.EXCALIDRAW) .requireLibrary(libraryLoader.EXCALIDRAW)
.then(() => { .then(() => {
console.log("react, react-dom, excalidraw loaded"); console.log("react, react-dom, excalidraw loaded");
const excalidrawWrapper = document.getElementById("app");
const React = window.React; const React = window.React;
const ReactDOM = window.ReactDOM; const ReactDOM = window.ReactDOM;
ReactDOM.unmountComponentAtNode(excalidrawWrapper); ReactDOM.unmountComponentAtNode(this.$renderElement);
ReactDOM.render(React.createElement(this.ExcalidrawReactApp), excalidrawWrapper); ReactDOM.render(React.createElement(this.ExcalidrawReactApp), self.$renderElement);
}) })
return this.$widget; return this.$widget;
@ -157,15 +160,20 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
const [gridModeEnabled, setGridModeEnabled] = React.useState(false); const [gridModeEnabled, setGridModeEnabled] = React.useState(false);
React.useEffect(() => { React.useEffect(() => {
setDimensions({ const dimensions = {
width: excalidrawWrapperRef.current.getBoundingClientRect().width, width: excalidrawWrapperRef.current.getBoundingClientRect().width,
height: excalidrawWrapperRef.current.getBoundingClientRect().height height: excalidrawWrapperRef.current.getBoundingClientRect().height
}); };
console.log('effect, setdimensions', dimensions);
setDimensions(dimensions);
const onResize = () => { const onResize = () => {
setDimensions({ const dimensions = {
width: excalidrawWrapperRef.current.getBoundingClientRect().width, width: excalidrawWrapperRef.current.getBoundingClientRect().width,
height: excalidrawWrapperRef.current.getBoundingClientRect().height height: excalidrawWrapperRef.current.getBoundingClientRect().height
}); };
console.log('onResize, setdimensions', dimensions);
setDimensions(dimensions);
}; };
window.addEventListener("resize", onResize); window.addEventListener("resize", onResize);