Merge branch 'PublicEasel'

README.md

@@ -1,8 +1,12 @@
 # EaselJS
 
-EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.
+EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display 
+list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch 
+interactions.
 
-It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the [CreateJS](http://createjs.com/) suite: [SoundJS](http://createjs.com/SoundJS), [PreloadJS](http://createjs.com/PreloadJS), and [TweenJS](http://createjs.com/TweenJS).
+It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It 
+works well alone, or with the rest of the [CreateJS](http://createjs.com/) suite: [SoundJS](http://createjs.com/soundjs), 
+[PreloadJS](http://createjs.com/preloadjs), and [TweenJS](http://createjs.com/tweenjs).
 
 It has no external dependencies, and should be compatible with virtually any framework you enjoy using.
 
@@ -40,26 +44,31 @@ createjs.Ticker.on("tick", stage);
 
 ## Support and Resources
 * Find examples and more information at the [EaselJS web site](http://easeljs.com/).
-* Read the [documentation](http://createjs.com/Docs/EaselJS).
+* Read the [documentation](http://createjs.com/docs/easeljs).
 * Discuss, share projects, and interact with other users on [reddit](http://www.reddit.com/r/createjs/).
 * Ask technical questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/easeljs).
 * File verified bugs or formal feature requests using Issues on [GitHub](https://github.com/createjs/EaselJS/issues).
 * There is a [Google Group](http://groups.google.com/group/createjs-discussion) for discussions and support.
-* Have a look at the included [examples](https://github.com/CreateJS/EaselJS/tree/master/examples) and [API documentation](http://createjs.com/Docs/EaselJS/) for more in-depth information.
+* Have a look at the included [examples](https://github.com/CreateJS/EaselJS/tree/master/examples) and 
+[API documentation](http://createjs.com/docs/easeljs/) for more in-depth information.
 
 It was built by [gskinner.com](http://www.gskinner.com), and is released for free under the MIT license, which means you
-can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a requirement.
+can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a 
+requirement.
 
 
 ## Classes
 
-The API is inspired in part by Flash's display list, and should be easy to pick up for both JS and AS3 developers. Check out the [docs](http://createjs.com/Docs/EaselJS/) for more information.
+The API is inspired in part by Flash's display list, and should be easy to pick up for both JS and AS3 developers. Check 
+out the [docs](http://createjs.com/docs/easeljs/) for more information.
 
 **DisplayObject**
-Abstract base class for all display elements in EaselJS. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, skewX, skewY, alpha, shadow, etc) that are common to all display objects.
+Abstract base class for all display elements in EaselJS. Exposes all of the display properties (ex. x, y, rotation, 
+scaleX, scaleY, skewX, skewY, alpha, shadow, etc) that are common to all display objects.
 
 **Stage**
-The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.
+The root level display container for display elements. Each time tick() is called on Stage, it will update and render 
+the display list to its associated canvas.
 
 **Container**
 A nestable display container, which lets you aggregate display objects and manipulate them as a group.
@@ -79,6 +88,9 @@ Provides an easy to use API for drawing vector data. Can be used with Shape, or
 **Text**
 Renders a single line of text to the stage.
 
+**BitmapText**
+Renders text using a SpriteSheet of letter.
+
 **DOMElement**
 An experimental display object that allows you to manage an HTML element as a part of the display list.
 
@@ -115,3 +127,13 @@ Represents a rectangle as defined by the points (x, y) and (x+width, y+height).
 
 **Point**
 Represents a point on a 2 dimensional x / y coordinate system.
+
+A WebGL implementation currently exists, but is limited.
+
+**SpriteContainer**
+A container that accepts a SpriteSheet, and uses a WebGL stage (SpriteStage) for WebGL-accelerated content.
+
+**SpriteStage**
+A Stage class that uses a WebGL context. Currently, can only have children that are SpriteContainers.
+
+A new WebGL implementation is in the works, which removes these limitations.

build/createjsTheme/assets/scss/main.scss

@@ -226,6 +226,9 @@ th {
   padding: 0 20px 0 25px;
   max-width: 104rem;
 }
+.content.source-content{
+  max-width: none;
+}
 .sidebar {
   padding: 0 2em;
 }

build/createjsTheme/layouts/main.handlebars

@@ -35,7 +35,7 @@
             {{>options}}
             <div class="apidocs">
                 <div id="docs-main">
-                    <div class="content">
+                    <div class="content{{#if fileName}} source-content{{/if}}">
                         {{>layout_content}}
                     </div>
                 </div>

extras/FauxCanvas/FauxCanvas.js

@@ -52,7 +52,9 @@
 		// gecko / mozilla:
 		"mozCurrentTransform","mozCurrentTransformInverse","mozDash","mozDashOffset","mozFillRule","mozImageSmoothingEnabled","mozTextStyle",
 		// webkit:
-		"webkitLineDash", "webkitLineDashOffset"
+		"webkitLineDash", "webkitLineDashOffset",
+		// canvas:
+		"style"
 		];
 	FauxCanvas.METHODS = [
 		// all browsers:
@@ -62,7 +64,12 @@
 		// webkit:
 		"clearShadow","drawImageFromRect","setAlpha","setCompositeOperation","setLineWidth","setLineCap","setLineJoin","setMiterLimit","setStrokeColor","setFillColor","setShadow",
 		// canvas:
-		"addEventListener","removeEventListener"
+		"addEventListener","removeEventListener",
+		// webgl:
+		"enable","blendFuncSeparate","pixelStorei","clearColor","viewport","attachShader","linkProgram","getProgramParameter","getProgramInfoLog","getAttribLocation","getUniformLocation","enableVertexAttribArray","useProgram","createShader","shaderSource","compileShader","getShaderParameter","createBuffer","bindBuffer","vertexAttribPointer","bufferData","bindTexture","texImage2D","texParameteri","activeTexture","uniform1i","uniformMatrix3fv","bufferSubData","drawElements","bindFrameBuffer","createFrameBuffer","uniform1iv","getShaderInfoLog","uniformMatrix4fv","uniformMatrix1i","createProgram","drawArrays","createTexture"
+		];
+	FauxCanvas.WEBGL_PROPERTIES = [
+		"ACTIVE_TEXTURE","ALIASED_LINE_WIDTH_RANGE","ALIASED_POINT_SIZE_RANGE","ALPHA_BITS","ARRAY_BUFFER_BINDING","BLEND","BLEND_COLOR","BLEND_DST_ALPHA","BLEND_DST_RGB","BLEND_EQUATION_ALPHA","BLEND_EQUATION_RGB","BLEND_SRC_ALPHA","BLEND_SRC_RGB","BLUE_BITS","COLOR_CLEAR_VALUE","COLOR_WRITEMASK","COMPRESSED_TEXTURE_FORMATS","CULL_FACE","CULL_FACE_MODE","CURRENT_PROGRAM","DEPTH_BITS","DEPTH_CLEAR_VALUE","DEPTH_FUNC","DEPTH_RANGE","DEPTH_TEST","DEPTH_WRITEMASK","DITHER","ELEMENT_ARRAY_BUFFER_BINDING","FRAMEBUFFER_BINDING","FRONT_FACE","GENERATE_MIPMAP_HINT","GREEN_BITS","LINE_WIDTH","MAX_TEXTURE_MAX_ANISOTROPY_EXT","MAX_COMBINED_TEXTURE_IMAGE_UNITS","MAX_CUBE_MAP_TEXTURE_SIZE","MAX_FRAGMENT_UNIFORM_VECTORS","MAX_RENDERBUFFER_SIZE","MAX_TEXTURE_IMAGE_UNITS","MAX_TEXTURE_SIZE","MAX_VARYING_VECTORS","MAX_VERTEX_ATTRIBS","MAX_VERTEX_TEXTURE_IMAGE_UNITS","MAX_VERTEX_UNIFORM_VECTORS","MAX_VIEWPORT_DIMS","PACK_ALIGNMENT","POLYGON_OFFSET_FACTOR","POLYGON_OFFSET_FILL","POLYGON_OFFSET_UNITS","RED_BITS","RENDERBUFFER_BINDING","RENDERER","SAMPLE_BUFFERS","SAMPLE_COVERAGE_INVERT","SAMPLE_COVERAGE_VALUE","SAMPLES","SCISSOR_BOX","SCISSOR_TEST","SHADING_LANGUAGE_VERSION","STENCIL_BACK_FAIL","STENCIL_BACK_FUNC","STENCIL_BACK_PASS_DEPTH_FAIL","STENCIL_BACK_PASS_DEPTH_PASS","STENCIL_BACK_REF","STENCIL_BACK_VALUE_MASK","STENCIL_BACK_WRITEMASK","STENCIL_BITS","STENCIL_CLEAR_VALUE","STENCIL_FAIL","STENCIL_FUNC","STENCIL_PASS_DEPTH_FAIL","STENCIL_PASS_DEPTH_PASS","STENCIL_REF","STENCIL_TEST","STENCIL_VALUE_MASK","STENCIL_WRITEMASK","SUBPIXEL_BITS","TEXTURE_BINDING_2D","TEXTURE_BINDING_CUBE_MAP","UNPACK_ALIGNMENT","UNPACK_COLORSPACE_CONVERSION_WEBGL","UNPACK_FLIP_Y_WEBGL","UNPACK_PREMULTIPLY_ALPHA_WEBGL","VENDOR","VERSION","VIEWPORT"
 		];
 
 // initialization:
@@ -74,12 +81,12 @@
 	p.initialize = function (width, height, replaceInternal) {
 		var methods = FauxCanvas.METHODS;
 		for (var i= 0, l=methods.length; i<l; i++) {
-			this[methods[i]] = function() {};
+			this[methods[i]] = function() { return {}; };
 		}
 
 		var props = FauxCanvas.PROPERTIES;
 		for (i= 0, l=props.length; i<l; i++) {
-			this[props[i]] = null;
+			this[props[i]] = {};
 		}
 
 		this.width = width||300;
@@ -101,15 +108,36 @@
 
 	/**
 	 * Enables or disables logging by overriding (or restoring) the getContext method on the target canvas to return
-	 * the FauxCanvas instance as a proxy for the "2d" context.
-	 * @method setEnabled
-	 * @param {Boolean} val True or false.
+	 * the FauxCanvas instance as a proxy for the "2d", "webgl", or "experimental-webgl" contexts.
+	 * @method getContext
+	 * @param {String} type
+	 * @param {Object} options
 	 **/
-	p.getContext = function(type) {
+	p.getContext = function(type, options) {
 		if (type == "2d") { return this; }
+
+		if (type === "webgl" || type === "experimental-webgl"){
+			var canvas = document.createElement("canvas");
+			this._glCtx = canvas.getContext(type, options);
+
+			var props = FauxCanvas.WEBGL_PROPERTIES;
+			for (var i=0, l=props.length; i<l; i++) {
+				this[props[i]] = this._glCtx[props[i]];
+			}
+			return this;
+		}
+
 		throw("Context not supported: "+type);
 	};
 
+	/**
+	 * Mimics the return values of WebGl's context.
+	 * @param {Number} type The parameter to look up.
+	 */
+	p.getParameter = function(type) {
+		return this._glCtx.getParameter(type);
+	};
+
 // private methods:
 
 	window.FauxCanvas = FauxCanvas;

src/easeljs/display/Graphics.js

@@ -597,7 +597,7 @@ this.createjs = this.createjs||{};
 	};
 
 
-// public methods that roughly map to Flash graphics APIs:
+// public methods that roughly map to Adobe Flash/Animate graphics APIs:
 	/**
 	 * Clears all drawing instructions, effectively resetting this Graphics instance. Any line and fill styles will need
 	 * to be redefined to draw shapes following a clear call. A tiny API method "c" also exists.
@@ -850,7 +850,7 @@ this.createjs = this.createjs||{};
 	/**
 	 * Maps the familiar ActionScript <code>curveTo()</code> method to the functionally similar {{#crossLink "Graphics/quadraticCurveTo"}}{{/crossLink}}
 	 * method.
-	 * @method quadraticCurveTo
+	 * @method curveTo
 	 * @param {Number} cpx
 	 * @param {Number} cpy
 	 * @param {Number} x

src/easeljs/display/MovieClip.js

@@ -193,7 +193,7 @@ this.createjs = this.createjs||{};
 		 * @type Array
 		 * @default null
 		 */
-		this.frameBounds = this.frameBounds||null; // TODO: Deprecated. This is for backwards support of FlashCC
+		this.frameBounds = this.frameBounds||null; // TODO: Deprecated. This is for backwards support of Flash/Animate
 
 		/**
 		 * By default MovieClip instances advance one frame per tick. Specifying a framerate for the MovieClip
@@ -354,7 +354,7 @@ this.createjs = this.createjs||{};
 
 	/**
 	 * Returns the duration of this MovieClip in seconds or ticks. Identical to {{#crossLink "MovieClip/duration:property"}}{{/crossLink}}
-	 * and provided for Flash API compatibility.
+	 * and provided for Adobe Flash/Animate API compatibility.
 	 * @property totalFrames
 	 * @type {Number}
 	 * @readonly
@@ -383,7 +383,7 @@ this.createjs = this.createjs||{};
 	 * @method initialize
 	 * @deprecated in favour of `createjs.promote()`
 	 **/
-	p.initialize = MovieClip; // TODO: Deprecated. This is for backwards support of FlashCC
+	p.initialize = MovieClip; // TODO: Deprecated. This is for backwards support of Adobe Flash/Animate
 
 	/**
 	 * Returns true or false indicating whether the display object would be visible if drawn to a canvas.
@@ -613,7 +613,7 @@ this.createjs = this.createjs||{};
 
 		if (child instanceof MovieClip) {
 			child._synchOffset = offset;
-			// TODO: this does not precisely match Flash. Flash loses track of the clip if it is renamed or removed from the timeline, which causes it to reset.
+			// TODO: this does not precisely match Adobe Flash/Animate, which loses track of the clip if it is renamed or removed from the timeline, which causes it to reset.
 			if (child.mode == MovieClip.INDEPENDENT && child.autoReset && !this._managed[child.id]) { child._reset(); }
 		}
 		this._managed[child.id] = 2;

src/easeljs/display/Sprite.js

@@ -173,7 +173,7 @@ this.createjs = this.createjs||{};
 	 * @method initialize
 	 * @deprecated in favour of `createjs.promote()`
 	 **/
-	p.initialize = Sprite; // TODO: Deprecated. This is for backwards support of FlashCC spritesheet export.
+	p.initialize = Sprite; // TODO: Deprecated. This is for backwards support of Flash/Animate spritesheet export.
 
 
 // events:

src/easeljs/display/SpriteSheet.js

@@ -175,10 +175,10 @@ this.createjs = this.createjs||{};
 	 * Spritesheets can be created manually by combining images in PhotoShop, and specifying the frame size or
 	 * coordinates manually, however there are a number of tools that facilitate this.
 	 * <ul>
-	 *     <li>Exporting SpriteSheets or HTML5 content from Flash Pro supports the EaselJS SpriteSheet format.</li>
+	 *     <li>Exporting SpriteSheets or HTML5 content from Adobe Flash/Animate supports the EaselJS SpriteSheet format.</li>
 	 *     <li>The popular <a href="https://www.codeandweb.com/texturepacker/easeljs" target="_blank">Texture Packer</a> has
 	 *     EaselJS support.
-	 *     <li>SWF animations in Flash can be exported to SpriteSheets using <a href="http://createjs.com/zoe" target="_blank"></a></li>
+	 *     <li>SWF animations in Adobe Flash/Animate can be exported to SpriteSheets using <a href="http://createjs.com/zoe" target="_blank"></a></li>
 	 * </ul>
 	 *
 	 * <h3>Cross Origin Issues</h3>

src/easeljs/geom/DisplayProps.js

@@ -66,7 +66,7 @@ this.createjs = this.createjs||{};
 		/**
 		 * Property representing the compositeOperation that will be applied to a display object.
 		 * You can find a list of valid composite operations at:
-		 * <a href="https://developer.mozilla.org/en/Canvas_tutorial/Compositing">https://developer.mozilla.org/en/Canvas_tutorial/Compositing</a>
+		 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing">https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing</a>
 		 * @property compositeOperation
 		 * @type String
 		 **/

src/easeljs/geom/Rectangle.js

@@ -143,8 +143,8 @@ this.createjs = this.createjs||{};
 	 * @method pad
 	 * @param {Number} top
 	 * @param {Number} left
-	 * @param {Number} right
 	 * @param {Number} bottom
+	 * @param {Number} right
 	 * @return {Rectangle} This instance. Useful for chaining method calls.
 	 * @chainable
 	*/