ui/util.js file

PointerDrag class

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

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.

Constants

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

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 event 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 @a x clamped into @a min and @a 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

check_visibility (element)

Check visibility of element

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

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