build 1.0.3

CHANGELOG.md

@@ -1,3 +1,24 @@
+<a name="1.0.3"></a>
+## [1.0.3](https://github.com/hiloteam/hilo/compare/v1.0.2...v1.0.3) (2017-04-26)
+
+
+### Bug Fixes
+
+* cacheMixin load image bug ([91affbb](https://github.com/hiloteam/hilo/commit/91affbb))
+* firefox use webkit vendor, close [#77](https://github.com/hiloteam/hilo/issues/77) ([7357c7d](https://github.com/hiloteam/hilo/commit/7357c7d)), closes [#77](https://github.com/hiloteam/hilo/issues/77)
+* graphics.drawSVGPath negative number bug ([560bdf8](https://github.com/hiloteam/hilo/commit/560bdf8))
+* npm module standalone bug ([2d4b369](https://github.com/hiloteam/hilo/commit/2d4b369))
+* polyfill use if to judge that some environments use Object.freeze to freeze the prototype will throw an exception ([ba4ac94](https://github.com/hiloteam/hilo/commit/ba4ac94))
+* ticker.start(true) use raf when fps >= 60 ([7d5e1a0](https://github.com/hiloteam/hilo/commit/7d5e1a0))
+* Tween.to & Tween.from params add default value ([653cf36](https://github.com/hiloteam/hilo/commit/653cf36))
+
+
+### Features
+
+* add typescript definitions ([#83](https://github.com/hiloteam/hilo/issues/83)) ([cd3f4d6](https://github.com/hiloteam/hilo/commit/cd3f4d6))
+* graphics.drawSVGPath supports all attributes except Arcs, close [#85](https://github.com/hiloteam/hilo/issues/85) ([2002f04](https://github.com/hiloteam/hilo/commit/2002f04)), closes [#85](https://github.com/hiloteam/hilo/issues/85)
+
+
 <a name="1.0.2"></a>
 ## [1.0.2](https://github.com/hiloteam/hilo/compare/v1.0.1...v1.0.2) (2016-12-06)
 

docs/api-en/code/core/Hilo.js

@@ -108,7 +108,7 @@ return {
         }catch(e){}
 
         //vendor prefix
-        var jsVendor = data.jsVendor = data.webkit ? 'webkit' : data.firefox ? 'moz' : data.opera ? 'o' : data.ie ? 'ms' : '';
+        var jsVendor = data.jsVendor = data.webkit ? 'webkit' : data.firefox ? 'webkit' : data.opera ? 'o' : data.ie ? 'ms' : '';
         var cssVendor = data.cssVendor = '-' + jsVendor + '-';
 
         //css transform/3d feature dectection

docs/api-en/code/game/ParticleSystem.js

@@ -69,7 +69,7 @@ var ParticleSystem = (function(){
 
     var ParticleSystem = Class.create(/** @lends ParticleSystem.prototype */{
         Extends:Container,
-        constructor:function ParticleSystem(properties){
+        constructor:function(properties){
             this.id = this.id || properties.id || Hilo.getUid("ParticleSystem");
 
             this.emitterX = 0;
@@ -174,7 +174,7 @@ var ParticleSystem = (function(){
     */
     var Particle = Class.create({
         Extends:View,
-        constructor:function Particle(properties){
+        constructor:function(properties){
             this.id = this.id || properties.id || Hilo.getUid("Particle");
             Particle.superclass.constructor.call(this, properties);
             this.init(properties);

docs/api-en/code/loader/LoadQueue.js

@@ -148,6 +148,7 @@ var LoadQueue = Class.create(/** @lends LoadQueue.prototype */{
             case 'jpg':
             case 'jpeg':
             case 'gif':
+            case 'webp':
                 loader = new ImageLoader();
                 break;
             case 'js':

docs/api-en/code/tween/Tween.js

@@ -82,7 +82,7 @@ return Class.create(/** @lends Tween.prototype */{
     },
 
     target: null,
-    duration: 0,
+    duration: 1000,
     delay: 0,
     paused: false,
     loop: false,
@@ -369,6 +369,7 @@ return Class.create(/** @lends Tween.prototype */{
          * @returns {Tween|Array} An tween instance or an array of tween instance.
          */
         fromTo: function(target, fromProps, toProps, params){
+            params = params || {};
             var isArray = target instanceof Array;
             target = isArray ? target : [target];
 

docs/api-en/code/util/Ticker.js

@@ -41,13 +41,11 @@ var Ticker = Class.create(/** @lends Ticker.prototype */{
                   window[Hilo.browser.jsVendor + 'RequestAnimationFrame'];
 
         var runLoop;
-        if(useRAF && raf){
-            var tick = function(){
-                self._tick();
-            };
+        if(useRAF && raf && interval < 17){
+            this._useRAF = true;
             runLoop = function(){
-                self._intervalId = setTimeout(runLoop, interval);
-                raf(tick);
+                self._intervalId = raf(runLoop);
+                self._tick();
             };
         }else{
             runLoop = function(){
@@ -56,16 +54,25 @@ var Ticker = Class.create(/** @lends Ticker.prototype */{
             };
         }
 
+        this._paused = false;
         runLoop();
     },
 
     /**
      * Stop the ticker.
      */
     stop: function(){
-        clearTimeout(this._intervalId);
+        if(this._useRAF){
+            var cancelRAF = window.cancelAnimationFrame ||
+                  window[Hilo.browser.jsVendor + 'CancelAnimationFrame'];
+            cancelRAF(this._intervalId);
+        }
+        else{
+            clearTimeout(this._intervalId);
+        }
         this._intervalId = null;
         this._lastTime = 0;
+        this._paused = true;
     },
 
     /**

docs/api-en/code/util/polyfill.js

@@ -8,32 +8,36 @@ var arrayProto = Array.prototype,
     slice = arrayProto.slice;
 
 //polyfiil for Array.prototype.indexOf
-arrayProto.indexOf = arrayProto.indexOf || function(elem, fromIndex){
-    fromIndex = fromIndex || 0;
-    var len = this.length, i;
-    if(len == 0 || fromIndex >= len) return -1;
-    if(fromIndex < 0) fromIndex = len + fromIndex;
-    for(i = fromIndex; i < len; i++){
-        if(this[i] === elem) return i;
-    }
-    return -1;
-};
+if (!arrayProto.indexOf) {
+    arrayProto.indexOf = function(elem, fromIndex){
+        fromIndex = fromIndex || 0;
+        var len = this.length, i;
+        if(len == 0 || fromIndex >= len) return -1;
+        if(fromIndex < 0) fromIndex = len + fromIndex;
+        for(i = fromIndex; i < len; i++){
+            if(this[i] === elem) return i;
+        }
+        return -1;
+    };
+}
 
 var fnProto = Function.prototype;
 
 //polyfill for Function.prototype.bind
-fnProto.bind = fnProto.bind || function(thisArg){
-    var target = this,
-        boundArgs = slice.call(arguments, 1),
-        F = function(){};
+if (!fnProto.bind) {
+    fnProto.bind = function(thisArg){
+        var target = this,
+            boundArgs = slice.call(arguments, 1),
+            F = function(){};
 
-    function bound(){
-        var args = boundArgs.concat(slice.call(arguments));
-        return target.apply(this instanceof bound ? this : thisArg, args);
-    }
+        function bound(){
+            var args = boundArgs.concat(slice.call(arguments));
+            return target.apply(this instanceof bound ? this : thisArg, args);
+        }
 
-    F.prototype = target.prototype;
-    bound.prototype = new F();
+        F.prototype = target.prototype;
+        bound.prototype = new F();
 
-    return bound;
-};
+        return bound;
+    };
+}

docs/api-en/code/view/CacheMixin.js

@@ -4,8 +4,7 @@
  * Licensed under the MIT License
  */
 
-var _cacheCanvas = Hilo.createElement('canvas');
-var _cacheContext = _cacheCanvas.getContext('2d');
+var _cacheCanvas, _cacheContext;
 /**
  * @class CacheMixin A mixin that contains cache method.You can mix cache method to the target by use Class.mix(target, CacheMixin).
  * @static
@@ -21,23 +20,30 @@ var CacheMixin = /** @lends CacheMixin# */ {
      * @param {Boolean} forceUpdate is force update cache.
      */
     cache: function(forceUpdate){
-        if(forceUpdate || this._cacheDirty || !this._cacheImage){
+        if(forceUpdate || this._cacheDirty || !this.drawable){
             this.updateCache();
         }
     },
     /**
      * Update the cache.
      */
     updateCache:function(){
-        //TODO:width, height自动判断
-        _cacheCanvas.width = this.width;
-        _cacheCanvas.height = this.height;
-        this._draw(_cacheContext);
-        this._cacheImage = new Image();
-        this._cacheImage.src = _cacheCanvas.toDataURL();
-        this.drawable = this.drawable||new Drawable();
-        this.drawable.init(this._cacheImage);
-        this._cacheDirty = false;
+        if(Hilo.browser.supportCanvas){
+            if(!_cacheCanvas){
+                _cacheCanvas = document.createElement('canvas');
+                _cacheContext = _cacheCanvas.getContext('2d');
+            }
+
+            //TODO:width, height自动判断
+            _cacheCanvas.width = this.width;
+            _cacheCanvas.height = this.height;
+            this._draw(_cacheContext);
+            this.drawable = this.drawable||new Drawable();
+            this.drawable.init({
+                image:_cacheCanvas.toDataURL()
+            });
+            this._cacheDirty = false;
+        }
     },
     /**
      * set the cache state diry.

docs/api-en/code/view/Graphics.js

@@ -310,7 +310,7 @@ return Class.create(/** @lends Graphics.prototype */{
     },
 
     /**
-     * Draw a path from the SVG data given by parameters.
+     * Draw a path from the SVG data given by parameters. Not support Arcs.
      * Demo:
      * <p>var path = 'M250 150 L150 350 L350 350 Z';</p>
      * <p>var shape = new Hilo.Graphics({width:500, height:500});</p>
@@ -320,30 +320,137 @@ return Class.create(/** @lends Graphics.prototype */{
      */
     drawSVGPath: function(pathData){
         var me = this, addAction = me._addAction,
-            path = pathData.split(/,| (?=[a-zA-Z])/);
-
+            path = pathData.replace(/,/g, ' ').replace(/-/g, ' -').split(/(?=[a-zA-Z])/);
         addAction.call(me, ['beginPath']);
+        var currentPoint = {x:0, y:0};
+        var lastControlPoint = {x:0, y:0};
+        var lastCmd;
         for(var i = 0, len = path.length; i < len; i++){
-            var str = path[i], cmd = str[0].toUpperCase(), p = str.substring(1).split(/,| /);
-            if(p[0].length == 0) p.shift();
+            var str = path[i];
+            if(!str.length){
+                continue;
+            }
+            var realCmd = str[0];
+            var cmd = realCmd.toUpperCase();
+            var p = this._getSVGParams(str);
+            var useRelative = cmd !== realCmd;
 
             switch(cmd){
                 case 'M':
+                    if(useRelative){
+                        this._convertToAbsolute(currentPoint, p);
+                    }
                     addAction.call(me, ['moveTo', p[0], p[1]]);
+                    this._setCurrentPoint(currentPoint, p[0], p[1]);
                     break;
                 case 'L':
+                    if(useRelative){
+                        this._convertToAbsolute(currentPoint, p);
+                    }
                     addAction.call(me, ['lineTo', p[0], p[1]]);
+                    this._setCurrentPoint(currentPoint, p[0], p[1]);
                     break;
-                case 'C':
-                    addAction.call(me, ['bezierCurveTo', p[0], p[1], p[2], p[3], p[4], p[5]]);
+                case 'H':
+                    if(useRelative){
+                        p[0] += currentPoint.x;
+                    }
+                    addAction.call(me, ['lineTo', p[0], currentPoint.y]);
+                    currentPoint.x = p[0];
+                    break;
+                case 'V':
+                    if(useRelative){
+                        p[0] += currentPoint.y;
+                    }
+                    addAction.call(me, ['lineTo', currentPoint.x, p[0]]);
+                    currentPoint.y = p[0];
                     break;
                 case 'Z':
                     addAction.call(me, ['closePath']);
                     break;
+                case 'C':
+                    if(useRelative){
+                        this._convertToAbsolute(currentPoint, p);
+                    }
+                    addAction.call(me, ['bezierCurveTo', p[0], p[1], p[2], p[3], p[4], p[5]]);
+                    lastControlPoint.x = p[2];
+                    lastControlPoint.y = p[3];
+                    this._setCurrentPoint(currentPoint, p[4], p[5]);
+                    break;
+                case 'S':
+                    if(useRelative){
+                        this._convertToAbsolute(currentPoint, p);
+                    }
+                    if(lastCmd === 'C' || lastCmd === 'S'){
+                        controlPoint = this._getReflectionPoint(currentPoint, lastControlPoint);
+                    }
+                    else{
+                        controlPoint = currentPoint;
+                    }
+                    addAction.call(me, ['bezierCurveTo', controlPoint.x, controlPoint.y, p[0], p[1], p[2], p[3]]);
+                    lastControlPoint.x = p[0];
+                    lastControlPoint.y = p[1];
+                    this._setCurrentPoint(currentPoint, p[2], p[3]);
+                    break;
+                case 'Q':
+                    if(useRelative){
+                        this._convertToAbsolute(currentPoint, p);
+                    }
+                    addAction.call(me, ['quadraticCurveTo', p[0], p[1], p[2], p[3]]);
+                    lastControlPoint.x = p[0];
+                    lastControlPoint.y = p[1];
+                    this._setCurrentPoint(currentPoint, p[2], p[3]);
+                    break;
+                case 'T':
+                    if(useRelative){
+                        this._convertToAbsolute(currentPoint, p);
+                    }
+                    var controlPoint;
+                    if(lastCmd === 'Q' || lastCmd === 'T'){
+                        controlPoint = this._getReflectionPoint(currentPoint, lastControlPoint);
+                    }
+                    else{
+                        controlPoint = currentPoint;
+                    }
+                    addAction.call(me, ['quadraticCurveTo', controlPoint.x, controlPoint.y, p[0], p[1]]);
+                    lastControlPoint = controlPoint;
+                    this._setCurrentPoint(currentPoint, p[0], p[1]);
+                    break;                
             }
+            lastCmd = cmd;
+
         }
         return me;
     },
+    _getSVGParams:function(str){
+        var p = str.substring(1).replace(/[\s]+$|^[\s]+/g, '').split(/[\s]+/);
+        if(p[0].length == 0) {
+            p.shift();
+        }
+        for(var i = 0, l = p.length;i < l;i ++){
+            p[i] = parseFloat(p[i]);
+        }
+        return p;
+    },
+    _convertToAbsolute:function(currentPoint, data){
+        for(var i = 0, l = data.length;i < l;i ++){
+            if(i%2 === 0){
+                data[i] += currentPoint.x;
+            }
+            else{
+                data[i] += currentPoint.y;
+            }
+        }
+    },
+    _setCurrentPoint:function(currentPoint, x, y){
+        currentPoint.x = x;
+        currentPoint.y = y;
+    },
+    _getReflectionPoint:function(centerPoint, point){
+        return {
+            x:centerPoint.x * 2 - point.x,
+            y:centerPoint.y * 2 - point.y
+        };
+    },
 
     /**
      * Apply all draw actions. private function.