Mike/FlexLove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1024fd81dedac2458e90e7c8c0e9cfb37400603c
FlexLove/docs/versions/v0.6.1/api.html
Michael Freno 1fbb16a00c docs update
2025-12-14 19:15:52 -05:00

5917 lines
259 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. 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">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FlexLöve v0.6.1 - API Reference</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
Helvetica, Arial, sans-serif;
background-color: #0d1117;
color: #c9d1d9;
line-height: 1.6;
}
.container {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 280px;
background-color: #161b22;
border-right: 1px solid #30363d;
position: fixed;
height: 100vh;
overflow-y: auto;
padding: 20px;
}
.sidebar-header {
padding-bottom: 15px;
border-bottom: 1px solid #30363d;
margin-bottom: 15px;
}
.sidebar-header h2 {
color: #58a6ff;
font-size: 1.2rem;
}
.sidebar-header a {
color: #8b949e;
text-decoration: none;
font-size: 0.9rem;
display: block;
margin-top: 5px;
}
.sidebar-header a:hover {
color: #58a6ff;
}
#search {
width: 100%;
padding: 8px 12px;
background-color: #0d1117;
border: 1px solid #30363d;
border-radius: 6px;
color: #c9d1d9;
font-size: 14px;
margin-bottom: 15px;
}
#search:focus {
outline: none;
border-color: #58a6ff;
}
.nav-section {
margin-bottom: 15px;
}
.nav-class {
color: #c9d1d9;
font-weight: 600;
padding: 8px 12px;
cursor: pointer;
border-radius: 6px;
transition: background-color 0.2s;
display: block;
text-decoration: none;
}
.nav-class:hover {
background-color: #21262d;
}
.nav-members {
display: none;
padding-left: 20px;
margin-top: 5px;
}
.nav-members.active {
display: block;
}
.nav-member {
color: #8b949e;
padding: 4px 12px;
font-size: 0.9rem;
cursor: pointer;
border-radius: 6px;
transition: background-color 0.2s;
display: block;
text-decoration: none;
}
.nav-member:hover {
background-color: #21262d;
color: #c9d1d9;
}
.content {
margin-left: 280px;
flex: 1;
padding: 40px 60px;
max-width: 1200px;
}
.content h1 {
color: #58a6ff;
font-size: 2rem;
margin: 2rem 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid #30363d;
}
.content h1:first-child {
margin-top: 0;
}
.content h2 {
color: #79c0ff;
font-size: 1.5rem;
margin: 1.5rem 0 0.8rem 0;
font-family: "Courier New", monospace;
}
.content h3 {
color: #c9d1d9;
font-size: 1.2rem;
margin: 1.2rem 0 0.6rem 0;
}
.content p {
margin: 0.8rem 0;
color: #c9d1d9;
}
.content code {
background-color: #161b22;
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
monospace;
font-size: 0.9em;
}
.content pre {
background-color: #161b22;
padding: 16px;
border-radius: 6px;
overflow-x: auto;
margin: 1rem 0;
border: 1px solid #30363d;
}
.content pre code {
background-color: transparent;
padding: 0;
}
.content a {
color: #58a6ff;
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
}
.content ul,
.content ol {
margin: 0.8rem 0;
padding-left: 2rem;
}
.content li {
margin: 0.4rem 0;
}
.content table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
.content th,
.content td {
border: 1px solid #30363d;
padding: 8px 12px;
text-align: left;
}
.content th {
background-color: #161b22;
font-weight: 600;
}
.content blockquote {
background-color: #1c2128;
border-left: 4px solid #f85149;
padding: 12px 16px;
margin: 1rem 0;
border-radius: 6px;
}
.content blockquote p {
margin: 0.4rem 0;
}
.content blockquote strong {
color: #f85149;
}
.content hr {
border: none;
border-top: 1px solid #30363d;
margin: 2rem 0;
}
.version-selector {
margin-top: 10px;
position: relative;
}
.version-selector select {
width: 100%;
padding: 8px 12px;
background-color: #0d1117;
border: 1px solid #30363d;
border-radius: 6px;
color: #c9d1d9;
font-size: 14px;
cursor: pointer;
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%238b949e" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/></svg>');
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 12px;
padding-right: 32px;
}
.version-selector select:hover {
background-color: #161b22;
border-color: #58a6ff;
}
.version-selector select:focus {
outline: none;
border-color: #58a6ff;
}
.version-badge {
display: inline-block;
background-color: #238636;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
margin-left: 6px;
font-weight: 600;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background-color: #21262d;
border: 1px solid #30363d;
border-radius: 6px;
padding: 10px 15px;
color: #c9d1d9;
text-decoration: none;
opacity: 0;
transition: opacity 0.3s;
}
.back-to-top.visible {
opacity: 1;
}
.back-to-top:hover {
background-color: #30363d;
}
.hamburger {
display: none;
position: fixed;
top: 20px;
left: 20px;
z-index: 1001;
background-color: #21262d;
border: 1px solid #30363d;
border-radius: 6px;
padding: 10px;
cursor: pointer;
width: 44px;
height: 44px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
transition: left 0.3s;
}
.hamburger.active {
left: 220px;
}
.hamburger:hover {
background-color: #30363d;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background-color: #c9d1d9;
transition: all 0.3s;
}
.hamburger.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.mobile-overlay.active {
display: block;
}
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s;
z-index: 1000;
}
.sidebar.mobile-open {
transform: translateX(0);
}
.content {
margin-left: 0;
padding: 20px;
padding-top: 80px;
}
}
</style>
</head>
<body>
<button class="hamburger" id="hamburger" aria-label="Toggle navigation menu">
<span></span>
<span></span>
<span></span>
</button>
<div class="mobile-overlay" id="mobile-overlay"></div>
<div class="container">
<nav class="sidebar">
<div class="sidebar-header">
<h2>
FlexLöve
<span style="font-size: 0.6em; color: #8b949e">v0.6.1</span>
</h2>
<a href="../../index.html">← Back to Home</a>
<div class="version-selector">
<select
id="version-dropdown"
onchange="window.versionNavigate(this.value)"
>
<option value="">📚 Switch Version</option>
<option value="current">v0.6.1 (Latest)</option>
<option value="v0.6.0">v0.6.0</option>
<option value="v0.5.4">v0.5.4</option>
<option value="v0.5.2">v0.5.2</option>
<option value="v0.5.0">v0.5.0</option>
<option value="v0.4.2">v0.4.2</option>
<option value="v0.4.1">v0.4.1</option>
<option value="v0.4.0">v0.4.0</option>
<option value="v0.3.1">v0.3.1</option>
<option value="v0.2.3">v0.2.3</option>
<option value="v0.2.2">v0.2.2</option>
<option value="v0.2.1">v0.2.1</option>
<option value="v0.2.0">v0.2.0</option>
</select>
</div>
</div>
<input type="text" id="search" placeholder="Search API..." />
<div id="nav-content">
<div class="nav-section" data-class="animation">
<a href="#animation" class="nav-class">Animation</a>
<div class="nav-members">
<a href="#apply" class="nav-member">apply</a>
<a href="#duration" class="nav-member">duration</a>
<a href="#elapsed" class="nav-member">elapsed</a>
<a href="#fade" class="nav-member">fade</a>
<a href="#final" class="nav-member">final</a>
<a href="#interpolate" class="nav-member">interpolate</a>
<a href="#new" class="nav-member">new</a>
<a href="#scale" class="nav-member">scale</a>
<a href="#start" class="nav-member">start</a>
<a href="#transform" class="nav-member">transform</a>
<a href="#transition" class="nav-member">transition</a>
<a href="#update" class="nav-member">update</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-index" class="nav-member">__index</a>
<a href="#-resultdirty" class="nav-member">_resultDirty</a>
</div>
</div>
<div class="nav-section" data-class="animationprops">
<a href="#animationprops" class="nav-class">AnimationProps</a>
<div class="nav-members">
<a href="#duration" class="nav-member">duration</a>
<a href="#final" class="nav-member">final</a>
<a href="#start" class="nav-member">start</a>
<a href="#transform" class="nav-member">transform</a>
<a href="#transition" class="nav-member">transition</a>
</div>
</div>
<div class="nav-section" data-class="color">
<a href="#color" class="nav-class">Color</a>
<div class="nav-members">
<a href="#a" class="nav-member">a</a>
<a href="#b" class="nav-member">b</a>
<a href="#fromhex" class="nav-member">fromHex</a>
<a href="#g" class="nav-member">g</a>
<a href="#isvalidcolorformat" class="nav-member"
>isValidColorFormat</a
>
<a href="#new" class="nav-member">new</a>
<a href="#parse" class="nav-member">parse</a>
<a href="#r" class="nav-member">r</a>
<a href="#sanitizecolor" class="nav-member">sanitizeColor</a>
<a href="#torgba" class="nav-member">toRGBA</a>
<a href="#validatecolor" class="nav-member">validateColor</a>
<a href="#validatecolorchannel" class="nav-member"
>validateColorChannel</a
>
<a href="#validatehexcolor" class="nav-member"
>validateHexColor</a
>
<a href="#validatenamedcolor" class="nav-member"
>validateNamedColor</a
>
<a href="#validatergbcolor" class="nav-member"
>validateRGBColor</a
>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-index" class="nav-member">__index</a>
</div>
</div>
<div class="nav-section" data-class="element">
<a href="#element" class="nav-class">Element</a>
<div class="nav-members">
<a href="#active" class="nav-member">active</a>
<a href="#addchild" class="nav-member">addChild</a>
<a href="#aligncontent" class="nav-member">alignContent</a>
<a href="#alignitems" class="nav-member">alignItems</a>
<a href="#alignself" class="nav-member">alignSelf</a>
<a href="#animation" class="nav-member">animation</a>
<a href="#applypositioningoffsets" class="nav-member"
>applyPositioningOffsets</a
>
<a href="#autogrow" class="nav-member">autoGrow</a>
<a href="#autoscaletext" class="nav-member">autoScaleText</a>
<a href="#autosizing" class="nav-member">autosizing</a>
<a href="#backdropblur" class="nav-member">backdropBlur</a>
<a href="#backgroundcolor" class="nav-member">backgroundColor</a>
<a href="#blur" class="nav-member">blur</a>
<a href="#border" class="nav-member">border</a>
<a href="#bordercolor" class="nav-member">borderColor</a>
<a href="#bottom" class="nav-member">bottom</a>
<a href="#calculateautoheight" class="nav-member"
>calculateAutoHeight</a
>
<a href="#calculateautowidth" class="nav-member"
>calculateAutoWidth</a
>
<a href="#calculatetextheight" class="nav-member"
>calculateTextHeight</a
>
<a href="#calculatetextwidth" class="nav-member"
>calculateTextWidth</a
>
<a href="#children" class="nav-member">children</a>
<a href="#clearchildren" class="nav-member">clearChildren</a>
<a href="#clearselection" class="nav-member">clearSelection</a>
<a href="#columngap" class="nav-member">columnGap</a>
<a href="#contains" class="nav-member">contains</a>
<a href="#contentautosizingmultiplier" class="nav-member"
>contentAutoSizingMultiplier</a
>
<a href="#contentblur" class="nav-member">contentBlur</a>
<a href="#cornerradius" class="nav-member">cornerRadius</a>
<a href="#cursorblinkrate" class="nav-member">cursorBlinkRate</a>
<a href="#cursorcolor" class="nav-member">cursorColor</a>
<a href="#deleteselection" class="nav-member">deleteSelection</a>
<a href="#deletetext" class="nav-member">deleteText</a>
<a href="#destroy" class="nav-member">destroy</a>
<a href="#disablehighlight" class="nav-member"
>disableHighlight</a
>
<a href="#disabled" class="nav-member">disabled</a>
<a href="#draw" class="nav-member">draw</a>
<a href="#editable" class="nav-member">editable</a>
<a href="#flexdirection" class="nav-member">flexDirection</a>
<a href="#flexwrap" class="nav-member">flexWrap</a>
<a href="#focus" class="nav-member">focus</a>
<a href="#fontfamily" class="nav-member">fontFamily</a>
<a href="#gap" class="nav-member">gap</a>
<a href="#getavailablecontentheight" class="nav-member"
>getAvailableContentHeight</a
>
<a href="#getavailablecontentwidth" class="nav-member"
>getAvailableContentWidth</a
>
<a href="#getblurinstance" class="nav-member">getBlurInstance</a>
<a href="#getborderboxheight" class="nav-member"
>getBorderBoxHeight</a
>
<a href="#getborderboxwidth" class="nav-member"
>getBorderBoxWidth</a
>
<a href="#getbounds" class="nav-member">getBounds</a>
<a href="#getchildcount" class="nav-member">getChildCount</a>
<a href="#getcontentsize" class="nav-member">getContentSize</a>
<a href="#getcursorposition" class="nav-member"
>getCursorPosition</a
>
<a href="#getmaxscroll" class="nav-member">getMaxScroll</a>
<a href="#getscaledcontentpadding" class="nav-member"
>getScaledContentPadding</a
>
<a href="#getscrollpercentage" class="nav-member"
>getScrollPercentage</a
>
<a href="#getscrollposition" class="nav-member"
>getScrollPosition</a
>
<a href="#getselectedtext" class="nav-member">getSelectedText</a>
<a href="#getselection" class="nav-member">getSelection</a>
<a href="#gettext" class="nav-member">getText</a>
<a href="#gridcolumns" class="nav-member">gridColumns</a>
<a href="#gridrows" class="nav-member">gridRows</a>
<a href="#hasoverflow" class="nav-member">hasOverflow</a>
<a href="#hasselection" class="nav-member">hasSelection</a>
<a href="#height" class="nav-member">height</a>
<a href="#hide" class="nav-member">hide</a>
<a href="#hidescrollbars" class="nav-member">hideScrollbars</a>
<a href="#id" class="nav-member">id</a>
<a href="#image" class="nav-member">image</a>
<a href="#imageopacity" class="nav-member">imageOpacity</a>
<a href="#imagepath" class="nav-member">imagePath</a>
<a href="#inputtype" class="nav-member">inputType</a>
<a href="#inserttext" class="nav-member">insertText</a>
<a href="#isfocused" class="nav-member">isFocused</a>
<a href="#justifycontent" class="nav-member">justifyContent</a>
<a href="#justifyself" class="nav-member">justifySelf</a>
<a href="#keypressed" class="nav-member">keypressed</a>
<a href="#layoutchildren" class="nav-member">layoutChildren</a>
<a href="#left" class="nav-member">left</a>
<a href="#margin" class="nav-member">margin</a>
<a href="#maxlength" class="nav-member">maxLength</a>
<a href="#maxlines" class="nav-member">maxLines</a>
<a href="#maxtextsize" class="nav-member">maxTextSize</a>
<a href="#mintextsize" class="nav-member">minTextSize</a>
<a href="#movecursorby" class="nav-member">moveCursorBy</a>
<a href="#movecursortoend" class="nav-member">moveCursorToEnd</a>
<a href="#movecursortolineend" class="nav-member"
>moveCursorToLineEnd</a
>
<a href="#movecursortolinestart" class="nav-member"
>moveCursorToLineStart</a
>
<a href="#movecursortonextword" class="nav-member"
>moveCursorToNextWord</a
>
<a href="#movecursortopreviousword" class="nav-member"
>moveCursorToPreviousWord</a
>
<a href="#movecursortostart" class="nav-member"
>moveCursorToStart</a
>
<a href="#multiline" class="nav-member">multiline</a>
<a href="#new" class="nav-member">new</a>
<a href="#objectfit" class="nav-member">objectFit</a>
<a href="#objectposition" class="nav-member">objectPosition</a>
<a href="#onblur" class="nav-member">onBlur</a>
<a href="#onenter" class="nav-member">onEnter</a>
<a href="#onevent" class="nav-member">onEvent</a>
<a href="#onfocus" class="nav-member">onFocus</a>
<a href="#ontextchange" class="nav-member">onTextChange</a>
<a href="#ontextinput" class="nav-member">onTextInput</a>
<a href="#opacity" class="nav-member">opacity</a>
<a href="#overflow" class="nav-member">overflow</a>
<a href="#overflowx" class="nav-member">overflowX</a>
<a href="#overflowy" class="nav-member">overflowY</a>
<a href="#padding" class="nav-member">padding</a>
<a href="#parent" class="nav-member">parent</a>
<a href="#passwordmode" class="nav-member">passwordMode</a>
<a href="#placeholder" class="nav-member">placeholder</a>
<a href="#positioning" class="nav-member">positioning</a>
<a href="#prevgamesize" class="nav-member">prevGameSize</a>
<a href="#recalculateunits" class="nav-member"
>recalculateUnits</a
>
<a href="#removechild" class="nav-member">removeChild</a>
<a href="#replacetext" class="nav-member">replaceText</a>
<a href="#resize" class="nav-member">resize</a>
<a href="#right" class="nav-member">right</a>
<a href="#rowgap" class="nav-member">rowGap</a>
<a href="#scalecorners" class="nav-member">scaleCorners</a>
<a href="#scalingalgorithm" class="nav-member"
>scalingAlgorithm</a
>
<a href="#scrollby" class="nav-member">scrollBy</a>
<a href="#scrollspeed" class="nav-member">scrollSpeed</a>
<a href="#scrolltobottom" class="nav-member">scrollToBottom</a>
<a href="#scrolltoleft" class="nav-member">scrollToLeft</a>
<a href="#scrolltoright" class="nav-member">scrollToRight</a>
<a href="#scrolltotop" class="nav-member">scrollToTop</a>
<a href="#scrollable" class="nav-member">scrollable</a>
<a href="#scrollbarcolor" class="nav-member">scrollbarColor</a>
<a href="#scrollbarpadding" class="nav-member"
>scrollbarPadding</a
>
<a href="#scrollbarradius" class="nav-member">scrollbarRadius</a>
<a href="#scrollbartrackcolor" class="nav-member"
>scrollbarTrackColor</a
>
<a href="#scrollbarwidth" class="nav-member">scrollbarWidth</a>
<a href="#selectall" class="nav-member">selectAll</a>
<a href="#selectonfocus" class="nav-member">selectOnFocus</a>
<a href="#selectioncolor" class="nav-member">selectionColor</a>
<a href="#setcursorposition" class="nav-member"
>setCursorPosition</a
>
<a href="#setscrollposition" class="nav-member"
>setScrollPosition</a
>
<a href="#setselection" class="nav-member">setSelection</a>
<a href="#settext" class="nav-member">setText</a>
<a href="#show" class="nav-member">show</a>
<a href="#text" class="nav-member">text</a>
<a href="#textalign" class="nav-member">textAlign</a>
<a href="#textcolor" class="nav-member">textColor</a>
<a href="#textoverflow" class="nav-member">textOverflow</a>
<a href="#textsize" class="nav-member">textSize</a>
<a href="#textwrap" class="nav-member">textWrap</a>
<a href="#textinput" class="nav-member">textinput</a>
<a href="#theme" class="nav-member">theme</a>
<a href="#themecomponent" class="nav-member">themeComponent</a>
<a href="#top" class="nav-member">top</a>
<a href="#transform" class="nav-member">transform</a>
<a href="#transition" class="nav-member">transition</a>
<a href="#units" class="nav-member">units</a>
<a href="#update" class="nav-member">update</a>
<a href="#updateopacity" class="nav-member">updateOpacity</a>
<a href="#updatetext" class="nav-member">updateText</a>
<a href="#userdata" class="nav-member">userdata</a>
<a href="#width" class="nav-member">width</a>
<a href="#x" class="nav-member">x</a>
<a href="#y" class="nav-member">y</a>
<a href="#z" class="nav-member">z</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-index" class="nav-member">__index</a>
<a href="#-blurinstance" class="nav-member">_blurInstance</a>
<a href="#-borderboxheight" class="nav-member"
>_borderBoxHeight</a
>
<a href="#-borderboxwidth" class="nav-member">_borderBoxWidth</a>
<a href="#-calculatescrollbardimensions" class="nav-member"
>_calculateScrollbarDimensions</a
>
<a href="#-contentheight" class="nav-member">_contentHeight</a>
<a href="#-contentwidth" class="nav-member">_contentWidth</a>
<a href="#-cursorblinkpausetimer" class="nav-member"
>_cursorBlinkPauseTimer</a
>
<a href="#-cursorblinkpaused" class="nav-member"
>_cursorBlinkPaused</a
>
<a href="#-cursorblinktimer" class="nav-member"
>_cursorBlinkTimer</a
>
<a href="#-cursorcolumn" class="nav-member">_cursorColumn</a>
<a href="#-cursorline" class="nav-member">_cursorLine</a>
<a href="#-cursorposition" class="nav-member">_cursorPosition</a>
<a href="#-cursorvisible" class="nav-member">_cursorVisible</a>
<a href="#-detectoverflow" class="nav-member">_detectOverflow</a>
<a href="#-eventhandler" class="nav-member">_eventHandler</a>
<a href="#-explicitlyabsolute" class="nav-member"
>_explicitlyAbsolute</a
>
<a href="#-focused" class="nav-member">_focused</a>
<a href="#-getfont" class="nav-member">_getFont</a>
<a href="#-getscrollbaratposition" class="nav-member"
>_getScrollbarAtPosition</a
>
<a href="#-handlescrollbardrag" class="nav-member"
>_handleScrollbarDrag</a
>
<a href="#-handlescrollbarpress" class="nav-member"
>_handleScrollbarPress</a
>
<a href="#-handlescrollbarrelease" class="nav-member"
>_handleScrollbarRelease</a
>
<a href="#-handletextclick" class="nav-member"
>_handleTextClick</a
>
<a href="#-handletextdrag" class="nav-member">_handleTextDrag</a>
<a href="#-handlewheelscroll" class="nav-member"
>_handleWheelScroll</a
>
<a href="#-hoveredscrollbar" class="nav-member"
>_hoveredScrollbar</a
>
<a href="#-layoutengine" class="nav-member">_layoutEngine</a>
<a href="#-lines" class="nav-member">_lines</a>
<a href="#-loadedimage" class="nav-member">_loadedImage</a>
<a href="#-maxscrollx" class="nav-member">_maxScrollX</a>
<a href="#-maxscrolly" class="nav-member">_maxScrollY</a>
<a href="#-mousedownposition" class="nav-member"
>_mouseDownPosition</a
>
<a href="#-originalpositioning" class="nav-member"
>_originalPositioning</a
>
<a href="#-overflowx" class="nav-member">_overflowX</a>
<a href="#-overflowy" class="nav-member">_overflowY</a>
<a href="#-pressed" class="nav-member">_pressed</a>
<a href="#-renderer" class="nav-member">_renderer</a>
<a href="#-scrollmanager" class="nav-member">_scrollManager</a>
<a href="#-scrollx" class="nav-member">_scrollX</a>
<a href="#-scrolly" class="nav-member">_scrollY</a>
<a href="#-scrollbardragoffset" class="nav-member"
>_scrollbarDragOffset</a
>
<a href="#-scrollbardragging" class="nav-member"
>_scrollbarDragging</a
>
<a href="#-scrollbarhoveredhorizontal" class="nav-member"
>_scrollbarHoveredHorizontal</a
>
<a href="#-scrollbarhoveredvertical" class="nav-member"
>_scrollbarHoveredVertical</a
>
<a href="#-scrollbarpresshandled" class="nav-member"
>_scrollbarPressHandled</a
>
<a href="#-selectionanchor" class="nav-member"
>_selectionAnchor</a
>
<a href="#-selectionend" class="nav-member">_selectionEnd</a>
<a href="#-selectionstart" class="nav-member">_selectionStart</a>
<a href="#-stateid" class="nav-member">_stateId</a>
<a href="#-syncscrollmanagerstate" class="nav-member"
>_syncScrollManagerState</a
>
<a href="#-textbuffer" class="nav-member">_textBuffer</a>
<a href="#-textdirty" class="nav-member">_textDirty</a>
<a href="#-textdragoccurred" class="nav-member"
>_textDragOccurred</a
>
<a href="#-texteditor" class="nav-member">_textEditor</a>
<a href="#-thememanager" class="nav-member">_themeManager</a>
<a href="#-themestate" class="nav-member">_themeState</a>
<a href="#-wrapline" class="nav-member">_wrapLine</a>
<a href="#-wrappedlines" class="nav-member">_wrappedLines</a>
</div>
</div>
<div class="nav-section" data-class="elementprops">
<a href="#elementprops" class="nav-class">ElementProps</a>
<div class="nav-members">
<a href="#active" class="nav-member">active</a>
<a href="#aligncontent" class="nav-member">alignContent</a>
<a href="#alignitems" class="nav-member">alignItems</a>
<a href="#alignself" class="nav-member">alignSelf</a>
<a href="#autogrow" class="nav-member">autoGrow</a>
<a href="#autoscaletext" class="nav-member">autoScaleText</a>
<a href="#backdropblur" class="nav-member">backdropBlur</a>
<a href="#backgroundcolor" class="nav-member">backgroundColor</a>
<a href="#border" class="nav-member">border</a>
<a href="#bordercolor" class="nav-member">borderColor</a>
<a href="#bottom" class="nav-member">bottom</a>
<a href="#columngap" class="nav-member">columnGap</a>
<a href="#contentautosizingmultiplier" class="nav-member"
>contentAutoSizingMultiplier</a
>
<a href="#contentblur" class="nav-member">contentBlur</a>
<a href="#cornerradius" class="nav-member">cornerRadius</a>
<a href="#cursorblinkrate" class="nav-member">cursorBlinkRate</a>
<a href="#cursorcolor" class="nav-member">cursorColor</a>
<a href="#disablehighlight" class="nav-member"
>disableHighlight</a
>
<a href="#disabled" class="nav-member">disabled</a>
<a href="#editable" class="nav-member">editable</a>
<a href="#flexdirection" class="nav-member">flexDirection</a>
<a href="#flexwrap" class="nav-member">flexWrap</a>
<a href="#fontfamily" class="nav-member">fontFamily</a>
<a href="#gap" class="nav-member">gap</a>
<a href="#gridcolumns" class="nav-member">gridColumns</a>
<a href="#gridrows" class="nav-member">gridRows</a>
<a href="#height" class="nav-member">height</a>
<a href="#hidescrollbars" class="nav-member">hideScrollbars</a>
<a href="#id" class="nav-member">id</a>
<a href="#image" class="nav-member">image</a>
<a href="#imageopacity" class="nav-member">imageOpacity</a>
<a href="#imagepath" class="nav-member">imagePath</a>
<a href="#inputtype" class="nav-member">inputType</a>
<a href="#justifycontent" class="nav-member">justifyContent</a>
<a href="#justifyself" class="nav-member">justifySelf</a>
<a href="#left" class="nav-member">left</a>
<a href="#margin" class="nav-member">margin</a>
<a href="#maxlength" class="nav-member">maxLength</a>
<a href="#maxlines" class="nav-member">maxLines</a>
<a href="#maxtextsize" class="nav-member">maxTextSize</a>
<a href="#mintextsize" class="nav-member">minTextSize</a>
<a href="#multiline" class="nav-member">multiline</a>
<a href="#objectfit" class="nav-member">objectFit</a>
<a href="#objectposition" class="nav-member">objectPosition</a>
<a href="#onblur" class="nav-member">onBlur</a>
<a href="#onenter" class="nav-member">onEnter</a>
<a href="#onevent" class="nav-member">onEvent</a>
<a href="#onfocus" class="nav-member">onFocus</a>
<a href="#ontextchange" class="nav-member">onTextChange</a>
<a href="#ontextinput" class="nav-member">onTextInput</a>
<a href="#opacity" class="nav-member">opacity</a>
<a href="#overflow" class="nav-member">overflow</a>
<a href="#overflowx" class="nav-member">overflowX</a>
<a href="#overflowy" class="nav-member">overflowY</a>
<a href="#padding" class="nav-member">padding</a>
<a href="#parent" class="nav-member">parent</a>
<a href="#passwordmode" class="nav-member">passwordMode</a>
<a href="#placeholder" class="nav-member">placeholder</a>
<a href="#positioning" class="nav-member">positioning</a>
<a href="#right" class="nav-member">right</a>
<a href="#rowgap" class="nav-member">rowGap</a>
<a href="#scalecorners" class="nav-member">scaleCorners</a>
<a href="#scalingalgorithm" class="nav-member"
>scalingAlgorithm</a
>
<a href="#scrollspeed" class="nav-member">scrollSpeed</a>
<a href="#scrollable" class="nav-member">scrollable</a>
<a href="#scrollbarcolor" class="nav-member">scrollbarColor</a>
<a href="#scrollbarpadding" class="nav-member"
>scrollbarPadding</a
>
<a href="#scrollbarradius" class="nav-member">scrollbarRadius</a>
<a href="#scrollbartrackcolor" class="nav-member"
>scrollbarTrackColor</a
>
<a href="#scrollbarwidth" class="nav-member">scrollbarWidth</a>
<a href="#selectonfocus" class="nav-member">selectOnFocus</a>
<a href="#selectioncolor" class="nav-member">selectionColor</a>
<a href="#text" class="nav-member">text</a>
<a href="#textalign" class="nav-member">textAlign</a>
<a href="#textcolor" class="nav-member">textColor</a>
<a href="#textoverflow" class="nav-member">textOverflow</a>
<a href="#textsize" class="nav-member">textSize</a>
<a href="#textwrap" class="nav-member">textWrap</a>
<a href="#theme" class="nav-member">theme</a>
<a href="#themecomponent" class="nav-member">themeComponent</a>
<a href="#top" class="nav-member">top</a>
<a href="#transform" class="nav-member">transform</a>
<a href="#transition" class="nav-member">transition</a>
<a href="#userdata" class="nav-member">userdata</a>
<a href="#width" class="nav-member">width</a>
<a href="#x" class="nav-member">x</a>
<a href="#y" class="nav-member">y</a>
<a href="#z" class="nav-member">z</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-scrollx" class="nav-member">_scrollX</a>
<a href="#-scrolly" class="nav-member">_scrollY</a>
</div>
</div>
<div class="nav-section" data-class="eventhandler">
<a href="#eventhandler" class="nav-class">EventHandler</a>
<div class="nav-members">
<a href="#getstate" class="nav-member">getState</a>
<a href="#initialize" class="nav-member">initialize</a>
<a href="#isanybuttonpressed" class="nav-member"
>isAnyButtonPressed</a
>
<a href="#isbuttonpressed" class="nav-member">isButtonPressed</a>
<a href="#new" class="nav-member">new</a>
<a href="#onevent" class="nav-member">onEvent</a>
<a href="#processmouseevents" class="nav-member"
>processMouseEvents</a
>
<a href="#processtouchevents" class="nav-member"
>processTouchEvents</a
>
<a href="#resetscrollbarpressflag" class="nav-member"
>resetScrollbarPressFlag</a
>
<a href="#setstate" class="nav-member">setState</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-context" class="nav-member">_Context</a>
<a href="#-inputevent" class="nav-member">_InputEvent</a>
<a href="#-index" class="nav-member">__index</a>
<a href="#-clickcount" class="nav-member">_clickCount</a>
<a href="#-dragstartx" class="nav-member">_dragStartX</a>
<a href="#-dragstarty" class="nav-member">_dragStartY</a>
<a href="#-element" class="nav-member">_element</a>
<a href="#-handlemousedrag" class="nav-member"
>_handleMouseDrag</a
>
<a href="#-handlemousepress" class="nav-member"
>_handleMousePress</a
>
<a href="#-handlemouserelease" class="nav-member"
>_handleMouseRelease</a
>
<a href="#-hovered" class="nav-member">_hovered</a>
<a href="#-lastclickbutton" class="nav-member"
>_lastClickButton</a
>
<a href="#-lastclicktime" class="nav-member">_lastClickTime</a>
<a href="#-lastmousex" class="nav-member">_lastMouseX</a>
<a href="#-lastmousey" class="nav-member">_lastMouseY</a>
<a href="#-pressed" class="nav-member">_pressed</a>
<a href="#-scrollbarpresshandled" class="nav-member"
>_scrollbarPressHandled</a
>
<a href="#-touchpressed" class="nav-member">_touchPressed</a>
<a href="#-utils" class="nav-member">_utils</a>
</div>
</div>
<div class="nav-section" data-class="flexlove">
<a href="#flexlove" class="nav-class">FlexLove</a>
<div class="nav-members">
<a href="#animation" class="nav-member">Animation</a>
<a href="#color" class="nav-member">Color</a>
<a href="#theme" class="nav-member">Theme</a>
<a href="#basescale" class="nav-member">baseScale</a>
<a href="#beginframe" class="nav-member">beginFrame</a>
<a href="#clearallstates" class="nav-member">clearAllStates</a>
<a href="#clearstate" class="nav-member">clearState</a>
<a href="#defaulttheme" class="nav-member">defaultTheme</a>
<a href="#destroy" class="nav-member">destroy</a>
<a href="#draw" class="nav-member">draw</a>
<a href="#endframe" class="nav-member">endFrame</a>
<a href="#enums" class="nav-member">enums</a>
<a href="#getelementatposition" class="nav-member"
>getElementAtPosition</a
>
<a href="#getmode" class="nav-member">getMode</a>
<a href="#getstatecount" class="nav-member">getStateCount</a>
<a href="#getstatestats" class="nav-member">getStateStats</a>
<a href="#init" class="nav-member">init</a>
<a href="#keypressed" class="nav-member">keypressed</a>
<a href="#new" class="nav-member">new</a>
<a href="#resize" class="nav-member">resize</a>
<a href="#scalefactors" class="nav-member">scaleFactors</a>
<a href="#setmode" class="nav-member">setMode</a>
<a href="#textinput" class="nav-member">textinput</a>
<a href="#topelements" class="nav-member">topElements</a>
<a href="#update" class="nav-member">update</a>
<a href="#wheelmoved" class="nav-member">wheelmoved</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-description" class="nav-member">_DESCRIPTION</a>
<a href="#-license" class="nav-member">_LICENSE</a>
<a href="#-url" class="nav-member">_URL</a>
<a href="#-version" class="nav-member">_VERSION</a>
<a href="#-activeeventelement" class="nav-member"
>_activeEventElement</a
>
<a href="#-autobeganframe" class="nav-member">_autoBeganFrame</a>
<a href="#-autoframemanagement" class="nav-member"
>_autoFrameManagement</a
>
<a href="#-backdropcanvas" class="nav-member">_backdropCanvas</a>
<a href="#-cachedviewport" class="nav-member">_cachedViewport</a>
<a href="#-canvasdimensions" class="nav-member"
>_canvasDimensions</a
>
<a href="#-currentframeelements" class="nav-member"
>_currentFrameElements</a
>
<a href="#-focusedelement" class="nav-member">_focusedElement</a>
<a href="#-framenumber" class="nav-member">_frameNumber</a>
<a href="#-framestarted" class="nav-member">_frameStarted</a>
<a href="#-gamecanvas" class="nav-member">_gameCanvas</a>
<a href="#-immediatemode" class="nav-member">_immediateMode</a>
<a href="#-immediatemodestate" class="nav-member"
>_immediateModeState</a
>
</div>
</div>
<div class="nav-section" data-class="fontfamily">
<a href="#fontfamily" class="nav-class">FontFamily</a>
<div class="nav-members">
<a href="#path" class="nav-member">path</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-loadedfont" class="nav-member">_loadedFont</a>
</div>
</div>
<div class="nav-section" data-class="inputevent">
<a href="#inputevent" class="nav-class">InputEvent</a>
<div class="nav-members">
<a href="#button" class="nav-member">button</a>
<a href="#clickcount" class="nav-member">clickCount</a>
<a href="#dx" class="nav-member">dx</a>
<a href="#dy" class="nav-member">dy</a>
<a href="#modifiers" class="nav-member">modifiers</a>
<a href="#new" class="nav-member">new</a>
<a href="#timestamp" class="nav-member">timestamp</a>
<a href="#type" class="nav-member">type</a>
<a href="#x" class="nav-member">x</a>
<a href="#y" class="nav-member">y</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-index" class="nav-member">__index</a>
</div>
</div>
<div class="nav-section" data-class="texteditor">
<a href="#texteditor" class="nav-class">TextEditor</a>
<div class="nav-members">
<a href="#allownewlines" class="nav-member">allowNewlines</a>
<a href="#allowtabs" class="nav-member">allowTabs</a>
<a href="#autogrow" class="nav-member">autoGrow</a>
<a href="#blur" class="nav-member">blur</a>
<a href="#clearselection" class="nav-member">clearSelection</a>
<a href="#cursorblinkrate" class="nav-member">cursorBlinkRate</a>
<a href="#cursorcolor" class="nav-member">cursorColor</a>
<a href="#customsanitizer" class="nav-member">customSanitizer</a>
<a href="#deleteselection" class="nav-member">deleteSelection</a>
<a href="#deletetext" class="nav-member">deleteText</a>
<a href="#editable" class="nav-member">editable</a>
<a href="#focus" class="nav-member">focus</a>
<a href="#getcursorposition" class="nav-member"
>getCursorPosition</a
>
<a href="#getselectedtext" class="nav-member">getSelectedText</a>
<a href="#getselection" class="nav-member">getSelection</a>
<a href="#gettext" class="nav-member">getText</a>
<a href="#handlekeypress" class="nav-member">handleKeyPress</a>
<a href="#handletextclick" class="nav-member">handleTextClick</a>
<a href="#handletextdrag" class="nav-member">handleTextDrag</a>
<a href="#handletextinput" class="nav-member">handleTextInput</a>
<a href="#hasselection" class="nav-member">hasSelection</a>
<a href="#initialize" class="nav-member">initialize</a>
<a href="#inputtype" class="nav-member">inputType</a>
<a href="#inserttext" class="nav-member">insertText</a>
<a href="#isfocused" class="nav-member">isFocused</a>
<a href="#maxlength" class="nav-member">maxLength</a>
<a href="#maxlines" class="nav-member">maxLines</a>
<a href="#mousetotextposition" class="nav-member"
>mouseToTextPosition</a
>
<a href="#movecursorby" class="nav-member">moveCursorBy</a>
<a href="#movecursortoend" class="nav-member">moveCursorToEnd</a>
<a href="#movecursortolineend" class="nav-member"
>moveCursorToLineEnd</a
>
<a href="#movecursortolinestart" class="nav-member"
>moveCursorToLineStart</a
>
<a href="#movecursortonextword" class="nav-member"
>moveCursorToNextWord</a
>
<a href="#movecursortopreviousword" class="nav-member"
>moveCursorToPreviousWord</a
>
<a href="#movecursortostart" class="nav-member"
>moveCursorToStart</a
>
<a href="#multiline" class="nav-member">multiline</a>
<a href="#new" class="nav-member">new</a>
<a href="#onblur" class="nav-member">onBlur</a>
<a href="#onenter" class="nav-member">onEnter</a>
<a href="#onfocus" class="nav-member">onFocus</a>
<a href="#onsanitize" class="nav-member">onSanitize</a>
<a href="#ontextchange" class="nav-member">onTextChange</a>
<a href="#ontextinput" class="nav-member">onTextInput</a>
<a href="#passwordmode" class="nav-member">passwordMode</a>
<a href="#placeholder" class="nav-member">placeholder</a>
<a href="#replacetext" class="nav-member">replaceText</a>
<a href="#sanitize" class="nav-member">sanitize</a>
<a href="#scrollable" class="nav-member">scrollable</a>
<a href="#selectall" class="nav-member">selectAll</a>
<a href="#selectonfocus" class="nav-member">selectOnFocus</a>
<a href="#selectioncolor" class="nav-member">selectionColor</a>
<a href="#setcursorposition" class="nav-member"
>setCursorPosition</a
>
<a href="#setselection" class="nav-member">setSelection</a>
<a href="#settext" class="nav-member">setText</a>
<a href="#textoverflow" class="nav-member">textOverflow</a>
<a href="#textwrap" class="nav-member">textWrap</a>
<a href="#update" class="nav-member">update</a>
<a href="#updateautogrowheight" class="nav-member"
>updateAutoGrowHeight</a
>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-color" class="nav-member">_Color</a>
<a href="#-context" class="nav-member">_Context</a>
<a href="#-font-cache" class="nav-member">_FONT_CACHE</a>
<a href="#-statemanager" class="nav-member">_StateManager</a>
<a href="#-index" class="nav-member">__index</a>
<a href="#-calculatewrapping" class="nav-member"
>_calculateWrapping</a
>
<a href="#-cursorblinkpausetimer" class="nav-member"
>_cursorBlinkPauseTimer</a
>
<a href="#-cursorblinkpaused" class="nav-member"
>_cursorBlinkPaused</a
>
<a href="#-cursorblinktimer" class="nav-member"
>_cursorBlinkTimer</a
>
<a href="#-cursorcolumn" class="nav-member">_cursorColumn</a>
<a href="#-cursorline" class="nav-member">_cursorLine</a>
<a href="#-cursorposition" class="nav-member">_cursorPosition</a>
<a href="#-cursorvisible" class="nav-member">_cursorVisible</a>
<a href="#-element" class="nav-member">_element</a>
<a href="#-focused" class="nav-member">_focused</a>
<a href="#-getcursorscreenposition" class="nav-member"
>_getCursorScreenPosition</a
>
<a href="#-getfont" class="nav-member">_getFont</a>
<a href="#-getmodifiers" class="nav-member">_getModifiers</a>
<a href="#-getselectionrects" class="nav-member"
>_getSelectionRects</a
>
<a href="#-lines" class="nav-member">_lines</a>
<a href="#-marktextdirty" class="nav-member">_markTextDirty</a>
<a href="#-mousedownposition" class="nav-member"
>_mouseDownPosition</a
>
<a href="#-resetcursorblink" class="nav-member"
>_resetCursorBlink</a
>
<a href="#-sanitizetext" class="nav-member">_sanitizeText</a>
<a href="#-savestate" class="nav-member">_saveState</a>
<a href="#-selectwordatposition" class="nav-member"
>_selectWordAtPosition</a
>
<a href="#-selectionanchor" class="nav-member"
>_selectionAnchor</a
>
<a href="#-selectionend" class="nav-member">_selectionEnd</a>
<a href="#-selectionstart" class="nav-member">_selectionStart</a>
<a href="#-splitlines" class="nav-member">_splitLines</a>
<a href="#-textbuffer" class="nav-member">_textBuffer</a>
<a href="#-textdirty" class="nav-member">_textDirty</a>
<a href="#-textdragoccurred" class="nav-member"
>_textDragOccurred</a
>
<a href="#-textscrollx" class="nav-member">_textScrollX</a>
<a href="#-updatetextifdirty" class="nav-member"
>_updateTextIfDirty</a
>
<a href="#-updatetextscroll" class="nav-member"
>_updateTextScroll</a
>
<a href="#-utils" class="nav-member">_utils</a>
<a href="#-validatecursorposition" class="nav-member"
>_validateCursorPosition</a
>
<a href="#-wrapline" class="nav-member">_wrapLine</a>
<a href="#-wrappedlines" class="nav-member">_wrappedLines</a>
</div>
</div>
<div class="nav-section" data-class="texteditorconfig">
<a href="#texteditorconfig" class="nav-class">TextEditorConfig</a>
<div class="nav-members">
<a href="#allownewlines" class="nav-member">allowNewlines</a>
<a href="#allowtabs" class="nav-member">allowTabs</a>
<a href="#autogrow" class="nav-member">autoGrow</a>
<a href="#cursorblinkrate" class="nav-member">cursorBlinkRate</a>
<a href="#cursorcolor" class="nav-member">cursorColor</a>
<a href="#customsanitizer" class="nav-member">customSanitizer</a>
<a href="#editable" class="nav-member">editable</a>
<a href="#inputtype" class="nav-member">inputType</a>
<a href="#maxlength" class="nav-member">maxLength</a>
<a href="#maxlines" class="nav-member">maxLines</a>
<a href="#multiline" class="nav-member">multiline</a>
<a href="#passwordmode" class="nav-member">passwordMode</a>
<a href="#placeholder" class="nav-member">placeholder</a>
<a href="#sanitize" class="nav-member">sanitize</a>
<a href="#scrollable" class="nav-member">scrollable</a>
<a href="#selectonfocus" class="nav-member">selectOnFocus</a>
<a href="#selectioncolor" class="nav-member">selectionColor</a>
<a href="#textoverflow" class="nav-member">textOverflow</a>
<a href="#textwrap" class="nav-member">textWrap</a>
</div>
</div>
<div class="nav-section" data-class="theme">
<a href="#theme" class="nav-class">Theme</a>
<div class="nav-members">
<a href="#manager" class="nav-member">Manager</a>
<a href="#atlas" class="nav-member">atlas</a>
<a href="#atlasdata" class="nav-member">atlasData</a>
<a href="#colors" class="nav-member">colors</a>
<a href="#components" class="nav-member">components</a>
<a href="#contentautosizingmultiplier" class="nav-member"
>contentAutoSizingMultiplier</a
>
<a href="#fonts" class="nav-member">fonts</a>
<a href="#get" class="nav-member">get</a>
<a href="#getactive" class="nav-member">getActive</a>
<a href="#getallcolors" class="nav-member">getAllColors</a>
<a href="#getcolor" class="nav-member">getColor</a>
<a href="#getcolornames" class="nav-member">getColorNames</a>
<a href="#getcolorordefault" class="nav-member"
>getColorOrDefault</a
>
<a href="#getcomponent" class="nav-member">getComponent</a>
<a href="#getfont" class="nav-member">getFont</a>
<a href="#getregisteredthemes" class="nav-member"
>getRegisteredThemes</a
>
<a href="#hasactive" class="nav-member">hasActive</a>
<a href="#load" class="nav-member">load</a>
<a href="#name" class="nav-member">name</a>
<a href="#new" class="nav-member">new</a>
<a href="#sanitizetheme" class="nav-member">sanitizeTheme</a>
<a href="#setactive" class="nav-member">setActive</a>
<a href="#validatetheme" class="nav-member">validateTheme</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-index" class="nav-member">__index</a>
</div>
</div>
<div class="nav-section" data-class="themecomponent">
<a href="#themecomponent" class="nav-class">ThemeComponent</a>
<div class="nav-members">
<a href="#atlas" class="nav-member">atlas</a>
<a href="#contentautosizingmultiplier" class="nav-member"
>contentAutoSizingMultiplier</a
>
<a href="#insets" class="nav-member">insets</a>
<a href="#regions" class="nav-member">regions</a>
<a href="#scalecorners" class="nav-member">scaleCorners</a>
<a href="#scalingalgorithm" class="nav-member"
>scalingAlgorithm</a
>
<a href="#states" class="nav-member">states</a>
<a href="#stretch" class="nav-member">stretch</a>
<a href="#-internal-properties" class="nav-member"
>⚠️ Internal Properties</a
>
<a href="#-loadedatlas" class="nav-member">_loadedAtlas</a>
<a href="#-loadedatlasdata" class="nav-member"
>_loadedAtlasData</a
>
<a href="#-ninepatchdata" class="nav-member">_ninePatchData</a>
<a href="#-scaledregioncache" class="nav-member"
>_scaledRegionCache</a
>
</div>
</div>
<div class="nav-section" data-class="themedefinition">
<a href="#themedefinition" class="nav-class">ThemeDefinition</a>
<div class="nav-members">
<a href="#atlas" class="nav-member">atlas</a>
<a href="#colors" class="nav-member">colors</a>
<a href="#components" class="nav-member">components</a>
<a href="#contentautosizingmultiplier" class="nav-member"
>contentAutoSizingMultiplier</a
>
<a href="#fonts" class="nav-member">fonts</a>
<a href="#name" class="nav-member">name</a>
</div>
</div>
<div class="nav-section" data-class="transformprops">
<a href="#transformprops" class="nav-class">TransformProps</a>
<div class="nav-members">
<a href="#rotate" class="nav-member">rotate</a>
<a href="#scale" class="nav-member">scale</a>
<a href="#skew" class="nav-member">skew</a>
<a href="#translate" class="nav-member">translate</a>
</div>
</div>
<div class="nav-section" data-class="transitionprops">
<a href="#transitionprops" class="nav-class">TransitionProps</a>
<div class="nav-members">
<a href="#duration" class="nav-member">duration</a>
<a href="#easing" class="nav-member">easing</a>
</div>
</div>
</div>
</nav>
<main class="content">
<h1 id="animation" tabindex="-1">
<a class="header-anchor" href="#animation">Animation</a>
</h1>
<h2 id="apply" tabindex="-1">
<a class="header-anchor" href="#apply">apply</a>
</h2>
<pre><code class="language-lua">(method) Animation:apply(element: Element)
</code></pre>
<h2 id="duration" tabindex="-1">
<a class="header-anchor" href="#duration">duration</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="elapsed" tabindex="-1">
<a class="header-anchor" href="#elapsed">elapsed</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="fade" tabindex="-1">
<a class="header-anchor" href="#fade">fade</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Animation.fade</span><span class="hljs-params">(duration: number, fromOpacity: number, toOpacity: number)</span></span>
-&gt; Animation
</code></pre>
<p>Create a simple fade animation</p>
<h2 id="final" tabindex="-1">
<a class="header-anchor" href="#final">final</a>
</h2>
<pre><code class="language-lua">{ width: number, height: number, opacity: number }
</code></pre>
<h2 id="interpolate" tabindex="-1">
<a class="header-anchor" href="#interpolate">interpolate</a>
</h2>
<pre><code class="language-lua">(method) Animation:interpolate()
-&gt; <span class="hljs-built_in">table</span>
</code></pre>
<h2 id="new" tabindex="-1">
<a class="header-anchor" href="#new">new</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Animation.new</span><span class="hljs-params">(props: AnimationProps)</span></span>
-&gt; Animation
</code></pre>
<h2 id="scale" tabindex="-1">
<a class="header-anchor" href="#scale">scale</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Animation.scale</span><span class="hljs-params">(duration: number, fromScale: table, toScale: table)</span></span>
-&gt; Animation
</code></pre>
<p>Create a simple scale animation</p>
<p>
@<em>param</em> <code>fromScale</code> — {width:number,height:number}
</p>
<p>
@<em>param</em> <code>toScale</code> — {width:number,height:number}
</p>
<h2 id="start" tabindex="-1">
<a class="header-anchor" href="#start">start</a>
</h2>
<pre><code class="language-lua">{ width: number, height: number, opacity: number }
</code></pre>
<h2 id="transform" tabindex="-1">
<a class="header-anchor" href="#transform">transform</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<h2 id="transition" tabindex="-1">
<a class="header-anchor" href="#transition">transition</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<h2 id="update" tabindex="-1">
<a class="header-anchor" href="#update">update</a>
</h2>
<pre><code class="language-lua">(method) Animation:update(dt: number)
-&gt; boolean
</code></pre>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="__index" tabindex="-1">
<a class="header-anchor" href="#__index">__index</a>
</h2>
<pre><code class="language-lua">Animation
</code></pre>
<h2 id="_resultdirty" tabindex="-1">
<a class="header-anchor" href="#_resultdirty">_resultDirty</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h1 id="animationprops" tabindex="-1">
<a class="header-anchor" href="#animationprops">AnimationProps</a>
</h1>
<h2 id="duration-1" tabindex="-1">
<a class="header-anchor" href="#duration-1">duration</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="final-1" tabindex="-1">
<a class="header-anchor" href="#final-1">final</a>
</h2>
<pre><code class="language-lua">{ width: number, height: number, opacity: number }
</code></pre>
<h2 id="start-1" tabindex="-1">
<a class="header-anchor" href="#start-1">start</a>
</h2>
<pre><code class="language-lua">{ width: number, height: number, opacity: number }
</code></pre>
<h2 id="transform-1" tabindex="-1">
<a class="header-anchor" href="#transform-1">transform</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<h2 id="transition-1" tabindex="-1">
<a class="header-anchor" href="#transition-1">transition</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<hr />
<h1 id="color" tabindex="-1">
<a class="header-anchor" href="#color">Color</a>
</h1>
<h2 id="a" tabindex="-1"><a class="header-anchor" href="#a">a</a></h2>
<pre><code class="language-lua">number
</code></pre>
<p>Alpha component (0-1)</p>
<h2 id="b" tabindex="-1"><a class="header-anchor" href="#b">b</a></h2>
<pre><code class="language-lua">number
</code></pre>
<p>Blue component (0-1)</p>
<h2 id="fromhex" tabindex="-1">
<a class="header-anchor" href="#fromhex">fromHex</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.fromHex</span><span class="hljs-params">(hexWithTag: string)</span></span>
-&gt; Color
</code></pre>
<p>
Convert hex string to color Supports both 6-digit (#RRGGBB) and
8-digit (#RRGGBBAA) hex formats
</p>
<p>
@<em>param</em> <code>hexWithTag</code> — e.g. “#RRGGBB” or
“#RRGGBBAA”
</p>
<h2 id="g" tabindex="-1"><a class="header-anchor" href="#g">g</a></h2>
<pre><code class="language-lua">number
</code></pre>
<p>Green component (0-1)</p>
<h2 id="isvalidcolorformat" tabindex="-1">
<a class="header-anchor" href="#isvalidcolorformat"
>isValidColorFormat</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.isValidColorFormat</span><span class="hljs-params">(value: any)</span></span>
-&gt; <span class="hljs-built_in">format</span>: <span class="hljs-built_in">string</span>?
</code></pre>
<p>Check if a value is a valid color format</p>
<p>@<em>param</em> <code>value</code> — Value to check</p>
<p>
@<em>return</em> <code>format</code> — Format type (hex, rgb, rgba,
named, table, nil if invalid)
</p>
<h2 id="new-1" tabindex="-1">
<a class="header-anchor" href="#new-1">new</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.new</span><span class="hljs-params">(r?: number, g?: number, b?: number, a?: number)</span></span>
-&gt; Color
</code></pre>
<p>Create a new color instance</p>
<h2 id="parse" tabindex="-1">
<a class="header-anchor" href="#parse">parse</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.parse</span><span class="hljs-params">(value: any)</span></span>
-&gt; Color
</code></pre>
<p>Parse a color from various formats</p>
<p>
@<em>param</em> <code>value</code> — Color value (hex, named, table)
</p>
<p>@<em>return</em> — Parsed color</p>
<h2 id="r" tabindex="-1"><a class="header-anchor" href="#r">r</a></h2>
<pre><code class="language-lua">number
</code></pre>
<p>Red component (0-1)</p>
<h2 id="sanitizecolor" tabindex="-1">
<a class="header-anchor" href="#sanitizecolor">sanitizeColor</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.sanitizeColor</span><span class="hljs-params">(value: any, default?: Color)</span></span>
-&gt; Color
</code></pre>
<p>Sanitize a color value</p>
<p>@<em>param</em> <code>value</code> — Color value to sanitize</p>
<p>@<em>param</em> <code>default</code> — Default color if invalid</p>
<p>@<em>return</em> — Sanitized color</p>
<h2 id="torgba" tabindex="-1">
<a class="header-anchor" href="#torgba">toRGBA</a>
</h2>
<pre><code class="language-lua">(method) Color:toRGBA()
-&gt; r: number
<span class="hljs-number">2.</span> g: number
<span class="hljs-number">3.</span> b: number
<span class="hljs-number">4.</span> a: number
</code></pre>
<h2 id="validatecolor" tabindex="-1">
<a class="header-anchor" href="#validatecolor">validateColor</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.validateColor</span><span class="hljs-params">(value: any, options?: table)</span></span>
-&gt; valid: boolean
<span class="hljs-number">2.</span> <span class="hljs-built_in">error</span>: <span class="hljs-built_in">string</span>?
</code></pre>
<p>Validate a color value</p>
<p>@<em>param</em> <code>value</code> — Color value to validate</p>
<p>@<em>param</em> <code>options</code> — Validation options</p>
<p>@<em>return</em> <code>valid</code> — True if valid</p>
<p>@<em>return</em> <code>error</code> — Error message if invalid</p>
<h2 id="validatecolorchannel" tabindex="-1">
<a class="header-anchor" href="#validatecolorchannel"
>validateColorChannel</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.validateColorChannel</span><span class="hljs-params">(value: any, max?: number)</span></span>
-&gt; valid: boolean
<span class="hljs-number">2.</span> clamped: number?
</code></pre>
<p>Validate a single color channel value</p>
<p>@<em>param</em> <code>value</code> — Value to validate</p>
<p>
@<em>param</em> <code>max</code> — Maximum value (255 for 0-255 range,
1 for 0-1 range)
</p>
<p>@<em>return</em> <code>valid</code> — True if valid</p>
<p>
@<em>return</em> <code>clamped</code> — Clamped value in 0-1 range
</p>
<h2 id="validatehexcolor" tabindex="-1">
<a class="header-anchor" href="#validatehexcolor">validateHexColor</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.validateHexColor</span><span class="hljs-params">(hex: string)</span></span>
-&gt; valid: boolean
<span class="hljs-number">2.</span> <span class="hljs-built_in">error</span>: <span class="hljs-built_in">string</span>?
</code></pre>
<p>Validate hex color format</p>
<p>
@<em>param</em> <code>hex</code> — Hex color string (with or without
#)
</p>
<p>@<em>return</em> <code>valid</code> — True if valid format</p>
<p>@<em>return</em> <code>error</code> — Error message if invalid</p>
<h2 id="validatenamedcolor" tabindex="-1">
<a class="header-anchor" href="#validatenamedcolor"
>validateNamedColor</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.validateNamedColor</span><span class="hljs-params">(name: string)</span></span>
-&gt; valid: boolean
<span class="hljs-number">2.</span> <span class="hljs-built_in">error</span>: <span class="hljs-built_in">string</span>?
</code></pre>
<p>Validate named color</p>
<p>@<em>param</em> <code>name</code> — Color name</p>
<p>@<em>return</em> <code>valid</code> — True if valid</p>
<p>@<em>return</em> <code>error</code> — Error message if invalid</p>
<h2 id="validatergbcolor" tabindex="-1">
<a class="header-anchor" href="#validatergbcolor">validateRGBColor</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color.validateRGBColor</span><span class="hljs-params">(r: number, g: number, b: number, a?: number, max?: number)</span></span>
-&gt; valid: boolean
<span class="hljs-number">2.</span> <span class="hljs-built_in">error</span>: <span class="hljs-built_in">string</span>?
</code></pre>
<p>Validate RGB/RGBA color values</p>
<p>@<em>param</em> <code>r</code> — Red component</p>
<p>@<em>param</em> <code>g</code> — Green component</p>
<p>@<em>param</em> <code>b</code> — Blue component</p>
<p>@<em>param</em> <code>a</code> — Alpha component (optional)</p>
<p>@<em>param</em> <code>max</code> — Maximum value (255 or 1)</p>
<p>@<em>return</em> <code>valid</code> — True if valid</p>
<p>@<em>return</em> <code>error</code> — Error message if invalid</p>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-1" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-1"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="__index-1" tabindex="-1">
<a class="header-anchor" href="#__index-1">__index</a>
</h2>
<pre><code class="language-lua">Color
</code></pre>
<p>Utility class for color handling</p>
<h1 id="element" tabindex="-1">
<a class="header-anchor" href="#element">Element</a>
</h1>
<h2 id="active" tabindex="-1">
<a class="header-anchor" href="#active">active</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>
Whether the element is active/focused (for inputs, default: false)
</p>
<h2 id="addchild" tabindex="-1">
<a class="header-anchor" href="#addchild">addChild</a>
</h2>
<pre><code class="language-lua">(method) Element:addChild(child: Element)
</code></pre>
<p>Add child to element</p>
<h2 id="aligncontent" tabindex="-1">
<a class="header-anchor" href="#aligncontent">alignContent</a>
</h2>
<pre><code class="language-lua">AlignContent
</code></pre>
<p>
Alignment of lines in multi-line flex containers (default: STRETCH)
</p>
<h2 id="alignitems" tabindex="-1">
<a class="header-anchor" href="#alignitems">alignItems</a>
</h2>
<pre><code class="language-lua">AlignItems
</code></pre>
<p>Alignment of items along cross axis (default: STRETCH)</p>
<h2 id="alignself" tabindex="-1">
<a class="header-anchor" href="#alignself">alignSelf</a>
</h2>
<pre><code class="language-lua">AlignSelf
</code></pre>
<p>Alignment of the item itself along cross axis (default: AUTO)</p>
<h2 id="animation-1" tabindex="-1">
<a class="header-anchor" href="#animation-1">animation</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<p>Animation instance for this element</p>
<h2 id="applypositioningoffsets" tabindex="-1">
<a class="header-anchor" href="#applypositioningoffsets"
>applyPositioningOffsets</a
>
</h2>
<pre><code class="language-lua">(method) Element:applyPositioningOffsets(element: any)
</code></pre>
<p>
Apply positioning offsets (top, right, bottom, left) to an element
@param element The element to apply offsets to
</p>
<h2 id="autogrow" tabindex="-1">
<a class="header-anchor" href="#autogrow">autoGrow</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether element auto-grows with text (default: false)</p>
<h2 id="autoscaletext" tabindex="-1">
<a class="header-anchor" href="#autoscaletext">autoScaleText</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether text should auto-scale with window size (default: true)</p>
<h2 id="autosizing" tabindex="-1">
<a class="header-anchor" href="#autosizing">autosizing</a>
</h2>
<pre><code class="language-lua">{ width: boolean, height: boolean }
</code></pre>
<p>Whether the element should automatically size to fit its children</p>
<h2 id="backdropblur" tabindex="-1">
<a class="header-anchor" href="#backdropblur">backdropBlur</a>
</h2>
<pre><code class="language-lua">{ intensity: number, quality: number }?
</code></pre>
<p>Blur content behind the element (intensity: 0-100, quality: 1-10)</p>
<h2 id="backgroundcolor" tabindex="-1">
<a class="header-anchor" href="#backgroundcolor">backgroundColor</a>
</h2>
<pre><code class="language-lua">Color
</code></pre>
<p>Background color of the element</p>
<h2 id="blur" tabindex="-1">
<a class="header-anchor" href="#blur">blur</a>
</h2>
<pre><code class="language-lua">(method) Element:blur()
</code></pre>
<p>Remove focus from this element</p>
<h2 id="border" tabindex="-1">
<a class="header-anchor" href="#border">border</a>
</h2>
<pre><code class="language-lua">Border
</code></pre>
<p>Border configuration for the element</p>
<h2 id="bordercolor" tabindex="-1">
<a class="header-anchor" href="#bordercolor">borderColor</a>
</h2>
<pre><code class="language-lua">Color
</code></pre>
<p>Color of the border</p>
<h2 id="bottom" tabindex="-1">
<a class="header-anchor" href="#bottom">bottom</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Offset from bottom edge (CSS-style positioning)</p>
<h2 id="calculateautoheight" tabindex="-1">
<a class="header-anchor" href="#calculateautoheight"
>calculateAutoHeight</a
>
</h2>
<pre><code class="language-lua">(method) Element:calculateAutoHeight()
-&gt; number
</code></pre>
<p>Calculate auto height based on children</p>
<h2 id="calculateautowidth" tabindex="-1">
<a class="header-anchor" href="#calculateautowidth"
>calculateAutoWidth</a
>
</h2>
<pre><code class="language-lua">(method) Element:calculateAutoWidth()
-&gt; number
</code></pre>
<h2 id="calculatetextheight" tabindex="-1">
<a class="header-anchor" href="#calculatetextheight"
>calculateTextHeight</a
>
</h2>
<pre><code class="language-lua">(method) Element:calculateTextHeight()
-&gt; number
</code></pre>
<h2 id="calculatetextwidth" tabindex="-1">
<a class="header-anchor" href="#calculatetextwidth"
>calculateTextWidth</a
>
</h2>
<pre><code class="language-lua">(method) Element:calculateTextWidth()
-&gt; number
</code></pre>
<p>Calculate text width for button</p>
<h2 id="children" tabindex="-1">
<a class="header-anchor" href="#children">children</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;integer, Element&gt;
</code></pre>
<p>Children of this element</p>
<h2 id="clearchildren" tabindex="-1">
<a class="header-anchor" href="#clearchildren">clearChildren</a>
</h2>
<pre><code class="language-lua">(method) Element:clearChildren()
</code></pre>
<p>Remove all children from this element</p>
<h2 id="clearselection" tabindex="-1">
<a class="header-anchor" href="#clearselection">clearSelection</a>
</h2>
<pre><code class="language-lua">(method) Element:clearSelection()
</code></pre>
<p>Clear selection</p>
<h2 id="columngap" tabindex="-1">
<a class="header-anchor" href="#columngap">columnGap</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Gap between grid columns</p>
<h2 id="contains" tabindex="-1">
<a class="header-anchor" href="#contains">contains</a>
</h2>
<pre><code class="language-lua">(method) Element:contains(x: number, y: number)
-&gt; boolean
</code></pre>
<p>Check if point is inside element bounds</p>
<h2 id="contentautosizingmultiplier" tabindex="-1">
<a class="header-anchor" href="#contentautosizingmultiplier"
>contentAutoSizingMultiplier</a
>
</h2>
<pre><code class="language-lua">{ width: number?, height: number? }?
</code></pre>
<p>Multiplier for auto-sized content dimensions</p>
<h2 id="contentblur" tabindex="-1">
<a class="header-anchor" href="#contentblur">contentBlur</a>
</h2>
<pre><code class="language-lua">{ intensity: number, quality: number }?
</code></pre>
<p>
Blur the element’s content including children (intensity: 0-100,
quality: 1-10)
</p>
<h2 id="cornerradius" tabindex="-1">
<a class="header-anchor" href="#cornerradius">cornerRadius</a>
</h2>
<pre><code class="language-lua">(number|{ topLeft: number?, topRight: number?, bottomLeft: number?, bottomRight: number? })?
</code></pre>
<p>Corner radius for rounded corners (default: 0)</p>
<h2 id="cursorblinkrate" tabindex="-1">
<a class="header-anchor" href="#cursorblinkrate">cursorBlinkRate</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<p>Cursor blink rate in seconds (default: 0.5)</p>
<h2 id="cursorcolor" tabindex="-1">
<a class="header-anchor" href="#cursorcolor">cursorColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Cursor color (default: nil, uses textColor)</p>
<h2 id="deleteselection" tabindex="-1">
<a class="header-anchor" href="#deleteselection">deleteSelection</a>
</h2>
<pre><code class="language-lua">(method) Element:deleteSelection()
-&gt; boolean
</code></pre>
<p>Delete selected text</p>
<p>@<em>return</em> — True if text was deleted</p>
<h2 id="deletetext" tabindex="-1">
<a class="header-anchor" href="#deletetext">deleteText</a>
</h2>
<pre><code class="language-lua">(method) Element:deleteText(startPos: number, endPos: number)
</code></pre>
<p>
@<em>param</em> <code>startPos</code> — Start position (inclusive)
</p>
<p>@<em>param</em> <code>endPos</code> — End position (inclusive)</p>
<h2 id="destroy" tabindex="-1">
<a class="header-anchor" href="#destroy">destroy</a>
</h2>
<pre><code class="language-lua">(method) Element:destroy()
</code></pre>
<p>Destroy element and its children</p>
<h2 id="disablehighlight" tabindex="-1">
<a class="header-anchor" href="#disablehighlight">disableHighlight</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>
Whether to disable the pressed state highlight overlay (default:
false)
</p>
<h2 id="disabled" tabindex="-1">
<a class="header-anchor" href="#disabled">disabled</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether the element is disabled (default: false)</p>
<h2 id="draw" tabindex="-1">
<a class="header-anchor" href="#draw">draw</a>
</h2>
<pre><code class="language-lua">(method) Element:draw(backdropCanvas: any)
</code></pre>
<p>Draw element and its children</p>
<h2 id="editable" tabindex="-1">
<a class="header-anchor" href="#editable">editable</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether the element is editable (default: false)</p>
<h2 id="flexdirection" tabindex="-1">
<a class="header-anchor" href="#flexdirection">flexDirection</a>
</h2>
<pre><code class="language-lua">FlexDirection
</code></pre>
<p>Direction of flex layout (default: HORIZONTAL)</p>
<h2 id="flexwrap" tabindex="-1">
<a class="header-anchor" href="#flexwrap">flexWrap</a>
</h2>
<pre><code class="language-lua">FlexWrap
</code></pre>
<p>Whether children wrap to multiple lines (default: NOWRAP)</p>
<h2 id="focus" tabindex="-1">
<a class="header-anchor" href="#focus">focus</a>
</h2>
<pre><code class="language-lua">(method) Element:focus()
</code></pre>
<p>Focus this element for keyboard input</p>
<h2 id="fontfamily" tabindex="-1">
<a class="header-anchor" href="#fontfamily">fontFamily</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Font family name from theme or path to font file</p>
<h2 id="gap" tabindex="-1">
<a class="header-anchor" href="#gap">gap</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>|number
</code></pre>
<p>Space between children elements (default: 10)</p>
<h2 id="getavailablecontentheight" tabindex="-1">
<a class="header-anchor" href="#getavailablecontentheight"
>getAvailableContentHeight</a
>
</h2>
<pre><code class="language-lua">(method) Element:getAvailableContentHeight()
-&gt; number
</code></pre>
<p>
Get available content height for children (accounting for 9-patch
content padding) This is the height that children should use when
calculating percentage heights
</p>
<h2 id="getavailablecontentwidth" tabindex="-1">
<a class="header-anchor" href="#getavailablecontentwidth"
>getAvailableContentWidth</a
>
</h2>
<pre><code class="language-lua">(method) Element:getAvailableContentWidth()
-&gt; number
</code></pre>
<p>
Get available content width for children (accounting for 9-patch
content padding) This is the width that children should use when
calculating percentage widths
</p>
<h2 id="getblurinstance" tabindex="-1">
<a class="header-anchor" href="#getblurinstance">getBlurInstance</a>
</h2>
<pre><code class="language-lua">(method) Element:getBlurInstance()
-&gt; <span class="hljs-built_in">table</span>?
</code></pre>
<p>Get or create blur instance for this element</p>
<p>@<em>return</em> — Blur instance or nil if no blur configured</p>
<h2 id="getborderboxheight" tabindex="-1">
<a class="header-anchor" href="#getborderboxheight"
>getBorderBoxHeight</a
>
</h2>
<pre><code class="language-lua">(method) Element:getBorderBoxHeight()
-&gt; number
</code></pre>
<p>Get border-box height (including padding)</p>
<h2 id="getborderboxwidth" tabindex="-1">
<a class="header-anchor" href="#getborderboxwidth"
>getBorderBoxWidth</a
>
</h2>
<pre><code class="language-lua">(method) Element:getBorderBoxWidth()
-&gt; number
</code></pre>
<p>Get border-box width (including padding)</p>
<h2 id="getbounds" tabindex="-1">
<a class="header-anchor" href="#getbounds">getBounds</a>
</h2>
<pre><code class="language-lua">(method) Element:getBounds()
-&gt; { x: number, y: number, width: number, height: number }
</code></pre>
<p>Get element bounds (content box)</p>
<h2 id="getchildcount" tabindex="-1">
<a class="header-anchor" href="#getchildcount">getChildCount</a>
</h2>
<pre><code class="language-lua">(method) Element:getChildCount()
-&gt; number
</code></pre>
<p>Get the number of children this element has</p>
<h2 id="getcontentsize" tabindex="-1">
<a class="header-anchor" href="#getcontentsize">getContentSize</a>
</h2>
<pre><code class="language-lua">(method) Element:getContentSize()
-&gt; contentWidth: number
<span class="hljs-number">2.</span> contentHeight: number
</code></pre>
<p>
Get content dimensions (including overflow) (delegates to
ScrollManager)
</p>
<h2 id="getcursorposition" tabindex="-1">
<a class="header-anchor" href="#getcursorposition"
>getCursorPosition</a
>
</h2>
<pre><code class="language-lua">(method) Element:getCursorPosition()
-&gt; number
</code></pre>
<p>Get cursor position</p>
<p>@<em>return</em> — Character index (0-based)</p>
<h2 id="getmaxscroll" tabindex="-1">
<a class="header-anchor" href="#getmaxscroll">getMaxScroll</a>
</h2>
<pre><code class="language-lua">(method) Element:getMaxScroll()
-&gt; maxScrollX: number
<span class="hljs-number">2.</span> maxScrollY: number
</code></pre>
<p>Get maximum scroll bounds (delegates to ScrollManager)</p>
<h2 id="getscaledcontentpadding" tabindex="-1">
<a class="header-anchor" href="#getscaledcontentpadding"
>getScaledContentPadding</a
>
</h2>
<pre><code class="language-lua">(method) Element:getScaledContentPadding()
-&gt; <span class="hljs-built_in">table</span>|<span class="hljs-literal">nil</span>
</code></pre>
<p>
Get the current state’s scaled content padding Returns the
contentPadding for the current theme state, scaled to the element’s
size
</p>
<p>
@<em>return</em> — {left, top, right, bottom} or nil if no
contentPadding
</p>
<h2 id="getscrollpercentage" tabindex="-1">
<a class="header-anchor" href="#getscrollpercentage"
>getScrollPercentage</a
>
</h2>
<pre><code class="language-lua">(method) Element:getScrollPercentage()
-&gt; percentX: number
<span class="hljs-number">2.</span> percentY: number
</code></pre>
<p>Get scroll percentage (0-1) (delegates to ScrollManager)</p>
<h2 id="getscrollposition" tabindex="-1">
<a class="header-anchor" href="#getscrollposition"
>getScrollPosition</a
>
</h2>
<pre><code class="language-lua">(method) Element:getScrollPosition()
-&gt; scrollX: number
<span class="hljs-number">2.</span> scrollY: number
</code></pre>
<p>Get current scroll position (delegates to ScrollManager)</p>
<h2 id="getselectedtext" tabindex="-1">
<a class="header-anchor" href="#getselectedtext">getSelectedText</a>
</h2>
<pre><code class="language-lua">(method) Element:getSelectedText()
-&gt; <span class="hljs-built_in">string</span>?
</code></pre>
<p>Get selected text</p>
<p>@<em>return</em> — Selected text or nil if no selection</p>
<h2 id="getselection" tabindex="-1">
<a class="header-anchor" href="#getselection">getSelection</a>
</h2>
<pre><code class="language-lua">(method) Element:getSelection()
-&gt; number?
<span class="hljs-number">2.</span> number?
</code></pre>
<p>Get selection range</p>
<p>
@<em>return</em> — Start and end positions, or nil if no selection
</p>
<h2 id="gettext" tabindex="-1">
<a class="header-anchor" href="#gettext">getText</a>
</h2>
<pre><code class="language-lua">(method) Element:getText()
-&gt; <span class="hljs-built_in">string</span>
</code></pre>
<p>Get current text buffer</p>
<h2 id="gridcolumns" tabindex="-1">
<a class="header-anchor" href="#gridcolumns">gridColumns</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Number of columns in the grid</p>
<h2 id="gridrows" tabindex="-1">
<a class="header-anchor" href="#gridrows">gridRows</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Number of rows in the grid</p>
<h2 id="hasoverflow" tabindex="-1">
<a class="header-anchor" href="#hasoverflow">hasOverflow</a>
</h2>
<pre><code class="language-lua">(method) Element:hasOverflow()
-&gt; hasOverflowX: boolean
<span class="hljs-number">2.</span> hasOverflowY: boolean
</code></pre>
<p>Check if element has overflow (delegates to ScrollManager)</p>
<h2 id="hasselection" tabindex="-1">
<a class="header-anchor" href="#hasselection">hasSelection</a>
</h2>
<pre><code class="language-lua">(method) Element:hasSelection()
-&gt; boolean
</code></pre>
<p>Check if there is an active selection</p>
<h2 id="height" tabindex="-1">
<a class="header-anchor" href="#height">height</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>|number
</code></pre>
<p>Height of the element</p>
<h2 id="hide" tabindex="-1">
<a class="header-anchor" href="#hide">hide</a>
</h2>
<pre><code class="language-lua">(method) Element:hide()
</code></pre>
<p>same as calling updateOpacity(0)</p>
<h2 id="hidescrollbars" tabindex="-1">
<a class="header-anchor" href="#hidescrollbars">hideScrollbars</a>
</h2>
<pre><code class="language-lua">(boolean|{ vertical: boolean, horizontal: boolean })?
</code></pre>
<p>
Hide scrollbars (boolean for both, or table for individual control)
</p>
<h2 id="id" tabindex="-1">
<a class="header-anchor" href="#id">id</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<h2 id="image" tabindex="-1">
<a class="header-anchor" href="#image">image</a>
</h2>
<pre><code class="language-lua">(love.Image)?
</code></pre>
<p>Image object to display</p>
<h2 id="imageopacity" tabindex="-1">
<a class="header-anchor" href="#imageopacity">imageOpacity</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Image opacity 0-1 (default: 1, combines with element opacity)</p>
<h2 id="imagepath" tabindex="-1">
<a class="header-anchor" href="#imagepath">imagePath</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Path to image file (auto-loads via ImageCache)</p>
<h2 id="inputtype" tabindex="-1">
<a class="header-anchor" href="#inputtype">inputType</a>
</h2>
<pre><code class="language-lua"><span class="hljs-string">&quot;email&quot;</span>|<span class="hljs-string">&quot;number&quot;</span>|<span class="hljs-string">&quot;text&quot;</span>|<span class="hljs-string">&quot;url&quot;</span>
</code></pre>
<p>Input type for validation (default: “text”)</p>
<h2 id="inserttext" tabindex="-1">
<a class="header-anchor" href="#inserttext">insertText</a>
</h2>
<pre><code class="language-lua">(method) Element:insertText(text: <span class="hljs-built_in">string</span>, position?: number)
</code></pre>
<p>Insert text at position</p>
<p>@<em>param</em> <code>text</code> — Text to insert</p>
<p>
@<em>param</em> <code>position</code> — Position to insert at
(default: cursor position)
</p>
<h2 id="isfocused" tabindex="-1">
<a class="header-anchor" href="#isfocused">isFocused</a>
</h2>
<pre><code class="language-lua">(method) Element:isFocused()
-&gt; boolean
</code></pre>
<p>Check if this element is focused</p>
<h2 id="justifycontent" tabindex="-1">
<a class="header-anchor" href="#justifycontent">justifyContent</a>
</h2>
<pre><code class="language-lua">JustifyContent
</code></pre>
<p>Alignment of items along main axis (default: FLEX_START)</p>
<h2 id="justifyself" tabindex="-1">
<a class="header-anchor" href="#justifyself">justifySelf</a>
</h2>
<pre><code class="language-lua">JustifySelf
</code></pre>
<p>Alignment of the item itself along main axis (default: AUTO)</p>
<h2 id="keypressed" tabindex="-1">
<a class="header-anchor" href="#keypressed">keypressed</a>
</h2>
<pre><code class="language-lua">(method) Element:keypressed(key: <span class="hljs-built_in">string</span>, scancode: <span class="hljs-built_in">string</span>, isrepeat: boolean)
</code></pre>
<p>Handle key press (special keys)</p>
<p>@<em>param</em> <code>key</code> — Key name</p>
<p>@<em>param</em> <code>scancode</code> — Scancode</p>
<p>
@<em>param</em> <code>isrepeat</code> — Whether this is a key repeat
</p>
<h2 id="layoutchildren" tabindex="-1">
<a class="header-anchor" href="#layoutchildren">layoutChildren</a>
</h2>
<pre><code class="language-lua">(method) Element:layoutChildren()
</code></pre>
<h2 id="left" tabindex="-1">
<a class="header-anchor" href="#left">left</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Offset from left edge (CSS-style positioning)</p>
<h2 id="margin" tabindex="-1">
<a class="header-anchor" href="#margin">margin</a>
</h2>
<pre><code class="language-lua">{ top: number, right: number, bottom: number, left: number }
</code></pre>
<p>
Margin around children (default: {top=0, right=0, bottom=0, left=0})
</p>
<h2 id="maxlength" tabindex="-1">
<a class="header-anchor" href="#maxlength">maxLength</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Maximum text length in characters (default: nil)</p>
<h2 id="maxlines" tabindex="-1">
<a class="header-anchor" href="#maxlines">maxLines</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Maximum number of lines (default: nil)</p>
<h2 id="maxtextsize" tabindex="-1">
<a class="header-anchor" href="#maxtextsize">maxTextSize</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="mintextsize" tabindex="-1">
<a class="header-anchor" href="#mintextsize">minTextSize</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="movecursorby" tabindex="-1">
<a class="header-anchor" href="#movecursorby">moveCursorBy</a>
</h2>
<pre><code class="language-lua">(method) Element:moveCursorBy(delta: number)
</code></pre>
<p>Move cursor by delta characters</p>
<p>
@<em>param</em> <code>delta</code> — Number of characters to move
(positive or negative)
</p>
<h2 id="movecursortoend" tabindex="-1">
<a class="header-anchor" href="#movecursortoend">moveCursorToEnd</a>
</h2>
<pre><code class="language-lua">(method) Element:moveCursorToEnd()
</code></pre>
<p>Move cursor to end of text</p>
<h2 id="movecursortolineend" tabindex="-1">
<a class="header-anchor" href="#movecursortolineend"
>moveCursorToLineEnd</a
>
</h2>
<pre><code class="language-lua">(method) Element:moveCursorToLineEnd()
</code></pre>
<p>Move cursor to end of current line</p>
<h2 id="movecursortolinestart" tabindex="-1">
<a class="header-anchor" href="#movecursortolinestart"
>moveCursorToLineStart</a
>
</h2>
<pre><code class="language-lua">(method) Element:moveCursorToLineStart()
</code></pre>
<p>Move cursor to start of current line</p>
<h2 id="movecursortonextword" tabindex="-1">
<a class="header-anchor" href="#movecursortonextword"
>moveCursorToNextWord</a
>
</h2>
<pre><code class="language-lua">(method) Element:moveCursorToNextWord()
</code></pre>
<p>Move cursor to start of next word</p>
<h2 id="movecursortopreviousword" tabindex="-1">
<a class="header-anchor" href="#movecursortopreviousword"
>moveCursorToPreviousWord</a
>
</h2>
<pre><code class="language-lua">(method) Element:moveCursorToPreviousWord()
</code></pre>
<p>Move cursor to start of previous word</p>
<h2 id="movecursortostart" tabindex="-1">
<a class="header-anchor" href="#movecursortostart"
>moveCursorToStart</a
>
</h2>
<pre><code class="language-lua">(method) Element:moveCursorToStart()
</code></pre>
<p>Move cursor to start of text</p>
<h2 id="multiline" tabindex="-1">
<a class="header-anchor" href="#multiline">multiline</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether the element supports multiple lines (default: false)</p>
<h2 id="new-2" tabindex="-1">
<a class="header-anchor" href="#new-2">new</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Element.new</span><span class="hljs-params">(props: ElementProps, deps: table)</span></span>
-&gt; Element
</code></pre>
<p>
@<em>param</em> <code>deps</code> — Required dependency table
(provided by FlexLove)
</p>
<h2 id="objectfit" tabindex="-1">
<a class="header-anchor" href="#objectfit">objectFit</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;contain&quot;</span>|<span class="hljs-string">&quot;cover&quot;</span>|<span class="hljs-string">&quot;fill&quot;</span>|<span class="hljs-string">&quot;none&quot;</span>|<span class="hljs-string">&quot;scale-down&quot;</span>)?
</code></pre>
<p>Image fit mode (default: “fill”)</p>
<h2 id="objectposition" tabindex="-1">
<a class="header-anchor" href="#objectposition">objectPosition</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>
Image position like “center center”, “top left”, “50% 50%” (default:
“center center”)
</p>
<h2 id="onblur" tabindex="-1">
<a class="header-anchor" href="#onblur">onBlur</a>
</h2>
<pre><code class="language-lua">fun(element: Element)?
</code></pre>
<p>Callback function when element loses focus</p>
<h2 id="onenter" tabindex="-1">
<a class="header-anchor" href="#onenter">onEnter</a>
</h2>
<pre><code class="language-lua">fun(element: Element)?
</code></pre>
<p>Callback function when Enter key is pressed</p>
<h2 id="onevent" tabindex="-1">
<a class="header-anchor" href="#onevent">onEvent</a>
</h2>
<pre><code class="language-lua">fun(element: Element, event: InputEvent)?
</code></pre>
<p>Callback function for interaction events</p>
<h2 id="onfocus" tabindex="-1">
<a class="header-anchor" href="#onfocus">onFocus</a>
</h2>
<pre><code class="language-lua">fun(element: Element)?
</code></pre>
<p>Callback function when element receives focus</p>
<h2 id="ontextchange" tabindex="-1">
<a class="header-anchor" href="#ontextchange">onTextChange</a>
</h2>
<pre><code class="language-lua">fun(element: Element, text: <span class="hljs-built_in">string</span>)?
</code></pre>
<p>Callback function when text changes</p>
<h2 id="ontextinput" tabindex="-1">
<a class="header-anchor" href="#ontextinput">onTextInput</a>
</h2>
<pre><code class="language-lua">fun(element: Element, text: <span class="hljs-built_in">string</span>)?
</code></pre>
<p>Callback function for text input</p>
<h2 id="opacity" tabindex="-1">
<a class="header-anchor" href="#opacity">opacity</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="overflow" tabindex="-1">
<a class="header-anchor" href="#overflow">overflow</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Overflow behavior for both axes</p>
<h2 id="overflowx" tabindex="-1">
<a class="header-anchor" href="#overflowx">overflowX</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Overflow behavior for horizontal axis</p>
<h2 id="overflowy" tabindex="-1">
<a class="header-anchor" href="#overflowy">overflowY</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Overflow behavior for vertical axis</p>
<h2 id="padding" tabindex="-1">
<a class="header-anchor" href="#padding">padding</a>
</h2>
<pre><code class="language-lua">{ top: number, right: number, bottom: number, left: number }?
</code></pre>
<p>
Padding around children (default: {top=0, right=0, bottom=0, left=0})
</p>
<h2 id="parent" tabindex="-1">
<a class="header-anchor" href="#parent">parent</a>
</h2>
<pre><code class="language-lua">Element?
</code></pre>
<p>Parent element (nil if top-level)</p>
<h2 id="passwordmode" tabindex="-1">
<a class="header-anchor" href="#passwordmode">passwordMode</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether to display text as password (default: false)</p>
<h2 id="placeholder" tabindex="-1">
<a class="header-anchor" href="#placeholder">placeholder</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Placeholder text when empty (default: nil)</p>
<h2 id="positioning" tabindex="-1">
<a class="header-anchor" href="#positioning">positioning</a>
</h2>
<pre><code class="language-lua">Positioning
</code></pre>
<p>Layout positioning mode (default: RELATIVE)</p>
<h2 id="prevgamesize" tabindex="-1">
<a class="header-anchor" href="#prevgamesize">prevGameSize</a>
</h2>
<pre><code class="language-lua">{ width: number, height: number }
</code></pre>
<p>Previous game size for resize calculations</p>
<h2 id="recalculateunits" tabindex="-1">
<a class="header-anchor" href="#recalculateunits">recalculateUnits</a>
</h2>
<pre><code class="language-lua">(method) Element:recalculateUnits(newViewportWidth: number, newViewportHeight: number)
</code></pre>
<h2 id="removechild" tabindex="-1">
<a class="header-anchor" href="#removechild">removeChild</a>
</h2>
<pre><code class="language-lua">(method) Element:removeChild(child: Element)
</code></pre>
<p>Remove a specific child from this element</p>
<h2 id="replacetext" tabindex="-1">
<a class="header-anchor" href="#replacetext">replaceText</a>
</h2>
<pre><code class="language-lua">(method) Element:replaceText(startPos: number, endPos: number, newText: <span class="hljs-built_in">string</span>)
</code></pre>
<p>Replace text in range</p>
<p>
@<em>param</em> <code>startPos</code> — Start position (inclusive)
</p>
<p>@<em>param</em> <code>endPos</code> — End position (inclusive)</p>
<p>@<em>param</em> <code>newText</code> — Replacement text</p>
<h2 id="resize" tabindex="-1">
<a class="header-anchor" href="#resize">resize</a>
</h2>
<pre><code class="language-lua">(method) Element:resize(newGameWidth: number, newGameHeight: number)
</code></pre>
<p>Resize element and its children based on game window size change</p>
<h2 id="right" tabindex="-1">
<a class="header-anchor" href="#right">right</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Offset from right edge (CSS-style positioning)</p>
<h2 id="rowgap" tabindex="-1">
<a class="header-anchor" href="#rowgap">rowGap</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Gap between grid rows</p>
<h2 id="scalecorners" tabindex="-1">
<a class="header-anchor" href="#scalecorners">scaleCorners</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>
Scale multiplier for 9-patch corners/edges. E.g., 2 = 2x size
(overrides theme setting)
</p>
<h2 id="scalingalgorithm" tabindex="-1">
<a class="header-anchor" href="#scalingalgorithm">scalingAlgorithm</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;bilinear&quot;</span>|<span class="hljs-string">&quot;nearest&quot;</span>)?
</code></pre>
<p>
Scaling algorithm for 9-patch corners: “nearest” (sharp/pixelated) or
“bilinear” (smooth) (overrides theme setting)
</p>
<h2 id="scrollby" tabindex="-1">
<a class="header-anchor" href="#scrollby">scrollBy</a>
</h2>
<pre><code class="language-lua">(method) Element:scrollBy(dx?: number, dy?: number)
</code></pre>
<p>Scroll by delta amount (delegates to ScrollManager)</p>
<p>@<em>param</em> <code>dx</code> — X delta (nil for no change)</p>
<p>@<em>param</em> <code>dy</code> — Y delta (nil for no change)</p>
<h2 id="scrollspeed" tabindex="-1">
<a class="header-anchor" href="#scrollspeed">scrollSpeed</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Scroll speed multiplier</p>
<h2 id="scrolltobottom" tabindex="-1">
<a class="header-anchor" href="#scrolltobottom">scrollToBottom</a>
</h2>
<pre><code class="language-lua">(method) Element:scrollToBottom()
</code></pre>
<p>Scroll to bottom</p>
<h2 id="scrolltoleft" tabindex="-1">
<a class="header-anchor" href="#scrolltoleft">scrollToLeft</a>
</h2>
<pre><code class="language-lua">(method) Element:scrollToLeft()
</code></pre>
<p>Scroll to left</p>
<h2 id="scrolltoright" tabindex="-1">
<a class="header-anchor" href="#scrolltoright">scrollToRight</a>
</h2>
<pre><code class="language-lua">(method) Element:scrollToRight()
</code></pre>
<p>Scroll to right</p>
<h2 id="scrolltotop" tabindex="-1">
<a class="header-anchor" href="#scrolltotop">scrollToTop</a>
</h2>
<pre><code class="language-lua">(method) Element:scrollToTop()
</code></pre>
<p>Scroll to top</p>
<h2 id="scrollable" tabindex="-1">
<a class="header-anchor" href="#scrollable">scrollable</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>
Whether text is scrollable (default: false for single-line, true for
multi-line)
</p>
<h2 id="scrollbarcolor" tabindex="-1">
<a class="header-anchor" href="#scrollbarcolor">scrollbarColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Scrollbar thumb color</p>
<h2 id="scrollbarpadding" tabindex="-1">
<a class="header-anchor" href="#scrollbarpadding">scrollbarPadding</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Scrollbar padding from edges</p>
<h2 id="scrollbarradius" tabindex="-1">
<a class="header-anchor" href="#scrollbarradius">scrollbarRadius</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Scrollbar corner radius</p>
<h2 id="scrollbartrackcolor" tabindex="-1">
<a class="header-anchor" href="#scrollbartrackcolor"
>scrollbarTrackColor</a
>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Scrollbar track color</p>
<h2 id="scrollbarwidth" tabindex="-1">
<a class="header-anchor" href="#scrollbarwidth">scrollbarWidth</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Scrollbar width in pixels</p>
<h2 id="selectall" tabindex="-1">
<a class="header-anchor" href="#selectall">selectAll</a>
</h2>
<pre><code class="language-lua">(method) Element:selectAll()
</code></pre>
<p>Select all text</p>
<h2 id="selectonfocus" tabindex="-1">
<a class="header-anchor" href="#selectonfocus">selectOnFocus</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether to select all text on focus (default: false)</p>
<h2 id="selectioncolor" tabindex="-1">
<a class="header-anchor" href="#selectioncolor">selectionColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Selection background color (default: nil, uses theme or default)</p>
<h2 id="setcursorposition" tabindex="-1">
<a class="header-anchor" href="#setcursorposition"
>setCursorPosition</a
>
</h2>
<pre><code class="language-lua">(method) Element:setCursorPosition(position: number)
</code></pre>
<p>Set cursor position</p>
<p>@<em>param</em> <code>position</code> — Character index (0-based)</p>
<h2 id="setscrollposition" tabindex="-1">
<a class="header-anchor" href="#setscrollposition"
>setScrollPosition</a
>
</h2>
<pre><code class="language-lua">(method) Element:setScrollPosition(x?: number, y?: number)
</code></pre>
<p>
Set scroll position with bounds clamping (delegates to ScrollManager)
</p>
<p>
@<em>param</em> <code>x</code> — X scroll position (nil to keep
current)
</p>
<p>
@<em>param</em> <code>y</code> — Y scroll position (nil to keep
current)
</p>
<h2 id="setselection" tabindex="-1">
<a class="header-anchor" href="#setselection">setSelection</a>
</h2>
<pre><code class="language-lua">(method) Element:setSelection(startPos: number, endPos: number)
</code></pre>
<p>Set selection range</p>
<p>
@<em>param</em> <code>startPos</code> — Start position (inclusive)
</p>
<p>@<em>param</em> <code>endPos</code> — End position (inclusive)</p>
<h2 id="settext" tabindex="-1">
<a class="header-anchor" href="#settext">setText</a>
</h2>
<pre><code class="language-lua">(method) Element:setText(text: <span class="hljs-built_in">string</span>)
</code></pre>
<p>Set text buffer and mark dirty</p>
<h2 id="show" tabindex="-1">
<a class="header-anchor" href="#show">show</a>
</h2>
<pre><code class="language-lua">(method) Element:show()
</code></pre>
<p>same as calling updateOpacity(1)</p>
<h2 id="text" tabindex="-1">
<a class="header-anchor" href="#text">text</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Text content to display in the element</p>
<h2 id="textalign" tabindex="-1">
<a class="header-anchor" href="#textalign">textAlign</a>
</h2>
<pre><code class="language-lua">TextAlign
</code></pre>
<p>Alignment of the text content</p>
<h2 id="textcolor" tabindex="-1">
<a class="header-anchor" href="#textcolor">textColor</a>
</h2>
<pre><code class="language-lua">Color
</code></pre>
<p>Color of the text content</p>
<h2 id="textoverflow" tabindex="-1">
<a class="header-anchor" href="#textoverflow">textOverflow</a>
</h2>
<pre><code class="language-lua"><span class="hljs-string">&quot;clip&quot;</span>|<span class="hljs-string">&quot;ellipsis&quot;</span>|<span class="hljs-string">&quot;scroll&quot;</span>
</code></pre>
<p>Text overflow behavior (default: “clip”)</p>
<h2 id="textsize" tabindex="-1">
<a class="header-anchor" href="#textsize">textSize</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Resolved font size for text content in pixels</p>
<h2 id="textwrap" tabindex="-1">
<a class="header-anchor" href="#textwrap">textWrap</a>
</h2>
<pre><code class="language-lua">boolean|<span class="hljs-string">&quot;char&quot;</span>|<span class="hljs-string">&quot;word&quot;</span>
</code></pre>
<p>
Text wrapping mode (default: false for single-line, “word” for
multi-line)
</p>
<h2 id="textinput" tabindex="-1">
<a class="header-anchor" href="#textinput">textinput</a>
</h2>
<pre><code class="language-lua">(method) Element:textinput(text: <span class="hljs-built_in">string</span>)
</code></pre>
<p>Handle text input (character input)</p>
<p>@<em>param</em> <code>text</code> — Character(s) to insert</p>
<h2 id="theme" tabindex="-1">
<a class="header-anchor" href="#theme">theme</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Theme component to use for rendering</p>
<h2 id="themecomponent" tabindex="-1">
<a class="header-anchor" href="#themecomponent">themeComponent</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<h2 id="top" tabindex="-1">
<a class="header-anchor" href="#top">top</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Offset from top edge (CSS-style positioning)</p>
<h2 id="transform-2" tabindex="-1">
<a class="header-anchor" href="#transform-2">transform</a>
</h2>
<pre><code class="language-lua">TransformProps
</code></pre>
<p>Transform properties for animations and styling</p>
<h2 id="transition-2" tabindex="-1">
<a class="header-anchor" href="#transition-2">transition</a>
</h2>
<pre><code class="language-lua">TransitionProps
</code></pre>
<p>Transition settings for animations</p>
<h2 id="units" tabindex="-1">
<a class="header-anchor" href="#units">units</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<p>Original unit specifications for responsive behavior</p>
<h2 id="update-1" tabindex="-1">
<a class="header-anchor" href="#update-1">update</a>
</h2>
<pre><code class="language-lua">(method) Element:update(dt: number)
</code></pre>
<p>Update element (propagate to children)</p>
<h2 id="updateopacity" tabindex="-1">
<a class="header-anchor" href="#updateopacity">updateOpacity</a>
</h2>
<pre><code class="language-lua">(method) Element:updateOpacity(newOpacity: number)
</code></pre>
<h2 id="updatetext" tabindex="-1">
<a class="header-anchor" href="#updatetext">updateText</a>
</h2>
<pre><code class="language-lua">(method) Element:updateText(newText: <span class="hljs-built_in">string</span>, autoresize?: boolean)
</code></pre>
<p>@<em>param</em> <code>autoresize</code> — default: false</p>
<h2 id="userdata" tabindex="-1">
<a class="header-anchor" href="#userdata">userdata</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<h2 id="width" tabindex="-1">
<a class="header-anchor" href="#width">width</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>|number
</code></pre>
<p>Width of the element</p>
<h2 id="x" tabindex="-1"><a class="header-anchor" href="#x">x</a></h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>|number
</code></pre>
<p>X coordinate of the element</p>
<h2 id="y" tabindex="-1"><a class="header-anchor" href="#y">y</a></h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>|number
</code></pre>
<p>Y coordinate of the element</p>
<h2 id="z" tabindex="-1"><a class="header-anchor" href="#z">z</a></h2>
<pre><code class="language-lua">number
</code></pre>
<p>Z-index for layering (default: 0)</p>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-2" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-2"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="__index-2" tabindex="-1">
<a class="header-anchor" href="#__index-2">__index</a>
</h2>
<pre><code class="language-lua">Element
</code></pre>
<h2 id="_blurinstance" tabindex="-1">
<a class="header-anchor" href="#_blurinstance">_blurInstance</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<p>Internal: cached blur effect instance</p>
<h2 id="_borderboxheight" tabindex="-1">
<a class="header-anchor" href="#_borderboxheight">_borderBoxHeight</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: cached border-box height</p>
<h2 id="_borderboxwidth" tabindex="-1">
<a class="header-anchor" href="#_borderboxwidth">_borderBoxWidth</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: cached border-box width</p>
<h2 id="_calculatescrollbardimensions" tabindex="-1">
<a class="header-anchor" href="#_calculatescrollbardimensions"
>_calculateScrollbarDimensions</a
>
</h2>
<pre><code class="language-lua">(method) Element:_calculateScrollbarDimensions()
-&gt; <span class="hljs-built_in">table</span>
</code></pre>
<p>
Calculate scrollbar dimensions and positions (delegates to
ScrollManager)
</p>
<p>
@<em>return</em> — {vertical: {visible, trackHeight, thumbHeight,
thumbY}, horizontal: {visible, trackWidth, thumbWidth, thumbX}}
</p>
<h2 id="_contentheight" tabindex="-1">
<a class="header-anchor" href="#_contentheight">_contentHeight</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: total content height</p>
<h2 id="_contentwidth" tabindex="-1">
<a class="header-anchor" href="#_contentwidth">_contentWidth</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: total content width</p>
<h2 id="_cursorblinkpausetimer" tabindex="-1">
<a class="header-anchor" href="#_cursorblinkpausetimer"
>_cursorBlinkPauseTimer</a
>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: timer for how long cursor blink has been paused</p>
<h2 id="_cursorblinkpaused" tabindex="-1">
<a class="header-anchor" href="#_cursorblinkpaused"
>_cursorBlinkPaused</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: whether cursor blink is paused (e.g., while typing)</p>
<h2 id="_cursorblinktimer" tabindex="-1">
<a class="header-anchor" href="#_cursorblinktimer"
>_cursorBlinkTimer</a
>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: cursor blink timer</p>
<h2 id="_cursorcolumn" tabindex="-1">
<a class="header-anchor" href="#_cursorcolumn">_cursorColumn</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: cursor column within line</p>
<h2 id="_cursorline" tabindex="-1">
<a class="header-anchor" href="#_cursorline">_cursorLine</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: cursor line number (1-based)</p>
<h2 id="_cursorposition" tabindex="-1">
<a class="header-anchor" href="#_cursorposition">_cursorPosition</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: cursor character position (0-based)</p>
<h2 id="_cursorvisible" tabindex="-1">
<a class="header-anchor" href="#_cursorvisible">_cursorVisible</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: cursor visibility state</p>
<h2 id="_detectoverflow" tabindex="-1">
<a class="header-anchor" href="#_detectoverflow">_detectOverflow</a>
</h2>
<pre><code class="language-lua">(method) Element:_detectOverflow()
</code></pre>
<p>
Detect if content overflows container bounds (delegates to
ScrollManager)
</p>
<h2 id="_eventhandler" tabindex="-1">
<a class="header-anchor" href="#_eventhandler">_eventHandler</a>
</h2>
<pre><code class="language-lua">EventHandler
</code></pre>
<p>Event handler instance for input processing</p>
<h2 id="_explicitlyabsolute" tabindex="-1">
<a class="header-anchor" href="#_explicitlyabsolute"
>_explicitlyAbsolute</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<h2 id="_focused" tabindex="-1">
<a class="header-anchor" href="#_focused">_focused</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: focus state</p>
<h2 id="_getfont" tabindex="-1">
<a class="header-anchor" href="#_getfont">_getFont</a>
</h2>
<pre><code class="language-lua">(method) Element:_getFont()
-&gt; love.Font
</code></pre>
<h2 id="_getscrollbaratposition" tabindex="-1">
<a class="header-anchor" href="#_getscrollbaratposition"
>_getScrollbarAtPosition</a
>
</h2>
<pre><code class="language-lua">(method) Element:_getScrollbarAtPosition(mouseX: number, mouseY: number)
-&gt; <span class="hljs-built_in">table</span>|<span class="hljs-literal">nil</span>
</code></pre>
<p>Get scrollbar at mouse position (delegates to ScrollManager)</p>
<p>
@<em>return</em> — {component: “vertical”|“horizontal”, region:
“thumb”|“track”}
</p>
<h2 id="_handlescrollbardrag" tabindex="-1">
<a class="header-anchor" href="#_handlescrollbardrag"
>_handleScrollbarDrag</a
>
</h2>
<pre><code class="language-lua">(method) Element:_handleScrollbarDrag(mouseX: number, mouseY: number)
-&gt; boolean
</code></pre>
<p>Handle scrollbar drag (delegates to ScrollManager)</p>
<p>@<em>return</em> — True if event was consumed</p>
<h2 id="_handlescrollbarpress" tabindex="-1">
<a class="header-anchor" href="#_handlescrollbarpress"
>_handleScrollbarPress</a
>
</h2>
<pre><code class="language-lua">(method) Element:_handleScrollbarPress(mouseX: number, mouseY: number, button: number)
-&gt; boolean
</code></pre>
<p>Handle scrollbar mouse press</p>
<p>@<em>return</em> — True if event was consumed</p>
<h2 id="_handlescrollbarrelease" tabindex="-1">
<a class="header-anchor" href="#_handlescrollbarrelease"
>_handleScrollbarRelease</a
>
</h2>
<pre><code class="language-lua">(method) Element:_handleScrollbarRelease(button: number)
-&gt; boolean
</code></pre>
<p>Handle scrollbar release (delegates to ScrollManager)</p>
<p>@<em>return</em> — True if event was consumed</p>
<h2 id="_handletextclick" tabindex="-1">
<a class="header-anchor" href="#_handletextclick">_handleTextClick</a>
</h2>
<pre><code class="language-lua">(method) Element:_handleTextClick(mouseX: number, mouseY: number, clickCount: number)
</code></pre>
<p>
Handle mouse click on text (set cursor position or start selection)
</p>
<p>@<em>param</em> <code>mouseX</code> — Mouse X coordinate</p>
<p>@<em>param</em> <code>mouseY</code> — Mouse Y coordinate</p>
<p>
@<em>param</em> <code>clickCount</code> — Number of clicks (1=single,
2=double, 3=triple)
</p>
<h2 id="_handletextdrag" tabindex="-1">
<a class="header-anchor" href="#_handletextdrag">_handleTextDrag</a>
</h2>
<pre><code class="language-lua">(method) Element:_handleTextDrag(mouseX: number, mouseY: number)
</code></pre>
<p>Handle mouse drag for text selection</p>
<p>@<em>param</em> <code>mouseX</code> — Mouse X coordinate</p>
<p>@<em>param</em> <code>mouseY</code> — Mouse Y coordinate</p>
<h2 id="_handlewheelscroll" tabindex="-1">
<a class="header-anchor" href="#_handlewheelscroll"
>_handleWheelScroll</a
>
</h2>
<pre><code class="language-lua">(method) Element:_handleWheelScroll(x: number, y: number)
-&gt; boolean
</code></pre>
<p>Handle mouse wheel scrolling (delegates to ScrollManager)</p>
<p>@<em>param</em> <code>x</code> — Horizontal scroll amount</p>
<p>@<em>param</em> <code>y</code> — Vertical scroll amount</p>
<p>@<em>return</em> — True if scroll was handled</p>
<h2 id="_hoveredscrollbar" tabindex="-1">
<a class="header-anchor" href="#_hoveredscrollbar"
>_hoveredScrollbar</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<p>Internal: currently hovered scrollbar info</p>
<h2 id="_layoutengine" tabindex="-1">
<a class="header-anchor" href="#_layoutengine">_layoutEngine</a>
</h2>
<pre><code class="language-lua">LayoutEngine
</code></pre>
<p>Internal: LayoutEngine instance for layout calculations</p>
<h2 id="_lines" tabindex="-1">
<a class="header-anchor" href="#_lines">_lines</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<p>Internal: split lines for multi-line text</p>
<h2 id="_loadedimage" tabindex="-1">
<a class="header-anchor" href="#_loadedimage">_loadedImage</a>
</h2>
<pre><code class="language-lua">(love.Image)?
</code></pre>
<p>Internal: cached loaded image</p>
<h2 id="_maxscrollx" tabindex="-1">
<a class="header-anchor" href="#_maxscrollx">_maxScrollX</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: maximum horizontal scroll</p>
<h2 id="_maxscrolly" tabindex="-1">
<a class="header-anchor" href="#_maxscrolly">_maxScrollY</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: maximum vertical scroll</p>
<h2 id="_mousedownposition" tabindex="-1">
<a class="header-anchor" href="#_mousedownposition"
>_mouseDownPosition</a
>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: mouse down position for drag tracking</p>
<h2 id="_originalpositioning" tabindex="-1">
<a class="header-anchor" href="#_originalpositioning"
>_originalPositioning</a
>
</h2>
<pre><code class="language-lua">Positioning?
</code></pre>
<p>Original positioning value set by user</p>
<h2 id="_overflowx" tabindex="-1">
<a class="header-anchor" href="#_overflowx">_overflowX</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: whether content overflows horizontally</p>
<h2 id="_overflowy" tabindex="-1">
<a class="header-anchor" href="#_overflowy">_overflowY</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: whether content overflows vertically</p>
<h2 id="_pressed" tabindex="-1">
<a class="header-anchor" href="#_pressed">_pressed</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<p>Internal: button press state tracking</p>
<h2 id="_renderer" tabindex="-1">
<a class="header-anchor" href="#_renderer">_renderer</a>
</h2>
<pre><code class="language-lua">Renderer
</code></pre>
<p>Internal: Renderer instance for visual rendering</p>
<h2 id="_scrollmanager" tabindex="-1">
<a class="header-anchor" href="#_scrollmanager">_scrollManager</a>
</h2>
<pre><code class="language-lua">ScrollManager?
</code></pre>
<p>Internal: ScrollManager instance for scroll handling</p>
<h2 id="_scrollx" tabindex="-1">
<a class="header-anchor" href="#_scrollx">_scrollX</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: horizontal scroll position</p>
<h2 id="_scrolly" tabindex="-1">
<a class="header-anchor" href="#_scrolly">_scrollY</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: vertical scroll position</p>
<h2 id="_scrollbardragoffset" tabindex="-1">
<a class="header-anchor" href="#_scrollbardragoffset"
>_scrollbarDragOffset</a
>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: scrollbar drag offset</p>
<h2 id="_scrollbardragging" tabindex="-1">
<a class="header-anchor" href="#_scrollbardragging"
>_scrollbarDragging</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: scrollbar dragging state</p>
<h2 id="_scrollbarhoveredhorizontal" tabindex="-1">
<a class="header-anchor" href="#_scrollbarhoveredhorizontal"
>_scrollbarHoveredHorizontal</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: horizontal scrollbar hover state</p>
<h2 id="_scrollbarhoveredvertical" tabindex="-1">
<a class="header-anchor" href="#_scrollbarhoveredvertical"
>_scrollbarHoveredVertical</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: vertical scrollbar hover state</p>
<h2 id="_scrollbarpresshandled" tabindex="-1">
<a class="header-anchor" href="#_scrollbarpresshandled"
>_scrollbarPressHandled</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: scrollbar press handled flag</p>
<h2 id="_selectionanchor" tabindex="-1">
<a class="header-anchor" href="#_selectionanchor">_selectionAnchor</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: selection anchor point</p>
<h2 id="_selectionend" tabindex="-1">
<a class="header-anchor" href="#_selectionend">_selectionEnd</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: selection end position</p>
<h2 id="_selectionstart" tabindex="-1">
<a class="header-anchor" href="#_selectionstart">_selectionStart</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: selection start position</p>
<h2 id="_stateid" tabindex="-1">
<a class="header-anchor" href="#_stateid">_stateId</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>State manager ID for this element</p>
<h2 id="_syncscrollmanagerstate" tabindex="-1">
<a class="header-anchor" href="#_syncscrollmanagerstate"
>_syncScrollManagerState</a
>
</h2>
<pre><code class="language-lua">(method) Element:_syncScrollManagerState()
</code></pre>
<p>
Sync ScrollManager state to Element properties for backward
compatibility This ensures Renderer and StateManager can access scroll
state from Element
</p>
<h2 id="_textbuffer" tabindex="-1">
<a class="header-anchor" href="#_textbuffer">_textBuffer</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Internal: text buffer for editable elements</p>
<h2 id="_textdirty" tabindex="-1">
<a class="header-anchor" href="#_textdirty">_textDirty</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: flag to recalculate lines/wrapping</p>
<h2 id="_textdragoccurred" tabindex="-1">
<a class="header-anchor" href="#_textdragoccurred"
>_textDragOccurred</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Internal: whether text drag occurred</p>
<h2 id="_texteditor" tabindex="-1">
<a class="header-anchor" href="#_texteditor">_textEditor</a>
</h2>
<pre><code class="language-lua">TextEditor?
</code></pre>
<p>Internal: TextEditor instance for editable elements</p>
<h2 id="_thememanager" tabindex="-1">
<a class="header-anchor" href="#_thememanager">_themeManager</a>
</h2>
<pre><code class="language-lua">ThemeManager
</code></pre>
<p>Internal: theme manager instance</p>
<h2 id="_themestate" tabindex="-1">
<a class="header-anchor" href="#_themestate">_themeState</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Current theme state (normal, hover, pressed, active, disabled)</p>
<h2 id="_wrapline" tabindex="-1">
<a class="header-anchor" href="#_wrapline">_wrapLine</a>
</h2>
<pre><code class="language-lua">(method) Element:_wrapLine(line: <span class="hljs-built_in">string</span>, maxWidth: number)
-&gt; <span class="hljs-built_in">table</span>
</code></pre>
<p>Wrap a single line of text</p>
<p>@<em>param</em> <code>line</code> — Line to wrap</p>
<p>@<em>param</em> <code>maxWidth</code> — Maximum width in pixels</p>
<p>@<em>return</em> — Array of wrapped line parts</p>
<h2 id="_wrappedlines" tabindex="-1">
<a class="header-anchor" href="#_wrappedlines">_wrappedLines</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<p>Internal: wrapped line data</p>
<h1 id="elementprops" tabindex="-1">
<a class="header-anchor" href="#elementprops">ElementProps</a>
</h1>
<h2 id="active-1" tabindex="-1">
<a class="header-anchor" href="#active-1">active</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>
Whether the element is active/focused (for inputs, default: false)
</p>
<h2 id="aligncontent-1" tabindex="-1">
<a class="header-anchor" href="#aligncontent-1">alignContent</a>
</h2>
<pre><code class="language-lua">AlignContent?
</code></pre>
<p>
Alignment of lines in multi-line flex containers (default: STRETCH)
</p>
<h2 id="alignitems-1" tabindex="-1">
<a class="header-anchor" href="#alignitems-1">alignItems</a>
</h2>
<pre><code class="language-lua">AlignItems?
</code></pre>
<p>Alignment of items along cross axis (default: STRETCH)</p>
<h2 id="alignself-1" tabindex="-1">
<a class="header-anchor" href="#alignself-1">alignSelf</a>
</h2>
<pre><code class="language-lua">AlignSelf?
</code></pre>
<p>Alignment of the item itself along cross axis (default: AUTO)</p>
<h2 id="autogrow-1" tabindex="-1">
<a class="header-anchor" href="#autogrow-1">autoGrow</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>
Whether element auto-grows with text (default: false for single-line,
true for multi-line)
</p>
<h2 id="autoscaletext-1" tabindex="-1">
<a class="header-anchor" href="#autoscaletext-1">autoScaleText</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether text should auto-scale with window size (default: true)</p>
<h2 id="backdropblur-1" tabindex="-1">
<a class="header-anchor" href="#backdropblur-1">backdropBlur</a>
</h2>
<pre><code class="language-lua">{ intensity: number, quality: number }?
</code></pre>
<p>
Blur content behind the element (intensity: 0-100, quality: 1-10,
default: nil)
</p>
<h2 id="backgroundcolor-1" tabindex="-1">
<a class="header-anchor" href="#backgroundcolor-1">backgroundColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Background color (default: transparent)</p>
<h2 id="border-1" tabindex="-1">
<a class="header-anchor" href="#border-1">border</a>
</h2>
<pre><code class="language-lua">Border?
</code></pre>
<p>Border configuration for the element</p>
<h2 id="bordercolor-1" tabindex="-1">
<a class="header-anchor" href="#bordercolor-1">borderColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Color of the border (default: black)</p>
<h2 id="bottom-1" tabindex="-1">
<a class="header-anchor" href="#bottom-1">bottom</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Offset from bottom edge (CSS-style positioning)</p>
<h2 id="columngap-1" tabindex="-1">
<a class="header-anchor" href="#columngap-1">columnGap</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Gap between grid columns (default: 0)</p>
<h2 id="contentautosizingmultiplier-1" tabindex="-1">
<a class="header-anchor" href="#contentautosizingmultiplier-1"
>contentAutoSizingMultiplier</a
>
</h2>
<pre><code class="language-lua">{ width: number?, height: number? }?
</code></pre>
<p>
Multiplier for auto-sized content dimensions (default: sourced from
theme or {1, 1})
</p>
<h2 id="contentblur-1" tabindex="-1">
<a class="header-anchor" href="#contentblur-1">contentBlur</a>
</h2>
<pre><code class="language-lua">{ intensity: number, quality: number }?
</code></pre>
<p>
Blur the element’s content including children (intensity: 0-100,
quality: 1-10, default: nil)
</p>
<h2 id="cornerradius-1" tabindex="-1">
<a class="header-anchor" href="#cornerradius-1">cornerRadius</a>
</h2>
<pre><code class="language-lua">(number|{ topLeft: number?, topRight: number?, bottomLeft: number?, bottomRight: number? })?
</code></pre>
<p>
Corner radius: number (all corners) or table for individual corners
(default: 0)
</p>
<h2 id="cursorblinkrate-1" tabindex="-1">
<a class="header-anchor" href="#cursorblinkrate-1">cursorBlinkRate</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Cursor blink rate in seconds (default: 0.5)</p>
<h2 id="cursorcolor-1" tabindex="-1">
<a class="header-anchor" href="#cursorcolor-1">cursorColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Cursor color (default: nil, uses textColor)</p>
<h2 id="disablehighlight-1" tabindex="-1">
<a class="header-anchor" href="#disablehighlight-1"
>disableHighlight</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>
Whether to disable the pressed state highlight overlay (default:
false, or true when using themeComponent)
</p>
<h2 id="disabled-1" tabindex="-1">
<a class="header-anchor" href="#disabled-1">disabled</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether the element is disabled (default: false)</p>
<h2 id="editable-1" tabindex="-1">
<a class="header-anchor" href="#editable-1">editable</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether the element is editable (default: false)</p>
<h2 id="flexdirection-1" tabindex="-1">
<a class="header-anchor" href="#flexdirection-1">flexDirection</a>
</h2>
<pre><code class="language-lua">FlexDirection?
</code></pre>
<p>
Direction of flex layout: “horizontal”|“vertical” (default:
HORIZONTAL)
</p>
<h2 id="flexwrap-1" tabindex="-1">
<a class="header-anchor" href="#flexwrap-1">flexWrap</a>
</h2>
<pre><code class="language-lua">FlexWrap?
</code></pre>
<p>
Whether children wrap to multiple lines:
“nowrap”|“wrap”|“wrap-reverse” (default: NOWRAP)
</p>
<h2 id="fontfamily-1" tabindex="-1">
<a class="header-anchor" href="#fontfamily-1">fontFamily</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>
Font family name from theme or path to font file (default: theme
default or system default, inherits from parent)
</p>
<h2 id="gap-1" tabindex="-1">
<a class="header-anchor" href="#gap-1">gap</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Space between children elements (default: 0)</p>
<h2 id="gridcolumns-1" tabindex="-1">
<a class="header-anchor" href="#gridcolumns-1">gridColumns</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Number of columns in the grid (default: 1)</p>
<h2 id="gridrows-1" tabindex="-1">
<a class="header-anchor" href="#gridrows-1">gridRows</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Number of rows in the grid (default: 1)</p>
<h2 id="height-1" tabindex="-1">
<a class="header-anchor" href="#height-1">height</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Height of the element (default: calculated automatically)</p>
<h2 id="hidescrollbars-1" tabindex="-1">
<a class="header-anchor" href="#hidescrollbars-1">hideScrollbars</a>
</h2>
<pre><code class="language-lua">(boolean|{ vertical: boolean, horizontal: boolean })?
</code></pre>
<p>
Hide scrollbars (boolean for both, or table for individual control,
default: false)
</p>
<h2 id="id-1" tabindex="-1">
<a class="header-anchor" href="#id-1">id</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>
Unique identifier for the element (auto-generated in immediate mode if
not provided)
</p>
<h2 id="image-1" tabindex="-1">
<a class="header-anchor" href="#image-1">image</a>
</h2>
<pre><code class="language-lua">(love.Image)?
</code></pre>
<p>Image object to display</p>
<h2 id="imageopacity-1" tabindex="-1">
<a class="header-anchor" href="#imageopacity-1">imageOpacity</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Image opacity 0-1 (default: 1, combines with element opacity)</p>
<h2 id="imagepath-1" tabindex="-1">
<a class="header-anchor" href="#imagepath-1">imagePath</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Path to image file (auto-loads via ImageCache)</p>
<h2 id="inputtype-1" tabindex="-1">
<a class="header-anchor" href="#inputtype-1">inputType</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;email&quot;</span>|<span class="hljs-string">&quot;number&quot;</span>|<span class="hljs-string">&quot;text&quot;</span>|<span class="hljs-string">&quot;url&quot;</span>)?
</code></pre>
<p>Input type for validation (default: “text”)</p>
<h2 id="justifycontent-1" tabindex="-1">
<a class="header-anchor" href="#justifycontent-1">justifyContent</a>
</h2>
<pre><code class="language-lua">JustifyContent?
</code></pre>
<p>Alignment of items along main axis (default: FLEX_START)</p>
<h2 id="justifyself-1" tabindex="-1">
<a class="header-anchor" href="#justifyself-1">justifySelf</a>
</h2>
<pre><code class="language-lua">JustifySelf?
</code></pre>
<p>Alignment of the item itself along main axis (default: AUTO)</p>
<h2 id="left-1" tabindex="-1">
<a class="header-anchor" href="#left-1">left</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Offset from left edge (CSS-style positioning)</p>
<h2 id="margin-1" tabindex="-1">
<a class="header-anchor" href="#margin-1">margin</a>
</h2>
<pre><code class="language-lua">{ top: (<span class="hljs-built_in">string</span>|number)?, right: (<span class="hljs-built_in">string</span>|number)?, bottom: (<span class="hljs-built_in">string</span>|number)?, left: (<span class="hljs-built_in">string</span>|number)?, horizontal: (<span class="hljs-built_in">string</span>|number)?, vertical: (<span class="hljs-built_in">string</span>|number)? }?
</code></pre>
<p>
Margin around element (default: {top=0, right=0, bottom=0, left=0})
</p>
<h2 id="maxlength-1" tabindex="-1">
<a class="header-anchor" href="#maxlength-1">maxLength</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Maximum text length in characters (default: nil)</p>
<h2 id="maxlines-1" tabindex="-1">
<a class="header-anchor" href="#maxlines-1">maxLines</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Maximum number of lines (default: nil)</p>
<h2 id="maxtextsize-1" tabindex="-1">
<a class="header-anchor" href="#maxtextsize-1">maxTextSize</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Maximum text size in pixels for auto-scaling</p>
<h2 id="mintextsize-1" tabindex="-1">
<a class="header-anchor" href="#mintextsize-1">minTextSize</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Minimum text size in pixels for auto-scaling</p>
<h2 id="multiline-1" tabindex="-1">
<a class="header-anchor" href="#multiline-1">multiline</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether the element supports multiple lines (default: false)</p>
<h2 id="objectfit-1" tabindex="-1">
<a class="header-anchor" href="#objectfit-1">objectFit</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;contain&quot;</span>|<span class="hljs-string">&quot;cover&quot;</span>|<span class="hljs-string">&quot;fill&quot;</span>|<span class="hljs-string">&quot;none&quot;</span>|<span class="hljs-string">&quot;scale-down&quot;</span>)?
</code></pre>
<p>Image fit mode (default: “fill”)</p>
<h2 id="objectposition-1" tabindex="-1">
<a class="header-anchor" href="#objectposition-1">objectPosition</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>
Image position like “center center”, “top left”, “50% 50%” (default:
“center center”)
</p>
<h2 id="onblur-1" tabindex="-1">
<a class="header-anchor" href="#onblur-1">onBlur</a>
</h2>
<pre><code class="language-lua">fun(element: Element, event: InputEvent)?
</code></pre>
<p>Callback when element loses focus</p>
<h2 id="onenter-1" tabindex="-1">
<a class="header-anchor" href="#onenter-1">onEnter</a>
</h2>
<pre><code class="language-lua">fun(element: Element)?
</code></pre>
<p>Callback when Enter key is pressed</p>
<h2 id="onevent-1" tabindex="-1">
<a class="header-anchor" href="#onevent-1">onEvent</a>
</h2>
<pre><code class="language-lua">fun(element: Element, event: InputEvent)?
</code></pre>
<p>Callback function for interaction events</p>
<h2 id="onfocus-1" tabindex="-1">
<a class="header-anchor" href="#onfocus-1">onFocus</a>
</h2>
<pre><code class="language-lua">fun(element: Element, event: InputEvent)?
</code></pre>
<p>Callback when element receives focus</p>
<h2 id="ontextchange-1" tabindex="-1">
<a class="header-anchor" href="#ontextchange-1">onTextChange</a>
</h2>
<pre><code class="language-lua">fun(element: Element, text: <span class="hljs-built_in">string</span>)?
</code></pre>
<p>Callback when text content changes</p>
<h2 id="ontextinput-1" tabindex="-1">
<a class="header-anchor" href="#ontextinput-1">onTextInput</a>
</h2>
<pre><code class="language-lua">fun(element: Element, text: <span class="hljs-built_in">string</span>)?
</code></pre>
<p>Callback when text is input</p>
<h2 id="opacity-1" tabindex="-1">
<a class="header-anchor" href="#opacity-1">opacity</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Element opacity 0-1 (default: 1)</p>
<h2 id="overflow-1" tabindex="-1">
<a class="header-anchor" href="#overflow-1">overflow</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;auto&quot;</span>|<span class="hljs-string">&quot;hidden&quot;</span>|<span class="hljs-string">&quot;scroll&quot;</span>|<span class="hljs-string">&quot;visible&quot;</span>)?
</code></pre>
<p>Overflow behavior (default: “hidden”)</p>
<h2 id="overflowx-1" tabindex="-1">
<a class="header-anchor" href="#overflowx-1">overflowX</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;auto&quot;</span>|<span class="hljs-string">&quot;hidden&quot;</span>|<span class="hljs-string">&quot;scroll&quot;</span>|<span class="hljs-string">&quot;visible&quot;</span>)?
</code></pre>
<p>X-axis overflow (overrides overflow)</p>
<h2 id="overflowy-1" tabindex="-1">
<a class="header-anchor" href="#overflowy-1">overflowY</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;auto&quot;</span>|<span class="hljs-string">&quot;hidden&quot;</span>|<span class="hljs-string">&quot;scroll&quot;</span>|<span class="hljs-string">&quot;visible&quot;</span>)?
</code></pre>
<p>Y-axis overflow (overrides overflow)</p>
<h2 id="padding-1" tabindex="-1">
<a class="header-anchor" href="#padding-1">padding</a>
</h2>
<pre><code class="language-lua">{ top: (<span class="hljs-built_in">string</span>|number)?, right: (<span class="hljs-built_in">string</span>|number)?, bottom: (<span class="hljs-built_in">string</span>|number)?, left: (<span class="hljs-built_in">string</span>|number)?, horizontal: (<span class="hljs-built_in">string</span>|number)?, vertical: (<span class="hljs-built_in">string</span>|number)? }?
</code></pre>
<p>
Padding around children (default: {top=0, right=0, bottom=0, left=0})
</p>
<h2 id="parent-1" tabindex="-1">
<a class="header-anchor" href="#parent-1">parent</a>
</h2>
<pre><code class="language-lua">Element?
</code></pre>
<p>Parent element for hierarchical structure</p>
<h2 id="passwordmode-1" tabindex="-1">
<a class="header-anchor" href="#passwordmode-1">passwordMode</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>
Whether to display text as password (default: false, disables
multiline)
</p>
<h2 id="placeholder-1" tabindex="-1">
<a class="header-anchor" href="#placeholder-1">placeholder</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Placeholder text when empty (default: nil)</p>
<h2 id="positioning-1" tabindex="-1">
<a class="header-anchor" href="#positioning-1">positioning</a>
</h2>
<pre><code class="language-lua">Positioning?
</code></pre>
<p>
Layout positioning mode: “absolute”|“relative”|“flex”|“grid” (default:
RELATIVE)
</p>
<h2 id="right-1" tabindex="-1">
<a class="header-anchor" href="#right-1">right</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Offset from right edge (CSS-style positioning)</p>
<h2 id="rowgap-1" tabindex="-1">
<a class="header-anchor" href="#rowgap-1">rowGap</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Gap between grid rows (default: 0)</p>
<h2 id="scalecorners-1" tabindex="-1">
<a class="header-anchor" href="#scalecorners-1">scaleCorners</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>
Scale multiplier for 9-patch corners/edges. E.g., 2 = 2x size
(overrides theme setting)
</p>
<h2 id="scalingalgorithm-1" tabindex="-1">
<a class="header-anchor" href="#scalingalgorithm-1"
>scalingAlgorithm</a
>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;bilinear&quot;</span>|<span class="hljs-string">&quot;nearest&quot;</span>)?
</code></pre>
<p>
Scaling algorithm for 9-patch corners: “nearest” (sharp/pixelated) or
“bilinear” (smooth) (overrides theme setting)
</p>
<h2 id="scrollspeed-1" tabindex="-1">
<a class="header-anchor" href="#scrollspeed-1">scrollSpeed</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Pixels per wheel notch (default: 20)</p>
<h2 id="scrollable-1" tabindex="-1">
<a class="header-anchor" href="#scrollable-1">scrollable</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>
Whether text is scrollable (default: false for single-line, true for
multi-line)
</p>
<h2 id="scrollbarcolor-1" tabindex="-1">
<a class="header-anchor" href="#scrollbarcolor-1">scrollbarColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Scrollbar thumb color (default: Color.new(0.5, 0.5, 0.5, 0.8))</p>
<h2 id="scrollbarpadding-1" tabindex="-1">
<a class="header-anchor" href="#scrollbarpadding-1"
>scrollbarPadding</a
>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Padding between scrollbar and edge (default: 2)</p>
<h2 id="scrollbarradius-1" tabindex="-1">
<a class="header-anchor" href="#scrollbarradius-1">scrollbarRadius</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Corner radius for scrollbar (default: 6)</p>
<h2 id="scrollbartrackcolor-1" tabindex="-1">
<a class="header-anchor" href="#scrollbartrackcolor-1"
>scrollbarTrackColor</a
>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Scrollbar track color (default: Color.new(0.2, 0.2, 0.2, 0.5))</p>
<h2 id="scrollbarwidth-1" tabindex="-1">
<a class="header-anchor" href="#scrollbarwidth-1">scrollbarWidth</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Width of scrollbar track in pixels (default: 12)</p>
<h2 id="selectonfocus-1" tabindex="-1">
<a class="header-anchor" href="#selectonfocus-1">selectOnFocus</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether to select all text on focus (default: false)</p>
<h2 id="selectioncolor-1" tabindex="-1">
<a class="header-anchor" href="#selectioncolor-1">selectionColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Selection background color (default: nil, uses theme or default)</p>
<h2 id="text-1" tabindex="-1">
<a class="header-anchor" href="#text-1">text</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Text content to display (default: nil)</p>
<h2 id="textalign-1" tabindex="-1">
<a class="header-anchor" href="#textalign-1">textAlign</a>
</h2>
<pre><code class="language-lua">TextAlign?
</code></pre>
<p>Alignment of the text content (default: START)</p>
<h2 id="textcolor-1" tabindex="-1">
<a class="header-anchor" href="#textcolor-1">textColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Color of the text content (default: black or theme text color)</p>
<h2 id="textoverflow-1" tabindex="-1">
<a class="header-anchor" href="#textoverflow-1">textOverflow</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;clip&quot;</span>|<span class="hljs-string">&quot;ellipsis&quot;</span>|<span class="hljs-string">&quot;scroll&quot;</span>)?
</code></pre>
<p>Text overflow behavior (default: “clip”)</p>
<h2 id="textsize-1" tabindex="-1">
<a class="header-anchor" href="#textsize-1">textSize</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>
Font size: number (px), string with units (“2vh”, “10%”), or preset
(“xxs”|“xs”|“sm”|“md”|“lg”|“xl”|“xxl”|“3xl”|“4xl”) (default: “md” or
12px)
</p>
<h2 id="textwrap-1" tabindex="-1">
<a class="header-anchor" href="#textwrap-1">textWrap</a>
</h2>
<pre><code class="language-lua">(boolean|<span class="hljs-string">&quot;char&quot;</span>|<span class="hljs-string">&quot;word&quot;</span>)?
</code></pre>
<p>
Text wrapping mode (default: false for single-line, “word” for
multi-line)
</p>
<h2 id="theme-1" tabindex="-1">
<a class="header-anchor" href="#theme-1">theme</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>
Theme name to use (e.g., “space”, “metal”). Defaults to theme from
flexlove.init()
</p>
<h2 id="themecomponent-1" tabindex="-1">
<a class="header-anchor" href="#themecomponent-1">themeComponent</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>
Theme component to use (e.g., “panel”, “button”, “input”). If nil, no
theme is applied
</p>
<h2 id="top-1" tabindex="-1">
<a class="header-anchor" href="#top-1">top</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Offset from top edge (CSS-style positioning)</p>
<h2 id="transform-3" tabindex="-1">
<a class="header-anchor" href="#transform-3">transform</a>
</h2>
<pre><code class="language-lua">TransformProps?
</code></pre>
<p>Transform properties for animations and styling</p>
<h2 id="transition-3" tabindex="-1">
<a class="header-anchor" href="#transition-3">transition</a>
</h2>
<pre><code class="language-lua">TransitionProps?
</code></pre>
<p>Transition settings for animations</p>
<h2 id="userdata-1" tabindex="-1">
<a class="header-anchor" href="#userdata-1">userdata</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<p>User-defined data storage for custom properties</p>
<h2 id="width-1" tabindex="-1">
<a class="header-anchor" href="#width-1">width</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Width of the element (default: calculated automatically)</p>
<h2 id="x-1" tabindex="-1">
<a class="header-anchor" href="#x-1">x</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>X coordinate of the element (default: 0)</p>
<h2 id="y-1" tabindex="-1">
<a class="header-anchor" href="#y-1">y</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|number)?
</code></pre>
<p>Y coordinate of the element (default: 0)</p>
<h2 id="z-1" tabindex="-1">
<a class="header-anchor" href="#z-1">z</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Z-index for layering (default: 0)</p>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-3" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-3"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="_scrollx-1" tabindex="-1">
<a class="header-anchor" href="#_scrollx-1">_scrollX</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: scroll X position (restored in immediate mode)</p>
<h2 id="_scrolly-1" tabindex="-1">
<a class="header-anchor" href="#_scrolly-1">_scrollY</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Internal: scroll Y position (restored in immediate mode)</p>
<h1 id="eventhandler" tabindex="-1">
<a class="header-anchor" href="#eventhandler">EventHandler</a>
</h1>
<h2 id="getstate" tabindex="-1">
<a class="header-anchor" href="#getstate">getState</a>
</h2>
<pre><code class="language-lua">(method) EventHandler:getState()
-&gt; State: <span class="hljs-built_in">table</span>
</code></pre>
<p>Get state for persistence (for immediate mode)</p>
<p>@<em>return</em> <code>State</code> — data</p>
<h2 id="initialize" tabindex="-1">
<a class="header-anchor" href="#initialize">initialize</a>
</h2>
<pre><code class="language-lua">(method) EventHandler:initialize(element: Element)
</code></pre>
<p>Initialize EventHandler with parent element reference</p>
<p>@<em>param</em> <code>element</code> — The parent element</p>
<h2 id="isanybuttonpressed" tabindex="-1">
<a class="header-anchor" href="#isanybuttonpressed"
>isAnyButtonPressed</a
>
</h2>
<pre><code class="language-lua">(method) EventHandler:isAnyButtonPressed()
-&gt; True: boolean
</code></pre>
<p>Check if any mouse button is pressed</p>
<p>@<em>return</em> <code>True</code> — if any button is pressed</p>
<h2 id="isbuttonpressed" tabindex="-1">
<a class="header-anchor" href="#isbuttonpressed">isButtonPressed</a>
</h2>
<pre><code class="language-lua">(method) EventHandler:isButtonPressed(button: number)
-&gt; True: boolean
</code></pre>
<p>Check if a specific button is pressed</p>
<p>
@<em>param</em> <code>button</code> — Mouse button (1=left, 2=right,
3=middle)
</p>
<p>@<em>return</em> <code>True</code> — if button is pressed</p>
<h2 id="new-3" tabindex="-1">
<a class="header-anchor" href="#new-3">new</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">EventHandler.new</span><span class="hljs-params">(config: table, deps: table)</span></span>
-&gt; EventHandler
</code></pre>
<p>Create a new EventHandler instance</p>
<p>@<em>param</em> <code>config</code> — Configuration options</p>
<p>
@<em>param</em> <code>deps</code> — Dependencies {InputEvent, Context,
utils}
</p>
<h2 id="onevent-2" tabindex="-1">
<a class="header-anchor" href="#onevent-2">onEvent</a>
</h2>
<pre><code class="language-lua">fun(element: Element, event: InputEvent)?
</code></pre>
<h2 id="processmouseevents" tabindex="-1">
<a class="header-anchor" href="#processmouseevents"
>processMouseEvents</a
>
</h2>
<pre><code class="language-lua">(method) EventHandler:processMouseEvents(mx: number, my: number, isHovering: boolean, isActiveElement: boolean)
</code></pre>
<p>Process mouse button events in the update cycle</p>
<p>@<em>param</em> <code>mx</code> — Mouse X position</p>
<p>@<em>param</em> <code>my</code> — Mouse Y position</p>
<p>
@<em>param</em> <code>isHovering</code> — Whether mouse is over
element
</p>
<p>
@<em>param</em> <code>isActiveElement</code> — Whether this is the top
element at mouse position
</p>
<h2 id="processtouchevents" tabindex="-1">
<a class="header-anchor" href="#processtouchevents"
>processTouchEvents</a
>
</h2>
<pre><code class="language-lua">(method) EventHandler:processTouchEvents()
</code></pre>
<p>Process touch events in the update cycle</p>
<h2 id="resetscrollbarpressflag" tabindex="-1">
<a class="header-anchor" href="#resetscrollbarpressflag"
>resetScrollbarPressFlag</a
>
</h2>
<pre><code class="language-lua">(method) EventHandler:resetScrollbarPressFlag()
</code></pre>
<p>Reset scrollbar press flag (called each frame)</p>
<h2 id="setstate" tabindex="-1">
<a class="header-anchor" href="#setstate">setState</a>
</h2>
<pre><code class="language-lua">(method) EventHandler:setState(state: <span class="hljs-built_in">table</span>)
</code></pre>
<p>Restore state from persistence (for immediate mode)</p>
<p>@<em>param</em> <code>state</code> — State data</p>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-4" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-4"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="_context" tabindex="-1">
<a class="header-anchor" href="#_context">_Context</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="_inputevent" tabindex="-1">
<a class="header-anchor" href="#_inputevent">_InputEvent</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="__index-3" tabindex="-1">
<a class="header-anchor" href="#__index-3">__index</a>
</h2>
<pre><code class="language-lua">EventHandler
</code></pre>
<h2 id="_clickcount" tabindex="-1">
<a class="header-anchor" href="#_clickcount">_clickCount</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="_dragstartx" tabindex="-1">
<a class="header-anchor" href="#_dragstartx">_dragStartX</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;number, number&gt;
</code></pre>
<h2 id="_dragstarty" tabindex="-1">
<a class="header-anchor" href="#_dragstarty">_dragStartY</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;number, number&gt;
</code></pre>
<h2 id="_element" tabindex="-1">
<a class="header-anchor" href="#_element">_element</a>
</h2>
<pre><code class="language-lua">Element?
</code></pre>
<h2 id="_handlemousedrag" tabindex="-1">
<a class="header-anchor" href="#_handlemousedrag">_handleMouseDrag</a>
</h2>
<pre><code class="language-lua">(method) EventHandler:_handleMouseDrag(mx: number, my: number, button: number, isHovering: boolean)
</code></pre>
<p>Handle mouse drag (while button is pressed and mouse moves)</p>
<p>@<em>param</em> <code>mx</code> — Mouse X position</p>
<p>@<em>param</em> <code>my</code> — Mouse Y position</p>
<p>@<em>param</em> <code>button</code> — Mouse button</p>
<p>
@<em>param</em> <code>isHovering</code> — Whether mouse is over
element
</p>
<h2 id="_handlemousepress" tabindex="-1">
<a class="header-anchor" href="#_handlemousepress"
>_handleMousePress</a
>
</h2>
<pre><code class="language-lua">(method) EventHandler:_handleMousePress(mx: number, my: number, button: number)
</code></pre>
<p>Handle mouse button press</p>
<p>@<em>param</em> <code>mx</code> — Mouse X position</p>
<p>@<em>param</em> <code>my</code> — Mouse Y position</p>
<p>
@<em>param</em> <code>button</code> — Mouse button (1=left, 2=right,
3=middle)
</p>
<h2 id="_handlemouserelease" tabindex="-1">
<a class="header-anchor" href="#_handlemouserelease"
>_handleMouseRelease</a
>
</h2>
<pre><code class="language-lua">(method) EventHandler:_handleMouseRelease(mx: number, my: number, button: number)
</code></pre>
<p>Handle mouse button release</p>
<p>@<em>param</em> <code>mx</code> — Mouse X position</p>
<p>@<em>param</em> <code>my</code> — Mouse Y position</p>
<p>@<em>param</em> <code>button</code> — Mouse button</p>
<h2 id="_hovered" tabindex="-1">
<a class="header-anchor" href="#_hovered">_hovered</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_lastclickbutton" tabindex="-1">
<a class="header-anchor" href="#_lastclickbutton">_lastClickButton</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="_lastclicktime" tabindex="-1">
<a class="header-anchor" href="#_lastclicktime">_lastClickTime</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="_lastmousex" tabindex="-1">
<a class="header-anchor" href="#_lastmousex">_lastMouseX</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;number, number&gt;
</code></pre>
<h2 id="_lastmousey" tabindex="-1">
<a class="header-anchor" href="#_lastmousey">_lastMouseY</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;number, number&gt;
</code></pre>
<h2 id="_pressed-1" tabindex="-1">
<a class="header-anchor" href="#_pressed-1">_pressed</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;number, boolean&gt;
</code></pre>
<h2 id="_scrollbarpresshandled-1" tabindex="-1">
<a class="header-anchor" href="#_scrollbarpresshandled-1"
>_scrollbarPressHandled</a
>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_touchpressed" tabindex="-1">
<a class="header-anchor" href="#_touchpressed">_touchPressed</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;number, boolean&gt;
</code></pre>
<h2 id="_utils" tabindex="-1">
<a class="header-anchor" href="#_utils">_utils</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h1 id="flexlove" tabindex="-1">
<a class="header-anchor" href="#flexlove">FlexLove</a>
</h1>
<h2 id="animation-2" tabindex="-1">
<a class="header-anchor" href="#animation-2">Animation</a>
</h2>
<pre><code class="language-lua">Animation
</code></pre>
<h2 id="color-1" tabindex="-1">
<a class="header-anchor" href="#color-1">Color</a>
</h2>
<pre><code class="language-lua">Color
</code></pre>
<p>Utility class for color handling</p>
<h2 id="theme-2" tabindex="-1">
<a class="header-anchor" href="#theme-2">Theme</a>
</h2>
<pre><code class="language-lua">Theme
</code></pre>
<h2 id="basescale" tabindex="-1">
<a class="header-anchor" href="#basescale">baseScale</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="beginframe" tabindex="-1">
<a class="header-anchor" href="#beginframe">beginFrame</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.beginFrame</span><span class="hljs-params">()</span></span>
</code></pre>
<p>Begin a new immediate mode frame</p>
<h2 id="clearallstates" tabindex="-1">
<a class="header-anchor" href="#clearallstates">clearAllStates</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.clearAllStates</span><span class="hljs-params">()</span></span>
</code></pre>
<p>Clear all immediate mode states</p>
<h2 id="clearstate" tabindex="-1">
<a class="header-anchor" href="#clearstate">clearState</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.clearState</span><span class="hljs-params">(id: string)</span></span>
</code></pre>
<p>Clear state for a specific element ID</p>
<h2 id="defaulttheme" tabindex="-1">
<a class="header-anchor" href="#defaulttheme">defaultTheme</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|ThemeDefinition)?
</code></pre>
<h2 id="destroy-1" tabindex="-1">
<a class="header-anchor" href="#destroy-1">destroy</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.destroy</span><span class="hljs-params">()</span></span>
</code></pre>
<h2 id="draw-1" tabindex="-1">
<a class="header-anchor" href="#draw-1">draw</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.draw</span><span class="hljs-params">(gameDrawFunc: function|nil, postDrawFunc: function|nil)</span></span>
</code></pre>
<h2 id="endframe" tabindex="-1">
<a class="header-anchor" href="#endframe">endFrame</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.endFrame</span><span class="hljs-params">()</span></span>
</code></pre>
<h2 id="enums" tabindex="-1">
<a class="header-anchor" href="#enums">enums</a>
</h2>
<pre><code class="language-lua">unknown
</code></pre>
<h2 id="getelementatposition" tabindex="-1">
<a class="header-anchor" href="#getelementatposition"
>getElementAtPosition</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.getElementAtPosition</span><span class="hljs-params">(x: number, y: number)</span></span>
-&gt; Element?
</code></pre>
<p>Find the topmost element at given coordinates</p>
<h2 id="getmode" tabindex="-1">
<a class="header-anchor" href="#getmode">getMode</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.getMode</span><span class="hljs-params">()</span></span>
-&gt; <span class="hljs-string">&quot;immediate&quot;</span>|<span class="hljs-string">&quot;retained&quot;</span>
</code></pre>
<pre><code class="language-lua"><span class="hljs-keyword">return</span> #<span class="hljs-number">1</span>:
| <span class="hljs-string">&quot;immediate&quot;</span>
| <span class="hljs-string">&quot;retained&quot;</span>
</code></pre>
<h2 id="getstatecount" tabindex="-1">
<a class="header-anchor" href="#getstatecount">getStateCount</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.getStateCount</span><span class="hljs-params">()</span></span>
-&gt; number
</code></pre>
<h2 id="getstatestats" tabindex="-1">
<a class="header-anchor" href="#getstatestats">getStateStats</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.getStateStats</span><span class="hljs-params">()</span></span>
-&gt; <span class="hljs-built_in">table</span>
</code></pre>
<p>Get state statistics (for debugging)</p>
<h2 id="init" tabindex="-1">
<a class="header-anchor" href="#init">init</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.init</span><span class="hljs-params">(config: { baseScale: { width: number?, height: number? }?, theme: (string|ThemeDefinition)</span></span>?, immediateMode: boolean?, stateRetentionFrames: number?, maxStateEntries: number?, autoFrameManagement: boolean? })
</code></pre>
<h2 id="keypressed-1" tabindex="-1">
<a class="header-anchor" href="#keypressed-1">keypressed</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.keypressed</span><span class="hljs-params">(key: string, scancode: string, isrepeat: boolean)</span></span>
</code></pre>
<h2 id="new-4" tabindex="-1">
<a class="header-anchor" href="#new-4">new</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.new</span><span class="hljs-params">(props: ElementProps)</span></span>
-&gt; Element
</code></pre>
<h2 id="resize-1" tabindex="-1">
<a class="header-anchor" href="#resize-1">resize</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.resize</span><span class="hljs-params">()</span></span>
</code></pre>
<h2 id="scalefactors" tabindex="-1">
<a class="header-anchor" href="#scalefactors">scaleFactors</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="setmode" tabindex="-1">
<a class="header-anchor" href="#setmode">setMode</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.setMode</span><span class="hljs-params">(mode: &quot;immediate&quot;|&quot;retained&quot;)</span></span>
</code></pre>
<pre><code class="language-lua">mode:
| <span class="hljs-string">&quot;immediate&quot;</span>
| <span class="hljs-string">&quot;retained&quot;</span>
</code></pre>
<h2 id="textinput-1" tabindex="-1">
<a class="header-anchor" href="#textinput-1">textinput</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.textinput</span><span class="hljs-params">(text: string)</span></span>
</code></pre>
<h2 id="topelements" tabindex="-1">
<a class="header-anchor" href="#topelements">topElements</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="update-2" tabindex="-1">
<a class="header-anchor" href="#update-2">update</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.update</span><span class="hljs-params">(dt: any)</span></span>
</code></pre>
<h2 id="wheelmoved" tabindex="-1">
<a class="header-anchor" href="#wheelmoved">wheelmoved</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexLove.wheelmoved</span><span class="hljs-params">(dx: any, dy: any)</span></span>
</code></pre>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-5" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-5"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="_description" tabindex="-1">
<a class="header-anchor" href="#_description">_DESCRIPTION</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<h2 id="_license" tabindex="-1">
<a class="header-anchor" href="#_license">_LICENSE</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<h2 id="_url" tabindex="-1">
<a class="header-anchor" href="#_url">_URL</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<h2 id="_version" tabindex="-1">
<a class="header-anchor" href="#_version">_VERSION</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<p>Add version and metadata</p>
<h2 id="_activeeventelement" tabindex="-1">
<a class="header-anchor" href="#_activeeventelement"
>_activeEventElement</a
>
</h2>
<pre><code class="language-lua">Element?
</code></pre>
<h2 id="_autobeganframe" tabindex="-1">
<a class="header-anchor" href="#_autobeganframe">_autoBeganFrame</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_autoframemanagement" tabindex="-1">
<a class="header-anchor" href="#_autoframemanagement"
>_autoFrameManagement</a
>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_backdropcanvas" tabindex="-1">
<a class="header-anchor" href="#_backdropcanvas">_backdropCanvas</a>
</h2>
<pre><code class="language-lua"><span class="hljs-literal">nil</span>
</code></pre>
<p>
A Canvas is used for off-screen rendering. Think of it as an invisible
screen that you can draw to, but that will not be visible until you
draw it to the actual visible screen. It is also known as “render to
texture”.
</p>
<p>
By drawing things that do not change position often (such as
background items) to the Canvas, and then drawing the entire Canvas
instead of each item, you can reduce the number of draw operations
performed each frame.
</p>
<p>
In versions prior to love.graphics.isSupported(“canvas”) could be used
to check for support at runtime.
</p>
<p>
<a href="https://love2d.org/wiki/love.graphics">Open in Browser</a>
</p>
<h2 id="_cachedviewport" tabindex="-1">
<a class="header-anchor" href="#_cachedviewport">_cachedViewport</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="_canvasdimensions" tabindex="-1">
<a class="header-anchor" href="#_canvasdimensions"
>_canvasDimensions</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="_currentframeelements" tabindex="-1">
<a class="header-anchor" href="#_currentframeelements"
>_currentFrameElements</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="_focusedelement" tabindex="-1">
<a class="header-anchor" href="#_focusedelement">_focusedElement</a>
</h2>
<pre><code class="language-lua"><span class="hljs-literal">nil</span>
</code></pre>
<h2 id="_framenumber" tabindex="-1">
<a class="header-anchor" href="#_framenumber">_frameNumber</a>
</h2>
<pre><code class="language-lua">integer
</code></pre>
<h2 id="_framestarted" tabindex="-1">
<a class="header-anchor" href="#_framestarted">_frameStarted</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_gamecanvas" tabindex="-1">
<a class="header-anchor" href="#_gamecanvas">_gameCanvas</a>
</h2>
<pre><code class="language-lua"><span class="hljs-literal">nil</span>
</code></pre>
<p>
A Canvas is used for off-screen rendering. Think of it as an invisible
screen that you can draw to, but that will not be visible until you
draw it to the actual visible screen. It is also known as “render to
texture”.
</p>
<p>
By drawing things that do not change position often (such as
background items) to the Canvas, and then drawing the entire Canvas
instead of each item, you can reduce the number of draw operations
performed each frame.
</p>
<p>
In versions prior to love.graphics.isSupported(“canvas”) could be used
to check for support at runtime.
</p>
<p>
<a href="https://love2d.org/wiki/love.graphics">Open in Browser</a>
</p>
<h2 id="_immediatemode" tabindex="-1">
<a class="header-anchor" href="#_immediatemode">_immediateMode</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_immediatemodestate" tabindex="-1">
<a class="header-anchor" href="#_immediatemodestate"
>_immediateModeState</a
>
</h2>
<pre><code class="language-lua">unknown
</code></pre>
<h1 id="fontfamily-2" tabindex="-1">
<a class="header-anchor" href="#fontfamily-2">FontFamily</a>
</h1>
<h2 id="path" tabindex="-1">
<a class="header-anchor" href="#path">path</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<p>Path to the font file (relative to FlexLove or absolute)</p>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-6" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-6"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="_loadedfont" tabindex="-1">
<a class="header-anchor" href="#_loadedfont">_loadedFont</a>
</h2>
<pre><code class="language-lua">(love.Font)?
</code></pre>
<p>Internal: cached loaded font</p>
<h1 id="inputevent" tabindex="-1">
<a class="header-anchor" href="#inputevent">InputEvent</a>
</h1>
<h2 id="button" tabindex="-1">
<a class="header-anchor" href="#button">button</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<p>Mouse button: 1 (left), 2 (right), 3 (middle)</p>
<h2 id="clickcount" tabindex="-1">
<a class="header-anchor" href="#clickcount">clickCount</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<p>Number of clicks (for double/triple click detection)</p>
<h2 id="dx" tabindex="-1">
<a class="header-anchor" href="#dx">dx</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Delta X from drag start (only for drag events)</p>
<h2 id="dy" tabindex="-1">
<a class="header-anchor" href="#dy">dy</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Delta Y from drag start (only for drag events)</p>
<h2 id="modifiers" tabindex="-1">
<a class="header-anchor" href="#modifiers">modifiers</a>
</h2>
<pre><code class="language-lua">{ shift: boolean, ctrl: boolean, alt: boolean, super: boolean }
</code></pre>
<h2 id="new-5" tabindex="-1">
<a class="header-anchor" href="#new-5">new</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">InputEvent.new</span><span class="hljs-params">(props: InputEventProps)</span></span>
-&gt; InputEvent
</code></pre>
<p>Create a new input event</p>
<h2 id="timestamp" tabindex="-1">
<a class="header-anchor" href="#timestamp">timestamp</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<p>Time when event occurred</p>
<h2 id="type" tabindex="-1">
<a class="header-anchor" href="#type">type</a>
</h2>
<pre><code class="language-lua"><span class="hljs-string">&quot;click&quot;</span>|<span class="hljs-string">&quot;drag&quot;</span>|<span class="hljs-string">&quot;middleclick&quot;</span>|<span class="hljs-string">&quot;press&quot;</span>|<span class="hljs-string">&quot;release&quot;</span>...(+<span class="hljs-number">1</span>)
</code></pre>
<h2 id="x-2" tabindex="-1">
<a class="header-anchor" href="#x-2">x</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<p>Mouse X position</p>
<h2 id="y-2" tabindex="-1">
<a class="header-anchor" href="#y-2">y</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<p>Mouse Y position</p>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-7" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-7"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="__index-4" tabindex="-1">
<a class="header-anchor" href="#__index-4">__index</a>
</h2>
<pre><code class="language-lua">InputEvent
</code></pre>
<h1 id="texteditor" tabindex="-1">
<a class="header-anchor" href="#texteditor">TextEditor</a>
</h1>
<h2 id="allownewlines" tabindex="-1">
<a class="header-anchor" href="#allownewlines">allowNewlines</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="allowtabs" tabindex="-1">
<a class="header-anchor" href="#allowtabs">allowTabs</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="autogrow-2" tabindex="-1">
<a class="header-anchor" href="#autogrow-2">autoGrow</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="blur-1" tabindex="-1">
<a class="header-anchor" href="#blur-1">blur</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:blur()
</code></pre>
<p>Remove focus from this element</p>
<h2 id="clearselection-1" tabindex="-1">
<a class="header-anchor" href="#clearselection-1">clearSelection</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:clearSelection()
</code></pre>
<p>Clear selection</p>
<h2 id="cursorblinkrate-2" tabindex="-1">
<a class="header-anchor" href="#cursorblinkrate-2">cursorBlinkRate</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="cursorcolor-2" tabindex="-1">
<a class="header-anchor" href="#cursorcolor-2">cursorColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Utility class for color handling</p>
<h2 id="customsanitizer" tabindex="-1">
<a class="header-anchor" href="#customsanitizer">customSanitizer</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span>?
</span></code></pre>
<h2 id="deleteselection-1" tabindex="-1">
<a class="header-anchor" href="#deleteselection-1">deleteSelection</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:deleteSelection()
-&gt; boolean
</code></pre>
<p>Delete selected text</p>
<p>@<em>return</em> — True if text was deleted</p>
<h2 id="deletetext-1" tabindex="-1">
<a class="header-anchor" href="#deletetext-1">deleteText</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:deleteText(startPos: number, endPos: number)
</code></pre>
<p>Delete text in range</p>
<p>
@<em>param</em> <code>startPos</code> — Start position (inclusive)
</p>
<p>@<em>param</em> <code>endPos</code> — End position (inclusive)</p>
<h2 id="editable-2" tabindex="-1">
<a class="header-anchor" href="#editable-2">editable</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="focus-1" tabindex="-1">
<a class="header-anchor" href="#focus-1">focus</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:focus()
</code></pre>
<p>Focus this element for keyboard input</p>
<h2 id="getcursorposition-1" tabindex="-1">
<a class="header-anchor" href="#getcursorposition-1"
>getCursorPosition</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:getCursorPosition()
-&gt; number
</code></pre>
<p>Get cursor position</p>
<p>@<em>return</em> — Character index (0-based)</p>
<h2 id="getselectedtext-1" tabindex="-1">
<a class="header-anchor" href="#getselectedtext-1">getSelectedText</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:getSelectedText()
-&gt; <span class="hljs-built_in">string</span>?
</code></pre>
<p>Get selected text</p>
<p>@<em>return</em> — Selected text or nil if no selection</p>
<h2 id="getselection-1" tabindex="-1">
<a class="header-anchor" href="#getselection-1">getSelection</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:getSelection()
-&gt; number?
<span class="hljs-number">2.</span> number?
</code></pre>
<p>Get selection range</p>
<p>
@<em>return</em> — Start and end positions, or nil if no selection
</p>
<h2 id="gettext-1" tabindex="-1">
<a class="header-anchor" href="#gettext-1">getText</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:getText()
-&gt; <span class="hljs-built_in">string</span>
</code></pre>
<p>Get current text buffer</p>
<h2 id="handlekeypress" tabindex="-1">
<a class="header-anchor" href="#handlekeypress">handleKeyPress</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:handleKeyPress(key: <span class="hljs-built_in">string</span>, scancode: <span class="hljs-built_in">string</span>, isrepeat: boolean)
</code></pre>
<p>Handle key press (special keys)</p>
<p>@<em>param</em> <code>key</code> — Key name</p>
<p>@<em>param</em> <code>scancode</code> — Scancode</p>
<p>
@<em>param</em> <code>isrepeat</code> — Whether this is a key repeat
</p>
<h2 id="handletextclick" tabindex="-1">
<a class="header-anchor" href="#handletextclick">handleTextClick</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:handleTextClick(mouseX: number, mouseY: number, clickCount: number)
</code></pre>
<p>Handle mouse click on text</p>
<p>
@<em>param</em> <code>clickCount</code> — 1=single, 2=double, 3=triple
</p>
<h2 id="handletextdrag" tabindex="-1">
<a class="header-anchor" href="#handletextdrag">handleTextDrag</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:handleTextDrag(mouseX: number, mouseY: number)
</code></pre>
<p>Handle mouse drag for text selection</p>
<h2 id="handletextinput" tabindex="-1">
<a class="header-anchor" href="#handletextinput">handleTextInput</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:handleTextInput(text: <span class="hljs-built_in">string</span>)
</code></pre>
<p>Handle text input (character insertion)</p>
<h2 id="hasselection-1" tabindex="-1">
<a class="header-anchor" href="#hasselection-1">hasSelection</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:hasSelection()
-&gt; boolean
</code></pre>
<p>Check if there is an active selection</p>
<h2 id="initialize-1" tabindex="-1">
<a class="header-anchor" href="#initialize-1">initialize</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:initialize(element: <span class="hljs-built_in">table</span>)
</code></pre>
<p>Initialize TextEditor with parent element reference</p>
<p>
@<em>param</em> <code>element</code> — The parent Element instance
</p>
<h2 id="inputtype-2" tabindex="-1">
<a class="header-anchor" href="#inputtype-2">inputType</a>
</h2>
<pre><code class="language-lua"><span class="hljs-string">&quot;email&quot;</span>|<span class="hljs-string">&quot;number&quot;</span>|<span class="hljs-string">&quot;text&quot;</span>|<span class="hljs-string">&quot;url&quot;</span>
</code></pre>
<h2 id="inserttext-1" tabindex="-1">
<a class="header-anchor" href="#inserttext-1">insertText</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:insertText(text: <span class="hljs-built_in">string</span>, position?: number, skipSanitization?: boolean)
</code></pre>
<p>Insert text at position</p>
<p>@<em>param</em> <code>text</code> — Text to insert</p>
<p>
@<em>param</em> <code>position</code> — Position to insert at
(default: cursor position)
</p>
<p>
@<em>param</em> <code>skipSanitization</code> — Skip sanitization (for
internal use)
</p>
<h2 id="isfocused-1" tabindex="-1">
<a class="header-anchor" href="#isfocused-1">isFocused</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:isFocused()
-&gt; boolean
</code></pre>
<p>Check if this element is focused</p>
<h2 id="maxlength-2" tabindex="-1">
<a class="header-anchor" href="#maxlength-2">maxLength</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="maxlines-2" tabindex="-1">
<a class="header-anchor" href="#maxlines-2">maxLines</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="mousetotextposition" tabindex="-1">
<a class="header-anchor" href="#mousetotextposition"
>mouseToTextPosition</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:mouseToTextPosition(mouseX: number, mouseY: number)
-&gt; number
</code></pre>
<p>Convert mouse coordinates to cursor position in text</p>
<p>
@<em>param</em> <code>mouseX</code> — Mouse X coordinate (absolute)
</p>
<p>
@<em>param</em> <code>mouseY</code> — Mouse Y coordinate (absolute)
</p>
<p>@<em>return</em> — Cursor position (character index)</p>
<h2 id="movecursorby-1" tabindex="-1">
<a class="header-anchor" href="#movecursorby-1">moveCursorBy</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:moveCursorBy(delta: number)
</code></pre>
<p>Move cursor by delta characters</p>
<p>
@<em>param</em> <code>delta</code> — Number of characters to move
(positive or negative)
</p>
<h2 id="movecursortoend-1" tabindex="-1">
<a class="header-anchor" href="#movecursortoend-1">moveCursorToEnd</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:moveCursorToEnd()
</code></pre>
<p>Move cursor to end of text</p>
<h2 id="movecursortolineend-1" tabindex="-1">
<a class="header-anchor" href="#movecursortolineend-1"
>moveCursorToLineEnd</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:moveCursorToLineEnd()
</code></pre>
<p>Move cursor to end of current line</p>
<h2 id="movecursortolinestart-1" tabindex="-1">
<a class="header-anchor" href="#movecursortolinestart-1"
>moveCursorToLineStart</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:moveCursorToLineStart()
</code></pre>
<p>Move cursor to start of current line</p>
<h2 id="movecursortonextword-1" tabindex="-1">
<a class="header-anchor" href="#movecursortonextword-1"
>moveCursorToNextWord</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:moveCursorToNextWord()
</code></pre>
<p>Move cursor to start of next word</p>
<h2 id="movecursortopreviousword-1" tabindex="-1">
<a class="header-anchor" href="#movecursortopreviousword-1"
>moveCursorToPreviousWord</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:moveCursorToPreviousWord()
</code></pre>
<p>Move cursor to start of previous word</p>
<h2 id="movecursortostart-1" tabindex="-1">
<a class="header-anchor" href="#movecursortostart-1"
>moveCursorToStart</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:moveCursorToStart()
</code></pre>
<p>Move cursor to start of text</p>
<h2 id="multiline-2" tabindex="-1">
<a class="header-anchor" href="#multiline-2">multiline</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="new-6" tabindex="-1">
<a class="header-anchor" href="#new-6">new</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">TextEditor.new</span><span class="hljs-params">(config: TextEditorConfig, deps: table)</span></span>
-&gt; TextEditor: <span class="hljs-built_in">table</span>
</code></pre>
<p>Create a new TextEditor instance</p>
<p>
@<em>param</em> <code>deps</code> — Dependencies {Context,
StateManager, Color, utils}
</p>
<p>@<em>return</em> <code>TextEditor</code> — instance</p>
<h2 id="onblur-2" tabindex="-1">
<a class="header-anchor" href="#onblur-2">onBlur</a>
</h2>
<pre><code class="language-lua">fun(element: Element)?
</code></pre>
<h2 id="onenter-2" tabindex="-1">
<a class="header-anchor" href="#onenter-2">onEnter</a>
</h2>
<pre><code class="language-lua">fun(element: Element)?
</code></pre>
<h2 id="onfocus-2" tabindex="-1">
<a class="header-anchor" href="#onfocus-2">onFocus</a>
</h2>
<pre><code class="language-lua">fun(element: Element)?
</code></pre>
<h2 id="onsanitize" tabindex="-1">
<a class="header-anchor" href="#onsanitize">onSanitize</a>
</h2>
<pre><code class="language-lua">fun(element: Element, original: <span class="hljs-built_in">string</span>, sanitized: <span class="hljs-built_in">string</span>)?
</code></pre>
<h2 id="ontextchange-2" tabindex="-1">
<a class="header-anchor" href="#ontextchange-2">onTextChange</a>
</h2>
<pre><code class="language-lua">fun(element: Element, text: <span class="hljs-built_in">string</span>)?
</code></pre>
<h2 id="ontextinput-2" tabindex="-1">
<a class="header-anchor" href="#ontextinput-2">onTextInput</a>
</h2>
<pre><code class="language-lua">fun(element: Element, text: <span class="hljs-built_in">string</span>)?
</code></pre>
<h2 id="passwordmode-2" tabindex="-1">
<a class="header-anchor" href="#passwordmode-2">passwordMode</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="placeholder-2" tabindex="-1">
<a class="header-anchor" href="#placeholder-2">placeholder</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<h2 id="replacetext-1" tabindex="-1">
<a class="header-anchor" href="#replacetext-1">replaceText</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:replaceText(startPos: number, endPos: number, newText: <span class="hljs-built_in">string</span>)
</code></pre>
<p>Replace text in range</p>
<p>
@<em>param</em> <code>startPos</code> — Start position (inclusive)
</p>
<p>@<em>param</em> <code>endPos</code> — End position (inclusive)</p>
<p>@<em>param</em> <code>newText</code> — Replacement text</p>
<h2 id="sanitize" tabindex="-1">
<a class="header-anchor" href="#sanitize">sanitize</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="scrollable-2" tabindex="-1">
<a class="header-anchor" href="#scrollable-2">scrollable</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="selectall-1" tabindex="-1">
<a class="header-anchor" href="#selectall-1">selectAll</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:selectAll()
</code></pre>
<p>Select all text</p>
<h2 id="selectonfocus-2" tabindex="-1">
<a class="header-anchor" href="#selectonfocus-2">selectOnFocus</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="selectioncolor-2" tabindex="-1">
<a class="header-anchor" href="#selectioncolor-2">selectionColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Utility class for color handling</p>
<h2 id="setcursorposition-1" tabindex="-1">
<a class="header-anchor" href="#setcursorposition-1"
>setCursorPosition</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:setCursorPosition(position: number)
</code></pre>
<p>Set cursor position</p>
<p>@<em>param</em> <code>position</code> — Character index (0-based)</p>
<h2 id="setselection-1" tabindex="-1">
<a class="header-anchor" href="#setselection-1">setSelection</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:setSelection(startPos: number, endPos: number)
</code></pre>
<p>Set selection range</p>
<p>
@<em>param</em> <code>startPos</code> — Start position (inclusive)
</p>
<p>@<em>param</em> <code>endPos</code> — End position (inclusive)</p>
<h2 id="settext-1" tabindex="-1">
<a class="header-anchor" href="#settext-1">setText</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:setText(text: <span class="hljs-built_in">string</span>, skipSanitization?: boolean)
</code></pre>
<p>Set text buffer and mark dirty</p>
<p>
@<em>param</em> <code>skipSanitization</code> — Skip sanitization (for
trusted input)
</p>
<h2 id="textoverflow-2" tabindex="-1">
<a class="header-anchor" href="#textoverflow-2">textOverflow</a>
</h2>
<pre><code class="language-lua"><span class="hljs-string">&quot;clip&quot;</span>|<span class="hljs-string">&quot;ellipsis&quot;</span>|<span class="hljs-string">&quot;scroll&quot;</span>
</code></pre>
<h2 id="textwrap-2" tabindex="-1">
<a class="header-anchor" href="#textwrap-2">textWrap</a>
</h2>
<pre><code class="language-lua">boolean|<span class="hljs-string">&quot;char&quot;</span>|<span class="hljs-string">&quot;word&quot;</span>
</code></pre>
<h2 id="update-3" tabindex="-1">
<a class="header-anchor" href="#update-3">update</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:update(dt: number)
</code></pre>
<p>Update cursor blink animation</p>
<p>@<em>param</em> <code>dt</code> — Delta time</p>
<h2 id="updateautogrowheight" tabindex="-1">
<a class="header-anchor" href="#updateautogrowheight"
>updateAutoGrowHeight</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:updateAutoGrowHeight()
</code></pre>
<p>Update element height based on text content (for autoGrow)</p>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-8" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-8"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="_color" tabindex="-1">
<a class="header-anchor" href="#_color">_Color</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="_context-1" tabindex="-1">
<a class="header-anchor" href="#_context-1">_Context</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="_font_cache" tabindex="-1">
<a class="header-anchor" href="#_font_cache">_FONT_CACHE</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="_statemanager" tabindex="-1">
<a class="header-anchor" href="#_statemanager">_StateManager</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="__index-5" tabindex="-1">
<a class="header-anchor" href="#__index-5">__index</a>
</h2>
<pre><code class="language-lua">TextEditor
</code></pre>
<h2 id="_calculatewrapping" tabindex="-1">
<a class="header-anchor" href="#_calculatewrapping"
>_calculateWrapping</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:_calculateWrapping()
</code></pre>
<p>Calculate text wrapping</p>
<h2 id="_cursorblinkpausetimer-1" tabindex="-1">
<a class="header-anchor" href="#_cursorblinkpausetimer-1"
>_cursorBlinkPauseTimer</a
>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="_cursorblinkpaused-1" tabindex="-1">
<a class="header-anchor" href="#_cursorblinkpaused-1"
>_cursorBlinkPaused</a
>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_cursorblinktimer-1" tabindex="-1">
<a class="header-anchor" href="#_cursorblinktimer-1"
>_cursorBlinkTimer</a
>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="_cursorcolumn-1" tabindex="-1">
<a class="header-anchor" href="#_cursorcolumn-1">_cursorColumn</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="_cursorline-1" tabindex="-1">
<a class="header-anchor" href="#_cursorline-1">_cursorLine</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="_cursorposition-1" tabindex="-1">
<a class="header-anchor" href="#_cursorposition-1">_cursorPosition</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="_cursorvisible-1" tabindex="-1">
<a class="header-anchor" href="#_cursorvisible-1">_cursorVisible</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_element-1" tabindex="-1">
<a class="header-anchor" href="#_element-1">_element</a>
</h2>
<pre><code class="language-lua">Element?
</code></pre>
<h2 id="_focused-1" tabindex="-1">
<a class="header-anchor" href="#_focused-1">_focused</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_getcursorscreenposition" tabindex="-1">
<a class="header-anchor" href="#_getcursorscreenposition"
>_getCursorScreenPosition</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:_getCursorScreenPosition()
-&gt; number
<span class="hljs-number">2.</span> number
</code></pre>
<p>Get cursor screen position for rendering (handles multiline text)</p>
<p>
@<em>return</em> — Cursor X and Y position relative to content area
</p>
<h2 id="_getfont-1" tabindex="-1">
<a class="header-anchor" href="#_getfont-1">_getFont</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:_getFont()
-&gt; (love.Font)?
</code></pre>
<p>Get font for text rendering</p>
<h2 id="_getmodifiers" tabindex="-1">
<a class="header-anchor" href="#_getmodifiers">_getModifiers</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span>
</span></code></pre>
<h2 id="_getselectionrects" tabindex="-1">
<a class="header-anchor" href="#_getselectionrects"
>_getSelectionRects</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:_getSelectionRects(selStart: number, selEnd: number)
-&gt; <span class="hljs-built_in">table</span>
</code></pre>
<p>Get selection rectangles for rendering</p>
<p>@<em>param</em> <code>selStart</code> — Selection start position</p>
<p>@<em>param</em> <code>selEnd</code> — Selection end position</p>
<p>@<em>return</em> — Array of rectangles {x, y, width, height}</p>
<h2 id="_lines-1" tabindex="-1">
<a class="header-anchor" href="#_lines-1">_lines</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<h2 id="_marktextdirty" tabindex="-1">
<a class="header-anchor" href="#_marktextdirty">_markTextDirty</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:_markTextDirty()
</code></pre>
<p>Mark text as dirty (needs recalculation)</p>
<h2 id="_mousedownposition-1" tabindex="-1">
<a class="header-anchor" href="#_mousedownposition-1"
>_mouseDownPosition</a
>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="_resetcursorblink" tabindex="-1">
<a class="header-anchor" href="#_resetcursorblink"
>_resetCursorBlink</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:_resetCursorBlink(pauseBlink: boolean|<span class="hljs-literal">nil</span>)
</code></pre>
<p>Reset cursor blink (show cursor immediately)</p>
<p>
@<em>param</em> <code>pauseBlink</code> — Whether to pause blinking
(for typing)
</p>
<h2 id="_sanitizetext" tabindex="-1">
<a class="header-anchor" href="#_sanitizetext">_sanitizeText</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:_sanitizeText(text: <span class="hljs-built_in">string</span>)
-&gt; <span class="hljs-built_in">string</span>
</code></pre>
<p>Internal: Sanitize text input</p>
<p>@<em>param</em> <code>text</code> — Text to sanitize</p>
<p>@<em>return</em> — Sanitized text</p>
<h2 id="_savestate" tabindex="-1">
<a class="header-anchor" href="#_savestate">_saveState</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:_saveState()
</code></pre>
<p>Save state to StateManager (for immediate mode)</p>
<h2 id="_selectwordatposition" tabindex="-1">
<a class="header-anchor" href="#_selectwordatposition"
>_selectWordAtPosition</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:_selectWordAtPosition(position: number)
</code></pre>
<p>Select word at given position</p>
<h2 id="_selectionanchor-1" tabindex="-1">
<a class="header-anchor" href="#_selectionanchor-1"
>_selectionAnchor</a
>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="_selectionend-1" tabindex="-1">
<a class="header-anchor" href="#_selectionend-1">_selectionEnd</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="_selectionstart-1" tabindex="-1">
<a class="header-anchor" href="#_selectionstart-1">_selectionStart</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="_splitlines" tabindex="-1">
<a class="header-anchor" href="#_splitlines">_splitLines</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:_splitLines()
</code></pre>
<p>Split text into lines (for multi-line text)</p>
<h2 id="_textbuffer-1" tabindex="-1">
<a class="header-anchor" href="#_textbuffer-1">_textBuffer</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<h2 id="_textdirty-1" tabindex="-1">
<a class="header-anchor" href="#_textdirty-1">_textDirty</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<h2 id="_textdragoccurred-1" tabindex="-1">
<a class="header-anchor" href="#_textdragoccurred-1"
>_textDragOccurred</a
>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<h2 id="_textscrollx" tabindex="-1">
<a class="header-anchor" href="#_textscrollx">_textScrollX</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<h2 id="_updatetextifdirty" tabindex="-1">
<a class="header-anchor" href="#_updatetextifdirty"
>_updateTextIfDirty</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:_updateTextIfDirty()
</code></pre>
<p>Update text if dirty (recalculate lines and wrapping)</p>
<h2 id="_updatetextscroll" tabindex="-1">
<a class="header-anchor" href="#_updatetextscroll"
>_updateTextScroll</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:_updateTextScroll()
</code></pre>
<p>Update text scroll offset to keep cursor visible</p>
<h2 id="_utils-1" tabindex="-1">
<a class="header-anchor" href="#_utils-1">_utils</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>
</code></pre>
<h2 id="_validatecursorposition" tabindex="-1">
<a class="header-anchor" href="#_validatecursorposition"
>_validateCursorPosition</a
>
</h2>
<pre><code class="language-lua">(method) TextEditor:_validateCursorPosition()
</code></pre>
<p>Validate cursor position (ensure it’s within text bounds)</p>
<h2 id="_wrapline-1" tabindex="-1">
<a class="header-anchor" href="#_wrapline-1">_wrapLine</a>
</h2>
<pre><code class="language-lua">(method) TextEditor:_wrapLine(line: <span class="hljs-built_in">string</span>, maxWidth: number)
-&gt; <span class="hljs-built_in">table</span>
</code></pre>
<p>Wrap a single line of text</p>
<p>@<em>param</em> <code>line</code> — Line to wrap</p>
<p>@<em>param</em> <code>maxWidth</code> — Maximum width in pixels</p>
<p>@<em>return</em> — Array of wrapped line parts</p>
<h2 id="_wrappedlines-1" tabindex="-1">
<a class="header-anchor" href="#_wrappedlines-1">_wrappedLines</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>?
</code></pre>
<h1 id="texteditorconfig" tabindex="-1">
<a class="header-anchor" href="#texteditorconfig">TextEditorConfig</a>
</h1>
<h2 id="allownewlines-1" tabindex="-1">
<a class="header-anchor" href="#allownewlines-1">allowNewlines</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether to allow newline characters (default: true in multiline)</p>
<h2 id="allowtabs-1" tabindex="-1">
<a class="header-anchor" href="#allowtabs-1">allowTabs</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether to allow tab characters (default: true)</p>
<h2 id="autogrow-3" tabindex="-1">
<a class="header-anchor" href="#autogrow-3">autoGrow</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether element auto-grows with text</p>
<h2 id="cursorblinkrate-3" tabindex="-1">
<a class="header-anchor" href="#cursorblinkrate-3">cursorBlinkRate</a>
</h2>
<pre><code class="language-lua">number
</code></pre>
<p>Cursor blink rate in seconds</p>
<h2 id="cursorcolor-3" tabindex="-1">
<a class="header-anchor" href="#cursorcolor-3">cursorColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Cursor color</p>
<h2 id="customsanitizer-1" tabindex="-1">
<a class="header-anchor" href="#customsanitizer-1">customSanitizer</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span>?
</span></code></pre>
<p>Custom sanitization function</p>
<h2 id="editable-3" tabindex="-1">
<a class="header-anchor" href="#editable-3">editable</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether text is editable</p>
<h2 id="inputtype-3" tabindex="-1">
<a class="header-anchor" href="#inputtype-3">inputType</a>
</h2>
<pre><code class="language-lua"><span class="hljs-string">&quot;email&quot;</span>|<span class="hljs-string">&quot;number&quot;</span>|<span class="hljs-string">&quot;text&quot;</span>|<span class="hljs-string">&quot;url&quot;</span>
</code></pre>
<p>Input validation type</p>
<h2 id="maxlength-3" tabindex="-1">
<a class="header-anchor" href="#maxlength-3">maxLength</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Maximum text length in characters</p>
<h2 id="maxlines-3" tabindex="-1">
<a class="header-anchor" href="#maxlines-3">maxLines</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>Maximum number of lines</p>
<h2 id="multiline-3" tabindex="-1">
<a class="header-anchor" href="#multiline-3">multiline</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether multi-line is supported</p>
<h2 id="passwordmode-3" tabindex="-1">
<a class="header-anchor" href="#passwordmode-3">passwordMode</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether to mask text</p>
<h2 id="placeholder-3" tabindex="-1">
<a class="header-anchor" href="#placeholder-3">placeholder</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<p>Placeholder text when empty</p>
<h2 id="sanitize-1" tabindex="-1">
<a class="header-anchor" href="#sanitize-1">sanitize</a>
</h2>
<pre><code class="language-lua">boolean?
</code></pre>
<p>Whether to sanitize text input (default: true)</p>
<h2 id="scrollable-3" tabindex="-1">
<a class="header-anchor" href="#scrollable-3">scrollable</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether text is scrollable</p>
<h2 id="selectonfocus-3" tabindex="-1">
<a class="header-anchor" href="#selectonfocus-3">selectOnFocus</a>
</h2>
<pre><code class="language-lua">boolean
</code></pre>
<p>Whether to select all text on focus</p>
<h2 id="selectioncolor-3" tabindex="-1">
<a class="header-anchor" href="#selectioncolor-3">selectionColor</a>
</h2>
<pre><code class="language-lua">Color?
</code></pre>
<p>Selection background color</p>
<h2 id="textoverflow-3" tabindex="-1">
<a class="header-anchor" href="#textoverflow-3">textOverflow</a>
</h2>
<pre><code class="language-lua"><span class="hljs-string">&quot;clip&quot;</span>|<span class="hljs-string">&quot;ellipsis&quot;</span>|<span class="hljs-string">&quot;scroll&quot;</span>
</code></pre>
<p>Text overflow behavior</p>
<h2 id="textwrap-3" tabindex="-1">
<a class="header-anchor" href="#textwrap-3">textWrap</a>
</h2>
<pre><code class="language-lua">boolean|<span class="hljs-string">&quot;char&quot;</span>|<span class="hljs-string">&quot;word&quot;</span>
</code></pre>
<p>Text wrapping mode</p>
<hr />
<h1 id="theme-3" tabindex="-1">
<a class="header-anchor" href="#theme-3">Theme</a>
</h1>
<h2 id="manager" tabindex="-1">
<a class="header-anchor" href="#manager">Manager</a>
</h2>
<pre><code class="language-lua">ThemeManager
</code></pre>
<p>Export both Theme and ThemeManager</p>
<h2 id="atlas" tabindex="-1">
<a class="header-anchor" href="#atlas">atlas</a>
</h2>
<pre><code class="language-lua">(love.Image)?
</code></pre>
<p>Optional: global atlas</p>
<h2 id="atlasdata" tabindex="-1">
<a class="header-anchor" href="#atlasdata">atlasData</a>
</h2>
<pre><code class="language-lua">(love.ImageData)?
</code></pre>
<p>Raw (decoded) image data.</p>
<p>You can’t draw ImageData directly to screen. See Image for that.</p>
<p><a href="https://love2d.org/wiki/love.image">Open in Browser</a></p>
<h2 id="colors" tabindex="-1">
<a class="header-anchor" href="#colors">colors</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, Color&gt;
</code></pre>
<h2 id="components" tabindex="-1">
<a class="header-anchor" href="#components">components</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, ThemeComponent&gt;
</code></pre>
<h2 id="contentautosizingmultiplier-2" tabindex="-1">
<a class="header-anchor" href="#contentautosizingmultiplier-2"
>contentAutoSizingMultiplier</a
>
</h2>
<pre><code class="language-lua">{ width: number?, height: number? }?
</code></pre>
<p>Optional: default multiplier for auto-sized content dimensions</p>
<h2 id="fonts" tabindex="-1">
<a class="header-anchor" href="#fonts">fonts</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, <span class="hljs-built_in">string</span>&gt;
</code></pre>
<p>Font family definitions</p>
<h2 id="get" tabindex="-1">
<a class="header-anchor" href="#get">get</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.get</span><span class="hljs-params">(themeName: string)</span></span>
-&gt; Theme|<span class="hljs-literal">nil</span>
</code></pre>
<p>Get a theme by name</p>
<p>@<em>param</em> <code>themeName</code> — Name of the theme</p>
<p>@<em>return</em> — Returns theme or nil if not found</p>
<h2 id="getactive" tabindex="-1">
<a class="header-anchor" href="#getactive">getActive</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.getActive</span><span class="hljs-params">()</span></span>
-&gt; Theme?
</code></pre>
<p>Get the active theme</p>
<h2 id="getallcolors" tabindex="-1">
<a class="header-anchor" href="#getallcolors">getAllColors</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.getAllColors</span><span class="hljs-params">()</span></span>
-&gt; <span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, Color&gt;|<span class="hljs-literal">nil</span>
</code></pre>
<p>Get all colors from the active theme</p>
<p>@<em>return</em> — Table of all colors, or nil if no theme active</p>
<h2 id="getcolor" tabindex="-1">
<a class="header-anchor" href="#getcolor">getColor</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.getColor</span><span class="hljs-params">(colorName: string)</span></span>
-&gt; Color?
</code></pre>
<p>Get a color from the active theme</p>
<p>
@<em>param</em> <code>colorName</code> — Name of the color (e.g.,
“primary”, “secondary”)
</p>
<p>@<em>return</em> — Returns Color instance or nil if not found</p>
<h2 id="getcolornames" tabindex="-1">
<a class="header-anchor" href="#getcolornames">getColorNames</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.getColorNames</span><span class="hljs-params">()</span></span>
-&gt; <span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>&gt;|<span class="hljs-literal">nil</span>
</code></pre>
<p>Get all available color names from the active theme</p>
<p>
@<em>return</em> — Array of color names, or nil if no theme active
</p>
<h2 id="getcolorordefault" tabindex="-1">
<a class="header-anchor" href="#getcolorordefault"
>getColorOrDefault</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.getColorOrDefault</span><span class="hljs-params">(colorName: string, fallback: Color|nil)</span></span>
-&gt; Color
</code></pre>
<p>Get a color with a fallback if not found</p>
<p>
@<em>param</em> <code>colorName</code> — Name of the color to retrieve
</p>
<p>
@<em>param</em> <code>fallback</code> — Fallback color if not found
(default: white)
</p>
<p>@<em>return</em> — The color or fallback</p>
<h2 id="getcomponent" tabindex="-1">
<a class="header-anchor" href="#getcomponent">getComponent</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.getComponent</span><span class="hljs-params">(componentName: string, state?: string)</span></span>
-&gt; ThemeComponent?
</code></pre>
<p>Get a component from the active theme</p>
<p>
@<em>param</em> <code>componentName</code> — Name of the component
(e.g., “button”, “panel”)
</p>
<p>
@<em>param</em> <code>state</code> — Optional state (e.g., “hover”,
“pressed”, “disabled”)
</p>
<p>@<em>return</em> — Returns component or nil if not found</p>
<h2 id="getfont" tabindex="-1">
<a class="header-anchor" href="#getfont">getFont</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.getFont</span><span class="hljs-params">(fontName: string)</span></span>
-&gt; <span class="hljs-built_in">string</span>?
</code></pre>
<p>Get a font from the active theme</p>
<p>
@<em>param</em> <code>fontName</code> — Name of the font family (e.g.,
“default”, “heading”)
</p>
<p>@<em>return</em> — Returns font path or nil if not found</p>
<h2 id="getregisteredthemes" tabindex="-1">
<a class="header-anchor" href="#getregisteredthemes"
>getRegisteredThemes</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.getRegisteredThemes</span><span class="hljs-params">()</span></span>
-&gt; <span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>&gt;
</code></pre>
<p>Get all registered theme names</p>
<p>@<em>return</em> — Array of theme names</p>
<h2 id="hasactive" tabindex="-1">
<a class="header-anchor" href="#hasactive">hasActive</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.hasActive</span><span class="hljs-params">()</span></span>
-&gt; boolean
</code></pre>
<p>Check if a theme is currently active</p>
<p>@<em>return</em> — Returns true if a theme is active</p>
<h2 id="load" tabindex="-1">
<a class="header-anchor" href="#load">load</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.load</span><span class="hljs-params">(path: string)</span></span>
-&gt; Theme
</code></pre>
<p>Load a theme from a Lua file</p>
<p>
@<em>param</em> <code>path</code> — Path to theme definition file
(e.g., “space” or “mytheme”)
</p>
<h2 id="name" tabindex="-1">
<a class="header-anchor" href="#name">name</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<h2 id="new-7" tabindex="-1">
<a class="header-anchor" href="#new-7">new</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.new</span><span class="hljs-params">(definition: any)</span></span>
-&gt; Theme
</code></pre>
<h2 id="sanitizetheme" tabindex="-1">
<a class="header-anchor" href="#sanitizetheme">sanitizeTheme</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.sanitizeTheme</span><span class="hljs-params">(theme?: table)</span></span>
-&gt; sanitized: <span class="hljs-built_in">table</span>
</code></pre>
<p>
Sanitize a theme definition by removing invalid values and providing
defaults
</p>
<p>@<em>param</em> <code>theme</code> — The theme to sanitize</p>
<p>@<em>return</em> <code>sanitized</code> — The sanitized theme</p>
<h2 id="setactive" tabindex="-1">
<a class="header-anchor" href="#setactive">setActive</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.setActive</span><span class="hljs-params">(themeOrName: string|Theme)</span></span>
</code></pre>
<h2 id="validatetheme" tabindex="-1">
<a class="header-anchor" href="#validatetheme">validateTheme</a>
</h2>
<pre><code class="language-lua"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Theme.validateTheme</span><span class="hljs-params">(theme?: table, options?: table)</span></span>
-&gt; valid: boolean
<span class="hljs-number">2.</span> errors: <span class="hljs-built_in">table</span>
</code></pre>
<p>
Validate a theme definition for structural correctness
(non-aggressive)
</p>
<p>@<em>param</em> <code>theme</code> — The theme to validate</p>
<p>
@<em>param</em> <code>options</code> — Optional validation options
{strict: boolean}
</p>
<p>
@<em>return</em> <code>valid,errors</code> — List of validation errors
</p>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-9" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-9"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="__index-6" tabindex="-1">
<a class="header-anchor" href="#__index-6">__index</a>
</h2>
<pre><code class="language-lua">Theme
</code></pre>
<h1 id="themecomponent-2" tabindex="-1">
<a class="header-anchor" href="#themecomponent-2">ThemeComponent</a>
</h1>
<h2 id="atlas-1" tabindex="-1">
<a class="header-anchor" href="#atlas-1">atlas</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|love.Image)?
</code></pre>
<p>
Optional: component-specific atlas (overrides theme atlas). Files
ending in .9.png are auto-parsed
</p>
<h2 id="contentautosizingmultiplier-3" tabindex="-1">
<a class="header-anchor" href="#contentautosizingmultiplier-3"
>contentAutoSizingMultiplier</a
>
</h2>
<pre><code class="language-lua">{ width: number?, height: number? }?
</code></pre>
<p>Optional: multiplier for auto-sized content dimensions</p>
<h2 id="insets" tabindex="-1">
<a class="header-anchor" href="#insets">insets</a>
</h2>
<pre><code class="language-lua">{ left: number, top: number, right: number, bottom: number }?
</code></pre>
<p>
Optional: 9-patch insets (auto-extracted from .9.png files or manually
defined)
</p>
<h2 id="regions" tabindex="-1">
<a class="header-anchor" href="#regions">regions</a>
</h2>
<pre><code class="language-lua">{ topLeft: ThemeRegion, topCenter: ThemeRegion, topRight: ThemeRegion, middleLeft: ThemeRegion, middleCenter: ThemeRegion, middleRight: ThemeRegion, bottomLeft: ThemeRegion, bottomCenter: ThemeRegion, bottomRight: ThemeRegion }
</code></pre>
<h2 id="scalecorners-2" tabindex="-1">
<a class="header-anchor" href="#scalecorners-2">scaleCorners</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<p>
Optional: scale multiplier for non-stretched regions (corners/edges).
E.g., 2 = 2x size. Default: nil (no scaling)
</p>
<h2 id="scalingalgorithm-2" tabindex="-1">
<a class="header-anchor" href="#scalingalgorithm-2"
>scalingAlgorithm</a
>
</h2>
<pre><code class="language-lua">(<span class="hljs-string">&quot;bilinear&quot;</span>|<span class="hljs-string">&quot;nearest&quot;</span>)?
</code></pre>
<p>
Optional: scaling algorithm for non-stretched regions. Default:
“bilinear”
</p>
<h2 id="states" tabindex="-1">
<a class="header-anchor" href="#states">states</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, ThemeComponent&gt;?
</code></pre>
<h2 id="stretch" tabindex="-1">
<a class="header-anchor" href="#stretch">stretch</a>
</h2>
<pre><code class="language-lua">{ horizontal: <span class="hljs-built_in">table</span>&lt;integer, <span class="hljs-built_in">string</span>&gt;, vertical: <span class="hljs-built_in">table</span>&lt;integer, <span class="hljs-built_in">string</span>&gt; }
</code></pre>
<hr />
<hr />
<h2 id="%E2%9A%A0%EF%B8%8F-internal-properties-10" tabindex="-1">
<a
class="header-anchor"
href="#%E2%9A%A0%EF%B8%8F-internal-properties-10"
>⚠️ Internal Properties</a
>
</h2>
<blockquote>
<p>
<strong>Warning:</strong> The following properties are internal
implementation details and should not be accessed directly. They are
prefixed with <code>_</code> to indicate they are private. Accessing
these properties may break in future versions without notice.
</p>
</blockquote>
<hr />
<h2 id="_loadedatlas" tabindex="-1">
<a class="header-anchor" href="#_loadedatlas">_loadedAtlas</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|love.Image)?
</code></pre>
<p>Internal: cached loaded atlas image</p>
<h2 id="_loadedatlasdata" tabindex="-1">
<a class="header-anchor" href="#_loadedatlasdata">_loadedAtlasData</a>
</h2>
<pre><code class="language-lua">(love.ImageData)?
</code></pre>
<p>Internal: cached loaded atlas ImageData for pixel access</p>
<h2 id="_ninepatchdata" tabindex="-1">
<a class="header-anchor" href="#_ninepatchdata">_ninePatchData</a>
</h2>
<pre><code class="language-lua">{ insets: <span class="hljs-built_in">table</span>, contentPadding: <span class="hljs-built_in">table</span>, stretchX: <span class="hljs-built_in">table</span>, stretchY: <span class="hljs-built_in">table</span> }?
</code></pre>
<p>
Internal: parsed 9-patch data with stretch regions and content padding
</p>
<h2 id="_scaledregioncache" tabindex="-1">
<a class="header-anchor" href="#_scaledregioncache"
>_scaledRegionCache</a
>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, love.Image&gt;?
</code></pre>
<p>Internal: cache for scaled corner/edge images</p>
<h1 id="themedefinition" tabindex="-1">
<a class="header-anchor" href="#themedefinition">ThemeDefinition</a>
</h1>
<h2 id="atlas-2" tabindex="-1">
<a class="header-anchor" href="#atlas-2">atlas</a>
</h2>
<pre><code class="language-lua">(<span class="hljs-built_in">string</span>|love.Image)?
</code></pre>
<p>Optional: global atlas (can be overridden per component)</p>
<h2 id="colors-1" tabindex="-1">
<a class="header-anchor" href="#colors-1">colors</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, Color&gt;?
</code></pre>
<h2 id="components-1" tabindex="-1">
<a class="header-anchor" href="#components-1">components</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, ThemeComponent&gt;
</code></pre>
<h2 id="contentautosizingmultiplier-4" tabindex="-1">
<a class="header-anchor" href="#contentautosizingmultiplier-4"
>contentAutoSizingMultiplier</a
>
</h2>
<pre><code class="language-lua">{ width: number?, height: number? }?
</code></pre>
<p>Optional: default multiplier for auto-sized content dimensions</p>
<h2 id="fonts-1" tabindex="-1">
<a class="header-anchor" href="#fonts-1">fonts</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">table</span>&lt;<span class="hljs-built_in">string</span>, <span class="hljs-built_in">string</span>&gt;?
</code></pre>
<p>Optional: font family definitions (name -&gt; path)</p>
<h2 id="name-1" tabindex="-1">
<a class="header-anchor" href="#name-1">name</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>
</code></pre>
<hr />
<h1 id="transformprops" tabindex="-1">
<a class="header-anchor" href="#transformprops">TransformProps</a>
</h1>
<h2 id="rotate" tabindex="-1">
<a class="header-anchor" href="#rotate">rotate</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="scale-1" tabindex="-1">
<a class="header-anchor" href="#scale-1">scale</a>
</h2>
<pre><code class="language-lua">{ x: number, y: number }?
</code></pre>
<h2 id="skew" tabindex="-1">
<a class="header-anchor" href="#skew">skew</a>
</h2>
<pre><code class="language-lua">{ x: number, y: number }?
</code></pre>
<h2 id="translate" tabindex="-1">
<a class="header-anchor" href="#translate">translate</a>
</h2>
<pre><code class="language-lua">{ x: number, y: number }?
</code></pre>
<hr />
<h1 id="transitionprops" tabindex="-1">
<a class="header-anchor" href="#transitionprops">TransitionProps</a>
</h1>
<h2 id="duration-2" tabindex="-1">
<a class="header-anchor" href="#duration-2">duration</a>
</h2>
<pre><code class="language-lua">number?
</code></pre>
<h2 id="easing" tabindex="-1">
<a class="header-anchor" href="#easing">easing</a>
</h2>
<pre><code class="language-lua"><span class="hljs-built_in">string</span>?
</code></pre>
<hr />
</main>
</div>
<a href="#" class="back-to-top" id="backToTop">↑ Top</a>
<script>
// Search functionality
const searchInput = document.getElementById("search");
const navSections = document.querySelectorAll(".nav-section");
searchInput.addEventListener("input", (e) => {
const query = e.target.value.toLowerCase();
navSections.forEach((section) => {
const className = section
.querySelector(".nav-class")
.textContent.toLowerCase();
const members = section.querySelectorAll(".nav-member");
let hasMatch = className.includes(query);
members.forEach((member) => {
const memberName = member.textContent.toLowerCase();
if (memberName.includes(query)) {
member.style.display = "block";
hasMatch = true;
} else {
member.style.display = "none";
}
});
section.style.display = hasMatch ? "block" : "none";
if (hasMatch && query) {
section.querySelector(".nav-members").classList.add("active");
}
});
});
// Expand/collapse navigation
document.querySelectorAll(".nav-class").forEach((navClass) => {
navClass.addEventListener("click", (e) => {
const members = navClass.nextElementSibling;
members.classList.toggle("active");
});
});
// Back to top button
const backToTop = document.getElementById("backToTop");
window.addEventListener("scroll", () => {
if (window.scrollY > 300) {
backToTop.classList.add("visible");
} else {
backToTop.classList.remove("visible");
}
});
backToTop.addEventListener("click", (e) => {
e.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
});
// Auto-expand current section
const currentHash = window.location.hash;
if (currentHash) {
const section = document
.querySelector(`[href="${currentHash}"]`)
?.closest(".nav-section");
if (section) {
section.querySelector(".nav-members").classList.add("active");
}
}
// Version navigation
window.versionNavigate = function (value) {
if (!value) return;
if (value === "current") {
// Navigate to current/latest version (root api.html)
const currentPath = window.location.pathname;
if (currentPath.includes("/versions/")) {
// We're in a versioned doc, go back to root
window.location.href = "../../api.html";
}
// Already on current, do nothing
} else {
// Navigate to specific version
const currentPath = window.location.pathname;
if (currentPath.includes("/versions/")) {
// We're in a versioned doc, navigate to sibling version
window.location.href = `../${value}/api.html`;
} else {
// We're in root, navigate to versions subdirectory
window.location.href = `versions/${value}/api.html`;
}
}
};
// Mobile hamburger menu
const hamburger = document.getElementById('hamburger');
const sidebar = document.querySelector('.sidebar');
const mobileOverlay = document.getElementById('mobile-overlay');
function toggleMobileMenu() {
hamburger.classList.toggle('active');
sidebar.classList.toggle('mobile-open');
mobileOverlay.classList.toggle('active');
}
hamburger.addEventListener('click', toggleMobileMenu);
mobileOverlay.addEventListener('click', toggleMobileMenu);
// Close mobile menu when clicking on nav links
document.querySelectorAll('.sidebar a').forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= 768) {
toggleMobileMenu();
}
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink