UI Component Reference

[BAboutDialog]{#BAboutDialog data-4search="ui/b/aboutdialog.js:BAboutDialog;section"}

The \<b-aboutdialog> element is a modal [b-dialog] that displays version information about Anklang.

Events:

close : A close event is emitted once the "Close" button activated.

AppClass class

class [AppClass]{#AppClass data-4search="ui/b/app.js:AppClass;class"}

: …

[**`show_notice`**]{#show_notice data-4search="ui/b/app.js:show_notice;func"} `(`*text, timeout*`)`
:   Show a notification notice, with adequate default timeout

[BPushButton]{#BPushButton data-4search="ui/b/basics.js:BPushButton;section"}

The \<push-button> element is a wrapper for an ordinary HTMLElement. It is styled like a \<button> and can behave like it, but cannot become a focus element.

[BHFlex]{#BHFlex data-4search="ui/b/basics.js:BHFlex;section"}

The \<h-flex> element is a horizontal flex container element. See also the Flex visual cheatsheet.

[BVFlex]{#BVFlex data-4search="ui/b/basics.js:BVFlex;section"}

The \<v-flex> element is a vertical flex container element. See also the Flex visual cheatsheet.

[BGrid]{#BGrid data-4search="ui/b/basics.js:BGrid;section"}

The \<c-grid> element is a simple grid container element. See also Grid Container and the Grid visual cheatsheet.

[BButtonBar]{#BButtonBar data-4search="ui/b/buttonbar.js:BButtonBar;section"}

The \<b-buttonbar> element is a container for tight packing of buttons.

Slots:

slot : All contents passed into this element will be packed tightly and styled as buttons.

[BChoiceInput]{#BChoiceInput data-4search="ui/b/choiceinput.js:BChoiceInput;section"}

The \<b-choiceinput> element provides a choice popup to choose from a set of options. It supports the Vue v-model protocol by emitting an input event on value changes and accepting inputs via the value prop.

Props:

value : The choice value to be displayed.

choices : List of choices: [ { icon, label, blurb }... ]

title : Optional title for the popup menu.

label : A label used to extend the tip attached to the choice component.

small : Reduce padding and use small layout.

prop : If label is unspecified, it can be fetched from prop->label instead.

Events:

valuechange : Event emitted whenever the value changes, which is provided as event.target.value.

BClipList class

class [BClipList]{#BClipList data-4search="ui/b/cliplist.js:BClipList;class"} : The \<b-cliplist> element container holds BClipView elements.

[BClipView]{#BClipView data-4search="ui/b/clipview.js:BClipView;section"}

The \<b-clipview> element displays a small view of a MIDI clip.

[BContextMenu]{#BContextMenu data-4search="ui/b/contextmenu.js:BContextMenu;section"}

The \<b-contextmenu> element implements a modal popup that displays contextmenu choices, based on <button uri=... ic=... kbd=.../> elements, see also BMenuRow, BMenuTitle and BMenuSeparator. Menu actions are identified via URI attributes, they can be activated by calling a handler which is assigned via the .activate property, or the actions can be checked for being disabled by calling a handler which is assigned via the .isactivate property. The ic attribute on buttons embeds a <b-icon ic=.../> inside the buttons that are children of a \<b-contextmenu>. Using the popup() method, the menu can be popped up via HTMLDialogElement.showModal. Example:

<div @contextmenu="e => querySelector('b-contextmenu').popup (e)">
  <b-contextmenu .activate="menuactivation">
    <button ic="mi-close" kbd="Shift+Ctrl+Q" uri="quit" > Quit </button>
  </b-contextmenu>
</div>

Note that keyboard presses, mouse clicks, drag selections and event bubbling can all cause menu item clicks and contextmenu activation. In order to deduplicate multiple events that arise from the same user interaction, one popup request and one click activation is processed per animation frame.

Properties:

.activate (uri) : Callback handler which is called with a menu item URI once a menu item is activated. : Note, this handler can be called with an URI for which .isactive previously returned false, in particular via hotkeys.

.isactive (uri) -> Promise\<bool> : Async callback used to check for a particular menu item by URI to stay active or be disabled, called during popup().

Attributes:

xscale : Consider a wider area than the context menu width for popup positioning.

yscale : Consider a taller area than the context menu height for popup positioning.

Events:

click (event) : Event signaling activation of a menu item, the uri can be found via get_uri (event.target).

close (event) : Event signaling closing of the menu, regardless of whether menu item activation occoured or not.

Methods:

popup (event, { origin, focus_uri, data-contextmenu }) : Popup the contextmenu, propagation of event is halted and the event coordinates or target is : used for positioning unless origin is given. : The origin is a reference DOM element to use for drop-down positioning. : The focus_uri is a <button uri.../> menu item URI to receive focus after popup. : The data-contextmenu element (or origin) has the data-contextmenu=true attribute assigned during popup.

close() : Hide the contextmenu.

map_kbd_hotkeys (active) : Activate/deactivate a global hotkey map containing the <button kbd=.../> hotkeys specified in menu items. : For hotkeys, no prior .isactive check is carried out.

BContextMenu class

class [BContextMenu]{#BContextMenu data-4search="ui/b/contextmenu.js:BContextMenu;class"}

: …

[**`map_kbd_hotkeys`**]{#map_kbd_hotkeys data-4search="ui/b/contextmenu.js:map_kbd_hotkeys;func"} `(`*active*`)`
:   Activate or disable the `kbd=...` hotkeys in menu items.

[**`find_menuitem`**]{#find_menuitem data-4search="ui/b/contextmenu.js:find_menuitem;func"} `(`*uri*`)`
:   Find a menuitem via its URI.

Functions

[render_contextmenu]{#render_contextmenu data-4search="ui/b/contextmenu.js:render_contextmenu;func"} (b_contextmenu, make_lithtml, target, data) : Render and return a cached reusable \<b-contextmenu/> from make_lithtml(target,data).

[integrate_button]{#integrate_button data-4search="ui/b/contextmenu.js:integrate_button;func"} (contextmenu) : Integrate b-contextmenu button into contextmenu handling.

[BCrawlerDialog]{#BCrawlerDialog data-4search="ui/b/crawlerdialog.js:BCrawlerDialog;section"}

Browse Ase::Crawler contents

BCrawlerDialog class

class [BCrawlerDialog]{#BCrawlerDialog data-4search="ui/b/crawlerdialog.js:BCrawlerDialog;class"}

: …

[**`folder`**]{#folder data-4search="ui/b/crawlerdialog.js:folder;func"} `()`
:   folder - getter for the current folder without protocol

[**`update_inflight`**]{#update_inflight data-4search="ui/b/crawlerdialog.js:update_inflight;func"} `()`
:   update_inflight - indicates if the crawler is asynchronously
    updating

[**`assign_utf8path`**]{#assign_utf8path data-4search="ui/b/crawlerdialog.js:assign_utf8path;func"} `(`*filepath, pickfile*`)`
:   assign_utf8path - assign a path in UTF-8 encoding and possibly
    select it

[**`entry_event`**]{#entry_event data-4search="ui/b/crawlerdialog.js:entry_event;func"} `(`*event, entry*`)`
:   entry_event - handle events on the file entries

[**`filtered_entries`**]{#filtered_entries data-4search="ui/b/crawlerdialog.js:filtered_entries;func"} `()`
:   filtered_entries - filter hidden entries

[**`select_entry`**]{#select_entry data-4search="ui/b/crawlerdialog.js:select_entry;func"} `(`*entry*`)`
:   select_entry - send 'select' event for `entry` or
    `pathentry.value`

[**`close_click`**]{#close_click data-4search="ui/b/crawlerdialog.js:close_click;func"} `(`*ev*`)`
:   close_click - send 'close' event for the dialog

[DataBubbleImpl]{#DataBubbleImpl data-4search="ui/b/databubble.js:DataBubbleImpl;section"}

The DataBubbleImpl and DataBubbleIface classes implement the logic required to extract and display data-bubble="" tooltip popups on mouse hover.

DataBubbleIface class

class [DataBubbleIface]{#DataBubbleIface data-4search="ui/b/databubble.js:DataBubbleIface;class"}

: …

[**`update`**]{#update data-4search="ui/b/databubble.js:update;func"} `(`*element, text*`)`
:   Set the `data-bubble` attribute of `element` to `text` or force
    its callback

[**`callback`**]{#callback data-4search="ui/b/databubble.js:callback;func"} `(`*element, callback*`)`
:   Assign a callback function to fetch the `data-bubble` attribute
    of `element`

[**`force`**]{#force data-4search="ui/b/databubble.js:force;func"} `(`*element*`)`
:   Force `data-bubble` to be shown for `element`

[**`unforce`**]{#unforce data-4search="ui/b/databubble.js:unforce;func"} `(`*element*`)`
:   Cancel forced `data-bubble` for `element`

[**`clear`**]{#clear data-4search="ui/b/databubble.js:clear;func"} `(`*element*`)`
:   Reset the `data-bubble` attribute, its callback and cancel a
    forced bubble

[BDeviceEditor]{#BDeviceEditor data-4search="ui/b/deviceeditor.js:BDeviceEditor;section"}

Editor for audio signal devices.

Props:

device : Audio signal processing device.

Functions

[property_groups]{#property_groups data-4search="ui/b/deviceeditor.js:property_groups;func"} (asyncpropertylist) : Determine layout of properties.

[BDevicePanel]{#BDevicePanel data-4search="ui/b/devicepanel.js:BDevicePanel;section"}

Panel for editing of devices.

Props:

track : Container for the devices.

Component class

class [Component]{#Component data-4search="ui/b/envue.js:Component;class"}

: Component base class for wrapping Vue components.Let this.$vm point to the Vue component, and $vm.$object point to this.

*new* [**`Component`**]{#Component data-4search="ui/b/envue.js:Component;func"} `(`*vm*`)`
:   Let `this.$vm` point to the Vue component, and `$vm.$object`
    point to `this`.

[**`update`**]{#update data-4search="ui/b/envue.js:update;func"} `()`
:   Force a Vue component update.

[**`observable_from_getters`**]{#observable_from_getters data-4search="ui/b/envue.js:observable_from_getters;func"} `(`*tmpl*`)`
:   Wrapper for
    [Util.observable_from_getters()](#Util.observable_from_getters).

[**`$watch`**]{#_watch data-4search="ui/b/envue.js:$watch;func"} `(`*args*`)`
:   Wrapper for
    [Vue.\$watch](https://v3.vuejs.org/api/instance-methods.html#watch)

[**`vue_export`**]{#vue_export data-4search="ui/b/envue.js:vue_export;func"} `(`*vue_object*`)`   `[static]`
:   Create a Vue options API object from *vue_object* for SFC
    exports.

Functions

[forward_access]{#forward_access data-4search="ui/b/envue.js:forward_access;func"} (vm, classinstance, ignores) : Forward all accesses to fields on vm to access fields on classinstance.

[vue_export_from_class]{#vue_export_from_class data-4search="ui/b/envue.js:vue_export_from_class;func"} (Class, vue_object) : Create a Vue options API object that proxies access to a newly created Class instance.

[BIcon]{#BIcon data-4search="ui/b/icon.js:BIcon;section"}

The \<b-icon> element displays icons from various icon fonts. In order to style the color of icon font symbols, simply apply the color CSS property to this element (styling fill as for SVG elements is not needed).

Props:

iconclass : A CSS class to apply to this icon.

ic : A prefixed variant of fa, bc, mi, uc. : Either a prefixed icon font symbol or a unicode character literal, see : the Unicode Lists and Symbols. : The 'bc-' prefix indicates an icon from the "AnklangIcons Font" symbols. : The 'fa-' prefix indicates an icon from the "Fork Awesome" collection (compatible with "Font Awesome 4"), see the Fork Awesome Icons. : The 'mi-' prefix indicates an icon from the "Material Icons" collection, see the Material Design Icons.

fw : Apply fixed-width sizing.

lg : Make the icon 33% larger than its container.

hflip : Flip the icon horizontally.

vflip : Flip the icon vertically.

[BKnob]{#BKnob data-4search="ui/b/knob.js:BKnob;section"}

The \<b-knob> element provides a knob for scalar inputs. It supports the Vue v-model protocol by emitting an input event on value changes and accepting inputs via the value prop.

Props:

bidir : Boolean, flag indicating bidirectional inputs with value range -1…+1.

value : Float, the knob value to be displayed, the value range is 0…+1 if bidir is false.

format : String, format specification for popup bubbles, containinig a number for the peak amplitude.

label : String, text string for popup bubbles.

hscroll : Boolean, adjust value with horizontal scrolling (without dragging).

vscroll : Boolean, adjust value with vertical scrolling (without dragging).

width4height : Automatically determine width from externally specified height (default), otherwise determines height.

Implementation Notes

The knob is rendered based on an SVG drawing, which is arranged in such a way that adding rotational transforms to the SVG elements is sufficient to display varying knob levels. Chrome cannot render individual SVG nodes into seperate layers (GPU textures) so utilizing GPU acceleration requires splitting the original SVG into several SVG layers, each of which can be utilized as a seperate GPU texture with the CSS setting will-change: transform.

Functions

[spin_drag_start]{#spin_drag_start data-4search="ui/b/knob.js:spin_drag_start;func"} (element, event, value_callback) : Setup drag handlers for numeric spin button behavior.

[spin_drag_stop]{#spin_drag_stop data-4search="ui/b/knob.js:spin_drag_stop;func"} (event_or_element) : Stop sping drag event handlers and pointer grab.

[spin_drag_pointermove]{#spin_drag_pointermove data-4search="ui/b/knob.js:spin_drag_pointermove;func"} (event) : Handle sping drag pointer motion.

[spin_drag_change]{#spin_drag_change data-4search="ui/b/knob.js:spin_drag_change;func"} () : Turn accumulated spin drag motions into actual value changes.

[spin_drag_granularity]{#spin_drag_granularity data-4search="ui/b/knob.js:spin_drag_granularity;func"} (event) : Calculate spin drag acceleration (slowdown) from event type and modifiers.

[BMenuBar]{#BMenuBar data-4search="ui/b/menubar.js:BMenuBar;section"}

The \<b-menubar> element contains main menus at the top of the window.

[BMenuRow]{#BMenuRow data-4search="ui/b/menurow.js:BMenuRow;section"}

The \<b-menurow> element can contain <button/> menu items of a BContextMenu, that are packed horizontally inside a menurow.

Props:

noturn : Avoid turning the icon-label direction in menu items to be upside down.

Slots:

default : All contents passed into this slot will be rendered as contents of this element.

[BMenuSeparator]{#BMenuSeparator data-4search="ui/b/menuseparator.js:BMenuSeparator;section"}

The \<b-menuseparator> element is a menu element that serves as a visual separator between other elements.

[BMenuTitle]{#BMenuTitle data-4search="ui/b/menutitle.js:BMenuTitle;section"}

The \<b-menutitle> element can be used as menu title inside a BContextMenu.

Slots:

default : All contents passed into this slot will be rendered as contents of this element.

[BMore]{#BMore data-4search="ui/b/more.js:BMore;section"}

The \<b-more> element is an indicator for adding or dropping new UI elements.

[BNoticeboard]{#BNoticeboard data-4search="ui/b/noticeboard.js:BNoticeboard;section"}

Noticeboard to post notifications for end users.

[BNumberInput]{#BNumberInput data-4search="ui/b/numberinput.js:BNumberInput;section"}

The \<b-numberinput> element is a field-editor for integer or floating point number ranges. The input value will be constrained to take on an amount between min and max inclusively.

Properties:

value : Contains the number being edited.

min : The minimum amount that value can take on.

max : The maximum amount that value can take on.

step : A useful amount for stepwise increments.

allowfloat : Unless this setting is true, numbers are constrained to integer values.

readonly : Make this component non editable for the user.

Events:

valuechange : Event emitted whenever the value changes, which is provided as event.target.value.

[BObjectEditor]{#BObjectEditor data-4search="ui/b/objecteditor.js:BObjectEditor;section"}

The \<b-objecteditor> element is a field-editor for object input. A copy of the input value is edited, update notifications are provided via an input event.

Properties:

value : Object with properties to be edited.

readonly : Make this component non editable for the user.

Events:

input : This event is emitted whenever the value changes through user input or needs to be constrained.

[BPartList]{#BPartList data-4search="ui/b/partlist.js:BPartList;section"}

The \<b-partlist> element allows to arrange Clip objects for playback.

Constants

[list_actions]{#list_actions data-4search="ui/b/piano-ctrl.js:list_actions;export"} : List menu actions for PianoRoll.

Functions

[ntool]{#ntool data-4search="ui/b/piano-ctrl.js:ntool;func"} (toolmode, drag_event, cursor, predicate) : Add/register piano-roll canvas tool

[notes_canvas_drag_select]{#notes_canvas_drag_select data-4search="ui/b/piano-ctrl.js:notes_canvas_drag_select;func"} (event, MODE)

: ### Select Tool

![Crosshair](cursors/cross.svg) The Select Tool allows selection of
single notes or groups of notes. Modifier keys can be used to modify
the selection behavior.

### Horizontal Select

[notes_canvas_drag_paint]{#notes_canvas_drag_paint data-4search="ui/b/piano-ctrl.js:notes_canvas_drag_paint;func"} (event, MODE)

: ### Paint Tool

![Pen](cursors/pen.svg) With the note Paint Tool, notes can be
placed everywhere in the grid by clicking mouse button 1 and
possibly keeping it held during drags.

[notes_canvas_drag_move]{#notes_canvas_drag_move data-4search="ui/b/piano-ctrl.js:notes_canvas_drag_move;func"} (event, MODE)

: ### Move Tool

![Pen](cursors/move.svg) With the note Move Tool, selected notes can
be moved clicking mouse button 1 and keeping it held during drags. A
copy will be made instead of moving the selected notes if the ctrl
key is pressed during drag.

[notes_canvas_drag_resize]{#notes_canvas_drag_resize data-4search="ui/b/piano-ctrl.js:notes_canvas_drag_resize;func"} (event, MODE)

: #### Resizing Notes

![H-Resize](cursors/hresize.svg) When the Paint Tool is selected,
the right edge of a note can be draged to make notes shorter or
longer in duration.

[notes_canvas_drag_erase]{#notes_canvas_drag_erase data-4search="ui/b/piano-ctrl.js:notes_canvas_drag_erase;func"} (event, MODE)

: ### Erase Tool

![Eraser](cursors/eraser.svg) The Erase Tool allows deletion of all
notes selected during a mouse button 1 drag. The deletion can be
aborted by the Escape key.

[note_hover_body]{#note_hover_body data-4search="ui/b/piano-ctrl.js:note_hover_body;func"} (coords, tick, key, notes) : Detect note if hovering over its body

[note_hover_tail]{#note_hover_tail data-4search="ui/b/piano-ctrl.js:note_hover_tail;func"} (coords, tick, key, notes) : Detect note if hovering over its tail

[note_hover_head]{#note_hover_head data-4search="ui/b/piano-ctrl.js:note_hover_head;func"} (coords, tick, key, notes) : Detect note if hovering over its head

[notes_canvas_tool_from_hover]{#notes_canvas_tool_from_hover data-4search="ui/b/piano-ctrl.js:notes_canvas_tool_from_hover;func"} (piano_roll, pointerevent) : Get drag tool and cursor from hover position

[target_coords]{#target_coords data-4search="ui/b/piano-ctrl.js:target_coords;func"} (event, target) : Translate event offsetX,offsetY into taret element

[BPianoRoll]{#BPianoRoll data-4search="ui/b/pianoroll.js:BPianoRoll;section"}

The \<b-piano-roll> element allows note editing.

Functions

[piano_layout]{#piano_layout data-4search="ui/b/pianoroll.js:piano_layout;func"} () : Determine layout in pixels.

[set_canvas_font]{#set_canvas_font data-4search="ui/b/pianoroll.js:set_canvas_font;func"} (ctx, size) : Assign canvas font to drawing context

[paint_piano]{#paint_piano data-4search="ui/b/pianoroll.js:paint_piano;func"} () : Paint piano key canvas

[paint_notes]{#paint_notes data-4search="ui/b/pianoroll.js:paint_notes;func"} () : Paint piano roll notes

[paint_timeline]{#paint_timeline data-4search="ui/b/pianoroll.js:paint_timeline;func"} () : Paint timeline digits and indicators

[paint_timegrid]{#paint_timegrid data-4search="ui/b/pianoroll.js:paint_timegrid;func"} (canvas, with_labels) : Paint timegrid into any canvas

[BPlayControls]{#BPlayControls data-4search="ui/b/playcontrols.js:BPlayControls;section"}

The \<b-playcontrols> element is a container holding the play and seek controls for a Ase.song.

[BPositionView]{#BPositionView data-4search="ui/b/positionview.js:BPositionView;section"}

The \<b-positionview> element displays the project transport position pointer and related information.

[BStatusBar]{#BStatusBar data-4search="ui/b/statusbar.js:BStatusBar;section"}

The \<b-statusbar> element is an area for the display of status messages and UI configuration.

[BSwitchInput]{#BSwitchInput data-4search="ui/b/switchinput.js:BSwitchInput;section"}

The \<b-switchinput> element is a field-editor switch to change between on and off.

Properties:

value : Contains a boolean indicating whether the switch is on or off.

readonly : Make this component non editable for the user.

Events:

valuechange : Event emitted whenever the value changes, which is provided as event.target.value.

[BTextInput]{#BTextInput data-4search="ui/b/textinput.js:BTextInput;section"}

The \<b-textinput> element is a field-editor for text input.

Properties:

value : Contains the text string being edited.

readonly : Make this component non editable for the user.

Events:

valuechange : Event emitted whenever the value changes, which is provided as event.target.value.

[BToggle]{#BToggle data-4search="ui/b/toggle.js:BToggle;section"}

The \<b-toggle> element implements a simple toggle button for boolean audio processor input properties. Its value can be accessed as a property and valuechange is emitted on changes.

Props:

value : Boolean, the toggle value to be displayed, the values are true or false.

label : String, label to be displayed inside the toggle button.

Events:

valuechange : Event emitted whenever the value changes, which is provided as event.target.value.

[BTreeBrowser]{#BTreeBrowser data-4search="ui/b/treebrowser.js:BTreeBrowser;section"}

This container can render tree structures with collapsible branches.

Props:

expandall : Expand all entries by default.

Events:

close : A close event is emitted once the "Close" button activated.

HueSaturation class

class [HueSaturation]{#HueSaturation data-4search="ui/colors.js:HueSaturation;class"} : Class with logic and spline approximations to calculate ZHSV.

Functions

[srgb_from_hsv]{#srgb_from_hsv data-4search="ui/colors.js:srgb_from_hsv;func"} (hue, saturation, value) : Calculate sRGB from hue, saturation, value.

[hsv_from_srgb]{#hsv_from_srgb data-4search="ui/colors.js:hsv_from_srgb;func"} (srgb) : Calculate { hue, saturation, value } from srgb.

[zhsl_from]{#zhsl_from data-4search="ui/colors.js:zhsl_from;func"} (srgb, gamut) : Calculate { hue, saturation, lightness } from srgb.

[srgb_from_zhsv]{#srgb_from_zhsv data-4search="ui/colors.js:srgb_from_zhsv;func"} (hue, saturation, value, gamut) : Calculate sRGB from { hue, saturation, value }.

[hex_from_zhsv]{#hex_from_zhsv data-4search="ui/colors.js:hex_from_zhsv;func"} (hue, saturation, value, gamut) : Calculate hexadecimal color from { hue, saturation, value }.

[zhsv_from]{#zhsv_from data-4search="ui/colors.js:zhsv_from;func"} (srgb, gamut) : Calculate { hue, saturation, value } from srgb.

[srgb_from_zhsl]{#srgb_from_zhsl data-4search="ui/colors.js:srgb_from_zhsl;func"} (hue, saturation, lightness, gamut) : Calculate sRGB from { hue, saturation, value }.

[hex_from_zhsl]{#hex_from_zhsl data-4search="ui/colors.js:hex_from_zhsl;func"} (hue, saturation, lightness, gamut) : Calculate hexadecimal color from { hue, saturation, value }.

[color2rgba]{#color2rgba data-4search="ui/colors.js:color2rgba;func"} (color) : Yield [ R, G, B, A ] from color.

[zmod_assignop]{#zmod_assignop data-4search="ui/colors.js:zmod_assignop;func"} (col, prop, op, num, perc) : Re-assign a specific color property.

[zmod]{#zmod data-4search="ui/colors.js:zmod;func"} (colorlike, mods) : Apply a variety of modifications to an input color.

[zmod4]{#zmod4 data-4search="ui/colors.js:zmod4;func"} (colorlike) : Find zmod() for a color.

[zcam4]{#zcam4 data-4search="ui/colors.js:zcam4;func"} (colorlike) : Find zcam() for a color.

[zlerp]{#zlerp data-4search="ui/colors.js:zlerp;func"} (c1, c2, t) : Interpolate between 2 colors.

[lgrey]{#lgrey data-4search="ui/colors.js:lgrey;func"} (lightness) : Yield a grey tone with CIELAB lightness.

Functions

[markdown_to_html]{#markdown_to_html data-4search="ui/dom.js:markdown_to_html;func"} (element, markdown_text) : Generate element.innerHTML from markdown_text

[font_family_loaded]{#font_family_loaded data-4search="ui/dom.js:font_family_loaded;func"} (options) : Check if a particular font is present (and deviates from the fallback font)

[get_uri]{#get_uri data-4search="ui/dom.js:get_uri;func"} (element) : Fetch URI from a DOM element, returns undefined if none is found (e.g. Number(0) is a valid URI).

[valid_uri]{#valid_uri data-4search="ui/dom.js:valid_uri;func"} (uri) : Check if URI is not undefined.

[has_uri]{#has_uri data-4search="ui/dom.js:has_uri;func"} (element) : Check if DOM element has valid URI.

[text_content]{#text_content data-4search="ui/dom.js:text_content;func"} (element, with_children) : Get .textContent with or without children from a DOM element.

[show_modal]{#show_modal data-4search="ui/dom.js:show_modal;func"} (dialog) : Show a dialog via showModal() and close it on backdrop clicks.

[WorkerClip]{#WorkerClip data-4search="ui/host.js:WorkerClip;section"}

Ase::Clip proxy

[WorkerHost]{#WorkerHost data-4search="ui/host.js:WorkerHost;section"}

Global host instance for scripts.

WorkerHost class

class [WorkerHost]{#WorkerHost data-4search="ui/host.js:WorkerHost;class"}

: …

[**`piano_roll_clip`**]{#piano_roll_clip data-4search="ui/host.js:piano_roll_clip;func"} `()`
:   Create handle for the currently selected clip.

[**`script_name`**]{#script_name data-4search="ui/host.js:script_name;func"} `()`
:   Retrieve the file name of the current user script.

[**`script_uuid`**]{#script_uuid data-4search="ui/host.js:script_uuid;func"} `()`
:   Retrieve the UUID set via [use_api](#use_api)().

[**`api_level`**]{#api_level data-4search="ui/host.js:api_level;func"} `()`
:   Retrieve numeric API level supported by this runtime.

[**`use_api`**]{#use_api data-4search="ui/host.js:use_api;func"} `(`*api_level, script_uuid*`)`
:   Request use of API level `api_level` and provide UUID for
    controllers.

[**`register`**]{#register data-4search="ui/host.js:register;func"} `(`*category, label, fun, blurb, params*`)`
:   Register a script function.

NAME

jsextract.js - Script to extract snippets marked with JsExtract

SYNOPSIS

node jsextract.js [OPTIONS] [file.js...]

DESCRIPTION

The jsextract.js processes its input files by looking for markers such as JsExtract.css`...` and extracting the template string contents into a corresponding *.jscss file. This can be preprocessed or copied into a corresponding *.css file, to be loaded via JsExtract.fetch_css().

OPTIONS

-O \<dir> : Specify the directory for output files.

[FocusGuard]{#FocusGuard data-4search="ui/kbd.js:FocusGuard;section"}

Install a FocusGuard to allow only a restricted set of elements to get focus.

Constants

[kbd_modifiers]{#kbd_modifiers data-4search="ui/kbd.js:kbd_modifiers;var"} : Keyboard modifiers used for hotkeys.

[KeyCode]{#KeyCode data-4search="ui/kbd.js:KeyCode;export"} : Symbolic names for key codes

Functions

[display_keyname]{#display_keyname data-4search="ui/kbd.js:display_keyname;func"} (keyname) : Create display name from KeyEvent.code names.

[hotkey_name_from_event]{#hotkey_name_from_event data-4search="ui/kbd.js:hotkey_name_from_event;func"} (event) : Create hotkey name from KeyboardEvent.

[match_key_event]{#match_key_event data-4search="ui/kbd.js:match_key_event;func"} (event, keyname) : Match an event's key code, considering modifiers.

[is_navigation_key_code]{#is_navigation_key_code data-4search="ui/kbd.js:is_navigation_key_code;func"} (keycode) : Check if a key code is used of rnavigaiton (and non alphanumeric).

[activeElement]{#activeElement data-4search="ui/kbd.js:activeElement;func"} () : Get the currently focussed Element, also inspecting open shadowRoot hierarchies.

[list_focusables]{#list_focusables data-4search="ui/kbd.js:list_focusables;func"} (element) : List elements that can take focus including shadow DOMs and are descendants of element or the document

[push_focus_root]{#push_focus_root data-4search="ui/kbd.js:push_focus_root;func"} (element, escapecb) : Constrain focus to element and its descendants

[remove_focus_root]{#remove_focus_root data-4search="ui/kbd.js:remove_focus_root;func"} (element) : Remove an element previously installed via push_focus_root()

[element_rect]{#element_rect data-4search="ui/kbd.js:element_rect;func"} (element) : Compute element rectangle, e.g. for focus movement

[keydown_move_focus]{#keydown_move_focus data-4search="ui/kbd.js:keydown_move_focus;func"} (event) : Move focus on UP/DOWN/HOME/END keydown events

[move_focus]{#move_focus data-4search="ui/kbd.js:move_focus;func"} (dir, subfocus) : Move focus to prev or next focus widget

[forget_focus]{#forget_focus data-4search="ui/kbd.js:forget_focus;func"} (element) : Forget the last focus element inside element

[hotkey_handler]{#hotkey_handler data-4search="ui/kbd.js:hotkey_handler;func"} (event) : Global key handler to dispatch key events according to global keymaps.

[add_hotkey]{#add_hotkey data-4search="ui/kbd.js:add_hotkey;func"} (hotkey, callback, subtree_element) : Add a global hotkey handler.

[remove_hotkey]{#remove_hotkey data-4search="ui/kbd.js:remove_hotkey;func"} (hotkey, callback) : Remove a global hotkey handler.

[add_key_filter]{#add_key_filter data-4search="ui/kbd.js:add_key_filter;func"} (keycode, callback) : Add a global keymap.

[remove_key_filter]{#remove_key_filter data-4search="ui/kbd.js:remove_key_filter;func"} (keycode) : Remove a global keymap.

[add_keymap]{#add_keymap data-4search="ui/kbd.js:add_keymap;func"} (keymap) : Add a global keymap.

[remove_keymap]{#remove_keymap data-4search="ui/kbd.js:remove_keymap;func"} (keymap) : Remove a global keymap.

[is_button_input]{#is_button_input data-4search="ui/kbd.js:is_button_input;func"} (element) : Check if element is button-like input

[is_nav_input]{#is_nav_input data-4search="ui/kbd.js:is_nav_input;func"} (element) : Check if element has inner input navigation

[shortcut_lookup]{#shortcut_lookup data-4search="ui/kbd.js:shortcut_lookup;func"} (mapname, label, shortcut) : Lookup shortcut for label in mapname, default to shortcut

[shortcut_dialog]{#shortcut_dialog data-4search="ui/kbd.js:shortcut_dialog;func"} (mapname, label, shortcut) : Display shortcut editing dialog

[LitComponent]{#LitComponent data-4search="ui/little.js:LitComponent;section"}

An interface extending LitElement with reactive render() and updated() methods.

Methods:

render() : A this-bound Wrapper around LitElement.render() with JS Signal tracking.

updated (changedProps) : A this-bound Wrapper around LitElement.updated() with JS Signal tracking.

request_update() : A this-bound wrapper around LitElement.requestUpdate().

weak_this() : A new WeakRef to this.

createRenderRoot() : In addition to calling LitElement.createRenderRoot() this will call adopt_component_styles().

LitComponent class

class [LitComponent]{#LitComponent data-4search="ui/little.js:LitComponent;class"}

: …

[**`mkstate`**]{#mkstate data-4search="ui/little.js:mkstate;func"} `(`*str_olist*`)`
:   Install reactive Signal.State for all props

Constants

[JsExtract]{#JsExtract data-4search="ui/little.js:JsExtract;export"}

: API to mark template strings for extraction and fetch extracted assets.

-   `` JsExtract.css`body { font-weight:bold; }` ``\
    Mark CSS text inside a Javascript file for extration by
    jsextract.js.
-   `node jsextract.js inputfile.js`\
    Extract ``` JsExtract.css`` ``` strings into `inputfile.jscss`.
-   `await JsExtract.fetch_css ('/path/to/inputfile.js');`\
    Use the browser `fetch()` API to retrieve the extracted string
    as `text/css` from '/path/to/inputfile.css'.
-   `JsExtract.fetch_css (import.meta);`\
    Variant of the above that utilizes `import.meta.url`.
-   `JsExtract.css_url (import.meta);`\
    Variant of the above that just provides the stylesheet URL.

Functions

[lit_update_all]{#lit_update_all data-4search="ui/little.js:lit_update_all;func"} (root) : Call requestUpdate() on all LitElements

[css_url]{#css_url data-4search="ui/little.js:css_url;func"} (base_url) : Construct the stylesheet URL from a base URL (enforcing .css extension).

[fetch_css]{#fetch_css data-4search="ui/little.js:fetch_css;func"} (base_url) : Fetch (extracted) asset from a base URL (enforcing .css extension) as "text/css"

[adopt_component_styles]{#adopt_component_styles data-4search="ui/little.js:adopt_component_styles;func"} (element) : Ensure that element has all stylesheets with [data-4litcomponent] applied to it

Constants

[CHROME_UA]{#CHROME_UA data-4search="ui/mouse.js:CHROME_UA;export"} : Flag indicating Chrome UserAgent.

Functions

[chrome_movement_factor]{#chrome_movement_factor data-4search="ui/mouse.js:chrome_movement_factor;func"} () : Determine factor for Chrome to convert movementX to CSS px (based on event history)

[event_movement]{#event_movement data-4search="ui/mouse.js:event_movement;func"} (event, shift_swaps) : Determine movementX,movementY in CSS pixels, independent of browser quirks.

[wheel_delta]{#wheel_delta data-4search="ui/mouse.js:wheel_delta;func"} (event, shift_swaps) : Determine mouse wheel deltas in bare units, independent of zoom or DPI. This returns an object {deltaX,deltaY} with negative values pointing LEFT/UP and positive values RIGHT/DOWN respectively. For zoom step interpretation, the x/y pixel values should be reduced via Math.sign(). For scales the pixel values might feel more natural, because browsers sometimes increase the number of events with increasing wheel distance, in other cases values are accumulated so fewer events with larger deltas are sent instead. The members {x,y} approximate the wheel delta in pixels.

[zmove_last]{#zmove_last data-4search="ui/mouse.js:zmove_last;func"} () : Peek at the last pointer coordination event.

[zmove_add]{#zmove_add data-4search="ui/mouse.js:zmove_add;func"} (hook) : Add hook to be called once the mouse position or stacking state changes, returns deleter.

[zmove_trigger]{#zmove_trigger data-4search="ui/mouse.js:zmove_trigger;func"} (ev) : Trigger zmove hooks, this is useful to get debounced notifications for pointer movements, including 0-distance moves after significant UI changes.

[ScriptHost]{#ScriptHost data-4search="ui/script.js:ScriptHost;section"}

A ScriptHost object represents a Worker script in the Main thread.

A ScriptHost object (defined in script.js) runs in the Main Javascript thread. It starts a Worker via host.js which creates a WorkerHost object in the Worker thread. The ScriptHost\<->WorkerHost objects bridge needed API from the Main thread to the Worker thread. The WorkerHost then loads and calls into a user provided ES Module, the actual user script which communicates via the WorkerHost global variable host. See also #WorkerHost.

Functions

[count_newlines]{#count_newlines data-4search="ui/sfc-compile.js:count_newlines;func"} (str) : Count newlines

[find_tags]{#find_tags data-4search="ui/sfc-compile.js:find_tags;func"} (string) : List tag names matching ^</tag> in string.

[process_file]{#process_file data-4search="ui/sfc-compile.js:process_file;func"} (filename, config) : Extract and process sections of an SFC file.

[write_style]{#write_style data-4search="ui/sfc-compile.js:write_style;func"} (filename, ofile, config, stylestring) : Process and write style information

Functions

[jsonapi_finalization_registration]{#jsonapi_finalization_registration data-4search="ui/startup.js:jsonapi_finalization_registration;func"} (object) : Jsonipc handler for object creation

[jsonapi_finalization_gc]{#jsonapi_finalization_gc data-4search="ui/startup.js:jsonapi_finalization_gc;func"} (gcinfo) : Jsonipc handler for IDs of GC-ed objects.

Functions

[hex]{#hex data-4search="ui/strings.js:hex;func"} (s, prefix) : Convert bytes in s into 2-digit hex representation.

[displayfs]{#displayfs data-4search="ui/strings.js:displayfs;func"} (utf16pua) : Map a UTF-16 encoded filename with PUA byte encodings to visible characters.

[basename]{#basename data-4search="ui/strings.js:basename;func"} (path) : Strip the directory parts of a path.

[displaybasename]{#displaybasename data-4search="ui/strings.js:displaybasename;func"} (path) : Strip the directory parts of displayfs (path).

[dirname]{#dirname data-4search="ui/strings.js:dirname;func"} (path) : Strip basename and return only directory parts of a path.

[displaydirname]{#displaydirname data-4search="ui/strings.js:displaydirname;func"} (path) : Strip basename and return only directory parts of a displayfs (path).

PointerDrag class

class [PointerDrag]{#PointerDrag data-4search="ui/util.js:PointerDrag;class"} : Meld all pointer drag handling functions into a single drag_event(event,MODE) method

vue_mixins class

class [vue_mixins]{#vue_mixins data-4search="ui/util.js:vue_mixins;class"}

: …

[**`vuechildren`**]{#vuechildren data-4search="ui/util.js:vuechildren;func"} `()`   `[static]`
:   Provide `$children` (and `$vue_parent`) on every component

[**`autodataattrs`**]{#autodataattrs data-4search="ui/util.js:autodataattrs;func"} `()`   `[static]`
:   Automatically add `$attrs['data-*']` to `$el`

[**`dom_updates`**]{#dom_updates data-4search="ui/util.js:dom_updates;func"} `()`   `[static]`

:   Vue mixin to provide DOM handling hooks. This mixin adds
    instance method callbacks to handle dynamic DOM changes such as
    drawing into a `<canvas/>`. Reactive callback methods have their
    data dependencies tracked, so future changes to data
    dependencies of reactive methods will queue future updates.
    However reactive dependency tracking only works for non-async
    methods.

    -   dom_create() - Called after `this.$el` has been created
    -   dom_change() - Called after `this.$el` has been reassigned
        or changed. Note, may also be called for `v-if="false"`
        cases.
    -   dom_update() - Reactive callback method, called with a valid
        `this.$el` and after Vue component updates. Dependency
        changes result in `this.$forceUpdate()`.
    -   dom_draw() - Reactive callback method, called during an
        animation frame, requested via `dom_queue_draw()`.
        Dependency changes result in `this.dom_queue_draw()`.
    -   dom_queue_draw() - Cause `this.dom_draw()` to be called
        during the next animation frame.
    -   dom_destroy() - Callback method, called once `this.$el` is
        removed.

Constants

[clone_descriptors]{#clone_descriptors data-4search="ui/util.js:clone_descriptors;export"} : Copy PropertyDescriptors from source to target, optionally binding handlers against closure

Functions

[now]{#now data-4search="ui/util.js:now;func"} () : Retrieve current time in milliseconds

[frame_stamp]{#frame_stamp data-4search="ui/util.js:frame_stamp;func"} () : Retrieve a timestamp that is unique per (animation) frame

[debounce]{#debounce data-4search="ui/util.js:debounce;func"} (callback, options)

: Yield a wrapper function for callback that throttles invocations. Regardless of the frequency of calls to the returned wrapper, callback will only be called once per requestAnimationFrame() cycle, or after milliseconds. The return value of the wrapper functions is the value of the last callback invocation. A cancel() method can be called on the returned wrapper to cancel the next pending callback invocation. Options:

-   `wait` - number of milliseconds to pass until `callback` may be
    called.
-   `restart` - always restart the timer once the wrapper is called.
-   `immediate` - immediately invoke `callback` and then start the
    timeout period.

[capture_event]{#capture_event data-4search="ui/util.js:capture_event;func"} (eventname, callback) : Process all events of type eventname with a single callback exclusively

[coalesced_events]{#coalesced_events data-4search="ui/util.js:coalesced_events;func"} (event) : Expand pointer event into a list of possibly coalesced events

[vue_component]{#vue_component data-4search="ui/util.js:vue_component;func"} (element) : Get Vue component handle from element or its ancestors

[envue_object]{#envue_object data-4search="ui/util.js:envue_object;func"} (element) : Get Envue $object from element or its ancestors

[drag_event]{#drag_event data-4search="ui/util.js:drag_event;func"} (event) : Start drag_event (event) handling on a Vue component's element, use @pointerdown="drag_event"

[unrequest_pointer_lock]{#unrequest_pointer_lock data-4search="ui/util.js:unrequest_pointer_lock;func"} (element) : Clear (pending) pointer locks Clear an existing pointer lock on element if any and ensure it does not get a pointer lock granted unless request_pointer_lock() is called on it again.

[has_pointer_lock]{#has_pointer_lock data-4search="ui/util.js:has_pointer_lock;func"} (element)

: Check if element has a (pending) pointer lock Return:

-   2- if `element` has the pointer lock;
-   1- if the pointer lock is pending;
-   0- otherwise.

[request_pointer_lock]{#request_pointer_lock data-4search="ui/util.js:request_pointer_lock;func"} (element) : Request a pointer lock on element and track its state Use this function to maintain pointer locks to avoid stuck locks that can get granted after exitPointerLock() has been called.

[adopt_style]{#adopt_style data-4search="ui/util.js:adopt_style;func"} (element, csstext, stylesheet_name) : Ensure the root node of element contains a csstext (replaceable via stylesheet_name)

[add_style_sheet]{#add_style_sheet data-4search="ui/util.js:add_style_sheet;func"} (element, url) : Ensure the root node of element has a url stylesheet link

[vm_scope_selector]{#vm_scope_selector data-4search="ui/util.js:vm_scope_selector;func"} (vm) : Retrieve CSS scope selector for vm_scope_style()

[vm_scope_style]{#vm_scope_style data-4search="ui/util.js:vm_scope_style;func"} (vm, css) : Attach css to Vue instance vm, use vm_scope_selector() for the vm CSS scope

[assign_forin]{#assign_forin data-4search="ui/util.js:assign_forin;func"} (target, source) : Loop over all properties in source and assign to target

[assign_forof]{#assign_forof data-4search="ui/util.js:assign_forof;func"} (target, source) : Loop over all elements of source and assign to target

[array_remove]{#array_remove data-4search="ui/util.js:array_remove;func"} (array, item) : Remove element item from array if present via indexOf

[array_index_equals]{#array_index_equals data-4search="ui/util.js:array_index_equals;func"} (array, item) : Find array index of element that equals item

[map_from_kvpairs]{#map_from_kvpairs data-4search="ui/util.js:map_from_kvpairs;func"} (kvarray) : Generate map by splitting the key=value pairs in kvarray

[range]{#range data-4search="ui/util.js:range;func"} (bound, end, step) : Generate integers [0..bound[ if one arg is given or [bound..end[ by incrementing step

[freeze_deep]{#freeze_deep data-4search="ui/util.js:freeze_deep;func"} (object) : Freeze object and its properties

[copy_deep]{#copy_deep data-4search="ui/util.js:copy_deep;func"} (src) : Create a new object that has the same properties and Array values as src

[equals_recursively]{#equals_recursively data-4search="ui/util.js:equals_recursively;func"} (a, b) : Check if a == b, recursively if the arguments are of type Array or Object

[clamp]{#clamp data-4search="ui/util.js:clamp;func"} (x, min, max) : Return @a x clamped into @a min and @a max

[fwdprovide]{#fwdprovide data-4search="ui/util.js:fwdprovide;func"} (injectname, keys) : Create a Vue component provide() function that forwards selected properties

[hyphenate]{#hyphenate data-4search="ui/util.js:hyphenate;func"} (string) : Generate a kebab-case ('two-words') identifier from a camelCase ('twoWords') identifier

[weakid]{#weakid data-4search="ui/util.js:weakid;func"} (object) : Fetch a unique id for any object

[weakid_lookup]{#weakid_lookup data-4search="ui/util.js:weakid_lookup;func"} (id) : Find an object from its unique id

[uuname]{#uuname data-4search="ui/util.js:uuname;func"} (object) : Get a universally unique name for any object

[join_classes]{#join_classes data-4search="ui/util.js:join_classes;func"} (args) : Join strings and arrays of class lists from args

[object_zip]{#object_zip data-4search="ui/util.js:object_zip;func"} (obj, keys, values) : Assign obj[k] = v for all k of keys, v of values

[object_await_values]{#object_await_values data-4search="ui/util.js:object_await_values;func"} (obj) : Await and reassign all object fields

[extend_property]{#extend_property data-4search="ui/util.js:extend_property;func"} (prop, disconnector, augment) : Extend Ase.Property objects with cached attributs. Note, for automatic .value_ updates, a disconnector function must be provided as second argument, to handle disconnection of property change notifications once the property is not needed anymore.

[promise_state]{#promise_state data-4search="ui/util.js:promise_state;func"} (p) : Extract the promise p state as one of: 'pending', 'fulfilled', 'rejected'

[compile_expression]{#compile_expression data-4search="ui/util.js:compile_expression;func"} (expression, context) : Turn a JS $event handler expression into a function. This yields a factory function that binds the scope to create an expression handler.

[VueifyObject]{#VueifyObject data-4search="ui/util.js:VueifyObject;func"} (object, vue_options) : VueifyObject - turn a regular object into a Vue instance. The object passed in is used as the Vue data object. Properties with a getter (and possibly setter) are turned into Vue computed properties, methods are carried over as methods on the Vue() instance.

[fnv1a_hash]{#fnv1a_hash data-4search="ui/util.js:fnv1a_hash;func"} (str) : Produce hash code from a String, using an FNV-1a variant

[split_comma]{#split_comma data-4search="ui/util.js:split_comma;func"} (str) : Split a string when encountering a comma, while preserving quoted or parenthesized segments

[escape_html]{#escape_html data-4search="ui/util.js:escape_html;func"} (unsafe) : Properly escape test into & and related sequences

[parse_hex_color]{#parse_hex_color data-4search="ui/util.js:parse_hex_color;func"} (colorstr) : Parse hexadecimal CSS color with 3 or 6 digits into [ R, G, B ]

[parse_hex_luminosity]{#parse_hex_luminosity data-4search="ui/util.js:parse_hex_luminosity;func"} (colorstr) : Parse hexadecimal CSS color into luminosity

[parse_hex_brightness]{#parse_hex_brightness data-4search="ui/util.js:parse_hex_brightness;func"} (colorstr) : Parse hexadecimal CSS color into brightness

[parse_hex_pgrey]{#parse_hex_pgrey data-4search="ui/util.js:parse_hex_pgrey;func"} (colorstr) : Parse hexadecimal CSS color into perception corrected grey

[parse_hex_average]{#parse_hex_average data-4search="ui/util.js:parse_hex_average;func"} (colorstr) : Parse hexadecimal CSS color into average grey

[parse_colors]{#parse_colors data-4search="ui/util.js:parse_colors;func"} (colorstr) : Parse CSS colors (via invisible DOM element) and yield an array of rgba tuples

[compute_style_properties]{#compute_style_properties data-4search="ui/util.js:compute_style_properties;func"} (el, obj) : Retrieve a new object with the properties of obj resolved against the style of el

[check_visibility]{#check_visibility data-4search="ui/util.js:check_visibility;func"} (element) : Check visibility of element

[is_displayed]{#is_displayed data-4search="ui/util.js:is_displayed;func"} (element) : Check if element is displayed (has width/height assigned)

[setup_shield_element]{#setup_shield_element data-4search="ui/util.js:setup_shield_element;func"} (shield, containee, closer, capture_escape) : Setup Element shield for a modal containee. Capture focus movements inside containee, call closer(event) for pointer clicks on shield or when ESCAPE is pressed.

[swallow_event]{#swallow_event data-4search="ui/util.js:swallow_event;func"} (type, timeout) : Use capturing to swallow any type events until timeout has passed

[prevent_event]{#prevent_event data-4search="ui/util.js:prevent_event;func"} (event_or_null) : Prevent default or any propagation for a possible event

[dialog_backdrop_mousedown]{#dialog_backdrop_mousedown data-4search="ui/util.js:dialog_backdrop_mousedown;func"} (ev) : Close dialog on backdrop clicks via hiding at mousedown

[dialog_backdrop_mouseup]{#dialog_backdrop_mouseup data-4search="ui/util.js:dialog_backdrop_mouseup;func"} (ev) : Close dialog on backdrop clicks via actual closing at mouseup

[dialog_backdrop_autoclose]{#dialog_backdrop_autoclose data-4search="ui/util.js:dialog_backdrop_autoclose;func"} (dialog, install_or_remove) : Install handlers to close a dialog on backdrop clicks

[popup_position]{#popup_position data-4search="ui/util.js:popup_position;func"} (element, opts) : Determine position for a popup

[resize_canvas]{#resize_canvas data-4search="ui/util.js:resize_canvas;func"} (canvas, csswidth, cssheight, fill_style) : Resize canvas display size (CSS size) and resize backing store to match hardware pixels

[dash_xto]{#dash_xto data-4search="ui/util.js:dash_xto;func"} (ctx, x, y, w, d) : Draw a horizontal line from (x,y) of width w with dashes d

[hstippleRect]{#hstippleRect data-4search="ui/util.js:hstippleRect;func"} (ctx, x, y, width, height, stipple) : Draw a horizontal rect (x,y,width,height) with pixel gaps of width stipple

[roundRect]{#roundRect data-4search="ui/util.js:roundRect;func"} (ctx, x, y, width, height, radius, fill, stroke) : Fill and stroke a canvas rectangle with rounded corners

[gradient_apply_stops]{#gradient_apply_stops data-4search="ui/util.js:gradient_apply_stops;func"} (grad, stoparray) : Add color stops from stoparray to grad, stoparray is an array: [(offset,color)...]

[linear_gradient_from]{#linear_gradient_from data-4search="ui/util.js:linear_gradient_from;func"} (ctx, stoparray, x1, y1, x2, y2) : Create a new linear gradient at (x1,y1,x2,y2) with color stops stoparray

[canvas_ink_vspan]{#canvas_ink_vspan data-4search="ui/util.js:canvas_ink_vspan;func"} (font_style, textish) : Measure ink span of a canvas text string or an array

[midi_label]{#midi_label data-4search="ui/util.js:midi_label;func"} (numish) : Retrieve the 'C-1' .. 'G8' label for midi note numbers

[align8]{#align8 data-4search="ui/util.js:align8;func"} (int) : Align integer value to 8

[telemetry_subscribe]{#telemetry_subscribe data-4search="ui/util.js:telemetry_subscribe;func"} (fun, telemetryfields) : Call fun for telemtry updates, returns unsubscribe handler

[telemetry_unsubscribe]{#telemetry_unsubscribe data-4search="ui/util.js:telemetry_unsubscribe;func"} (telemetryobject) : Call fun for telemtry updates, returns unsubscribe handler

[in_keyboard_click]{#in_keyboard_click data-4search="ui/util.js:in_keyboard_click;func"} () : Check if the current click event originates from keyboard activation

[keyboard_click_event]{#keyboard_click_event data-4search="ui/util.js:keyboard_click_event;func"} (fallback) : Retrieve event that triggers keyboard_click()

[keyboard_click]{#keyboard_click data-4search="ui/util.js:keyboard_click;func"} (element, event, callclick) : Trigger element click via keyboard

[in_array]{#in_array data-4search="ui/util.js:in_array;func"} (element, array) : Check whether element is contained in array

[matches_forof]{#matches_forof data-4search="ui/util.js:matches_forof;func"} (element, iteratable) : Check whether element is found during for (... of iteratable)

[element_text]{#element_text data-4search="ui/util.js:element_text;func"} (element, filter) : Extract filtered text nodes from Element

[clone_menu_icon]{#clone_menu_icon data-4search="ui/util.js:clone_menu_icon;func"} (menu, uri, title) : Clone a menuitem icon via its uri

[keyboard_map_name]{#keyboard_map_name data-4search="ui/util.js:keyboard_map_name;func"} (keyname) : Retrieve user-printable name for a keyboard button, useful to describe KeyboardEvent.code

[has_ancestor]{#has_ancestor data-4search="ui/util.js:has_ancestor;func"} (node, ancestor, escape_shadowdom) : Check if ancestor is an ancestor of node, maybe including shadowRoot elements

[closest]{#closest data-4search="ui/util.js:closest;func"} (element, selector) : Find the closest element or parent matching selector, traversing shadow DOMs

[root_ancestor]{#root_ancestor data-4search="ui/util.js:root_ancestor;func"} (element) : Retrieve root ancestor of element

[find_element_from_point]{#find_element_from_point data-4search="ui/util.js:find_element_from_point;func"} (root, x, y, predicate, visited) : Find an element at (x,y) for which predicate (element) is true

[create_note]{#create_note data-4search="ui/util.js:create_note;func"} (text, timeout) : Show a notification popup, with adequate default timeout

[assign_async_cleanup]{#assign_async_cleanup data-4search="ui/util.js:assign_async_cleanup;func"} (map, key, cleaner) : Assign map[key] = cleaner, while awaiting and calling any previously existing cleanup function

[observable_force_update]{#observable_force_update data-4search="ui/util.js:observable_force_update;func"} () : Method to be added to a observable_from_getters() result to force updates

[observable_from_getters]{#observable_from_getters data-4search="ui/util.js:observable_from_getters;func"} (tmpl, predicate)

: Create a reactive dict from the fields in tmpl with async callbacks.

Once the resolved result from `predicate()` changes and becomes
true-ish, the `getter()` of each field in `tmpl` is called, resolved
and assigned to the corresponding field in the observable binding
returned from this function. Optionally, fields may provide a
`notify` setup handler to install a notification callback that
re-invokes the `getter`. A destructor can be returned from
`notify()` once resolved, that is executed during cleanup phases.
The `default` of each field in `tmpl` may provide an initial value
before `getter` is called the first time and in case `predicate()`
becomes false-ish. The first argument to `getter()` is a function
that can be used to register cleanup code for the getter result.

``` js
const data = {
  val: { getter: c => async_fetch(), notify: n => add_listener (n), },
};
dict = this.observable_from_getters (data, () => this.predicate());
// use dict.val
```

When the `n()` callback is called, a new *getter* call is scheduled.
A handler can be registered with `c (cleanup);` to cleanup resources
left over from an `async_fetch()` call.

[tmplstr]{#tmplstr data-4search="ui/util.js:tmplstr;func"} (a, e) : Join template literal arguments into a String

[strpad]{#strpad data-4search="ui/util.js:strpad;func"} (string, len, fill) : Pad string with fill until its length is len

[lrstrip]{#lrstrip data-4search="ui/util.js:lrstrip;func"} (str) : Strip whitespace from start and end of string

[collect_text_content]{#collect_text_content data-4search="ui/util.js:collect_text_content;func"} (node_or_array) : Gather text content from node_or_array

[hash53]{#hash53 data-4search="ui/util.js:hash53;func"} (key, seed) : Generate 53-Bit hash from key

[add_destroy_callback]{#add_destroy_callback data-4search="ui/util.js:add_destroy_callback;func"} (callback) : Add a callback to this to be called from call_destroy_callbacks()

[del_destroy_callback]{#del_destroy_callback data-4search="ui/util.js:del_destroy_callback;func"} (callback) : Remove a callback from this, previously added via add_destroy_callback()

[call_destroy_callbacks]{#call_destroy_callbacks data-4search="ui/util.js:call_destroy_callbacks;func"} () : Call destroy callbacks of this, clears the callback list

[AseCachingWrapper]{#AseCachingWrapper data-4search="ui/wrapper.js:AseCachingWrapper;section"}

Caching wrapper for ASE classes

AseCachingWrapper class

class [AseCachingWrapper]{#AseCachingWrapper data-4search="ui/wrapper.js:AseCachingWrapper;class"}

: …

[**`__add__`**]{#__add__ data-4search="ui/wrapper.js:__add__;func"} `(`*prop, defaultvalue, callback*`)`
:   Add property to cache

[**`__del__`**]{#__del__ data-4search="ui/wrapper.js:__del__;func"} `(`*prop, callback*`)`
:   Remove property caching request

[**`__cleanup__`**]{#__cleanup__ data-4search="ui/wrapper.js:__cleanup__;func"} `()`
:   Remove all references

Constants

[finalization_cleanup_registry]{#finalization_cleanup_registry data-4search="ui/wrapper.js:finalization_cleanup_registry;var"} : FinalizationRegistry to call cleanup callback upon object destruction.

Functions

[wrap_ase_object]{#wrap_ase_object data-4search="ui/wrapper.js:wrap_ase_object;func"} (aseobj, fields, callback) : Wrap AseObject to cache properties and support add, cleanup and auto cleanup.

[define_reactive]{#define_reactive data-4search="ui/wrapper.js:define_reactive;func"} (object, properties_object) : Define reactive properties on object, to be used with reactive_wrapper(). See also Object.defineProperties.

[reactive_wrapper]{#reactive_wrapper data-4search="ui/wrapper.js:reactive_wrapper;func"} (effect, notifier, keepwatching) : Make effect() wrapper to watch reactive properties, on changes run notifier().

Functions

[lrstrip]{#lrstrip data-4search="ui/xbcomments.js:lrstrip;func"} (str) : Strip whitespace from start and end of string.

[fix_indent]{#fix_indent data-4search="ui/xbcomments.js:fix_indent;func"} (txt) : Remove C-comment style \n\s\*\s

[extract_md]{#extract_md data-4search="ui/xbcomments.js:extract_md;func"} (txt) : Look for a markdown documentation block

[process_file]{#process_file data-4search="ui/xbcomments.js:process_file;func"} (filename, config) : Extract and process block comments of a file