- Notifications
You must be signed in to change notification settings - Fork2.4k
Description
What happened?
We are using tldraw to support drawing annotations over screen shares in the Roam app (https://ro.am). Our app is based on Electron and opens multiple windows so it uses tldraw in cross-realm (aka multi-realm) scenarios. This basically means that we have one window (the main one) which runs all the JavaScript code but its rendering to multiple windows which each have their own DOM. Somewhat confusingly each DOM has its own JavaScript objects for nodes soinstanceof checks do not work. In our testing we found that only two small changes were needed to make tldraw work in this environment:
diff --git a/node_modules/@tldraw/editor/dist-esm/lib/editor/Editor.mjs b/node_modules/@tldraw/editor/dist-esm/lib/editor/Editor.mjsindex f0a5444..12d1c11 100644--- a/node_modules/@tldraw/editor/dist-esm/lib/editor/Editor.mjs+++ b/node_modules/@tldraw/editor/dist-esm/lib/editor/Editor.mjs@@ -2589,7 +2589,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed] * @public */ updateViewportScreenBounds(screenBounds, center = false) {- if (screenBounds instanceof HTMLElement) {+ if (screenBounds.nodeType === Node.ELEMENT_NODE) { const rect = screenBounds.getBoundingClientRect(); screenBounds = new Box( rect.left || rect.x,diff --git a/node_modules/@tldraw/editor/dist-esm/lib/utils/dom.mjs b/node_modules/@tldraw/editor/dist-esm/lib/utils/dom.mjsindex 1578001..bc614a5 100644--- a/node_modules/@tldraw/editor/dist-esm/lib/utils/dom.mjs+++ b/node_modules/@tldraw/editor/dist-esm/lib/utils/dom.mjs@@ -1,6 +1,6 @@ import { debugFlags, pointerCaptureTrackingObject } from "./debug-flags.mjs"; function loopToHtmlElement(elm) {- if (elm instanceof HTMLElement) return elm;+ if (elm.nodeType === Node.ELEMENT_NODE) return elm; if (elm.parentElement) return loopToHtmlElement(elm.parentElement); else throw Error("Could not find a parent element of an HTML type!"); }
This issue body waspartially generated by patch-package.
How can we reproduce the bug?
This will likely be difficult to reproduce outside of our environment. You would need to create a multi-realm app in Chrome (which even we haven't tried doing). If necessary we can try to figure out how to set that up though. Please let us know how you'd like to proceed.
What browsers are you seeing the problem on?
Chrome
Where did this happen?
The developer package
Contact Details
No response
Code of Conduct
- I agree to follow this project's Code of Conduct