profectus-docs/assets/guide_advanced-concepts_nodes.md.525c1005.js

import{_ as e,c as t,o,N as s}from"./chunks/framework.0799945b.js";const _=JSON.parse('{"title":"Nodes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/nodes.md","lastUpdated":1680966801000}'),n={name:"guide/advanced-concepts/nodes.md"},a=s('<h1 id="nodes" tabindex="-1">Nodes <a class="header-anchor" href="#nodes" aria-label="Permalink to &quot;Nodes&quot;">​</a></h1><p>Every feature that is rendered in the DOM should have a <code>Node</code> component within it, which registers itself to the closest <code>Context</code> component (typically within the<code>Layer</code>&#39;s component) and tracks the bounding rect (both size and position) of the DOM element. You can then search for a feature&#39;s unique <code>id</code> property within <code>layer.nodes</code> to get access to the DOM element for that feature, if it currently exists.</p><p>This can be used for features with more complex displays, such as particle effects positioned relative to another feature, or drawing links between different nodes.</p><p>The bounding rect that will typically be kept up to date and react to things like nodes changing size, or moving because of the window resizing or feature&#39;s showing or hiding. However, there are ocassional situations where it may become out of sync, so it&#39;s recommended to only use the node system for visual effects, where any glitches will be relatively minor.</p>',4),i=[a];function r(c,d,h,l,p,u){return o(),t("div",null,i)}const m=e(n,[["render",r]]);export{_ as __pageData,m as default};