@vaadin-component-factory/vcf-slider - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

out-tsc/src/vcf-slider.d.ts

@@ -359,2 +359,3 @@ import { PropertyValues, LitElement, TemplateResult } from 'lit';
     private knobCount;
+    private decimalCount;
     private get xy();
@@ -369,3 +370,3 @@ private get pageXY();
     /** @private */
-    passive: boolean;
+    passive: string;
     /** @private */
@@ -399,2 +400,5 @@ handleEvent(e: Event): void;
     private drag;
+    private round;
+    private getMultiplier;
+    private getDecimalCount;
     private get tooltip();
@@ -401,0 +405,0 @@ private tooltipElement;

out-tsc/src/vcf-slider.js

@@ -55,4 +55,5 @@ var Slider_1;
         this.knobCount = 1;
+        this.decimalCount = 0;
         /** @private */
-        this.passive = true;
+        this.passive = 'true';
         this.startDrag = (e) => {
@@ -102,27 +103,43 @@ const { knobsContainer, xy } = this;
                 // Calculate knob position
-                const pageXY = this.getPointerXY(e);
-                if (pageXY && originalPointerXY) {
-                    let newPositionXY = originalKnobOffsetXY + (pageXY - originalPointerXY);
-                    let startLimit = rtl ? newPositionXY >= start : newPositionXY <= start;
-                    let endLimit = rtl ? newPositionXY <= end : newPositionXY >= end;
-                    newPositionXY = startLimit ? start : endLimit ? end : newPositionXY;
-                    // Calculate new value
-                    const { min, max, step, values } = this;
-                    const length = max - min;
-                    const pct = (newPositionXY + knobSize / 2) / lineSize;
-                    let value = Math.round(pct * length + min);
-                    if (rtl)
-                        value = max - value;
-                    // Step
-                    if (value === min || (value > min && Math.abs(value) % step === 0)) {
-                        // Set new value & knob position
-                        if (values[i] !== value) {
-                            values[i] = value;
-                            this.value = this.knobs === 1 ? value : [...values];
-                            this.setKnobPostion(i);
+                requestAnimationFrame(() => {
+                    const pageXY = this.getPointerXY(e);
+                    if (pageXY && originalPointerXY) {
+                        let newPositionXY = originalKnobOffsetXY + (pageXY - originalPointerXY);
+                        let startLimit = rtl ? newPositionXY >= start : newPositionXY <= start;
+                        let endLimit = rtl ? newPositionXY <= end : newPositionXY >= end;
+                        newPositionXY = startLimit ? start : endLimit ? end : newPositionXY;
+                        // Calculate new value
+                        let multiplier = 0;
+                        let { min, max, step, values } = this;
+                        const length = max - min;
+                        const pct = (newPositionXY + knobSize / 2) / lineSize;
+                        let value = pct * length + min;
+                        if (rtl)
+                            value = max - value;
+                        if (this.decimalCount) {
+                            // Round to number of decimal places as step
+                            value = this.round(value);
+                            // To avoid problems with decimal math, multiplying to operate with integers.
+                            multiplier = Math.max(this.getMultiplier(value), this.getMultiplier(step), this.getMultiplier(min));
+                            values[i] = Math.round(values[i] * multiplier);
+                            value = Math.round(value * multiplier);
+                            step *= multiplier;
+                            min *= multiplier;
                         }
-                        // Change line colors
-                        this.setLineColors();
+                        else {
+                            value = Math.round(value);
+                        }
+                        // Step
+                        if (value === min || (value > min && Math.abs(value) % step === 0)) {
+                            // Set new value & knob position
+                            if (values[i] !== value) {
+                                if (this.decimalCount)
+                                    value /= multiplier;
+                                values[i] = value;
+                                this.value = this.knobs === 1 ? value : [...values];
+                                this.setKnobPostion(i);
+                            }
+                        }
                     }
-                }
+                });
             }
@@ -135,3 +152,3 @@ };
     static get version() {
-        return '1.0.7';
+        return '1.0.8';
     }
@@ -345,2 +362,5 @@ get xy() {
         const { ranges, step } = this;
+        if (props.has('step')) {
+            this.decimalCount = this.getDecimalCount(step);
+        }
         if (props.has('tooltips') && this.tooltips) {
@@ -359,8 +379,2 @@ this.knobIndexes.forEach(i => this.setTooltipPosition(i, this.values));
         }
-        if (props.has('step')) {
-            if (!Number.isSafeInteger(step))
-                this.step = Math.round(step);
-            if (step < 1)
-                this.step = 1;
-        }
         if (props.has('value') || props.has('vertical')) {
@@ -440,3 +454,3 @@ if (!this.isSorted())
             if (tooltipElement)
-                tooltipElementValue.innerText = `${values[i]}`;
+                tooltipElementValue.innerText = `${values[i].toFixed(this.decimalCount)}`;
         });
@@ -562,2 +576,16 @@ }
     }
