07 / 11
Add interaction without changing the SVG compiler
Use full-mode data attributes and one event listener on the host.
01 / Events
Listen once at the SVG host
full mode adds stable attributes such as data-node-id, data-node-kind, data-port-id, data-wire-source, and data-wire-target.
Use event delegation instead of adding a handler to every SVG element:
ts
const host = document.querySelector('[data-schemd-host]');
function handleClick(event: Event) {
const element = event.target instanceof Element ? event.target : null;
const node = element?.closest<SVGGElement>('[data-node-id]');
if (node) node.classList.toggle('is-selected');
}
host?.addEventListener('click', handleClick);
// Later: host?.removeEventListener('click', handleClick);
Keep application state outside the SVG. Recompiling the same source remains deterministic.