Class WidthSelect

A dropdown component for selecting line widths. It displays a list of predefined widths and allows the user to select one. The selected width is reflected in the trigger button and can be accessed via the value property. The component emits a 'widthchange' event when the selected width changes.

Index

Constructors

constructor

new WidthSelect(target: HTMLElement, config?: WidthSelectConfig): WidthSelect
Creates a WidthSelect component inside the given element.
Parameters
- target: HTMLElement
  The host element that will contain the width picker.
- config: WidthSelectConfig = {}
  Optional display and behaviour configuration.
Returns WidthSelect
- Defined in src/editor/inputs/width.select.ts:128

Properties

`Protected`host

host: HTMLElement

`Protected`config

config: Required<Omit<WidthSelectConfig, "widths">> & { widths: number[] }

`Protected`selected

selected: number

`Protected`trigger

trigger: HTMLButtonElement

`Protected`triggerSwatch

triggerSwatch: HTMLDivElement

`Protected` `Optional`triggerLabel

triggerLabel?: HTMLSpanElement

`Protected`menu

menu: HTMLDivElement

Accessors

value

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

Returns number
- Defined in src/editor/inputs/width.select.ts:189
set value(width: number): void
Sets the currently selected width value.
Parameters
- width: number
Returns void
- Defined in src/editor/inputs/width.select.ts:196

Methods

destroy

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

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

setOptions

setOptions(widths: number[], selectedWidth?: number): void
Sets the available width options and optionally selects a width.
Parameters
- widths: number[]
  An array of widths.
- OptionalselectedWidth: number
  The width to select. Defaults to the first width in the array.
Returns void
- Defined in src/editor/inputs/width.select.ts:205

`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/width.select.ts:215

`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/width.select.ts:227

`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/width.select.ts:238

`Protected`rebuildOptions

rebuildOptions(widths: number[]): void
Replaces the current option list with a new set of widths.
Parameters
- widths: number[]
  The pixel-width values to render.
Returns void
- Defined in src/editor/inputs/width.select.ts:254

`Protected`buildOption

buildOption(width: number): HTMLButtonElement
Builds a single option button containing an SVG stroke-width preview.
Parameters
- width: number
  The pixel width value for this option.
Returns HTMLButtonElement
The constructed option button element.
- Defined in src/editor/inputs/width.select.ts:268

`Protected`createWidthSvg

createWidthSvg(width: number): SVGElement
Creates an SVG element visualising a horizontal line at the given stroke width.
Parameters
- width: number
  The stroke width in pixels.
Returns SVGElement
The SVG element.
- Defined in src/editor/inputs/width.select.ts:295

`Protected`selectWidth

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

`Protected`syncTrigger

syncTrigger(): void
Updates the trigger button's swatch and optional label to reflect the current width.

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

`Protected`syncSelectedOption

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

Returns void
- Defined in src/editor/inputs/width.select.ts:344

`Protected`openMenu

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

Returns void
- Defined in src/editor/inputs/width.select.ts:356

`Protected`closeMenu

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

Returns void
- Defined in src/editor/inputs/width.select.ts:364

Class WidthSelect

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns WidthSelect

Properties

Protectedhost

Protectedconfig

Protectedselected

Protectedtrigger

ProtectedtriggerSwatch

Protected OptionaltriggerLabel

Protectedmenu

Accessors

value

Returns number

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

ProtectedcreateWidthSvg

Parameters

Returns SVGElement

ProtectedselectWidth

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`createWidthSvg

`Protected`selectWidth

`Protected`syncTrigger

`Protected`syncSelectedOption

`Protected`openMenu

`Protected`closeMenu