@qtoggle/qui 1.20.1 → 1.20.3

package/js/icons/multi-state-sprites-icon.js

@@ -138,31 +138,40 @@ class MultiStateSpritesIcon extends Icon {
         let bgWidth = params.bgWidth
         let bgHeight = params.bgHeight
 
+        let iconElement = element[0]
+
         /* Find and remove existing icon state elements */
-        let existingStateElements = element.children().filter(function () {
-            return this.className.split(' ').some(function (c) {
-                return c.match(new RegExp('^qui-icon-[\\w\\-]+$')) && c !== 'qui-icon-decoration'
+        let existingStateElements = []
+        for (let i = 0; i < iconElement.children.length; i++) {
+            let child = iconElement.children[i]
+            let isState = child.className.split(' ').some(function (c) {
+                return c !== 'qui-icon-decoration' && c.startsWith('qui-icon-') && c.length > 'qui-icon-'.length
             })
-        })
+            if (isState) {
+                existingStateElements.push(child)
+            }
+        }
 
-        let addedToDOM = element.parents('body').length
-        if (addedToDOM) {
+        if (iconElement.isConnected) {
+            /* Only this branch fades the old elements out, and only it needs them as a jQuery object */
+            let oldElements = $(existingStateElements)
             asap(function () {
-                existingStateElements.addClass('qui-icon-hidden')
+                oldElements.addClass('qui-icon-hidden')
             })
             Theme.afterTransition(function () {
-                existingStateElements.remove()
-            }, existingStateElements)
+                oldElements.remove()
+            }, oldElements)
         }
         else {
-            existingStateElements.remove()
+            existingStateElements.forEach(e => e.remove())
             existingStateElements = []
         }
 
-        element.addClass('qui-icon')
+        iconElement.classList.add('qui-icon')
 
-        /* Add new icon state elements */
-        let newElements = $()
+        /* Add new icon state elements. Built with plain DOM calls because this runs for every icon on screen, and
+         * jQuery's element, style and append helpers were about half of what renderTo cost on a 448-row list. */
+        let newElements = []
         ObjectUtils.forEach(this._states, function (state, details) {
 
             let offsetX = details.offsetX
@@ -173,35 +182,33 @@ class MultiStateSpritesIcon extends Icon {
                 return
             }
 
-            let stateDiv = $('<div></div>', {class: `qui-icon-${state}`})
+            let stateDiv = document.createElement('div')
+            stateDiv.className = `qui-icon-${state}`
             /* If no existing elements, display the new element directly, w/o any effect; otherwise start hidden and
              * do a transition to visible */
             if (existingStateElements.length) {
-                stateDiv.addClass('qui-icon-hidden')
+                stateDiv.classList.add('qui-icon-hidden')
             }
 
-            let css = {
-                'background-image': `url("${this._url}")`,
-                'background-position': `${(-offsetX * size)}${this._unit} ${(-offsetY * size)}${this._unit}`
-            }
+            let style = stateDiv.style
+            style.backgroundImage = `url("${this._url}")`
+            style.backgroundPosition = `${(-offsetX * size)}${this._unit} ${(-offsetY * size)}${this._unit}`
             if (bgWidth && bgHeight) {
-                css['background-size'] = `${bgWidth} ${bgHeight}`
+                style.backgroundSize = `${bgWidth} ${bgHeight}`
             }
 
             if (details.filter) {
-                css['filter'] = details.filter
+                style.filter = details.filter
             }
 
-            stateDiv.css(css)
-
-            element.append(stateDiv)
-            newElements = newElements.add(stateDiv)
+            iconElement.appendChild(stateDiv)
+            newElements.push(stateDiv)
 
         }, this)
 
         if (existingStateElements.length) {
             asap(function () {
-                newElements.removeClass('qui-icon-hidden')
+                newElements.forEach(e => e.classList.remove('qui-icon-hidden'))
             })
         }
 
@@ -212,19 +219,23 @@ class MultiStateSpritesIcon extends Icon {
             }
         }, this)
 
-        element.removeClass(this.constructor.KNOWN_STATES.map(s => `top-${s}`).join(' '))
-        element.addClass(`top-${topState}`)
+        iconElement.classList.remove(...this.constructor.KNOWN_STATES.map(s => `top-${s}`))
+        iconElement.classList.add(`top-${topState}`)
 
         /* Decoration */
 
