Util

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