module UtilityWheel

type SectionCallback: (e: PointerEvent) => void

The function that's called when a section is invoked.

type Section<T>: Record<SectionSide, T>

No description.

type SectionSide: "top" | "right" | "bottom" | "left"

Identifier for all of the four sections.

class UtilityWheel

Simple drop-in, configurable utility wheel for front-end use.

UtilityWheel(
elementTarget: HTMLElement,
_args: Partial<Config> = {}
): UtilityWheel

Parameters

  • elementTarget: The DOM element that the utility wheel should be appended into. Can also replace it (See Config.replace).

sectionsTarget: Section<HTMLElement>

List of the DOM elements that serve as the mouse targets of the utility wheel's four sections.

sectionsContent: Section<HTMLElement>

List of the DOM elements that hold the content of the utility wheel's four sections.

element: HTMLElement

The utility wheel DOM element.

setSection(
side: SectionSide,
element: HTMLElement,
callback: SectionCallback
): void

Set a section's DOM content and callback.

Parameters

  • side: Which side to set.

  • element: The DOM content that will be added into the specific .uw-section-content.

  • callback: Is called when the section is invoked.

setSectionContent(
side: SectionSide,
element: HTMLElement
): void

Set only the content of one of the four sections.

Parameters

  • side: Which side to set.

  • element: The HTML element that should be added into the section.

setSectionCallback(
side: SectionSide,
callback: Function
): void

Set only the callback of one of the four sections.

Parameters

  • side: Which side to set.

  • callback: The callback that is called when the section is invoked.

enable(): void

Enable the DOM events needed for mouse invokation. Is called automatically in the constructor.

disable(): void

Remove the DOM events needed for mouse invokation.

invoke(x: number, y: number): void

Manually invoke the utility wheel's visibility at the given coordinates. Invokes the 'invoke' event.

hide(): void

Manually hide the utility wheel from the DOM. Invokes the 'hide' event.

addEvent<T extends keyof Events>(
type: T,
callback: Events[T]
): number

Add a custom event listener from the available event types. Returns a unique identifier that can be passed to removeEvent.

Returns An identifier that can be used to remove the event in removeEvent.

See also Events

removeEvent<T extends keyof Events>(
key: number | () => void | () => void | (e: PointerEvent) => void | T
): void

Remove an event previously added with addEvent.

Takes one of three possible arguments:

  • An event identifier returned by addEvent.
  • An event name (removes everything under the event name, e.g. 'pointerUp').
  • A callback (removes every event that has the callback attached).

Parameters

  • key: Either an event ID, an event name or a callback.

invokeEvent<T extends keyof Events>(
type: T,
...args: Parameters<Events[T]>
): void

Manually invoke an event from the available event types with matching arguments.

See also Events

_preventContextMenu(e: MouseEvent): void

'context' event handler to prevent context menu popup on click.

Internal

_pointerDown(e: PointerEvent): void

Internal

_pointerUp(e: PointerEvent): void

Internal

_keyDown(e: KeyboardEvent): void

Internal

_sectionUp(side: SectionSide, e: PointerEvent): void

Internal

static createUtilityWheelElement(
element?: HTMLElement
): {
element: HTMLElement,
targets: Section<HTMLElement>,
contents: Section<HTMLElement>,
indicator: HTMLDivElement
}

Create a UtilityWheel DOM structure and return all relevant elements in various forms.

interface Config

enable: boolean

Choose whether the utility wheel should initially be enabled (the default). This is useful when initializing a static utility wheel without function.

Default 

true
replace: boolean

Choose whether the utility wheel DOM target (first constructor argument) should be replaced with the utility wheel instead of acting as its parent.

Default 

false
eventTarget: EventTarget

The target the pointerdown event, that will invoke the utility wheel, will be registered onto.

See also UtilityWheel.enable and UtilityWheel.disable for ways to control the event invokation.

Default 

window
invokeButton: number

The mouse button that invokes the utility wheel on click (default: right mouse button).

See also UtilityWheel.invoke

Default 

2

interface Events

Available event types along with their callback outline.

See also UtilityWheel.addEvent

invoke: () => void

No description.

hide: () => void

No description.

pointerUp: (e: PointerEvent) => void

No description.

module UtilityWheelUIConfig

class UtilityWheelUIConfig extends UtilityWheel

UtilityWheel UI configuration helper.

This library will instantiate a static utility wheel ("configuration wheel"), inside the given container. In the front-end, the given actions can then be dragged and dropped onto the configuration wheel to automatically reassign the underlying real utility wheel with the action in question.

The DOM elements of the supplied actions will be given the relevant drag and drop events. However, they must still be appended to the DOM manually wherever fits your purposes. Everything else is handled by this class.

Several custom events may be registered using the UtilityWheel event system which are invoked at different steps during the drag and drop process. See UIEvents for all available events.

Additionally, several classes are added to the actions and configuration wheel for easy access to styling. There are also some default styles available in the given CSS file.

UtilityWheelUIConfig(
elementTarget: HTMLElement,
config: Config
): UtilityWheelUIConfig

No description.

sectionsTarget: Section<HTMLElement>

