GitHub/Basalt2
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
d0678d4378413378dfc415b2f0fdb7dc8bfbde4e
Basalt2/docs/.vitepress/dist/references/visualelement.html
Robert Jelic d0678d4378 Vitepress
2025-02-10 07:22:01 +01:00

151 lines
111 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>VisualElement | Basalt</title>
<meta name="description" content="A CC:Tweaked UI Framework">
<meta name="generator" content="VitePress v1.0.0-rc.45">
<link rel="preload stylesheet" href="/assets/style.CuNZhYzf.css" as="style">
<script type="module" src="/assets/app.yweqp-TB.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.nQaBHiNx.js">
<link rel="modulepreload" href="/assets/chunks/theme.DMrn68il.js">
<link rel="modulepreload" href="/assets/references_visualelement.md.n7mzG37H.lean.js">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-a9a9e638><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c3508ec8></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c3508ec8> Skip to content </a><!--]--><!----><header class="VPNav" data-v-a9a9e638 data-v-f1e365da><div class="VPNavBar has-sidebar" data-v-f1e365da data-v-b9c8b02d><div class="wrapper" data-v-b9c8b02d><div class="container" data-v-b9c8b02d><div class="title" data-v-b9c8b02d><div class="VPNavBarTitle has-sidebar" data-v-b9c8b02d data-v-28a961f9><a class="title" href="/" data-v-28a961f9><!--[--><!--]--><!----><span data-v-28a961f9>Basalt</span><!--[--><!--]--></a></div></div><div class="content" data-v-b9c8b02d><div class="content-body" data-v-b9c8b02d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-b9c8b02d><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-b9c8b02d data-v-492ea56d><span id="main-nav-aria-label" class="visually-hidden" data-v-492ea56d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/home.html" tabindex="0" data-v-492ea56d data-v-2781b5e7><!--[--><span data-v-2781b5e7>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guides/" tabindex="0" data-v-492ea56d data-v-2781b5e7><!--[--><span data-v-2781b5e7>Guides</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/references/main.html" tabindex="0" data-v-492ea56d data-v-2781b5e7><!--[--><span data-v-2781b5e7>References</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-b9c8b02d data-v-ead91a81><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-ead91a81 data-v-b79b56d4 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-b79b56d4></span><span class="vpi-moon moon" data-v-b79b56d4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-b9c8b02d data-v-164c457f data-v-ee7a9424><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Pyroxenium/Basalt" aria-label="github" target="_blank" rel="noopener" data-v-ee7a9424 data-v-717b8b75><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-b9c8b02d data-v-9b536d0b data-v-e5380155><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-e5380155><span class="vpi-more-horizontal icon" data-v-e5380155></span></button><div class="menu" data-v-e5380155><div class="VPMenu" data-v-e5380155 data-v-97491713><!----><!--[--><!--[--><!----><div class="group" data-v-9b536d0b><div class="item appearance" data-v-9b536d0b><p class="label" data-v-9b536d0b>Appearance</p><div class="appearance-action" data-v-9b536d0b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-9b536d0b data-v-b79b56d4 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-b79b56d4></span><span class="vpi-moon moon" data-v-b79b56d4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-9b536d0b><div class="item social-links" data-v-9b536d0b><div class="VPSocialLinks social-links-list" data-v-9b536d0b data-v-ee7a9424><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Pyroxenium/Basalt" aria-label="github" target="_blank" rel="noopener" data-v-ee7a9424 data-v-717b8b75><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-b9c8b02d data-v-5dea55bf><span class="container" data-v-5dea55bf><span class="top" data-v-5dea55bf></span><span class="middle" data-v-5dea55bf></span><span class="bottom" data-v-5dea55bf></span></span></button></div></div></div></div><div class="divider" data-v-b9c8b02d><div class="divider-line" data-v-b9c8b02d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-a9a9e638 data-v-070ab83d><div class="container" data-v-070ab83d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-070ab83d><span class="vpi-align-left menu-icon" data-v-070ab83d></span><span class="menu-text" data-v-070ab83d>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-070ab83d data-v-c9ba27ad><button data-v-c9ba27ad>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-a9a9e638 data-v-ec846e01><div class="curtain" data-v-ec846e01></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-ec846e01><span class="visually-hidden" id="sidebar-aria-label" data-v-ec846e01> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-ec846e01><section class="VPSidebarItem level-0 is-link" data-v-ec846e01 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/main.html" data-v-f24171a4><!--[--><h2 class="text" data-v-f24171a4>References</h2><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/basalt.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Basalt</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/element.html" data-v-f24171a4><!--[--><h3 class="text" data-v-f24171a4>BasicElement</h3><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><section class="VPSidebarItem level-2 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/visualelement.html" data-v-f24171a4><!--[--><h4 class="text" data-v-f24171a4>VisualElement</h4><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><section class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/container.html" data-v-f24171a4><!--[--><h5 class="text" data-v-f24171a4>Container</h5><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><div class="VPSidebarItem level-4 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/baseframe.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Baseframe</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/frame.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Frame</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/monitor.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Monitor</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/bigmonitor.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>BigMonitor</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/button.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/checkbox.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Checkbox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/image.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/input.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/label.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Label</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/list.html" data-v-f24171a4><!--[--><h5 class="text" data-v-f24171a4>List</h5><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><div class="VPSidebarItem level-4 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/dropdown.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Dropdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/Radio.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/Menubar.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Menubar</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/program.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Program</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/progressbar.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Progressbar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/scrollbar.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Scrollbar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/slider.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/textfield.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Textfield</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-a9a9e638 data-v-91765379><div class="VPDoc has-sidebar has-aside" data-v-91765379 data-v-83890dd9><!--[--><!--]--><div class="container" data-v-83890dd9><div class="aside" data-v-83890dd9><div class="aside-curtain" data-v-83890dd9></div><div class="aside-container" data-v-83890dd9><div class="aside-content" data-v-83890dd9><div class="VPDocAside" data-v-83890dd9 data-v-6d7b3c46><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-6d7b3c46 data-v-c14bfc45><div class="content" data-v-c14bfc45><div class="outline-marker" data-v-c14bfc45></div><div class="outline-title" role="heading" aria-level="2" data-v-c14bfc45>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-c14bfc45><span class="visually-hidden" id="doc-outline-aria-label" data-v-c14bfc45> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-c14bfc45 data-v-3f927ebe><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-6d7b3c46></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-83890dd9><div class="content-container" data-v-83890dd9><!--[--><!--]--><main class="main" data-v-83890dd9><div style="position:relative;" class="vp-doc _references_visualelement" data-v-83890dd9><div><h1 id="visualelement" tabindex="-1">VisualElement <a class="header-anchor" href="#visualelement" aria-label="Permalink to &quot;VisualElement&quot;">​</a></h1><p>The VisualElement class is derived from the Element class and serves as the foundation for all visual components in Basalt. VisualElements include elements like frames, buttons, label&#39;s or input fields. The VisualElement class provides methods for managing the appearance, position, size, and other general visual properties of these elements.</p><p>VisualElement inherit from <a href="./element.html">BasicElement</a></p><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><table><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>background</td><td>color</td><td>Background color of the element.</td></tr><tr><td>foreground</td><td>color</td><td>Foreground color or text color.</td></tr><tr><td>x</td><td>number</td><td>Horizontal position of the element.</td></tr><tr><td>y</td><td>number</td><td>Vertical position of the element.</td></tr><tr><td>width</td><td>number</td><td>Width of the element.</td></tr><tr><td>height</td><td>number</td><td>Height of the element.</td></tr><tr><td>visible</td><td>bool</td><td>Whether the element is visible or hidden.</td></tr><tr><td>transparent</td><td>bool</td><td>Whether the element&#39;s background is transparent.</td></tr><tr><td>ignoreOffset</td><td>bool</td><td>Ignores parent&#39;s offset when positioning.</td></tr><tr><td>focused</td><td>bool</td><td>Whether the element currently has focus.</td></tr><tr><td>preRenderData</td><td>table</td><td>A table with custom pre-render information.</td></tr><tr><td>postRenderData</td><td>table</td><td>A table with custom post-render information.</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><p>Events are actions or occurrences that happen during the execution of your program. In Basalt, elements can respond to various events, such as user interactions or incoming redstone/rednet events.</p><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><a href="#onclick">onClick</a></td><td>Fires when the element is clicked.</td></tr><tr><td><a href="#onclickup">onClickUp</a></td><td>Fires when the mouse button is released on the element.</td></tr><tr><td><a href="#onrelease">onRelease</a></td><td>Fires when the mouse button is released.</td></tr><tr><td><a href="#onscroll">onScroll</a></td><td>Fires when scrolling with the mouse wheel.</td></tr><tr><td><a href="#ondrag">onDrag</a></td><td>Fires when the element is being dragged.</td></tr><tr><td><a href="#onhover">onHover</a></td><td>CraftOS-PC - fires when the mouse hovers over an element.</td></tr><tr><td><a href="#onleave">onLeave</a></td><td>CraftOS-PC - fires when the mouse leaves an element.</td></tr><tr><td><a href="#onkey">onKey</a></td><td>Fires when the element is focused and a keyboard key is pressed.</td></tr><tr><td><a href="#onkeyup">onKeyUp</a></td><td>Fires when the element is focused and a keyboard key is released.</td></tr><tr><td><a href="#onchar">onChar</a></td><td>Fires when the element is focused and a character key is pressed.</td></tr><tr><td><a href="#ongetfocus">onGetFocus</a></td><td>Fires when the element gains focus.</td></tr><tr><td><a href="#onlosefocus">onLoseFocus</a></td><td>Fires when the element loses focus.</td></tr><tr><td><a href="#onevent">onEvent</a></td><td>Fires on any other (uncategorized) event.</td></tr><tr><td><a href="#onresize">onResize</a></td><td>Fires when the size of the element is changed.</td></tr><tr><td><a href="#onreposition">onReposition</a></td><td>Fires when the position of the element is changed (moved to a new location).</td></tr></tbody></table><h2 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to &quot;Methods&quot;">​</a></h2><table><thead><tr><th>Methods</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#prerender">preRender</a></td><td>self</td><td>This method is beeing called before the actual element render happens.</td></tr><tr><td><a href="#render">render</a></td><td>self</td><td>This will render the element.</td></tr><tr><td><a href="#postrender">postRender</a></td><td>self</td><td>This method is beeing called after the actual element render happens.</td></tr><tr><td><a href="#pre-posttext">preText</a></td><td>self</td><td>This method allows the user to draw custom text for the element before rendering.</td></tr><tr><td><a href="#pre-postbg">preBg</a></td><td>self</td><td>This method allows the user to draw a custom background for the element before rendering.</td></tr><tr><td><a href="#pre-postfg">preFg</a></td><td>self</td><td>This method allows the user to draw a custom foreground (e.g., text color) for the element before rendering.</td></tr><tr><td><a href="#pre-postblit">preBlit</a></td><td>self</td><td>This method allows the user to draw text, bg and fg onto the element before rendering.</td></tr><tr><td><a href="#pre-posttextbox">preTextBox</a></td><td>self</td><td>This method allows the user to draw a custom text box within the element before rendering.</td></tr><tr><td><a href="#pre-postbackgroundbox">preBackgroundBox</a></td><td>self</td><td>This method allows the user to draw a custom background box before rendering.</td></tr><tr><td><a href="#pre-postforegroundbox">preForegroundBox</a></td><td>self</td><td>This method allows the user to draw a custom foreground box before rendering.</td></tr><tr><td><a href="#pre-posttext">postText</a></td><td>self</td><td>This method allows the user to draw custom text for the element after rendering.</td></tr><tr><td><a href="#pre-postbg">postBg</a></td><td>self</td><td>This method allows the user to draw a custom background for the element after rendering.</td></tr><tr><td><a href="#pre-postfg">postFg</a></td><td>self</td><td>This method allows the user to draw a custom foreground (e.g., text color) for the element after rendering.</td></tr><tr><td><a href="#pre-postblit">postBlit</a></td><td>self</td><td>This method allows the user to draw text, bg and fg onto the element after rendering.</td></tr><tr><td><a href="#pre-posttextbox">postTextBox</a></td><td>self</td><td>This method allows the user to draw a custom text box within the element after rendering.</td></tr><tr><td><a href="#pre-postbackgroundbox">postBackgroundBox</a></td><td>self</td><td>This method allows the user to draw a custom background box after rendering.</td></tr><tr><td><a href="#ppre-ostforegroundbox">postForegroundBox</a></td><td>self</td><td>This method allows the user to draw a custom foreground box after rendering.</td></tr><tr><td><a href="#clearprerender">clearPreRender</a></td><td>self</td><td>Clears any custom pre-render data that has been set for the element.</td></tr><tr><td><a href="#clearpostrender">clearPostRender</a></td><td>self</td><td>Clears any custom post-render data that has been set for the element.</td></tr><tr><td><a href="#getrelativeposition">getRelativePosition</a></td><td>number</td><td>Returns the relative position of the element within its parent container.</td></tr><tr><td><a href="#getabsoluteposition">getAbsolutePosition</a></td><td>number</td><td>Returns the absolute position of the element relative to the screen or window.</td></tr><tr><td><a href="#isinside">isInside</a></td><td>boolean</td><td>Checks whether a given point (coordinates) is inside the boundaries of the element. Returns a boolean value indicating whether the point is inside the element or not.</td></tr></tbody></table><h2 id="onclick" tabindex="-1">onClick <!----> <a class="header-anchor" href="#onclick" aria-label="Permalink to &quot;onClick &lt;C content=&quot;onClick&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>mouse_click</code> events.</p><h3 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mouseClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, button, x, y)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Button got clicked!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(mouseClick)</span></span></code></pre></div></details><h2 id="onclickup" tabindex="-1">onClickUp <!----> <a class="header-anchor" href="#onclickup" aria-label="Permalink to &quot;onClickUp &lt;C content=&quot;onClickUp&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>mouse_up</code> events.</p><h3 id="parameters-1" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-1" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-1" tabindex="-1">Returns <a class="header-anchor" href="#returns-1" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mouseRelease</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, button, x, y)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Mouse button released!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClickUp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(mouseRelease)</span></span></code></pre></div></details><h2 id="onrelease" tabindex="-1">onRelease <!----> <a class="header-anchor" href="#onrelease" aria-label="Permalink to &quot;onRelease &lt;C content=&quot;onRelease&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>mouse_up</code> events, even when it doesn&#39;t happen inside the element.</p><h3 id="parameters-2" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-2" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-2" tabindex="-1">Returns <a class="header-anchor" href="#returns-2" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> releaseHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Mouse button released!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onRelease</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(releaseHandler)</span></span></code></pre></div></details><h2 id="onscroll" tabindex="-1">onScroll <!----> <a class="header-anchor" href="#onscroll" aria-label="Permalink to &quot;onScroll &lt;C content=&quot;onScroll&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>mouse_scroll</code> events</p><h3 id="parameters-3" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-3" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-3" tabindex="-1">Returns <a class="header-anchor" href="#returns-3" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> list </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scrollHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, direction, x, y)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Mouse scrolled: &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> direction)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onScroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(scrollHandler)</span></span></code></pre></div></details><h2 id="ondrag" tabindex="-1">onDrag <!----> <a class="header-anchor" href="#ondrag" aria-label="Permalink to &quot;onDrag &lt;C content=&quot;onDrag&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>mouse_drag</code> events</p><h3 id="parameters-4" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-4" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-4" tabindex="-1">Returns <a class="header-anchor" href="#returns-4" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> movableFrame </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addMovableFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dragHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, button, x, y)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Element dragged!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">movableFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onDrag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dragHandler)</span></span></code></pre></div></details><h2 id="onhover" tabindex="-1">onHover <!----> <a class="header-anchor" href="#onhover" aria-label="Permalink to &quot;onHover &lt;C content=&quot;onHover&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>mouse_move</code> events.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This is only available for <a href="https://www.craftos-pc.cc/" target="_blank" rel="noreferrer">CraftOS-PC</a>. CC:Tweaked has no mouse_move events implemented.</p></div><h3 id="parameters-5" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-5" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-5" tabindex="-1">Returns <a class="header-anchor" href="#returns-5" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hoverHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, x, y)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Mouse hovered over the button!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onHover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(hoverHandler)</span></span></code></pre></div></details><h2 id="onleave" tabindex="-1">onLeave <!----> <a class="header-anchor" href="#onleave" aria-label="Permalink to &quot;onLeave &lt;C content=&quot;onLeave&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>mouse_move</code> events.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This is only available for <a href="https://www.craftos-pc.cc/" target="_blank" rel="noreferrer">CraftOS-PC</a>. CC:Tweaked has no mouse_move events implemented.</p></div><h3 id="parameters-6" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-6" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-6" tabindex="-1">Returns <a class="header-anchor" href="#returns-6" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> leaveHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Mouse left the button!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onLeave</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(leaveHandler)</span></span></code></pre></div></details><h2 id="onkey" tabindex="-1">onKey <!----> <a class="header-anchor" href="#onkey" aria-label="Permalink to &quot;onKey &lt;C content=&quot;onKey&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>key</code> events.</p><h3 id="parameters-7" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-7" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-7" tabindex="-1">Returns <a class="header-anchor" href="#returns-7" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addInput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> keyPressHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, key)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Key pressed: &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> keys[key])</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onKey</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(keyPressHandler)</span></span></code></pre></div></details><h2 id="onkeyup" tabindex="-1">onKeyUp <!----> <a class="header-anchor" href="#onkeyup" aria-label="Permalink to &quot;onKeyUp &lt;C content=&quot;onKeyUp&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for <code>key_up</code> events.</p><h3 id="parameters-8" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-8" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-8" tabindex="-1">Returns <a class="header-anchor" href="#returns-8" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addInput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> keyReleaseHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, key)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Key released: &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> keys[key])</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onKeyUp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(keyReleaseHandler)</span></span></code></pre></div></details><h2 id="onchar" tabindex="-1">onChar <!----> <a class="header-anchor" href="#onchar" aria-label="Permalink to &quot;onChar &lt;C content=&quot;onChar&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener <code>char</code> events.</p><h3 id="parameters-9" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-9" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-9" tabindex="-1">Returns <a class="header-anchor" href="#returns-9" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addInput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charPressHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, char)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Character pressed: &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> char)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onChar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(charPressHandler)</span></span></code></pre></div></details><h2 id="ongetfocus" tabindex="-1">onGetFocus <!----> <a class="header-anchor" href="#ongetfocus" aria-label="Permalink to &quot;onGetFocus &lt;C content=&quot;onGetFocus&quot;/&gt;&quot;">​</a></h2><p>Registers a new custom event listener for when the element gains focus.</p><h3 id="parameters-10" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-10" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-10" tabindex="-1">Returns <a class="header-anchor" href="#returns-10" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> textfield </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addTextfield</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Element gained focus!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">textfield</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onGetFocus</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(focusHandler)</span></span></code></pre></div></details><h2 id="onlosefocus" tabindex="-1">onLoseFocus <!----> <a class="header-anchor" href="#onlosefocus" aria-label="Permalink to &quot;onLoseFocus &lt;C content=&quot;onLoseFocus&quot;/&gt;&quot;">​</a></h2><p>Registers a new custom event listener for when the element loses focus.</p><h3 id="parameters-11" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-11" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-11" tabindex="-1">Returns <a class="header-anchor" href="#returns-11" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> textfield </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addTextfield</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> blurHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Element lost focus!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">textfield</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onLoseFocus</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(blurHandler)</span></span></code></pre></div></details><h2 id="onevent" tabindex="-1">onEvent <!----> <a class="header-anchor" href="#onevent" aria-label="Permalink to &quot;onEvent &lt;C content=&quot;onEvent&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for any other (uncategorized) event that may occur.</p><h3 id="parameters-12" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-12" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-12" tabindex="-1">Returns <a class="header-anchor" href="#returns-12" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> textfield </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addTextfield</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> pasteHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, event, text)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;paste&quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">then</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Text got pasted: &quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">text)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">textfield</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onLoseFocus</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(pasteHandler)</span></span></code></pre></div></details><h2 id="onresize" tabindex="-1">onResize <!----> <a class="header-anchor" href="#onresize" aria-label="Permalink to &quot;onResize &lt;C content=&quot;onResize&quot;/&gt;&quot;">​</a></h2><p>Registers a new custom event listener for when the size of the element is changed.</p><h3 id="parameters-13" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-13" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-13" tabindex="-1">Returns <a class="header-anchor" href="#returns-13" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resizeHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, width, height)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Element resized to &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;x&quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onResize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(resizeHandler)</span></span></code></pre></div></details><h2 id="onreposition" tabindex="-1">onReposition <!----> <a class="header-anchor" href="#onreposition" aria-label="Permalink to &quot;onReposition &lt;C content=&quot;onReposition&quot;/&gt;&quot;">​</a></h2><p>Registers a new event listener for when the position of the element is changed (moved to a new location).</p><h3 id="parameters-14" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-14" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>function</code> The function to call when the event triggers</li></ol><h3 id="returns-14" tabindex="-1">Returns <a class="header-anchor" href="#returns-14" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> repositionHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, x, y)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Element repositioned to (&quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;, &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> y </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onReposition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(repositionHandler)</span></span></code></pre></div></details><h2 id="prerender" tabindex="-1">preRender <!----> <a class="header-anchor" href="#prerender" aria-label="Permalink to &quot;preRender &lt;C content=&quot;preRender&quot;/&gt;&quot;">​</a></h2><p>This method is called before the actual element rendering happens. It can be overridden to perform specific preprocessing before the element is rendered.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This method is not supposed to be called outside of basalt&#39;s render system!</p></div><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- No example avaialble yet</span></span></code></pre></div></details><h2 id="render" tabindex="-1">render <!----> <a class="header-anchor" href="#render" aria-label="Permalink to &quot;render &lt;C content=&quot;render&quot;/&gt;&quot;">​</a></h2><p>This method renders the element. It can be overridden to customize the default rendering behavior of the element and modify it significantly. In case render gets overridden, the default visuals for the elements won&#39;t appear anymore.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This method is not supposed to be called outside of basalt&#39;s render system!</p></div><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- No example avaialble yet</span></span></code></pre></div></details><h2 id="postrender" tabindex="-1">postRender <!----> <a class="header-anchor" href="#postrender" aria-label="Permalink to &quot;postRender &lt;C content=&quot;postRender&quot;/&gt;&quot;">​</a></h2><p>This method is called after the actual element rendering happens. It can be overridden to perform additional processing after the element has been rendered.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This method is not supposed to be called outside of basalt&#39;s render system!</p></div><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- No example avaialble yet</span></span></code></pre></div></details><h2 id="pre-posttext" tabindex="-1">pre-<!---->/postText <!----> <a class="header-anchor" href="#pre-posttext" aria-label="Permalink to &quot;pre-&lt;C content=&quot;preText&quot;/&gt;/postText &lt;C content=&quot;postText&quot;/&gt;&quot;">​</a></h2><p>This method allows the user to draw custom text for the element before or after rendering.</p><h3 id="parameters-15" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-15" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number</code> x - The x-coordinate.</li><li><code>number</code> y - The y-coordinate.</li><li><code>string</code> The text content to be drawn</li></ol><h3 id="returns-15" tabindex="-1">Returns <a class="header-anchor" href="#returns-15" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello World!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="pre-postbg" tabindex="-1">pre-<!---->/postBg <!----> <a class="header-anchor" href="#pre-postbg" aria-label="Permalink to &quot;pre-&lt;C content=&quot;preBg&quot;/&gt;/postBg &lt;C content=&quot;postBg&quot;/&gt;&quot;">​</a></h2><p>These methods allow the user to draw a custom background for the element before or after rendering.</p><h3 id="parameters-16" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-16" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number</code> x - The x-coordinate.</li><li><code>number</code> y - The y-coordinate.</li><li><code>string</code> The background color to be drawn e.g. &quot;ffffff&quot;</li></ol><h3 id="returns-16" tabindex="-1">Returns <a class="header-anchor" href="#returns-16" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postBg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5555555&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="pre-postfg" tabindex="-1">pre-<!---->/postFg <!----> <a class="header-anchor" href="#pre-postfg" aria-label="Permalink to &quot;pre-&lt;C content=&quot;preFg&quot;/&gt;/postFg &lt;C content=&quot;postFg&quot;/&gt;&quot;">​</a></h2><p>These methods allow the user to draw a custom foreground for the element before or after rendering.</p><h3 id="parameters-17" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-17" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number</code> x - The x-coordinate.</li><li><code>number</code> y - The y-coordinate.</li><li><code>string</code> The foreground color to be drawn e.g. &quot;ffffff&quot;</li></ol><h3 id="returns-17" tabindex="-1">Returns <a class="header-anchor" href="#returns-17" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postFg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;22222222&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="pre-postblit" tabindex="-1">pre-<!---->/postBlit <!----> <a class="header-anchor" href="#pre-postblit" aria-label="Permalink to &quot;pre-&lt;C content=&quot;preBlit&quot;/&gt;/postBlit &lt;C content=&quot;postBlit&quot;/&gt;&quot;">​</a></h2><p>These methods allow the user to draw text, background, and foreground elements onto the element before or after rendering.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Note that text, fg, and bg must be the same string size!</p></div><h3 id="parameters-18" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-18" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number</code> x - The x-coordinate.</li><li><code>number</code> y - The y-coordinate.</li><li><code>string</code> The text content to be drawn</li><li><code>string</code> The foreground color to be drawn</li><li><code>string</code> The background color to be drawn</li></ol><h3 id="returns-18" tabindex="-1">Returns <a class="header-anchor" href="#returns-18" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postBlit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello World!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;111111111111&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dddddddddddd&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="pre-posttextbox" tabindex="-1">pre-<!---->/postTextBox <!----> <a class="header-anchor" href="#pre-posttextbox" aria-label="Permalink to &quot;pre-&lt;C content=&quot;preTextBox&quot;/&gt;/postTextBox &lt;C content=&quot;postTextBox&quot;/&gt;&quot;">​</a></h2><p>These methods allow the user to draw a custom text box with a single char before or after rendering.</p><h3 id="parameters-19" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-19" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number</code> x - The x-coordinate.</li><li><code>number</code> y - The y-coordinate.</li><li><code>number</code> width - The width of the box.</li><li><code>number</code> height - The height of the box.</li><li><code>string</code> the symbol you want to be drawn</li></ol><h3 id="returns-19" tabindex="-1">Returns <a class="header-anchor" href="#returns-19" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postTextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\2\4</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="pre-postbackgroundbox" tabindex="-1">pre-<!---->/postBackgroundBox <!----> <a class="header-anchor" href="#pre-postbackgroundbox" aria-label="Permalink to &quot;pre-&lt;C content=&quot;preBackgroundBox&quot;/&gt;/postBackgroundBox &lt;C content=&quot;postBackgroundBox&quot;/&gt;&quot;">​</a></h2><p>These methods allow the user to draw a custom background box for the element before or after rendering.</p><h3 id="parameters-20" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-20" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number</code> x - The x-coordinate.</li><li><code>number</code> y - The y-coordinate.</li><li><code>number</code> width - The width of the box.</li><li><code>number</code> height - The height of the box.</li><li><code>string|color</code> The background color as string or a color</li></ol><h3 id="returns-20" tabindex="-1">Returns <a class="header-anchor" href="#returns-20" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postBackgroundBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;241d&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- or colors.red e.g</span></span></code></pre></div></details><h2 id="pre-postforegroundbox" tabindex="-1">pre-<!---->/postForegroundBox <!----> <a class="header-anchor" href="#pre-postforegroundbox" aria-label="Permalink to &quot;pre-&lt;C content=&quot;preForegroundBox&quot;/&gt;/postForegroundBox &lt;C content=&quot;postForegroundBox&quot;/&gt;&quot;">​</a></h2><p>These methods allow the user to draw a custom foreground box for the element before or after rendering.</p><h3 id="parameters-21" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-21" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number</code> x - The x-coordinate.</li><li><code>number</code> y - The y-coordinate.</li><li><code>number</code> width - The width of the box.</li><li><code>number</code> height - The height of the box.</li><li><code>string|color</code> The foreground color as string or a color</li></ol><h3 id="returns-21" tabindex="-1">Returns <a class="header-anchor" href="#returns-21" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postForegroundBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1213&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- or colors.blue e.g</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postTextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="clearprerender-clearpostrender" tabindex="-1">clearPreRender <!----> / clearPostRender <!----> <a class="header-anchor" href="#clearprerender-clearpostrender" aria-label="Permalink to &quot;clearPreRender &lt;C content=&quot;clearPreRender&quot;/&gt; / clearPostRender &lt;C content=&quot;clearPostRender&quot;/&gt;&quot;">​</a></h2><p>These methods clear any custom pre-render or post-render data that has been set for the element, respectively.</p><h3 id="returns-22" tabindex="-1">Returns <a class="header-anchor" href="#returns-22" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>self</code></li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postForegroundBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1213&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">postTextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">():</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">):</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">clearPostRender</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="getrelativeposition" tabindex="-1">getRelativePosition <!----> <a class="header-anchor" href="#getrelativeposition" aria-label="Permalink to &quot;getRelativePosition &lt;C content=&quot;getRelativePosition&quot;/&gt;&quot;">​</a></h2><p>This method returns the relative position of the element within its parent container.</p><h3 id="parameters-22" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-22" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number?</code> The X-Coordinate</li><li><code>number?</code> The Y-Coordinate</li></ol><h3 id="returns-23" tabindex="-1">Returns <a class="header-anchor" href="#returns-23" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>number</code> X-Cooridnate</li><li><code>number</code> y-Cooridnate</li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">():</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">):</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">self</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getRelativePosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="getabsoluteposition" tabindex="-1">getAbsolutePosition <!----> <a class="header-anchor" href="#getabsoluteposition" aria-label="Permalink to &quot;getAbsolutePosition &lt;C content=&quot;getAbsolutePosition&quot;/&gt;&quot;">​</a></h2><p>This method returns the absolute position of the element relative to the screen or window.</p><h3 id="parameters-23" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-23" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number?</code> The X-Coordinate</li><li><code>number?</code> The Y-Coordinate</li></ol><h3 id="returns-24" tabindex="-1">Returns <a class="header-anchor" href="#returns-24" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>number</code> X-Cooridnate</li><li><code>number</code> y-Cooridnate</li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">():</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">):</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">self</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getAbsolutePosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="isinside" tabindex="-1">isInside <!----> <a class="header-anchor" href="#isinside" aria-label="Permalink to &quot;isInside &lt;C content=&quot;isInside&quot;/&gt;&quot;">​</a></h2><p>This method checks whether a given point (coordinates) is inside the boundaries of the element. It returns a boolean value indicating whether the point is inside the element or not.</p><h3 id="parameters-24" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-24" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ol><li><code>number?</code> The X-Coordinate</li><li><code>number?</code> The Y-Coordinate</li></ol><h3 id="returns-25" tabindex="-1">Returns <a class="header-anchor" href="#returns-25" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ol><li><code>boolean</code> true if the given coordinate is inside the element, otherwise false</li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">():</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">):</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">self</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">isInside</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- checks if x5, y5 is inside the button</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-87be45d1><!--[--><!--]--><div class="edit-info" data-v-87be45d1><div class="edit-link" data-v-87be45d1><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/Pyroxenium/Basalt/tree/master/docs/references/visualelement.md" target="_blank" rel="noreferrer" data-v-87be45d1><!--[--><span class="vpi-square-pen edit-link-icon" data-v-87be45d1></span> Edit this page<!--]--></a></div><!----></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-a9a9e638 data-v-c970a860><div class="container" data-v-c970a860><p class="message" data-v-c970a860>Released under the MIT License.</p><p class="copyright" data-v-c970a860>Copyright © 2024 Robert Jelic</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guides_home.md\":\"DC7WJlgs\",\"pinestore.md\":\"B0KfH_5R\",\"references_frame.md\":\"Dt7OjqK0\",\"references_checkbox.md\":\"BBPeYSRt\",\"index.md\":\"Bpyy5t2w\",\"references_radio.md\":\"LgX1ff8b\",\"references_main.md\":\"B1Dq-dDJ\",\"guides.md\":\"CfLfS2yk\",\"references_bigmonitor.md\":\"BoIb6-Go\",\"readme.md\":\"bK1e9QN5\",\"references_textfield.md\":\"hQdUZtL3\",\"references_program.md\":\"B4UPNIcG\",\"download.md\":\"DGGRiZUZ\",\"references_baseframe.md\":\"DJfcFM_J\",\"home.md\":\"Byvc0x1l\",\"snippets.md\":\"2DkaDryp\",\"references_label.md\":\"DC06ZvEp\",\"references_image.md\":\"CEW9iKEu\",\"references_dropdown.md\":\"Dm2lH27n\",\"guides_properties.md\":\"CHSlSACG\",\"references_monitor.md\":\"Do2-LUnA\",\"guides_getting-started.md\":\"DvN8P1BE\",\"references_menubar.md\":\"8swstgps\",\"references_slider.md\":\"DNu_WQBi\",\"references_input.md\":\"DXVE1-KW\",\"references_button.md\":\"DFkqJOev\",\"references_progressbar.md\":\"cpIpKcA2\",\"references_list.md\":\"DWbuSJOO\",\"references_container.md\":\"CJzA3LLn\",\"references_basalt.md\":\"Bw02338B\",\"references_element.md\":\"cOGDXUe7\",\"references_visualelement.md\":\"n7mzG37H\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Basalt\",\"description\":\"A CC:Tweaked UI Framework\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"editLink\":{\"pattern\":\"https://github.com/Pyroxenium/Basalt/tree/master/docs/:path\"},\"search\":{\"provider\":\"local\"},\"outline\":2,\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024 Robert Jelic\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/home\"},{\"text\":\"Guides\",\"link\":\"/guides/\"},{\"text\":\"References\",\"link\":\"/references/main\"}],\"docFooter\":{\"prev\":false,\"next\":false},\"sidebar\":{\"/guides/\":[{\"text\":\"Getting Started\",\"items\":[{\"text\":\"Home\",\"link\":\"/guide/\"},{\"text\":\"One\",\"link\":\"/guide/one\"},{\"text\":\"Two\",\"link\":\"/guide/two\"}]}],\"/references/\":[{\"text\":\"References\",\"link\":\"references/main\",\"items\":[{\"text\":\"Basalt\",\"link\":\"references/basalt\"},{\"text\":\"BasicElement\",\"link\":\"references/element\",\"items\":[{\"text\":\"VisualElement\",\"link\":\"references/visualelement\",\"items\":[{\"text\":\"Container\",\"link\":\"references/container\",\"items\":[{\"text\":\"Baseframe\",\"link\":\"references/baseframe\"},{\"text\":\"Frame\",\"link\":\"references/frame\"},{\"text\":\"Monitor\",\"link\":\"references/monitor\"},{\"text\":\"BigMonitor\",\"link\":\"references/bigmonitor\"}]},{\"text\":\"Button\",\"link\":\"references/button\"},{\"text\":\"Checkbox\",\"link\":\"references/checkbox\"},{\"text\":\"Image\",\"link\":\"references/image\"},{\"text\":\"Input\",\"link\":\"references/input\"},{\"text\":\"Label\",\"link\":\"references/label\"},{\"text\":\"List\",\"link\":\"references/list\",\"items\":[{\"text\":\"Dropdown\",\"link\":\"references/dropdown\"},{\"text\":\"Radio\",\"link\":\"references/Radio\"},{\"text\":\"Menubar\",\"link\":\"references/Menubar\"}]},{\"text\":\"Program\",\"link\":\"references/program\"},{\"text\":\"Progressbar\",\"link\":\"references/progressbar\"},{\"text\":\"Scrollbar\",\"link\":\"references/scrollbar\"},{\"text\":\"Slider\",\"link\":\"references/slider\"},{\"text\":\"Textfield\",\"link\":\"references/textfield\"}]}]}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Pyroxenium/Basalt\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink