1.1.1 Serialization

Building on Jsonipc, a small serializaiton framework provided by ase/serialize.hh is used to marshal values, structs, enums and classes to/from JSON. This is used to store preferences and project data. The intended usage is as follows:

  std::string jsontext = Ase::json_stringify (somevalue);
  bool success = Ase::json_parse (jsontext, somevalue);
  // The JSON root will be of type 'object' if somevalue is a class instance
  std::string s;                                          // s contains:
  s = json_stringify (true);                              // true
  s = json_stringify (-0.17);                             // -0.17
  s = json_stringify (32768);                             // 32768
  s = json_stringify (Ase::Error::IO);                    // "Ase.Error.IO"
  s = json_stringify (String ("STRing"));                 // "STRing"
  s = json_stringify (ValueS ({ true, 5, "HI" }));        // [true,5,"HI"]
  s = json_stringify (ValueR ({ {"a", 1}, {"b", "B"} })); // {"a":1,"b":"B"}

In the above examples, Ase::Error::IO can be serialized because it is registered as Jsonipc::Enum<Ase::Error> with its enum values. The same works for serializable classes registered through Jsonipc::Serializable<SomeClass>.

[_] Serialization of class instances will have to depend on the Scope/InstanceMap, so instance pointers in copyable classes registered as Jsonipc::Serializable<> can be marshalled into a JsonValue (as {$id,$class} pair), then be resolved into an InstanceP stored in an Ase::Value and from there be marshalled into a persistent relative object link for project data storage.

1.2.1 Callback Handling

Javascript can register/unregister remote Callbacks with create and remove. C++ sends events to inform about a remote Callback being called or unregistered killed.

void    Jsonapi/Trigger/create (id);     // JS->C++
void    Jsonapi/Trigger/remove (id);     // JS->C++
void    Jsonapi/Trigger/_<id>  ([...]);  // C++->JS
void    Jsonapi/Trigger/killed (id);     // C++->JS

3.1.1 Events:

close

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

3.6.1 Slots:

slot

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

3.7.1 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.

3.7.2 Events:

valuechange

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

3.7.3 BClipList class

class BClipList

The <b-cliplist> element container holds BClipView elements.

3.9.1 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().

3.9.2 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.

3.9.3 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.

3.9.4 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.

3.9.5 BContextMenu class

class BContextMenu

…

map_kbd_hotkeys (active)

Activate or disable the kbd=... hotkeys in menu items.

find_menuitem (uri)

Find a menuitem via its URI.

3.9.6 Functions

render_contextmenu (b_contextmenu, make_lithtml, target, data)

Render and return a cached reusable <b-contextmenu/> from make_lithtml(target,data).

integrate_button (contextmenu)

Integrate b-contextmenu button into contextmenu handling.

3.10.1 DataBubbleIface class

class DataBubbleIface

…

update (element, text)

Set the data-bubble attribute of element to text or force its callback

callback (element, callback)

Assign a callback function to fetch the data-bubble attribute of element

force (element)

Force data-bubble to be shown for element

unforce (element)

Cancel forced data-bubble for element

clear (element)

Reset the data-bubble attribute, its callback and cancel a forced bubble

3.12.1 Functions

property_groups (asyncpropertylist)

Determine layout of properties.

3.12.2 Component class

class Component

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

new Component (vm)

Let this.$vm point to the Vue component, and $vm.$object point to this.

update ()

Force a Vue component update.

observable_from_getters (tmpl)

Wrapper for Util.observable_from_getters().

$watch (args)

Wrapper for Vue.$watch

vue_export (vue_object)   [static]

Create a Vue options API object from vue_object for SFC exports.

3.12.3 Functions

forward_access (vm, classinstance, ignores)

Forward all accesses to fields on vm to access fields on classinstance.

vue_export_from_class (Class, vue_object)

Create a Vue options API object that proxies access to a newly created Class instance.

3.13.1 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.

3.14.1 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.

3.14.2 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.

3.14.3 Functions

spin_drag_start (element, event, value_callback)

Setup drag handlers for numeric spin button behavior.

spin_drag_stop (event_or_element)

Stop sping drag event handlers and pointer grab.

spin_drag_pointermove (event)

Handle sping drag pointer motion.

spin_drag_change ()

Turn accumulated spin drag motions into actual value changes.

spin_drag_granularity (event)

Calculate spin drag acceleration (slowdown) from event type and modifiers.

3.16.1 Props:

noturn

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

3.16.2 Slots:

default

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

