@qtoggle/qui 1.20.2 → 1.20.3

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/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/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.2",
+  "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.2"
+version = "1.20.3"
 description = "A fully fledged qToggle implementation written in Python"
 authors = [
     {name = "Calin Crisan", email = "ccrisan@gmail.com"},