@flashist/appframework 0.0.3

package/src/display/views/button/BaseBtnView.ts

@@ -0,0 +1,230 @@
+import {ObjectTools} from "@flashist/fcore";
+
+import {DisplayResizeTools, FContainer, Graphics, Point, Sprite, Texture} from "@flashist/flibs";
+
+import {IToggleGroupItem} from "../togglegroup/IToggleGroupItem";
+import {BaseBtn} from "./BaseBtn";
+import {IButtonViewConfig} from "./IButtonViewConfig";
+import {ResizableContainer} from "../resize/ResizableContainer";
+import {BaseBtnState} from "./BaseBtnState";
+import {BaseBtnEvent} from "./BaseBtnEvent";
+import {DefaultButtonViewConfig} from "./DefaultButtonViewConfig";
+
+export class BaseBtnView<DataType extends object = object> extends ResizableContainer<DataType> implements IToggleGroupItem {
+
+    private static readonly DEFAULT_CONFIG: IButtonViewConfig = new DefaultButtonViewConfig();
+
+    protected static DEFAULT_SIZE: Point = new Point(30, 24);
+
+    private _config: IButtonViewConfig;
+
+    public id: string;
+
+    protected btn: BaseBtn;
+
+    protected contentCont: FContainer;
+
+    protected bg: Graphics;
+    protected icon: Sprite;
+    protected pressView: Sprite;
+    protected overView: Sprite;
+
+    constructor(config: IButtonViewConfig) {
+        super(config);
+    }
+
+    protected construction(config: IButtonViewConfig): void {
+        super.construction(config);
+
+        this._config = config;
+        if (!this._config) {
+            this._config = BaseBtnView.DEFAULT_CONFIG;
+        }
+        ObjectTools.copyProps(this._config, BaseBtnView.DEFAULT_CONFIG, {ignoreExistedProperties: true});
+
+        this.contentCont = new FContainer();
+        this.addChild(this.contentCont);
+
+        this.bg = new Graphics();
+        this.contentCont.addChild(this.bg);
+        this.bg.beginFill(0x000000);
+        this.bg.drawRect(0, 0, 10, 10);
+        this.bg.alpha = 0;
+
+        this.pressView = new Sprite();
+        this.contentCont.addChild(this.pressView);
+
+        this.overView = new Sprite();
+        this.contentCont.addChild(this.overView);
+
+        this.icon = new Sprite();
+        this.contentCont.addChild(this.icon);
+
+        this.btn = new BaseBtn();
+        this.btn.hitArea = this;
+        // this.btn.commitStateDataCallback = () => this.commitStateData();
+
+        if (config.size) {
+            this.resize(config.size.x, config.size.y);
+        } else {
+            this.resize(BaseBtnView.DEFAULT_SIZE.x, BaseBtnView.DEFAULT_SIZE.y);
+        }
+
+        this.commitStateData();
+    }
+
+    destruction(): void {
+        super.destruction();
+
+        if (this.btn) {
+            this.btn.destruction();
+        }
+    }
+
+    protected addListeners(): void {
+        super.addListeners();
+
+        this.eventListenerHelper.addEventListener(
+            this.btn,
+            BaseBtnEvent.STATE_CHANGE,
+            this.onBtnStateChange
+        );
+
+        this.eventListenerHelper.addEventListener(
+            this.btn,
+            BaseBtnEvent.SELECTED_CHANGE,
+            this.onBtnSelectedChange
+        );
+    }
+
+    protected onBtnStateChange(): void {
+        this.commitStateData();
+
+        this.emit(BaseBtnEvent.STATE_CHANGE);
+    }
+
+    protected onBtnSelectedChange(): void {
+        this.emit(BaseBtnEvent.SELECTED_CHANGE);
+    }
+
+
+    protected commitData(): void {
+        super.commitData();
+
+        if (this.config.pressTextureId) {
+            this.pressView.texture = Texture.from(this.config.pressTextureId);
+        }
+
+        if (this.config.overTextureId) {
+            this.overView.texture = Texture.from(this.config.overTextureId);
+        }
+
+        if (this.config.iconTextureId) {
+            this.icon.texture = Texture.from(this.config.iconTextureId);
+        }
+
+        this.commitStateData();
+    }
+
+    protected commitStateData(): void {
+
+        this.contentCont.visible = true;
+        this.pressView.visible = false;
+        this.overView.visible = false;
+
+        let newAlpha: number = 1;
+
+        switch (this.btn.state) {
+            case BaseBtnState.NORMAL:
+                if (this.config.alphaNormal) {
+                    newAlpha = this.config.alphaNormal;
+                }
+                break;
+            case BaseBtnState.OVER:
+                if (this.config.alphaOver) {
+                    newAlpha = this.config.alphaOver;
+                }
+                this.overView.visible = true;
+                break;
+            case BaseBtnState.PRESS:
+                this.pressView.visible = true;
+                break;
+
+            case BaseBtnState.SELECTED_NORMAL:
+                if (this.config.alphaNormal) {
+                    newAlpha = this.config.alphaNormal;
+                }
+                this.pressView.visible = true;
+                break;
+            case BaseBtnState.SELECTED_OVER:
+                if (this.config.alphaOver) {
+                    newAlpha = this.config.alphaOver;
+                }
+
+                this.overView.visible = true;
+                this.pressView.visible = true;
+                break;
+            case BaseBtnState.SELECTED_PRESS:
+                this.pressView.visible = true;
+                break;
+            default:
+                this.contentCont.visible = true;
+                break;
+        }
+
+        this.alpha = newAlpha;
+
+        if (this.isConstructed) {
+            this.arrange();
+        }
+    }
+
+    public get selected(): boolean {
+        return this.btn.selected;
+    }
+
+    public set selected(value: boolean) {
+        if (value === this.btn.selected) {
+            return;
+        }
+
+        this.btn.selected = value;
+    }
+
+    protected arrange(): void {
+        super.arrange();
+
+        this.bg.width = this.resizeSize.x;
+        this.bg.height = this.resizeSize.y;
+
+        this.icon.scale.set(1, 1);
+        DisplayResizeTools.scaleObject(
+            this.icon,
+            this.resizeSize.x - (this.config.iconPadding.x * 2),
+            this.resizeSize.y - (this.config.iconPadding.y * 2)
+        );
+        this.overView.scale.set(1, 1);
+        DisplayResizeTools.scaleObject(this.overView, this.resizeSize.x, this.resizeSize.y);
+        this.pressView.scale.set(1, 1);
+        DisplayResizeTools.scaleObject(this.pressView, this.resizeSize.x, this.resizeSize.y);
+
+        this.overView.x = Math.floor(this.bg.x + ((this.bg.width - this.overView.width) / 2));
+        this.overView.y = Math.floor(this.bg.y + ((this.bg.height - this.overView.height) / 2));
+
+        this.pressView.x = Math.floor(this.bg.x + ((this.bg.width - this.pressView.width) / 2));
+        this.pressView.y = Math.floor(this.bg.y + ((this.bg.height - this.pressView.height) / 2));
+
+        this.icon.x = Math.floor(this.bg.x + ((this.bg.width - this.icon.width) / 2));
+        this.icon.y = Math.floor(this.bg.y + ((this.bg.height - this.icon.height) / 2));
+    }
+
+    get config(): IButtonViewConfig {
+        return this._config;
+    }
+
+    set config(value: IButtonViewConfig) {
+        this._config = value;
+
+        this.commitData();
+    }
+}