3.18.1 Slots:

default

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

3.20.1 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.

3.20.2 Events:

valuechange

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

3.21.1 Properties:

value

Object with properties to be edited.

readonly

Make this component non editable for the user.

3.21.2 Events:

input

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

3.22.1 Constants

list_actions

List menu actions for PianoRoll.

3.22.2 Functions

ntool (toolmode, drag_event, cursor, predicate)

Add/register piano-roll canvas tool

notes_canvas_drag_select (event, MODE)

Select Tool

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 (event, MODE)

Paint Tool

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 (event, MODE)

Move Tool

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 (event, MODE)

Resizing Notes

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 (event, MODE)

Erase Tool

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 (coords, tick, key, notes)

Detect note if hovering over its body

note_hover_tail (coords, tick, key, notes)

Detect note if hovering over its tail

note_hover_head (coords, tick, key, notes)

Detect note if hovering over its head

notes_canvas_tool_from_hover (piano_roll, pointerevent)

Get drag tool and cursor from hover position

target_coords (event, target)

Translate event offsetX,offsetY into taret element

3.23.1 Functions

piano_layout ()

Determine layout in pixels.

set_canvas_font (ctx, size)

Assign canvas font to drawing context

paint_piano ()

Paint piano key canvas

paint_notes ()

Paint piano roll notes

paint_timeline ()

Paint timeline digits and indicators

paint_timegrid (canvas, with_labels)

Paint timegrid into any canvas

3.25.1 Props:

• project - The object providing playback API.

3.26.1 Props:

labeled

Display property name next to its editing field.

prop

Contains the extended property being edited.

readonly

Make this component non editable for the user.

3.27.1 ShellClass class

class ShellClass

…

piano_roll ()

Access PianoRoll component

show_spinner ()

Show spinner to indicate "busy" state (increment reason)

hide_spinner ()

Hide spinner to indicate "busy" state (decrement reason)

create_note (args)

Display notice to the user

3.29.1 Properties:

value

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

readonly

Make this component non editable for the user.

3.29.2 Events:

valuechange

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

3.30.1 Properties:

value

Contains the text string being edited.

readonly

Make this component non editable for the user.

3.30.2 Events:

valuechange

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

3.31.1 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.

3.31.2 Events:

valuechange

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

3.31.3 HueSaturation class

class HueSaturation

Class with logic and spline approximations to calculate ZHSV.

3.31.4 Functions

srgb_from_hsv (hue, saturation, value)

Calculate sRGB from hue, saturation, value.

hsv_from_srgb (srgb)

Calculate { hue, saturation, value } from srgb.

zhsl_from (srgb, gamut)

Calculate { hue, saturation, lightness } from srgb.

srgb_from_zhsv (hue, saturation, value, gamut)

Calculate sRGB from { hue, saturation, value }.

hex_from_zhsv (hue, saturation, value, gamut)

Calculate hexadecimal color from { hue, saturation, value }.

zhsv_from (srgb, gamut)

Calculate { hue, saturation, value } from srgb.

srgb_from_zhsl (hue, saturation, lightness, gamut)

Calculate sRGB from { hue, saturation, value }.

hex_from_zhsl (hue, saturation, lightness, gamut)

Calculate hexadecimal color from { hue, saturation, value }.

color2rgba (color)

Yield [ R, G, B, A ] from color.

zmod_assignop (col, prop, op, num, perc)

Re-assign a specific color property.

zmod (colorlike, mods)

Apply a variety of modifications to an input color.

zmod4 (colorlike)

Find zmod() for a color.

zcam4 (colorlike)

Find zcam() for a color.

zlerp (c1, c2, t)

Interpolate between 2 colors.

lgrey (lightness)

Yield a grey tone with CIELAB lightness.

3.31.5 Functions

font_family_loaded (options)

Check if a particular font is present (and deviates from the fallback font)

get_uri (element)

Fetch URI from a DOM element, returns undefined if none is found (e.g. Number(0) is a valid URI).

valid_uri (uri)

Check if URI is not undefined.

has_uri (element)

Check if DOM element has valid URI.

text_content (element, with_children)

Get .textContent with or without children from a DOM element.

3.33.1 WorkerHost class

class WorkerHost

…

piano_roll_clip ()

Create handle for the currently selected clip.

script_name ()

Retrieve the file name of the current user script.

script_uuid ()

Retrieve the UUID set via use_api().

api_level ()

Retrieve numeric API level supported by this runtime.

use_api (api_level, script_uuid)

