import{_ as t,a,b as r,ag as d}from"./chunks/framework.BcrMLAmg.js";const p=JSON.parse('{"title":"Tree","description":"","frontmatter":{},"headers":[],"relativePath":"references/elements/Tree.md","filePath":"references/elements/Tree.md","lastUpdated":1757844696000}'),o={name:"references/elements/Tree.md"};function l(n,e,s,i,c,h){return r(),a("div",null,e[0]||(e[0]=[d('<h1 id="tree" tabindex="-1">Tree <a class="header-anchor" href="#tree" aria-label="Permalink to &quot;Tree&quot;">​</a></h1><p><em>This is the tree class. It provides a hierarchical view of nodes that can be expanded and collapsed,</em><em>with support for selection and scrolling.</em></p><p>Extends: <code>VisualElement</code></p><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>nodes</td><td>table</td><td>{}</td><td>The tree structure containing node objects with {text, children} properties</td></tr><tr><td>expandedNodes</td><td>table</td><td>{}</td><td>Table of nodes that are currently expanded</td></tr><tr><td>scrollOffset</td><td>number</td><td>0</td><td>Current vertical scroll position</td></tr><tr><td>horizontalOffset</td><td>number</td><td>0</td><td>Current horizontal scroll position</td></tr><tr><td>nodeColor</td><td>color</td><td>white</td><td>Color of unselected nodes</td></tr><tr><td>selectedColor</td><td>color</td><td>lightBlue</td><td>Background color of selected node</td></tr></tbody></table><h2 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to &quot;Functions&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#tree-expandnode-node">Tree:expandNode</a></td><td>Tree</td><td>Expands a node to show its children</td></tr><tr><td><a href="#tree-collapsenode-node">Tree:collapseNode</a></td><td>Tree</td><td>Collapses a node to hide its children</td></tr><tr><td><a href="#tree-togglenode-node">Tree:toggleNode</a></td><td>Tree</td><td>Toggles between expanded and collapsed state</td></tr><tr><td><a href="#tree-onselect-callback">Tree:onSelect</a></td><td>Tree</td><td>Registers a callback for when a node is selected</td></tr><tr><td><a href="#tree-getnodesize">Tree:getNodeSize</a></td><td>number, number</td><td>Gets the size of the tree</td></tr></tbody></table><h2 id="tree-expandnode-node" tabindex="-1">Tree:expandNode(node) <a class="header-anchor" href="#tree-expandnode-node" aria-label="Permalink to &quot;Tree:expandNode(node)&quot;">​</a></h2><p>Expands a node</p><h3 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ul><li><code>node</code> <code>table</code> The node to expand</li></ul><h3 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ul><li><code>Tree</code> <code>self</code> The Tree instance</li></ul><h2 id="tree-collapsenode-node" tabindex="-1">Tree:collapseNode(node) <a class="header-anchor" href="#tree-collapsenode-node" aria-label="Permalink to &quot;Tree:collapseNode(node)&quot;">​</a></h2><p>Collapses a node</p><h3 id="parameters-1" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-1" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ul><li><code>node</code> <code>table</code> The node to collapse</li></ul><h3 id="returns-1" tabindex="-1">Returns <a class="header-anchor" href="#returns-1" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ul><li><code>Tree</code> <code>self</code> The Tree instance</li></ul><h2 id="tree-togglenode-node" tabindex="-1">Tree:toggleNode(node) <a class="header-anchor" href="#tree-togglenode-node" aria-label="Permalink to &quot;Tree:toggleNode(node)&quot;">​</a></h2><p>Toggles a node&#39;s expanded state</p><h3 id="parameters-2" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-2" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ul><li><code>node</code> <code>table</code> The node to toggle</li></ul><h3 id="returns-2" tabindex="-1">Returns <a class="header-anchor" href="#returns-2" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ul><li><code>Tree</code> <code>self</code> The Tree instance</li></ul><h2 id="tree-onselect-callback" tabindex="-1">Tree:onSelect(callback) <a class="header-anchor" href="#tree-onselect-callback" aria-label="Permalink to &quot;Tree:onSelect(callback)&quot;">​</a></h2><p>Registers a callback for when a node is selected</p><h3 id="parameters-3" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-3" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ul><li><code>callback</code> <code>function</code> The callback function</li></ul><h3 id="returns-3" tabindex="-1">Returns <a class="header-anchor" href="#returns-3" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ul><li><code>Tree</code> <code>self</code> The Tree instance</li></ul><h2 id="tree-getnodesize" tabindex="-1">Tree:getNodeSize() <a class="header-anchor" href="#tree-getnodesize" aria-label="Permalink to &quot;Tree:getNodeSize()&quot;">​</a></h2><p>Gets the size of the tree</p><h3 id="returns-4" tabindex="-1">Returns <a class="header-anchor" href="#returns-4" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ul><li><code>number</code> <code>width</code> The width of the tree</li><li><code>number</code> <code>height</code> The height of the tree</li></ul>',35)]))}const b=t(o,[["render",l]]);export{p as __pageData,b as default};