Class ArrowDirectionSelect

A dropdown component for selecting arrow direction presets. It displays predefined directions and reflects the selected direction in the trigger button. The selected direction is exposed through the value property. The component emits an arrowchange event when the direction changes.

Index

Constructors

constructor

new ArrowDirectionSelect(
target: HTMLElement,
config?: ArrowDirectionSelectConfig,
): ArrowDirectionSelect
Creates an ArrowDirectionSelect component inside the given element.
Parameters
- target: HTMLElement
  The host element that will contain the arrow picker.
- config: ArrowDirectionSelectConfig = {}
  Optional display and behaviour configuration.
Returns ArrowDirectionSelect
- Defined in src/editor/inputs/arrow.direction.select.ts:96

Properties

`Protected`host

host: HTMLElement

`Protected`config

config: Required<Omit<ArrowDirectionSelectConfig, "arrows">> & {
arrows: ArrowDirection[];
}

`Protected`selected

selected: ArrowDirection

`Protected`trigger

trigger: HTMLButtonElement

`Protected`triggerSwatch

triggerSwatch: HTMLDivElement

`Protected` `Optional`triggerLabel

triggerLabel?: HTMLSpanElement

`Protected`menu

menu: HTMLDivElement

Accessors

value

get value(): string
Gets the currently selected width value.

Returns string
- Defined in src/editor/inputs/arrow.direction.select.ts:151
set value(arrow: ArrowDirection): void
Sets the currently selected width value.
Parameters
- arrow: ArrowDirection
Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:158

Methods

destroy

destroy(): void
Releases DOM/event resources owned by the control.

Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:139

setOptions

setOptions(arrows: ArrowDirection[], selectedArrow?: ArrowDirection): void
Sets the available arrow options and optionally selects one.
Parameters
- arrows: ArrowDirection[]
  An array of arrow directions.
- OptionalselectedArrow: ArrowDirection
  The arrow direction to select. Defaults to the first option.
Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:167

`Protected` `Readonly`onTriggerClick

onTriggerClick(): void
Handles the click event on the trigger button. Toggles the open/closed state of the dropdown menu.

Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:177

`Protected` `Readonly`onDocumentClick

onDocumentClick(event: Event): void
Handles the click event on the document. Closes the dropdown menu if the click is outside the host element.
Parameters
- event: Event
  The click event.
Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:189

`Protected` `Readonly`onOptionClick

onOptionClick(event: Event): void
Handles the click event on an option. Selects the clicked width and closes the dropdown menu.
Parameters
- event: Event
  The click event.
Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:200

`Protected`rebuildOptions

rebuildOptions(arrows: ArrowDirection[]): void
Replaces the current option list with a new set of arrow directions.
Parameters
- arrows: ArrowDirection[]
  The arrow directions to render.
Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:218

`Protected`buildOption

buildOption(arrow: ArrowDirection): HTMLButtonElement
Builds a single option button containing an SVG arrow preview.
Parameters
- arrow: ArrowDirection
  The arrow direction value for this option.
Returns HTMLButtonElement
The constructed option button element.
- Defined in src/editor/inputs/arrow.direction.select.ts:232

`Protected`createArrowSvg

createArrowSvg(arrow: ArrowDirection): SVGElement
Creates an SVG element visualising the given arrow direction with an optional arrowhead.
Parameters
- arrow: ArrowDirection
  The arrow direction to draw.
Returns SVGElement
The SVG element.
- Defined in src/editor/inputs/arrow.direction.select.ts:252

`Protected`createArrowHead

createArrowHead(
    x: number,
    y: number,
    direction: "forward" | "backward",
): SVGPolygonElement
Creates an SVG polygon representing a single arrowhead at the given position.
Parameters
- x: number
  Horizontal position of the arrowhead tip.
- y: number
  Vertical position of the arrowhead tip.
- direction: "forward" | "backward"
  'forward' points right; 'backward' points left.
Returns SVGPolygonElement
The SVG polygon element.
- Defined in src/editor/inputs/arrow.direction.select.ts:290

`Protected`normalizeArrow

normalizeArrow(arrow: string | undefined): ArrowDirection
Normalises any value into a valid ArrowDirection, falling back to 'none'.
Parameters
- arrow: string | undefined
  Raw value to normalise.
Returns ArrowDirection
A valid ArrowDirection string.
- Defined in src/editor/inputs/arrow.direction.select.ts:306

`Protected`selectArrow

selectArrow(arrow: ArrowDirection, emit?: boolean): void
Updates the internal selection state, syncs the trigger and option list, and optionally emits 'arrowchange'.
Parameters
- arrow: ArrowDirection
  The new arrow direction to select.
- emit: boolean = true
  Whether to dispatch the change event. Defaults to true.
Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:318

`Protected`syncTrigger

syncTrigger(): void
Updates the trigger button's swatch to show the current arrow direction.

Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:333

`Protected`syncSelectedOption

syncSelectedOption(): void
Toggles the selected CSS class and aria-selected attribute on all arrow option buttons.

Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:341

`Protected`openMenu

openMenu(): void
Adds the open CSS class and updates aria-expanded on the trigger button.

Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:353

`Protected`closeMenu

closeMenu(): void
Removes the open CSS class and updates aria-expanded on the trigger button.

Returns void
- Defined in src/editor/inputs/arrow.direction.select.ts:361

Class ArrowDirectionSelect

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns ArrowDirectionSelect

Properties

Protectedhost

Protectedconfig

Protectedselected

Protectedtrigger

ProtectedtriggerSwatch

Protected OptionaltriggerLabel

Protectedmenu

Accessors

value

Returns string

Parameters

Returns void

Methods

destroy

Returns void

setOptions

Parameters

Returns void

Protected ReadonlyonTriggerClick

Returns void

Protected ReadonlyonDocumentClick

Parameters

Returns void

Protected ReadonlyonOptionClick

Parameters

Returns void

ProtectedrebuildOptions

Parameters

Returns void

ProtectedbuildOption

Parameters

Returns HTMLButtonElement

ProtectedcreateArrowSvg

Parameters

Returns SVGElement

ProtectedcreateArrowHead

Parameters

Returns SVGPolygonElement

ProtectednormalizeArrow

Parameters

Returns ArrowDirection

ProtectedselectArrow

Parameters

Returns void

ProtectedsyncTrigger

Returns void

ProtectedsyncSelectedOption

Returns void

ProtectedopenMenu

Returns void

ProtectedcloseMenu

Returns void

Settings

On This Page

`Protected`host

`Protected`config

`Protected`selected

`Protected`trigger

`Protected`triggerSwatch

`Protected` `Optional`triggerLabel

`Protected`menu

`Protected` `Readonly`onTriggerClick

`Protected` `Readonly`onDocumentClick

`Protected` `Readonly`onOptionClick

`Protected`rebuildOptions

`Protected`buildOption

`Protected`createArrowSvg

`Protected`createArrowHead

`Protected`normalizeArrow

`Protected`selectArrow

`Protected`syncTrigger

`Protected`syncSelectedOption

`Protected`openMenu

`Protected`closeMenu