@safe-engine/pixi 8.1.3 → 8.2.2

package/dist/gui/GUIComponent.js

@@ -0,0 +1,123 @@
+import { Assets, Text } from 'pixi.js';
+import { ComponentX, NoRenderComponentX } from '../components/BaseComponent';
+import { LoadingBarMode } from '../core/LoadingBar';
+import { generateStringFromStyledElements, generateStylesFromStyledElements, parseFontString, transformToStyledElements } from '../helper/html-text-parser';
+export const FillType = {
+    HORIZONTAL: 0,
+    VERTICAL: 1,
+    RADIAL: 2,
+};
+export class ButtonComp extends NoRenderComponentX {
+    setOnPress(cb) {
+        this.onPress = cb;
+    }
+    set enabled(val) {
+        this.node.instance.interactive = val;
+    }
+}
+export class ProgressBarComp extends ComponentX {
+    constructor() {
+        super(...arguments);
+        this.mode = LoadingBarMode.BAR;
+    }
+    get progress() {
+        return this.node.instance.progress;
+    }
+    set progress(val) {
+        this.node.instance.progress = val;
+    }
+}
+export class LabelComp extends ComponentX {
+    constructor() {
+        super(...arguments);
+        this.size = 64;
+    }
+    getString() {
+        if (this.node.instance instanceof Text) {
+            return this.node.instance.text;
+        }
+    }
+    setString(val) {
+        if (this.node.instance instanceof Text) {
+            this.node.instance.text = val;
+        }
+    }
+    getSize() {
+        if (this.node.instance instanceof Text) {
+            return this.node.instance.style.fontSize;
+        }
+    }
+    setSize(val) {
+        if (this.node.instance instanceof Text) {
+            this.node.instance.style.fontSize = val;
+        }
+    }
+    getFont() {
+        if (this.node.instance instanceof Text) {
+            return this.node.instance.style.fontFamily;
+        }
+    }
+    setFont(val) {
+        // console.log('set font', val, Assets.get(val))
+        if (this.node.instance instanceof Text) {
+            if (Assets.get(val))
+                this.node.instance.style.fontFamily = Assets.get(val).family;
+        }
+    }
+}
+export class ScrollView extends NoRenderComponentX {
+}
+export class BlockInputEventsComp extends NoRenderComponentX {
+}
+export class ProgressTimerComp extends ComponentX {
+    getFillRange() {
+        return this.node.instance.progress;
+    }
+    setFillStart(val) {
+        this.node.instance.fillCenter.x = val;
+    }
+    setFillRange(val) {
+        // console.log('setFillRange', this.node.instance);
+        this.node.instance.progress = val;
+    }
+}
+export class RichTextComp extends ComponentX {
+    getString() {
+        return this.string;
+    }
+    setString(val) {
+        this.string = val;
+        const jObj = parseFontString(val);
+        const styledOutput = transformToStyledElements(jObj);
+        const newText = generateStringFromStyledElements(styledOutput);
+        const styles = generateStylesFromStyledElements(styledOutput);
+        // console.log(styledOutput)
+        const wrapped = `<root>${newText}</root>`;
+        this.node.instance.setText(wrapped);
+        this.node.instance.setTagStyles(styles);
+    }
+    setSize(size) {
+        this.node.instance.setStyleForTag('root', { fontSize: size, color: '#fff' });
+    }
+    setFont(font) {
+        this.node.instance.setStyleForTag('root', { color: '#fff', fontFamily: font });
+    }
+}
+export class LabelOutlineComp extends NoRenderComponentX {
+}
+export class LabelShadowComp extends NoRenderComponentX {
+}
+export class InputComp extends ComponentX {
+    constructor() {
+        super(...arguments);
+        this.size = 64;
+    }
+}
+export class ListComp extends ComponentX {
+}
+export class SliderComp extends ComponentX {
+}
+export class RadioGroupComp extends ComponentX {
+}
+export class CheckBoxComp extends ComponentX {
+}

