mirror of
https://github.com/zadam/trilium.git
synced 2025-10-21 15:49:00 +02:00
refactor(canvas): use new rendering mechanism
This commit is contained in:
parent
1b25b18d9e
commit
013e7a6aa4
@ -6,6 +6,7 @@ import type { LibraryItem } from "@excalidraw/excalidraw/types";
|
|||||||
import type { Theme } from "@excalidraw/excalidraw/element/types";
|
import type { Theme } from "@excalidraw/excalidraw/element/types";
|
||||||
import type Canvas from "./canvas_el.js";
|
import type Canvas from "./canvas_el.js";
|
||||||
import { CanvasContent } from "./canvas_el.js";
|
import { CanvasContent } from "./canvas_el.js";
|
||||||
|
import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
|
||||||
|
|
||||||
const TPL = /*html*/`
|
const TPL = /*html*/`
|
||||||
<div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
|
<div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
|
||||||
@ -184,7 +185,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
|
|||||||
});
|
});
|
||||||
|
|
||||||
await setupFonts();
|
await setupFonts();
|
||||||
this.canvasInstance.renderCanvas(renderElement);
|
const canvasEl = renderReactWidget(this, this.canvasInstance.createCanvasElement())[0];
|
||||||
|
renderElement.replaceChildren(canvasEl);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import "@excalidraw/excalidraw/index.css";
|
import "@excalidraw/excalidraw/index.css";
|
||||||
import { Excalidraw, getSceneVersion, exportToSvg } from "@excalidraw/excalidraw";
|
import { Excalidraw, getSceneVersion, exportToSvg } from "@excalidraw/excalidraw";
|
||||||
import { render, unmountComponentAtNode } from "preact/compat";
|
|
||||||
import { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem } from "@excalidraw/excalidraw/types";
|
import { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem } from "@excalidraw/excalidraw/types";
|
||||||
import { ExcalidrawElement, NonDeletedExcalidrawElement, Theme } from "@excalidraw/excalidraw/element/types";
|
import { ExcalidrawElement, NonDeletedExcalidrawElement, Theme } from "@excalidraw/excalidraw/element/types";
|
||||||
|
|
||||||
@ -26,27 +25,22 @@ export default class Canvas {
|
|||||||
this.initializedPromise = $.Deferred();
|
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() {
|
async waitForApiToBecomeAvailable() {
|
||||||
while (!this.excalidrawApi) {
|
while (!this.excalidrawApi) {
|
||||||
await this.initializedPromise;
|
await this.initializedPromise;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private createCanvasElement(opts: ExcalidrawProps) {
|
createCanvasElement() {
|
||||||
return (
|
return (
|
||||||
<div className="excalidraw-wrapper">
|
<div className="excalidraw-wrapper">
|
||||||
<Excalidraw {...opts} />
|
<Excalidraw
|
||||||
|
{...this.opts}
|
||||||
|
excalidrawAPI={api => {
|
||||||
|
this.excalidrawApi = api;
|
||||||
|
this.initializedPromise.resolve();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user