c
/
Immediate-Mode-UI.Nuklear
Mirror von https://github.com/Immediate-Mode-UI/Nuklear.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.9.8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Nuklear: Tree</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
  $(document).ready(function() { init_search(); });
/* @license-end */
</script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr id="projectrow">
  <td id="projectalign">
   <div id="projectname">Nuklear
   </div>
   <div id="projectbrief">This is a minimal-state, immediate-mode graphical user interface toolkit written in ANSI C and licensed under public domain. It was designed as a simple embeddable user interface for application and does not have any dependencies, a default render backend or OS window/input handling but instead provides a highly modular, library-based approach, with simple input state for input and draw commands describing primitive shapes as output. So instead of providing a layered library that tries to abstract over a number of platform and render backends, it focuses only on the actual UI.</div>
  </td>
    <td>        <div id="MSearchBox" class="MSearchBoxInactive">
        <span class="left">
          <span id="MSearchSelect"                onmouseover="return searchBox.OnSearchSelectShow()"                onmouseout="return searchBox.OnSearchSelectHide()">&#160;</span>
          <input type="text" id="MSearchField" value="" placeholder="Search" accesskey="S"
               onfocus="searchBox.OnSearchFieldFocus(true)" 
               onblur="searchBox.OnSearchFieldFocus(false)" 
               onkeyup="searchBox.OnSearchFieldChange(event)"/>
          </span><span class="right">
            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.svg" alt=""/></a>
          </span>
        </div>
