gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

refactor(canvas): use new rendering mechanism

Browse Source
This commit is contained in:
Elian Doran 2025-08-12 21:04:43 +03:00
parent 1b25b18d9e
commit 013e7a6aa4
No known key found for this signature in database
2 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/widgets/type_widgets/canvas.ts
View File

@ -6,6 +6,7 @@ import type { LibraryItem } from "@excalidraw/excalidraw/types";
import type { Theme } from "@excalidraw/excalidraw/element/types";
import type Canvas from "./canvas_el.js";
import { CanvasContent } from "./canvas_el.js";
import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
const TPL = /*html*/`
<div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
@ -184,7 +185,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
});
await setupFonts();
this.canvasInstance.renderCanvas(renderElement);
const canvasEl = renderReactWidget(this, this.canvasInstance.createCanvasElement())[0];
renderElement.replaceChildren(canvasEl);
}
/**

22
apps/client/src/widgets/type_widgets/canvas_el.tsx
View File

@ -1,6 +1,5 @@
import "@excalidraw/excalidraw/index.css";
import { Excalidraw, getSceneVersion, exportToSvg } from "@excalidraw/excalidraw";
import { render, unmountComponentAtNode } from "preact/compat";
import { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem } from "@excalidraw/excalidraw/types";
import { ExcalidrawElement, NonDeletedExcalidrawElement, Theme } from "@excalidraw/excalidraw/element/types";
@ -26,27 +25,22 @@ export default class Canvas {
this.initializedPromise = $.Deferred();
}
renderCanvas(targetEl: HTMLElement) {
unmountComponentAtNode(targetEl);
render(this.createCanvasElement({
...this.opts,
excalidrawAPI: (api: ExcalidrawImperativeAPI) => {
this.excalidrawApi = api;
this.initializedPromise.resolve();
},
}), targetEl);
}
async waitForApiToBecomeAvailable() {
while (!this.excalidrawApi) {
await this.initializedPromise;
}
}
private createCanvasElement(opts: ExcalidrawProps) {
createCanvasElement() {
return (
<div className="excalidraw-wrapper">
<Excalidraw {...opts} />
<Excalidraw
{...this.opts}
excalidrawAPI={api => {
this.excalidrawApi = api;
this.initializedPromise.resolve();
}}
/>
</div>
);
}