package/src/display/views/button/DefaultButtonViewConfig.ts

@@ -0,0 +1,10 @@
+import {Point} from "@flashist/flibs";
+
+import {IButtonViewConfig} from "./IButtonViewConfig";
+
+export class DefaultButtonViewConfig implements IButtonViewConfig {
+    iconPadding: Point = new Point();
+    iconTextureId: string = "";
+    pressTextureId: string = "tools_press_bg.png";
+    overTextureId: string = "tools_over_bg.png";
+}

package/src/display/views/button/IButtonViewConfig.ts

@@ -0,0 +1,16 @@
+import {Point} from "@flashist/flibs";
+
+export interface IButtonViewConfig {
+    iconTextureId?: string;
+    iconPadding?: Point;
+    pressTextureId?: string;
+    overTextureId?: string;
+
+    size?: {
+        x: number,
+        y: number
+    };
+
+    alphaNormal?: number;
+    alphaOver?: number;
+}

package/src/display/views/button/ISimpleButtonConfig.ts

@@ -0,0 +1,22 @@
+import {IFLabelConfig} from "@flashist/flibs";
+
+export interface ISimpleButtonConfig {
+    bgConfig?: {
+        image?: {
+            imageId: string;
+        };
+
+        vector?: {
+            bgColor: number;
+            overBgColor: number;
+            bgAlpha: number;
+            bgBorderColor: number;
+            bgBorderAlpha: number;
+            bgBorderWidth: number;
+        }
+
+        resizeBg: boolean;
+    };
+
+    labelConfig?: IFLabelConfig;
+}