Request use of API level api_level and provide UUID for controllers.

register (category, label, fun, blurb, params)

Register a script function.

7.1.1 Constants

kbd_modifiers

Keyboard modifiers used for hotkeys.

KeyCode

Symbolic names for key codes

7.1.2 Functions

display_keyname (keyname)

Create display name from KeyEvent.code names.

hotkey_name_from_event (event)

Create hotkey name from KeyboardEvent.

match_key_event (event, keyname)

Match an event's key code, considering modifiers.

is_navigation_key_code (keycode)

Check if a key code is used of rnavigaiton (and non alphanumeric).

activeElement ()

Get the currently focussed Element, also inspecting open shadowRoot hierarchies.

list_focusables (element)

List elements that can take focus including shadow DOMs and are descendants of element or the document

push_focus_root (element, escapecb)

Constrain focus to element and its descendants

remove_focus_root (element)

Remove an element previously installed via push_focus_root()

element_rect (element)

Compute element rectangle, e.g. for focus movement

keydown_move_focus (event)

Move focus on UP/DOWN/HOME/END keydown events

move_focus (dir, subfocus)

Move focus to prev or next focus widget

forget_focus (element)

Forget the last focus element inside element

hotkey_handler (event)

Global key handler to dispatch key events according to global keymaps.

add_hotkey (hotkey, callback, subtree_element)

Add a global hotkey handler.

remove_hotkey (hotkey, callback)

Remove a global hotkey handler.

add_key_filter (keycode, callback)

Add a global keymap.

remove_key_filter (keycode)

Remove a global keymap.

add_keymap (keymap)

Add a global keymap.

remove_keymap (keymap)

Remove a global keymap.

is_button_input (element)

Check if element is button-like input

is_nav_input (element)

Check if element has inner input navigation

shortcut_lookup (mapname, label, shortcut)

Lookup shortcut for label in mapname, default to shortcut

shortcut_dialog (mapname, label, shortcut)

Display shortcut editing dialog

7.2.1 Props:

render

A pre-bound Wrapper.reactive_wrapper() around LitElement.render().

updated

A pre-bound Wrapper.reactive_wrapper() around LitElement.updated().

request_update_

A pre-bound wrapper around LitElement.requestUpdate().

7.2.2 Constants

JsExtract

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.

7.2.3 Functions

lit_update_all (root)

Call requestUpdate() on all LitElements

css_url (base_url)

Construct the stylesheet URL from a base URL (enforcing .css extension).

fetch_css (base_url)

Fetch (extracted) asset from a base URL (enforcing .css extension) as "text/css"

adopt_component_styles (element)

Ensure that element has all stylesheets with [data-4litcomponent] applied to it

7.2.4 Constants

CHROME_UA

Flag indicating Chrome UserAgent.

7.2.5 Functions

chrome_movement_factor ()

Determine factor for Chrome to convert movementX to CSS px (based on event history)

event_movement (event, shift_swaps)

Determine movementX,movementY in CSS pixels, independent of browser quirks.

