@urso/core 0.2.3-dev → 0.2.4-dev

package/build/js/index.js.LICENSE.txt

@@ -26,14 +26,6 @@ object-assign
  *  MIT License
  */
 
-/*!
- * @pixi/accessibility - v5.3.10
- * Compiled Mon, 07 Jun 2021 22:37:25 UTC
- *
- * @pixi/accessibility is licensed under the MIT License.
- * http://www.opensource.org/licenses/mit-license
- */
-
 /*!
  * @pixi/constants - v5.3.10
  * Compiled Mon, 07 Jun 2021 22:37:25 UTC
@@ -172,6 +164,16 @@ object-assign
  * http://www.opensource.org/licenses/mit-license
  */
 
+/*!
+ * pixi-viewport - v4.34.3
+ * Compiled Wed, 01 Dec 2021 19:28:04 UTC
+ *
+ * pixi-viewport is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * 
+ * Copyright 2019-2020, David Figatner, All Rights Reserved
+ */
+
 /*!
  * resource-loader - v3.0.1
  * https://github.com/pixijs/pixi-sound

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urso/core",
-  "version": "0.2.03-dev",
+  "version": "0.2.04-dev",
   "description": "HTML5 game engine",
   "main": "build/js/index.js",
   "author": "Megbrimef",
@@ -29,7 +29,10 @@
     "pixi-projection": "0.3.15",
     "pixi-spine": "^2.1.11",
     "pixi.js": "^5.1.3",
-    "pixi5-dragonbones": "5.7.0-2"
+    "pixi5-dragonbones": "5.7.0-2",
+    "pixi-scrollbox": "^2.3.1",
+    "pixi-viewport": "^4.34.0",
+    "pixi-text-input": "^1.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

package/src/js/components/stateDriven/controller.js

@@ -11,7 +11,7 @@ class ComponentsStateDrivenController extends ComponentsBaseController {
 
     //config for the actions configs. Guard and terminate functions are optional. Run will called when action starts.
     //call finish callback in the run handler to immidiately finish this action
-    //use callFinish(actionKey) when its need after run handler called to delayed finish this action
+    //use this.callFinish(actionKey) when its need after run handler called to delayed finish this action
     configActions = {
         /*startSpin: {
             guard: () => { log(123, 'guard'); return true; },

package/src/js/extra/_info.js

@@ -8,6 +8,7 @@ PIXI.filters['DropShadowFilter'] = DropShadowFilter;
 
 require("pixi-spine");
 require("pixi-projection");
+require("pixi-text-input");
 
 Urso.DragonBones = require("pixi5-dragonbones");
 

package/src/js/lib/helper.js

@@ -201,6 +201,17 @@ class LibHelper {
         return true;
     }
 
+    /**
+     * tranpose matrix (rows to cols)
+     * @param {Array} matrix 
+     * @returns {Array}
+     */
+    transpose(matrix) {
+        return Object.keys(matrix[0])
+        .map(colNumber => matrix
+            .map(rowNumber => rowNumber[colNumber]));
+    }
+
     /**
      * recursive merge two objects into one
      * @param {Object} obj1 

package/src/js/modules/objects/create.js

@@ -105,6 +105,21 @@ class ModulesObjectsCreate {
             case Urso.types.objects.EMITTER:
                 model = this.getInstance('Models.Emitter', object);
                 break;
+            case Urso.types.objects.SLIDER:
+                model = this.getInstance('Models.Slider', object);
+                break;
+            case Urso.types.objects.TOGGLE:
+                model = this.getInstance('Models.Toggle', object);
+                break;
+            case Urso.types.objects.CHECKBOX:
+                model = this.getInstance('Models.Checkbox', object);
+                break;
+            case Urso.types.objects.SCROLLBOX:
+                model = this.getInstance('Models.Scrollbox', object);
+                break;
+            case Urso.types.objects.TEXTINPUT:
+                model = this.getInstance('Models.TextInput', object);
+                break;
             default:
                 break;
         }

package/src/js/modules/objects/models/_info.js

@@ -16,5 +16,10 @@ Urso.Core.Modules.Objects.Models = {
     Mask: require('./mask.js'),
     Spine: require('./spine.js'),
     Text: require('./text.js'),
+    Slider: require('./slider.js'),
+    Toggle: require('./toggle.js'),
+    Checkbox: require('./checkbox.js'),
+    Scrollbox: require('./scrollbox.js'),
+    TextInput: require('./textInput.js'),
     World:  require('./world.js')
 };

package/src/js/modules/objects/models/checkbox.js

@@ -0,0 +1,96 @@
+const UrsoCoreModulesObjectsModelsToggle = require('./toggle');
+
+class ModulesObjectsModelsCheckbox extends UrsoCoreModulesObjectsModelsToggle {
+    constructor(params) {
+        super(params);
+
+        this._isDisabled = false;
+        this._lable = null;
+        this._checkbox = null;
+
+        this.type = Urso.types.objects.CHECKBOX;
+
+        this._createCheckbox();
+
+        this.enable = this.enable.bind(this);
+        this.disable = this.disable.bind(this);
+    }
+
+    setupParams(params) {
+        super.setupParams(params);
+
+        this.contents = [];
+
+        this.action = Urso.helper.recursiveGet('action', params, () => { 
+            this.emit(Urso.events.MODULES_OBJECTS_CHECKBOX_PRESS, { name: this.name, status: this._toggleStatus }) 
+        });
+
+        this.action = Urso.helper.recursiveGet('action', params, () => { this.emit(Urso.events.MODULES_OBJECTS_CHECKBOX_PRESS, this.name) });
+        this.lable = Urso.helper.recursiveGet('lable', params, false);
+
+        this.defaultStatus = Urso.helper.recursiveGet('defaultStatus', params, 'unpressed'); //pressed or unpressed
+    }
+
+    _createCheckbox() {
+        this._toggleStatus = this.defaultStatus;
+        this._checkbox = this._createObject(this.buttonFrames[`${this.defaultStatus}Out`])
+
+        if (this.lable)
+            this._lable = this._createObject(this.lable);
+    }
+
+    _createObject(model) {
+        model = Urso.helper.objectClone(model);
+        let object = Urso.objects.create(model, this);
+
+        object._baseObject.interactive = true;
+        object._baseObject.buttonMode = true;
+
+        object._baseObject
+            .on('pointerdown', this._onButtonDown.bind(this))
+            .on('pointerup', this._onButtonUp.bind(this))
+            .on('pointerupoutside', this._onButtonUp.bind(this))
+            .on('pointerover', this._onButtonOver.bind(this))
+            .on('pointerout', this._onButtonOut.bind(this));
+
+        return object;
+    }
+
+    _addBaseObject() {
+        this._baseObject = new PIXI.Container();
+    };
+
+    _drawGraphics({ polygon, rectangle, fillColor }) {
+        if (!polygon && !rectangle)
+            return;
+
+        this._checkbox._baseObject.clear();
+        this._checkbox._baseObject.beginFill(fillColor);
+
+        if (polygon && polygon.length) {
+            this._checkbox._baseObject.drawPolygon(polygon);
+        } else if (rectangle && rectangle.length) {
+            this._checkbox._baseObject.drawRect(...rectangle)
+        }
+
+        this._checkbox._baseObject.endFill();
+    };
+
+    _changeTexture(key) {
+        if (!this.buttonFrames[key]) {
+            if (key === `${this._toggleStatus}Out`) {
+                Urso.logger.error('ModulesObjectsModelsButton assets error: no out image ' + this.buttonFrames.out);
+                return false;
+            }
+
+            this._changeTexture(`${this._toggleStatus}Out`); // load default texture for this key
+            return false;
+        }
+        if (this.buttonFrames[key].type === Urso.types.objects.GRAPHICS)
+            this._drawGraphics(this.buttonFrames[key].figure);
+        else
+            this._checkbox.changeTexture(this.buttonFrames[key].assetKey);
+    }
+}
+
+module.exports = ModulesObjectsModelsCheckbox;

package/src/js/modules/objects/models/scrollbox.js

@@ -0,0 +1,62 @@
+class ModulesObjectsModelsScrollbox extends Urso.Core.Modules.Objects.BaseModel {
+    constructor(params) {
+        super(params);
+
+        this.type = Urso.types.objects.SCROLLBOX;
+        this._addBaseObject();
+        this._createContent();
+    }
+
+    setupParams(params) {
+        super.setupParams(params);
+
+        this.content = Urso.helper.recursiveGet('content', params, []);
+        this.dragScroll = Urso.helper.recursiveGet('dragScroll', params, true);
+        this.scrollType = Urso.helper.recursiveGet('scrollType', params, 3);
+    }
+
+    _getScrollboxParams(){
+        return {
+            boxWidth: this.width,
+            boxHeight: this.height,
+            dragScroll: this.dragScroll,
+            fade: true,
+            fadeScrollbarTime: 300
+        }
+    }
+
+    _setScrollWidth(){
+        if(this.scrollType === 1 || this.scrollType === 0){
+            this._baseObject.scrollWidth = this.width;
+            this._baseObject.overflowX = 'hidden';
+        }
+    }
+
+    _setScrollHeight(){
+        if(this.scrollType === 2 || this.scrollType === 0){
+            this._baseObject.scrollHeight = this.height;
+            this._baseObject.overflowY = 'hidden'
+        }
+    }
+
+    _createContent(){
+        this.content.forEach(child => {
+            let object = Urso.objects.create(child)
+            this._baseObject.content.addChild(object._baseObject)
+        })
+
+        this._baseObject.update();
+    }
+
+    _addBaseObject() {
+        const params = this._getScrollboxParams();
+
+        const Scrollbox = require('pixi-scrollbox').Scrollbox;
+        this._baseObject = new Scrollbox(params);
+
+        this._setScrollHeight();
+        this._setScrollWidth();
+    };
+}
+
+module.exports = ModulesObjectsModelsScrollbox

package/src/js/modules/objects/models/slider.js

@@ -0,0 +1,154 @@
+class ModulesObjectsModelsSlider extends Urso.Core.Modules.Objects.BaseModel {
+    constructor(params) {
+        super(params);
+
+        this.type = Urso.types.objects.SLIDER;
+        this._sliderBg = null;
+        this._sliderHandle = null;
+        this._baseObject = null;
+        this._handleIsPulling = false;
+
+        this._addBaseObject();
+        this._createSliderTextures();
+        this._createValueText();
+        this._setDefaultValue();
+    }
+
+    setupParams(params) {
+        super.setupParams(params);
+        this.contents = [];
+        this.points = Urso.helper.recursiveGet('points', params, [0, 1]);
+        this.defaultValue = Urso.helper.recursiveGet('defaultValue', params, this.points[0]);
+        this.bgTexture = Urso.helper.recursiveGet('bgTexture', params, false);
+        this.handleTexture = Urso.helper.recursiveGet('handleTexture', params, false);
+        this.minValueTextModel = Urso.helper.recursiveGet('minValueTextModel', params, false);
+        this.maxValueTextModel = Urso.helper.recursiveGet('maxValueTextModel', params, false);
+        this.currentValueTextModel = Urso.helper.recursiveGet('currentValueTextModel', params, false);
+    }
+
+    _createSliderTextures() {
+        this._sliderBg = this._createTexture(this.bgTexture);
+        this._sliderHandle = this._createTexture(this.handleTexture);
+
+        this._setEvents(this._sliderBg._baseObject);
+        this._setEvents(this._sliderHandle._baseObject);
+    }
+
+    _createValueText() {
+        if (this.minValueTextModel) {
+            this.minValueText = Urso.objects.create(this.minValueTextModel, this);
+            this.minValueText.text = this.points[0];
+        }
+
+        if (this.maxValueTextModel) {
+            this.maxValueText = Urso.objects.create(this.maxValueTextModel, this);
+            this.maxValueText.text = this.points.length <= 2 ? '100' : this.points[this.points.length - 1];
+        }
+
+        if(this.currentValueTextModel){
+            this.currentValueText = Urso.objects.create(this.currentValueTextModel, this);
+        }
+    }
+
+    _createTexture(model) {
+        if (model.type === Urso.types.objects.GRAPHICS || model.type === Urso.types.objects.IMAGE)
+            return Urso.objects.create(model, this);
+        else
+            Urso.logger.error('ModulesObjectsModelsSlider objects error: textures should be GRAPHICS or IMAGE type');
+    }
+
+    _setEvents(obj) {
+        obj.interactive = true;
+        obj.buttonMode = true;
+
+        obj
+            .on('pointerdown', this._onPointerDown.bind(this))
+            .on('pointerup', this._onPointerUp.bind(this))
+            .on('pointerupoutside', this._onPointerUp.bind(this))
+    }
+
+    _addBaseObject() {
+        this._baseObject = new PIXI.Container();
+    };
+
+    _onPointerDown(obj) {
+        if (obj.target === this._sliderHandle._baseObject)
+            this._handleIsDragging = true;
+    }
+
+    _onMouseMove({ x }) {
+        if (!this._handleIsDragging)
+            return
+
+        if (x < this.x)
+            this._sliderHandle.x = 0;
+        else if (x > this.x + this._sliderBg._baseObject.width)
+            this._sliderHandle.x = this._sliderBg._baseObject.width;
+        else
+            this._sliderHandle.x = x - this.x;
+    }
+
+    _onPointerUp(obj) {
+        this._handleIsDragging = false;
+        let x;
+
+        if (obj.target === this._sliderBg._baseObject) {
+            x = obj.data.getLocalPosition(obj.target).x;
+        } else
+            x = this._sliderHandle.x;
+
+        this._dropHandle(x);
+    }
+
+    _setDefaultValue(){
+        if(!this.defaultValue)
+            return
+
+        if(!this.points.includes(this.defaultValue))
+            this.defaultValue = this.points[0];
+
+        let x = this.points.indexOf(this.defaultValue) * this._sliderBg._baseObject.width / (this.points.length - 1);
+        
+        this._setNewValue(x, this.defaultValue);
+    }
+
+    _dropHandle(x) {
+        let value;
+        let handleX;
+
+        if(this.points.length <= 2){
+            handleX = x;
+            value = ~~(100 / this._sliderBg._baseObject.width * x);
+        }
+        // calculate closest point
+        else{
+            for (let i = 0; i < this.points.length; i++) {
+                let pointX = i * this._sliderBg._baseObject.width / (this.points.length - 1);
+    
+                if (typeof (handleX) === 'number' && x - pointX < handleX - x) {
+                    handleX = handleX;
+                } else {
+                    handleX = pointX;
+                    value = this.points[i];
+                }
+            }
+        }
+
+        this._setNewValue(handleX, value)
+    }
+
+    _setNewValue(x, value){
+        this._sliderHandle.x = x;
+
+        if (this.currentValueText)
+            this.currentValueText.text = value;
+
+        this.emit(Urso.events.MODULES_OBJECTS_SLIDER_SET_NEW_VALUE, { name: this.name, value: value });
+    }
+
+    _subscribeOnce() {
+        this.addListener(Urso.events.MODULES_SCENES_MOUSE_NEW_POSITION, this._onMouseMove.bind(this));
+    }
+}
+
+module.exports = ModulesObjectsModelsSlider;

package/src/js/modules/objects/models/textInput.js

@@ -0,0 +1,55 @@
+class ModulesObjectsModelsTextInput extends Urso.Core.Modules.Objects.BaseModel {
+    constructor(params) {
+        super(params);
+
+        this.type = Urso.types.objects.TEXTINPUT;
+        this.text = '';
+        this._addBaseObject();
+        this._setRestrictedSymbosl();
+    }
+
+    setupParams(params) {
+        super.setupParams(params);
+
+        this.input = Urso.helper.recursiveGet('input', params, false);
+        this.box = Urso.helper.recursiveGet('box', params, false);
+        this.numbersOnly = Urso.helper.recursiveGet('numbersOnly', params, false);
+        this.allowedSymbols = Urso.helper.recursiveGet('allowedSymbols', params, false);
+        this.substituteText = Urso.helper.recursiveGet('substituteText', params, false);
+    }
+
+    restrictInput(allowedSymbols) {
+        this._baseObject.restrict = allowedSymbols;
+    }
+
+    disable(){
+        this._baseObject.disabled = true 
+    }
+
+    enable(){
+        this._baseObject.disabled = false 
+    }
+
+    _setRestrictedSymbosl() {
+        if (this.numbersOnly) {
+            const regex = new RegExp('^[0-9]*');
+            this.restrictInput(regex);
+        } else if (this.allowedSymbols) {
+            this.restrictInput(this.allowedSymbols);
+        }
+    }
+
+    _onBlur(){
+        this.text = this._baseObject.text;
+        const data = {name: this.name, class: this.class, id: this.id, text: this.text};
+        this.emit(Urso.events.MODULES_OBJECTS_TEXTINPUT_BLUR, data);
+    }
+
+    _addBaseObject() {
+        this._baseObject = new PIXI.TextInput({ input: this.input, box: this.box });
+        this._baseObject.substituteText = this.substituteText;
+        this._baseObject.on('blur', this._onBlur.bind(this))
+    };
+}
+
+module.exports = ModulesObjectsModelsTextInput;

package/src/js/modules/objects/models/toggle.js

@@ -0,0 +1,169 @@
+
+const UrsoCoreModulesObjectsModelsButton = require('./button');
+
+class ModulesObjectsModelsToggle extends UrsoCoreModulesObjectsModelsButton {
+    constructor(params) {
+        super(params);
+
+        this._toggleStatus = 'unpressed';
+
+        this.type = Urso.types.objects.TOGGLE;
+        this._addBaseObject();
+
+        this.enable = this.enable.bind(this);
+        this.disable = this.disable.bind(this);
+    }
+
+    setupParams(params) {
+        super.setupParams(params);
+
+        this.action = Urso.helper.recursiveGet('action', params, () => { 
+            this.emit(Urso.events.MODULES_OBJECTS_TOGGLE_PRESS, { name: this.name, status: this._toggleStatus }) 
+        });
+
+        this.buttonFrames = {
+            pressedOver: Urso.helper.recursiveGet('buttonFrames.pressedOver', params, false),
+            pressedOut: Urso.helper.recursiveGet('buttonFrames.pressedOut', params, false),
+            unpressedOver: Urso.helper.recursiveGet('buttonFrames.unpressedOver', params, false),
+            unpressedOut: Urso.helper.recursiveGet('buttonFrames.unpressedOut', params, false),
+            pressedDown: Urso.helper.recursiveGet('buttonFrames.pressedDown', params, false),
+            unpressedDown: Urso.helper.recursiveGet('buttonFrames.unpressedDown', params, false),
+            pressedDisabled: Urso.helper.recursiveGet('buttonFrames.pressedDisabled', params, false),
+            unpressedDisabled: Urso.helper.recursiveGet('buttonFrames.unpressedDisabled', params, false),
+        }
+    }
+
+    setButtonFrame(key, assetKey) {
+        this.buttonFrames[key] = assetKey;
+
+        if (this._isOver)
+            this._changeTexture(`${this._toggleStatus}Over`);
+        else if(this._isDown)
+            this._changeTexture(`${this._toggleStatus}Down`);
+        else if(this._isDisabled)
+            this._changeTexture(`${this._toggleStatus}Disabled`);
+        else
+            this._changeTexture(`${this._toggleStatus}Out`);
+    }
+
+    enable() {
+        if (!this._isDisabled)
+            return false;
+
+        if (this._isOver)
+            this._changeTexture(`${this._toggleStatus}Over`);
+        else
+            this._changeTexture(`${this._toggleStatus}Out`);
+
+        this._isDisabled = false;
+    }
+
+    disable() {
+        if (this._isDisabled)
+            return false;
+
+        this._changeTexture(`${this._toggleStatus}Disabled`);
+        this._isDisabled = true;
+    }
+
+    _addBaseObject() {
+        this._baseObject = new PIXI.Sprite();
+        this._changeTexture('unpressedOut');
+
+        this._baseObject.interactive = true;
+        this._baseObject.buttonMode = true;
+
+        if (this.pixelPerfectOver) {
+            //todo
+        }
+
+        if (this.pixelPerfectClick) {
+            //todo
+        }
+
+        this._baseObject
+            .on('pointerdown', this._onButtonDown.bind(this))
+            .on('pointerup', this._onButtonUp.bind(this))
+            .on('pointerupoutside', this._onButtonUp.bind(this))
+            .on('pointerover', this._onButtonOver.bind(this))
+            .on('pointerout', this._onButtonOut.bind(this));
+    };
+
+    _onButtonDown() {
+        if (this._isDisabled)
+            return false;
+
+        this._isDown = true;
+
+        if (this.keyDownAction)
+            this.keyDownAction();
+
+        if (this._isDisabled) //can be disabled after keyDownAction
+            return false;
+
+        this._changeTexture(`${this._toggleStatus}Down`);
+
+        this._toggleStatus = this._toggleStatus === 'pressed' ? 'unpressed' : 'pressed';
+    }
+
+    _onButtonUp() {
+        if (this._isDisabled)
+            return false;
+
+        this._isDown = false;
+
+        if (this.action)
+            this.action();
+
+        if (this._isDisabled) //can be disabled after action
+            return false;
+
+        if (this._isOver)
+            this._changeTexture(`${this._toggleStatus}Over`);
+        else
+            this._changeTexture(`${this._toggleStatus}Out`);
+    }
+
+    _onButtonOver() {
+        this._isOver = true;
+
+        if (this._isDisabled || this._isDown)
+            return false;
+
+        if (this.mouseOverAction)
+            this.mouseOverAction();
+
+        this._changeTexture(`${this._toggleStatus}Over`);
+    }
+
+    _onButtonOut() {
+        this._isOver = false;
+
+        if (this._isDisabled || this._isDown)
+            return false;
+
+        if (this.mouseOutAction)
+            this.mouseOutAction();
+
+        this._changeTexture(`${this._toggleStatus}Out`);
+    }
+
+    _changeTexture(key) {
+        let texture = Urso.cache.getTexture(this.buttonFrames[key]);
+
+        if (!texture) {
+            if (key === `${this._toggleStatus}Out`) {
+                Urso.logger.error('ModulesObjectsModelsButton assets error: no out image ' + this.buttonFrames.out);
+                return false;
+            }
+
+            this._changeTexture(`${this._toggleStatus}Out`); // load default texture for this key
+            return false;
+        }
+
+        this._baseObject.texture = texture;
+        return true;
+    }
+}
+
+module.exports = ModulesObjectsModelsToggle;

package/src/js/modules/objects/propertyAdapter.js

@@ -31,7 +31,9 @@ class PropertyAdapter {
             Urso.types.objects.COMPONENT,
             Urso.types.objects.CONTAINER,
             Urso.types.objects.GROUP,
-            Urso.types.objects.WORLD
+            Urso.types.objects.WORLD,
+            Urso.types.objects.SLIDER,
+            Urso.types.objects.SCROLLBOX,
         ];
 
         this._typesWithoutAnchor = [
@@ -40,7 +42,10 @@ class PropertyAdapter {
             Urso.types.objects.HITAREA,
             Urso.types.objects.MASK,
             Urso.types.objects.SPINE,
-            Urso.types.objects.WORLD
+            Urso.types.objects.SLIDER,
+            Urso.types.objects.TEXTINPUT,
+            Urso.types.objects.CHECKBOX,
+            Urso.types.objects.WORLD,
         ];
     }