package/src/display/views/button/SimpleButtonState.ts

@@ -0,0 +1,31 @@
+export class SimpleButtonState {
+    public static NORMAL:string = "normal";
+    public static OVER:string = "over";
+    public static PRESS:string = "press";
+    public static DISABLED:string = "disabled";
+
+    public static SELECTED_NORMAL:string = "selected_normal";
+    public static SELECTED_OVER:string = "selected_over";
+    public static SELECTED_PRESS:string = "selected_press";
+    public static SELECTED_DISABLED:string = "selected_disabled";
+
+    public static NORMAL_TO_SELECTED_MAP = ((): any => {
+        let result = {};
+        result[SimpleButtonState.NORMAL] = SimpleButtonState.SELECTED_NORMAL;
+        result[SimpleButtonState.OVER] = SimpleButtonState.SELECTED_OVER;
+        result[SimpleButtonState.PRESS] = SimpleButtonState.SELECTED_PRESS;
+        result[SimpleButtonState.DISABLED] = SimpleButtonState.SELECTED_DISABLED;
+
+        return result;
+    })();
+
+    public static SELECTED_TO_NORMAL_MAP = ((): any => {
+        let result = {};
+        result[SimpleButtonState.SELECTED_NORMAL] = SimpleButtonState.NORMAL;
+        result[SimpleButtonState.SELECTED_OVER] = SimpleButtonState.OVER;
+        result[SimpleButtonState.SELECTED_PRESS] = SimpleButtonState.PRESS;
+        result[SimpleButtonState.SELECTED_DISABLED] = SimpleButtonState.DISABLED;
+
+        return result;
+    })();
+}

package/src/display/views/button/SimpleButtonView.ts