</td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.9.8 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search/",'.html');
/* @license-end */
</script>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
  <div id="nav-tree">
    <div id="nav-tree-contents">
      <div id="nav-sync" class="sync"></div>
    </div>
  </div>
  <div id="splitbar" style="-moz-user-select:none;" 
       class="ui-resizable-handle">
  </div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(document).ready(function(){initNavTree('Tree.html',''); initResizable(); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">Loading...</div>
<div class="SRStatus" id="Searching">Searching...</div>
<div class="SRStatus" id="NoMatches">No Matches</div>
</div>
</div>
</div>
</div>

<div><div class="header">
  <div class="headertitle"><div class="title">Tree</div></div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p>=============================================================================</p>
<pre class="fragment">                            TREE
</pre><p> =============================================================================</p>
<p>Trees represent two different concept. First the concept of a collapsible UI section that can be either in a hidden or visible state. They allow the UI user to selectively minimize the current set of visible UI to comprehend. The second concept are tree widgets for visual UI representation of trees.<br  />
<br  />
</p>
<p>Trees thereby can be nested for tree representations and multiple nested collapsible UI sections. All trees are started by calling of the <code>nk_tree_xxx_push_tree</code> functions and ended by calling one of the <code>nk_tree_xxx_pop_xxx()</code> functions. Each starting functions takes a title label and optionally an image to be displayed and the initial collapse state from the nk_collapse_states section.<br  />
<br  />
</p>
<p>The runtime state of the tree is either stored outside the library by the caller or inside which requires a unique ID. The unique ID can either be generated automatically from <code>__FILE__</code> and <code>__LINE__</code> with function <code>nk_tree_push</code>, by <code>__FILE__</code> and a user provided ID generated for example by loop index with function <code>nk_tree_push_id</code> or completely provided from outside by user with function <code>nk_tree_push_hashed</code>.</p>
<h1><a class="anchor" id="autotoc_md81"></a>
Usage</h1>
<p>To create a tree you have to call one of the seven <code>nk_tree_xxx_push_xxx</code> functions to start a collapsible UI section and <code>nk_tree_xxx_pop</code> to mark the end. Each starting function will either return <code>false(0)</code> if the tree is collapsed or hidden and therefore does not need to be filled with content or <code>true(1)</code> if visible and required to be filled.</p>
<p>!!! Note The tree header does not require and layouting function and instead calculates a auto height based on the currently used font size</p>
<p>The tree ending functions only need to be called if the tree content is actually visible. So make sure the tree push function is guarded by <code>if</code> and the pop call is only taken if the tree is visible.</p>
<div class="fragment"><div class="line"><span class="keywordflow">if</span> (<a class="code hl_define" href="nuklear_8h.html#aa53e8d85086bd6cf126ccca1aa18b2d8">nk_tree_push</a>(ctx, NK_TREE_TAB, <span class="stringliteral">&quot;Tree&quot;</span>, NK_MINIMIZED)) {</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#a76e65dc775c0bd5efaa3c8f38f96823f">nk_layout_row_dynamic</a>(...);</div>
<div class="line">    nk_widget(...);</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#a05362d2293e86def0f3ba6d312276a9a">nk_tree_pop</a>(ctx);</div>
<div class="line">}</div>
<div class="ttc" id="anuklear_8h_html_a05362d2293e86def0f3ba6d312276a9a"><div class="ttname"><a href="nuklear_8h.html#a05362d2293e86def0f3ba6d312276a9a">nk_tree_pop</a></div><div class="ttdeci">NK_API void nk_tree_pop(struct nk_context *)</div><div class="ttdef"><b>Definition</b> <a href="nuklear__tree_8c_source.html#l00190">nuklear_tree.c:190</a></div></div>
<div class="ttc" id="anuklear_8h_html_a76e65dc775c0bd5efaa3c8f38f96823f"><div class="ttname"><a href="nuklear_8h.html#a76e65dc775c0bd5efaa3c8f38f96823f">nk_layout_row_dynamic</a></div><div class="ttdeci">NK_API void nk_layout_row_dynamic(struct nk_context *ctx, float height, int cols)</div><div class="ttdoc">Sets current row layout to share horizontal space between @cols number of widgets evenly.</div><div class="ttdef"><b>Definition</b> <a href="nuklear__layout_8c_source.html#l00147">nuklear_layout.c:147</a></div></div>
<div class="ttc" id="anuklear_8h_html_aa53e8d85086bd6cf126ccca1aa18b2d8"><div class="ttname"><a href="nuklear_8h.html#aa53e8d85086bd6cf126ccca1aa18b2d8">nk_tree_push</a></div><div class="ttdeci">#define nk_tree_push(ctx, type, title, state)</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l02879">nuklear.h:2879</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="autotoc_md82"></a>
Reference</h1>
<table class="markdownTable">
<tr class="markdownTableHead">
<th class="markdownTableHeadNone">Function   </th><th class="markdownTableHeadNone">Description    </th></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone">nk_tree_push   </td><td class="markdownTableBodyNone">Start a collapsible UI section with internal state management    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">nk_tree_push_id   </td><td class="markdownTableBodyNone">Start a collapsible UI section with internal state management callable in a look    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone">nk_tree_push_hashed   </td><td class="markdownTableBodyNone">Start a collapsible UI section with internal state management with full control over internal unique ID use to store state    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">nk_tree_image_push   </td><td class="markdownTableBodyNone">Start a collapsible UI section with image and label header    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone">nk_tree_image_push_id   </td><td class="markdownTableBodyNone">Start a collapsible UI section with image and label header and internal state management callable in a look    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">nk_tree_image_push_hashed   </td><td class="markdownTableBodyNone">Start a collapsible UI section with image and label header and internal state management with full control over internal unique ID use to store state    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone">nk_tree_pop   </td><td class="markdownTableBodyNone">Ends a collapsible UI section    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">nk_tree_state_push   </td><td class="markdownTableBodyNone">Start a collapsible UI section with external state management    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone">nk_tree_state_image_push   </td><td class="markdownTableBodyNone">Start a collapsible UI section with image and label header and external state management    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">nk_tree_state_pop   </td><td class="markdownTableBodyNone">Ends a collapsabale UI section   </td></tr>
</table>
<h1><a class="anchor" id="autotoc_md83"></a>
nk_tree_type</h1>
<table class="markdownTable">
<tr class="markdownTableHead">
<th class="markdownTableHeadNone">Flag   </th><th class="markdownTableHeadNone">Description    </th></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone">NK_TREE_NODE   </td><td class="markdownTableBodyNone">Highlighted tree header to mark a collapsible UI section    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">NK_TREE_TAB   </td><td class="markdownTableBodyNone">Non-highlighted tree header closer to tree representations   </td></tr>
</table>
</div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
  <ul>
    <li class="footer">Generated by <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen"/></a> 1.9.8 </li>
  </ul>
</div>
</body>
</html>