1 line
136 KiB
JavaScript
1 line
136 KiB
JavaScript
import{_ as t,c as e,o as d,N as o}from"./chunks/framework.0799945b.js";const x=JSON.parse('{"title":"Module: features/boards/board","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"api/modules/features/board.md","lastUpdated":null}'),l={name:"api/modules/features/board.md"},a=o('<h1 id="module-features-boards-board" tabindex="-1">Module: features/boards/board <a class="header-anchor" href="#module-features-boards-board" aria-label="Permalink to "Module: features/boards/board""></a></h1><h2 id="enumerations" tabindex="-1">Enumerations <a class="header-anchor" href="#enumerations" aria-label="Permalink to "Enumerations""></a></h2><h3 id="progressdisplay" tabindex="-1">ProgressDisplay <a class="header-anchor" href="#progressdisplay" aria-label="Permalink to "ProgressDisplay""></a></h3><p>• <strong>ProgressDisplay</strong>: <code>Object</code></p><p>Ways to display progress of an action with a duration.</p><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>Fill</code></td><td style="text-align:left;"><code>"Fill"</code></td></tr><tr><td style="text-align:left;"><code>Outline</code></td><td style="text-align:left;"><code>"Outline"</code></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/boards/board.ts#L41" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:41</a></p><hr><h3 id="shape" tabindex="-1">Shape <a class="header-anchor" href="#shape" aria-label="Permalink to "Shape""></a></h3><p>• <strong>Shape</strong>: <code>Object</code></p><p>Node shapes.</p><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>Circle</code></td><td style="text-align:left;"><code>"Circle"</code></td></tr><tr><td style="text-align:left;"><code>Diamond</code></td><td style="text-align:left;"><code>"Triangle"</code></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/boards/board.ts#L47" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:47</a></p><h2 id="interfaces" tabindex="-1">Interfaces <a class="header-anchor" href="#interfaces" aria-label="Permalink to "Interfaces""></a></h2><h3 id="baseboard" tabindex="-1">BaseBoard <a class="header-anchor" href="#baseboard" aria-label="Permalink to "BaseBoard""></a></h3><p>• <strong>BaseBoard</strong>: <code>Object</code></p><p>The properties that are added onto a processed <a href="./board#boardoptions">BoardOptions</a> to create a <a href="./board#board">Board</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>draggingNode</code></td><td style="text-align:left;"><code>Ref</code><<code>null</code> | <a href="./board#boardnode"><code>BoardNode</code></a>></td><td style="text-align:left;">The currently being dragged node, if any.</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>mousePosition</code></td><td style="text-align:left;"><code>Ref</code><<code>null</code> | { <code>x</code>: <code>number</code> ; <code>y</code>: <code>number</code> }></td><td style="text-align:left;">The current mouse position, if over the board.</td></tr><tr><td style="text-align:left;"><code>nodes</code></td><td style="text-align:left;"><code>Ref</code><<a href="./board#boardnode"><code>BoardNode</code></a>[]></td><td style="text-align:left;">All the nodes currently on the board.</td></tr><tr><td style="text-align:left;"><code>placeInAvailableSpace</code></td><td style="text-align:left;">(<code>node</code>: <a href="./board#boardnode"><code>BoardNode</code></a>, <code>radius?</code>: <code>number</code>, <code>direction?</code>: <a href="./../util/common#direction"><code>Direction</code></a>) => <code>void</code></td><td style="text-align:left;">Places a node in the nearest empty space in the given direction with the specified space around it.</td></tr><tr><td style="text-align:left;"><code>receivingNode</code></td><td style="text-align:left;"><code>Ref</code><<code>null</code> | <a href="./board#boardnode"><code>BoardNode</code></a>></td><td style="text-align:left;">If dragging a node, the node it's currently being hovered over, if any.</td></tr><tr><td style="text-align:left;"><code>selectedAction</code></td><td style="text-align:left;"><code>Ref</code><<code>null</code> | <a href="./board#genericboardnodeaction"><code>GenericBoardNodeAction</code></a>></td><td style="text-align:left;">The currently selected action, if any.</td></tr><tr><td style="text-align:left;"><code>selectedNode</code></td><td style="text-align:left;"><code>Ref</code><<code>null</code> | <a href="./board#boardnode"><code>BoardNode</code></a>></td><td style="text-align:left;">The currently selected node, if any.</td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;">typeof <a href="./board#boardtype"><code>BoardType</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-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/boards/board.ts#L254" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:254</a></p><hr><h3 id="baseboardnodeaction" tabindex="-1">BaseBoardNodeAction <a class="header-anchor" href="#baseboardnodeaction" aria-label="Permalink to "BaseBoardNodeAction""></a></h3><p>• <strong>BaseBoardNodeAction</strong>: <code>Object</code></p><p>The properties that are added onto a processed <a href="./board#boardnodeactionoptions">BoardNodeActionOptions</a> to create an <a href="./board#boardnodeaction">BoardNodeAction</a>.</p><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>links?</code></td><td style="text-align:left;"><code>Ref</code><<a href="./board#boardnodelink"><code>BoardNodeLink</code></a>[]></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/boards/board.ts#L201" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:201</a></p><hr><h3 id="basenodetype" tabindex="-1">BaseNodeType <a class="header-anchor" href="#basenodetype" aria-label="Permalink to "BaseNodeType""></a></h3><p>• <strong>BaseNodeType</strong>: <code>Object</code></p><p>The properties that are added onto a processed <a href="./board#nodetypeoptions">NodeTypeOptions</a> to create a <a href="./board#nodetype">NodeType</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>nodes</code></td><td style="text-align:left;"><code>Ref</code><<a href="./board#boardnode"><code>BoardNode</code></a>[]></td><td style="text-align:left;">The nodes currently on the board of this type.</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/boards/board.ts#L134" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:134</a></p><hr><h3 id="boardnode" tabindex="-1">BoardNode <a class="header-anchor" href="#boardnode" aria-label="Permalink to "BoardNode""></a></h3><p>• <strong>BoardNode</strong>: <code>Object</code></p><p>An object representing a node on the board.</p><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>id</code></td><td style="text-align:left;"><code>number</code></td></tr><tr><td style="text-align:left;"><code>pinned?</code></td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;"><code>position</code></td><td style="text-align:left;">{ <code>x</code>: <code>number</code> ; <code>y</code>: <code>number</code> }</td></tr><tr><td style="text-align:left;"><code>position.x</code></td><td style="text-align:left;"><code>number</code></td></tr><tr><td style="text-align:left;"><code>position.y</code></td><td style="text-align:left;"><code>number</code></td></tr><tr><td style="text-align:left;"><code>state?</code></td><td style="text-align:left;"><a href="./../game/persistence#state"><code>State</code></a></td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>string</code></td></tr></tbody></table><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/boards/board.ts#L53" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:53</a></p><hr><h3 id="boardnodeactionoptions" tabindex="-1">BoardNodeActionOptions <a class="header-anchor" href="#boardnodeactionoptions" aria-label="Permalink to "BoardNodeActionOptions""></a></h3><p>• <strong>BoardNodeActionOptions</strong>: <code>Object</code></p><p>An object that configures a <a href="./board#boardnodeaction">BoardNodeAction</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>confirmationLabel?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./board#nodelabel"><code>NodeLabel</code></a>, []></td><td style="text-align:left;">The confirmation label that appears under the action.</td></tr><tr><td style="text-align:left;"><code>fillColor?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>string</code>, []></td><td style="text-align:left;">The fill color of the action.</td></tr><tr><td style="text-align:left;"><code>icon</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>string</code>, []></td><td style="text-align:left;">The icon to display for the action.</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;">A unique identifier for the action.</td></tr><tr><td style="text-align:left;"><code>links?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./board#boardnodelink"><code>BoardNodeLink</code></a>[], []></td><td style="text-align:left;">An array of board node links associated with the action. They appear when the action is focused.</td></tr><tr><td style="text-align:left;"><code>onClick</code></td><td style="text-align:left;">(<code>node</code>: <a href="./board#boardnode"><code>BoardNode</code></a>) => <code>void</code></td><td style="text-align:left;">A function that is called when the action is clicked.</td></tr><tr><td style="text-align:left;"><code>tooltip</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./board#nodelabel"><code>NodeLabel</code></a>, []></td><td style="text-align:left;">The tooltip text to display for the action.</td></tr><tr><td style="text-align:left;"><code>visibility?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>boolean</code> | <a href="./feature#visibility"><code>Visibility</code></a>, []></td><td style="text-align:left;">Whether this action should be visible.</td></tr></tbody></table><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/boards/board.ts#L179" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:179</a></p><hr><h3 id="boardnodelink" tabindex="-1">BoardNodeLink <a class="header-anchor" href="#boardnodelink" aria-label="Permalink to "BoardNodeLink""></a></h3><p>• <strong>BoardNodeLink</strong>: <code>Object</code></p><p>An object representing a link between two nodes on the board.</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="./board#boardnode"><code>BoardNode</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>pulsing?</code></td><td style="text-align:left;"><code>boolean</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="./board#boardnode"><code>BoardNode</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>strokeWidth</code></td><td style="text-align:left;"><code>number</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-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/boards/board.ts#L65" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:65</a></p><hr><h3 id="boardoptions" tabindex="-1">BoardOptions <a class="header-anchor" href="#boardoptions" aria-label="Permalink to "BoardOptions""></a></h3><p>• <strong>BoardOptions</strong>: <code>Object</code></p><p>An object that configures a <a href="./board#board">Board</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>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>height?</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 height of the board. Defaults to 100%</td></tr><tr><td style="text-align:left;"><code>links?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<code>null</code> | <a href="./board#boardnodelink"><code>BoardNodeLink</code></a>[]></td><td style="text-align:left;">An array of board node links to display.</td></tr><tr><td style="text-align:left;"><code>startNodes</code></td><td style="text-align:left;">() => <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys" target="_blank" rel="noreferrer"><code>Omit</code></a><<a href="./board#boardnode"><code>BoardNode</code></a>, <code>"id"</code>>[]</td><td style="text-align:left;">A function that returns an array of initial board nodes, without IDs.</td></tr><tr><td style="text-align:left;"><code>state?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./board#boarddata"><code>BoardData</code></a>></td><td style="text-align:left;">The persistent state of the board.</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>types</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>, <a href="./board#nodetypeoptions"><code>NodeTypeOptions</code></a>></td><td style="text-align:left;">A dictionary of node types that can appear on the board.</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 board should be visible.</td></tr><tr><td style="text-align:left;"><code>width?</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 width of the board. Defaults to 100%</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/boards/board.ts#L230" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:230</a></p><hr><h3 id="nodelabel" tabindex="-1">NodeLabel <a class="header-anchor" href="#nodelabel" aria-label="Permalink to "NodeLabel""></a></h3><p>• <strong>NodeLabel</strong>: <code>Object</code></p><p>An object representing a label for a node.</p><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>color?</code></td><td style="text-align:left;"><code>string</code></td></tr><tr><td style="text-align:left;"><code>pulsing?</code></td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;"><code>text</code></td><td style="text-align:left;"><code>string</code></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/boards/board.ts#L74" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:74</a></p><hr><h3 id="nodetypeoptions" tabindex="-1">NodeTypeOptions <a class="header-anchor" href="#nodetypeoptions" aria-label="Permalink to "NodeTypeOptions""></a></h3><p>• <strong>NodeTypeOptions</strong>: <code>Object</code></p><p>An object that configures a <a href="./board#nodetype">NodeType</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>actionDistance?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>number</code>, []></td><td style="text-align:left;">The distance between the center of the node and its actions.</td></tr><tr><td style="text-align:left;"><code>actions?</code></td><td style="text-align:left;"><a href="./board#boardnodeactionoptions"><code>BoardNodeActionOptions</code></a>[]</td><td style="text-align:left;">The list of action options for the node.</td></tr><tr><td style="text-align:left;"><code>canAccept?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>boolean</code>, [<a href="./board#boardnode"><code>BoardNode</code></a>]></td><td style="text-align:left;">Whether the node can accept another node being dropped upon it.</td></tr><tr><td style="text-align:left;"><code>classes?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</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 node.</td></tr><tr><td style="text-align:left;"><code>draggable?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>boolean</code>, []></td><td style="text-align:left;">Whether the node is draggable or not.</td></tr><tr><td style="text-align:left;"><code>fillColor?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>string</code>, []></td><td style="text-align:left;">The fill color of the node.</td></tr><tr><td style="text-align:left;"><code>label?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>null</code> | <a href="./board#nodelabel"><code>NodeLabel</code></a>, []></td><td style="text-align:left;">An optional label for the node.</td></tr><tr><td style="text-align:left;"><code>onClick?</code></td><td style="text-align:left;">(<code>node</code>: <a href="./board#boardnode"><code>BoardNode</code></a>) => <code>void</code></td><td style="text-align:left;">A function that is called when the node is clicked.</td></tr><tr><td style="text-align:left;"><code>onDrop?</code></td><td style="text-align:left;">(<code>node</code>: <a href="./board#boardnode"><code>BoardNode</code></a>, <code>otherNode</code>: <a href="./board#boardnode"><code>BoardNode</code></a>) => <code>void</code></td><td style="text-align:left;">A function that is called when a node is dropped onto this node.</td></tr><tr><td style="text-align:left;"><code>outlineColor?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>string</code>, []></td><td style="text-align:left;">The outline color of the node.</td></tr><tr><td style="text-align:left;"><code>progress?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>number</code>, []></td><td style="text-align:left;">The progress value of the node.</td></tr><tr><td style="text-align:left;"><code>progressColor?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>string</code>, []></td><td style="text-align:left;">The color of the progress indicator.</td></tr><tr><td style="text-align:left;"><code>progressDisplay?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./board#progressdisplay"><code>ProgressDisplay</code></a>, []></td><td style="text-align:left;">How the progress should be displayed on the node.</td></tr><tr><td style="text-align:left;"><code>shape</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./board#shape"><code>Shape</code></a>, []></td><td style="text-align:left;">The shape of the node.</td></tr><tr><td style="text-align:left;"><code>size</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>number</code>, []></td><td style="text-align:left;">The size of the node - diameter for circles, width and height for squares.</td></tr><tr><td style="text-align:left;"><code>style?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./feature#stylevalue"><code>StyleValue</code></a>, []></td><td style="text-align:left;">CSS to apply to this node.</td></tr><tr><td style="text-align:left;"><code>title</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>string</code>, []></td><td style="text-align:left;">The title to display for the node.</td></tr><tr><td style="text-align:left;"><code>titleColor?</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>string</code>, []></td><td style="text-align:left;">The color of the title text.</td></tr><tr><td style="text-align:left;"><code>update?</code></td><td style="text-align:left;">(<code>node</code>: <a href="./board#boardnode"><code>BoardNode</code></a>, <code>diff</code>: <code>number</code>) => <code>void</code></td><td style="text-align:left;">A function that is called for each node of this type every tick.</td></tr></tbody></table><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/boards/board.ts#L90" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:90</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="board" tabindex="-1">Board <a class="header-anchor" href="#board" aria-label="Permalink to "Board""></a></h3><p>Ƭ <strong>Board</strong><<code>T</code>>: <a href="./feature#replace"><code>Replace</code></a><<code>T</code> & <a href="./board#baseboard"><code>BaseBoard</code></a>, { <code>classes</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"classes"</code>]> ; <code>height</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"height"</code>]> ; <code>links</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"links"</code>], <code>Ref</code><<a href="./board#boardnodelink"><code>BoardNodeLink</code></a>[] | <code>null</code>>> ; <code>state</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"state"</code>], <a href="./../game/persistence#persistent"><code>Persistent</code></a><<a href="./board#boarddata"><code>BoardData</code></a>>> ; <code>style</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"style"</code>]> ; <code>types</code>: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <a href="./board#genericnodetype"><code>GenericNodeType</code></a>> ; <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>> ; <code>width</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"width"</code>]> }></p><p>An object that represents a feature that is a zoomable, pannable board with various nodes upon it.</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="./board#boardoptions"><code>BoardOptions</code></a></td></tr></tbody></table><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/boards/board.ts#L280" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:280</a></p><hr><h3 id="boarddata" tabindex="-1">BoardData <a class="header-anchor" href="#boarddata" aria-label="Permalink to "BoardData""></a></h3><p>Ƭ <strong>BoardData</strong>: <code>Object</code></p><p>The persistent data for a board.</p><h4 id="type-declaration" tabindex="-1">Type declaration <a class="header-anchor" href="#type-declaration" aria-label="Permalink to "Type declaration""></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;"><a href="./board#boardnode"><code>BoardNode</code></a>[]</td></tr><tr><td style="text-align:left;"><code>selectedAction</code></td><td style="text-align:left;"><code>string</code> | <code>null</code></td></tr><tr><td style="text-align:left;"><code>selectedNode</code></td><td style="text-align:left;"><code>number</code> | <code>null</code></td></tr></tbody></table><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/boards/board.ts#L81" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:81</a></p><hr><h3 id="boardnodeaction" tabindex="-1">BoardNodeAction <a class="header-anchor" href="#boardnodeaction" aria-label="Permalink to "BoardNodeAction""></a></h3><p>Ƭ <strong>BoardNodeAction</strong><<code>T</code>>: <a href="./feature#replace"><code>Replace</code></a><<code>T</code> & <a href="./board#baseboardnodeaction"><code>BaseBoardNodeAction</code></a>, { <code>confirmationLabel</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"confirmationLabel"</code>], <a href="./board#nodelabel"><code>NodeLabel</code></a>> ; <code>fillColor</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"fillColor"</code>]> ; <code>icon</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"icon"</code>]> ; <code>links</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"links"</code>]> ; <code>tooltip</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"tooltip"</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 an action that can be taken upon a node.</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="./board#boardnodeactionoptions"><code>BoardNodeActionOptions</code></a></td></tr></tbody></table><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/boards/board.ts#L206" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:206</a></p><hr><h3 id="genericboard" tabindex="-1">GenericBoard <a class="header-anchor" href="#genericboard" aria-label="Permalink to "GenericBoard""></a></h3><p>Ƭ <strong>GenericBoard</strong>: <a href="./feature#replace"><code>Replace</code></a><<a href="./board#board"><code>Board</code></a><<a href="./board#boardoptions"><code>BoardOptions</code></a>>, { <code>links</code>: <a href="./../util/computed#processedcomputable"><code>ProcessedComputable</code></a><<a href="./board#boardnodelink"><code>BoardNodeLink</code></a>[] | <code>null</code>> ; <code>state</code>: <a href="./../util/computed#processedcomputable"><code>ProcessedComputable</code></a><<a href="./board#boarddata"><code>BoardData</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="./board#board">Board</a> object.</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/boards/board.ts#L295" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:295</a></p><hr><h3 id="genericboardnodeaction" tabindex="-1">GenericBoardNodeAction <a class="header-anchor" href="#genericboardnodeaction" aria-label="Permalink to "GenericBoardNodeAction""></a></h3><p>Ƭ <strong>GenericBoardNodeAction</strong>: <a href="./feature#replace"><code>Replace</code></a><<a href="./board#boardnodeaction"><code>BoardNodeAction</code></a><<a href="./board#boardnodeactionoptions"><code>BoardNodeActionOptions</code></a>>, { <code>confirmationLabel</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./board#nodelabel"><code>NodeLabel</code></a>> ; <code>visibility</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./feature#visibility"><code>Visibility</code></a> | <code>boolean</code>> }></p><p>A type that matches any valid <a href="./board#boardnodeaction">BoardNodeAction</a> object.</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/boards/board.ts#L219" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:219</a></p><hr><h3 id="genericnodetype" tabindex="-1">GenericNodeType <a class="header-anchor" href="#genericnodetype" aria-label="Permalink to "GenericNodeType""></a></h3><p>Ƭ <strong>GenericNodeType</strong>: <a href="./feature#replace"><code>Replace</code></a><<a href="./board#nodetype"><code>NodeType</code></a><<a href="./board#nodetypeoptions"><code>NodeTypeOptions</code></a>>, { <code>actionDistance</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>number</code>> ; <code>canAccept</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>boolean</code>, [<a href="./board#boardnode"><code>BoardNode</code></a>]> ; <code>draggable</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>boolean</code>> ; <code>progressColor</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>string</code>> ; <code>progressDisplay</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./board#progressdisplay"><code>ProgressDisplay</code></a>> ; <code>shape</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<a href="./board#shape"><code>Shape</code></a>> ; <code>size</code>: <a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>number</code>> }></p><p>A type that matches any valid <a href="./board#nodetype">NodeType</a> object.</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/boards/board.ts#L163" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:163</a></p><hr><h3 id="nodecomputable" tabindex="-1">NodeComputable <a class="header-anchor" href="#nodecomputable" aria-label="Permalink to "NodeComputable""></a></h3><p>Ƭ <strong>NodeComputable</strong><<code>T</code>, <code>S</code>>: <a href="./../util/computed#computable"><code>Computable</code></a><<code>T</code>> | (<code>node</code>: <a href="./board#boardnode"><code>BoardNode</code></a>, ...<code>args</code>: <code>S</code>) => <code>T</code></p><p>A type representing a computable value for a node on the board. Used for node types to return different values based on the given node and the state of the board.</p><h4 id="type-parameters-2" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-2" 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;"><code>T</code></td></tr><tr><td style="text-align:left;"><code>S</code></td><td style="text-align:left;">extends <code>unknown</code>[] = []</td></tr></tbody></table><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/boards/board.ts#L36" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:36</a></p><hr><h3 id="nodetype" tabindex="-1">NodeType <a class="header-anchor" href="#nodetype" aria-label="Permalink to "NodeType""></a></h3><p>Ƭ <strong>NodeType</strong><<code>T</code>>: <a href="./feature#replace"><code>Replace</code></a><<code>T</code> & <a href="./board#basenodetype"><code>BaseNodeType</code></a>, { <code>actionDistance</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"actionDistance"</code>], <code>number</code>> ; <code>actions?</code>: <a href="./board#genericboardnodeaction"><code>GenericBoardNodeAction</code></a>[] ; <code>canAccept</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"canAccept"</code>], <code>false</code>> ; <code>classes</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"classes"</code>]> ; <code>draggable</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"draggable"</code>], <code>false</code>> ; <code>fillColor</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"fillColor"</code>]> ; <code>label</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"label"</code>]> ; <code>outlineColor</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"outlineColor"</code>]> ; <code>progress</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"progress"</code>]> ; <code>progressColor</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"progressColor"</code>], <code>"none"</code>> ; <code>progressDisplay</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"progressDisplay"</code>], <a href="./board#fill"><code>Fill</code></a>> ; <code>shape</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"shape"</code>], <a href="./board#circle"><code>Circle</code></a>> ; <code>size</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"size"</code>], <code>50</code>> ; <code>style</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"style"</code>]> ; <code>title</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"title"</code>]> ; <code>titleColor</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"titleColor"</code>]> }></p><p>An object that represents a type of node that can appear on a board. It will handle getting properties and callbacks for every node of that type.</p><h4 id="type-parameters-3" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-3" 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="./board#nodetypeoptions"><code>NodeTypeOptions</code></a></td></tr></tbody></table><h4 id="defined-in-18" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-18" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/boards/board.ts#L140" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:140</a></p><h2 id="variables" tabindex="-1">Variables <a class="header-anchor" href="#variables" aria-label="Permalink to "Variables""></a></h2><h3 id="boardtype" tabindex="-1">BoardType <a class="header-anchor" href="#boardtype" aria-label="Permalink to "BoardType""></a></h3><p>• <code>Const</code> <strong>BoardType</strong>: typeof <a href="./board#boardtype"><code>BoardType</code></a></p><p>A symbol used to identify <a href="./board#board">Board</a> features.</p><h4 id="defined-in-19" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-19" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/boards/board.ts#L31" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:31</a></p><h2 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to "Functions""></a></h2><h3 id="createboard" tabindex="-1">createBoard <a class="header-anchor" href="#createboard" aria-label="Permalink to "createBoard""></a></h3><p>▸ <strong>createBoard</strong><<code>T</code>>(<code>optionsFunc</code>): <a href="./board#board"><code>Board</code></a><<code>T</code>></p><p>Lazily creates a board with the given options.</p><h5 id="type-parameters-4" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-4" 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="./board#boardoptions"><code>BoardOptions</code></a></td></tr></tbody></table><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><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="./board#baseboard"><code>BaseBoard</code></a>, <a href="./board#genericboard"><code>GenericBoard</code></a>></td><td style="text-align:left;">Board options.</td></tr></tbody></table><h5 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to "Returns""></a></h5><p><a href="./board#board"><code>Board</code></a><<code>T</code>></p><h4 id="defined-in-20" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-20" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/boards/board.ts#L308" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:308</a></p><hr><h3 id="getnodeproperty" tabindex="-1">getNodeProperty <a class="header-anchor" href="#getnodeproperty" aria-label="Permalink to "getNodeProperty""></a></h3><p>▸ <strong>getNodeProperty</strong><<code>T</code>, <code>S</code>>(<code>property</code>, <code>node</code>, <code>...args</code>): <code>T</code></p><p>Gets the value of a property for a specified node.</p><h5 id="type-parameters-5" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-5" 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;"><code>T</code></td></tr><tr><td style="text-align:left;"><code>S</code></td><td style="text-align:left;">extends <code>unknown</code>[]</td></tr></tbody></table><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><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>property</code></td><td style="text-align:left;"><a href="./board#nodecomputable"><code>NodeComputable</code></a><<code>T</code>, <code>S</code>></td><td style="text-align:left;">The property to find the value of</td></tr><tr><td style="text-align:left;"><code>node</code></td><td style="text-align:left;"><a href="./board#boardnode"><code>BoardNode</code></a></td><td style="text-align:left;">The node to get the property of</td></tr><tr><td style="text-align:left;"><code>...args</code></td><td style="text-align:left;"><code>S</code></td><td style="text-align:left;">-</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>T</code></p><h4 id="defined-in-21" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-21" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/boards/board.ts#L607" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:607</a></p><hr><h3 id="getuniquenodeid" tabindex="-1">getUniqueNodeID <a class="header-anchor" href="#getuniquenodeid" aria-label="Permalink to "getUniqueNodeID""></a></h3><p>▸ <strong>getUniqueNodeID</strong>(<code>board</code>): <code>number</code></p><p>Utility to get an ID for a node that is guaranteed unique.</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;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>board</code></td><td style="text-align:left;"><a href="./board#genericboard"><code>GenericBoard</code></a></td><td style="text-align:left;">The board feature to generate an ID for</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>number</code></p><h4 id="defined-in-22" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-22" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/boards/board.ts#L621" target="_blank" rel="noreferrer">profectus/src/features/boards/board.ts:621</a></p><h2 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-label="Permalink to "Components""></a></h2><h3 id="board-component" tabindex="-1">Board Component <a class="header-anchor" href="#board-component" aria-label="Permalink to "Board 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>Ref</code></td></tr><tr><td style="text-align:left;"><code>types</code>*</td><td style="text-align:left;"><code>Record</code></td></tr><tr><td style="text-align:left;"><code>state</code>*</td><td style="text-align:left;"><code>Ref</code></td></tr><tr><td style="text-align:left;"><code>visibility</code>*</td><td style="text-align:left;"><code>ProcessedComputable</code></td></tr><tr><td style="text-align:left;"><code>width</code></td><td style="text-align:left;"><code>ProcessedComputable</code></td></tr><tr><td style="text-align:left;"><code>height</code></td><td style="text-align:left;"><code>ProcessedComputable</code></td></tr><tr><td style="text-align:left;"><code>style</code></td><td style="text-align:left;"><code>ProcessedComputable</code></td></tr><tr><td style="text-align:left;"><code>classes</code></td><td style="text-align:left;"><code>ProcessedComputable</code></td></tr><tr><td style="text-align:left;"><code>links</code>*</td><td style="text-align:left;"><code>Ref</code></td></tr><tr><td style="text-align:left;"><code>selectedAction</code>*</td><td style="text-align:left;"><code>Ref</code></td></tr><tr><td style="text-align:left;"><code>selectedNode</code>*</td><td style="text-align:left;"><code>Ref</code></td></tr><tr><td style="text-align:left;"><code>draggingNode</code>*</td><td style="text-align:left;"><code>Ref</code></td></tr><tr><td style="text-align:left;"><code>receivingNode</code>*</td><td style="text-align:left;"><code>Ref</code></td></tr><tr><td style="text-align:left;"><code>mousePosition</code>*</td><td style="text-align:left;"><code>Ref</code></td></tr><tr><td style="text-align:left;"><code>setReceivingNode</code>*</td><td style="text-align:left;"><code>TSFunctionType</code></td></tr><tr><td style="text-align:left;"><code>setDraggingNode</code>*</td><td style="text-align:left;"><code>TSFunctionType</code></td></tr></tbody></table><h3 id="boardlink-component" tabindex="-1">BoardLink Component <a class="header-anchor" href="#boardlink-component" aria-label="Permalink to "BoardLink 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>link</code>*</td><td style="text-align:left;"><code>BoardNodeLink</code></td></tr></tbody></table><h3 id="boardnodeaction-component" tabindex="-1">BoardNodeAction Component <a class="header-anchor" href="#boardnodeaction-component" aria-label="Permalink to "BoardNodeAction Component""></a></h3><h4 id="props-2" tabindex="-1">Props <a class="header-anchor" href="#props-2" 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>node</code>*</td><td style="text-align:left;"><code>BoardNode</code></td></tr><tr><td style="text-align:left;"><code>nodeType</code>*</td><td style="text-align:left;"><code>GenericNodeType</code></td></tr><tr><td style="text-align:left;"><code>actions</code></td><td style="text-align:left;"><code>GenericBoardNodeAction[]</code></td></tr><tr><td style="text-align:left;"><code>isSelected</code>*</td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;"><code>selectedAction</code>*</td><td style="text-align:left;"><code>GenericBoardNodeAction | null</code></td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to "Events""></a></h4><table><thead><tr><th style="text-align:left;">Name</th></tr></thead><tbody><tr><td style="text-align:left;"><code>clickAction</code></td></tr></tbody></table><h3 id="boardnode-component" tabindex="-1">BoardNode Component <a class="header-anchor" href="#boardnode-component" aria-label="Permalink to "BoardNode Component""></a></h3><h4 id="props-3" tabindex="-1">Props <a class="header-anchor" href="#props-3" 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>node</code>*</td><td style="text-align:left;"><code>BoardNode</code></td></tr><tr><td style="text-align:left;"><code>nodeType</code>*</td><td style="text-align:left;"><code>GenericNodeType</code></td></tr><tr><td style="text-align:left;"><code>dragging</code>*</td><td style="text-align:left;"><code>BoardNode | null</code></td></tr><tr><td style="text-align:left;"><code>dragged</code></td><td style="text-align:left;"><code>{<br> x: number;<br> y: number;<br>}</code></td></tr><tr><td style="text-align:left;"><code>hasDragged</code></td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;"><code>receivingNode</code></td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;"><code>selectedNode</code>*</td><td style="text-align:left;"><code>BoardNode | null</code></td></tr><tr><td style="text-align:left;"><code>selectedAction</code>*</td><td style="text-align:left;"><code>GenericBoardNodeAction | null</code></td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="header-anchor" href="#events-1" aria-label="Permalink to "Events""></a></h4><table><thead><tr><th style="text-align:left;">Name</th></tr></thead><tbody><tr><td style="text-align:left;"><code>mouseDown</code></td></tr><tr><td style="text-align:left;"><code>endDragging</code></td></tr><tr><td style="text-align:left;"><code>clickAction</code></td></tr></tbody></table>',193),r=[a];function c(n,i,s,f,g,y){return d(),e("div",null,r)}const b=t(l,[["render",c]]);export{x as __pageData,b as default};
|