wheel_delta (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 ()

Peek at the last pointer coordination event.

zmove_add (hook)

Add hook to be called once the mouse position or stacking state changes, returns deleter.

zmove_trigger (ev)

Trigger zmove hooks, this is useful to get debounced notifications for pointer movements, including 0-distance moves after significant UI changes.

7.2.6 Functions

tofloat (value, fallback, min, max)

Yield value as number in [min..max], converts percentages.

load_import (id, cwd, opts)

Load import files in nodejs to implement @import.

find_import (id, cwd, opts)

Provide canned CSS files or fetch css for use with @import.

add_import (filename, csstext)

Provide filename as @import "filename"; source with contents csstext.

7.3.1 Functions

count_newlines (str)

Count newlines

find_tags (string)

List tag names matching ^</tag> in string.

process_file (filename, config)

Extract and process sections of an SFC file.

write_style (filename, ofile, config, stylestring)

Process and write style information

7.3.2 Functions

jsonapi_finalization_registration (object)

Jsonipc handler for object creation

jsonapi_finalization_gc (gcinfo)

Jsonipc handler for IDs of GC-ed objects.

7.3.3 Functions

hex (s, prefix)

Convert bytes in s into 2-digit hex representation.

displayfs (utf16pua)

Map a UTF-16 encoded filename with PUA byte encodings to visible characters.

basename (path)

Strip the directory parts of a path.

displaybasename (path)

Strip the directory parts of displayfs (path).

dirname (path)

Strip basename and return only directory parts of a path.

displaydirname (path)

Strip basename and return only directory parts of a displayfs (path).

7.3.4 PointerDrag class

class PointerDrag

Meld all pointer drag handling functions into a single drag_event(event,MODE) method.

7.3.5 vue_mixins class

class vue_mixins

…

vuechildren ()   [static]

Provide $children (and $vue_parent) on every component.

autodataattrs ()   [static]

Automatically add $attrs['data-*'] to $el.

dom_updates ()   [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.

7.3.6 Constants

ResizeObserver

Work around FireFox 68 having ResizeObserver disabled

clone_descriptors

Copy PropertyDescriptors from source to target, optionally binding handlers against closure.

7.3.7 Functions

now ()

Retrieve current time in milliseconds.

frame_stamp ()

Retrieve a timestamp that is unique per (animation) frame.

debounce (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 (eventname, callback)

Process all events of type eventname with a single callback exclusively

coalesced_events (event)

Expand pointer events into a list of possibly coalesced events.

vue_component (element)

Get Vue component handle from element or its ancestors

envue_object (element)

Get Envue $object from element or its ancestors

drag_event (event)

Start drag_event (event) handling on a Vue component's element, use @pointerdown="drag_event"

unrequest_pointer_lock (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 (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 (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 (element, csstext, stylesheet_name)

Ensure the root node of element contains a csstext (replaceable via stylesheet_name)

add_style_sheet (element, url)

Ensure the root node of element has a url stylesheet link.

vm_scope_selector (vm)

Retrieve CSS scope selector for vm_scope_style()

vm_scope_style (vm, css)

Attach css to Vue instance vm, use vm_scope_selector() for the vm CSS scope

assign_forin (target, source)

Loop over all properties in source and assign to `target

assign_forof (target, source)

Loop over all elements of source and assign to `target

array_remove (array, item)

Remove element item from array if present via indexOf

array_index_equals (array, item)

Find array index of element that equals item

map_from_kvpairs (kvarray)

Generate map by splitting the key=value pairs in kvarray

range (bound, end, step)

Generate integers [0..bound[ if one arg is given or [bound..end[ by incrementing step.

freeze_deep (object)

Freeze object and its properties

copy_deep (src)

Create a new object that has the same properties and Array values as src

equals_recursively (a, b)

Check if a == b, recursively if the arguments are of type Array or Object

clamp (x, min, max)

Return 1 x clamped into 1 min and 1 max.

fwdprovide (injectname, keys)

Create a Vue component provide() function that forwards selected properties.

hyphenate (string)

Generate a kebab-case ('two-words') identifier from a camelCase ('twoWords') identifier

weakid (object)

Fetch a unique id for any object.

weakid_lookup (id)

Find an object from its unique id.

uuname (object)

Get a universally unique name for any object.

join_classes (args)

Join strings and arrays of class lists from args.

object_zip (obj, keys, values)

Assign obj[k] = v for all k of keys, v of values.

object_await_values (obj)

Await and reassign all object fields.

extend_property (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 (p)

Extract the promise p state as one of: 'pending', 'fulfilled', 'rejected'

compile_expression (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 (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 (str)

Produce hash code from a String, using an FNV-1a variant.

split_comma (str)

Split a string when encountering a comma, while preserving quoted or parenthesized segments.

escape_html (unsafe)

Properly escape test into & and related sequences.

parse_hex_color (colorstr)

Parse hexadecimal CSS color with 3 or 6 digits into [ R, G, B ].

parse_hex_luminosity (colorstr)

Parse hexadecimal CSS color into luminosity.

parse_hex_brightness (colorstr)

Parse hexadecimal CSS color into brightness.

parse_hex_pgrey (colorstr)

Parse hexadecimal CSS color into perception corrected grey.

parse_hex_average (colorstr)

Parse hexadecimal CSS color into average grey.

parse_colors (colorstr)

Parse CSS colors (via invisible DOM element) and yield an array of rgba tuples.

compute_style_properties (el, obj)

Retrieve a new object with the properties of obj resolved against the style of el

inside_display_none (element)

Check if element or any parentElement has display:none

is_displayed (element)

Check if element is displayed (has width/height assigned)

setup_shield_element (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 (type, timeout)

Use capturing to swallow any type events until timeout has passed

prevent_event (event_or_null)

Prevent default or any propagation for a possible event.

dialog_backdrop_mousedown (ev)

Close dialog on backdrop clicks via hiding at mousedown

dialog_backdrop_mouseup (ev)

Close dialog on backdrop clicks via actual closing at mouseup

dialog_backdrop_autoclose (dialog, install_or_remove)

Install handlers to close a dialog on backdrop clicks.

popup_position (element, opts)

Determine position for a popup

resize_canvas (canvas, csswidth, cssheight, fill_style)

Resize canvas display size (CSS size) and resize backing store to match hardware pixels

dash_xto (ctx, x, y, w, d)

Draw a horizontal line from (x,y) of width w with dashes d

hstippleRect (ctx, x, y, width, height, stipple)

Draw a horizontal rect (x,y,width,height) with pixel gaps of width stipple

roundRect (ctx, x, y, width, height, radius, fill, stroke)

Fill and stroke a canvas rectangle with rounded corners.

gradient_apply_stops (grad, stoparray)

Add color stops from stoparray to grad, stoparray is an array: [(offset,color)...]

linear_gradient_from (ctx, stoparray, x1, y1, x2, y2)

Create a new linear gradient at (x1,y1,x2,y2) with color stops stoparray

canvas_ink_vspan (font_style, textish)

Measure ink span of a canvas text string or an array

midi_label (numish)

Retrieve the 'C-1' .. 'G8' label for midi note numbers

align8 (int)

Align integer value to 8.

telemetry_subscribe (fun, telemetryfields)

Call fun for telemtry updates, returns unsubscribe handler.

telemetry_unsubscribe (telemetryobject)

Call fun for telemtry updates, returns unsubscribe handler.

in_keyboard_click ()

Check if the current click event originates from keyboard activation.

keyboard_click_event (fallback)

Retrieve event that triggers keyboard_click().

keyboard_click (element, event, callclick)

Trigger element click via keyboard.

in_array (element, array)

Check whether element is contained in array

matches_forof (element, iteratable)

Check whether element is found during for (... of iteratable)

element_text (element, filter)

Extract filtered text nodes from Element.

clone_menu_icon (menu, uri, title)

Clone a menuitem icon via its uri.

keyboard_map_name (keyname)

Retrieve user-printable name for a keyboard button, useful to describe KeyboardEvent.code.

has_ancestor (node, ancestor, escape_shadowdom)

Check if ancestor is an ancestor of node, maybe including shadowRoot elements.

closest (element, selector)

Find the closest element or parent matching selector, traversing shadow DOMs.

root_ancestor (element)

Retrieve root ancestor of element

find_element_from_point (root, x, y, predicate, visited)

Find an element at (x,y) for which predicate (element) is true.

create_note (text, timeout)

Show a notification popup, with adequate default timeout

markdown_to_html (element, markdown_text)

Generate element.innerHTML from markdown_text

assign_async_cleanup (map, key, cleaner)

Assign map[key] = cleaner, while awaiting and calling any previously existing cleanup function

observable_force_update ()

Method to be added to a observable_from_getters() result to force updates.

observable_from_getters (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.

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 (a, e)

Join template literal arguments into a String

strpad (string, len, fill)

Pad string with fill until its length is len

lrstrip (str)

Strip whitespace from start and end of string.

collect_text_content (node_or_array)

Gather text content from node_or_array.

hash53 (key, seed)

Generate 53-Bit hash from key.

add_destroy_callback (callback)

Add a callback to this to be called from call_destroy_callbacks().

del_destroy_callback (callback)

Remove a callback from this, previously added via add_destroy_callback().

call_destroy_callbacks ()

Call destroy callbacks of this, clears the callback list.

7.4.1 AseCachingWrapper class

class AseCachingWrapper

…

__add__ (prop, defaultvalue, callback)

Add property to cache

__del__ (prop, callback)

Remove property caching request

__cleanup__ ()

Remove all references

7.4.2 Constants

finalization_cleanup_registry

FinalizationRegistry to call cleanup callback upon object destruction.

7.4.3 Functions

wrap_ase_object (aseobj, fields, callback)

Wrap AseObject to cache properties and support add, cleanup and auto cleanup.

define_reactive (object, properties_object)

Define reactive properties on object, to be used with reactive_wrapper(). See also Object.defineProperties.

reactive_wrapper (effect, notifier, keepwatching)

Make effect() wrapper to watch reactive properties, on changes run notifier().

7.4.4 Functions

lrstrip (str)

Strip whitespace from start and end of string.

fix_indent (txt)

Remove C-comment style \n\s\*\s

extract_md (txt)

Look for a markdown documentation block

process_file (filename, config)

Extract and process block comments of a file