mwg API
    Preparing search index...

    Class DropdownView

    The widget for a Dropdown model: a button showing the current choice that opens a column of buttons beneath it, the highlighted row marked with Button.setSelected. Picking a row selects it, closes the list and fires the model's onChange; clicking the closed button again closes it.

    The list sits on an opaque backdrop, shows at most maxVisibleRows rows and scrolls (wheel, touch drag, keys, scrollbar) beyond that, opening with the chosen row in view. autoWidth measures the labels so none is cut off (maxWidth caps that widening), and resize(width) re-lays the button and list in place. Opening scrolls to the model's current selection: model.setHighlight(i); model.confirm() is a whole programmatic pick, after which the next opening shows that row. The keyboard goes through handleKey (arrows, Page, Home, End, Enter, Escape) and a click elsewhere through handleOutsideClick, which the owning scene forwards from its own input, since the view does not own the stage.

    The list is drawn in this container's own space below the button, so a game places the view where the closed button should sit and keeps it above its siblings when it is open.

    import { DropdownView } from '@datamoc/mwg/two-d/ui';

    const level = new DropdownView({
    	width: 180,
    	maxVisibleRows: 6,
    	options: Array.from({ length: 30 }, (_, i) => ({ label: `Level ${i + 1}` })),
    });
    level.model.onChange.add(({ index }) => console.log('chose', index));
    level.model.open();
    level.refresh();
    level.handleKey('PageDown'); // the highlight moves a page, the list scrolls to it

    Hierarchy

    • Container
      • DropdownView
    Index
    constructor
    model
    scroller viewWidth visibleRows
    destroy fitBelow handleKey handleOutsideClick measureLabel refresh resize
    model: Dropdown
    • get viewWidth(): number

      the view's current width: width, or what the longest label needed with autoWidth

      Returns number

    • get visibleRows(): number

      how many rows the open list shows at once (fewer than maxVisibleRows for a short list)

      Returns number

    • Removes all internal references and listeners as well as removes children from the display list. Do not use a Container after calling destroy.

      Parameters

      • Optionaloptions: DestroyOptions

        Options parameter. A boolean will act as if all options have been set to that value

      Returns void

      container.destroy();
      container.destroy(true);
      container.destroy({ children: true });
      container.destroy({ children: true, texture: true, textureSource: true });

    • lets a list that would run off the bottom of a height-tall viewport show fewer rows

      Parameters

      • globalY: number
      • viewportHeight: number

      Returns number

    • A key for the view: closed, Enter/Space/ArrowDown open it; open, the arrows, Page and Home/End move the highlight (the list scrolls to keep it in view), Enter picks it and Escape closes without changing the choice.

      Parameters

      • key: string

      Returns boolean

      true when the key was used, so the caller does not also act on it

    • A press at a screen position: closes the open list, keeping the old choice, when it landed outside the button and the list.

      Parameters

      • globalX: number
      • globalY: number

      Returns boolean

      true when it closed the list

    • how wide text is as a row's caption, plus the button's own padding

      Parameters

      • text: string

      Returns number

    • redraws the closed label and the open list from the model; call after changing the model directly

      Returns void

    • Sets the view's width (capped at maxWidth when one was given) and redraws the closed button and, when open, the list at the new width, so a layout change resizes the widget in place instead of rebuilding it.

      Parameters

      • width: number

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods