@samatawy/diagrams
    Preparing search index...

    Class ImageSelect

    A toolbar-ready dropdown control for selecting, browsing, and clearing image assets.

    Dispatches an 'imagechange' CustomEvent whose detail is the selected asset id string, or an empty string when the image is cleared.

    Example:

    const pick = new ImageSelect(host, { assetStore: diagram.assetStore });
    host.addEventListener('imagechange', e => node.image_id = e.detail || undefined);
    Index

    Constructors

    Properties

    host: HTMLElement
    config: Required<Omit<ImageSelectConfig, "assetStore">>
    assetStore?: IImageAssetStore
    trigger: HTMLButtonElement
    triggerThumb: HTMLImageElement
    triggerLabel: HTMLSpanElement
    menu: HTMLDivElement
    fileInput: HTMLInputElement
    selected: string = ''

    Accessors

    Methods

    • Puts the trigger into a mixed-value state showing "Multiple" in muted italic. Pass false to clear the mixed state and restore normal display.

      Parameters

      • mixed: boolean

      Returns void

    • Updates the selection, syncs the trigger, and optionally emits 'imagechange'.

      Parameters

      • id: string
      • emit: boolean = true

      Returns void

    • Handles a local file being picked via the file input. Reads the file as a data URL, registers it in the store, then selects it.

      Returns void

    • Updates the trigger button to reflect the current selection: shows a thumbnail when an image is selected, otherwise shows the placeholder label.

      Returns void

    • Returns a short human-readable label for an asset id. For data URIs it returns the id itself; for URLs it returns the URL.

      Parameters

      • id: string

      Returns string | undefined