package/dist/{systems → gui}/GUISystem.d.ts

@@ -1,5 +1,5 @@
-import { GameWorld } from '@safe-engine/core';
 import { EventManager, System } from 'entityx-ts';
+import { GameWorld } from '../base';
 export declare class GUISystem implements System {
     configure(event_manager: EventManager<GameWorld>): void;
 }

package/dist/gui/GUISystem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GUISystem.d.ts","sourceRoot":"","sources":["../../src/gui/GUISystem.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EAEZ,MAAM,EACP,MAAM,YAAY,CAAA;AAGnB,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAOnC,qBAAa,SAAU,YAAW,MAAM;IACtC,SAAS,CAAC,aAAa,EAAE,YAAY,CAAC,SAAS,CAAC;CA8FjD"}

package/dist/gui/GUISystem.js

@@ -0,0 +1,100 @@
+import { Button, CheckBox, Input, List, ProgressBar, RadioGroup, ScrollBox, Slider } from '@pixi/ui';
+import { EventTypes } from 'entityx-ts';
+import { callFunc, easeBackIn, scaleTo, sequence } from 'pixi-action-ease';
+import { Text } from 'pixi.js';
+import TaggedText from 'pixi-tagged-text-plus';
+import { NodeComp } from '..';
+import { LoadingBarMode, ProgressTimer } from '../core/LoadingBar';
+import { ButtonComp, CheckBoxComp, InputComp, LabelComp, ListComp, ProgressBarComp, ProgressTimerComp, RadioGroupComp, RichTextComp, ScrollView, SliderComp } from './GUIComponent';
+export class GUISystem {
+    configure(event_manager) {
+        event_manager.subscribe(EventTypes.ComponentAdded, ButtonComp, ({ entity, component }) => {
+            const nodeComp = entity.getComponent(NodeComp);
+            // const { normalImage, selectedImage, disableImage, texType, zoomScale } = button
+            // console.log('onPress.ButtonComp', component)
+            const button = new Button(nodeComp.instance);
+            // node.setZoomScale(zoomScale - 1)
+            component.node = nodeComp;
+            // component.node = entity.assign(new NodeComp(node, entity))
+            button.onPress.connect(() => {
+                // console.log('onPress.connect')
+                const scale = scaleTo(0.5, 1.2);
+                const scaleDown = scaleTo(0.5, 1);
+                const seq = sequence(scale, callFunc(() => {
+                    if (Object.prototype.hasOwnProperty.call(component, 'onPress')) {
+                        component.onPress(component);
+                    }
+                }), scaleDown);
+                const ease = easeBackIn(seq);
+                component.node.runAction(ease);
+            });
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, ProgressBarComp, ({ entity, component }) => {
+            const { progress = 1, bg, fill } = component;
+            const node = new ProgressBar({ bg, fill, progress });
+            component.node = entity.assign(new NodeComp(node, entity));
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, ProgressTimerComp, ({ entity, component }) => {
+            // console.log(component, '.progress')
+            const { spriteFrame, fillCenter } = component;
+            const node = new ProgressTimer(LoadingBarMode.BAR, spriteFrame);
+            if (fillCenter) {
+                node.fillCenter = fillCenter;
+            }
+            component.node = entity.assign(new NodeComp(node, entity));
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, ScrollView, ({ entity, component }) => {
+            const { width, height } = component;
+            const view = new ScrollBox({ width, height });
+            component.node = entity.assign(new NodeComp(view, entity));
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, ListComp, ({ entity, component }) => {
+            const view = new List();
+            component.node = entity.assign(new NodeComp(view, entity));
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, SliderComp, ({ entity, component }) => {
+            const { bg, slider, fill } = component;
+            const view = new Slider({ bg, fill, slider });
+            component.node = entity.assign(new NodeComp(view, entity));
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, RadioGroupComp, ({ entity, component }) => {
+            const view = new RadioGroup();
+            component.node = entity.assign(new NodeComp(view, entity));
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, CheckBoxComp, ({ entity, component }) => {
+            const { style } = component;
+            const view = new CheckBox({ style });
+            component.node = entity.assign(new NodeComp(view, entity));
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, InputComp, ({ entity, component }) => {
+            const { bg, size = 48, fill } = component;
+            const view = new Input({ bg, textStyle: { fontSize: size, fill } });
+            component.node = entity.assign(new NodeComp(view, entity));
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, LabelComp, ({ entity, component }) => {
+            // console.log('ComponentAddedEvent LabelComp', component)
+            const node = new Text();
+            // node.texture.rotate = 8
+            node.style.fill = '#fff';
+            component.node = entity.assign(new NodeComp(node, entity));
+            const { string = '', font = '', size } = component;
+            if (font)
+                component.setFont(font);
+            component.setSize(size);
+            component.setString(string);
+        });
+        event_manager.subscribe(EventTypes.ComponentAdded, RichTextComp, ({ entity, component }) => {
+            // console.log('ComponentAddedEvent LabelComp', component)
+            const { string = '', font, size } = component;
+            const node = new TaggedText(string);
+            // node.defaultStyle = { }
+            component.node = entity.assign(new NodeComp(node, entity));
+            component.setString(string);
+            if (font)
+                component.setFont(font);
+            if (size)
+                component.setSize(size);
+        });
+        // event_manager.subscribe(EventTypes.ComponentAdded, BlockInputEventsComp), this);
+    }
+}

package/dist/helper/html-text-parser.d.ts

@@ -1,30 +1,20 @@
-/****************************************************************************
- Copyright (c) 2013-2016 Chukong Technologies Inc.
- Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
-
- https://www.cocos.com/
-
- Permission is hereby granted, free of charge, to any person obtaining a copy
- of this software and associated engine source code (the "Software"), a limited,
- worldwide, royalty-free, non-assignable, revocable and non-exclusive license
- to use Cocos Creator solely to develop games on your target platforms. You shall
- not use Cocos Creator software for developing other software or tools that's
- used for developing games. You are not granted to publish, distribute,
- sublicense, and/or sell copies of Cocos Creator.
-
- The software or tools in this License Agreement are licensed, not sold.
- Xiamen Yaji Software Co., Ltd. reserves all rights not expressly granted to you.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- THE SOFTWARE.
- ****************************************************************************/
-/**
- * A utils class for parsing HTML texts. The parsed results will be an object array.
- */
-export declare const HtmlTextParser: () => void;
+interface FontTag {
+    color?: string;
+    size?: number;
+    text: string;
+}
+type ParsedResult = FontTag[];
+type StyledElement = {
+    tag?: string;
+    style?: {
+        color?: string;
+        size?: number;
+    };
+    text: string;
+};
+export declare function parseFontString(input: string): ParsedResult;
+export declare function transformToStyledElements(parsed: ParsedResult): StyledElement[];
+export declare function generateStringFromStyledElements(elements: StyledElement[]): string;
+export declare function generateStylesFromStyledElements(elements: StyledElement[]): {};
+export {};
 //# sourceMappingURL=html-text-parser.d.ts.map

package/dist/helper/html-text-parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-text-parser.d.ts","sourceRoot":"","sources":["../../src/helper/html-text-parser.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;8EAwB8E;AAK9E;;GAEG;AACH,eAAO,MAAM,cAAc,YAS1B,CAAA"}
+{"version":3,"file":"html-text-parser.d.ts","sourceRoot":"","sources":["../../src/helper/html-text-parser.ts"],"names":[],"mappings":"AAAA,UAAU,OAAO;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,KAAK,YAAY,GAAG,OAAO,EAAE,CAAC;AAE9B,KAAK,aAAa,GAAG;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,CAiC3D;AAED,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,YAAY,GAAG,aAAa,EAAE,CAa/E;AAED,wBAAgB,gCAAgC,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,MAAM,CASlF;AAED,wBAAgB,gCAAgC,CAAC,QAAQ,EAAE,aAAa,EAAE,MAWzE"}