1 line
119 KiB
JavaScript
1 line
119 KiB
JavaScript
import{_ as t,c as e,o as d,N as l}from"./chunks/framework.0799945b.js";const h=JSON.parse('{"title":"Module: features/trees/tree","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"api/modules/features/tree.md","lastUpdated":null}'),o={name:"api/modules/features/tree.md"},r=l('<h1 id="module-features-trees-tree" tabindex="-1">Module: features/trees/tree <a class="header-anchor" href="#module-features-trees-tree" aria-label="Permalink to "Module: features/trees/tree""></a></h1><h2 id="interfaces" tabindex="-1">Interfaces <a class="header-anchor" href="#interfaces" aria-label="Permalink to "Interfaces""></a></h2><h3 id="basetree" tabindex="-1">BaseTree <a class="header-anchor" href="#basetree" aria-label="Permalink to "BaseTree""></a></h3><p>• <strong>BaseTree</strong>: <code>Object</code></p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>[Component]</code></td><td style="text-align:left;"><a href="./feature#genericcomponent"><code>GenericComponent</code></a></td><td style="text-align:left;">The Vue component used to render this feature.</td></tr><tr><td style="text-align:left;"><code>[GatherProps]</code></td><td style="text-align:left;">() => <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>unknown</code>></td><td style="text-align:left;">A function to gather the props the vue component requires for this feature.</td></tr><tr><td style="text-align:left;"><code>id</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates.</td></tr><tr><td style="text-align:left;"><code>isResetting</code></td><td style="text-align:left;"><code>Ref</code><<code>boolean</code>></td><td style="text-align:left;">A flag that is true while the reset is still propagating through the tree.</td></tr><tr><td style="text-align:left;"><code>links</code></td><td style="text-align:left;"><code>Ref</code><<a href="./links#link"><code>Link</code></a>[]></td><td style="text-align:left;">The link objects for each of the branches of the tree.</td></tr><tr><td style="text-align:left;"><code>reset</code></td><td style="text-align:left;">(<code>node</code>: <a href="./tree#generictreenode"><code>GenericTreeNode</code></a>) => <code>void</code></td><td style="text-align:left;">Cause a reset on this node and propagate it through the tree according to resetPropagation.</td></tr><tr><td style="text-align:left;"><code>resettingNode</code></td><td style="text-align:left;"><code>Ref</code><<code>null</code> | <a href="./tree#generictreenode"><code>GenericTreeNode</code></a>></td><td style="text-align:left;">A reference to the node that caused the currently propagating reset.</td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;">typeof <a href="./tree#treetype"><code>TreeType</code></a></td><td style="text-align:left;">A symbol that helps identify features of the same type.</td></tr></tbody></table><h4 id="defined-in" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L222" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:222</a></p><hr><h3 id="basetreenode" tabindex="-1">BaseTreeNode <a class="header-anchor" href="#basetreenode" aria-label="Permalink to "BaseTreeNode""></a></h3><p>• <strong>BaseTreeNode</strong>: <code>Object</code></p><p>The properties that are added onto a processed <a href="./tree#treenodeoptions">TreeNodeOptions</a> to create an <a href="./tree#treenode">TreeNode</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>[Component]</code></td><td style="text-align:left;"><a href="./feature#genericcomponent"><code>GenericComponent</code></a></td><td style="text-align:left;">The Vue component used to render this feature.</td></tr><tr><td style="text-align:left;"><code>[GatherProps]</code></td><td style="text-align:left;">() => <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>unknown</code>></td><td style="text-align:left;">A function to gather the props the vue component requires for this feature.</td></tr><tr><td style="text-align:left;"><code>id</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates.</td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;">typeof <a href="./tree#treenodetype"><code>TreeNodeType</code></a></td><td style="text-align:left;">A symbol that helps identify features of the same type.</td></tr></tbody></table><h4 id="defined-in-1" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-1" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L65" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:65</a></p><hr><h3 id="treebranch" tabindex="-1">TreeBranch <a class="header-anchor" href="#treebranch" aria-label="Permalink to "TreeBranch""></a></h3><p>• <strong>TreeBranch</strong>: <code>Object</code></p><p>Represents a branch between two nodes in a tree.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>accent-height?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>accumulate?</code></td><td style="text-align:left;"><code>"none"</code> | <code>"sum"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>additive?</code></td><td style="text-align:left;"><code>"sum"</code> | <code>"replace"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>alignment-baseline?</code></td><td style="text-align:left;"><code>"alphabetic"</code> | <code>"hanging"</code> | <code>"ideographic"</code> | <code>"mathematical"</code> | <code>"auto"</code> | <code>"baseline"</code> | <code>"before-edge"</code> | <code>"text-before-edge"</code> | <code>"middle"</code> | <code>"central"</code> | <code>"after-edge"</code> | <code>"text-after-edge"</code> | <code>"inherit"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>allowReorder?</code></td><td style="text-align:left;"><code>"no"</code> | <code>"yes"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>alphabetic?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>amplitude?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>arabic-form?</code></td><td style="text-align:left;"><code>"initial"</code> | <code>"medial"</code> | <code>"terminal"</code> | <code>"isolated"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>aria-activedescendant?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.</td></tr><tr><td style="text-align:left;"><code>aria-atomic?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.</td></tr><tr><td style="text-align:left;"><code>aria-autocomplete?</code></td><td style="text-align:left;"><code>"none"</code> | <code>"inline"</code> | <code>"list"</code> | <code>"both"</code></td><td style="text-align:left;">Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.</td></tr><tr><td style="text-align:left;"><code>aria-busy?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.</td></tr><tr><td style="text-align:left;"><code>aria-checked?</code></td><td style="text-align:left;"><code>Booleanish</code> | <code>"mixed"</code></td><td style="text-align:left;">Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. <strong><code>See</code></strong> - aria-pressed - aria-selected.</td></tr><tr><td style="text-align:left;"><code>aria-colcount?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the total number of columns in a table, grid, or treegrid. <strong><code>See</code></strong> aria-colindex.</td></tr><tr><td style="text-align:left;"><code>aria-colindex?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. <strong><code>See</code></strong> - aria-colcount - aria-colspan.</td></tr><tr><td style="text-align:left;"><code>aria-colspan?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. <strong><code>See</code></strong> - aria-colindex - aria-rowspan.</td></tr><tr><td style="text-align:left;"><code>aria-controls?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Identifies the element (or elements) whose contents or presence are controlled by the current element. <strong><code>See</code></strong> aria-owns.</td></tr><tr><td style="text-align:left;"><code>aria-current?</code></td><td style="text-align:left;"><code>"time"</code> | <code>Booleanish</code> | <code>"page"</code> | <code>"step"</code> | <code>"location"</code> | <code>"date"</code></td><td style="text-align:left;">Indicates the element that represents the current item within a container or set of related elements.</td></tr><tr><td style="text-align:left;"><code>aria-describedby?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Identifies the element (or elements) that describes the object. <strong><code>See</code></strong> aria-labelledby</td></tr><tr><td style="text-align:left;"><code>aria-details?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Identifies the element that provides a detailed, extended description for the object. <strong><code>See</code></strong> aria-describedby.</td></tr><tr><td style="text-align:left;"><code>aria-disabled?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. <strong><code>See</code></strong> - aria-hidden - aria-readonly.</td></tr><tr><td style="text-align:left;"><code>aria-dropeffect?</code></td><td style="text-align:left;"><code>"none"</code> | <code>"copy"</code> | <code>"execute"</code> | <code>"link"</code> | <code>"move"</code> | <code>"popup"</code></td><td style="text-align:left;">Indicates what functions can be performed when a dragged object is released on the drop target. <strong><code>Deprecated</code></strong> in ARIA 1.1</td></tr><tr><td style="text-align:left;"><code>aria-errormessage?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Identifies the element that provides an error message for the object. <strong><code>See</code></strong> - aria-invalid - aria-describedby.</td></tr><tr><td style="text-align:left;"><code>aria-expanded?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.</td></tr><tr><td style="text-align:left;"><code>aria-flowto?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.</td></tr><tr><td style="text-align:left;"><code>aria-grabbed?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates an element's "grabbed" state in a drag-and-drop operation. <strong><code>Deprecated</code></strong> in ARIA 1.1</td></tr><tr><td style="text-align:left;"><code>aria-haspopup?</code></td><td style="text-align:left;"><code>"tree"</code> | <code>Booleanish</code> | <code>"menu"</code> | <code>"listbox"</code> | <code>"grid"</code> | <code>"dialog"</code></td><td style="text-align:left;">Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.</td></tr><tr><td style="text-align:left;"><code>aria-hidden?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates whether the element is exposed to an accessibility API. <strong><code>See</code></strong> aria-disabled.</td></tr><tr><td style="text-align:left;"><code>aria-invalid?</code></td><td style="text-align:left;"><code>Booleanish</code> | <code>"grammar"</code> | <code>"spelling"</code></td><td style="text-align:left;">Indicates the entered value does not conform to the format expected by the application. <strong><code>See</code></strong> aria-errormessage.</td></tr><tr><td style="text-align:left;"><code>aria-keyshortcuts?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.</td></tr><tr><td style="text-align:left;"><code>aria-label?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Defines a string value that labels the current element. <strong><code>See</code></strong> aria-labelledby.</td></tr><tr><td style="text-align:left;"><code>aria-labelledby?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Identifies the element (or elements) that labels the current element. <strong><code>See</code></strong> aria-describedby.</td></tr><tr><td style="text-align:left;"><code>aria-level?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the hierarchical level of an element within a structure.</td></tr><tr><td style="text-align:left;"><code>aria-live?</code></td><td style="text-align:left;"><code>"off"</code> | <code>"assertive"</code> | <code>"polite"</code></td><td style="text-align:left;">Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.</td></tr><tr><td style="text-align:left;"><code>aria-modal?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates whether an element is modal when displayed.</td></tr><tr><td style="text-align:left;"><code>aria-multiline?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates whether a text box accepts multiple lines of input or only a single line.</td></tr><tr><td style="text-align:left;"><code>aria-multiselectable?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates that the user may select more than one item from the current selectable descendants.</td></tr><tr><td style="text-align:left;"><code>aria-orientation?</code></td><td style="text-align:left;"><code>"horizontal"</code> | <code>"vertical"</code></td><td style="text-align:left;">Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.</td></tr><tr><td style="text-align:left;"><code>aria-owns?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. <strong><code>See</code></strong> aria-controls.</td></tr><tr><td style="text-align:left;"><code>aria-placeholder?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.</td></tr><tr><td style="text-align:left;"><code>aria-posinset?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. <strong><code>See</code></strong> aria-setsize.</td></tr><tr><td style="text-align:left;"><code>aria-pressed?</code></td><td style="text-align:left;"><code>Booleanish</code> | <code>"mixed"</code></td><td style="text-align:left;">Indicates the current "pressed" state of toggle buttons. <strong><code>See</code></strong> - aria-checked - aria-selected.</td></tr><tr><td style="text-align:left;"><code>aria-readonly?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates that the element is not editable, but is otherwise operable. <strong><code>See</code></strong> aria-disabled.</td></tr><tr><td style="text-align:left;"><code>aria-relevant?</code></td><td style="text-align:left;"><code>"additions"</code> | <code>"additions text"</code> | <code>"all"</code> | <code>"removals"</code> | <code>"text"</code></td><td style="text-align:left;">Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. <strong><code>See</code></strong> aria-atomic.</td></tr><tr><td style="text-align:left;"><code>aria-required?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates that user input is required on the element before a form may be submitted.</td></tr><tr><td style="text-align:left;"><code>aria-roledescription?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Defines a human-readable, author-localized description for the role of an element.</td></tr><tr><td style="text-align:left;"><code>aria-rowcount?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the total number of rows in a table, grid, or treegrid. <strong><code>See</code></strong> aria-rowindex.</td></tr><tr><td style="text-align:left;"><code>aria-rowindex?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. <strong><code>See</code></strong> - aria-rowcount - aria-rowspan.</td></tr><tr><td style="text-align:left;"><code>aria-rowspan?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. <strong><code>See</code></strong> - aria-rowindex - aria-colspan.</td></tr><tr><td style="text-align:left;"><code>aria-selected?</code></td><td style="text-align:left;"><code>Booleanish</code></td><td style="text-align:left;">Indicates the current "selected" state of various widgets. <strong><code>See</code></strong> - aria-checked - aria-pressed.</td></tr><tr><td style="text-align:left;"><code>aria-setsize?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. <strong><code>See</code></strong> aria-posinset.</td></tr><tr><td style="text-align:left;"><code>aria-sort?</code></td><td style="text-align:left;"><code>"none"</code> | <code>"ascending"</code> | <code>"descending"</code> | <code>"other"</code></td><td style="text-align:left;">Indicates if items in a table or grid are sorted in ascending or descending order.</td></tr><tr><td style="text-align:left;"><code>aria-valuemax?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the maximum allowed value for a range widget.</td></tr><tr><td style="text-align:left;"><code>aria-valuemin?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the minimum allowed value for a range widget.</td></tr><tr><td style="text-align:left;"><code>aria-valuenow?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">Defines the current value for a range widget. <strong><code>See</code></strong> aria-valuetext.</td></tr><tr><td style="text-align:left;"><code>aria-valuetext?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Defines the human readable text alternative of aria-valuenow for a range widget.</td></tr><tr><td style="text-align:left;"><code>ascent?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>attributeName?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>attributeType?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>autoReverse?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>azimuth?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>baseFrequency?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>baseProfile?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>baseline-shift?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>bbox?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>begin?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>bias?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>by?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>calcMode?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>cap-height?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>class?</code></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">SVG Styling Attributes <strong><code>See</code></strong> <a href="https://www.w3.org/TR/SVG/styling.html#ElementSpecificStyling" target="_blank" rel="noreferrer">https://www.w3.org/TR/SVG/styling.html#ElementSpecificStyling</a></td></tr><tr><td style="text-align:left;"><code>clip?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>clip-path?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>clip-rule?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>clipPathUnits?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>color?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>color-interpolation?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>color-interpolation-filters?</code></td><td style="text-align:left;"><code>"auto"</code> | <code>"inherit"</code> | <code>"sRGB"</code> | <code>"linearRGB"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>color-profile?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>color-rendering?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>contentScriptType?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>contentStyleType?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>cursor?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>cx?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>cy?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>d?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>decelerate?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>descent?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>diffuseConstant?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>direction?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>display?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>divisor?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>dominant-baseline?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>dur?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>dx?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>dy?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>edgeMode?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>elevation?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>enable-background?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>end?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>endNode</code></td><td style="text-align:left;"><a href="./tree#generictreenode"><code>GenericTreeNode</code></a></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>exponent?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>externalResourcesRequired?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>fill?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>fill-opacity?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>fill-rule?</code></td><td style="text-align:left;"><code>"inherit"</code> | <code>"nonzero"</code> | <code>"evenodd"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>filter?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>filterRes?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>filterUnits?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>flood-color?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>flood-opacity?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>focusable?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>font-family?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>font-size?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>font-size-adjust?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>font-stretch?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>font-style?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>font-variant?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>font-weight?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>format?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>from?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>fx?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>fy?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>g1?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>g2?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>glyph-name?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>glyph-orientation-horizontal?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>glyph-orientation-vertical?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>glyphRef?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>gradientTransform?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>gradientUnits?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>hanging?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>height?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>horiz-adv-x?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>horiz-origin-x?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>href?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>id?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>ideographic?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>image-rendering?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>in?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>in2?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>innerHTML?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>intercept?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>k?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>k1?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>k2?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>k3?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>k4?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>kernelMatrix?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>kernelUnitLength?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>kerning?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>keyPoints?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>keySplines?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>keyTimes?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>lang?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>lengthAdjust?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>letter-spacing?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>lighting-color?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>limitingConeAngle?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>local?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>marker-end?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>marker-mid?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>marker-start?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>markerHeight?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>markerUnits?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>markerWidth?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>mask?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>maskContentUnits?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>maskUnits?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>mathematical?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>max?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>media?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>method?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>min?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>mode?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>name?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>numOctaves?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>offset?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>offsetEnd?</code></td><td style="text-align:left;"><a href="./../game/layers#position"><code>Position</code></a></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>offsetStart?</code></td><td style="text-align:left;"><a href="./../game/layers#position"><code>Position</code></a></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onAbort?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onAnimationend?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent" target="_blank" rel="noreferrer"><code>AnimationEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onAnimationiteration?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent" target="_blank" rel="noreferrer"><code>AnimationEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onAnimationstart?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent" target="_blank" rel="noreferrer"><code>AnimationEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onAuxclick?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onBeforeinput?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onBlur?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent" target="_blank" rel="noreferrer"><code>FocusEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onCanplay?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onCanplaythrough?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onChange?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onClick?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onCompositionend?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent" target="_blank" rel="noreferrer"><code>CompositionEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onCompositionstart?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent" target="_blank" rel="noreferrer"><code>CompositionEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onCompositionupdate?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent" target="_blank" rel="noreferrer"><code>CompositionEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onContextmenu?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onCopy?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent" target="_blank" rel="noreferrer"><code>ClipboardEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onCut?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent" target="_blank" rel="noreferrer"><code>ClipboardEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDblclick?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDrag?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent" target="_blank" rel="noreferrer"><code>DragEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDragend?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent" target="_blank" rel="noreferrer"><code>DragEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDragenter?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent" target="_blank" rel="noreferrer"><code>DragEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDragexit?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent" target="_blank" rel="noreferrer"><code>DragEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDragleave?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent" target="_blank" rel="noreferrer"><code>DragEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDragover?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent" target="_blank" rel="noreferrer"><code>DragEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDragstart?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent" target="_blank" rel="noreferrer"><code>DragEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDrop?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent" target="_blank" rel="noreferrer"><code>DragEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onDurationchange?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onEmptied?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onEncrypted?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onEnded?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onError?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onFocus?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent" target="_blank" rel="noreferrer"><code>FocusEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onFocusin?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent" target="_blank" rel="noreferrer"><code>FocusEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onFocusout?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent" target="_blank" rel="noreferrer"><code>FocusEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onInput?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onInvalid?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onKeydown?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank" rel="noreferrer"><code>KeyboardEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onKeypress?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank" rel="noreferrer"><code>KeyboardEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onKeyup?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank" rel="noreferrer"><code>KeyboardEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onLoad?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onLoadeddata?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onLoadedmetadata?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onLoadstart?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onMousedown?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onMouseenter?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onMouseleave?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onMousemove?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onMouseout?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onMouseover?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onMouseup?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPaste?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent" target="_blank" rel="noreferrer"><code>ClipboardEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPause?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPlay?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPlaying?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPointercancel?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent" target="_blank" rel="noreferrer"><code>PointerEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPointerdown?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent" target="_blank" rel="noreferrer"><code>PointerEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPointerenter?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent" target="_blank" rel="noreferrer"><code>PointerEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPointerleave?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent" target="_blank" rel="noreferrer"><code>PointerEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPointermove?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent" target="_blank" rel="noreferrer"><code>PointerEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPointerout?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent" target="_blank" rel="noreferrer"><code>PointerEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPointerover?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent" target="_blank" rel="noreferrer"><code>PointerEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onPointerup?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent" target="_blank" rel="noreferrer"><code>PointerEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onProgress?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onRatechange?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onReset?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onScroll?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent" target="_blank" rel="noreferrer"><code>UIEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onSeeked?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onSeeking?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onSelect?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onStalled?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onSubmit?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onSuspend?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onTimeupdate?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onTouchcancel?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent" target="_blank" rel="noreferrer"><code>TouchEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onTouchend?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent" target="_blank" rel="noreferrer"><code>TouchEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onTouchmove?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent" target="_blank" rel="noreferrer"><code>TouchEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onTouchstart?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent" target="_blank" rel="noreferrer"><code>TouchEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onTransitionend?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent" target="_blank" rel="noreferrer"><code>TransitionEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onTransitionstart?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent" target="_blank" rel="noreferrer"><code>TransitionEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onVolumechange?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onWaiting?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noreferrer"><code>Event</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>onWheel?</code></td><td style="text-align:left;">(<code>payload</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent" target="_blank" rel="noreferrer"><code>WheelEvent</code></a>) => <code>void</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>opacity?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>operator?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>order?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>orient?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>orientation?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>origin?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>overflow?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>overline-position?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>overline-thickness?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>paint-order?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>panose-1?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>pathLength?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>patternContentUnits?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>patternTransform?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>patternUnits?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>pointer-events?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>points?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>pointsAtX?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>pointsAtY?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>pointsAtZ?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>preserveAlpha?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>preserveAspectRatio?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>primitiveUnits?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>r?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>radius?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>refX?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>refY?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>renderingIntent?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>repeatCount?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>repeatDur?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>requiredExtensions?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>requiredFeatures?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>restart?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>result?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>role?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>rotate?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>rx?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>ry?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>scale?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>seed?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>shape-rendering?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>slope?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>spacing?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>specularConstant?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>specularExponent?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>speed?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>spreadMethod?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>startNode</code></td><td style="text-align:left;"><a href="./tree#generictreenode"><code>GenericTreeNode</code></a></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>startOffset?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stdDeviation?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stemh?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stemv?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stitchTiles?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stop-color?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stop-opacity?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>strikethrough-position?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>strikethrough-thickness?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>string?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stroke?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stroke-dasharray?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stroke-dashoffset?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stroke-linecap?</code></td><td style="text-align:left;"><code>"inherit"</code> | <code>"butt"</code> | <code>"round"</code> | <code>"square"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stroke-linejoin?</code></td><td style="text-align:left;"><code>"inherit"</code> | <code>"round"</code> | <code>"miter"</code> | <code>"bevel"</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stroke-miterlimit?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stroke-opacity?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>stroke-width?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>style?</code></td><td style="text-align:left;"><code>string</code> | <code>CSSProperties</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>surfaceScale?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>systemLanguage?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>tabindex?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>tableValues?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>target?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>targetX?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>targetY?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>text-anchor?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>text-decoration?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>text-rendering?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>textLength?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>to?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>transform?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>type?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>u1?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>u2?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>underline-position?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>underline-thickness?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>unicode?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>unicode-bidi?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>unicode-range?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>unitsPer-em?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>v-alphabetic?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>v-hanging?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>v-ideographic?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>v-mathematical?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>values?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>vector-effect?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>version?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>vert-adv-y?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>vert-origin-x?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>vert-origin-y?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>viewBox?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>viewTarget?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>visibility?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>width?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>widths?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>word-spacing?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>writing-mode?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>x?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>x-height?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>x1?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>x2?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xChannelSelector?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xlinkActuate?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xlinkArcrole?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xlinkHref?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xlinkRole?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xlinkShow?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xlinkTitle?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xlinkType?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>xmlns?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>y?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>y1?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>y2?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>yChannelSelector?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>z?</code></td><td style="text-align:left;"><code>Numberish</code></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>zoomAndPan?</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">-</td></tr></tbody></table><h4 id="defined-in-2" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-2" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L197" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:197</a></p><hr><h3 id="treenodeoptions" tabindex="-1">TreeNodeOptions <a class="header-anchor" href="#treenodeoptions" aria-label="Permalink to "TreeNodeOptions""></a></h3><p>• <strong>TreeNodeOptions</strong>: <code>Object</code></p><p>An object that configures a <a href="./tree#treenode">TreeNode</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>canClick?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<code>boolean</code>></td><td style="text-align:left;">Whether or not this tree node can be clicked.</td></tr><tr><td style="text-align:left;"><code>classes?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>boolean</code>>></td><td style="text-align:left;">Dictionary of CSS classes to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>color?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<code>string</code>></td><td style="text-align:left;">The background color for this node.</td></tr><tr><td style="text-align:left;"><code>display?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./feature#coercablecomponent"><code>CoercableComponent</code></a>></td><td style="text-align:left;">The label to display on this tree node.</td></tr><tr><td style="text-align:left;"><code>glowColor?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<code>string</code>></td><td style="text-align:left;">The color of the glow effect shown to notify the user there's something to do with this node.</td></tr><tr><td style="text-align:left;"><code>mark?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<code>string</code> | <code>boolean</code>></td><td style="text-align:left;">Shows a marker on the corner of the feature.</td></tr><tr><td style="text-align:left;"><code>onClick?</code></td><td style="text-align:left;">(<code>e?</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noreferrer"><code>MouseEvent</code></a> | <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent" target="_blank" rel="noreferrer"><code>TouchEvent</code></a>) => <code>void</code></td><td style="text-align:left;">A function that is called when the tree node is clicked.</td></tr><tr><td style="text-align:left;"><code>onHold?</code></td><td style="text-align:left;"><code>VoidFunction</code></td><td style="text-align:left;">A function that is called when the tree node is held down.</td></tr><tr><td style="text-align:left;"><code>reset?</code></td><td style="text-align:left;"><a href="./reset#genericreset"><code>GenericReset</code></a></td><td style="text-align:left;">A reset object attached to this node, used for propagating resets through the tree.</td></tr><tr><td style="text-align:left;"><code>style?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./feature#stylevalue"><code>StyleValue</code></a>></td><td style="text-align:left;">CSS to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>visibility?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<code>boolean</code> | <a href="./feature#visibility"><code>Visibility</code></a>></td><td style="text-align:left;">Whether this tree node should be visible.</td></tr></tbody></table><h4 id="defined-in-3" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-3" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L37" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:37</a></p><hr><h3 id="treeoptions" tabindex="-1">TreeOptions <a class="header-anchor" href="#treeoptions" aria-label="Permalink to "TreeOptions""></a></h3><p>• <strong>TreeOptions</strong>: <code>Object</code></p><p>An object that configures a <a href="./tree#tree">Tree</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>branches?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./tree#treebranch"><code>TreeBranch</code></a>[]></td><td style="text-align:left;">The branches between nodes within this tree.</td></tr><tr><td style="text-align:left;"><code>leftSideNodes?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./tree#generictreenode"><code>GenericTreeNode</code></a>[]></td><td style="text-align:left;">Nodes to show on the left side of the tree.</td></tr><tr><td style="text-align:left;"><code>nodes</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./tree#generictreenode"><code>GenericTreeNode</code></a>[][]></td><td style="text-align:left;">The nodes within the tree, in a 2D array.</td></tr><tr><td style="text-align:left;"><code>onReset?</code></td><td style="text-align:left;">(<code>node</code>: <a href="./tree#generictreenode"><code>GenericTreeNode</code></a>) => <code>void</code></td><td style="text-align:left;">A function that is called when a node within the tree is reset.</td></tr><tr><td style="text-align:left;"><code>resetPropagation?</code></td><td style="text-align:left;"><a href="./tree#resetpropagation"><code>ResetPropagation</code></a></td><td style="text-align:left;">How to propagate resets through the tree.</td></tr><tr><td style="text-align:left;"><code>rightSideNodes?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./tree#generictreenode"><code>GenericTreeNode</code></a>[]></td><td style="text-align:left;">Nodes to show on the right side of the tree.</td></tr><tr><td style="text-align:left;"><code>visibility?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<code>boolean</code> | <a href="./feature#visibility"><code>Visibility</code></a>></td><td style="text-align:left;">Whether this clickable should be visible.</td></tr></tbody></table><h4 id="defined-in-4" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-4" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L205" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:205</a></p><h2 id="type-aliases" tabindex="-1">Type Aliases <a class="header-anchor" href="#type-aliases" aria-label="Permalink to "Type Aliases""></a></h2><h3 id="generictree" tabindex="-1">GenericTree <a class="header-anchor" href="#generictree" aria-label="Permalink to "GenericTree""></a></h3><p>Ƭ <strong>GenericTree</strong>: <a href="./feature#replace"><code>Replace</code></a><<a href="./tree#tree"><code>Tree</code></a><<a href="./tree#treeoptions"><code>TreeOptions</code></a>>, { <code>visibility</code>: <a href="./../util/computed#processedcomputable"><code>ProcessedComputable</code></a><<a href="./feature#visibility"><code>Visibility</code></a> | <code>boolean</code>> }></p><p>A type that matches any valid <a href="./tree#tree">Tree</a> object.</p><h4 id="defined-in-5" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-5" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L254" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:254</a></p><hr><h3 id="generictreenode" tabindex="-1">GenericTreeNode <a class="header-anchor" href="#generictreenode" aria-label="Permalink to "GenericTreeNode""></a></h3><p>Ƭ <strong>GenericTreeNode</strong>: <a href="./feature#replace"><code>Replace</code></a><<a href="./tree#treenode"><code>TreeNode</code></a><<a href="./tree#treenodeoptions"><code>TreeNodeOptions</code></a>>, { <code>canClick</code>: <a href="./../util/computed#processedcomputable"><code>ProcessedComputable</code></a><<code>boolean</code>> ; <code>visibility</code>: <a href="./../util/computed#processedcomputable"><code>ProcessedComputable</code></a><<a href="./feature#visibility"><code>Visibility</code></a> | <code>boolean</code>> }></p><p>A type that matches any valid <a href="./tree#treenode">TreeNode</a> object.</p><h4 id="defined-in-6" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-6" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L92" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:92</a></p><hr><h3 id="resetpropagation" tabindex="-1">ResetPropagation <a class="header-anchor" href="#resetpropagation" aria-label="Permalink to "ResetPropagation""></a></h3><p>Ƭ <strong>ResetPropagation</strong>: (<code>tree</code>: <a href="./tree#generictree"><code>GenericTree</code></a>, <code>resettingNode</code>: <a href="./tree#generictreenode"><code>GenericTreeNode</code></a>) => <code>void</code></p><h4 id="type-declaration" tabindex="-1">Type declaration <a class="header-anchor" href="#type-declaration" aria-label="Permalink to "Type declaration""></a></h4><p>▸ (<code>tree</code>, <code>resettingNode</code>): <code>void</code></p><p>A function that is used to propagate resets through a tree.</p><h5 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>tree</code></td><td style="text-align:left;"><a href="./tree#generictree"><code>GenericTree</code></a></td></tr><tr><td style="text-align:left;"><code>resettingNode</code></td><td style="text-align:left;"><a href="./tree#generictreenode"><code>GenericTreeNode</code></a></td></tr></tbody></table><h5 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to "Returns""></a></h5><p><code>void</code></p><h4 id="defined-in-7" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-7" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L308" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:308</a></p><hr><h3 id="tree" tabindex="-1">Tree <a class="header-anchor" href="#tree" aria-label="Permalink to "Tree""></a></h3><p>Ƭ <strong>Tree</strong><<code>T</code>>: <a href="./feature#replace"><code>Replace</code></a><<code>T</code> & <a href="./tree#basetree"><code>BaseTree</code></a>, { <code>branches</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"branches"</code>]> ; <code>leftSideNodes</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"leftSideNodes"</code>]> ; <code>nodes</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"nodes"</code>]> ; <code>rightSideNodes</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"rightSideNodes"</code>]> ; <code>visibility</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"visibility"</code>], <a href="./feature#visible"><code>Visible</code></a>> }></p><p>An object that represents a feature that is a tree of nodes with branches between them. Contains support for reset mechanics that can propagate through the tree.</p><h4 id="type-parameters" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters" aria-label="Permalink to "Type parameters""></a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tree#treeoptions"><code>TreeOptions</code></a></td></tr></tbody></table><h4 id="defined-in-8" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-8" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L242" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:242</a></p><hr><h3 id="treenode" tabindex="-1">TreeNode <a class="header-anchor" href="#treenode" aria-label="Permalink to "TreeNode""></a></h3><p>Ƭ <strong>TreeNode</strong><<code>T</code>>: <a href="./feature#replace"><code>Replace</code></a><<code>T</code> & <a href="./tree#basetreenode"><code>BaseTreeNode</code></a>, { <code>canClick</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"canClick"</code>], <code>true</code>> ; <code>classes</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"classes"</code>]> ; <code>color</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"color"</code>]> ; <code>display</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"display"</code>]> ; <code>glowColor</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"glowColor"</code>]> ; <code>mark</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"mark"</code>]> ; <code>style</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"style"</code>]> ; <code>visibility</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"visibility"</code>], <a href="./feature#visible"><code>Visible</code></a>> }></p><p>An object that represents a node on a tree.</p><h4 id="type-parameters-1" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-1" aria-label="Permalink to "Type parameters""></a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tree#treenodeoptions"><code>TreeNodeOptions</code></a></td></tr></tbody></table><h4 id="defined-in-9" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-9" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L77" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:77</a></p><h2 id="variables" tabindex="-1">Variables <a class="header-anchor" href="#variables" aria-label="Permalink to "Variables""></a></h2><h3 id="treenodetype" tabindex="-1">TreeNodeType <a class="header-anchor" href="#treenodetype" aria-label="Permalink to "TreeNodeType""></a></h3><p>• <code>Const</code> <strong>TreeNodeType</strong>: typeof <a href="./tree#treenodetype"><code>TreeNodeType</code></a></p><p>A symbol used to identify <a href="./tree#treenode">TreeNode</a> features.</p><h4 id="defined-in-10" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-10" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L30" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:30</a></p><hr><h3 id="treetype" tabindex="-1">TreeType <a class="header-anchor" href="#treetype" aria-label="Permalink to "TreeType""></a></h3><p>• <code>Const</code> <strong>TreeType</strong>: typeof <a href="./tree#treetype"><code>TreeType</code></a></p><p>A symbol used to identify <a href="./tree#tree">Tree</a> features.</p><h4 id="defined-in-11" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-11" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L32" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:32</a></p><h2 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to "Functions""></a></h2><h3 id="branchedresetpropagation" tabindex="-1">branchedResetPropagation <a class="header-anchor" href="#branchedresetpropagation" aria-label="Permalink to "branchedResetPropagation""></a></h3><p>▸ <strong>branchedResetPropagation</strong>(<code>tree</code>, <code>resettingNode</code>): <code>void</code></p><p>Propagate resets down the branches of the tree.</p><h5 id="parameters-1" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-1" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>tree</code></td><td style="text-align:left;"><a href="./tree#generictree"><code>GenericTree</code></a></td></tr><tr><td style="text-align:left;"><code>resettingNode</code></td><td style="text-align:left;"><a href="./tree#generictreenode"><code>GenericTreeNode</code></a></td></tr></tbody></table><h5 id="returns-1" tabindex="-1">Returns <a class="header-anchor" href="#returns-1" aria-label="Permalink to "Returns""></a></h5><p><code>void</code></p><h4 id="defined-in-12" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-12" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L337" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:337</a></p><hr><h3 id="createresourcetooltip" tabindex="-1">createResourceTooltip <a class="header-anchor" href="#createresourcetooltip" aria-label="Permalink to "createResourceTooltip""></a></h3><p>▸ <strong>createResourceTooltip</strong>(<code>resource</code>, <code>requiredResource?</code>, <code>requirement?</code>): <code>Ref</code><<code>string</code>></p><p>Utility for creating a tooltip for a tree node that displays a resource-based unlock requirement, and after unlock shows the amount of another resource. It sounds oddly specific, but comes up a lot.</p><h5 id="parameters-2" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-2" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Default value</th></tr></thead><tbody><tr><td style="text-align:left;"><code>resource</code></td><td style="text-align:left;"><a href="./resource#resource"><code>Resource</code></a><<a href="./../lib/break_eternity#decimalsource"><code>DecimalSource</code></a>></td><td style="text-align:left;"><code>undefined</code></td></tr><tr><td style="text-align:left;"><code>requiredResource</code></td><td style="text-align:left;"><code>null</code> | <a href="./resource#resource"><code>Resource</code></a><<a href="./../lib/break_eternity#decimalsource"><code>DecimalSource</code></a>></td><td style="text-align:left;"><code>null</code></td></tr><tr><td style="text-align:left;"><code>requirement</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./../lib/break_eternity#decimalsource"><code>DecimalSource</code></a>></td><td style="text-align:left;"><code>0</code></td></tr></tbody></table><h5 id="returns-2" tabindex="-1">Returns <a class="header-anchor" href="#returns-2" aria-label="Permalink to "Returns""></a></h5><p><code>Ref</code><<code>string</code>></p><h4 id="defined-in-13" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-13" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L376" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:376</a></p><hr><h3 id="createtree" tabindex="-1">createTree <a class="header-anchor" href="#createtree" aria-label="Permalink to "createTree""></a></h3><p>▸ <strong>createTree</strong><<code>T</code>>(<code>optionsFunc</code>): <a href="./tree#tree"><code>Tree</code></a><<code>T</code>></p><p>Lazily creates a tree with the given options.</p><h5 id="type-parameters-2" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-2" aria-label="Permalink to "Type parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tree#treeoptions"><code>TreeOptions</code></a></td></tr></tbody></table><h5 id="parameters-3" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-3" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>optionsFunc</code></td><td style="text-align:left;"><a href="./feature#optionsfunc"><code>OptionsFunc</code></a><<code>T</code>, <a href="./tree#basetree"><code>BaseTree</code></a>, <a href="./tree#generictree"><code>GenericTree</code></a>></td><td style="text-align:left;">Tree options.</td></tr></tbody></table><h5 id="returns-3" tabindex="-1">Returns <a class="header-anchor" href="#returns-3" aria-label="Permalink to "Returns""></a></h5><p><a href="./tree#tree"><code>Tree</code></a><<code>T</code>></p><h4 id="defined-in-14" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-14" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L265" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:265</a></p><hr><h3 id="createtreenode" tabindex="-1">createTreeNode <a class="header-anchor" href="#createtreenode" aria-label="Permalink to "createTreeNode""></a></h3><p>▸ <strong>createTreeNode</strong><<code>T</code>>(<code>optionsFunc?</code>, <code>...decorators</code>): <a href="./tree#treenode"><code>TreeNode</code></a><<code>T</code>></p><p>Lazily creates a tree node with the given options.</p><h5 id="type-parameters-3" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-3" aria-label="Permalink to "Type parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tree#treenodeoptions"><code>TreeNodeOptions</code></a></td></tr></tbody></table><h5 id="parameters-4" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-4" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>optionsFunc?</code></td><td style="text-align:left;"><a href="./feature#optionsfunc"><code>OptionsFunc</code></a><<code>T</code>, <a href="./tree#basetreenode"><code>BaseTreeNode</code></a>, <a href="./tree#generictreenode"><code>GenericTreeNode</code></a>></td><td style="text-align:left;">Tree Node options.</td></tr><tr><td style="text-align:left;"><code>...decorators</code></td><td style="text-align:left;"><a href="./decorators/common#genericdecorator"><code>GenericDecorator</code></a>[]</td><td style="text-align:left;">-</td></tr></tbody></table><h5 id="returns-4" tabindex="-1">Returns <a class="header-anchor" href="#returns-4" aria-label="Permalink to "Returns""></a></h5><p><a href="./tree#treenode"><code>TreeNode</code></a><<code>T</code>></p><h4 id="defined-in-15" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-15" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L104" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:104</a></p><hr><h3 id="defaultresetpropagation" tabindex="-1">defaultResetPropagation <a class="header-anchor" href="#defaultresetpropagation" aria-label="Permalink to "defaultResetPropagation""></a></h3><p>▸ <strong>defaultResetPropagation</strong>(<code>tree</code>, <code>resettingNode</code>): <code>void</code></p><p>Propagate resets down the tree by resetting every node in a lower row.</p><h5 id="parameters-5" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-5" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>tree</code></td><td style="text-align:left;"><a href="./tree#generictree"><code>GenericTree</code></a></td></tr><tr><td style="text-align:left;"><code>resettingNode</code></td><td style="text-align:left;"><a href="./tree#generictreenode"><code>GenericTreeNode</code></a></td></tr></tbody></table><h5 id="returns-5" tabindex="-1">Returns <a class="header-anchor" href="#returns-5" aria-label="Permalink to "Returns""></a></h5><p><code>void</code></p><h4 id="defined-in-16" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-16" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L313" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:313</a></p><hr><h3 id="invertedresetpropagation" tabindex="-1">invertedResetPropagation <a class="header-anchor" href="#invertedresetpropagation" aria-label="Permalink to "invertedResetPropagation""></a></h3><p>▸ <strong>invertedResetPropagation</strong>(<code>tree</code>, <code>resettingNode</code>): <code>void</code></p><p>Propagate resets down the tree by resetting every node in a lower row.</p><h5 id="parameters-6" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-6" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>tree</code></td><td style="text-align:left;"><a href="./tree#generictree"><code>GenericTree</code></a></td></tr><tr><td style="text-align:left;"><code>resettingNode</code></td><td style="text-align:left;"><a href="./tree#generictreenode"><code>GenericTreeNode</code></a></td></tr></tbody></table><h5 id="returns-6" tabindex="-1">Returns <a class="header-anchor" href="#returns-6" aria-label="Permalink to "Returns""></a></h5><p><code>void</code></p><h4 id="defined-in-17" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-17" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/trees/tree.ts#L325" target="_blank" rel="noreferrer">profectus/src/features/trees/tree.ts:325</a></p><h2 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-label="Permalink to "Components""></a></h2><h3 id="tree-component" tabindex="-1">Tree Component <a class="header-anchor" href="#tree-component" aria-label="Permalink to "Tree Component""></a></h3><h4 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to "Props""></a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>nodes</code>*</td><td style="text-align:left;"><code>processedPropType<GenericTreeNode[][]>(Array)</code></td></tr><tr><td style="text-align:left;"><code>leftSideNodes</code></td><td style="text-align:left;"><code>processedPropType<GenericTreeNode[]>(Array)</code></td></tr><tr><td style="text-align:left;"><code>rightSideNodes</code></td><td style="text-align:left;"><code>processedPropType<GenericTreeNode[]>(Array)</code></td></tr><tr><td style="text-align:left;"><code>branches</code></td><td style="text-align:left;"><code>processedPropType<TreeBranch[]>(Array)</code></td></tr></tbody></table><h3 id="treenode-component" tabindex="-1">TreeNode Component <a class="header-anchor" href="#treenode-component" aria-label="Permalink to "TreeNode Component""></a></h3><h4 id="props-1" tabindex="-1">Props <a class="header-anchor" href="#props-1" aria-label="Permalink to "Props""></a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>display</code></td><td style="text-align:left;"><code>processedPropType<CoercableComponent>(Object, String, Function)</code></td></tr><tr><td style="text-align:left;"><code>visibility</code>*</td><td style="text-align:left;"><code>processedPropType<Visibility | boolean>(Number, Boolean)</code></td></tr><tr><td style="text-align:left;"><code>style</code></td><td style="text-align:left;"><code>processedPropType<StyleValue>(String, Object, Array)</code></td></tr><tr><td style="text-align:left;"><code>classes</code></td><td style="text-align:left;"><code>processedPropType<Record<string, boolean>>(Object)</code></td></tr><tr><td style="text-align:left;"><code>onClick</code></td><td style="text-align:left;"><code>(e?: MouseEvent | TouchEvent) => void</code></td></tr><tr><td style="text-align:left;"><code>onHold</code></td><td style="text-align:left;"><code>VoidFunction</code></td></tr><tr><td style="text-align:left;"><code>color</code></td><td style="text-align:left;"><code>processedPropType<string>(String)</code></td></tr><tr><td style="text-align:left;"><code>glowColor</code></td><td style="text-align:left;"><code>processedPropType<string>(String)</code></td></tr><tr><td style="text-align:left;"><code>canClick</code>*</td><td style="text-align:left;"><code>processedPropType<boolean>(Boolean)</code></td></tr><tr><td style="text-align:left;"><code>mark</code></td><td style="text-align:left;"><code>processedPropType<boolean | string>(Boolean, String)</code></td></tr><tr><td style="text-align:left;"><code>id</code>*</td><td style="text-align:left;"><code>string</code></td></tr></tbody></table>',158),a=[r];function n(c,i,s,g,f,y){return d(),e("div",null,a)}const u=t(o,[["render",n]]);export{h as __pageData,u as default};
|