@urso/core 0.2.3-dev → 0.2.7

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

@@ -1,113 +1,113 @@
-class ModulesObjectsModelsImagesAnimation extends Urso.Core.Modules.Objects.BaseModel {
-    constructor(params) {
-        super(params);
-
-        this.type = Urso.types.objects.IMAGES_ANIMATION;
-
-        //sys
-        this._tween = null;
-        this._currentFrame = -1;
-        this._defaultTexture;
-        this._animationTextures = {};
-
-        this._addBaseObject();
-    }
-
-    setupParams(params) {
-        super.setupParams(params);
-
-        this.assetKey = Urso.helper.recursiveGet('assetKey', params, false);
-
-        this.duration = Urso.helper.recursiveGet('duration', params, 0);
-        this.animationKeys = Urso.helper.recursiveGet('animationKeys', params, []);
-        this.loop = Urso.helper.recursiveGet('loop', params, false);
-        this.autostart = Urso.helper.recursiveGet('autostart', params, false);
-        this.onComplete = Urso.helper.recursiveGet('onComplete', params, false);
-    }
-
-    _addBaseObject() {
-        let texture = Urso.cache.getTexture(this.assetKey)
-
-        if (!texture)
-            Urso.logger.error('ModulesObjectsModelsImage assets error: no image ' + this.assetKey);
-
-        this._defaultTexture = texture;
-        this._baseObject = new PIXI.Sprite(this._defaultTexture);
-
-        this._createAnimationTextures();
-
-        if (this.autostart)
-            this.start();
-    };
-
-    start() {
-        this._createTween();
-    };
-
-    stop() {
-        if (!this._tween)
-            return false;
-
-        this._stopAnimation();
-    };
-
-    _createAnimationTextures() {
-        for (let key in this.animationKeys) {
-            let texture = Urso.cache.getTexture(this.animationKeys[key]);
-
-            if (!texture)
-                continue;
-
-            this._animationTextures[key] = texture;
-        }
-
-        return this._animationTextures;
-    }
-
-    _createTween() {
-        const totalFrames = this.animationKeys.length;
-        const tweenParams = { x: totalFrames, duration: this.duration / 1000, ease: "none" };
-
-        if (this.loop)
-            tweenParams.repeat = -1;
-
-        this._tween = gsap.to({ x: 0 }, tweenParams);
-
-        this._tween.eventCallback("onUpdate", this._onUpdate.bind(this));
-
-        this._tween.eventCallback("onComplete", () => {
-            this._baseObject.texture = this._defaultTexture;
-            this._onComplete();
-        });
-    }
-
-    _onUpdate() {
-        if (!this._tween)
-            return;
-
-        let frameIndex = ~~this._tween.targets()[0].x;
-        const totalFrames = this.animationKeys.length;
-
-        const frameKey = this.animationKeys[frameIndex];
-
-        if (this._currentFrame !== frameKey) {
-            this._baseObject.texture = this._animationTextures[frameIndex];
-            this._currentFrame = frameKey;
-        }
-    }
-
-    _onComplete() {
-        if (this.onComplete)
-            this.onComplete();
-    };
-
-    _stopAnimation() {
-        this._tween.kill();
-        this._baseObject.texture = this._defaultTexture;
-
-        this._onComplete();
-    }
-
-}
-
-module.exports = ModulesObjectsModelsImagesAnimation;
+class ModulesObjectsModelsImagesAnimation extends Urso.Core.Modules.Objects.BaseModel {
+    constructor(params) {
+        super(params);
+
+        this.type = Urso.types.objects.IMAGES_ANIMATION;
+
+        //sys
+        this._tween = null;
+        this._currentFrame = -1;
+        this._defaultTexture;
+        this._animationTextures = {};
+
+        this._addBaseObject();
+    }
+
+    setupParams(params) {
+        super.setupParams(params);
+
+        this.assetKey = Urso.helper.recursiveGet('assetKey', params, false);
+
+        this.duration = Urso.helper.recursiveGet('duration', params, 0);
+        this.animationKeys = Urso.helper.recursiveGet('animationKeys', params, []);
+        this.loop = Urso.helper.recursiveGet('loop', params, false);
+        this.autostart = Urso.helper.recursiveGet('autostart', params, false);
+        this.onComplete = Urso.helper.recursiveGet('onComplete', params, false);
+    }
+
+    _addBaseObject() {
+        let texture = Urso.cache.getTexture(this.assetKey)
+
+        if (!texture)
+            Urso.logger.error('ModulesObjectsModelsImage assets error: no image ' + this.assetKey);
+
+        this._defaultTexture = texture;
+        this._baseObject = new PIXI.Sprite(this._defaultTexture);
+
+        this._createAnimationTextures();
+
+        if (this.autostart)
+            this.start();
+    };
+
+    start() {
+        this._createTween();
+    };
+
+    stop() {
+        if (!this._tween)
+            return false;
+
+        this._stopAnimation();
+    };
+
+    _createAnimationTextures() {
+        for (let key in this.animationKeys) {
+            let texture = Urso.cache.getTexture(this.animationKeys[key]);
+
+            if (!texture)
+                continue;
+
+            this._animationTextures[key] = texture;
+        }
+
+        return this._animationTextures;
+    }
+
+    _createTween() {
+        const totalFrames = this.animationKeys.length;
+        const tweenParams = { x: totalFrames, duration: this.duration / 1000, ease: "none" };
+
+        if (this.loop)
+            tweenParams.repeat = -1;
+
+        this._tween = gsap.to({ x: 0 }, tweenParams);
+
+        this._tween.eventCallback("onUpdate", this._onUpdate.bind(this));
+
+        this._tween.eventCallback("onComplete", () => {
+            this._baseObject.texture = this._defaultTexture;
+            this._onComplete();
+        });
+    }
+
+    _onUpdate() {
+        if (!this._tween)
+            return;
+
+        let frameIndex = ~~this._tween.targets()[0].x;
+        const totalFrames = this.animationKeys.length;
+
+        const frameKey = this.animationKeys[frameIndex];
+
+        if (this._currentFrame !== frameKey) {
+            this._baseObject.texture = this._animationTextures[frameIndex];
+            this._currentFrame = frameKey;
+        }
+    }
+
+    _onComplete() {
+        if (this.onComplete)
+            this.onComplete();
+    };
+
+    _stopAnimation() {
+        this._tween.kill();
+        this._baseObject.texture = this._defaultTexture;
+
+        this._onComplete();
+    }
+
+}
+
+module.exports = ModulesObjectsModelsImagesAnimation;

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

