Mixins / foldkit-mixins-ui

AngleSlider

namespace · packages/mixins-ui/src/angleSlider.ts:1

export * as AngleSlider from './angleSlider.js'

In the guides

Members

AngleSlider.AngleMark

interface · packages/mixins-ui/src/angleSlider.ts:92

interface AngleMark {
  readonly value: number
  readonly label?: string | undefined
}

A value marked on the dial, with words shown beside it.

AngleSlider.AngleSliderLayout

interface · packages/mixins-ui/src/angleSlider.ts:98

interface AngleSliderLayout {
  readonly step?: number | undefined
  readonly largeStep?: number | undefined
  readonly marks?: ReadonlyArray<AngleMark> | undefined
  readonly restrictToMarks?: boolean | undefined
}

What update and the view agree on: the steps a value takes and the marks.

AngleSlider.AngleSliderSlots

const · packages/mixins-ui/src/angleSlider.ts:32

const AngleSliderSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly label: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly control: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly needle: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly thumb: Slot.UnnamedSlot<Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"keydown">], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-label">, Attr.AttrToken<"aria-disabled">, Attr.AttrToken<"aria-invalid">], readonly Slot.RequirementName[], boolean>; readonly markers: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability. …;

A dial after Zag's angle slider: a value in degrees, 0 at the top and growing clockwise, chosen by dragging a thumb around the control or by the keys. The thumb is the APG's slider (role="slider", the angle in aria-valuetext); a dial has no ends, so the keys go round: Right and Up step clockwise, Left and Down back, Page Up and Page Down (or Shift with an arrow) take the largeStep, Home goes to 0 and End to the last value before a full turn. The dial is a drawing, so its keys and its turn are the same in either direction of text.

The angle and whether it is being dragged are a small Model of this module's, which the application keeps and folds with update(layout), the same step and marks the view draws. A key reaches update as the key pressed, not the value the last frame drew, so keys faster than a frame each step from the value before them. A press or drag on the control, a Mount, says the angle of the pointer from its center.

The root carries --fk-angle (the value, in deg), which the recipe turns the needle and places the thumb by; each marker carries its own as --fk-angle-marker, and data-state: at, under or over the value.

AngleSlider.AngleSliderView

interface · packages/mixins-ui/src/angleSlider.ts:213

interface AngleSliderView<Message> extends AngleSliderLayout {
  readonly model: Model
  readonly onMessage: (message: typeof Message.Type) => NoInfer<Message>
  readonly label: string
  readonly format?: ((value: number) => string) | undefined
  readonly valueText?: ((value: number) => string) | undefined
  readonly showValue?: boolean | undefined
  readonly name?: string | undefined
  readonly disabled?: boolean | undefined
  readonly readOnly?: boolean | undefined
  readonly invalid?: boolean | undefined
  readonly style?: NamedStyle<typeof AngleSliderSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

AngleSlider.init

function · packages/mixins-ui/src/angleSlider.ts:70

function init(options: {
  readonly id: string
  readonly value?: number | undefined
}): Model

A dial at value degrees (default 0), taken round into one turn.

AngleSlider.Message

const · packages/mixins-ui/src/angleSlider.ts:79

const Message: MessageUnion<{
  readonly Pointed: { readonly angle: Schema.Number }
  readonly Released: {}
  readonly PressedKey: {
    readonly key: Schema.String
    readonly shift: Schema.Boolean
  }
  readonly Set: { readonly value: Schema.Number }
}>

AngleSlider.Model

const · packages/mixins-ui/src/angleSlider.ts:53

const Model: Schema.Struct<{
  readonly id: Schema.String
  readonly value: Schema.Number
  readonly dragging: Schema.Boolean
}>

AngleSlider.update

function · packages/mixins-ui/src/angleSlider.ts:135

function update(
  layout?: AngleSliderLayout,
): (model: Model, message: Message) => Return<Model, Message>

The update for layout, the steps and marks the view draws; the same Model when nothing changes. Built once per layout, outside the view.

AngleSlider.view

function · packages/mixins-ui/src/angleSlider.ts:244

function view<Outer>(
  options: AngleSliderView<Outer>,
  h: HtmlBuilder<Outer>,
): Html