@@ -0,0 +1,226 @@
+import {FContainer, FLabel, Graphics, InteractiveEvent, Sprite} from "@flashist/flibs";
+
+import {ISimpleButtonConfig} from "./ISimpleButtonConfig";
+import {SimpleButtonState} from "./SimpleButtonState";
+import {ResizableContainer} from "../resize/ResizableContainer";
+import {IToggableItem} from "../togglegroup/IToggableItem";
+
+export class SimpleButtonView<DataType extends object = object> extends ResizableContainer<DataType> implements IToggableItem {
+
+    public id: string;
+
+    private _enabled: boolean;
+    protected _state: string;
+    protected _selected: boolean;
+
+    protected config: ISimpleButtonConfig;
+
+    protected contentCont: FContainer;
+    protected bg: Graphics | Sprite;
+    protected label: FLabel;
+
+    constructor(config: ISimpleButtonConfig) {
+        super(config);
+    }
+
+    protected construction(config: ISimpleButtonConfig): void {
+        super.construction();
+
+        this.config = config;
+
+        this.contentCont = new FContainer();
+        this.addChild(this.contentCont);
+
+        this.bg = this.createBg();
+        this.contentCont.addChild(this.bg);
+
+        this.label = new FLabel(this.config.labelConfig);
+        this.contentCont.addChild(this.label);
+        //
+        this.label.interactive = false;
+        this.label.interactiveChildren = false;
+
+        this.state = SimpleButtonState.NORMAL;
+        this.enabled = true;
+
+        if (!this.config.bgConfig.resizeBg) {
+            this.resize(
+                this.bg.width,
+                this.bg.height
+            );
+        }
+    }
+
+    protected addListeners(): void {
+        super.addListeners();
+
+        this.eventListenerHelper.addEventListener(
+            this,
+            InteractiveEvent.OVER,
+            this.onOver
+        );
+        this.eventListenerHelper.addEventListener(
+            this,
+            InteractiveEvent.OUT,
+            this.onOut
+        );
+        this.eventListenerHelper.addEventListener(
+            this,
+            InteractiveEvent.TAP,
+            this.onTap
+        );
+        this.eventListenerHelper.addEventListener(
+            this,
+            InteractiveEvent.UP_OUTSIDE,
+            this.onOut
+        );
+    }
+
+    private onOver(): void {
+        // this.contentCont.alpha = 1;
+        this.state = this.findStateValue(SimpleButtonState.OVER);
+    }
+
+    private onOut(): void {
+        // this.contentCont.alpha = 0.75;
+        this.state = this.findStateValue(SimpleButtonState.NORMAL);
+    }
+
+    protected onTap(): void {
+        // this.onOut();
+    }
+
+    protected arrange(): void {
+        super.arrange();
+
+        if (this.config.bgConfig.resizeBg) {
+            if (this.bg.width !== this.resizeSize.x ||
+                this.bg.height !== this.resizeSize.y) {
+
+                this.updateBg();
+            }
+        }
+
+        this.label.width = this.bg.width;
+        this.label.height = this.bg.height;
+        this.label.x = this.bg.x + Math.floor((this.bg.width - this.label.width) / 2);
+        this.label.y = this.bg.y + Math.floor((this.bg.height - this.label.height) / 2);
+    }
+
+    get enabled(): boolean {
+        return this._enabled;
+    }
+    set enabled(value: boolean) {
+        if (value === this._enabled) {
+            return;
+        }
+
+        this._enabled = value;
+
+        this.commitData();
+    }
+
+    public get text(): string {
+        return this.label.text;
+    }
+    public set text(value: string) {
+        this.label.text = value;
+        this.arrange();
+    }
+
+    public get state(): string {
+        return this._state;
+    }
+    public set state(value: string) {
+        if (value == this.state) {
+            return;
+        }
+
+        this._state = value;
+
+        this.commitData();
+    }
+
+    protected commitData(): void {
+        super.commitData();
+
+        if (this.enabled) {
+            this.interactive = true;
+            this.alpha = 1;
+
+        } else {
+            this.interactive = false;
+            this.alpha = 0.5;
+        }
+
+        this.updateBg();
+    }
+
+    public get selected(): boolean {
+        return this._selected;
+    }
+    public set selected(value: boolean) {
+        if (value == this.selected) {
+            return;
+        }
+
+        this._selected = value;
+
+        this.state = this.findStateValue(SimpleButtonState.NORMAL);
+    }
+
+    protected findStateValue(normalState: string): string {
+        let result: string;
+
+        if (this.selected) {
+            result = SimpleButtonState.NORMAL_TO_SELECTED_MAP[normalState];
+        }
+
+        if (!result) {
+            result = normalState;
+        }
+
+        return result;
+    }
+
+    protected createBg(): Sprite | Graphics {
+        let result: Sprite | Graphics;
+        if (this.config.bgConfig.image) {
+            result = Sprite.from(this.config.bgConfig.image.imageId);
+
+        } else {
+            result = new Graphics();
+        }
+
+        return result;
+    }
+
+    protected updateBg(): void {
+        if (this.config.bgConfig.image) {
+            if (this.config.bgConfig.resizeBg) {
+                this.bg.width = this.resizeSize.x;
+                this.bg.height = this.resizeSize.y;
+            }
+
+        } else {
+            const vectorBg: Graphics = this.bg as Graphics;
+
+            vectorBg.clear();
+
+            let bgColor: number = this.config.bgConfig.vector.bgColor;
+            if (this.state === SimpleButtonState.SELECTED_NORMAL || this.state === SimpleButtonState.OVER || this.state === SimpleButtonState.SELECTED_OVER) {
+                bgColor = this.config.bgConfig.vector.overBgColor;
+            }
+
+            vectorBg.beginFill(bgColor, this.config.bgConfig.vector.bgAlpha);
+            vectorBg.lineStyle(
+                this.config.bgConfig.vector.bgBorderWidth,
+                this.config.bgConfig.vector.bgBorderColor,
+                this.config.bgConfig.vector.bgBorderAlpha,
+                0
+            );
+            vectorBg.drawRect(0, 0, this.resizeSize.x, this.resizeSize.y);
+            vectorBg.endFill();
+        }
+    }
+}

package/src/display/views/getsize/GetSizeTools.ts

@@ -0,0 +1,32 @@
+import {DisplayObjectContainer, Point} from "@flashist/flibs";
+import {IGetSizeObject} from "./IGetSizeObject";
+
+export class GetSizeTools {
+
+    /**
+     * Получение размера объекта.
+     *
+     * @param    sourceObject
+     *
+     * @return
+     */
+    static getObjectSize(sourceObject: DisplayObjectContainer): Point {
+        let result: Point = new Point();
+
+        let getSizeObject: IGetSizeObject = (sourceObject as any as IGetSizeObject);
+        if (getSizeObject.getSize) {
+            result = getSizeObject.getSize();
+
+        } else {
+            if (sourceObject.width) {
+                result.x = sourceObject.width;
+            }
+            if (sourceObject.height) {
+                result.y = sourceObject.height;
+            }
+        }
+
+        return result;
+    }
+
+}

package/src/display/views/getsize/IGetSizeObject.ts

@@ -0,0 +1,5 @@
+import {Point} from "@flashist/flibs";
+
+export interface IGetSizeObject {
+    getSize():Point;
+}