@thinkpixellab-public/px-vue 4.0.11 → 4.0.13

package/utils/color.js

@@ -0,0 +1,50 @@
+function hsvaEnsureObject(hOrObj, s, v, a) {
+    if (typeof hOrObj === 'object') {
+        return hOrObj;
+    }
+
+    return { h: hOrObj, s, v, a };
+}
+
+function hsvaIsEqual(hsva1, hsva2) {
+    return hsva1.h === hsva2.h && hsva1.s === hsva2.s && hsva1.v === hsva2.v && hsva1.a === hsva2.a;
+}
+
+function hsvaToHsla(hOrObj, s, v, a) {
+    const hsva = hsvaEnsureObject(hOrObj, s, v, a);
+
+    let l = ((2 - hsva.s) * hsva.v) / 2;
+    s = hsva.s;
+
+    if (l != 0) {
+        if (l == 1) {
+            s = 0;
+        } else if (l < 0.5) {
+            s = (s * hsva.v) / (l * 2);
+        } else {
+            s = (s * hsva.v) / (2 - l * 2);
+        }
+    }
+
+    return { h: hsva.h, s: s, l: l, a: hsva.a };
+}
+
+function hslaToStr(hsla, alphaEnabled = true) {
+    if (alphaEnabled) {
+        return `hsla(${hsla.h}, ${hsla.s * 100}%, ${hsla.l * 100}%, ${hsla.a})`;
+    } else {
+        return `hsl(${hsla.h}, ${hsla.s * 100}%, ${hsla.l * 100}%)`;
+    }
+}
+
+function hsvaContrastColor(hsva, light = '#FFF', dark = '#000') {
+    const THRESHOLD = 0.5;
+    const hsla = hsvaToHsla(hsva);
+    if (hsla.a < THRESHOLD) {
+        return dark;
+    }
+
+    return hsla.l > THRESHOLD ? dark : light;
+}
+
+export { hsvaEnsureObject, hsvaIsEqual, hsvaToHsla, hslaToStr, hsvaContrastColor };

package/utils/drag.js

@@ -267,13 +267,26 @@ function Drag(element, options) {
             coords.y = nativeEvent.clientY;
         }
 
+        const x = this.thresholdMet && this.startEv && this.lock == 'y' ? this.startEv.x : coords.x;
+        const y = this.thresholdMet && this.startEv && this.lock == 'x' ? this.startEv.y : coords.y;
+
         const ev = {
-            x: this.thresholdMet && this.startEv && this.lock == 'y' ? this.startEv.x : coords.x,
-            y: this.thresholdMet && this.startEv && this.lock == 'x' ? this.startEv.y : coords.y,
+            x,
+            y,
             native: nativeEvent,
             lock: this.lock,
         };
 
+        if (this.thresholdMet && this.element) {
+            const rect = element.getBoundingClientRect();
+            ev.elementX = x - rect.left;
+            ev.elementY = y - rect.top;
+            ev.elementWidth = rect.width;
+            ev.elementHeight = rect.height;
+            ev.elementXPos = ev.elementX / rect.width;
+            ev.elementYPos = ev.elementY / rect.height;
+        }
+
         return ev;
     };
 
@@ -282,14 +295,14 @@ function Drag(element, options) {
     this.addElementEvents = () => {
         this.element.addEventListener(
             this.supportsTouch ? 'touchstart' : 'mousedown',
-            this.onStart
+            this.onStart,
         );
     };
 
     this.removeElementEvents = () => {
         this.element.removeEventListener(
             this.supportsTouch ? 'touchstart' : 'mousedown',
-            this.onStart
+            this.onStart,
         );
     };