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

fix curser mismatch by manually setting offset

Browse Source
This commit is contained in:
Tom 2022-04-09 12:16:45 +02:00
parent 45a66ab694
commit 4266156cee
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,9 +40,8 @@ const TPL = `
`; `;
/** /**
* FIXME: Buttons from one excalidraw get activated. Problems with instance?! * FIXME: Buttons from one excalidraw get activated. Problems with instance?! (maybe it is only visually, once
* * mouse is over one instance they change?)
* FIXME: when adding / removing splits, resize are not correctly called!!!
*/ */
export default class ExcalidrawTypeWidget extends TypeWidget { export default class ExcalidrawTypeWidget extends TypeWidget {
constructor() { constructor() {
@ -123,7 +122,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
} }
doRender() { doRender() {
const self = this;
this.$widget = $(TPL); this.$widget = $(TPL);
// leads to contain: none // leads to contain: none
@ -136,13 +134,13 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
libraryLoader libraryLoader
.requireLibrary(libraryLoader.EXCALIDRAW) .requireLibrary(libraryLoader.EXCALIDRAW)
.then(() => { .then(() => {
self.log("react, react-dom, excalidraw loaded"); this.log("react, react-dom, excalidraw loaded");
const React = window.React; const React = window.React;
const ReactDOM = window.ReactDOM; const ReactDOM = window.ReactDOM;
ReactDOM.unmountComponentAtNode(this.$renderElement); ReactDOM.unmountComponentAtNode(this.$renderElement);
ReactDOM.render(React.createElement(this.ExcalidrawReactApp), self.$renderElement); ReactDOM.render(React.createElement(this.ExcalidrawReactApp), this.$renderElement);
// FIXME: probably, now, i should manually trigger a refresh?! // FIXME: probably, now, i should manually trigger a refresh?!
}) })
@ -165,9 +163,9 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
* *
* FIXME: better a loop? * FIXME: better a loop?
*/ */
if (!this.excalidrawRef) { while (!this.excalidrawRef) {
this.log("doRefresh !!!!!!!!!!! excalidrawref not yet loeaded, sleep 1s..."); this.log("doRefresh !!!!!!!!!!! excalidrawref not yet loeaded, sleep 1s...");
await sleep(1000); await sleep(100);
} }
if (this.excalidrawRef.current && noteComplement.content) { if (this.excalidrawRef.current && noteComplement.content) {
@ -175,13 +173,19 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
const {elements, appState, files} = content; const {elements, appState, files} = content;
/** /**
* FIXME: appState will overwrite the width and height of container and lead to bugs! * use widths and offsets of current view, since stored appState has the state from
* maybe get width/height here anew? * previous edit. using the stored state would lead to pointer mismatch.
*/ */
const boundingClientRect = this.excalidrawWrapperRef.current.getBoundingClientRect();
appState.width = boundingClientRect.width;
appState.height = boundingClientRect.height;
appState.offsetLeft = boundingClientRect.left;
appState.offsetTop = boundingClientRect.top;
const sceneData = { const sceneData = {
elements, elements,
appState, appState,
// appState: {},
collaborators: [] collaborators: []
}; };
@ -214,6 +218,7 @@ 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();
*/ */
@ -241,6 +246,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
} }
/** /**
* (trilium)
* save content to backend * save content to backend
* spacedUpdate is kind of a debouncer. * spacedUpdate is kind of a debouncer.
*/ */
@ -277,8 +283,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
} }
} }
ExcalidrawReactApp() { ExcalidrawReactApp(handlers) {
var self = this;
const React = window.React; const React = window.React;
const Excalidraw = window.Excalidraw; const Excalidraw = window.Excalidraw;
@ -286,11 +291,11 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
const excalidrawRef = React.useRef(null); const excalidrawRef = React.useRef(null);
this.excalidrawRef = excalidrawRef; this.excalidrawRef = excalidrawRef;
const excalidrawWrapperRef = React.useRef(null); const excalidrawWrapperRef = React.useRef(null);
this.excalidrawWrapperRef = excalidrawWrapperRef;
const [dimensions, setDimensions] = React.useState({ const [dimensions, setDimensions] = React.useState({
width: undefined, width: undefined,
height: undefined height: undefined
}); });
self.setDimensions = setDimensions;
const [viewModeEnabled, setViewModeEnabled] = React.useState(false); const [viewModeEnabled, setViewModeEnabled] = React.useState(false);
const [zenModeEnabled, setZenModeEnabled] = React.useState(false); const [zenModeEnabled, setZenModeEnabled] = React.useState(false);
@ -345,7 +350,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
// self.saveData(); // self.saveData();
// }, 400); // }, 400);
// }, // },
onChange: debounce(self.onChangeHandler, self.debounceTimeOnchangeHandler), onChange: debounce(this.onChangeHandler, this.debounceTimeOnchangeHandler),
// onPointerUpdate: (payload) => console.log(payload), // onPointerUpdate: (payload) => console.log(payload),
onCollabButtonClick: () => { onCollabButtonClick: () => {
window.alert("You clicked on collab button") window.alert("You clicked on collab button")
@ -371,7 +376,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
*/ */
isNewSceneVersion() { isNewSceneVersion() {
const sceneVersion = this.getSceneVersion(); const sceneVersion = this.getSceneVersion();
this.log("isNewSceneVersion()", this.currentSceneVersion, sceneVersion); // this.log("isNewSceneVersion()", this.currentSceneVersion, sceneVersion);
if ( if (
this.currentSceneVersion === -1 // initial scene version update this.currentSceneVersion === -1 // initial scene version update
|| this.currentSceneVersion !== sceneVersion || this.currentSceneVersion !== sceneVersion