@@ -1,38 +1,38 @@
-class ModulesObjectsModelsMask extends Urso.Core.Modules.Objects.BaseModel {
-    constructor(params) {
-        super(params);
-
-        this.type = Urso.types.objects.MASK;
-        this._addBaseObject();
-    }
-
-    setupParams(params) {
-        super.setupParams(params);
-
-        //NOTE: you can use just one key: rectangle or rectangles
-        this.rectangle = Urso.helper.recursiveGet('rectangle', params, false); // [50, 50, 100, 100]
-        this.rectangles = Urso.helper.recursiveGet('rectangles', params, false); //array of rectangles
-    }
-
-    _addBaseObject() {
-        let mask = new PIXI.Graphics();
-        mask.lineStyle(0);
-        mask.beginFill(0xffffff);
-
-        if (this.rectangle)
-            this._drawRect(mask, this.rectangle);
-        else if (this.rectangles)
-            for (let rectangle of this.rectangles)
-                this._drawRect(mask, rectangle);
-
-        mask.endFill();
-
-        this._baseObject = mask;
-    };
-
-    _drawRect(maskObject, rectangle) {
-        maskObject.drawRect(rectangle[0], rectangle[1], rectangle[2], rectangle[3]);
-    }
-}
-
-module.exports = ModulesObjectsModelsMask;
+class ModulesObjectsModelsMask extends Urso.Core.Modules.Objects.BaseModel {
+    constructor(params) {
+        super(params);
+
+        this.type = Urso.types.objects.MASK;
+        this._addBaseObject();
+    }
+
+    setupParams(params) {
+        super.setupParams(params);
+
+        //NOTE: you can use just one key: rectangle or rectangles
+        this.rectangle = Urso.helper.recursiveGet('rectangle', params, false); // [50, 50, 100, 100]
+        this.rectangles = Urso.helper.recursiveGet('rectangles', params, false); //array of rectangles
+    }
+
+    _addBaseObject() {
+        let mask = new PIXI.Graphics();
+        mask.lineStyle(0);
+        mask.beginFill(0xffffff);
+
+        if (this.rectangle)
+            this._drawRect(mask, this.rectangle);
+        else if (this.rectangles)
+            for (let rectangle of this.rectangles)
+                this._drawRect(mask, rectangle);
+
+        mask.endFill();
+
+        this._baseObject = mask;
+    };
+
+    _drawRect(maskObject, rectangle) {
+        maskObject.drawRect(rectangle[0], rectangle[1], rectangle[2], rectangle[3]);
+    }
+}
+
+module.exports = ModulesObjectsModelsMask;

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,199 @@
+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.fillTexture = Urso.helper.recursiveGet('fillTexture', 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);
+
+        if(this.fillTexture)
+            this._fillTexture = this._createFillTexture(this.fillTexture);
+
+        this._sliderHandle = this._createTexture(this.handleTexture);
+
+        this._setEvents(this._sliderBg._baseObject);
+        this._setEvents(this._sliderHandle._baseObject);
+    }
+
+    _createFillTexture(model){
+        const fillTexture = this._createTexture(model);
+        const { width, height } = fillTexture._baseObject;
+        this._fillMask = Urso.objects.create({
+            type: Urso.types.objects.GRAPHICS,
+            figure: {
+            rectangle: [0, 0, width, height]
+            },
+            x: -width * fillTexture.anchorX,
+            y: -height * fillTexture.anchorY,
+        }, this);
+
+        fillTexture._baseObject.mask = this._fillMask._baseObject;
+        return fillTexture
+    }
+
+    _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))
+            .on('touchmove', this._onTouchmove.bind(this));
+    };
+
+    _onTouchmove(event) {
+        const position = this._getEventLocalPosition(event);
+        this._onPointerMove(position);
+    }
+
+    _getEventLocalPosition(event) {
+        const world = Urso.objects.getWorld();
+        const worldScale = world._baseObject.scale;
+
+        const x = event.data.global.x / worldScale.x;
+        const y = event.data.global.y / worldScale.y;
+
+        return { x, y };
+    }
+
+    _addBaseObject() {
+        this._baseObject = new PIXI.Container();
+    };
+
+    _onPointerDown(obj) {
+        if (obj.target === this._sliderHandle._baseObject)
+            this._handleIsDragging = true;
+    }
+
+    _onPointerMove({ 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;
+
+        this._setFillMask();
+    }
+
+    _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.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);
+    }
+
+    _setFillMask(){
+        if(!this._fillMask)
+            return
+
+        const progress = (this._sliderHandle.x - this._sliderBg.x) * 100 / this._fillTexture._baseObject.width * 0.01;
+        this._fillMask.scaleX = progress;
+    }
+
+    _setNewValue(x, value){
+        this._sliderHandle.x = x;
+            
+        if (this.currentValueText)
+            this.currentValueText.text = value;
+
+        this._setFillMask();
+        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._onPointerMove.bind(this));
+    }
+}
+
+module.exports = ModulesObjectsModelsSlider;