-        let decorationDiv = element.children('div.qui-icon-decoration')
-        if (!decorationDiv.length) {
-            decorationDiv = null
+        let decorationDiv = null
+        for (let i = 0; i < iconElement.children.length; i++) {
+            if (iconElement.children[i].classList.contains('qui-icon-decoration')) {
+                decorationDiv = iconElement.children[i]
+                break
+            }
         }
 
         if (!decorationDiv && this._decoration) {
-            decorationDiv = $('<div></div>', {class: 'qui-icon-decoration'})
-            element.prepend(decorationDiv)
+            decorationDiv = document.createElement('div')
+            decorationDiv.className = 'qui-icon-decoration'
+            iconElement.insertBefore(decorationDiv, iconElement.firstChild)
         }
         else if (decorationDiv && !this._decoration) {
             decorationDiv.remove()
@@ -232,35 +243,42 @@ class MultiStateSpritesIcon extends Icon {
         }
 
         if (decorationDiv) {
-            let css = {
-                background: this._decoration
-            }
+            decorationDiv.style.background = this._decoration
+
+            /* The decoration element outlives a render, so a colour lookup can resolve after another icon has been
+             * applied to the same element. Each render stamps the element, and only the latest one may write. */
+            let renderToken = (decorationDiv._quiRenderToken = (decorationDiv._quiRenderToken || 0) + 1)
 
             let bgColor = this._findBgColor(element)
             let bgRGB = Colors.str2rgba(bgColor)
             let decoRGB = Colors.str2rgba(this._decoration)
             if (Colors.contrast(bgRGB, decoRGB) > 1.5) {
-                css['border-color'] = bgColor
+                decorationDiv.style.borderColor = bgColor
             }
             else {
                 this._findIconColor(element).then(function (color) {
-                    css['border-color'] = color
+                    if (decorationDiv._quiRenderToken === renderToken) {
+                        decorationDiv.style.borderColor = color
+                    }
                 })
             }
-
-            decorationDiv.css(css)
         }
     }
 
     _findBgColor(elem) {
         /* Find the background color behind the icon */
 
+        /* Icons are usually rendered before their row is attached, and a detached element has no computed style, so
+         * up such a chain css() only ever reports the inline one. Reading that directly skips a getComputedStyle call
+         * per element, worth about 130 ms across a 448-row list. */
+        let attached = elem.length > 0 && elem[0].isConnected
+
         let e = elem
         let bgColor = null
         while (e.length && e[0].tagName && (!bgColor || bgColor === 'rgba(0, 0, 0, 0)' ||
                                              bgColor === 'transparent')) {
 
-            bgColor = e.css('background-color')
+            bgColor = attached ? e.css('background-color') : e[0].style.backgroundColor
             e = e.parent()
         }
 

package/js/utils/array.js

@@ -2,10 +2,10 @@
  * @namespace qui.utils.array
  */
 
-function makeSortFunc(extractFunc, desc, thisArg) {
-    return function (e1, e2) {
-        let k1 = extractFunc.call(thisArg, e1)
-        let k2 = extractFunc.call(thisArg, e2)
+function makeKeySortFunc(desc) {
+    return function (p1, p2) {
+        let k1 = p1.key
+        let k2 = p2.key
 
         if ((desc && k1 > k2) || (!desc && k1 < k2)) {
             return -1
@@ -19,6 +19,36 @@ function makeSortFunc(extractFunc, desc, thisArg) {
     }
 }
 
+/* The sort runs over element-key pairs, so the key function runs once per element instead of twice for every
+ * comparison the sort makes. Sorting 448 items in random order took 6408 key extractions; this brings it to 448. */
+function sortPairs(array, func, desc, thisArg, sortFunc) {
+    /* Each element carries its own key instead of the two being matched up in a Map, which would file 0 and -0 under
+     * one entry. Undefined entries and holes are held back and restored at the end, as Array#sort leaves them. */
+    let length = array.length
+    let pairs = []
+    let undefinedCount = 0
+
+    array.forEach(function (e) {
+        if (e === undefined) {
+            undefinedCount++
+        }
+        else {
+            pairs.push({element: e, key: func.call(thisArg, e)})
+        }
+    })
+
+    sortFunc(pairs, makeKeySortFunc(desc))
+
+    array.length = 0
+    pairs.forEach(p => array.push(p.element))
+    while (undefinedCount--) {
+        array.push(undefined)
+    }
+    array.length = length
+
+    return array
+}
+
 function merge(left, right, compareFunc) {
     let result = []
 
@@ -94,6 +124,9 @@ export function stableSort(array, compareFunc) {
 
 /**
  * Perform a sort on an array, *in place*, using a key extraction function.
+ *
+ * As with `Array#sort`, `undefined` entries and holes end up at the end of the array, in that order, and the key
+ * extraction function is not called for them. It is called once per remaining element.
  * @alias qui.utils.array.sortKey
  * @param {Array} array
  * @param {Function} func key extraction function; will be called with each element as parameter and is expected to
@@ -103,11 +136,14 @@ export function stableSort(array, compareFunc) {
  * @returns {Array} the array
  */
 export function sortKey(array, func, desc = false, thisArg = null) {
-    return array.sort(makeSortFunc(func, desc, thisArg))
+    return sortPairs(array, func, desc, thisArg, (pairs, compareFunc) => pairs.sort(compareFunc))
 }
 
 /**
  * Perform a stable sort on an array, *in place*, using a key extraction function.
+ *
+ * As with `Array#sort`, `undefined` entries and holes end up at the end of the array, in that order, and the key
+ * extraction function is not called for them. It is called once per remaining element.
  * @alias qui.utils.array.stableSortKey
  * @param {Array} array
  * @param {Function} func key extraction function; will be called with each element as parameter and is expected to
@@ -117,7 +153,7 @@ export function sortKey(array, func, desc = false, thisArg = null) {
  * @returns {Array} the array
  */
 export function stableSortKey(array, func, desc = false, thisArg = null) {
-    return stableSort(array, makeSortFunc(func, desc, thisArg))
+    return sortPairs(array, func, desc, thisArg, stableSort)
 }
 
 /**

package/js/utils/css.js

@@ -238,3 +238,18 @@ export function px2em(px, elem = Window.$body) {
 
     return width
 }
+
+/**
+ * Convert a length from visual pixels to CSS pixels.
+ *
+ * Pointer event coordinates and `getBoundingClientRect()` values (so also jQuery's `offset()` and `position()`) are
+ * visual pixels -- they include the scaling factor applied to the body. CSS lengths, *em* units, `offsetWidth` and
+ * jQuery's `width()` are CSS pixels. Mixing the two is only safe when the scaling factor is `1`.
+ *
+ * @alias qui.utils.css.unscalePx
+ * @param {Number} px
+ * @returns {Number}
+ */
+export function unscalePx(px) {
+    return px / Window.getScalingFactor()
+}

package/js/utils/gestures.js

@@ -4,6 +4,7 @@
 
 import $ from '$qui/lib/jquery.module.js'
 
+import * as CSS    from '$qui/utils/css.js'
 import * as Window from '$qui/window.js'
 
 
@@ -44,6 +45,10 @@ const LONG_PRESS_DATA_KEY = 'qui.utils.gestures.longPress'
 
 /**
  * Setup an HTML element for dragging.
+ *
+ * All coordinates passed to the callbacks are CSS pixels, so they can be compared or combined with *em* units and CSS
+ * lengths directly. Use {@link qui.utils.css.unscalePx} on any `offset()` or `position()` value measured against them.
+ *
  * @alias qui.utils.gestures.enableDragging
  * @param {jQuery} element the dragged element
  * @param {qui.utils.gestures.DragMoveCallback} onMove
@@ -81,12 +86,11 @@ export function enableDragging(element, onMove, onBegin, onEnd, direction) {
 
     function pointerDown(e) {
         let elemOffset = element.offset()
-        beginElemX = elemOffset.left
-        beginElemY = elemOffset.top
+        beginElemX = CSS.unscalePx(elemOffset.left)
+        beginElemY = CSS.unscalePx(elemOffset.top)
 
-        let scalingFactor = Window.getScalingFactor()
-        e.pageX /= scalingFactor
-        e.pageY /= scalingFactor
+        e.pageX = CSS.unscalePx(e.pageX)
+        e.pageY = CSS.unscalePx(e.pageY)
 
         beginPageX = e.pageX
         beginPageY = e.pageY
@@ -109,9 +113,8 @@ export function enableDragging(element, onMove, onBegin, onEnd, direction) {
          * where the pointer actually was, before it is told the drag is over */
         flushMove()
 
-        let scalingFactor = Window.getScalingFactor()
-        e.pageX /= scalingFactor
-        e.pageY /= scalingFactor
+        e.pageX = CSS.unscalePx(e.pageX)
+        e.pageY = CSS.unscalePx(e.pageY)
 
         if (direction === 'x') { /* Constrain moving to horizontal axis */
             e.pageY = beginPageY
@@ -135,9 +138,8 @@ export function enableDragging(element, onMove, onBegin, onEnd, direction) {
     }
 
     function pointerMove(e) {
-        let scalingFactor = Window.getScalingFactor()
-        e.pageX /= scalingFactor
-        e.pageY /= scalingFactor
+        e.pageX = CSS.unscalePx(e.pageX)
+        e.pageY = CSS.unscalePx(e.pageY)
 
         if (direction === 'x') { /* Constrain moving to horizontal axis */
             e.pageY = beginPageY

package/js/views/common-views/icon-label-view.js

@@ -40,28 +40,39 @@ const IconLabelViewMixin = Mixin((superclass = Object) => {
          * @returns {jQuery}
          */
         makeIconLabelContainer() {
-            let container = $('<div></div>', {class: 'qui-icon-label-view'})
+            /* Built with plain DOM calls: five elements per view, and jQuery's element and append helpers were about
+             * a fifth of what the hub's 448-row port list cost to build. The three elements kept as fields stay
+             * jQuery objects, because the icon and label setters work on them. */
+            let container = document.createElement('div')
+            container.className = 'qui-icon-label-view'
 
             if (this._clickable) {
-                container.addClass('qui-base-button')
+                container.classList.add('qui-base-button')
             }
 
-            this._iconElement = $('<div></div>', {class: 'qui-icon'})
+            let iconElement = document.createElement('div')
+            iconElement.className = 'qui-icon'
+            this._iconElement = $(iconElement)
             this._applyIcon(this._icon, this._iconElement)
-            container.append(this._iconElement)
+            container.appendChild(iconElement)
 
-            let labelsContainer = $('<div></div>', {class: 'labels'})
-            container.append(labelsContainer)
+            let labelsContainer = document.createElement('div')
+            labelsContainer.className = 'labels'
+            container.appendChild(labelsContainer)
 
-            this._labelElement = $('<div></div>', {class: 'label'})
+            let labelElement = document.createElement('div')
+            labelElement.className = 'label'
+            this._labelElement = $(labelElement)
             this.setLabel(this._label)
-            labelsContainer.append(this._labelElement)
+            labelsContainer.appendChild(labelElement)
 
-            this._subLabelElement = $('<div></div>', {class: 'sub-label'})
+            let subLabelElement = document.createElement('div')
+            subLabelElement.className = 'sub-label'
+            this._subLabelElement = $(subLabelElement)
             this.setSubLabel(this._subLabel)
-            labelsContainer.append(this._subLabelElement)
+            labelsContainer.appendChild(subLabelElement)
 
-            return container
+            return $(container)
         }
 
         /**

package/js/widgets/common-widgets/combo.js

@@ -3,6 +3,7 @@ import $ from '$qui/lib/jquery.module.js'
 
 import {gettext}         from '$qui/base/i18n.js'
 import * as Theme        from '$qui/theme.js'
+import * as CSS          from '$qui/utils/css.js'
 import {asap}            from '$qui/utils/misc.js'
 import * as ObjectUtils  from '$qui/utils/object.js'
 import * as PromiseUtils from '$qui/utils/promise.js'
@@ -370,7 +371,7 @@ $.widget('qui.combo', $.qui.basewidget, {
         this._prevItemDiv = this._itemContainer.children('div.qui-combo-item.selected')
 
         if (this._prevItemDiv.length) {
-            let scrollTop = this._prevItemDiv.offset().top - this._itemContainer.offset().top +
+            let scrollTop = CSS.unscalePx(this._prevItemDiv.offset().top - this._itemContainer.offset().top) +
                             this._itemContainer.scrollTop()
             this._itemContainer.scrollTop(scrollTop)
         }
@@ -534,7 +535,7 @@ $.widget('qui.combo', $.qui.basewidget, {
         if (itemDiv) {
             itemDiv.addClass('selected')
             if (scroll) {
-                let scrollTop = itemDiv.offset().top - this._itemContainer.offset().top +
+                let scrollTop = CSS.unscalePx(itemDiv.offset().top - this._itemContainer.offset().top) +
                                 this._itemContainer.scrollTop()
                 this._itemContainer.scrollTop(scrollTop)
             }

package/js/widgets/common-widgets/progress-disk.js

@@ -113,23 +113,35 @@ $.widget('qui.progressdisk', $.qui.basewidget, {
         let iRadius = oRadius - thickness / 2
         let color = Theme.getColor(this.options.color)
 
-        this.element.width(width)
-        this.element.height(width)
-        this.element.css('line-height', width)
-
-        this._svg.setAttribute('width', width)
-        this._svg.setAttribute('height', width)
-        this._svg.setAttribute('viewBox', `0 0 ${fWidth} ${fWidth}`)
-
-        this._ring.setAttribute('cx', oRadius.toString())
-        this._ring.setAttribute('cy', oRadius.toString())
-        this._ring.setAttribute('rx', iRadius.toString())
-        this._ring.setAttribute('ry', iRadius.toString())
-        this._ring.setAttribute('stroke-width', thickness.toString())
-        this._ring.setAttribute('stroke', color)
-
-        this._cursor.setAttribute('stroke-width', thickness.toString())
-        this._cursor.setAttribute('stroke', color)
+        /* This runs on every value change, but the size only follows the radius option. jQuery's width() and height()
+         * each read the computed style, which came to about 400 ms while a 448-row list was being built. */
+        if (this._appliedWidth !== width) {
+            this._appliedWidth = width
+
+            this.element.width(width)
+            this.element.height(width)
+            this.element.css('line-height', width)
+
+            this._svg.setAttribute('width', width)
+            this._svg.setAttribute('height', width)
+            this._svg.setAttribute('viewBox', `0 0 ${fWidth} ${fWidth}`)
+
+            this._ring.setAttribute('cx', oRadius.toString())
+            this._ring.setAttribute('cy', oRadius.toString())
+            this._ring.setAttribute('rx', iRadius.toString())
+            this._ring.setAttribute('ry', iRadius.toString())
+            this._ring.setAttribute('stroke-width', thickness.toString())
+
+            this._cursor.setAttribute('stroke-width', thickness.toString())
+        }
+
+        /* The colour is still looked up every time, so a theme change lands on the next value. */
+        if (this._appliedColor !== color) {
+            this._appliedColor = color
+
+            this._ring.setAttribute('stroke', color)
+            this._cursor.setAttribute('stroke', color)
+        }
 
         if (this._curVal >= 0) {
             this._updateSVGPercent(iRadius, oRadius)

package/js/widgets/common-widgets/slider.js

@@ -1,6 +1,7 @@
 
 import $ from '$qui/lib/jquery.module.js'
 
+import * as CSS      from '$qui/utils/css.js'
 import * as Gestures from '$qui/utils/gestures.js'
 
 import * as BaseWidget from '../base-widget.js' /* Needed */
@@ -68,8 +69,8 @@ $.widget('qui.slider', $.qui.basewidget, {
                     return
                 }
 
-                let offset = widget._bar.offset()
-                let pos = pageX - offset.left
+                let barLeft = CSS.unscalePx(widget._bar.offset().left)
+                let pos = pageX - barLeft
                 pos = pos / widget._getWidth()
                 pos = widget._bestPos(pos)
 
@@ -233,7 +234,9 @@ $.widget('qui.slider', $.qui.basewidget, {
     },
 
     _getPos: function () {
-        return this._cursor.position().left / this._getWidth()
+        /* Deduced from the current value, rather than measured: the cursor is placed with a percentage and a negative
+         * margin, which no measurement reads back cleanly under a scaling factor */
+        return this._valToPos(this._curVal)
     },
 
     _setPos: function (pos) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qtoggle/qui",
   "description": "A JavaScript UI library with batteries included.",
-  "version": "1.20.1",
+  "version": "1.20.3",
   "author": {
     "name": "Calin Crisan",
     "email": "ccrisan@gmail.com"

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "qui-server"
-version = "1.20.1"
+version = "1.20.3"
 description = "A fully fledged qToggle implementation written in Python"
 authors = [
     {name = "Calin Crisan", email = "ccrisan@gmail.com"},