feat(GUI): Add color transition mode to the UIButton (#212)

You can set the button transition mode to color mode.
Orillusion · Jun 10, 2023 · 56e5f03 · 56e5f03
1 parent 775ebbc
commit 56e5f03
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 14 deletions.
diff --git a/samples/gui/Sample_UIButton.ts b/samples/gui/Sample_UIButton.ts
@@ -1,6 +1,6 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
 import { createExampleScene } from "@samples/utils/ExampleScene";
-import { Engine3D, Object3DUtil, Object3D, GUISpace, WorldPanel, ViewPanel, UIButton, UITextField, Color, TextAnchor, PointerEvent3D, UIImage, ImageType, ComponentBase, View3D, UITransform, UIPanel } from "@orillusion/core";
+import { Engine3D, Object3DUtil, Object3D, GUISpace, WorldPanel, ViewPanel, UIButton, UITextField, Color, TextAnchor, PointerEvent3D, UIImage, ImageType, ComponentBase, View3D, UITransform, UIPanel, UIInteractiveStyle, UIButtonTransition } from "@orillusion/core";
 
 export class Sample_UIButton {
     button: UIButton;
@@ -55,6 +55,8 @@ export class Sample_UIButton {
 
             button.uiTransform.resize(200, 60);
             button.uiTransform.y = -100;
+            button.transition = UIButtonTransition.SPRITE;
+
             this.button = button;
 
             let buttonLabel = quad.addComponent(UITextField);
@@ -69,6 +71,28 @@ export class Sample_UIButton {
             quad.addEventListener(PointerEvent3D.PICK_DOWN_GUI, this.onDown, this);
         }
 
+        {
+            let quad = new Object3D();
+            panelRoot.addChild(quad);
+            let button: UIButton = quad.addComponent(UIButton);
+            button.normalSprite = Engine3D.res.getGUISprite('button-up');
+
+            button.uiTransform.resize(200, 60);
+            button.uiTransform.y = 200;
+
+            let buttonLabel = quad.addComponent(UITextField);
+            buttonLabel.text = 'Color Button';
+            buttonLabel.fontSize = 24;
+            buttonLabel.color = new Color(1, 0.8, 0.4);
+            buttonLabel.alignment = TextAnchor.MiddleCenter;
+
+            button.setStyleColor(UIInteractiveStyle.NORMAL, new Color(1, 0.5, 0.5, 1));
+            button.setStyleColor(UIInteractiveStyle.DOWN, new Color(0.5, 0.5, 1, 1));
+            button.setStyleColor(UIInteractiveStyle.OVER, new Color(0.5, 1, 0.5, 1));
+            button.setStyleColor(UIInteractiveStyle.DISABLE, new Color(0.5, 0.5, 0.5, 1));
+            button.transition = UIButtonTransition.COLOR;
+        }
+
         {
             let imageQuad = new Object3D();
             panelRoot.addChild(imageQuad);

diff --git a/samples/gui/panel/GUIPanelPOI.ts b/samples/gui/panel/GUIPanelPOI.ts
@@ -93,8 +93,8 @@ export class GUIPanelPOI {
         {
             let iconNode = uiChild.addChild(new Object3D()) as Object3D;
             let icon = this.addImage(iconNode, '', 100, 100, 1, 1, 1);
-            icon.uiTransform.x = 30;
-            icon.uiTransform.y = -30;
+            icon.uiTransform.x = -75;
+            icon.uiTransform.y = 25;
             this._icon = icon;
             this.updateFrame();
         }

diff --git a/src/components/gui/uiComponents/UIButton.ts b/src/components/gui/uiComponents/UIButton.ts
@@ -1,27 +1,39 @@
-import { Object3D } from '../../../core/entities/Object3D';
+import { Color } from '../../..';
+import { Object3D } from '../../../core/entities/Object3D';
 import { ImageType } from '../GUIConfig';
 import { GUISprite } from '../core/GUISprite';
 import { UIInteractiveStyle } from './IUIInteractive';
 import { UIImage } from './UIImage';
 import { UIInteractive } from './UIInteractive';
 
+export enum UIButtonTransition {
+    NONE = 0,
+    COLOR = 1 << 0,
+    SPRITE = 1 << 1,
+}
+
 /**
  * The basic components used in the GUI to respond to user interaction behavior and have an image component
  * @group GPU GUI
  */
 export class UIButton extends UIInteractive {
     protected _spriteMap: Map<UIInteractiveStyle, GUISprite>;
+    protected _colorMap: Map<UIInteractiveStyle, Color>;
     protected _image: UIImage;
     private _isCreateImage: boolean;
+    private _transition: UIButtonTransition = UIButtonTransition.SPRITE;
+
     init(param?: any) {
         super.init(param);
         this._interactive = true;
         this._spriteMap = new Map<UIInteractiveStyle, GUISprite>();
+        this._colorMap = new Map<UIInteractiveStyle, Color>();
         this._image = this.object3D.getComponent(UIImage);
         this._isCreateImage = this._image == null;
         if (!this._image) {
             this._image = this.object3D.addComponent(UIImage);
         }
+        this.imageType = ImageType.Sliced;
     }
 
     onEnable() {
@@ -32,6 +44,37 @@ export class UIButton extends UIInteractive {
         this.mouseStyle = UIInteractiveStyle.DISABLE;
     }
 
+    public set transition(value: UIButtonTransition) {
+        if (this._transition != value) {
+            this._transition = value;
+            this.validateStyle(this._style, true);
+        }
+    }
+
+    public get transition() {
+        return this._transition;
+    }
+
+    public get imageType() {
+        return this._image.imageType;
+    }
+
+    public set imageType(value: ImageType) {
+        this._image.imageType = value;
+    }
+
+    public setStyleColor(style: UIInteractiveStyle, color: Color): this {
+        this._colorMap.set(style, color);
+        if (this._style == style) {
+            this.validateStyle(this._style, true);
+        }
+        return this;
+    }
+
+    public getStyleColor(style: UIInteractiveStyle): Color {
+        return this._colorMap.get(style);
+    }
+
     public set mouseStyle(value: UIInteractiveStyle) {
         super.mouseStyle = value;
         this.validateStyle(value, true);
@@ -82,13 +125,14 @@ export class UIButton extends UIInteractive {
     }
 
     protected validateStyle(style: UIInteractiveStyle, force?: boolean) {
-        if (this._style != style || force) {
-            if (!this._image) {
-                this._image = this.object3D.getComponent(UIImage);
-                this._image && (this._image.imageType = ImageType.Sliced);
-            }
+        if (this._transition & UIButtonTransition.SPRITE) {
             let texture = this._spriteMap.get(style);
-            this._image && (this._image.sprite = texture);
+            this._image.sprite = texture;
+        }
+
+        if (this._transition & UIButtonTransition.COLOR) {
+            let color = this._colorMap.get(style);
+            color && (this._image.color = color);
         }
     }
 
@@ -99,10 +143,18 @@ export class UIButton extends UIInteractive {
 
     public copyComponent(from: this): this {
         super.copyComponent(from);
-        this.downSprite = from.downSprite;
-        this.normalSprite = from.normalSprite;
-        this.disableSprite = from.disableSprite;
-        this.overSprite = from.overSprite;
+
+        this.imageType = from.imageType;
+        this.transition = from.transition;
+        //clone sprite map
+        from._spriteMap.forEach((v, k) => {
+            v && this._spriteMap.set(k, v);
+        })
+        //clone color map
+        from._colorMap.forEach((v, k) => {
+            v && this._colorMap.set(k, v.clone());
+        })
+        //
         this.mouseStyle = from.mouseStyle;
         return this;
     }

diff --git a/src/math/Color.ts b/src/math/Color.ts
@@ -280,6 +280,20 @@ export class Color {
         return this;
     }
 
+
+    /**
+     * copy color from vector3 or vector4
+     * @param value { x: number, y: number, z: number, w?: number }
+     * @returns 
+     */
+    public copyFromVector(value: { x: number, y: number, z: number, w?: number }): this {
+        this.r = value.x;
+        this.g = value.y;
+        this.b = value.z;
+        this.a = value.w;
+        return this;
+    }
+
     /**
      * update this color rgb from hexadecimal no alpha
      * @param hexColor rgb color