feat: allow configuration of window global for event subscriptions

[loc]

Background

In multi-window applications, both on the web and in web embedders like Electron or CEF, it is not unusual to open child windows as "dumb" windows that serve as a render target only and allow their parent to retain control of all scripting responsibilities. In order for event listeners to work correctly, though, rendering code has to take into account the fact that input subscriptions need to be setup for the render target (child) window, rather than the control window.

Proposed change

As far as I can tell, only the drag and drop module and the Transformer class access the window object for event subscription.

Transformer

This change adds an optional configuration property to Stage which sets the window global that the Konva should be using to make event subscriptions within this stage. It also adds a public getter for this value.

// new constructor config property
var stage = new Konva.Stage({
    // ...normal configuration
    windowGlobal: childWindow,
});
// new getter
stage.getWindowGlobal();

Drag and drop

The drag and drop code is a little tricky because the event subscription happens at the top level of the module. To delay that in order to subscribe to the window global we actually care about, we defer that event subscription until Stage construction.

Miscellaneous

I had to reorder the Transformer destructor to remove events before detaching — I don't know the code well enough to know the implications of that, so please advise if that is undesirable.

[lavrton]

How child windows are created? Can they use their own scripts?

[loc]

Child windows are created with the window.open API, and can be used to load a webpage, as normal, or to create an empty page (with the url about:blank) that is available for manipulation. It does produce a separate javascript runtime instance, but you don't have to use it, and can instead control the window from the parent runtime.

For example:

const child = window.open('about:blank', '_blank', 'width=100,height=100');
const ele = child.document.createElement('marquee');
ele.innerText = 'Hello world';
child.document.body.replaceChildren(ele);

[loc]

@lavrton anything I can do to get this merged? Thanks!

[lavrton]

What I don't like in the current change, is that creating several stages my break DragAndDrop module.

registerDragAndDropListenersForWindowGlobal(this.getWindowGlobal()); is called in constructor. But what if we create another stage?

[loc]

What do you think breaks in the DragAndDrop module? If two stages are created with the same window global, the second call to registerDragAndDropListenersForWindowGlobal is effectively a no-op, as it just tears down and sets up the listeners again. If the second stage uses a different window global, then it just sets up listeners on the new window global, which is essential for drag and drop to work in the new window.

[lavrton]

Probably should work ok. Can you restore nodejs tests? Need to make sure that window can be undefined.