Explanation of how hovering over an element selects it in the example

[ddorstijn]

I know Reka is a state manager and this isn't fully related, but there seems to be enough overlap. In some way, hovering over an element on the site selects it. This is quite crucial behaviour in any visual editor. If I understand correctly, the code for this is handled in ComponentEditor.tsx

reka.js/site/editor/ComponentEditor.tsx

Lines 157 to 180 in ce62cfd

	const mouseoverListener = (e: MouseEvent) => {
	e.stopPropagation();
	this.setTplEvent('hovered', tpl);
	};
	const mousedownListener = (e: MouseEvent) => {
	e.stopPropagation();
	this.setTplEvent('selected', tpl);
	};
	const mouseoutListener = (e: MouseEvent) => {
	e.stopPropagation();
	if (this.tplEvent.hovered?.id !== tpl.id) {
	return;
	}
	this.setTplEvent('hovered', tpl);
	};
	if (addListeners) {
	dom.addEventListener('mouseover', mouseoverListener);
	dom.addEventListener('mousedown', mousedownListener);
	dom.addEventListener('mouseout', mouseoutListener);
	}

Trying to recreate this in another language is quite an endeavor as it isn't fully clear what the connectTplDom function actually does and how it interacts with the editor. This currently blocks my progress using Reka in my own editor. Could there be some documentation about how one can use these specialized functions to interface between the HTML and the frame tpl's?

[def-roth]

There is quite more happening here.

1. The dom elements get registered with connectTplDOM
2. The functions in your excerpt are registered
3. If the registered functions are called mobx triggers a state update
4. The state update activates selection borders, template layers and template settings

Mobx is a reactive state management system. For a first understanding you can think of mobx having a global state storage and whenever a change is made everything depending on it is updated. Although this can be tricky as states might not be obvious.