+    round(value) {
+        return parseFloat(value.toFixed(this.decimalCount));
+    }
+    getMultiplier(value) {
+        let result = 0;
+        if (!isNaN(value))
+            result = 10 ** this.getDecimalCount(value);
+        return result;
+    }
+    getDecimalCount(value) {
+        const s = String(value);
+        const i = s.indexOf('.');
+        return i === -1 ? 0 : s.length - i - 1;
+    }
     get tooltip() {
@@ -564,0 +592,0 @@ return this.tooltipElement(this.knobIndex);

package.json

 {
   "name": "@vaadin-component-factory/vcf-slider",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Range slider web component for the Vaadin platform.",
@@ -64,3 +64,3 @@ "main": "out-tsc/vcf-slider.js",
     "@typescript-eslint/parser": "^5.42.1",
-    "@vaadin-component-factory/vcf-anchor-nav": "^23.2.1",
+    "@vaadin-component-factory/vcf-anchor-nav": "^23.3.0",
     "@vaadin-component-factory/vcf-element-util": "^0.3.5",
@@ -67,0 +67,0 @@ "@vaadin/vaadin-lumo-styles": "^23.3.1",

src/vcf-slider.ts

@@ -67,3 +67,3 @@ import { html, css, PropertyValues, LitElement, render, TemplateResult } from 'lit';
   protected static get version() {
-    return '1.0.7';
+    return '1.0.8';
   }
@@ -75,2 +75,3 @@
   private knobCount = 1;
+  private decimalCount = 0;
 
@@ -292,2 +293,6 @@ private get xy() {
 
+    if (props.has('step')) {
+      this.decimalCount = this.getDecimalCount(step);
+    }
+
     if (props.has('tooltips') && this.tooltips) {
@@ -307,7 +312,2 @@ this.knobIndexes.forEach(i => this.setTooltipPosition(i, this.values));
 
-    if (props.has('step')) {
-      if (!Number.isSafeInteger(step)) this.step = Math.round(step);
-      if (step < 1) this.step = 1;
-    }
-
     if (props.has('value') || props.has('vertical')) {
@@ -320,3 +320,3 @@ if (!this.isSorted()) this.sort();
   /** @private */
-  passive = true;
+  passive = 'true';
 
@@ -395,3 +395,3 @@ /** @private */
       const tooltipElementValue = tooltipElement.firstElementChild as HTMLSpanElement;
-      if (tooltipElement) tooltipElementValue.innerText = `${values[i]}`;
+      if (tooltipElement) tooltipElementValue.innerText = `${values[i].toFixed(this.decimalCount)}`;
     });
@@ -577,32 +577,64 @@ }
       // Calculate knob position
-      const pageXY = this.getPointerXY(e);
-      if (pageXY && originalPointerXY) {
-        let newPositionXY = originalKnobOffsetXY + (pageXY - originalPointerXY);
-        let startLimit = rtl ? newPositionXY >= start : newPositionXY <= start;
-        let endLimit = rtl ? newPositionXY <= end : newPositionXY >= end;
-        newPositionXY = startLimit ? start : endLimit ? end : newPositionXY;
+      requestAnimationFrame(() => {
+        const pageXY = this.getPointerXY(e);
+        if (pageXY && originalPointerXY) {
+          let newPositionXY = originalKnobOffsetXY + (pageXY - originalPointerXY);
+          let startLimit = rtl ? newPositionXY >= start : newPositionXY <= start;
+          let endLimit = rtl ? newPositionXY <= end : newPositionXY >= end;
+          newPositionXY = startLimit ? start : endLimit ? end : newPositionXY;
 
-        // Calculate new value
-        const { min, max, step, values } = this;
-        const length = max - min;
-        const pct = (newPositionXY + knobSize / 2) / lineSize;
-        let value = Math.round(pct * length + min);
-        if (rtl) value = max - value;
+          // Calculate new value
+          let multiplier = 0;
+          let { min, max, step, values } = this;
+          const length = max - min;
+          const pct = (newPositionXY + knobSize / 2) / lineSize;
+          let value = pct * length + min;
 
-        // Step
-        if (value === min || (value > min && Math.abs(value) % step === 0)) {
-          // Set new value & knob position
-          if (values[i] !== value) {
-            values[i] = value;
-            this.value = this.knobs === 1 ? value : [...values];
-            this.setKnobPostion(i);
+          if (rtl) value = max - value;
+
+          if (this.decimalCount) {
+            // Round to number of decimal places as step
+            value = this.round(value);
+
+            // To avoid problems with decimal math, multiplying to operate with integers.
+            multiplier = Math.max(this.getMultiplier(value), this.getMultiplier(step), this.getMultiplier(min));
+            values[i] = Math.round(values[i] * multiplier);
+            value = Math.round(value * multiplier);
+            step *= multiplier;
+            min *= multiplier;
+          } else {
+            value = Math.round(value);
           }
 
-          // Change line colors
-          this.setLineColors();
+          // Step
+          if (value === min || (value > min && Math.abs(value) % step === 0)) {
+            // Set new value & knob position
+            if (values[i] !== value) {
+              if (this.decimalCount) value /= multiplier;
+              values[i] = value;
+              this.value = this.knobs === 1 ? value : [...values];
+              this.setKnobPostion(i);
+            }
+          }
         }
-      }
+      });
     }
   };
 
+  private round(value: number) {
+    return parseFloat(value.toFixed(this.decimalCount));
+  }
+
+  private getMultiplier(value: number) {
+    let result = 0;
+    if (!isNaN(value)) result = 10 ** this.getDecimalCount(value);
+    return result;
+  }
+
+  private getDecimalCount(value: number) {
+    const s = String(value);
+    const i = s.indexOf('.');
+    return i === -1 ? 0 : s.length - i - 1;
+  }
+
   private get tooltip() {
@@ -609,0 +641,0 @@ return this.tooltipElement(this.knobIndex) as HTMLElement;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210226

increased by2.31%

Lines of code

2335

increased by2.59%

No dependency changes