fix issues

pixijs · Nov 5, 2023 · 9795097 · 9795097
1 parent daba9c8
commit 9795097
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 25 deletions.
diff --git a/src/DoubleSlider.ts b/src/DoubleSlider.ts
@@ -160,7 +160,7 @@ export class DoubleSlider extends SliderBase
             }
         }
 
-        const progress = this.validate((x / this.bg.width) * 100);
+        const progress = this.validate((x / this.bg?.width) * 100);
 
         if (this.activeValue === 'value1')
         {
@@ -222,7 +222,7 @@ export class DoubleSlider extends SliderBase
 
     protected updateSlider1()
     {
-        this._slider1.x = ((this.bg.width - this._slider1.width) / 100) * this.progressStart;
+        this._slider1.x = ((this.bg?.width - this._slider1.width) / 100) * this.progressStart;
 
         if (this._slider2 && this._slider1.x > this._slider2.x)
         {
@@ -243,7 +243,7 @@ export class DoubleSlider extends SliderBase
 
     protected updateSlider2()
     {
-        this._slider2.x = ((this.bg.width - this._slider2.width) / 100) * this.progress;
+        this._slider2.x = ((this.bg?.width - this._slider2.width) / 100) * this.progress;
 
         if (this._slider2.x < this._slider1.x)
         {

diff --git a/src/Slider.ts b/src/Slider.ts
@@ -89,7 +89,7 @@ export class Slider extends SliderBase
         const obj = event.currentTarget as DragObject;
         const { x } = obj.parent.worldTransform.applyInverse(event.global);
 
-        this.progress = this.validate((x / this.bg.width) * 100);
+        this.progress = this.validate((x / this.bg?.width) * 100);
         this.value = this.min + (((this.max - this.min) / 100) * this.progress);
     }
 
@@ -100,7 +100,7 @@ export class Slider extends SliderBase
 
     protected updateSlider()
     {
-        this._slider1.x = ((this.bg.width - this._slider1.width) / 100) * this.progress;
+        this._slider1.x = ((this.bg?.width - this._slider1.width) / 100) * this.progress;
 
         if (this.sliderOptions.showValue)
         {

diff --git a/src/SliderBase.ts b/src/SliderBase.ts
@@ -165,7 +165,7 @@ export class SliderBase extends ProgressBar
             slider.anchor.set(0.5);
         }
 
-        container.y = this.bg.height / 2;
+        container.y = this.bg?.height / 2 ?? 0;
 
         this.addChild(container);
 

diff --git a/src/stories/slider/DoubleSliderGraphics.stories.ts b/src/stories/slider/DoubleSliderGraphics.stories.ts
@@ -24,7 +24,6 @@ const args = {
     border: 5,
     handleBorder: 3,
     showValue: true,
-    showFill: true,
     onChange: action('Slider')
 };
 
@@ -46,7 +45,6 @@ export const Double: StoryFn = ({
     handleBorder,
     showValue,
     onChange,
-    showFill
 }: any) =>
 {
     const view = new List({ type: 'vertical', elementsMargin: 10 });
@@ -84,7 +82,7 @@ export const Double: StoryFn = ({
 
     const doubleSlider = new DoubleSlider({
         bg,
-        fill: showFill ? fill : null,
+        fill,
         slider1,
         slider2,
         min,

diff --git a/src/stories/slider/DoubleSliderNineSlicePlane.stories.ts b/src/stories/slider/DoubleSliderNineSlicePlane.stories.ts
@@ -14,7 +14,6 @@ const args = {
     value2: 85,
     fontSize: 20,
     showValue: true,
-    showFill: true,
     width: 500,
     height: 38,
     onChange: action('Slider')
@@ -29,7 +28,6 @@ export const Double: StoryFn = ({
     fontColor,
     onChange,
     showValue,
-    showFill,
     width,
     height
 }: any) =>
@@ -43,7 +41,7 @@ export const Double: StoryFn = ({
     // Component usage !!!
         const singleSlider = new DoubleSlider({
             bg: 'slider_bg.png',
-            fill: showFill ? 'slider_progress.png' : null,
+            fill: 'slider_progress.png',
             slider1: 'slider.png',
             slider2: 'slider.png',
             nineSlicePlane: {

diff --git a/src/stories/slider/DoubleSliderSprite.stories.ts b/src/stories/slider/DoubleSliderSprite.stories.ts
@@ -14,11 +14,10 @@ const args = {
     value2: 85,
     fontSize: 20,
     showValue: true,
-    showFill: true,
     onChange: action('Slider')
 };
 
-export const Double: StoryFn = ({ min, max, value1, value2, fontSize, fontColor, showValue, onChange, showFill }: any) =>
+export const Double: StoryFn = ({ min, max, value1, value2, fontSize, fontColor, showValue, onChange }: any) =>
 {
     const view = new Container();
     const assets = ['slider_bg.png', 'slider.png', 'slider_progress.png'];
@@ -28,7 +27,7 @@ export const Double: StoryFn = ({ min, max, value1, value2, fontSize, fontColor,
     // Component usage !!!
         const doubleSlider = new DoubleSlider({
             bg: 'slider_bg.png',
-            fill: showFill ? 'slider_progress.png' : null,
+            fill: 'slider_progress.png',
             slider1: 'slider.png',
             slider2: 'slider.png',
             min,

diff --git a/src/stories/slider/SliderGraphics.stories.ts b/src/stories/slider/SliderGraphics.stories.ts
@@ -23,7 +23,6 @@ const args = {
     border: 3,
     handleBorder: 3,
     showValue: true,
-    showFill: true,
     onChange: action('Slider')
 };
 
@@ -44,7 +43,6 @@ export const Single: StoryFn = ({
     border,
     onChange,
     showValue,
-    showFill
 }: any) =>
 {
     const view = new List({ type: 'vertical', elementsMargin: 10 });
@@ -76,7 +74,7 @@ export const Single: StoryFn = ({
     // Component usage
     const singleSlider = new Slider({
         bg,
-        fill: showFill ? fill : null,
+        fill,
         slider,
         min,
         max,

diff --git a/src/stories/slider/SliderNineSlicePlane.stories.ts b/src/stories/slider/SliderNineSlicePlane.stories.ts
@@ -13,7 +13,6 @@ const args = {
     value: 50,
     fontSize: 20,
     showValue: true,
-    showFill: true,
     width: 500,
     height: 38,
     onChange: action('Slider')
@@ -27,7 +26,6 @@ export const Single: StoryFn = ({
     fontColor,
     onChange,
     showValue,
-    showFill,
     width,
     height
 }: any) =>
@@ -41,7 +39,7 @@ export const Single: StoryFn = ({
     // Component usage !!!
         const singleSlider = new Slider({
             bg: 'slider_bg.png',
-            fill: showFill ? 'slider_progress.png' : null,
+            fill: 'slider_progress.png',
             slider: 'slider.png',
             nineSlicePlane: {
                 bg: [250, 19, 250, 19],

diff --git a/src/stories/slider/SliderSprite.stories.ts b/src/stories/slider/SliderSprite.stories.ts
@@ -3,7 +3,6 @@ import { argTypes, getDefaultArgs } from '../utils/argTypes';
 import { Slider } from '../../Slider';
 import { centerElement } from '../../utils/helpers/resize';
 import { preload } from '../utils/loader';
-import { Container } from '@pixi/display';
 import type { StoryFn } from '@storybook/types';
 import { List } from '../../List';
 
@@ -14,12 +13,11 @@ const args = {
     value: 50,
     fontSize: 20,
     showValue: true,
-    showFill: true,
     amount: 1,
     onChange: action('Slider')
 };
 
-export const Single: StoryFn = ({ min, max, value, fontSize, fontColor, onChange, showValue, showFill, amount }: any) =>
+export const Single: StoryFn = ({ min, max, value, fontSize, fontColor, onChange, showValue, amount }: any) =>
 {
     const view = new List({ type: 'vertical', elementsMargin: 10 });
 
@@ -32,7 +30,7 @@ export const Single: StoryFn = ({ min, max, value, fontSize, fontColor, onChange
             // Component usage !!!
             const singleSlider = new Slider({
                 bg: 'slider_bg.png',
-                fill: showFill ? 'slider_progress.png' : null,
+                fill: 'slider_progress.png',
                 slider: 'slider.png',
                 min,
                 max,