List of the DOM elements that serve as the mouse targets of the utility wheel's four sections.

sectionsContent: Section<HTMLElement>

List of the DOM elements that hold the content of the utility wheel's four sections.

element: HTMLElement

The utility wheel DOM element.

configWheel: UtilityWheel

The static utility wheel instance used for the configuration.

actionList: ActionData[]

See also Config.actionList

setSectionContent(
side: SectionSide,
element: HTMLElement
): void

Set only the content of one of the four sections.

Parameters

  • side: Which side to set.

  • element: The HTML element that should be added into the section.

setSectionCallback(
side: SectionSide,
callback: Function
): void

Set only the callback of one of the four sections.

Parameters

  • side: Which side to set.

  • callback: The callback that is called when the section is invoked.

enable(): void

Enable the DOM events needed for mouse invokation. Is called automatically in the constructor.

disable(): void

Remove the DOM events needed for mouse invokation.

invoke(x: number, y: number): void

Manually invoke the utility wheel's visibility at the given coordinates. Invokes the 'invoke' event.

hide(): void

Manually hide the utility wheel from the DOM. Invokes the 'hide' event.

_preventContextMenu(e: MouseEvent): void

'context' event handler to prevent context menu popup on click.

Internal

_pointerDown(e: PointerEvent): void

Internal

_pointerUp(e: PointerEvent): void

Internal

_keyDown(e: KeyboardEvent): void

Internal

_sectionUp(side: SectionSide, e: PointerEvent): void

Internal

setSection(
side: SectionSide,
element: HTMLElement,
callback: SectionCallback
): void

Set a section's DOM content and callback.

Parameters

  • side: Which side to set.

  • element: The DOM content that will be added into the specific .uw-section-content.

  • callback: Is called when the section is invoked.

addEvent<T extends keyof UIEvents>(
type: T,
callback: UIEvents[T]
): number

Add a custom event listener from the available event types. Returns a unique identifier that can be passed to removeEvent.

Returns An identifier that can be used to remove the event in removeEvent.

See also Events

removeEvent<T extends keyof UIEvents>(
key: number | () => void | () => void | (e: PointerEvent) => void | T
): void

Remove an event previously added with addEvent.

Takes one of three possible arguments:

  • An event identifier returned by addEvent.
  • An event name (removes everything under the event name, e.g. 'pointerUp').
  • A callback (removes every event that has the callback attached).

Parameters

  • key: Either an event ID, an event name or a callback.

invokeEvent<T extends keyof UIEvents>(
type: T,
...args: Parameters<UIEvents[T]>
): void

Manually invoke an event from the available event types with matching arguments.

See also Events

static createUtilityWheelElement(
element?: HTMLElement
): {
element: HTMLElement,
targets: Section<HTMLElement>,
contents: Section<HTMLElement>,
indicator: HTMLDivElement
}

Create a UtilityWheel DOM structure and return all relevant elements in various forms.

interface UIEvents implements Events

Available event types along with their callback outline.

See also UtilityWheel.addEvent

invoke: () => void

No description.

hide: () => void

No description.

pointerUp: (e: PointerEvent) => void

No description.

dragStart: (e: {
evt: DragEvent,
actionElem: HTMLElement,
actionIndex: number
}) => void

No description.

dragEnd: (e: {
evt: DragEvent,
actionElem: HTMLElement,
actionIndex: number
}) => void

No description.

dragOver: (args: {
evt: DragEvent,
contentElem: HTMLElement,
targetElem: HTMLElement
}) => void

No description.

dragEnter: (args: {
evt: DragEvent,
contentElem: HTMLElement,
targetElem: HTMLElement
}) => void

No description.

dragLeave: (args: {
evt: DragEvent,
contentElem: HTMLElement,
targetElem: HTMLElement
}) => void

No description.

drop: (args: {
evt: DragEvent,
contentElem: HTMLElement,
targetElem: HTMLElement,
sectionSide: SectionSide,
actionElem: HTMLElement,
actionIndex: number
}) => void

No description.

interface Config extends Partial<Config>

enable?: boolean

Choose whether the utility wheel should initially be enabled (the default). This is useful when initializing a static utility wheel without function.

Default 

true
replace?: boolean

Choose whether the utility wheel DOM target (first constructor argument) should be replaced with the utility wheel instead of acting as its parent.

Default 

false
eventTarget?: EventTarget

The target the pointerdown event, that will invoke the utility wheel, will be registered onto.

See also UtilityWheel.enable and UtilityWheel.disable for ways to control the event invokation.

Default 

window
invokeButton?: number

The mouse button that invokes the utility wheel on click (default: right mouse button).

See also UtilityWheel.invoke

Default 

2
actionList: ActionData[]

List of all available actions that can be assigned to the current utility wheel, each containing its DOM element and assigned callback.

Remarks

All relevant drag and drop events are added to the specified actions' elements. It is your responsibility to append them somewhere to the DOM.

For this purpose, the specified elements have to be appended to the DOM as-is, since they carry event information. Do NOT clone them first.

configContainer: HTMLElement

The DOM element that the configuration wheel (UtilityWheelUIConfig.configWheel, which will be used as a drop target) will be appended into.